/* ==================================================================
   WACKYGAMES.ONLINE
   ------------------------------------------------------------------
   Palette reasoning: violet-on-dark with colored glow is the single
   most recognisable generated-UI tell, so it is gone. Ground is a
   near-black with a green cast rather than blue, accent is a hard
   electric lime that hits 14:1 on the ground and needs no glow to
   read. Elevation comes from real surface steps, not shadow halos.
   Layout model follows VIVERSE: editorial shelves with a named theme,
   creator credited under every tile.
   ================================================================== */
:root{
  /* Surfaces, five real steps rather than opacity guesses */
  --bg:#0A0C0B; --bg2:#101312; --s1:#161A18; --s2:#1E2422; --s3:#2A322F;
  /* Accent */
  --ac:#D6F94F; --ac-dim:#A8C93B; --ac-ink:#131A02;
  /* Status */
  --hot:#FF6B4A; --new:#4ADEC0; --live:#7BE38B;
  /* Ink */
  --tx:#F4F7F4; --mut:#98A29C; --dim:#6B756F;
  --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.18);
  /* Metrics */
  --rail:238px; --rail-sm:76px; --top:60px;
  --r-xs:6px; --r-sm:9px; --r:13px; --r-lg:18px;
  /* Space scale, 4px base. Related items tight, sections generous. */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:36px; --sp7:56px;
  --gap:clamp(9px,1.05vw,14px);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  /* Motion. Interface easing is ease-out only. No overshoot anywhere. */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-quint:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.32,.72,0,1);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;max-width:100vw;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + var(--sp4));}
body{margin:0;background:var(--bg);color:var(--tx);
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  font-size:15.5px;line-height:1.6;letter-spacing:0;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;font-weight:700;
  line-height:1.18;letter-spacing:-.022em;margin:0;}
p{margin:0;}
svg{flex:0 0 auto;}
:focus{outline:none;}
:focus-visible{outline:3px solid var(--ac);outline-offset:2px;border-radius:var(--r-xs);}
::selection{background:var(--ac);color:var(--ac-ink);}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:fixed;left:var(--sp2);top:calc(var(--sp2) + var(--safe-t));z-index:999;
  background:var(--ac);color:var(--ac-ink);padding:var(--sp3) var(--sp5);border-radius:var(--r-sm);
  font-weight:700;transform:translateY(-200%);transition:transform .22s var(--e-out);}
.skip:focus{transform:none;}

/* ============ SHELL ============
   .side is position:fixed and therefore out of flow. Giving .shell a
   grid column for it means .main claims that column instead and every
   page renders inside the rail's width. Offset with margin, not grid. */
.shell{min-height:100vh;}
.main{margin-left:var(--rail);min-width:0;padding-bottom:var(--sp7);}
.pad{padding:0 clamp(16px,2.4vw,32px);}

/* ============ SIDEBAR ============ */
.side{position:fixed;inset:0 auto 0 0;width:var(--rail);background:var(--bg2);
  border-right:1px solid var(--bd);display:flex;flex-direction:column;z-index:90;
  padding-top:var(--safe-t);}
.brand{display:flex;align-items:center;gap:10px;height:var(--top);padding:0 var(--sp4);
  flex:0 0 auto;border-bottom:1px solid var(--bd);overflow:hidden;}
.brand .glyph{width:30px;height:30px;flex:0 0 30px;color:var(--ac);
  transition:transform .32s var(--e-out);}
.brand:hover .glyph{transform:rotate(6deg);}
.brand-tx{font-family:'Poppins',sans-serif;font-weight:800;font-size:.98rem;
  letter-spacing:-.03em;white-space:nowrap;line-height:1.05;}
.brand-tx i{display:block;font-style:normal;font-family:'Nunito Sans',sans-serif;
  font-weight:600;font-size:.58rem;letter-spacing:.17em;color:var(--dim);text-transform:uppercase;
  margin-top:1px;}
.side-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sp3) 10px var(--sp4);
  scrollbar-width:thin;scrollbar-color:var(--s2) transparent;overscroll-behavior:contain;}
