/* ==========================================================================
   SCVRLET — scvrlet.css
   Shared by index.html, stage.html and obs.html. Base system carried over from
   cashcat.party (liquid glass, slanted pills, matrix type, themes) with the
   accent token renamed: cashcat --rh-lime  ->  scvrlet --accent.
   See CONVENTIONS.md before adding a colour, a component or a theme.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---- brand / accent (the only family a theme recolours) ---- */
  --accent:#ff3c5a;           /* SCVRLET scarlet — same red as scvrlet-mark.js */
  --accent-rgb:255,60,90;
  --accent2:#3dd6ff;          /* cyan counter-accent: glints, underline fills, hints */
  --accent2-rgb:61,214,255;
  --on-accent:#0b0d16;        /* text sitting ON an accent fill */
  /* ---- surfaces ---- */
  --ink:#eef2fb;
  --muted:#8892b0;
  --line:#20263a;
  --panel:#0b0d16;
  --bg:#0a0508;
  --bg-rgb:10,5,8;
  /* ---- liquid glass ----
     plain glass (.glass): translucent fill + blur, for anything holding text.
     refract glass (.refract): same fill on a child .refract-layer that also
     carries the SVG displacement filter, kept off the content so text never
     warps. Hero surfaces only. */
  --panel-bg:rgba(14,18,30,.46);
  --panel-bg-strong:rgba(9,11,20,.68);
  --panel-border:rgba(var(--accent-rgb),.16);
  --panel-border-hi:rgba(var(--accent-rgb),.4);
  /* ---- one pill system ---- */
  --pill-bg:rgba(255,255,255,.045);
  --pill-border:rgba(255,255,255,.14);
  --pill-radius:3px;
  --skew:-12deg;              /* pills */
  --skew-nav:-16deg;          /* nav tabs lean harder: they're navigation */
  /* ---- type ---- */
  --font-pixel:'Press Start 2P', monospace;
  --font-mono:'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-mono); min-height:100vh; }
a{ color:var(--accent); }

/* liquid-glass scrollbar: lit top edge, shaded bottom edge, transparent track */
::-webkit-scrollbar{ width:18px; background:transparent; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.20) 50%, rgba(255,255,255,.06));
  border:4px solid transparent; background-clip:padding-box; border-radius:999px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(0,0,0,.35); }
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.30) 50%, rgba(255,255,255,.08));
  background-clip:padding-box; }
@supports not selector(::-webkit-scrollbar){
  html{ scrollbar-width:auto; scrollbar-color:rgba(255,255,255,.22) transparent; } }

/* ==========================================================================
   BACKGROUND STACK  (back to front)
   #wash (-3)  colour glow the glass frosts
   #siteField (-2)  liquid starfield canvas
   .scan (-1)  scanline texture
   ========================================================================== */
#wash{
  position:fixed; inset:-25%; z-index:-3; pointer-events:none; filter:blur(70px);
  background:
    radial-gradient(40% 34% at 20% 24%, rgba(var(--accent-rgb), .16), transparent 70%),
    radial-gradient(34% 36% at 82% 18%, rgba(var(--accent2-rgb), .08), transparent 72%),
    radial-gradient(30% 30% at 32% 84%, rgba(var(--accent-rgb), .10), transparent 72%),
    radial-gradient(26% 26% at 78% 78%, rgba(var(--accent2-rgb), .06), transparent 72%);
  transition:background 1.2s ease;
  animation:washDrift 70s ease-in-out infinite alternate; }
@keyframes washDrift{ to{ transform:translate3d(-5%,4%,0) rotate(8deg); } }
#siteField{ position:fixed; inset:0; z-index:-2; pointer-events:none; width:100%; height:100%; }
.scan{ position:fixed; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.014) 0 1px, transparent 1px 3px); }

/* ==========================================================================
   GLASS
   ========================================================================== */
.glass{
  background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:8px;
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.07), inset 0 -1px 1px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35); }
.refract{ position:relative; background:transparent; isolation:isolate; overflow:hidden; }
/* the layer overscans by 24px: displacement tears its edges, so they sit outside the clip */
.refract > .refract-layer{
  position:absolute; inset:-24px; z-index:-1;
  background:var(--panel-bg-strong);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  filter:url(#liquid); }

/* ==========================================================================
   APP SHELL — hub-v2 layout: collapsible sidebar | top bar / stage / content
   ========================================================================== */
:root{ --side-w:236px; --side-w-min:68px; --gap:14px; --topbar-h:64px; --ease:cubic-bezier(.2,.8,.2,1); }
.app{ position:relative; display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); gap:var(--gap);
  min-height:100vh; padding:var(--gap); transition:grid-template-columns .3s var(--ease); }
.app[data-sidebar="collapsed"]{ grid-template-columns:var(--side-w-min) minmax(0,1fr); }
.main{ min-width:0; display:flex; flex-direction:column; gap:var(--gap); }

/* ---- sidebar ---- */
.sidebar{ position:sticky; top:var(--gap); height:calc(100vh - 2 * var(--gap)); display:flex; flex-direction:column;
  padding:12px 10px; border-radius:14px; overflow:hidden; }
.brand{ display:flex; align-items:center; gap:10px; padding:4px 4px 14px; min-height:48px; border-bottom:1px solid var(--line); }
.brandMark{ flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:8px; text-decoration:none;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.22), rgba(var(--accent2-rgb),.12)); border:1px solid var(--panel-border-hi); }
.brandMark canvas{ width:22px; height:auto; image-rendering:pixelated; }
.brandText{ min-width:0; flex:1; }
#pageTitle{ margin:0; font:12px var(--font-pixel); letter-spacing:.06em; color:var(--ink); white-space:nowrap; min-height:1.2em; }
.brandSub{ font:7px var(--font-pixel); letter-spacing:.1em; color:var(--muted); white-space:nowrap; margin-top:6px; }
.brandSub b{ color:var(--accent); font-weight:400; }
.iconBtn{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:8px; cursor:pointer;
  color:var(--muted); background:none; border:1px solid transparent; font-size:15px; line-height:1;
  transition:background .18s, color .18s, border-color .18s, transform .3s var(--ease); }
.iconBtn:hover, .iconBtn[aria-expanded="true"]{ color:var(--ink); background:rgba(var(--accent-rgb),.08); border-color:rgba(var(--accent-rgb),.25); }
.iconBtn svg{ width:17px; height:17px; }
#collapseBtn{ width:28px; height:28px; }
.app[data-sidebar="collapsed"] #collapseBtn{ transform:rotate(180deg); }

.sideScroll{ flex:1; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:10px 4px 6px; scrollbar-width:thin; }
.sideLabel{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:14px 8px 6px; white-space:nowrap; }
.sideNav{ display:flex; flex-direction:column; gap:6px; padding-left:6px; }
/* sidebar tabs: the slanted nav, stacked. Matrix code behind the label is the accent. */
.sideTab{ position:relative; display:flex; align-items:center; gap:10px; min-height:36px; padding:0 12px; overflow:hidden;
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.08em; color:var(--ink); text-decoration:none;
  background:#10131f; border:1px solid var(--line); border-radius:3px; white-space:nowrap;
  transform:skewX(var(--skew)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .15s, background .15s, transform .12s; animation:tabIn .45s cubic-bezier(.2,.8,.3,1.2) backwards; }
.sideTab > *{ position:relative; z-index:1; transform:skewX(calc(var(--skew) * -1)); }
.sideTab .label{ display:inline-block; min-width:9ch; }
.sideTab .kbd{ margin-left:auto; font-size:9px; font-weight:400; color:var(--muted); }
.sideTab::after{ content:attr(data-code); position:absolute; inset:0; padding:2px 4px; overflow:hidden; pointer-events:none;
  font-size:8px; line-height:1.1; letter-spacing:0; white-space:pre-wrap; word-break:break-all;
  color:var(--accent); opacity:.10; transition:opacity .2s; }
.sideTab:hover{ background:#161a2c; border-color:rgba(var(--accent-rgb),.6); transform:skewX(var(--skew)) translateX(3px); }
.sideTab:hover::after{ opacity:.22; }
.sideTab.active{ background:#161a2c; border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.sideTab.active::after{ opacity:.16; }
.sideTab.active .mk{ color:var(--accent); }
@keyframes tabIn{ from{ opacity:0; transform:skewX(var(--skew)) translateX(-18px); } to{ opacity:1; transform:skewX(var(--skew)); } }
.sideItem{ display:flex; align-items:center; gap:10px; min-height:30px; padding:0 8px; border-radius:6px; font-size:11px;
  color:var(--muted); text-decoration:none; white-space:nowrap; transition:background .18s, color .18s; }
.sideItem:hover{ color:var(--ink); background:rgba(var(--accent-rgb),.07); }
.sideItem .lbl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sideItem .ext{ font-size:10px; opacity:.6; }
.sideFoot{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 6px 2px; border-top:1px solid var(--line);
  font-size:10px; color:var(--muted); white-space:nowrap; }
.sideFoot b{ color:var(--ink); font-weight:500; }
#roleText{ font:7px var(--font-pixel); letter-spacing:.08em; color:var(--accent); }
/* collapsed rail: monograms only */
.app[data-sidebar="collapsed"] .brandText, .app[data-sidebar="collapsed"] .sideLabel,
.app[data-sidebar="collapsed"] .sideTab .label, .app[data-sidebar="collapsed"] .sideTab .kbd,
.app[data-sidebar="collapsed"] .sideItem .lbl, .app[data-sidebar="collapsed"] .sideItem .ext,
.app[data-sidebar="collapsed"] .sideFoot .ft{ display:none; }
.app[data-sidebar="collapsed"] .brand{ flex-direction:column; gap:8px; }
.app[data-sidebar="collapsed"] .sideNav{ padding-left:0; }
.app[data-sidebar="collapsed"] .sideTab, .app[data-sidebar="collapsed"] .sideItem{ justify-content:center; padding:0; }
.app[data-sidebar="collapsed"] .sideFoot{ justify-content:center; }
.sep{ display:none; height:1px; background:var(--line); margin:10px 6px; }
.app[data-sidebar="collapsed"] .sep{ display:block; }

/* ---- top bar (the upper-right panel) ---- */
.topbar{ position:sticky; top:var(--gap); z-index:20; min-height:var(--topbar-h); display:flex; align-items:center; gap:14px;
  padding:10px 12px 10px 20px; border-radius:14px; overflow:hidden; flex-wrap:wrap; }
.topMark{ flex:1; min-width:0; display:flex; align-items:center; }
.topMark a{ display:inline-flex; line-height:0; }
#topMark{ height:30px; width:auto; image-rendering:pixelated; }
.topActions{ display:flex; align-items:center; gap:8px; }
.menuBtn{ display:none !important; }
#musicBtn .pillIn{ gap:8px; }
#musicBtn .eq{ display:inline-flex; gap:2px; align-items:flex-end; height:10px; }
#musicBtn .eq i{ width:2px; height:3px; background:currentColor; }
#musicBtn.on .eq i{ animation:eq .7s ease-in-out infinite alternate; }
#musicBtn.on .eq i:nth-child(2){ animation-delay:.2s; } #musicBtn.on .eq i:nth-child(3){ animation-delay:.4s; }
@keyframes eq{ from{ height:2px; } to{ height:10px; } }
/* mobile tab row */
.mtabs{ display:none; gap:8px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 2px; width:100%; order:5;
  -webkit-mask-image:linear-gradient(to right, #000 88%, transparent); mask-image:linear-gradient(to right, #000 88%, transparent); }
.mtabs::-webkit-scrollbar{ display:none; }
.mtabs .sideTab{ flex:none; min-height:32px; font-size:10px; animation:none; }

/* ---- the screen: stage scene, tab content and games all live in here ---- */
:root{ --shelf-h:128px; }
#stageWrap{ position:relative; border-radius:14px; overflow:hidden; padding:0; background:#000; isolation:isolate;
  height:clamp(420px, calc(100vh - var(--topbar-h) - var(--shelf-h) - 4 * var(--gap)), 1000px); }
#stageFrame, #gameFrame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:transparent; }
#stageFrame{ z-index:0; }
#gameFrame{ z-index:3; background:#0b0d16; }
#gameFrame[hidden]{ display:none; }
/* tab content: a scrolling layer over the (paused, blurred) scene */
#screenContent{ position:absolute; inset:0; z-index:2; overflow-y:auto; overscroll-behavior:contain;
  padding:34px clamp(18px, 4vw, 48px) 40px; background:rgba(var(--bg-rgb, 10,5,8), .72);
  backdrop-filter:blur(12px) saturate(130%); -webkit-backdrop-filter:blur(12px) saturate(130%);
  scrollbar-width:thin; }
#screenContent[hidden]{ display:none; }
#screenContent::before{ content:''; position:sticky; top:-34px; display:block; height:0; }
#screenContent::after{ content:''; position:fixed; pointer-events:none; }
.screenScan{ position:absolute; inset:0; z-index:5; pointer-events:none; mix-blend-mode:overlay; opacity:.7;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
             radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.45) 100%); }
#screenContent .tabPanel.active{ max-width:820px; margin:0 auto; padding:0; background:none; border:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; }
/* home: a small dismissible card over the live scene */
#homeCard{ position:absolute; z-index:2; left:14px; bottom:14px; width:min(360px, calc(100% - 28px)); padding:14px 16px 12px;
  border-radius:12px; background:var(--panel-bg-strong); }
