:root{
  --bg:#161832; --panel:#1F2247; --panel-2:#282C5C; --line:#343A6E;
  --text:#EFEDFF; --muted:#9AA0D4; --dim:#6E74A8;
  --red:#FF4B3E; --gold:#FFC93C; --jade:#3FD1A0;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Outfit',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3{margin:0;line-height:1.15;font-weight:800;letter-spacing:-.015em}
img{max-width:100%;display:block}
.wrap{max-width:1340px;margin:0 auto;padding:0 22px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------- top bar ---------------- */
.topbar{position:sticky;top:0;z-index:70;background:rgba(22,24,50,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;height:84px;min-width:0}
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto;min-width:0}
.brand svg{width:52px;height:52px;flex:none}
.brand span{font-family:'Bungee',system-ui;font-size:23px;line-height:1.02;max-width:150px;display:block}
.brand em{font-style:normal;color:var(--red)}
.navtools{display:flex;align-items:center;gap:9px;flex:0 1 auto;margin-left:auto;min-width:0}
.icon-btn{width:42px;height:42px;border-radius:10px;background:var(--panel-2);display:grid;place-items:center}
.icon-btn:hover{background:var(--line)}
.search{display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:10px;
  padding:0 14px;height:42px;color:var(--muted);font-weight:500}
.search input{background:none;border:0;outline:0;color:var(--text);width:120px;font:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  border-radius:10px;padding:11px 18px;transition:filter .12s ease,transform .08s ease}
.btn:active{transform:translateY(1px)}
/* --------------------------------------------------------------------------
   MAILING LIST SIGN-UP
   -------------------------------------------------------------------------- */
.signup{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 24px;margin:26px 0 8px}
.signup h2{margin:0 0 6px;font-size:22px}
.signup .lede{color:var(--muted);font-size:15.5px;margin:0 0 18px;max-width:60ch;line-height:1.6}
.signup .row{display:flex;gap:10px;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 260px;min-width:0;background:#13152E;
  border:1px solid var(--line);border-radius:11px;color:var(--text);
  padding:14px 15px;font-size:16px;font-family:inherit}
.signup input[type=email]:focus{outline:none;border-color:var(--gold)}
.signup button{flex:0 0 auto;background:var(--gold);color:#241E00;border:0;
  font-weight:800;font-size:16px;padding:14px 26px;border-radius:11px;
  cursor:pointer;font-family:inherit}
.signup button:hover:not(:disabled){filter:brightness(1.07)}
.signup button:disabled{opacity:.55;cursor:default}
.signup .check{display:flex;gap:10px;align-items:flex-start;margin:15px 0 0}
.signup .check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--gold)}
.signup .check label{font-size:14.5px;color:#C5C1E8;line-height:1.55;max-width:66ch}
.signup .small{color:var(--muted);font-size:13px;margin:13px 0 0;line-height:1.6;max-width:66ch}
.signup .small a{color:var(--gold);text-decoration:underline}
.signup .say{margin:14px 0 0;padding:12px 14px;border-radius:10px;font-size:15px;
  line-height:1.55;display:none;max-width:66ch}
.signup .say.ok{display:block;background:#16351F;border:1px solid #2E7D46;color:#B6F0C6}
.signup .say.bad{display:block;background:#3A1A1E;border:1px solid #8A2B36;color:#F6BFC6}
/* The honeypot: parked far off-screen, untabbable, hidden from screen
   readers. A person never sees it; a bot fills in every field it finds. */
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){
  .signup{padding:22px 18px 20px}
  .signup button{width:100%}
}

/* --------------------------------------------------------------------------
   TOP-OF-PAGE VARIANT

   Sits directly under the header, where the category rail used to. It is a
   full-width band rather than a card, so it reads as part of the page
   furniture. Everything here fights for vertical space: whatever this takes
   up is pushed down on top of the games, so it runs side-by-side on a wide
   screen and stays as short as possible on a phone.
   -------------------------------------------------------------------------- */
.signup-top{border:0;border-bottom:1px solid var(--line);border-radius:0;
  margin:0;padding:16px 0 17px}
.signup-top .signup-inner{display:flex;gap:10px 26px;align-items:center;flex-wrap:wrap}
.signup-top .signup-text{flex:1 1 280px;min-width:0}
.signup-top form{flex:1 1 400px;min-width:0}
.signup-top h2{font-size:19px;margin:0 0 3px}
.signup-top .lede{margin:0;font-size:14px;line-height:1.5;max-width:44ch}
.signup-top input[type=email]{padding:11px 13px;font-size:15px}
.signup-top button{padding:11px 20px;font-size:15px}
.signup-top .check{margin:9px 0 0}
.signup-top .check input{width:16px;height:16px;margin-top:2px}
.signup-top .check label{font-size:12.5px;line-height:1.45;color:var(--muted);max-width:none}
.signup-top .check label a{color:var(--gold);text-decoration:underline}
.signup-top .say{margin:9px 0 0;padding:9px 12px;font-size:14px}

@media(max-width:820px){
  .signup-top{padding:14px 0 15px}
  .signup-top h2{font-size:17px}
  .signup-top .lede{font-size:13.5px}
  .signup-top button{width:auto;flex:0 0 auto}
}
@media(max-width:430px){
  .signup-top .lede{display:none}   /* the heading already says it on a phone */
  .signup-top .row{gap:8px}
  .signup-top button{width:100%}
}

/* A disabled button that still looks and feels clickable reads as a broken
   site. Make the refusal visible. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn:disabled:hover,.btn[disabled]:hover{filter:none}
.btn:disabled:active,.btn[disabled]:active{transform:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{filter:brightness(1.08)}
.btn-gold{background:var(--gold);color:#241E00}
.btn-gold:hover{filter:brightness(1.06)}
.btn-quiet{background:var(--panel-2);color:var(--text)}
.btn-quiet:hover{background:var(--line)}
@media(max-width:900px){.search input{display:none}}
@media(max-width:820px){.brand span{font-size:19px;max-width:120px}.brand svg{width:44px;height:44px}}
@media(max-width:640px){.brand span{display:none}.js-login{display:none}.who-xp{display:none}
  .nav{height:68px;gap:10px}}

.who{display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:10px;
  padding:8px 13px;font-weight:600;font-size:14.5px;max-width:190px}
.who:hover{background:var(--line)}
.who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-xp{color:var(--gold);font-weight:700;font-size:13px;flex:none}

.searchwrap{position:relative;min-width:0}
.results{position:absolute;top:calc(100% + 8px);right:0;width:min(360px,80vw);z-index:90;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);max-height:min(60vh,420px);overflow:auto}
.results .rhead{font-size:13px;color:var(--muted);padding:9px 10px 7px;line-height:1.35}
.rrow{display:flex;align-items:center;gap:11px;padding:8px;border-radius:9px}
.rrow:hover{background:var(--panel-2)}
.rthumb{width:52px;height:38px;border-radius:7px;flex:none;overflow:hidden;
  display:grid;place-items:center;font-size:18px;background:var(--panel-2)}
.rthumb img{width:100%;height:100%;object-fit:cover}
.rrow .rt{display:block;font-weight:700;font-size:14.5px}
.rrow .rc{display:block;font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.results{right:auto;left:0;width:min(320px,86vw)}}

/* ---------------- category rail ---------------- */
.rail{border-bottom:1px solid var(--line);background:var(--bg)}
/* Wraps onto a second line rather than scrolling sideways. A horizontal
   scroller with no visible scrollbar hides categories people never find. */
.rail-scroll{display:flex;flex-wrap:wrap;gap:9px;padding:13px 0}
.chip{display:flex;align-items:center;gap:8px;flex:0 0 auto;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:8px 13px 8px 9px;
  font-weight:600;font-size:14.5px;white-space:nowrap}
.chip:hover{background:var(--panel-2)}
.chip[aria-current]{border-color:var(--gold)}
.chip i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-style:normal;font-size:15px}

/* ---------------- ad zones ---------------- */
.adzone{padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:5px}
.adzone small{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.adslot{width:100%;max-width:970px;display:grid;place-items:center}
.adzone:not(:has(iframe)):not(:has(.house)) small{opacity:.55}
.house{width:100%;min-height:90px;border-radius:10px;display:grid;place-items:center;
  text-align:center;padding:16px;background:var(--panel);border:1px solid var(--line);
  color:var(--muted);font-size:14px}
.house b{display:block;font-weight:800;color:var(--gold);font-size:16px}

/* ---------------- panels & headings ---------------- */
main{padding-bottom:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.panel-head h2{font-size:21px}
.eyebrow{font-size:13.5px;color:var(--muted);font-weight:600}
.section{margin-top:26px}
.section h2{font-size:22px;margin-bottom:14px}

/* ---------------- home deck ---------------- */
.deck{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:1000px){.deck{grid-template-columns:1fr}}
.spot{position:relative;overflow:hidden;padding:0;display:grid;grid-template-columns:1.15fr 1fr;min-height:300px}
@media(max-width:660px){.spot{grid-template-columns:1fr}}
.spot-art{position:relative;min-height:260px;display:grid;place-items:center;font-size:88px;
  background:linear-gradient(140deg,var(--panel-2),var(--line))}
.spot-badge{position:absolute;top:16px;left:16px;background:var(--red);color:#fff;font-weight:800;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:8px}
.spot-body{padding:26px;display:flex;flex-direction:column;justify-content:center}
.spot-date{font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:6px}
.spot-body h2{font-family:'Bungee',system-ui;font-weight:400;letter-spacing:0;
  font-size:clamp(24px,3vw,34px);margin-bottom:10px}
.spot-body p{color:#CFCBF5;margin:0 0 18px;max-width:42ch}
.spot-cta{display:flex;gap:10px;flex-wrap:wrap}
.tag{font-size:12.5px;font-weight:700;background:var(--panel-2);border:1px solid var(--line);
  border-radius:99px;padding:5px 12px;color:#C9C5F2}

/* ---------------- account panel ---------------- */
.acct .row{display:flex;gap:9px}
.acct .row .btn{flex:1}
.acct p{margin:0;color:var(--muted);font-size:14.5px}
.rank-line{display:flex;align-items:center;gap:12px}
.xpbar{height:12px;background:var(--panel-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--red))}
.belt-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.5);flex:none}

/* ---------------- leaderboard ---------------- */
.lb{list-style:none;margin:0;padding:0}
.lb li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.lb li:last-child{border-bottom:0}
.lb .pos{width:22px;font-weight:800;color:var(--muted);font-size:14px}
.lb .who{flex:1;font-weight:600}
.lb .xp{font-weight:700;color:var(--gold);font-size:14px}
.lb li.you{background:var(--panel-2);margin:0 -10px;padding:9px 10px;border-radius:9px;border-bottom:0}

/* ---------------- lists ---------------- */
.lists{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:1000px){.lists{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.lists{grid-template-columns:1fr}}
.glist{display:flex;flex-direction:column;gap:4px}
.grow{display:flex;align-items:center;gap:13px;padding:8px;border-radius:11px;text-align:left;width:100%}
.grow:hover{background:var(--panel-2)}
.thumb{width:66px;height:66px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:29px;overflow:hidden;background:var(--panel-2)}
.grow .t{font-weight:700;font-size:15.5px;display:block}
.grow .d{font-size:13.5px;color:var(--muted);line-height:1.35}

/* ---------------- game grid (category page + all games) ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:18px}
.gcard{text-align:left}
.gcard .art{position:relative;aspect-ratio:16/10;border-radius:12px;display:grid;place-items:center;
  font-size:50px;margin-bottom:9px;overflow:hidden;background:var(--panel-2)}
.gcard .art img{width:100%;height:100%;object-fit:cover}
.gcard .num{position:absolute;left:9px;bottom:9px;width:28px;height:28px;border-radius:8px;
  background:rgba(10,10,26,.72);display:grid;place-items:center;font-weight:800;font-size:14px}
.gcard .t{font-weight:700;font-size:16px}
.gcard .d{font-size:13.5px;color:var(--muted)}
.gcard:hover .art{filter:brightness(1.12)}
.scroller{position:relative}
.sarrow{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(22,24,50,.92);border:1px solid var(--line);color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.sarrow:hover{background:var(--panel-2)}
.sarrow.prev{left:-6px}
.sarrow.next{right:-6px}
.sarrow[hidden]{display:none}
.scroller.no-scroll .sarrow{display:none}
@media(max-width:640px){.sarrow{width:36px;height:36px}.sarrow.prev{left:-2px}.sarrow.next{right:-2px}}

/* a thin visible scrollbar as well, so it's obvious the row moves */
.cards{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cards::-webkit-scrollbar{height:8px}
.cards::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.cards::-webkit-scrollbar-track{background:transparent}
.cards .gcard{flex:none;width:232px;scroll-snap-align:start}

/* ---------------- category tiles ---------------- */
.catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1000px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.catgrid{grid-template-columns:repeat(2,1fr)}}
.cat{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px;text-align:center;transition:transform .1s ease,background .1s ease}
.cat:hover{background:var(--panel-2);transform:translateY(-3px)}
.cat i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin:0 auto 11px;
  font-size:26px;font-style:normal}
.cat .t{font-weight:700;font-size:15.5px;line-height:1.25}
.cat .n{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------------- empty states ---------------- */
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:40px 24px;text-align:center;
  color:var(--muted);background:rgba(31,34,71,.4)}
.empty .big{font-size:34px;margin-bottom:10px}
.empty h3{color:var(--text);font-size:18px;margin-bottom:6px}
.empty p{margin:0 auto;max-width:44ch;font-size:14.5px}
.empty.small{padding:26px 18px}

/* ---------------- category page header ---------------- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:24px 0 14px}
.crumbs a:hover{color:var(--text)}
.cathead{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.cathead i{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;
  font-size:36px;font-style:normal;flex:none}
.cathead h1{font-family:'Bungee',system-ui;font-weight:400;letter-spacing:0;font-size:clamp(26px,4vw,40px)}
.cathead p{margin:4px 0 0;color:var(--muted);font-size:15px}

/* ---------------- game page ---------------- */
.stage-wrap{margin:22px 0}
.frame{position:relative;aspect-ratio:16/9;background:#0B0A1E;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:grid;place-items:center}
@media(max-width:760px){
  /* On a phone the game gets the full width and sits directly under the bar.
     Everything optional moves below it so nothing covers the play area. */
  .stage-wrap{margin:12px 0}
  .frame{border-radius:10px;aspect-ratio:4/3}
  .gamebar{gap:10px}
  .gamebar h1{font-size:19px;width:100%}
  .gamebar .next-ad{order:3}
  .gamebar .frame-tools{margin-left:auto}
  .crumbs{margin:12px 0 8px;font-size:13px}
}
.frame iframe{width:100%;height:100%;border:0}
.gamebar{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.gamebar h1{font-size:24px;flex:none}
.gamebar .spacer{flex:1}
.next-ad{font-size:13px;color:var(--dim)}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);margin-top:34px;padding:30px 0 46px;color:var(--muted);font-size:14px}
.foot{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.foot nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.foot a:hover{color:var(--text)}

/* ---------------- overlays ---------------- */
.veil{position:fixed;inset:0;z-index:100;display:none;background:rgba(8,7,24,.9);
  place-items:center;padding:20px}
.veil.on{display:grid}
.player{width:min(780px,100%);background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.65)}
.player-head{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--panel);
  font-size:13px;color:var(--muted)}
.player-head strong{color:var(--text);font-weight:700;font-size:13.5px}
.vstage{position:relative;aspect-ratio:16/9;background:#0B0A1E;display:grid;place-items:center}
.vstage video{position:absolute;inset:0;width:100%;height:100%;display:none}
.vstage #ckg-adbox{position:absolute;inset:0}
.slate{text-align:center;padding:24px}
.slate .b{font-weight:800;font-size:24px;color:var(--gold);margin-bottom:4px}
.slate .s{font-size:14px;color:var(--muted)}
.progress{height:4px;background:var(--panel-2)}
.progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}
.player-foot{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--panel)}
.cd{font-size:14px;color:var(--muted);margin-right:auto}
.skip{font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:9px;
  background:var(--panel-2);color:var(--muted);cursor:not-allowed}
.skip.ready{background:var(--gold);color:#241E00;cursor:pointer}

.sheet{width:min(440px,100%);background:var(--panel);border-radius:16px;padding:30px;text-align:center}
.sheet h3{font-size:23px;margin-bottom:8px}
.sheet p{color:var(--muted);margin:0 0 20px;font-size:15px}
.sheet .stack{display:flex;flex-direction:column;gap:10px}
.sheet .fine{font-size:13px;color:var(--dim);margin-top:16px}
.sheet .fl{display:block;text-align:left;font-weight:600;font-size:13.5px;margin:12px 0 6px}
.sheet input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--text);font:inherit;font-size:15px;outline:0}
.sheet input:focus{border-color:var(--gold)}
.sheet .msg{border-radius:9px;padding:9px 12px;font-size:14px;margin-top:12px;display:none;text-align:left}
.sheet .msg.on{display:block}
.sheet .msg.bad{background:rgba(255,75,62,.12);border:1px solid var(--red);color:#FFC9C4}

.doc{max-width:68ch;margin:0 auto;padding:14px 0 30px}
.doc h1{font-family:'Bungee',system-ui;font-weight:400;letter-spacing:0;
  font-size:clamp(26px,4.4vw,38px);margin-bottom:6px;line-height:1.1}
.doc .updated{color:var(--muted);font-size:14px;margin:0 0 26px}
.doc h2{font-size:21px;margin:32px 0 10px}
.doc h3{font-size:17px;margin:22px 0 8px;color:#CFCBF5}
.doc p,.doc li{color:#D5D1F2;font-size:16.5px;line-height:1.7}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc a{color:var(--gold);text-decoration:underline}
.doc a:hover{color:var(--text)}
.doc strong{color:var(--text)}
.doc code{background:var(--panel-2);border-radius:5px;padding:1px 6px;font-size:14.5px}
.doc .note{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:10px;padding:16px 18px;margin:0 0 24px}
.doc .note p:last-child{margin-bottom:0}
.doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);
  vertical-align:top;color:#D5D1F2}
.doc th{color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase}
.doc td:first-child{font-weight:600;color:var(--text);white-space:nowrap}
@media(max-width:620px){.doc td:first-child{white-space:normal}}

/* ---------------- phone held sideways ----------------
   A phone in landscape has almost no height to spare. The sticky bar plus the
   breadcrumbs were eating well over half of it, leaving the game clipped. In
   this shape the page hands the whole viewport to the game: the bar stops
   being sticky so it scrolls out of the way, the frame goes edge to edge, and
   everything optional moves below. The ads are still on the page, just above
   and below rather than on top of the game. */
@media (orientation: landscape) and (max-height: 600px) {
  .topbar{position:static}
  .nav{height:56px}
  .brand svg{width:36px;height:36px}
  .brand span{font-size:17px;max-width:110px}

  .crumbs{display:none}
  #gblurb{display:none}

  .stage-wrap{margin:0 -22px 14px}
  .frame{
    aspect-ratio:auto;
    height:100vh;
    height:100dvh;          /* accounts for the browser's own bars */
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .gamebar{padding:0 22px;gap:10px}
  .gamebar h1{font-size:17px}
  .adzone{padding:12px 0}
}

.secret-veil{background:rgba(8,7,24,.94)}
.secret-sheet{text-align:center;border:1px solid var(--gold);
  box-shadow:0 0 60px rgba(255,201,60,.18)}
.secret-belt{display:flex;flex-direction:column;gap:6px;align-items:center;margin:0 0 18px}
.secret-belt span{display:block;height:9px;border-radius:3px;border:2px solid #0B0A1E}
.secret-belt span:nth-child(1){width:120px;background:var(--gold);animation:beltIn .45s both}
.secret-belt span:nth-child(2){width:90px;background:var(--red);animation:beltIn .45s .1s both}
.secret-belt span:nth-child(3){width:150px;background:#0E0B22;animation:beltIn .45s .2s both}
@keyframes beltIn{from{opacity:0;transform:translateY(-10px) scaleX(.4)}to{opacity:1;transform:none}}

/* admin: who has found the secret */
.secretlog{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.secretlog div{display:flex;gap:12px;align-items:baseline;background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:14px}
.secretlog b{color:var(--gold)}
.secretlog span{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.frame-tools{display:flex;gap:8px}

.doc{max-width:68ch;margin:0 auto;padding:14px 0 30px}
.doc h1{font-family:'Bungee',system-ui;font-weight:400;letter-spacing:0;
  font-size:clamp(26px,4.4vw,38px);margin-bottom:6px;line-height:1.1}
.doc .updated{color:var(--muted);font-size:14px;margin:0 0 26px}
.doc h2{font-size:21px;margin:32px 0 10px}
.doc h3{font-size:17px;margin:22px 0 8px;color:#CFCBF5}
.doc p,.doc li{color:#D5D1F2;font-size:16.5px;line-height:1.7}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc a{color:var(--gold);text-decoration:underline}
.doc a:hover{color:var(--text)}
.doc strong{color:var(--text)}
.doc code{background:var(--panel-2);border-radius:5px;padding:1px 6px;font-size:14.5px}
.doc .note{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:10px;padding:16px 18px;margin:0 0 24px}
.doc .note p:last-child{margin-bottom:0}
.doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);
  vertical-align:top;color:#D5D1F2}
.doc th{color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase}
.doc td:first-child{font-weight:600;color:var(--text);white-space:nowrap}
@media(max-width:620px){.doc td:first-child{white-space:normal}}

/* ---------------- phone held sideways ----------------
   A phone in landscape has almost no height to spare. The sticky bar plus the
   breadcrumbs were eating well over half of it, leaving the game clipped. In
   this shape the page hands the whole viewport to the game: the bar stops
   being sticky so it scrolls out of the way, the frame goes edge to edge, and
   everything optional moves below. The ads are still on the page, just above
   and below rather than on top of the game. */
@media (orientation: landscape) and (max-height: 600px) {
  .topbar{position:static}
  .nav{height:56px}
  .brand svg{width:36px;height:36px}
  .brand span{font-size:17px;max-width:110px}

  .crumbs{display:none}
  #gblurb{display:none}

  .stage-wrap{margin:0 -22px 14px}
  .frame{
    aspect-ratio:auto;
    height:100vh;
    height:100dvh;          /* accounts for the browser's own bars */
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .gamebar{padding:0 22px;gap:10px}
  .gamebar h1{font-size:17px}
  .adzone{padding:12px 0}
}

.secret-veil{background:rgba(8,7,24,.94)}
.secret-sheet{text-align:center;border:1px solid var(--gold);
  box-shadow:0 0 60px rgba(255,201,60,.18)}
.secret-belt{display:flex;flex-direction:column;gap:6px;align-items:center;margin:0 0 18px}
.secret-belt span{display:block;height:9px;border-radius:3px;border:2px solid #0B0A1E}
.secret-belt span:nth-child(1){width:120px;background:var(--gold);animation:beltIn .45s both}
.secret-belt span:nth-child(2){width:90px;background:var(--red);animation:beltIn .45s .1s both}
.secret-belt span:nth-child(3){width:150px;background:#0E0B22;animation:beltIn .45s .2s both}
@keyframes beltIn{from{opacity:0;transform:translateY(-10px) scaleX(.4)}to{opacity:1;transform:none}}

/* admin: who has found the secret */
.secretlog{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.secretlog div{display:flex;gap:12px;align-items:baseline;background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:14px}
.secretlog b{color:var(--gold)}
.secretlog span{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}