.side-scroll::-webkit-scrollbar{width:4px;}
.side-scroll::-webkit-scrollbar-track{background:transparent;}
.side-scroll::-webkit-scrollbar-thumb{background:var(--s2);border-radius:var(--r-sm);}
.side-lbl{font-size:.63rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);padding:var(--sp5) var(--sp3) var(--sp2);}
.side-scroll ul{list-style:none;margin:0;padding:0;}
.nav-i{display:flex;align-items:center;gap:10px;padding:8px var(--sp3);border-radius:var(--r-sm);
  color:var(--mut);font-size:.875rem;font-weight:500;min-height:38px;position:relative;
  transition:background .16s,color .16s;white-space:nowrap;}
.nav-i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.nav-i .lbl{overflow:hidden;text-overflow:ellipsis;}
.nav-i .ct{margin-left:auto;font-size:.7rem;color:var(--dim);font-variant-numeric:tabular-nums;}
.nav-i[aria-current="page"]{background:var(--ac);color:var(--ac-ink);font-weight:700;}
.nav-i[aria-current="page"] .ct{color:var(--ac-ink);opacity:.62;}
.nav-i:active{background:var(--s2);}
.side-foot{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4);
  padding:var(--sp3) var(--sp4) calc(var(--sp3) + var(--safe-b));
  border-top:1px solid var(--bd);font-size:.72rem;color:var(--dim);flex:0 0 auto;}
.side-foot a{transition:color .16s;}

/* ============ TOP BAR ============ */
.top{position:sticky;top:0;z-index:70;height:calc(var(--top) + var(--safe-t));
  padding:var(--safe-t) clamp(16px,2.4vw,32px) 0;display:flex;align-items:center;gap:10px;
  background:rgba(10,12,11,.84);backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;}
.top.stuck{border-bottom-color:var(--bd);background:rgba(10,12,11,.95);}
.burger{display:none;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--bd);
  align-items:center;justify-content:center;flex:0 0 40px;transition:background .16s;}
.burger svg{width:18px;height:18px;stroke:var(--tx);fill:none;stroke-width:1.9;stroke-linecap:round;}
.search{position:relative;flex:1;max-width:540px;}
.search input{width:100%;height:40px;background:var(--s1);border:1px solid var(--bd);
  color:var(--tx);border-radius:100px;padding:0 40px 0 38px;font-size:16px;font-family:inherit;
  transition:border-color .2s,background .2s,box-shadow .2s;}
.search input::placeholder{color:var(--mut);}
.search input::-webkit-search-cancel-button{display:none;}
.search input:focus{border-color:var(--ac);background:var(--s2);outline:2px solid var(--ac);
  outline-offset:-2px;}
.search .mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--mut);fill:none;stroke-width:2;pointer-events:none;}
.search-clr{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border-radius:50%;display:none;place-items:center;color:var(--mut);transition:background .16s,color .16s;}
.search-clr svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}
.search-clr.on{display:grid;}
.top-sp{flex:1;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;
  padding:0 var(--sp4);border-radius:100px;font-weight:700;font-size:.86rem;white-space:nowrap;
  touch-action:manipulation;
  transition:background .18s,border-color .18s,color .18s,transform .14s var(--e-out);}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.btn:active{transform:translateY(1px);}
.btn-p{background:var(--ac);color:var(--ac-ink);}
.btn-g{border:1px solid var(--bd2);color:var(--tx);background:var(--s1);}

/* ============ SHELVES ============ */
.sec{padding:var(--sp6) 0 0;}
.sec:first-child{padding-top:var(--sp5);}
.sh{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--sp4);min-height:34px;}
.sh h2{font-size:clamp(1.06rem,1.9vw,1.3rem);white-space:nowrap;}
.sh .sub{color:var(--mut);font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;}
.sh .sp{flex:1;min-width:8px;}
.sh-all{color:var(--ac);font-size:.82rem;font-weight:700;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;align-self:center;transition:color .18s;}
.sh-all svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--e-out);}
.arrows{display:flex;gap:6px;align-self:center;}
.arw{width:32px;height:32px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);
  display:grid;place-items:center;color:var(--tx);
  transition:background .16s,border-color .16s,opacity .22s;}
.arw svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.arw[disabled]{opacity:.26;cursor:default;pointer-events:none;}