#homeCard[hidden]{ display:none; }
#homeCard p{ margin:0 0 10px; font-size:12px; line-height:1.6; color:var(--ink); }
#homeCard p span{ color:var(--muted); }
#homeCard .pills{ margin:0; gap:6px; }
#homeCard .pills a{ font-size:9.5px; padding:6px 10px; }
#homeCardClose{ position:absolute; top:6px; right:8px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:12px; }
#homeCardClose:hover{ color:var(--ink); }
/* corner controls inside the screen */
.screenBtns{ position:absolute; right:10px; bottom:10px; z-index:6; display:flex; gap:6px; }
.screenBtns .pill, #stageBack{ font-size:8.5px; padding:6px 10px; background:rgba(5,6,12,.55); }
#stageBack{ position:absolute; left:10px; bottom:10px; z-index:6; }
#stageBack[hidden]{ display:none; }
#stageWrap.full{ position:fixed; inset:0; z-index:90; height:100vh; height:100dvh; border-radius:0; }
body.stageFull{ overflow:hidden; }

/* ---- CRT tube: shutters, beam, flash, static (cashcat console) ---- */
#crt{ position:absolute; inset:0; z-index:8; pointer-events:none; }
#crt .half{ position:absolute; left:0; right:0; height:0; background:#000; }
#crt .top{ top:0; } #crt .bot{ bottom:0; }
#crt .beam{ position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1px; opacity:0; background:#fff;
  box-shadow:0 0 14px 5px rgba(255,255,255,.75); transform:scaleX(0); }
#crt .flash{ position:absolute; inset:0; background:#fff; opacity:0; }
#crtStatic{ position:absolute; inset:0; z-index:7; width:100%; height:100%; image-rendering:pixelated; display:none; }
#crtStatic.show{ display:block; }
#stageWrap.crtGlow::after{ content:''; position:absolute; inset:0; z-index:9; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 2px, transparent 2px 4px); animation:crtFade 1.2s ease-out forwards; }
@keyframes crtFade{ 0%{ opacity:1; } 30%{ opacity:.6; } 40%{ opacity:.9; } 100%{ opacity:0; } }
#stageWrap.jolt{ animation:jolt .2s steps(3); }
@keyframes jolt{ 33%{ transform:translateY(4px); } 66%{ transform:translateY(-2px); } }
/* slot + seated cartridge, inset at the top of the screen */
#cartWell{ position:absolute; left:50%; top:0; width:176px; margin-left:-88px; height:150px; overflow:hidden; pointer-events:none; z-index:7;
  transition:opacity .45s ease; }
#cart{ position:absolute; left:13px; top:0; width:150px; height:110px; transform:translateY(-120px); }
#cart.drop{ animation:cartDrop .6s steps(10) forwards; }
#cart.seated{ transform:translateY(40px); }
#cart.eject{ animation:cartEject .45s steps(8) forwards; }
@keyframes cartDrop{ from{ transform:translateY(-120px); } 85%{ transform:translateY(46px); } to{ transform:translateY(40px); } }
@keyframes cartEject{ from{ transform:translateY(40px); } 20%{ transform:translateY(24px); } to{ transform:translateY(-120px); } }
#cartSlot{ position:absolute; left:50%; top:150px; width:176px; height:10px; margin-left:-88px; z-index:7;
  background:#05060a; border:3px solid #2a3044; opacity:0; transition:opacity .45s ease; }
#stageWrap.console #cartSlot{ opacity:1; }
#stageWrap.cartHide #cartWell, #stageWrap.cartHide #cartSlot{ opacity:0; }

