/* AkA Hub — free Roblox scripts.
   Built on the VortexDMA look: pure black, one typeface (Poppins), sentence-case headings,
   plain gray labels, the red accent only on the logo, the primary button and the active nav.
   The wide black face (Archivo Expanded) is only used for game names on the big art panels. */

:root{
  --accent:#ff2e2e;--accent-2:#ff4a4a;--accent-rgb:255,46,46;
  --bg:#000;--card:#0a0a0a;--card2:#0f0f0f;--line:#1c1c1c;--line2:#2a2a2a;--line3:#3a3a3a;
  --text:#fff;--mute:#a0a0a0;--dim:#6f6f6f;
  --ok:#3ddc84;--warn:#f5b942;--bad:#ff5a5a;
  --font:"Poppins","Segoe UI",system-ui,sans-serif;
  --wide:"Archivo","Arial Black","Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,"Liberation Mono",monospace;
  --max:1180px;--gut:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}

/* ---------- nav: transparent over the water, dark glass once you scroll ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;height:76px;padding:0 clamp(18px,3vw,44px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
body.scrolled .nav,body.solid .nav{background:rgba(0,0,0,.76);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:rgba(var(--accent-rgb),.16)}
.brand{display:flex;align-items:center;gap:10px;margin-left:clamp(0px,15vw,300px);text-decoration:none;flex:none}
.brand img{width:36px;height:36px;border-radius:9px;filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.4))}
.nav-links{display:flex;gap:34px;margin-left:38px}
.nav-links a{font:600 13px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;transition:color .15s}
.nav-links a:hover,.nav-links a.on{color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto;margin-right:clamp(0px,15vw,300px)}
.pill-btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;border-radius:999px;background:#141414;border:1px solid rgba(var(--accent-rgb),.35);color:#fff;font:700 12.5px var(--font);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.pill-btn:hover{background:#1a0707;border-color:rgba(var(--accent-rgb),.7)}
.pill-btn:active{transform:translateY(1px)}
.pill-btn svg{width:19px;height:19px;fill:var(--accent);flex:none}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;background:#141414;border:1px solid #2b2b2b;cursor:pointer;transition:border-color .15s,background .15s}
.icon-btn:hover{border-color:#444;background:#1b1b1b}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.nav-burger{display:none;width:42px;height:42px;border-radius:999px;border:1px solid #2b2b2b;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.nav-burger i{display:block;width:16px;height:1.5px;background:#fff;transition:transform .2s,opacity .2s}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero: the water ---------- */
.hero-x{position:relative;height:100vh;height:100svh;min-height:600px;background:#000;overflow:hidden}
.hero-x.short{height:50vh;min-height:360px}
.water{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;background:#000}
.water-fallback{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(56px,12vw,190px)/1 var(--font);color:var(--accent);pointer-events:none}
.hero-find{position:absolute;left:50%;top:67%;transform:translateX(-50%);width:min(580px,calc(100vw - 36px));z-index:4}
.hero-x.short .hero-find{top:auto;bottom:38px}
.find{position:relative}
.find-box{display:flex;align-items:center;height:56px;border-radius:999px;background:rgba(14,14,14,.78);border:1px solid #2a2a2a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s,background .2s}
.find-box:focus-within{border-color:rgba(var(--accent-rgb),.55);background:rgba(14,14,14,.92)}
.find-box svg{flex:none;width:19px;height:19px;margin:0 12px 0 22px;fill:none;stroke:#8a8a8a;stroke-width:2;stroke-linecap:round}
.find-box input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font:500 15.5px var(--font);outline:none}
.find-box input::placeholder{color:#7d7d7d}
.find-box input::-webkit-search-cancel-button{display:none}
.find-box kbd{flex:none;margin-right:18px;font:600 12px var(--font);color:#777;border:1px solid #333;border-radius:6px;padding:1px 7px}
.find-hint{margin:14px 0 0;text-align:center;font:500 13px var(--font);color:#7a7a7a}
.find-hint a{color:#c9c9c9;text-decoration:none;border-bottom:1px solid #3a3a3a;transition:color .15s,border-color .15s}
.find-hint a:hover{color:#fff;border-color:#fff}
.results{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#0b0b0b;border:1px solid #242424;border-radius:18px;padding:6px;max-height:min(420px,52vh);overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.9);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s}
.results.open{opacity:1;transform:none;pointer-events:auto}
.r-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;text-decoration:none;color:#fff}
.r-item:hover,.r-item.on{background:#161616}
.r-item img{flex:none;width:72px;aspect-ratio:16/9;border-radius:7px;object-fit:cover;background:#111}
.r-item img.sq{width:40px;aspect-ratio:1;border-radius:9px}
.r-item b{display:block;font:600 14.5px/1.3 var(--font)}
.r-item small{display:block;font:500 12.5px var(--font);color:var(--dim)}
.r-empty{padding:14px 12px;color:var(--mute);font-size:14px}
.r-group{padding:8px 10px 4px;font:500 12px var(--font);color:var(--dim)}
.pip{position:absolute;right:30px;bottom:28px;z-index:3;width:220px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid rgba(var(--accent-rgb),.45);box-shadow:0 12px 40px rgba(0,0,0,.7);background:#000;display:block;transition:transform .25s,border-color .25s}
.pip:hover{transform:translateY(-3px);border-color:var(--accent)}
.pip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.1s ease,transform 6s linear}
.pip img.on{opacity:1;transform:scale(1)}

/* ---------- plain sections ---------- */
main{display:block}
.sec{padding:88px 0 0}
.sec.first{padding-top:64px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 26px}
.sec-head h2,.h1{margin:0;font:700 34px/1.15 var(--font);letter-spacing:-.02em}
.sec-head p,.intro{margin:10px 0 0;max-width:62ch;font-size:15px;line-height:1.65;color:var(--mute)}
.more{flex:none;font:600 14px var(--font);color:#fff;text-decoration:none;border-bottom:1px solid #444;padding-bottom:2px;white-space:nowrap;transition:border-color .15s}
.more:hover{border-color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:999px;background:var(--accent);color:#fff;font:600 14.5px var(--font);text-decoration:none;border:0;cursor:pointer;transition:background .15s,transform .15s,box-shadow .2s}
.btn:hover{background:var(--accent-2);box-shadow:0 12px 34px -14px rgba(var(--accent-rgb),.9)}
.btn:active{transform:translateY(1px)}
.btn.alt{background:#141414;border:1px solid var(--line2);color:#fff}
.btn.alt:hover{background:#1c1c1c;box-shadow:none}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}

/* script cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);transition:border-color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.card:hover{border-color:var(--line3);transform:translateY(-3px)}
.card[hidden]{display:none}
.card-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050505;border-bottom:1px solid var(--line)}
.card-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.94);transition:transform .7s cubic-bezier(.23,1,.32,1),filter .4s}
.card:hover .card-img img{transform:scale(1.05);filter:saturate(1.05) brightness(1)}
.card-body{display:flex;flex-direction:column;flex:1;padding:15px 18px 16px}
.card-game{display:flex;align-items:center;gap:8px;font:500 13px var(--font);color:var(--dim)}
.card-game img{width:18px;height:18px;border-radius:5px;flex:none}
.card h3{margin:7px 0 0;font:600 17px/1.3 var(--font);color:#fff}
.card-feat{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;padding-top:14px;font:500 13px var(--font);color:var(--mute)}
.card-date{margin-left:auto;color:var(--dim)}
.st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.st.patched::before{background:var(--bad)}
.st.updating::before{background:var(--warn)}
.card.patched .card-img img{filter:grayscale(.85) brightness(.6)}

/* game tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#050505;color:#fff;text-decoration:none}
.tile[hidden]{display:none}
.tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.74) saturate(.95);transition:transform .7s cubic-bezier(.23,1,.32,1),filter .4s}
.tile:hover img{transform:scale(1.05);filter:brightness(.95) saturate(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.2) 55%,transparent)}
.tile-txt{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;align-items:flex-end;gap:12px}
.tile-txt img{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.18);filter:none;transform:none!important;flex:none}
.tile-name{display:block;font:700 17px/1.2 var(--font)}
.tile-count{display:block;margin-top:3px;font:500 13px var(--font);color:rgba(255,255,255,.72)}

/* three plain columns */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;border-top:1px solid var(--line);padding-top:28px}
.cols h3{margin:0 0 8px;font:600 17px var(--font)}
.cols h3 span{color:var(--dim);margin-right:8px}
.cols p{margin:0;font-size:14.5px;line-height:1.65;color:var(--mute)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font:600 16px var(--font)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid #888;border-bottom:2px solid #888;transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq details p{margin:0 0 20px;max-width:75ch;font-size:15px;line-height:1.7;color:var(--mute)}
.faq details[open] p{animation:faqIn .35s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* discord */
.join{display:flex;align-items:center;justify-content:space-between;gap:28px;border-top:1px solid var(--line);padding-top:32px}
.join h2{margin:0;font:700 28px/1.2 var(--font);letter-spacing:-.01em}
.join p{margin:8px 0 0;color:var(--mute);max-width:56ch}

/* ---------- ads (clearly marked, never styled like content) ---------- */
.ad{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;margin:0 auto;overflow:hidden}
.ad-label{font:500 11px var(--font);color:#555;line-height:1}
.ad-slot{display:flex;justify-content:center;align-items:center;max-width:100%;min-height:50px}
.ad-slot iframe{max-width:100%}
.ad-slot[data-src],.ad-slot[data-lazy]{width:var(--w);min-height:var(--h)}
.ad-slot[data-lazy]>ins{display:block;width:100%}
.ad.ph .ad-slot{width:var(--w);height:var(--h);padding:0 12px;border:1px dashed #333;border-radius:10px;color:#5f5f5f;font:500 12.5px/1.4 var(--font);text-align:center;background:repeating-linear-gradient(135deg,#060606 0 12px,#0a0a0a 12px 24px)}
@media (max-width:820px){.ad-slot[data-src],.ad-slot[data-lazy]{width:var(--mw);min-height:var(--mh)}.ad.ph .ad-slot{width:var(--mw);height:var(--mh)}}
.ad-band{padding:40px 0 0}
.ad-band.after-hero{padding-top:36px}
.grid>.ad,.tiles>.ad{grid-column:1/-1;padding:6px 0}
.ad-sticky{display:none}

/* ---------- /scripts filters ---------- */
.filters{position:sticky;top:76px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 0;margin:0 0 22px;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.f-search{display:flex;align-items:center;flex:1 1 260px;height:44px;border-radius:999px;background:#0e0e0e;border:1px solid var(--line2);transition:border-color .2s}
.f-search:focus-within{border-color:rgba(var(--accent-rgb),.55)}
.f-search svg{width:17px;height:17px;margin:0 10px 0 16px;fill:none;stroke:#888;stroke-width:2;stroke-linecap:round;flex:none}
.f-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font:500 14.5px var(--font);outline:none}
.f-search input::-webkit-search-cancel-button{display:none}
.f-select{height:44px;border-radius:999px;background:#0e0e0e;border:1px solid var(--line2);color:#fff;font:500 14px var(--font);padding:0 38px 0 16px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:11px;cursor:pointer}
.f-select:focus{outline:none;border-color:rgba(var(--accent-rgb),.55)}
.f-select option{background:#0e0e0e}
.chip{height:44px;padding:0 17px;border-radius:999px;background:#0e0e0e;border:1px solid var(--line2);color:var(--mute);font:500 14px var(--font);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.chip:hover{color:#fff;border-color:#3d3d3d}
.chip[aria-pressed="true"]{color:#fff;border-color:rgba(var(--accent-rgb),.6);background:#170808}
.f-count{margin-left:auto;font:500 13.5px var(--font);color:var(--dim);white-space:nowrap}
.empty{padding:60px 0;text-align:center;color:var(--mute)}
.empty button{all:unset;cursor:pointer;color:#fff;border-bottom:1px solid #555}

/* ---------- /games: slanted art panels drifting like the VortexDMA shop ---------- */
.games-sec{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.games{--s:13vh;--g:10px;display:flex;height:100%;will-change:transform}
.game{position:relative;flex:0 0 calc(100vw / 2.4);width:calc(100vw / 2.4);height:100%;margin-right:calc(var(--g) - var(--s));clip-path:polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);overflow:hidden;color:#fff;text-decoration:none;opacity:0;animation:panelIn .8s cubic-bezier(.23,1,.32,1) forwards}
.game:nth-child(2){animation-delay:.1s}.game:nth-child(3){animation-delay:.2s}.game:nth-child(4){animation-delay:.3s}
@keyframes panelIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.games-sec.static .games{width:100%!important}
.games-sec.static .game{flex:1 1 0;width:auto}
.games-sec.static .game:first-child{clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%)}
.games-sec.static .game:last-child{clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%);margin-right:0}
.games-sec.static .game:only-child{clip-path:none}
.game-art{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:brightness(.8) saturate(.95);transition:filter .6s;animation:drift 22s ease-in-out infinite alternate}
.game:nth-child(3n+2) .game-art{animation-duration:26s;animation-delay:-7s}
.game:nth-child(3n) .game-art{animation-duration:19s;animation-delay:-13s}
@keyframes drift{from{transform:scale(1) translate(-1%,.5%)}to{transform:scale(1.045) translate(1%,-1%)}}
.game:hover .game-art,.game:focus-within .game-art{filter:brightness(1) saturate(1.05)}
.game-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.08) 52%,transparent 62%),linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 150px)}
.game-info{position:absolute;bottom:112px;left:26px;right:calc(var(--s) + 26px);text-shadow:0 2px 16px rgba(0,0,0,.6)}
.games-sec.static .game:only-child .game-info,.games-sec.static .game:last-child .game-info{right:26px}
.game-name{margin:0 0 14px;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:clamp(26px,2.8vw,50px);line-height:.98;letter-spacing:.01em;text-transform:uppercase;overflow-wrap:normal;word-break:keep-all}
.game-count{margin:0;font:600 19px/1.3 var(--font)}
.game-latest{margin:6px 0 0;font:400 14.5px/1.5 var(--font);color:rgba(255,255,255,.75)}
.game-foot{position:absolute;left:26px;right:calc(var(--s) + 22px);bottom:42px}
.games-sec.static .game:only-child .game-foot,.games-sec.static .game:last-child .game-foot{right:26px}
.game-btns{display:flex;gap:10px;max-width:420px}
.card-btn{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:8px;padding:13px 16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:4px;color:rgba(255,255,255,.88);text-decoration:none;font:600 13px var(--font);letter-spacing:.1em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.card-btn:hover,.card-btn:focus-visible{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32);color:#fff;outline:none}
.card-btn.go{background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.4);color:#fff}
.card-btn.go:hover{background:rgba(var(--accent-rgb),.3);border-color:rgba(var(--accent-rgb),.65)}
.card-btn svg{width:10px;height:10px;fill:currentColor}
.card-btn:hover svg{animation:arrowSlide .4s ease forwards}
@keyframes arrowSlide{0%{transform:none;opacity:1}45%{transform:translateX(8px);opacity:0}46%{transform:translateX(-6px);opacity:0}100%{transform:none;opacity:1}}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:30;background:none;border:0;color:rgba(255,255,255,.3);cursor:pointer;padding:14px;line-height:1;transition:color .25s,transform .25s}
.carousel-arrow svg{width:22px;height:28px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;display:block}
.carousel-arrow:hover,.carousel-arrow:focus-visible{color:rgba(255,255,255,.85);transform:translateY(-50%) scale(1.25)}
.carousel-arrow.prev{left:10px}.carousel-arrow.next{right:10px}

/* ---------- game page ---------- */
.ghero{position:relative;height:66vh;min-height:460px;overflow:hidden;background:#000}
.ghero-art{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:brightness(.7) saturate(.95);animation:drift 24s ease-in-out infinite alternate}
.ghero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.1) 75%),linear-gradient(to top,#000 0%,rgba(0,0,0,.4) 28%,transparent 55%),linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 150px)}
.ghero-in{position:absolute;left:0;right:0;bottom:48px;z-index:2}
.ghero .crumbs{margin-bottom:14px}
.ghero h1{margin:0;max-width:16ch;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:clamp(34px,5.2vw,78px);line-height:.96;letter-spacing:.005em;text-transform:uppercase}
.ghero p{margin:16px 0 0;max-width:58ch;color:#d0d0d0;font-size:15.5px}
.ghero .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* ---------- script page ---------- */
.page{padding-top:108px}
.crumbs{font:500 13px var(--font);color:var(--dim);margin:0 0 16px}
.crumbs a{color:var(--dim);text-decoration:none;transition:color .15s}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 7px;color:#3d3d3d}
.sp{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.sp.solo{grid-template-columns:minmax(0,1fr);max-width:860px;margin:0 auto}
.sp-rail .ad{position:sticky;top:100px}
.sp-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:30px;align-items:center}
.sp-info{min-width:0}
.sp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.sp-tags>span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);background:#0c0c0c;font:500 13px var(--font);color:#d8d8d8}
.sp-info .btn{margin-top:22px}
.sp-game{display:inline-flex;align-items:center;gap:9px;font:500 14px var(--font);color:var(--mute);text-decoration:none;transition:color .15s}
.sp-game:hover{color:#fff}
.sp-game img{width:24px;height:24px;border-radius:7px}
.sp h1{margin:10px 0 0;font:700 40px/1.1 var(--font);letter-spacing:-.02em;overflow-wrap:anywhere}
.sp-sub{margin:10px 0 0;font-size:15.5px;color:var(--mute)}
.sp-sub .st{margin-right:6px}
.sp-media{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:#050505}
.sp-media img{width:100%;height:100%;object-fit:cover}
.sp-block{margin-top:34px}
.sp-block h2{margin:0 0 14px;font:700 22px/1.25 var(--font);letter-spacing:-.01em}
.sp .ad-band{padding:26px 0 0}

/* the script box */
.codebox{margin-top:26px;border:1px solid var(--line2);border-radius:16px;background:#070707;overflow:hidden}
.code-head{display:flex;align-items:center;gap:12px;height:54px;padding:0 10px 0 18px;border-bottom:1px solid var(--line)}
.code-head b{font:600 14px var(--font)}
.code-head small{font:500 13px var(--font);color:var(--dim)}
.copy{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--accent);color:#fff;font:600 13.5px var(--font);cursor:pointer;transition:background .15s,transform .15s,opacity .2s}
.copy:hover{background:var(--accent-2)}
.copy:active{transform:scale(.97)}
.copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.copy .ok{display:none}
.copy.done{background:#1f7a47}
.copy.done .ok{display:block}.copy.done .cp{display:none}
.code-wrap{position:relative}
pre.code{font-variant-ligatures:none;margin:0;padding:20px 20px 22px;font:500 14px/1.7 var(--mono);color:#e8e8e8;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;max-height:420px;overflow:auto;tab-size:2;transition:filter .5s ease,opacity .5s ease}
pre.code .k{color:#ff7a7a}
pre.code .s{color:#f2c572}
pre.code .n{color:#9fd4ff}
pre.code .f{color:#fff;font-weight:600}
pre.code .c{color:#6a6a6a;font-style:italic}
pre.code .p{color:#8c8c8c}
.codebox[data-state="locked"] pre.code,.codebox[data-state="counting"] pre.code{filter:blur(7px);opacity:.45;user-select:none;pointer-events:none;max-height:120px;overflow:hidden}
.codebox[data-state="locked"] .copy,.codebox[data-state="counting"] .copy{opacity:.35;pointer-events:none}
.gate{display:none}
.codebox[data-state="locked"] .gate,.codebox[data-state="counting"] .gate{display:flex}
.gate{position:absolute;inset:0;align-items:center;justify-content:center;gap:28px;padding:20px;background:radial-gradient(60% 90% at 50% 50%,rgba(7,7,7,.5),rgba(7,7,7,.92))}
.codebox[data-state="counting"] .code-wrap{min-height:320px}
.codebox[data-state="locked"] .code-wrap{min-height:160px}
.gate-go{display:flex;flex-direction:column;align-items:center;gap:10px}
.gate-go small{font:500 13px var(--font);color:var(--mute)}
.gate-go .btn{height:52px;padding:0 34px;font-size:15.5px}
.gate-wait{display:none;align-items:center;gap:16px}
.codebox[data-state="counting"] .gate-go{display:none}
.codebox[data-state="counting"] .gate-wait{display:flex}
.ring{position:relative;width:64px;height:64px;flex:none}
.ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .bg{stroke:#222}
.ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 20px var(--font)}
.gate-wait strong{display:block;font:600 15.5px var(--font)}
.gate-wait small{display:block;font:500 13px var(--font);color:var(--mute)}
.gate-ad{display:none}
.codebox[data-state="counting"] .gate-ad{display:flex}
.codebox[data-state="open"] pre.code{animation:codeIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes codeIn{from{filter:blur(6px);opacity:.3}to{filter:none;opacity:1}}
.code-foot{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 18px;border-top:1px solid var(--line);font:500 13px var(--font);color:var(--dim)}

/* facts + features + steps */
.facts{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;margin:0;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts dt{color:var(--mute)}
.facts dd{margin:0;font-weight:600;text-align:right}
.facts dd a{color:#fff;text-decoration:none;border-bottom:1px solid #444}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;margin:0;padding:0;list-style:none}
.feats li{position:relative;padding-left:22px;color:#dcdcdc;font-size:15px;line-height:1.6}
.feats li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:#3a3a3a}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none;border-top:1px solid var(--line);padding-top:22px}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font:700 15px var(--font);color:var(--dim);margin-bottom:6px}
.steps b{display:block;font:600 15.5px var(--font);margin-bottom:4px}
.steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mute)}
.note{margin:18px 0 0;padding:14px 16px;border:1px solid var(--line2);border-radius:12px;font-size:14px;line-height:1.6;color:#cfcfcf}

/* legal pages */
.doc{max-width:760px}
.doc h1{margin:0 0 6px;font:700 38px/1.15 var(--font);letter-spacing:-.02em}
.doc h2{margin:34px 0 8px;font:600 19px var(--font)}
.doc p,.doc li{color:#c9c9c9;font-size:15.5px;line-height:1.75}
.doc a{color:#fff}
.doc .upd{color:var(--dim);font-size:14px}

/* ---------- age question ---------- */
.age{position:fixed;left:24px;bottom:24px;z-index:80;width:min(380px,calc(100vw - 28px));padding:20px 20px 18px;border-radius:18px;background:#0c0c0c;border:1px solid #262626;box-shadow:0 30px 80px -20px rgba(0,0,0,.95);opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.age.on{opacity:1;transform:none}
.age p{margin:0 28px 14px 0;font-size:13.5px;line-height:1.55;color:var(--mute)}
.age p b{display:block;margin-bottom:4px;font:600 16px var(--font);color:#fff}
.age-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.age-btns button{height:42px;border-radius:999px;border:1px solid var(--line2);background:#151515;color:#fff;font:600 13.5px var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.age-btns button:hover{background:#1f1f1f;border-color:#444}
.age-x{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;border:1px solid #2c2c2c;background:transparent;color:#999;font:500 17px/1 var(--font);cursor:pointer}
.age-x:hover{color:#fff;border-color:#555}
@media (max-width:820px){.age{left:14px;right:14px;bottom:14px;width:auto}body.has-sticky .age{bottom:76px}}

/* ---------- search overlay (Ctrl+K or /) ---------- */
.so{position:fixed;inset:0;z-index:90;display:none;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.so.open{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.so-box{position:relative;width:min(640px,calc(100vw - 28px));margin:12vh auto 0}
.so .results{position:static;margin-top:10px;opacity:1;transform:none;pointer-events:auto;max-height:60vh}
.so .results:empty{display:none}

/* ---------- footer ---------- */
.foot{margin-top:110px;border-top:1px solid var(--line);padding:36px clamp(18px,3vw,44px) 44px}
.foot-in{max-width:calc(var(--max) - 2 * var(--gut));margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
.foot .brand{margin-left:0}
.foot .brand img{width:30px;height:30px}
.foot .brand b{font:700 16px var(--font)}
.foot small{display:block;margin-top:12px;max-width:66ch;font:400 12.5px/1.65 var(--font);color:var(--dim)}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 24px;max-width:520px;justify-content:flex-end}
.foot-links a{font:500 13.5px var(--font);color:var(--mute);text-decoration:none;transition:color .15s}
.foot-links a:hover{color:#fff}

.toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#111;border:1px solid #2c2c2c;border-radius:999px;padding:11px 20px;font:500 14px var(--font);box-shadow:0 20px 50px -10px rgba(0,0,0,.9);transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- reveal on scroll (only when JS runs) ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){.brand{margin-left:0}.nav-cta{margin-right:0}}
@media (max-width:1060px){.sp{grid-template-columns:minmax(0,1fr)}.sp-rail{display:none}.grid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .games{--s:0px;--g:0px}
  .game{flex:0 0 100vw;width:100vw;margin-right:0;clip-path:none}
  .game-info{bottom:156px;left:20px;right:20px}
  .game-foot{left:20px;right:20px;bottom:40px}
  .game-shade{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,0) 66%)}
  .game-name{font-size:clamp(30px,9vw,50px)}
  .game-btns{flex-direction:column;max-width:none}
  .carousel-arrow{padding:20px 12px}.carousel-arrow.prev{left:0}.carousel-arrow.next{right:0}
}
@media (max-width:820px){
  .nav{height:68px}
  .nav-links{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;gap:0;margin:0;padding:8px 20px 14px;background:rgba(0,0,0,.97);border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:13.5px}
  .nav-links a:last-child{border-bottom:0}
  .nav-burger{display:flex}
  .nav .pill-btn{display:none}
  .filters{top:68px}
  .hero-x{height:84vh;height:84svh;min-height:480px}
  .hero-find{top:62%}
  .pip{width:132px;right:14px;bottom:14px}
  .ad-sticky.on{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:center;padding:6px 40px calc(6px + env(safe-area-inset-bottom));background:rgba(0,0,0,.94);border-top:1px solid var(--line)}
  .ad-sticky .x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:1px solid #333;background:#111;color:#aaa;font:600 15px/1 var(--font);cursor:pointer}
  body.has-sticky .foot{padding-bottom:100px}
}
@media (max-width:700px){
  :root{--gut:18px}
  .grid,.cols,.facts,.feats,.steps{grid-template-columns:1fr}
  .cols{gap:22px}
  .sec{padding-top:64px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .sec-head h2,.h1{font-size:28px}
  .sp h1{font-size:31px}
  .sp-top{grid-template-columns:1fr;gap:20px}
  .sp-info .btn{width:100%}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile-txt{left:12px;right:12px;bottom:10px;gap:8px}
  .tile-txt img{display:none}
  .tile-name{font-size:14.5px}
  .tile-count{font-size:12px}
  .join{flex-direction:column;align-items:flex-start}
  .foot-in{grid-template-columns:1fr}
  .foot-links{justify-content:flex-start}
  .f-count{width:100%;margin:2px 0 0 4px}
  .filters{gap:8px}
  .chip,.f-select{height:40px;font-size:13.5px}
  .f-search{height:42px}
  .find-box{height:52px}
  .find-box kbd{display:none}
  .ghero{height:60vh}
  .gate{flex-direction:column;gap:18px}
  .codebox[data-state="counting"] .code-wrap{min-height:400px}
  pre.code{font-size:13px;padding:16px}
}
@media (max-width:440px){
  .nav{padding:0 14px}
  .brand img{width:32px;height:32px}
  .hero-find{width:calc(100vw - 28px)}
  .pip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .game,.game-art,.ghero-art{animation:none!important;opacity:1}
  .pip img{transition:none}
}

/* ---------- YouTube unlock screen: water behind a glass panel with three steps ---------- */
.yt{position:fixed;inset:0;z-index:92;overflow-y:auto;background:#000;opacity:0;transition:opacity .35s ease}
.yt.on{opacity:1}
.yt .water{position:fixed;inset:0;width:100%;height:100%}
.yt-x{position:fixed;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid #2c2c2c;background:rgba(10,10,10,.72);color:#bbb;font:500 22px/1 var(--font);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .15s,border-color .15s}
.yt-x:hover{color:#fff;border-color:#555}
.yt-panel{position:relative;z-index:2;width:min(500px,calc(100vw - 32px));margin:max(30vh,230px) auto 40px;padding:22px 22px 20px;border-radius:22px;background:rgba(9,9,9,.76);border:1px solid #262626;-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);box-shadow:0 40px 120px -30px rgba(0,0,0,.95);opacity:0;transform:translateY(22px);transition:transform .5s cubic-bezier(.2,.8,.2,1) .05s,opacity .4s ease .05s}
.yt.on .yt-panel{opacity:1;transform:none}
.yt-head{display:flex;align-items:center;gap:12px}
.yt-head img{width:44px;height:44px;border-radius:11px;flex:none}
.yt-head small{display:block;font:500 13px var(--font);color:var(--dim)}
.yt-head h2{margin:1px 0 0;font:700 21px/1.2 var(--font);letter-spacing:-.01em;overflow-wrap:anywhere}
.yt-bar{height:4px;margin:18px 0 0;border-radius:4px;background:#1c1c1c;overflow:hidden}
.yt-bar i{display:block;width:0;height:100%;border-radius:4px;background:var(--accent);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.yt-lede{margin:12px 0 14px;font-size:14px;color:var(--mute)}
.yt-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.yt-steps li{display:grid;grid-template-columns:30px auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid #232323;border-radius:14px;background:#0d0d0d;transition:border-color .25s,background .25s,opacity .25s}
.yt-steps li.locked{opacity:.42}
.yt-steps li.active{border-color:rgba(var(--accent-rgb),.45);background:#110909}
.yt-steps li.done{border-color:#1d4a30;background:#07130c}
.yt-steps li.waiting{animation:ytWait 1.6s ease-in-out infinite}
.yt-steps li.pop{animation:ytPop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes ytWait{50%{border-color:rgba(var(--accent-rgb),.95)}}
@keyframes ytPop{40%{transform:scale(1.025)}}
.yt-n{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #333;font:700 13px var(--font);color:#bbb;transition:background .25s,border-color .25s}
.yt-n b{transition:opacity .2s}
.yt-n svg{position:absolute;width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.done .yt-n{background:var(--ok);border-color:var(--ok)}
.done .yt-n b{opacity:0}
.done .yt-n svg{opacity:1;transform:none}
.yt-img{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#151515}
.yt-img.round{width:40px;height:40px;aspect-ratio:1;border-radius:50%}
.yt-t{min-width:0}
.yt-t b{display:block;font:600 14.5px/1.3 var(--font)}
.yt-t small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--font);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-go{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;background:var(--accent);color:#fff;font:600 13.5px var(--font);text-decoration:none;white-space:nowrap;transition:background .15s}
.yt-go:hover{background:var(--accent-2)}
.yt-go svg{width:17px;height:17px;fill:currentColor;flex:none}
.locked .yt-go{background:#1b1b1b;color:#777;pointer-events:none}
.yt-ok{display:none;padding:0 6px;font:600 13.5px var(--font);color:var(--ok)}
.done .yt-go{display:none}
.done .yt-ok{display:inline}
.yt-msg{min-height:20px;margin:12px 2px 0;font:500 13.5px var(--font);color:#f2c572}
.yt.all-done .yt-msg{color:var(--ok)}
.yt-get{width:100%;height:52px;margin-top:8px;font-size:15.5px}
.yt-get:disabled{background:#1b1b1b;color:#6d6d6d;cursor:not-allowed;box-shadow:none}
.yt-out{margin-top:4px;animation:faqIn .45s ease}
.yt-out pre.code{max-height:180px;border:1px solid #262626;border-radius:12px;background:#050505;font-size:13px}
.yt-copy{width:100%;height:50px;margin-top:10px}
.yt-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.yt-copy .ok{display:none}
.yt-copy.done{background:#1f7a47}
.yt-copy.done .ok{display:block}
.yt-copy.done .cp{display:none}
.yt-out small{display:block;margin-top:10px;text-align:center;font:500 12.5px var(--font);color:var(--dim)}
@media (max-width:560px){
  .yt-panel{margin-top:max(20vh,150px);padding:18px 16px}
  .yt-steps li{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:11px}
  .yt-img{display:none}
  .yt-head h2{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.yt,.yt-panel{transition:none}.yt-steps li.waiting,.yt-steps li.pop{animation:none}}