/* Scroller gutters match the page padding so cards never lose an edge. */
.shelf{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;padding:3px 3px var(--sp2);margin:-3px -3px 0;
  scrollbar-width:none;overscroll-behavior-x:contain;list-style:none;}
.shelf::-webkit-scrollbar{display:none;}
.shelf > li{flex:0 0 162px;scroll-snap-align:start;}
.shelf:focus-visible{outline:3px solid var(--ac);outline-offset:4px;border-radius:var(--r);}

.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(154px,1fr));
  list-style:none;margin:0;padding:0;}

/* ============ CARD ============
   VIVERSE credits the studio under every tile. That is worth copying:
   it is the one thing a portal can show that a scraper site cannot. */
.card{display:block;position:relative;}
.card-t{position:relative;border-radius:var(--r);overflow:hidden;background:var(--s2);
  aspect-ratio:1/1;transition:transform .24s var(--e-out);}
.card-t img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease;}
.js .card-t img{opacity:0;}
.js .card-t img.on{opacity:1;}
.js .card-t::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--s2) 32%,var(--s3) 50%,var(--s2) 68%);
  background-size:220% 100%;animation:shim 1.4s linear infinite;transition:opacity .35s;}
.js .card-t.ready::after{opacity:0;animation:none;}
@keyframes shim{from{background-position:170% 0;}to{background-position:-70% 0;}}
.card-p{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(10,12,11,.55);opacity:0;transition:opacity .2s var(--e-out);}
.card-p i{width:44px;height:44px;border-radius:50%;background:var(--ac);display:grid;
  place-items:center;font-style:normal;}
.card-p svg{width:15px;height:15px;fill:var(--ac-ink);margin-left:2px;}
.card-m{padding:9px 2px 0;}
.card-n{font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;
  line-height:1.34;letter-spacing:-.008em;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.card-by{font-size:.72rem;color:var(--mut);line-height:1.35;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.tag{position:absolute;top:7px;left:7px;z-index:4;font-size:.6rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:var(--r-xs);
  font-family:'Nunito Sans',sans-serif;}
.tag.hot{background:var(--hot);color:#2C0A02;}
.tag.new{background:var(--new);color:#032420;}
.tag.top{background:var(--ac);color:var(--ac-ink);}
.tag.soon{background:var(--s3);color:#C6CFCA;}

/* Spotlight. Sized off the row, not a fixed aspect, so nothing stretches. */
.spot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gap);align-items:stretch;}
.spot-big{display:flex;flex-direction:column;}
.spot.spot-solo{grid-template-columns:1fr;}
.spot-big .card-t{aspect-ratio:16/9;flex:1;}
.spot-ov{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--sp5);pointer-events:none;
  background:linear-gradient(0deg,rgba(10,12,11,.94) 6%,rgba(10,12,11,.45) 58%,transparent 100%);}
.spot-ov h3{font-size:clamp(1.25rem,2.6vw,1.85rem);letter-spacing:-.028em;margin-bottom:5px;}
.spot-by{font-size:.79rem;color:var(--ac);font-weight:600;margin-bottom:7px;}
.spot-d{color:#CBD3CD;font-size:.85rem;line-height:1.5;max-width:60ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.spot-col{display:grid;gap:var(--gap);grid-template-rows:1fr 1fr;min-height:0;}
.spot-col .card{display:flex;flex-direction:column;min-height:0;}
.spot-col .card-t{aspect-ratio:auto;flex:1;min-height:0;}

/* ============ MOOD ROWS ============ */
.cols{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  list-style:none;margin:0;padding:0;}
.col{display:block;padding:var(--sp4) var(--sp4) var(--sp5);border-radius:var(--r);
  background:var(--s1);border:1px solid var(--bd);
  transition:background .2s,border-color .2s,transform .2s var(--e-out);}
.col h3{font-size:.95rem;margin-bottom:3px;}
.col p{font-size:.79rem;color:var(--mut);line-height:1.45;}
.col .n{font-size:.68rem;color:var(--dim);margin-top:10px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;}

/* ============ TAGS AND PROSE ============ */
.tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;}
.tags a{background:var(--s1);border:1px solid var(--bd);border-radius:100px;
  padding:7px 15px;font-size:.8rem;color:var(--mut);min-height:34px;
  display:inline-flex;align-items:center;transition:border-color .18s,color .18s,background .18s;}
.prose{max-width:70ch;}
.prose h2{font-size:clamp(1.15rem,2.1vw,1.42rem);margin-bottom:var(--sp3);}
.prose h3{font-size:1rem;margin:var(--sp5) 0 var(--sp2);}
.prose p{color:var(--mut);margin-bottom:var(--sp3);font-size:.93rem;}
.prose a{color:var(--ac);text-decoration:underline;text-underline-offset:2px;}
.faq{max-width:800px;}
.faq details{border-bottom:1px solid var(--bd);}
.faq summary{list-style:none;cursor:pointer;padding:var(--sp4) 40px var(--sp4) 0;position:relative;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.94rem;min-height:44px;
  transition:color .18s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:8px;top:50%;
  width:11px;height:2px;background:var(--ac);transform:translateY(-50%);border-radius:2px;}
.faq summary::before{transform:translateY(-50%) rotate(90deg);
  transition:transform .3s var(--e-out),opacity .3s;}
.faq details[open] summary::before{transform:translateY(-50%) rotate(0);opacity:0;}
.faq details p{color:var(--mut);padding:0 40px var(--sp4) 0;font-size:.9rem;}

/* ============ SKELETONS ============
   Shown only while the live catalogue is in flight. Sized to the real
   tiles so nothing shifts when the games land. */
.sk{display:block;border-radius:var(--r);background:var(--s2);position:relative;overflow:hidden;
  aspect-ratio:1/1;width:100%;}
.sk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.045) 50%,transparent 70%);
  background-size:220% 100%;animation:shim 1.4s linear infinite;}