/* ---- cartridges (one row under the screen) ---- */
.shelf{ display:flex; align-items:flex-end; gap:14px 22px; min-height:var(--shelf-h); padding:10px 8px 4px; flex-wrap:wrap; }
.shelfLabel{ align-self:center; font:7px var(--font-pixel); letter-spacing:.12em; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); }
.cartSlotItem{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cartSlotItem small{ font:7px var(--font-pixel); letter-spacing:.06em; color:var(--muted); }
.shelfCart, .flyCart, #cart{ background:#4a5068; border:3px solid #151824; border-radius:4px 4px 0 0;
  box-shadow:inset -4px -4px 0 #2e3346, inset 4px 4px 0 #6a7190; }
.shelfCart{ position:relative; width:112px; height:84px; padding:0; cursor:pointer; flex:none;
  animation:cartBob 2.6s steps(4) infinite; transition:transform .15s steps(3); }
.shelfCart:nth-of-type(1){ animation-delay:0s; }
.cartSlotItem:nth-child(3) .shelfCart{ animation-delay:-.65s; } .cartSlotItem:nth-child(4) .shelfCart{ animation-delay:-1.3s; }
.cartSlotItem:nth-child(5) .shelfCart{ animation-delay:-1.95s; }
@keyframes cartBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.shelfCart:hover, .shelfCart:focus-visible{ animation:none; transform:translateY(-10px) rotate(-2deg); outline:none; }
.shelfCart:focus-visible{ box-shadow:inset -4px -4px 0 #2e3346, inset 4px 4px 0 #6a7190, 0 0 0 3px var(--accent); }
.shelfCart.gone{ visibility:hidden; }
.shelfCart.playing{ animation:none; opacity:.35; }
.cartGrip{ position:absolute; left:14px; right:14px; top:5px; height:9px;
  background:repeating-linear-gradient(90deg, #2e3346 0 4px, #5b6280 4px 8px); }
.cartLabel{ position:absolute; left:9px; right:9px; top:20px; height:46px; background:var(--cc, #ccff00); border:3px solid #151824;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font:7px/1.4 var(--font-pixel); color:#0b0d16; padding:3px; }
.cartLabel img{ display:block; height:20px; width:auto; margin:0 auto 3px; image-rendering:pixelated; }
/* the flying copy and the seated cart are drawn at cashcat's full size */
.flyCart, #cart{ width:150px; height:110px; }
.flyCart{ position:fixed; z-index:80; pointer-events:none; }
.flyCart .cartGrip, #cart .cartGrip{ left:18px; right:18px; top:7px; height:12px; }
.flyCart .cartLabel, #cart .cartLabel{ left:12px; right:12px; top:28px; height:58px; font-size:9px; }
.flyCart .cartLabel img, #cart .cartLabel img{ height:26px; }
.shelfEnd{ margin-left:auto; display:flex; gap:8px; align-self:center; }
.shelfEnd .pill{ font-size:9.5px; padding:6px 11px; }

/* ---- ticker (hero strip, OBS bar) ---- */
.ticker{ position:relative; overflow:hidden; padding:9px 0; border-top:1px solid var(--panel-border); background:rgba(0,0,0,.18);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tickerTrack{ display:inline-flex; gap:18px; white-space:nowrap; padding-left:18px;
  font-family:var(--font-pixel); font-size:9px; letter-spacing:.08em; color:var(--muted); animation:tickerMove 38s linear infinite; }
.tickerTrack b{ color:var(--accent); font-weight:400; }
@keyframes tickerMove{ to{ transform:translateX(-50%); } }

/* ---- settings popover (opened from the top bar / S key) ---- */
#settingsPanel{ position:fixed; top:calc(var(--gap) + var(--topbar-h) + 8px); right:var(--gap); z-index:60; width:320px;
  max-height:calc(100vh - var(--topbar-h) - 3 * var(--gap)); overflow-y:auto; border-radius:12px; padding:0; }
#settingsPanel[hidden]{ display:none; }
.setHead{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:3; background:var(--panel-bg-strong);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); }
.setTitle{ font-family:var(--font-pixel); font-size:10px; color:#fff; letter-spacing:.05em; }
#settingsClose{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; }
#settingsClose:hover{ color:var(--ink); }
.setBody{ padding:6px 14px 14px; }
.setSection{ padding:10px 0; border-bottom:1px solid rgba(32,38,58,.4); }
.setSection:last-child{ border-bottom:none; }
.setSection h4{ font-size:9px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin:0 0 8px; }
.setRow{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink); padding:5px 0; }
.setRow input[type="checkbox"], .setRow input[type="range"]{ accent-color:var(--accent); }
.setRow input[type="range"]{ width:130px; }
.setHint{ color:var(--muted); font-size:9px; display:block; margin-top:2px; }
.setPills{ display:flex; gap:4px; flex-wrap:wrap; }
.setPill{ font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.04em; color:var(--muted);
  background:#10131f; border:1px solid var(--line); border-radius:4px; padding:5px 9px; cursor:pointer; }
.setPill:hover{ color:var(--ink); }
.setPill.active{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
#trackPills .setPill{ --tc:#8892b0; color:var(--tc); border-color:color-mix(in srgb, var(--tc) 45%, transparent); }
#trackPills .setPill.active{ background:var(--tc); color:#0b0d16; border-color:var(--tc); }
#trackPills [data-track="lofi"]{ --tc:#ffb6d5; } #trackPills [data-track="lounge"]{ --tc:#7cc8ff; }
#trackPills [data-track="neon"]{ --tc:#ccff00; } #trackPills [data-track="boss"]{ --tc:#ff4757; }
.sw{ display:inline-block; width:16px; height:10px; margin-right:6px; vertical-align:-1px; border-radius:2px;
  border:1px solid rgba(255,255,255,.28); background:linear-gradient(90deg, var(--swb) 50%, var(--swa) 50%); }

.scrim{ display:none; }

/* ---- responsive: sidebar becomes a drawer ---- */
@media (max-width:860px){
  :root{ --gap:10px; }
  .app, .app[data-sidebar="collapsed"]{ grid-template-columns:minmax(0,1fr); }
  .sidebar{ position:fixed; left:var(--gap); top:var(--gap); bottom:var(--gap); height:auto; width:min(280px, 84vw); z-index:70;
    transform:translateX(calc(-100% - 24px)); transition:transform .3s var(--ease); background:var(--panel-bg-strong); }
  .app[data-drawer="open"] .sidebar{ transform:none; }
  .app[data-sidebar="collapsed"] .brandText, .app[data-sidebar="collapsed"] .sideLabel, .app[data-sidebar="collapsed"] .sideTab .label,
  .app[data-sidebar="collapsed"] .sideTab .kbd, .app[data-sidebar="collapsed"] .sideItem .lbl, .app[data-sidebar="collapsed"] .sideItem .ext,
  .app[data-sidebar="collapsed"] .sideFoot .ft{ display:revert; }
  .app[data-sidebar="collapsed"] .brand{ flex-direction:row; }
  .app[data-sidebar="collapsed"] .sideTab, .app[data-sidebar="collapsed"] .sideItem{ justify-content:flex-start; padding:0 12px; }
  .app[data-sidebar="collapsed"] .sep{ display:none; }
  #collapseBtn{ display:none; }
  .scrim{ display:block; position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .3s; }
  .app[data-drawer="open"] .scrim{ opacity:1; pointer-events:auto; }
  .menuBtn{ display:grid !important; }
  .topbar{ padding:10px; gap:10px; }
  #topMark{ height:22px; }
  .mtabs{ display:flex; }
  #stageWrap{ height:min(76vh, 640px); }
  .shelf{ gap:12px 14px; justify-content:center; }
  .shelfLabel{ display:none; }
  .shelfEnd{ margin-left:0; width:100%; justify-content:center; }
  #settingsPanel{ top:auto; bottom:var(--gap); left:var(--gap); right:var(--gap); width:auto; max-height:78vh; }
}
@media (max-width:560px){ #musicBtn .trk{ display:none; }
  .shelf{ flex-wrap:nowrap; gap:8px; justify-content:space-between; padding:8px 2px 2px; }
  .shelfEnd{ display:none; }
  .shelfCart{ width:min(76px, 21vw); height:60px; border-width:2px; }
  .shelfCart .cartLabel{ left:6px; right:6px; top:15px; height:34px; font-size:5px; border-width:2px; }
  .shelfCart .cartLabel img{ height:13px; margin-bottom:2px; }
  .shelfCart .cartGrip{ left:10px; right:10px; top:4px; height:6px; } }


/* ==========================================================================
   ONE PILL SYSTEM — links, filters, copy buttons: slanted glass capsule,
   accent text, accent fill on hover. Label is wrapped in .pillIn by JS and
   skewed back upright.
   ========================================================================== */
.pills{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pill, .pills a{
  position:relative; overflow:hidden; display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-weight:700; font-size:10.5px; letter-spacing:.06em;
  text-decoration:none; color:var(--accent); cursor:pointer;
  padding:7px 14px; border-radius:var(--pill-radius);
  background:var(--pill-bg); border:1px solid var(--pill-border);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  transform:skewX(var(--skew));
  transition:background .15s, color .15s, border-color .15s, transform .12s; }
.pillIn{ display:inline-flex; align-items:center; gap:7px; transform:skewX(calc(var(--skew) * -1)); }
.pill:hover, .pills a:hover, .pill:focus-visible, .pills a:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent); outline:none;
  transform:skewX(var(--skew)) translateY(-2px); }
.pill:active, .pills a:active{ transform:skewX(var(--skew)) translateY(1px); }
/* accent line sweeps through every pill on hover */
.pill::before, .pills a::before{ content:''; position:absolute; top:0; bottom:0; width:38%; left:-45%;
  pointer-events:none; opacity:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.pill:hover::before, .pills a:hover::before{ opacity:1; animation:pillSweep .75s ease-out; }
@keyframes pillSweep{ from{ left:-45%; } to{ left:110%; } }
.pills.small a{ font-size:10px; padding:6px 12px; }
.pill.primary, .pills a.primary{ font-size:11px; padding:9px 18px; border-color:rgba(var(--accent-rgb),.65); }
.pill.muted, .pills.muted a{ color:var(--ink); }
.pill.muted:hover, .pills.muted a:hover{ color:var(--on-accent); }
.pill .tagMini{ font:7px var(--font-pixel); letter-spacing:.04em; color:var(--muted); }
.pill:hover .tagMini, .pills a:hover .tagMini{ color:var(--on-accent); }
/* monogram tile per venue/network, monochrome so none looks promoted */
.mk{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:16px; padding:0 3px;
  font:normal 6.5px var(--font-pixel); letter-spacing:0; color:currentColor;
  border:1px solid currentColor; border-radius:3px; opacity:.85; }

/* ==========================================================================
   CONTENT PANELS
   ========================================================================== */
#tabContent{ min-height:160px; scroll-margin-top:calc(var(--topbar-h) + 2 * var(--gap)); }
.tabPanel{ display:none; }
.tabPanel.active{
  display:block; padding:30px 28px; border-radius:14px;
  background:var(--panel-bg); border:1px solid var(--panel-border);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.07), inset 0 -1px 1px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
  animation:panelIn .35s ease-out; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.tabPanel h2{ font-family:var(--font-pixel); font-size:13px; color:var(--accent); margin:0 0 14px; }
.tabPanel h3{ font-family:var(--font-pixel); font-size:10px; color:var(--ink); letter-spacing:.04em; margin:26px 0 12px; font-weight:400; }
.tabPanel p{ color:var(--muted); line-height:1.65; font-size:13px; max-width:640px; }
.tabPanel p b{ color:var(--ink); font-weight:500; }
.note{ font-size:11px !important; color:var(--muted); line-height:1.6; border-top:1px solid var(--line); padding-top:14px; margin-top:18px; }
.lede{ font-size:10px !important; letter-spacing:.04em; margin:-8px 0 14px !important; opacity:.85; }
@media (max-width:560px){ .tabPanel.active{ padding:22px 16px; } .homePanelTicker{ margin:18px -16px -22px; } }

/* inline prose links: an underline that fills in accent -> accent2, plus a lift */
.tabPanel p a, .note a, #siteFooter p a{
  position:relative; display:inline-block; text-decoration:none; color:var(--accent);
  background-image:linear-gradient(90deg, var(--accent), var(--accent2));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .25s ease, transform .15s ease; }
.tabPanel p a:hover, .note a:hover, #siteFooter p a:hover{ background-size:100% 1px; transform:translateY(-1px); }

/* project cards */
.projGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin:4px 0 18px; }
.projCard{ position:relative; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  border-radius:12px; background:var(--panel-bg); border:1px solid var(--panel-border);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  transition:transform .18s ease, border-color .18s ease; }
a.projCard:hover, a.projCard:focus-visible{ transform:translateY(-3px); border-color:var(--accent); outline:none; }
.projCard.soon{ border-style:dashed; }
.projArt{ height:110px; display:flex; align-items:center; justify-content:center; position:relative;
  background:radial-gradient(circle at 50% 60%, rgba(var(--accent-rgb),.16), transparent 65%),
             repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px), #0a0d18; }
.projArt canvas{ image-rendering:pixelated; max-width:80%; }
.projArt .glyph{ font:26px var(--font-pixel); color:var(--accent); text-shadow:0 0 14px rgba(var(--accent-rgb),.5); }
.projBody{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; font-size:11.5px; line-height:1.55; color:var(--muted); flex:1; }
.projBody b{ font:9px var(--font-pixel); color:var(--ink); letter-spacing:.04em; font-weight:400; }
.projBody em{ font-style:normal; font-size:10px; color:var(--accent); margin-top:auto; }
.status{ position:absolute; top:10px; right:10px; font:7px var(--font-pixel); letter-spacing:.06em; padding:4px 6px; border-radius:3px;
  color:var(--on-accent); background:var(--accent); transform:skewX(var(--skew)); }
.status.soon{ background:#ffb020; }
/* accent line sweeps down a card on hover */
a.projCard::after{ content:''; position:absolute; left:0; right:0; top:-40%; height:40%; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.16), transparent); }
a.projCard:hover::after{ opacity:1; animation:vSweep 1.1s linear infinite; }
@keyframes vSweep{ from{ transform:translateY(0); } to{ transform:translateY(350%); } }

/* placeholder tiles (art/music until real media lands) */
.phGrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; max-width:640px; margin:0 0 18px; }
.phGrid div{ aspect-ratio:1/1; border:1px solid var(--line); border-radius:4px;
  background:linear-gradient(90deg, #10131f 0%, #1a1f33 50%, #10131f 100%); background-size:200% 100%;
  animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
@media (max-width:500px){ .phGrid{ grid-template-columns:repeat(2, 1fr); } }

/* build log */
.buildLog{ list-style:none; margin:0 0 18px; padding:0; border-left:1px solid var(--line); }
.buildLog li{ position:relative; padding:0 0 14px 18px; font-size:12px; color:var(--muted); line-height:1.55; }
.buildLog li::before{ content:''; position:absolute; left:-4px; top:6px; width:7px; height:7px; border-radius:50%;
  background:var(--panel); border:1px solid var(--accent); }
.buildLog b{ color:var(--ink); font-weight:500; }
.buildLog .when{ display:inline-block; margin-right:8px; font:7px var(--font-pixel); letter-spacing:.06em;
  color:var(--on-accent); background:var(--accent); padding:4px 6px; border-radius:3px; transform:skewX(var(--skew)); vertical-align:2px; }

/* disclosure: white title with a slow sweep through the letters; accent when open */
.discloseBtn{ display:flex; align-items:center; gap:9px; background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:left; }
.discloseBtn:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }
.discloseTitle{ font-family:var(--font-pixel); font-size:10px; letter-spacing:.04em;
  background-image:linear-gradient(180deg, #fff 0 38%, rgba(var(--accent2-rgb),.95) 46%, rgba(var(--accent-rgb),.8) 52%, #fff 60% 100%);
  background-size:100% 420%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:mxSweep 7s linear infinite; }
@keyframes mxSweep{ from{ background-position:0 -120%; } to{ background-position:0 220%; } }
.discloseChev{ display:inline-block; font-size:10px; color:#fff; transition:transform .18s ease, color .15s; }
.discloseBtn:hover .discloseTitle, .discloseBtn[aria-expanded="true"] .discloseTitle{ background-image:none; color:var(--accent); animation:none; }
.discloseBtn:hover .discloseChev, .discloseBtn[aria-expanded="true"] .discloseChev{ color:var(--accent); }
.discloseBtn[aria-expanded="true"] .discloseChev{ transform:rotate(90deg); }
.discloseBody{ margin-top:12px; max-width:640px; border-left:1px solid var(--line); padding-left:16px; }
.discloseBody p{ font-size:12px; }
.fold{ margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }

/* support card */
.supportCard{ margin-top:22px; max-width:440px; padding:20px 22px; border-radius:10px; }
.supportCard h3{ margin-top:0; color:var(--accent); }
.supportCard p{ font-size:12px; margin:0 0 16px; }

/* footer (inside the main column, under the content panel) */
#siteFooter{ margin:6px 0 0; padding:18px 8px 30px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; gap:10px 24px; font-size:11px; line-height:1.6; color:var(--muted); }
#siteFooter p{ margin:0; max-width:620px; }
#siteFooter .fRight{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; text-align:right; }
#siteFooter .build{ font-size:10px; color:var(--ink); opacity:.8; }
#siteFooter .build a{ color:var(--accent); text-decoration:none; }
@media (max-width:640px){ #siteFooter{ grid-template-columns:1fr; } #siteFooter .fRight{ align-items:flex-start; text-align:left; } }

/* ==========================================================================
   THEMES — only the accent family and surfaces change. Default = SCARLET.
   ========================================================================== */
html[data-theme="lime"]  { --accent:#ccff00; --accent-rgb:204,255,0;   --accent2:#3dff7a; --accent2-rgb:61,255,122; --bg:#070810; --bg-rgb:7,8,16; }
html[data-theme="violet"]{ --accent:#b26bff; --accent-rgb:178,107,255; --bg:#08050c; --bg-rgb:8,5,12; }
html[data-theme="ember"] { --accent:#ff7a29; --accent-rgb:255,122,41;  --bg:#0a0704; --bg-rgb:10,7,4; }
html[data-theme="reef"]  { --accent:#2dd4bf; --accent-rgb:45,212,191;  --accent2:#7cc8ff; --accent2-rgb:124,200,255; --bg:#03090a; --bg-rgb:3,9,10; }
/* OVERCAST — the light-ish option: mid-tone blue-grey sky, no glare */
html[data-theme="overcast"]{
  --bg:#3b4558; --bg-rgb:59,69,88; --panel:#465169; --line:#5d6983; --ink:#f3f6fb; --muted:#c7cfdd;
  --panel-bg:rgba(236,241,248,.12); --panel-bg-strong:rgba(60,70,90,.78);
  --panel-border:rgba(255,255,255,.18); --panel-border-hi:rgba(255,255,255,.4);
  --accent:#ffc2cc; --accent-rgb:255,194,204; --pill-bg:rgba(255,255,255,.08); --pill-border:rgba(255,255,255,.22); }
html[data-theme="overcast"] .sideTab, html[data-theme="overcast"] .setPill{ background:rgba(255,255,255,.07); }
html[data-theme="overcast"] .sideTab:hover, html[data-theme="overcast"] .sideTab.active{ background:rgba(255,255,255,.14); }
/* TERMINAL — green phosphor CRT: one colour, scanlines, square corners */
html[data-theme="terminal"]{
  --accent:#31ff6a; --accent-rgb:49,255,106; --accent2:#b6ff2e; --accent2-rgb:182,255,46;
  --bg:#010a04; --bg-rgb:1,10,4; --panel:#02170a; --ink:#c9ffd8; --muted:#4fae74; --line:#0c4a26;
  --panel-bg:rgba(3,30,14,.5); --panel-bg-strong:rgba(2,20,9,.75);
  --panel-border:rgba(49,255,106,.28); --panel-border-hi:rgba(49,255,106,.55); }
html[data-theme="terminal"] body{ text-shadow:0 0 6px rgba(49,255,106,.25); }
html[data-theme="terminal"] .glass, html[data-theme="terminal"] .tabPanel.active,
html[data-theme="terminal"] .projCard, html[data-theme="terminal"] .sidebar, html[data-theme="terminal"] .topbar,
html[data-theme="terminal"] #stageWrap, html[data-theme="terminal"] .sideTab{ border-radius:0; }
html[data-theme="terminal"] body::after{ content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
/* WIN98 — grey plastic: bevels, navy accent, no glass */
html[data-theme="win98"]{
  --accent:#000080; --accent-rgb:0,0,128; --accent2:#008080; --accent2-rgb:0,128,128; --on-accent:#fff;
  --bg:#008080; --bg-rgb:0,128,128; --panel:#c0c0c0; --ink:#000; --muted:#404040; --line:#808080;
  --panel-bg:rgba(192,192,192,.97); --panel-bg-strong:rgba(192,192,192,.99); --panel-border:#808080; --panel-border-hi:#fff; }
html[data-theme="win98"] body{ font-family:Tahoma, Verdana, var(--font-mono), sans-serif; }
html[data-theme="win98"] .glass, html[data-theme="win98"] .tabPanel.active, html[data-theme="win98"] .projCard, html[data-theme="win98"] .topbar,
html[data-theme="win98"] #settingsPanel, html[data-theme="win98"] .sidebar, html[data-theme="win98"] .refract > .refract-layer{
  background:#c0c0c0; color:#000; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; filter:none;
  border:2px solid; border-color:#fff #404040 #404040 #fff; box-shadow:1px 1px 0 #000; }
html[data-theme="win98"] h2, html[data-theme="win98"] .setTitle, html[data-theme="win98"] .discloseTitle{ color:#000 !important; background-image:none !important; }
html[data-theme="win98"] .pill, html[data-theme="win98"] .pills a, html[data-theme="win98"] .sideTab, html[data-theme="win98"] .setPill{
  transform:none; background:#c0c0c0; color:#000; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:2px solid; border-color:#fff #404040 #404040 #fff; box-shadow:1px 1px 0 #000; }
html[data-theme="win98"] .pillIn, html[data-theme="win98"] .sideTab > *{ transform:none; }
html[data-theme="win98"] .sideTab.active, html[data-theme="win98"] .setPill.active{ border-color:#404040 #fff #fff #404040; background:#b0b0b0; color:#000; }
html[data-theme="win98"] #wash, html[data-theme="win98"] #siteField{ opacity:.25; }

/* ==========================================================================
   ACCESSIBILITY — OS preference, then the manual Settings override.
   Kept last so it wins the cascade.
   ========================================================================== */
@media (prefers-reduced-transparency: reduce){
  .glass, .tabPanel.active, .projCard, .pill, .pills a{ background:#0d1020; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .refract > .refract-layer{ background:#0d1020; backdrop-filter:none; -webkit-backdrop-filter:none; filter:none; } }
html[data-reduce-transparency="true"] .glass, html[data-reduce-transparency="true"] .refract > .refract-layer,
html[data-reduce-transparency="true"] .tabPanel.active, html[data-reduce-transparency="true"] .projCard,
html[data-reduce-transparency="true"] .pill, html[data-reduce-transparency="true"] .pills a,
html[data-reduce-transparency="true"] #settingsPanel{
  background:var(--panel) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; filter:none !important; }
/* the system reduce-motion switch is folded into html[data-reduce-motion] by core.js (Motion: AUTO) */
html[data-reduce-motion="true"] #wash, html[data-reduce-motion="true"] .tickerTrack,
html[data-reduce-motion="true"] .discloseTitle, html[data-reduce-motion="true"] .phGrid div,
html[data-reduce-motion="true"] .pill:hover::before, html[data-reduce-motion="true"] .pills a:hover::before,
html[data-reduce-motion="true"] a.projCard:hover::after, html[data-reduce-motion="true"] .sideTab,
html[data-reduce-motion="true"] #musicBtn .eq i, html[data-reduce-motion="true"] .shelfCart{ animation:none !important; }

/* ==========================================================================
   FULL-BLEED SCREENS (games bookcase, music deck) — v0.4
   ========================================================================== */
#screenContent.bleed{ padding:0; overflow:hidden; }
#screenContent.bleed .tabPanel.active{ max-width:none; height:100%; margin:0; }

/* ---- GAMES: a living bookcase ---- */
.bookcase{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:0; padding:26px clamp(16px, 5vw, 70px) 22px;
  overflow:hidden; isolation:isolate; }
#caseCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; display:block; }
.caseTitle{ position:absolute; top:16px; left:clamp(16px, 5vw, 70px); z-index:2; pointer-events:none; }
.caseTitle h2{ margin:0 0 6px !important; text-shadow:0 2px 0 #000; }
.caseTitle p{ margin:0 !important; font-size:11px !important; color:var(--ink) !important; opacity:.75; text-shadow:0 1px 0 #000; }
.shelfRow{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px, 2.4vw, 30px); min-height:132px; padding:0 10px; }
.plank{ position:relative; height:18px; margin:0 -12px 34px; border-radius:2px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 38px, rgba(0,0,0,.18) 38px 40px, rgba(0,0,0,0) 40px 91px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,.06) 2px 5px),
    linear-gradient(180deg, color-mix(in srgb, #7a4a32 70%, var(--accent)) 0%, #4a2a1e 55%, #2a1610 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.18) inset, 0 12px 18px rgba(0,0,0,.55), 0 2px 0 #1a0d08; }
.plank::after{ content:''; position:absolute; left:0; right:0; top:100%; height:26px; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.45), transparent); }
/* carts stand on the plank; hovering one nudges its neighbours */
.shelfRow .shelfCart{ width:132px; height:98px; animation:none; transform-origin:50% 100%; transition:transform .25s cubic-bezier(.3,1.6,.5,1); }
.shelfRow .shelfCart .cartGrip{ left:16px; right:16px; top:6px; height:10px; }
.shelfRow .shelfCart .cartLabel{ left:11px; right:11px; top:24px; height:52px; font-size:8px; }
.shelfRow .shelfCart .cartLabel img{ height:23px; }
.shelfRow .shelfCart:hover, .shelfRow .shelfCart:focus-visible{ transform:translateY(-14px) rotate(-3deg); }
.shelfRow .caseItem:has(+ .caseItem .shelfCart:hover) .shelfCart, .shelfRow .caseItem:has(+ .caseItem:hover) .deco{ transform:rotate(-4deg); }
.shelfRow .caseItem:hover + .caseItem .shelfCart, .shelfRow .caseItem:hover + .caseItem .deco{ transform:rotate(4deg); }
.caseItem{ display:flex; flex-direction:column; align-items:center; }
.caseItem small{ margin-top:8px; font:7px var(--font-pixel); letter-spacing:.08em; color:var(--ink); opacity:.7; text-shadow:0 1px 0 #000; }
/* decor: books, plant, candle */
.deco{ transform-origin:50% 100%; transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
.books{ display:flex; align-items:flex-end; gap:2px; }
.book{ width:22px; border-radius:2px 2px 0 0; position:relative; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; transform:rotate(180deg); font:6.5px var(--font-pixel); letter-spacing:.14em; color:rgba(0,0,0,.7);
  box-shadow:inset -3px 0 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(255,255,255,.18); }
.book::before, .book::after{ content:''; position:absolute; left:3px; right:3px; height:2px; background:rgba(0,0,0,.28); }
.book::before{ top:8px; } .book::after{ bottom:8px; }
.book.lean{ transform:rotate(172deg) translateX(-3px); transform-origin:50% 0; }
.plant{ position:relative; width:46px; height:96px; }
.plant .pot{ position:absolute; left:8px; right:8px; bottom:0; height:28px; background:linear-gradient(180deg, #b0643c, #6e3620); border-radius:0 0 6px 6px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.2); }
.plant .leaves{ position:absolute; left:50%; bottom:24px; width:0; height:0; animation:sway 5s ease-in-out infinite; transform-origin:0 100%; }
.plant .leaves i{ position:absolute; bottom:0; width:12px; height:40px; border-radius:12px 12px 2px 2px; transform-origin:50% 100%;
  background:linear-gradient(180deg, color-mix(in srgb, #5fd38a 60%, var(--accent2)), #1f6b44); }
.plant .leaves i:nth-child(1){ left:-6px; transform:rotate(-38deg); height:46px; }
.plant .leaves i:nth-child(2){ left:-6px; transform:rotate(-8deg); height:60px; }
.plant .leaves i:nth-child(3){ left:-6px; transform:rotate(24deg); height:50px; }
.plant .leaves i:nth-child(4){ left:-6px; transform:rotate(52deg); height:34px; }
@keyframes sway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(4deg); } }
.candle{ position:relative; width:26px; height:70px; }
.candle .wax{ position:absolute; left:4px; right:4px; bottom:0; height:44px; background:linear-gradient(90deg, #efe6d6, #fffaf0 40%, #cfc3ae); border-radius:3px 3px 0 0; }
.candle .wick{ position:absolute; left:50%; bottom:44px; width:2px; height:6px; margin-left:-1px; background:#2a1a10; }
.candle .flame{ position:absolute; left:50%; bottom:48px; width:10px; height:18px; margin-left:-5px; border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%, #fff 0 20%, #ffd36b 40%, color-mix(in srgb, #ff7a29 70%, var(--accent)) 75%, transparent 80%);
  filter:drop-shadow(0 0 8px rgba(255,190,90,.9)); animation:flicker .18s steps(2) infinite alternate; transform-origin:50% 100%; }
@keyframes flicker{ from{ transform:scale(1, 1) rotate(-2deg); } to{ transform:scale(.92, 1.08) rotate(2deg); } }
@media (max-width:700px){
  .bookcase{ padding:64px 10px 12px; justify-content:flex-start; }
  .shelfRow{ min-height:104px; gap:10px; }
  .shelfRow .shelfCart{ width:96px; height:72px; }
  .shelfRow .shelfCart .cartLabel{ left:8px; right:8px; top:18px; height:38px; font-size:6px; }
  .shelfRow .shelfCart .cartLabel img{ height:16px; }
  .shelfRow .deco.hideSm{ display:none; }
  .plank{ margin-bottom:22px; }
}

/* ---- MUSIC: turntable ---- */
.deck{ position:relative; height:100%; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(20px, 4vw, 56px); align-items:center;
  padding:28px clamp(18px, 5vw, 64px); overflow:auto;
  background:radial-gradient(90% 70% at 30% 55%, rgba(var(--accent-rgb), .12), transparent 70%); }
.turntable{ --tt:min(52vh, 440px); width:calc(var(--tt) * 1.22); height:var(--tt); position:relative; border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #2a1d19, #15100e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.6); }
.platter{ position:absolute; left:6%; top:8%; width:84%; aspect-ratio:1; max-height:84%; width:auto; height:84%; border-radius:50%;
  background:radial-gradient(circle, #3a3a42 0 60%, #1b1b20 61% 100%); box-shadow:0 6px 18px rgba(0,0,0,.6), inset 0 0 0 3px #0c0c0f; }
.vinyl{ position:absolute; inset:3%; border-radius:50%; --vc:#ffb6d5;
  background:
    conic-gradient(from 30deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.14) 30deg, rgba(255,255,255,0) 60deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.1) 210deg, rgba(255,255,255,0) 240deg),
    repeating-radial-gradient(circle, #0b0b0d 0 2px, #16161a 2px 3px),
    #0b0b0d;
  box-shadow:inset 0 0 0 2px #000, 0 0 0 1px rgba(255,255,255,.05);
  animation:spin 1.8s linear infinite; animation-play-state:paused; }
.turntable[data-playing="true"] .vinyl{ animation-play-state:running; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.vinyl .vLabel{ position:absolute; left:50%; top:50%; width:36%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, transparent 0 7%, var(--vc) 8% 100%); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#0b0d16; box-shadow:inset 0 0 0 3px rgba(0,0,0,.18); }
.vinyl .vLabel b{ font:clamp(6px, 1.1vh, 9px)/1.5 var(--font-pixel); letter-spacing:.04em; margin-top:-14%; max-width:80%; }
.vinyl .vLabel small{ font:clamp(5px, .8vh, 7px) var(--font-pixel); opacity:.7; margin-top:4px; }
.vinyl .spindle{ position:absolute; left:50%; top:50%; width:3.5%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #9aa0aa 60%, #555a64); }
.vinyl.lift{ animation:vLift .45s ease-in forwards; }
.vinyl.drop{ animation:vDrop .5s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes vLift{ to{ transform:translateY(-18%) scale(.92) rotate(40deg); opacity:0; } }
@keyframes vDrop{ from{ transform:translateY(-14%) scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
.tonearm{ position:absolute; right:6%; top:9%; width:12%; aspect-ratio:1; pointer-events:none; }
.tonearm .armBase{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 40% 35%, #d8dde6, #7c828c 60%, #3d4148);
  box-shadow:0 4px 10px rgba(0,0,0,.6); }
.tonearm .arm{ position:absolute; left:50%; top:50%; width:5%; min-width:5px; height:calc(var(--tt) * .62); transform-origin:50% 0;
  background:linear-gradient(90deg, #aab0ba, #eef1f5, #8a9099); border-radius:3px; transform:rotate(18deg); transition:transform .9s cubic-bezier(.4,1.3,.5,1); }
.tonearm .head{ position:absolute; left:50%; bottom:-14px; width:18px; height:26px; margin-left:-9px; background:linear-gradient(180deg, #2a2d33, #0e0f12);
  border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.turntable[data-playing="true"] .tonearm .arm{ transform:rotate(34deg); animation:armWobble 3.6s ease-in-out .9s infinite; }
@keyframes armWobble{ 0%,100%{ transform:rotate(34deg); } 50%{ transform:rotate(35deg); } }
.ttCtl{ position:absolute; left:5%; bottom:4%; display:flex; align-items:center; gap:10px; }
.ttCtl .led{ width:8px; height:8px; border-radius:50%; background:#3a1a1a; box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); }
.turntable[data-playing="true"] .ttCtl .led{ background:var(--accent); box-shadow:0 0 10px var(--accent); }
.ttCtl span{ font:7px var(--font-pixel); color:rgba(255,255,255,.55); letter-spacing:.08em; }
.deckInfo h2{ margin-bottom:10px !important; }
.nowLabel{ font:7px var(--font-pixel); letter-spacing:.12em; color:var(--muted); margin:14px 0 6px; }
#nowTitle{ font:clamp(14px, 2.2vw, 22px) var(--font-pixel); color:var(--ink); letter-spacing:.04em; min-height:1.3em; margin:0 0 6px; }
#nowSub{ font-size:11px; color:var(--muted); margin:0 0 16px; }
.eqBars{ display:flex; align-items:flex-end; gap:3px; height:34px; margin:0 0 18px; }
.eqBars i{ width:6px; height:4px; background:var(--accent); opacity:.85; box-shadow:0 0 8px rgba(var(--accent-rgb), .5); }
.turntable[data-playing="true"] ~ .deckInfo .eqBars i, .deck[data-playing="true"] .eqBars i{ animation:eqb .9s ease-in-out infinite alternate; }
.eqBars i:nth-child(2n){ animation-duration:.7s !important; } .eqBars i:nth-child(3n){ animation-duration:1.1s !important; } .eqBars i:nth-child(5n){ animation-duration:.55s !important; }
@keyframes eqb{ from{ height:4px; } to{ height:34px; } }
.deckVol{ display:flex; align-items:center; gap:10px; font:7px var(--font-pixel); color:var(--muted); letter-spacing:.08em; margin:14px 0 0; }
.deckVol input{ accent-color:var(--accent); width:160px; }
@media (max-width:860px){
  .deck{ grid-template-columns:1fr; justify-items:center; text-align:center; align-content:start; padding-top:22px; gap:18px; }
  .turntable{ --tt:min(40vh, 64vw); }
  .eqBars, .deckVol{ justify-content:center; }
  #screenContent.bleed:has(#panel-music.active){ overflow-y:auto; }
  #panel-music.active, .deck{ height:auto; min-height:100%; padding-bottom:56px; }
}
/* the disc flying from an album sleeve to the platter */
.flyDisc{ position:fixed; z-index:80; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--vc) 0 17%, #0b0b0d 18% 100%), repeating-radial-gradient(circle, #0b0b0d 0 2px, #16161a 2px 3px);
  box-shadow:0 10px 24px rgba(0,0,0,.6); }

/* ---- bottom row: albums replace cartridges on the MUSIC tab ---- */
.albumItem{ flex-direction:column; align-items:center; gap:6px; }
.albumItem:nth-of-type(2){ animation-delay:.04s !important; } .albumItem:nth-of-type(3){ animation-delay:.08s !important; }
@keyframes rowIn{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.albumItem small{ font:7px var(--font-pixel); letter-spacing:.06em; color:var(--muted); }
.album{ position:relative; width:84px; height:84px; padding:0; border:0; background:none; cursor:pointer;
  animation:cartBob 2.6s steps(4) infinite; transition:transform .15s steps(3); }
.albumItem:nth-child(odd) .album{ animation-delay:-1.3s; }
.album .disc{ position:absolute; top:6px; left:12px; width:72px; height:72px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, var(--vc) 0 17%, #0b0b0d 18% 100%), repeating-radial-gradient(circle, #0b0b0d 0 2px, #1a1a1e 2px 3px);
  box-shadow:0 4px 10px rgba(0,0,0,.5); transition:left .35s cubic-bezier(.3,1.5,.5,1); }
.album .sleeve{ position:absolute; inset:0 10px 0 0; z-index:1; overflow:hidden; border-radius:2px;
  background:linear-gradient(135deg, var(--vc), color-mix(in srgb, var(--vc) 45%, #0b0d16));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), inset 3px 3px 0 rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:6px; text-align:left; }
.album .sleeve::before{ content:''; position:absolute; inset:0; opacity:.35; mix-blend-mode:multiply;
  background:repeating-linear-gradient(var(--ang, 45deg), rgba(0,0,0,.5) 0 3px, transparent 3px 9px); }
.album .sleeve canvas{ position:absolute; left:6px; top:6px; height:14px; width:auto; image-rendering:pixelated; }
.album .sleeve b{ position:relative; font:6px/1.5 var(--font-pixel); color:#0b0d16; letter-spacing:.04em; }
.album:hover, .album:focus-visible{ animation:none; transform:translateY(-10px) rotate(-2deg); outline:none; }
.album:hover .disc, .album:focus-visible .disc{ left:24px; }
.album:focus-visible .sleeve{ box-shadow:0 0 0 3px var(--accent); }
.album.current .disc{ left:22px; animation:spin 1.8s linear infinite; }
.album.current .sleeve{ box-shadow:inset 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb), .45); }
@media (max-width:860px){
  .app:is([data-view="games"], [data-view="music"], [data-view="art"], [data-view="links"]) .shelf{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; padding-top:16px; }
  .app:is([data-view="games"], [data-view="music"], [data-view="art"], [data-view="links"]) .shelf::-webkit-scrollbar{ display:none; }
  .album{ width:70px; height:70px; } .album .disc{ width:60px; height:60px; } .album:hover .disc{ left:18px; }
}
html[data-reduce-motion="true"] .album, html[data-reduce-motion="true"] .vinyl, html[data-reduce-motion="true"] .plant .leaves,
html[data-reduce-motion="true"] .candle .flame, html[data-reduce-motion="true"] .eqBars i, html[data-reduce-motion="true"] .album.current .disc{ animation:none !important; }
/* touch: SCVRLET RUN's pad sits bottom-left of the scene, so the intro card moves up */
@media (pointer:coarse){ #homeCard{ bottom:auto; top:52px; } }

/* ==========================================================================
   THE TRAY FOLLOWS THE TAB — v0.5
   GAMES = cartridges, MUSIC = records, ART = photos, REFERRALS = ad cards.
   HOME and ABOUT have no tray: the screen takes the whole right side.
   ========================================================================== */
.shelf > .cartSlotItem, .shelf > .albumItem, .shelf > .photoItem, .shelf > .adItem{ display:none; }
.app[data-view="games"] .shelf > .cartSlotItem, .app[data-view="music"] .shelf > .albumItem,
.app[data-view="art"] .shelf > .photoItem, .app[data-view="links"] .shelf > .adItem{ display:flex; animation:rowIn .45s cubic-bezier(.3,1.5,.5,1) backwards; }
.shelf > :nth-child(3){ animation-delay:.04s !important; } .shelf > :nth-child(4){ animation-delay:.08s !important; }
.shelf > :nth-child(5){ animation-delay:.12s !important; } .shelf > :nth-child(6){ animation-delay:.16s !important; }
.app[data-view="home"] .shelf, .app[data-view="about"] .shelf{ display:none; }
.app[data-view="home"] #stageWrap, .app[data-view="about"] #stageWrap{ height:clamp(420px, calc(100vh - var(--topbar-h) - 3 * var(--gap)), 1000px); }
@media (max-width:860px){ .app[data-view="home"] #stageWrap, .app[data-view="about"] #stageWrap{ height:min(80vh, 720px); } }

/* ---- per-game shelf → slot flights (site.js fly()) ---- */
.flyCart.ghost{ opacity:.28; filter:saturate(1.6) brightness(1.3); z-index:79; }
.flyFlame{ position:absolute; left:50%; bottom:-34px; width:36px; height:38px; margin-left:-18px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, #fff 0 18%, #ffd24a 30%, #ff6a2a 55%, transparent 72%); animation:flame .08s steps(2) infinite alternate; }
@keyframes flame{ to{ transform:scaleY(.72) scaleX(1.1); opacity:.8; } }
.flyPuff{ position:fixed; z-index:78; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); pointer-events:none; }

/* ---- ART: photos in the tray, a gallery wall on the screen ---- */
.photoItem{ flex-direction:column; align-items:center; }
.photo{ position:relative; width:118px; padding:6px 6px 20px; border:0; border-radius:2px; cursor:pointer; background:#f3eee4;
  box-shadow:0 6px 14px rgba(0,0,0,.45); transform:rotate(var(--tilt, -3deg)); transition:transform .22s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; }
.photoItem:nth-of-type(2n) .photo{ --tilt:2.5deg; } .photoItem:nth-of-type(3n) .photo{ --tilt:-1.5deg; } .photoItem:nth-of-type(5n) .photo{ --tilt:3.5deg; }
.photo::before{ content:''; position:absolute; top:-7px; left:50%; width:34px; height:12px; margin-left:-17px; background:rgba(255,255,255,.4);
  transform:rotate(-4deg); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.photoThumb{ display:block; width:106px; height:74px; image-rendering:pixelated; background:#111; }
.photoCap{ position:absolute; left:0; right:0; bottom:6px; text-align:center; font:7px var(--font-pixel); color:#3a2a30; letter-spacing:.04em; white-space:nowrap; }
.photo:hover, .photo:focus-visible, .photo.current{ transform:translateY(-10px) rotate(0deg) scale(1.05); outline:none;
  box-shadow:0 14px 26px rgba(0,0,0,.55), 0 0 0 2px var(--accent); }
.photo.gone{ visibility:hidden; } .photo.playing{ opacity:.4; }
.flyPhoto{ position:fixed; z-index:80; margin:0; pointer-events:none; transform-origin:0 0; padding:6px 6px 20px; background:#f3eee4;
  box-shadow:0 20px 40px rgba(0,0,0,.6); border-radius:2px; }
.flyPhoto canvas{ display:block; width:100%; height:calc(100% - 0px); image-rendering:pixelated; }
.flyPhoto .photoCap{ font-size:7px; }

.gallery{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at 50% 18%, rgba(var(--accent-rgb), .10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 9px), #120c12; }
.gallery::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:16%; z-index:-1;
  background:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.55)), repeating-linear-gradient(90deg, #2a1c18 0 40px, #241814 40px 42px); }
.galTitle{ position:absolute; top:16px; left:clamp(16px, 5vw, 70px); z-index:2; pointer-events:none; }
.galTitle h2{ margin:0 0 6px !important; }
.galTitle p{ margin:0 !important; font-size:11px !important; opacity:.8; }
.galFrame{ position:relative; margin:0 0 30px; width:min(640px, 60%); padding:12px; cursor:pointer;
  background:linear-gradient(135deg, #34262b, #140c10); box-shadow:0 0 0 3px #0a0608, 0 30px 60px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.06);
  transition:transform .3s cubic-bezier(.3,1.5,.5,1); }
.galFrame:hover{ transform:translateY(-4px); }
.galLight{ position:absolute; left:50%; top:-80%; width:170%; height:150%; transform:translateX(-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,238,210,.18), transparent 62%); }
.galMat{ background:#ece5d8; padding:clamp(8px, 2vw, 20px); box-shadow:inset 0 2px 6px rgba(0,0,0,.35); }
#galPreview{ display:block; width:100%; aspect-ratio:16/9; image-rendering:pixelated; background:#000; }
.galPlaque{ position:absolute; left:50%; bottom:-44px; transform:translateX(-50%); padding:6px 14px; text-align:center; white-space:nowrap;
  background:linear-gradient(#e0d2b2, #bfae8a); color:#2a1e14; box-shadow:0 4px 10px rgba(0,0,0,.5); }
.galPlaque b{ display:block; font:8px var(--font-pixel); letter-spacing:.06em; }
.galPlaque small{ display:block; margin-top:3px; font:10px var(--font-mono); opacity:.75; }
@media (max-width:860px){ .galFrame{ width:86%; margin-bottom:40px; } .galTitle p{ display:none; } }
@media (max-width:560px){ .photo{ width:92px; padding:5px 5px 17px; } .photoThumb{ width:82px; height:57px; } .photoCap{ font-size:7px; bottom:4px; } }

/* ---- REFERRALS: an old TV and ad cards ---- */
.adDesk{ position:relative; height:100%; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(20px, 4vw, 56px); align-items:center;
  padding:24px clamp(18px, 4vw, 56px); overflow:hidden;
  background:radial-gradient(ellipse at 30% 40%, rgba(var(--accent-rgb), .08), transparent 60%); }
.oldTv{ --tv:min(44vh, 30vw); position:relative; padding-top:calc(var(--tv) * .22); }
.tvAnt{ position:absolute; left:42%; top:0; width:0; height:calc(var(--tv) * .22); }
.tvAnt::after{ content:''; position:absolute; left:calc(var(--tv) * -.07); bottom:-4px; width:calc(var(--tv) * .14); height:calc(var(--tv) * .06);
  border-radius:50% 50% 0 0; background:linear-gradient(#4a4a4a, #1c1c1c); }
.tvAnt i{ position:absolute; bottom:0; left:-1px; width:3px; height:calc(var(--tv) * .34); transform-origin:50% 100%;
  background:linear-gradient(#f2f2f2, #777); border-radius:2px; }
.tvAnt i:first-child{ transform:rotate(-30deg); } .tvAnt i:last-child{ transform:rotate(22deg); }
.tvAnt i::before{ content:''; position:absolute; top:-3px; left:-2px; width:7px; height:7px; border-radius:50%; background:#ddd; }
.tvBody{ position:relative; display:flex; gap:calc(var(--tv) * .05); padding:calc(var(--tv) * .065); border-radius:calc(var(--tv) * .07);
  background:linear-gradient(rgba(255,255,255,.07), transparent 20%, rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, #6e4126 0 7px, #603620 7px 10px, #784a2c 10px 16px, #5a331d 16px 18px);
  box-shadow:inset 0 0 0 4px #3a2012, inset 0 5px 0 rgba(255,255,255,.1), 0 20px 44px rgba(0,0,0,.65); }
.tvGlass{ position:relative; width:calc(var(--tv) * 1.1); height:calc(var(--tv) * .825); border-radius:16% / 20%; overflow:hidden; background:#000;
  box-shadow:0 0 0 calc(var(--tv) * .022) #151008, 0 0 0 calc(var(--tv) * .045) #cdbd9c, 0 0 0 calc(var(--tv) * .05) #7e6e52; }
#adScreen{ display:block; width:100%; height:100%; image-rendering:pixelated; }
.tvCurve{ position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.2), transparent 40%), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); }
.oldTv.zap .tvGlass{ animation:tvZap .45s ease-out; }
@keyframes tvZap{ 0%{ filter:brightness(3) contrast(1.4); transform:scaleY(.04); } 30%{ transform:scaleY(1.02); } 100%{ filter:none; transform:none; } }
.tvSide{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 8px; width:calc(var(--tv) * .24);
  background:linear-gradient(#2c1c12, #1d120b); border-radius:8px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.4); }
.tvKnob{ position:relative; width:calc(var(--tv) * .15); aspect-ratio:1; padding:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #f2ece0, #948b7d 58%, #4a443c); border:2px solid #120d09;
  box-shadow:0 3px 0 #0a0705; transition:transform .35s cubic-bezier(.3,1.5,.5,1); }
.tvKnob i{ position:absolute; left:50%; top:8%; width:3px; height:40%; margin-left:-1.5px; background:#2a2420; border-radius:2px; }
.tvKnob.sm{ width:calc(var(--tv) * .1); }
.tvKnob:hover, .tvKnob:focus-visible{ outline:none; box-shadow:0 3px 0 #0a0705, 0 0 0 2px var(--accent); }
.tvLbl{ font:7px var(--font-pixel); color:#cdbd9c; letter-spacing:.08em; }
.tvGrille{ flex:1; width:74%; min-height:24px; margin-top:4px; border-radius:4px; background:repeating-linear-gradient(#170d06 0 3px, #3c2818 3px 6px); }
.tvLegs{ display:flex; justify-content:space-between; padding:0 16%; }
.tvLegs i{ width:9px; height:calc(var(--tv) * .12); background:linear-gradient(90deg, #4a2a16, #2a160a); transform:skewX(10deg); }
.tvLegs i:last-child{ transform:skewX(-10deg); }
.adInfo h2{ margin-bottom:10px !important; }
.adInfo .lede{ margin-top:0 !important; }
#adName{ font:clamp(14px, 2.1vw, 22px)/1.3 var(--font-pixel); color:var(--ink); margin:4px 0 6px; }
#adPerk{ margin:0 0 14px !important; color:var(--muted); }
.adCard{ position:relative; width:132px; height:96px; padding:0; border-radius:6px; cursor:pointer; overflow:hidden; text-align:left; color:#fff;
  background:linear-gradient(160deg, color-mix(in srgb, var(--ac) 82%, #fff 18%), var(--ac) 60%);
  border:2px solid color-mix(in srgb, var(--ai) 55%, #000); box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.07);
  transform:rotate(var(--tilt, -2deg)); transition:transform .22s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; }
.adItem:nth-of-type(2n) .adCard{ --tilt:2deg; } .adItem:nth-of-type(3n) .adCard{ --tilt:-1deg; }
.adCard::after{ content:''; position:absolute; inset:0; transform:translateX(-120%); transition:transform .6s ease;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.3) 50%, transparent 62%); }
.adCard:hover::after, .adCard:focus-visible::after{ transform:translateX(120%); }
.adCard:hover, .adCard:focus-visible, .adCard.current{ transform:translateY(-10px) rotate(0deg) scale(1.04); outline:none; box-shadow:0 14px 26px rgba(0,0,0,.55), 0 0 0 2px var(--accent); }
.adTag{ position:absolute; top:6px; left:7px; font:7px var(--font-pixel); letter-spacing:.06em; padding:2px 4px; color:#0b0d16; background:var(--ai); }
.adIcon{ position:absolute; right:7px; top:7px; width:36px; height:36px; image-rendering:pixelated; }
.adCard b{ position:absolute; left:8px; right:8px; bottom:24px; font:8px/1.3 var(--font-pixel); color:#fff; letter-spacing:.04em; }
.adCard em{ position:absolute; left:8px; bottom:9px; font:7px var(--font-pixel); font-style:normal; color:var(--ai); }
.flyAd{ position:fixed; z-index:80; margin:0; pointer-events:none; }
.adCard.gone{ visibility:hidden; }
@media (max-width:860px){
  .adDesk{ grid-template-columns:1fr; justify-items:center; text-align:center; align-content:start; padding-top:18px; gap:14px; }
  .oldTv{ --tv:min(34vh, 56vw); }
  #screenContent.bleed:has(#panel-links.active), #screenContent.bleed:has(#panel-art.active){ overflow-y:auto; }
  #panel-links.active{ height:auto; min-height:100%; padding-bottom:56px; }
}
@media (max-width:560px){ .adCard{ width:112px; height:84px; } .adIcon{ width:28px; height:28px; } }
html[data-reduce-motion="true"] .flyFlame, html[data-reduce-motion="true"] .oldTv.zap .tvGlass{ animation:none !important; }

/* ==========================================================================
   v0.6 — game player beside the bookcase, tray back buttons
   ========================================================================== */
.bookcase{ --deckW:clamp(150px, 21%, 230px); padding-right:calc(clamp(16px, 5vw, 70px) + var(--deckW)); }
.gameDeck{ position:absolute; right:clamp(14px, 3vw, 44px); bottom:52px; width:var(--deckW); display:flex; flex-direction:column; align-items:center; z-index:1; --cc:var(--accent); }
.gdTv{ position:relative; width:80%; aspect-ratio:1.28; padding:7% 24% 8% 7%; border-radius:12px;
  background:linear-gradient(rgba(255,255,255,.08), transparent 30%), linear-gradient(#4c3c46, #2a2028);
  box-shadow:inset 0 0 0 3px #1a1216, 0 8px 16px rgba(0,0,0,.5); }
.gdScreen{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:16% / 20%; background:#000; box-shadow:0 0 0 3px #120c10, 0 0 0 5px #6d5d52; }
#gdStatic{ display:block; width:100%; height:100%; image-rendering:pixelated; }
.gdGlow{ position:absolute; inset:0; background:var(--cc); opacity:0; }
.gameDeck.on .gdGlow{ animation:gdOn .55s forwards; }
@keyframes gdOn{ 0%{ opacity:0; } 25%{ opacity:1; background:#fff; } 100%{ opacity:.9; } }
.gdScreen::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18), transparent 45%), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }
.gdKnobs{ position:absolute; right:6%; top:16%; display:flex; flex-direction:column; gap:9px; }
.gdKnobs i{ width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #eee6da, #8a8174 60%, #3e3830); border:1px solid #120d09; }
.gdAnt{ position:absolute; left:40%; top:0; width:0; height:0; }
.gdAnt i{ position:absolute; bottom:0; left:-1px; width:2px; height:34px; transform-origin:50% 100%; background:linear-gradient(#e6e6e6, #777); }
.gdAnt i:first-child{ transform:rotate(-26deg); } .gdAnt i:last-child{ transform:rotate(20deg); }
.gdPlayer{ position:relative; width:100%; height:38px; margin-top:6px; border-radius:6px 6px 3px 3px;
  background:linear-gradient(#5d6380, #3a3e54); box-shadow:inset 0 3px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.3), 0 6px 12px rgba(0,0,0,.5); }
.gdSlot{ position:absolute; left:8%; top:3px; width:48%; height:7px; border-radius:2px; background:#07080c; box-shadow:inset 0 2px 0 #000; }
.gdCart{ position:absolute; left:0; right:0; bottom:4px; height:120px; overflow:hidden; pointer-events:none; }
.gdCartBody{ position:absolute; left:50%; bottom:0; width:150px; height:110px; transform-origin:50% 100%;
  transform:translate(-50%, 0) scale(var(--gs, .5)); background:#4a5068; border:3px solid #151824; border-radius:4px 4px 0 0;
  box-shadow:inset -4px -4px 0 #2e3346, inset 4px 4px 0 #6a7190; }
.gdCartBody .cartGrip{ left:18px; right:18px; top:7px; height:12px; }
.gdCartBody .cartLabel{ left:12px; right:12px; top:28px; height:58px; font-size:9px; }
.gdCartBody .cartLabel img{ height:26px; }
.gameDeck.loaded .gdCartBody{ animation:gdSink .42s cubic-bezier(.5,0,.6,1.4) forwards; }
@keyframes gdSink{ from{ transform:translate(-50%, -14px) scale(var(--gs, .5)); } to{ transform:translate(-50%, calc(110px * var(--gs, .5) * .55)) scale(var(--gs, .5)); } }
.gdLed{ position:absolute; right:10%; top:10px; width:7px; height:7px; border-radius:50%; background:#4a1a1a; }
.gameDeck.loaded .gdLed{ background:#ff4a4a; box-shadow:0 0 8px #ff4a4a; }
.gdBtn{ position:absolute; top:20px; width:14px; height:6px; border-radius:2px; background:#23263a; }
.gdBtn:nth-of-type(2){ right:30%; } .gdBtn:nth-of-type(3){ right:14%; }
.gdName{ position:absolute; left:8%; bottom:6px; font:7px var(--font-pixel); color:rgba(255,255,255,.45); letter-spacing:.08em; }
.gdStand{ position:relative; width:118%; height:12px; margin-top:0; border-radius:3px;
  background:linear-gradient(#8a5a36, #5e3a20); box-shadow:inset 0 2px 0 rgba(255,255,255,.12), 0 6px 10px rgba(0,0,0,.45); }
.gdStand i{ position:absolute; top:12px; width:9px; height:34px; background:linear-gradient(90deg, #5e3a20, #3e2412); }
.gdStand i:first-child{ left:8%; } .gdStand i:last-child{ right:8%; }
.tvZoom{ position:fixed; z-index:85; margin:0; pointer-events:none; transform-origin:0 0; background:#000 center / cover; image-rendering:pixelated;
  box-shadow:0 0 0 3px #120c10; }
@media (max-width:700px){
  .bookcase{ padding-right:10px; padding-bottom:150px; }
  .gameDeck{ --deckW:120px; right:50%; transform:translateX(50%); bottom:48px; }
  .bookcase{ padding-bottom:190px; }
  .gdStand i{ height:18px; }
  #screenContent.bleed:has(#panel-games.active){ overflow-y:auto; }
  #panel-games.active, #panel-games .bookcase{ height:auto; min-height:100%; }
}

.trayBack{ flex-direction:column; align-items:center; }
.app[data-view="games"] .shelf > .trayBack[data-for="games"], .app[data-view="art"] .shelf > .trayBack[data-for="art"]{ display:flex; animation:rowIn .45s cubic-bezier(.3,1.5,.5,1) backwards; }
.shelf > .trayBack{ display:none; }
.backCard{ width:92px; height:84px; padding:8px 6px; border-radius:6px; cursor:pointer; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg, #2c1e24, #120c10); border:2px solid rgba(var(--accent-rgb), .45);
  box-shadow:0 6px 14px rgba(0,0,0,.45); transition:transform .22s cubic-bezier(.3,1.6,.5,1), border-color .2s; }
.backCard b{ font:7px/1.6 var(--font-pixel); letter-spacing:.06em; text-align:center; }
.backCard:hover, .backCard:focus-visible{ transform:translateY(-8px); border-color:var(--accent); outline:none; }
.bcIcon{ display:flex; gap:3px; align-items:flex-end; height:24px; }
.bcIcon i{ width:7px; background:var(--accent); border-radius:1px; } .bcIcon i:nth-child(1){ height:22px; } .bcIcon i:nth-child(2){ height:18px; background:var(--accent2); } .bcIcon i:nth-child(3){ height:24px; background:#e9e2cd; transform:rotate(8deg); }
.bcIcon.frame{ width:30px; height:22px; border:3px solid #a8865a; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:inset 0 0 0 2px #efe6d4; }
.app[data-playing="game"] .trayBack[data-for="games"] .backCard, .app[data-playing="art"] .trayBack[data-for="art"] .backCard{ border-color:var(--accent); animation:backPulse 1.6s ease-in-out infinite; }
@keyframes backPulse{ 50%{ box-shadow:0 6px 14px rgba(0,0,0,.45), 0 0 16px rgba(var(--accent-rgb), .6); } }
html[data-reduce-motion="true"] .backCard, html[data-reduce-motion="true"] .gameDeck.loaded .gdCartBody{ animation:none !important; }
@media (max-width:560px){ .backCard{ width:74px; height:64px; gap:5px; } .bcIcon{ transform:scale(.8); } }

/* ==========================================================================
   v0.7 — theme cards, wallpaper picker, header fox, tray rules
   ========================================================================== */
.themeCards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.themeCard{ position:relative; height:42px; padding:0; border-radius:6px; overflow:hidden; cursor:pointer; isolation:isolate;
  background:linear-gradient(135deg, var(--ta) 0%, color-mix(in srgb, var(--ta) 55%, var(--tb)) 48%, var(--tb) 100%);
  border:2px solid color-mix(in srgb, var(--ta) 70%, #000); box-shadow:0 3px 8px rgba(0,0,0,.35);
  transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s; }
.themeCard::after{ content:''; position:absolute; right:-8px; top:-8px; width:26px; height:26px; border-radius:50%; background:var(--tc); opacity:.85; box-shadow:0 0 12px var(--tc); z-index:-1; }
.tcCode{ position:absolute; inset:-40% 0 0; z-index:-1; font:9px/1.1 var(--font-mono); color:var(--tb); opacity:.28; white-space:pre; overflow:hidden;
  word-break:break-all; animation:tcRain 3.2s linear infinite; }
@keyframes tcRain{ from{ transform:translateY(-20%); } to{ transform:translateY(20%); } }
.tcName{ position:absolute; left:9px; bottom:7px; font:8px var(--font-pixel); letter-spacing:.08em; color:#fff;
  text-shadow:0 1px 0 var(--tb), 0 0 6px var(--tb), 1px 1px 0 var(--tb), -1px -1px 0 var(--tb); }
.themeCard:hover, .themeCard:focus-visible{ transform:translateY(-2px); outline:none; box-shadow:0 6px 14px rgba(0,0,0,.45), 0 0 0 2px var(--ta); }
.themeCard.active{ box-shadow:0 0 0 2px var(--ink), 0 0 16px color-mix(in srgb, var(--ta) 70%, transparent); }
.themeCard.active .tcName::after{ content:' ✓'; }
html[data-reduce-motion="true"] .tcCode{ animation:none; }

/* ---- REFERRALS: VISIT only while an ad is showing ---- */
#adVisitRow[hidden]{ display:none !important; }

/* ---- GAMES: no tray under the bookcase; it slides in once a game is playing ---- */
.app[data-view="games"]:not([data-playing="game"]) .shelf{ display:none; }
.app[data-view="games"]:not([data-playing="game"]) #stageWrap{ height:clamp(420px, calc(100vh - var(--topbar-h) - 3 * var(--gap)), 1000px); }
@media (max-width:860px){ .app[data-view="games"]:not([data-playing="game"]) #stageWrap{ height:min(80vh, 720px); } }

/* ---- ART → WALLPAPER: the screen becomes a clear window onto the site's background ---- */
#stageWrap.wallView{ background:transparent; box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb), .35); }
#stageWrap.wallView #stageFrame, #stageWrap.wallView #screenContent, #stageWrap.wallView .screenScan, #stageWrap.wallView #homeCard{ visibility:hidden; }
#wallPicker{ position:absolute; left:0; right:0; bottom:40px; z-index:5; padding:10px 14px 4px; pointer-events:none;
  background:linear-gradient(transparent, rgba(0,0,0,.55) 40%); }
#wallPicker[hidden]{ display:none; }
.wpHead{ display:flex; gap:12px; align-items:baseline; margin:0 0 8px 4px; }
.wpHead b{ font:8px var(--font-pixel); letter-spacing:.1em; color:var(--accent); }
.wpHead span{ font:11px var(--font-mono); color:var(--ink); opacity:.8; }
.wpRow{ display:flex; gap:10px; overflow-x:auto; padding:6px 4px 4px; pointer-events:auto; scrollbar-width:none; }
.wpRow::-webkit-scrollbar{ display:none; }
.wpWin{ position:relative; flex:none; width:132px; padding:5px 5px 18px; border-radius:4px; cursor:pointer;
  background:linear-gradient(#3a2c30, #1c1418); border:2px solid #0c0809; box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.06);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1), border-color .2s; }
.wpWin canvas{ display:block; width:118px; height:75px; background:var(--bg); border:2px solid #0c0809; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.wpWin::before{ content:''; position:absolute; left:5px; right:5px; top:5px; height:75px; pointer-events:none;
  background:linear-gradient(90deg, transparent calc(50% - 1px), #1c1418 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(transparent calc(50% - 1px), #1c1418 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); opacity:.8; }
.wpWin span{ position:absolute; left:0; right:0; bottom:4px; text-align:center; font:7px var(--font-pixel); color:var(--ink); letter-spacing:.06em; }
.wpWin:hover, .wpWin:focus-visible{ transform:translateY(-6px); outline:none; border-color:var(--accent); }
.wpWin.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb), .5); }
.wpWin.active span{ color:var(--accent); }

/* ---- the fox in the top bar, when the screen has no room for it ---- */
.topFox{ position:relative; width:52px; height:32px; padding:0; border:0; background:none; cursor:pointer; align-self:flex-end; margin-right:2px; }
.topFox[hidden]{ display:none; }
.topFox canvas{ position:absolute; left:2px; bottom:0; width:48px; height:27px; image-rendering:pixelated; }
.topFox.pop{ animation:foxDrop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes foxDrop{ from{ transform:translateY(-40px) scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.topFox.bop canvas{ animation:foxBop .5s steps(2) infinite; }
@keyframes foxBop{ 50%{ transform:translateY(-2px); } }
.topFox.hop canvas{ animation:foxHop .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes foxHop{ 40%{ transform:translateY(-10px); } }
.topFox.zz::after{ content:'z'; position:absolute; right:0; top:-4px; font:8px var(--font-pixel); color:var(--ink); opacity:.7; animation:foxZ 2s ease-out infinite; }
@keyframes foxZ{ from{ transform:translate(0, 4px); opacity:0; } 40%{ opacity:.8; } to{ transform:translate(6px, -8px); opacity:0; } }
.foxFloat{ position:absolute; bottom:22px; font:12px var(--font-mono); pointer-events:none; animation:foxFloat 1.4s ease-out forwards; }
.foxFloat.heart{ color:var(--accent); } .foxFloat.note{ color:var(--accent2); font-size:11px; }
@keyframes foxFloat{ from{ transform:translateY(0); opacity:1; } to{ transform:translate(6px, -26px); opacity:0; } }
html[data-reduce-motion="true"] .topFox, html[data-reduce-motion="true"] .topFox canvas{ animation:none !important; }
@media (max-width:560px){ .topFox{ width:40px; } .topFox canvas{ width:36px; height:20px; } }

/* ==========================================================================
   v0.8 — WALLPAPER in the tray (the screen steps aside), walking top-bar fox
   ========================================================================== */
#stageWrap{ transition:opacity .45s ease, filter .45s ease; }
.app[data-wall="1"] #stageWrap{ opacity:0; pointer-events:none; filter:blur(6px); }
.app[data-wall="1"] .shelf > .photoItem{ display:none !important; }
.shelf > .wpItem{ display:none; }
.app[data-wall="1"] .shelf > .wpItem{ display:flex; flex-direction:column; align-items:center; animation:rowIn .45s cubic-bezier(.3,1.5,.5,1) backwards; }
.app[data-wall="1"] .shelf{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-top:14px; }
.app[data-wall="1"] .shelf::-webkit-scrollbar{ display:none; }
.wpWin{ position:relative; flex:none; width:128px; padding:5px 5px 18px; border-radius:4px; cursor:pointer;
  background:linear-gradient(#3a2c30, #1c1418); border:2px solid #0c0809; box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.06);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1), border-color .2s; }
.wpWin canvas{ display:block; width:114px; height:72px; background:var(--bg); border:2px solid #0c0809; }
.wpWin::before{ content:''; position:absolute; left:5px; right:5px; top:5px; height:72px; pointer-events:none; opacity:.8;
  background:linear-gradient(90deg, transparent calc(50% - 1px), #1c1418 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(transparent calc(50% - 1px), #1c1418 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.wpWin span{ position:absolute; left:0; right:0; bottom:4px; text-align:center; font:7px var(--font-pixel); color:var(--ink); letter-spacing:.06em; }
.wpWin:hover, .wpWin:focus-visible{ transform:translateY(-8px); outline:none; border-color:var(--accent); }
.wpWin.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb), .5); }
.wpWin.active span{ color:var(--accent); }
.wpDensity{ justify-content:center; gap:6px; min-width:150px; padding:10px 12px; border-radius:6px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); }
.wpDensity label{ display:flex; flex-direction:column; gap:8px; font:7px var(--font-pixel); letter-spacing:.1em; color:var(--accent); }
.wpDensity input{ accent-color:var(--accent); width:130px; }
.wpDensity small{ font:10px var(--font-mono); color:var(--muted); max-width:140px; }
@media (max-width:560px){ .wpWin{ width:94px; } .wpWin canvas{ width:80px; height:51px; } .wpWin::before{ height:51px; } }
.topFox{ will-change:transform; }

/* ---- v0.9: SCVRLET RUN always gets the whole right side (on GAMES and from HOME) ---- */
.app[data-game="srun"] .shelf{ display:none !important; }
.app[data-game="srun"] #stageWrap{ height:clamp(420px, calc(100vh - var(--topbar-h) - 3 * var(--gap)), 1000px) !important; }
@media (max-width:860px){ .app[data-game="srun"] #stageWrap{ height:min(80vh, 720px) !important; } }