.sk-big{aspect-ratio:16/9;}
.sk-card{aspect-ratio:1/1;}
.sk-txt{aspect-ratio:auto;height:19px;width:172px;border-radius:var(--r-xs);}

/* ============ FEED NOTICE ============ */
.note{background:var(--s1);border:1px solid var(--bd2);border-radius:var(--r);
  padding:var(--sp4) var(--sp5);color:var(--tx);font-size:.88rem;margin-top:var(--sp5);
  line-height:1.55;}

/* ============ ADS ============ */
.ad{display:grid;place-items:center;background:var(--bg2);border:1px dashed var(--bd2);
  border-radius:var(--r);color:var(--mut);margin:var(--sp6) 0 0;}
.ad[data-ad-slot="leaderboard"]{min-height:104px;}
.ad[data-ad-slot="rectangle"]{min-height:260px;width:100%;}
.ad small{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;}

/* ============ GAME VIEW ============ */
.crumb{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--mut);
  padding:var(--sp4) 0 var(--sp3);flex-wrap:wrap;list-style:none;margin:0;}
.crumb li{display:flex;align-items:center;gap:7px;}
.crumb a{color:var(--ac);}
.crumb .sepr{color:var(--dim);}
.gwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp5);align-items:start;}
.stage-box{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;}
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#06090F;display:grid;place-items:center;}
.stage iframe,.stage canvas{width:100%;height:100%;border:0;display:block;background:#06090F;}
.stage:fullscreen{aspect-ratio:auto;height:100vh;width:100vw;}
.stage-msg{text-align:center;padding:var(--sp6) var(--sp5);max-width:46ch;}
.stage-msg svg{width:30px;height:30px;stroke:var(--mut);fill:none;stroke-width:1.5;margin:0 auto 12px;}
.stage-msg h3{font-size:1.05rem;margin-bottom:6px;}
.stage-msg p{color:var(--mut);font-size:.88rem;}
.stage-load{position:absolute;inset:0;display:grid;place-items:center;background:#06090F;z-index:2;
  transition:opacity .4s;gap:12px;align-content:center;justify-items:center;}
.stage-load.off{opacity:0;pointer-events:none;}
.stage-load p{color:var(--mut);font-size:.82rem;}
.spinner{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--s3);
  border-top-color:var(--ac);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.gbar{display:flex;align-items:center;gap:9px;padding:11px var(--sp4);flex-wrap:wrap;
  border-top:1px solid var(--bd);background:var(--s1);}
.gbar .gt{margin-right:auto;min-width:0;}
.gbar h1{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gbar .gby{font-size:.75rem;color:var(--mut);}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp4) 0;list-style:none;padding:0;}
.chips li{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-xs);
  padding:4px 10px;font-size:.78rem;color:var(--mut);}
.gside{position:sticky;top:calc(var(--top) + var(--safe-t) + var(--sp4));
  display:flex;flex-direction:column;gap:var(--sp4);}
.gside .ad{margin:0;}

/* ============ STATES ============ */
.empty{text-align:center;padding:var(--sp7) var(--sp4);color:var(--mut);}
.empty svg{width:34px;height:34px;stroke:var(--dim);fill:none;stroke-width:1.4;margin:0 auto 14px;}
.empty h3{font-size:1.08rem;margin-bottom:6px;color:var(--tx);}
.empty p{font-size:.9rem;margin-bottom:var(--sp5);max-width:44ch;margin-inline:auto;}

/* ============ DRAWER ============ */
.scrim{position:fixed;inset:0;background:rgba(6,8,7,.7);z-index:85;opacity:0;pointer-events:none;
  transition:opacity .26s var(--e-out);}
.scrim.on{opacity:1;pointer-events:auto;}

/* ============ HOVER, POINTER DEVICES ONLY ============ */
@media(hover:hover){
  .card:hover .card-t{transform:translateY(-4px);}
  .card:hover .card-p{opacity:1;}
  .card:hover .card-n{color:var(--ac);}
  .nav-i:hover{background:var(--s2);color:var(--tx);}
  .nav-i[aria-current="page"]:hover{background:var(--ac);color:var(--ac-ink);}
  .side-foot a:hover{color:var(--ac);}
  .btn-p:hover{background:#E4FF6B;}
  .btn-g:hover{border-color:var(--ac);color:var(--ac);}
  .arw:hover:not([disabled]){background:var(--ac);border-color:var(--ac);color:var(--ac-ink);}
  .col:hover{background:var(--s2);border-color:var(--bd2);transform:translateY(-2px);}
  .tags a:hover{border-color:var(--ac);color:var(--tx);background:var(--s2);}
  .sh-all:hover svg{transform:translateX(3px);}
  .faq summary:hover{color:var(--ac);}
  .search-clr:hover{background:var(--s3);color:var(--tx);}
  .burger:hover{background:var(--s2);}
}
/* Arrow buttons are noise where swiping exists. */
@media(hover:none){ .arrows{display:none;} }

/* ============ BREAKPOINTS ============ */
@media(max-width:1360px){
  .spot{grid-template-columns:1.9fr 1fr;}
  .spot-col.c2{display:none;}
}
@media(max-width:1100px){
  :root{--rail:var(--rail-sm);}
  .brand-tx,.side-lbl,.nav-i .lbl,.nav-i .ct,.side-foot{display:none;}
  .brand{justify-content:center;padding:0;}
  .nav-i{justify-content:center;padding:8px 0;}
  .side-scroll{padding:var(--sp3) 8px var(--sp4);}
  .gwrap{grid-template-columns:minmax(0,1fr) 264px;}
}
@media(max-width:900px){
  :root{--rail:266px;}
  .main{margin-left:0;}
  .side{transform:translateX(-100%);transition:transform .3s var(--e-soft);width:var(--rail);}
  .side.on{transform:none;}
  .brand-tx,.side-lbl,.nav-i .lbl,.nav-i .ct{display:revert;}
  .side-foot{display:flex;}
  .brand{justify-content:flex-start;padding:0 var(--sp4);}
  .nav-i{justify-content:flex-start;padding:8px var(--sp3);min-height:44px;}
  .burger{display:flex;}
  .gwrap{grid-template-columns:1fr;}
  .gside{position:static;}
  .spot{grid-template-columns:1fr;}
  .spot-col{grid-template-rows:none;grid-template-columns:1fr 1fr;}
  .spot-col .card-t{aspect-ratio:1/1;flex:none;}
  .spot-big .card-t{aspect-ratio:16/10;flex:none;}
  .spot-ov{padding:var(--sp4);}
}
@media(max-width:620px){
  .shelf > li{flex:0 0 136px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));}
  .stage{aspect-ratio:4/3;}
  .top-sp{display:none;}
  .sh .sub{display:none;}
  .hide-sm{display:none;}
}
@media(max-width:400px){
  .grid{grid-template-columns:1fr 1fr;}
  .spot-col{grid-template-columns:1fr;}
  .cols{grid-template-columns:1fr;}
}
/* Landscape phone: the rail would eat the whole viewport height. */
@media(max-height:480px) and (orientation:landscape){
  .side-foot{display:none;}
  .sec{padding-top:var(--sp5);}
}

/* ============ MOTION SAFETY ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .shelf{scroll-behavior:auto;}
  .js .card-t::after{animation:none;background:var(--s2);}
  .sk::after{animation:none;}
  .card:hover .card-t{transform:none;}
  .spinner{animation:none;border-top-color:var(--ac);}
}

/* ---------- sidebar filter ---------- */
.genre-head{position:sticky;top:0;z-index:2;background:var(--bg2);
  padding-bottom:var(--sp2);}
.genre-filter{position:relative;margin:0 10px var(--sp2);}
.genre-filter svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;stroke:var(--dim);fill:none;stroke-width:2;pointer-events:none;}
.genre-filter input{width:100%;height:34px;background:var(--s1);
  border:1px solid var(--bd);border-radius:100px;color:var(--tx);
  padding:0 12px 0 31px;font-size:13px;font-family:inherit;
  transition:border-color .18s,background .18s;}
.genre-filter input::placeholder{color:var(--dim);}
.genre-filter input::-webkit-search-cancel-button{display:none;}
.genre-filter input:focus{border-color:var(--ac);background:var(--s2);
  outline:2px solid var(--ac);outline-offset:-2px;}
.genre-none{padding:var(--sp3) var(--sp4);font-size:.8rem;color:var(--dim);}
.nav-i .ct{font-variant-numeric:tabular-nums;}

/* The active genre earns a marker rather than only a fill, so it still reads
   when the rail collapses to icons. */
.nav-i[aria-current="page"]::before{content:"";position:absolute;left:-10px;top:8px;
  bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--ac);}

/* ---------- motion, JS-gated so nothing hides without it ---------- */
.js [data-rise]{opacity:0;}
.js .card-t{transition:transform .26s var(--e-out);}
@media(hover:hover){
  .card:hover .card-t{transform:translateY(-4px) scale(1.012);}
  .nav-i:hover .ct{color:var(--tx);}
}
.card-t::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.arw{transition:background .16s,border-color .16s,opacity .22s,transform .14s var(--e-out);}
.arw:active{transform:scale(.9);}
.btn:active{transform:translateY(1px);}

/* ---------- static build additions ---------- */
.gp-wrap{max-width:1180px;}
.gp-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp5);align-items:start;}
.gp-title{margin:0 0 4px;font-size:clamp(1.3rem,2.6vw,1.85rem);}
.gp-by{font-size:.84rem;color:var(--mut);margin-bottom:var(--sp4);}
.gp-by a{color:var(--ac);}
.stage-static{position:relative;width:100%;background:#06090F;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--bd);}
.stage-static iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.gp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--sp3);}
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:var(--sp6);
  list-style:none;padding:0;}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;
  height:42px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--bd);
  background:var(--s1);font-size:.87rem;font-weight:600;color:var(--mut);}
.pager .on{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);}
.az{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp5);list-style:none;padding:0;}
.az a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--s1);border:1px solid var(--bd);font-size:.82rem;
  font-weight:700;color:var(--mut);}
.lede{color:var(--mut);max-width:72ch;font-size:.94rem;margin-bottom:var(--sp5);}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
#searchPanel{position:fixed;inset:0;z-index:120;background:rgba(10,12,11,.97);
  padding:calc(var(--top) + var(--safe-t)) clamp(16px,4vw,32px) var(--sp6);overflow-y:auto;
  display:none;}
#searchPanel.on{display:block;}
#searchPanel .grid{max-width:1180px;margin:0 auto;}
#searchMeta{max-width:1180px;margin:0 auto var(--sp4);color:var(--mut);font-size:.86rem;}
@media(hover:hover){.pager a:hover,.az a:hover{border-color:var(--ac);color:var(--tx);}}
@media(max-width:900px){.gp-hero{grid-template-columns:1fr;}}