/* scvrlet.css v1.1.3 · master copy: SCVRLET-online/_shared · history: _shared/CHANGELOG.md
   Shared by scvrlet and window.surf. Don't edit it on a site: change the master and copy it out. */
/* ==========================================================================
   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=Silkscreen&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;   /* titles and buttons, 10px and up */
  /* small labels: Silkscreen (Press Start 2P blurs below 10px). Its pixels are 1/8 of the
     size, so 12px = 1.5px pixels: whole screen pixels on Retina, about the old labels' size.
     8px is sharp everywhere but tiny. Symbols it lacks fall back to Press Start 2P. */
  --font-label:'Silkscreen', 'Press Start 2P', monospace;
  --label-size:12px;
  --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:var(--label-size) var(--font-label); 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; }
/* v1.1: the fern on the line above the clock (scvrlet); it hops through a door to /door.html */
.sideFoot{ position:relative; }
.sidePlant{ position:absolute; left:4px; bottom:calc(100% + 1px); padding:0; margin:0; border:0; background:none; line-height:0; cursor:pointer; }
.sidePlant canvas{ display:block; width:52px; height:38px; image-rendering:pixelated; image-rendering:crisp-edges; }
.sidePlant:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.app[data-sidebar="collapsed"] .sidePlant{ left:50%; transform:translateX(-50%); }
#roleText{ font:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size)/1.4 var(--font-label); 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-label); font-size:var(--label-size); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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; }
.inquiryCard p{ margin:0 0 14px; font-size:12px; color:var(--muted); }
.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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); color:rgba(255,255,255,.55); letter-spacing:.08em; }
.deckInfo h2{ margin-bottom:10px !important; }
.nowLabel{ font:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size)/1.5 var(--font-label); 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:var(--label-size) var(--font-label); 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:8px; }

.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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:150px; height:86px; 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:var(--label-size) var(--font-label); letter-spacing:0; padding:2px 3px; color:#0b0d16; background:var(--ai); }
.adIcon{ position:absolute; right:7px; top:7px; width:30px; height:30px; image-rendering:pixelated; }
.adCard b{ position:absolute; left:8px; right:8px; bottom:22px; font:16px/1.3 var(--font-label); color:#fff; letter-spacing:.02em; white-space:nowrap; overflow:hidden; }
/* v1.1: a name too long for its card steps down to 12px (site.js adds .fit); a long perk line runs as a marquee (.mq) */
.adCard b.fit{ font-size:12px; bottom:24px; }
.cardMq{ display:inline-flex; animation:tvMq var(--mq-dur, 8s) linear infinite; }
.cardMq span{ padding-right:28px; }
html[data-reduce-motion="true"] .cardMq{ animation:none; }
html[data-reduce-motion="true"] .cardMq span + span{ display:none; }
.adCard em{ position:absolute; left:8px; right:56px; bottom:9px; font:var(--label-size) var(--font-label); font-style:normal; color:var(--ai); white-space:nowrap; overflow:hidden; }
.adCard em.mq{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.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:140px; height:80px; } .adIcon{ width:26px; height:26px; } }   /* v1.1: business-card shape (about 1.75 : 1) */
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:var(--label-size) var(--font-label); 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:var(--label-size)/1.6 var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:var(--label-size) var(--font-label); 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:not(.full){ height:clamp(420px, calc(100vh - var(--topbar-h) - 3 * var(--gap)), 1000px) !important; }
@media (max-width:860px){ .app[data-game="srun"] #stageWrap:not(.full){ height:min(80vh, 720px) !important; } }

/* ---- ABOUT (v0.10): the studio room, NOW line, WHAT I MAKE cards, contact ---- */
.aboutRoom{ position:relative; margin:0 0 18px; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:#000; box-shadow:0 10px 30px rgba(0,0,0,.35); height:clamp(210px, 34vh, 300px); }
.aboutRoom canvas{ display:block; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; cursor:pointer; touch-action:manipulation; }
.nowLine{ display:flex; align-items:center; gap:9px; font-size:12px !important; margin:-4px 0 16px; }
.nowLine b{ font:var(--label-size) var(--font-label); letter-spacing:.08em; color:var(--on-accent) !important; background:var(--accent); padding:4px 6px; border-radius:3px; transform:skewX(var(--skew)); }
.nowDot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 1.6s steps(2) infinite; flex:none; }
html[data-reduce-motion="true"] .nowDot{ animation:none; }
.makeGrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 6px; }
.makeCard{ display:flex; flex-direction:column; gap:8px; padding:14px 14px 12px; border-radius:10px; text-decoration:none; color:var(--muted);
  border:1px solid var(--line); transition:transform .15s ease, border-color .15s, box-shadow .15s; min-height:104px; }
.makeCard .mkTag{ font:var(--label-size) var(--font-label); letter-spacing:.06em; color:var(--ink); }
.makeCard .mkTxt{ font-size:12px; line-height:1.45; flex:1; }
.makeCard .mkGo{ font:var(--label-size) var(--font-label); letter-spacing:.06em; color:var(--accent); }
.makeCard:hover, .makeCard:focus-visible, .makeCard.lit{ transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.75); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35), 0 8px 22px rgba(var(--accent-rgb),.18); }
.makeCard:hover .mkTag, .makeCard.lit .mkTag{ color:var(--accent); }
.makeCard.flash{ animation:makeFlash .6s ease-out; }
@keyframes makeFlash{ 0%{ background-color:rgba(var(--accent-rgb),.35); } 100%{ background-color:transparent; } }
html[data-reduce-motion="true"] .makeCard{ transition:none; } html[data-reduce-motion="true"] .makeCard.flash{ animation:none; }
@media (max-width:720px){ .makeGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.contactCard{ margin-top:22px; max-width:440px; padding:20px 22px; border-radius:10px; }
.contactCard h3{ margin-top:0; color:var(--accent); }
.contactCard p{ font-size:12px; margin:0 0 16px; }
.logMore{ margin:-6px 0 18px; }
.logMore summary{ cursor:pointer; font:var(--label-size) var(--font-label); letter-spacing:.06em; color:var(--accent); list-style:none; margin-bottom:14px; }
.logMore summary::-webkit-details-marker{ display:none; }
.logMore summary::before{ content:'\25B6'; display:inline-block; margin-right:6px; transition:transform .15s; }
.logMore[open] summary::before{ transform:rotate(90deg); }
@keyframes pulse{ 50%{ opacity:.35; } }

/* ---- ART → WALLPAPER (v0.11): DENSITY + BACKGROUND switch sit above the windows ---- */
.wpBar{ display:none; align-items:center; gap:14px 22px; flex-wrap:wrap; margin:12px 8px 0; padding:10px 16px; border-radius:8px; border:1px solid var(--line); }
.app[data-wall="1"] .wpBar{ display:flex; animation:rowIn .4s cubic-bezier(.3,1.5,.5,1) backwards; }
.wpBar .wpDens{ display:flex; align-items:center; gap:12px; font:var(--label-size) var(--font-label); letter-spacing:.1em; color:var(--accent); }
.wpBar input[type=range]{ accent-color:var(--accent); width:180px; }
.wpBar input:disabled{ opacity:.35; }
.wpBar small{ font:10px var(--font-mono); color:var(--muted); }
.wpBar.off small{ visibility:hidden; }
.wpSwitch{ display:inline-flex; align-items:center; gap:10px; background:none; border:1px solid rgba(var(--accent-rgb),.6); border-radius:999px; padding:5px 14px 5px 5px; cursor:pointer;
  font:var(--label-size) var(--font-label); letter-spacing:.08em; color:var(--ink); }
.wpSwitch .wpKnob{ position:relative; width:30px; height:16px; border-radius:999px; background:var(--accent); transition:background .15s; flex:none; }
.wpSwitch .wpKnob::after{ content:''; position:absolute; top:2px; left:16px; width:12px; height:12px; border-radius:50%; background:var(--on-accent); transition:left .15s; }
.wpSwitch.off{ border-color:var(--line); color:var(--muted); }
.wpSwitch.off .wpKnob{ background:rgba(255,255,255,.18); }
.wpSwitch.off .wpKnob::after{ left:2px; background:#ddd; }
.wpSwitch:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }
.app[data-wall="1"] .shelf > .wpItem.wpDensity{ display:none !important; }
@media (max-width:560px){ .wpBar{ margin:10px 0 0; gap:10px; padding:8px 10px; flex-wrap:nowrap; } .wpBar .wpDens{ gap:8px; } .wpBar input[type=range]{ width:96px; } .wpSwitch{ padding-right:10px; } .wpBar small{ display:none; } }

/* ---- ABOUT (v0.11.1): the NOW line is a centred pill with a glowing edge in the theme colour ---- */
.nowWrap{ display:flex; justify-content:center; margin:6px 0 20px; }
.nowWrap .nowLine{ display:inline-flex; margin:0; padding:9px 18px 9px 14px; border-radius:999px; color:var(--ink);
  background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.85);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.55), 0 0 22px rgba(var(--accent-rgb),.25), inset 0 0 10px rgba(var(--accent-rgb),.18);
  animation:nowGlow 2.8s ease-in-out infinite; }
.nowWrap .nowLine a{ color:var(--accent); text-decoration:none; font-weight:500; }
.nowWrap .nowLine a:hover{ text-decoration:underline; }
@keyframes nowGlow{ 50%{ box-shadow:0 0 16px rgba(var(--accent-rgb),.8), 0 0 34px rgba(var(--accent-rgb),.35), inset 0 0 12px rgba(var(--accent-rgb),.25); } }
html[data-reduce-motion="true"] .nowWrap .nowLine{ animation:none; }

/* ---- ABOUT (v0.11.2): calmer small link pills ---- */
#panel-about .pills.small a{ transition:background .3s, color .3s, border-color .3s, transform .3s; }
#panel-about .pills.small a:hover, #panel-about .pills.small a:focus-visible{ transform:skewX(var(--skew)) translateY(-1px); }
#panel-about .pills.small a:hover::before{ opacity:.45; animation:pillSweep 1.8s ease-out; }
/* the top-bar wordmark opens ABOUT */
.topMark a{ cursor:pointer; }

/* ---- sidebar clock (v0.11.3): seconds + time zone; the rotating words are gone ---- */
#sideClock{ font-variant-numeric:tabular-nums; }
#sideZone{ font:var(--label-size) var(--font-label); letter-spacing:.08em; color:var(--accent); margin-left:4px; }
.sideFoot .clockLine{ display:inline-flex; align-items:baseline; }

/* ---- MUSIC + REFERRALS (v0.11.3): liquid glass over the site's wallpaper, no HOME room behind ---- */
.app[data-view="music"] #stageWrap, .app[data-view="links"] #stageWrap{
  background:transparent; border:1px solid var(--panel-border);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1), inset 0 -1px 1px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.35); }
.app[data-view="music"] #stageFrame, .app[data-view="links"] #stageFrame{ visibility:hidden; }
.app[data-view="music"] #screenContent, .app[data-view="links"] #screenContent{
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(var(--accent-rgb),.04)), rgba(var(--bg-rgb, 10,5,8), .30);
  backdrop-filter:blur(18px) saturate(165%); -webkit-backdrop-filter:blur(18px) saturate(165%); }
.app[data-view="music"] .screenScan, .app[data-view="links"] .screenScan{ opacity:.25; }
html[data-reduce-transparency="true"] .app[data-view="music"] #screenContent, html[data-reduce-transparency="true"] .app[data-view="links"] #screenContent{ background:#0d1020; backdrop-filter:none; -webkit-backdrop-filter:none; }

/* ---- ABOUT (v0.11.4): liquid glass like MUSIC / REFERRALS, NOW pill top-right, centred link pills ---- */
.app[data-view="about"] #stageWrap{
  background:transparent; border:1px solid var(--panel-border);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1), inset 0 -1px 1px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.35); }
.app[data-view="about"] #stageFrame{ visibility:hidden; }
.app[data-view="about"] #screenContent{
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(var(--accent-rgb),.04)), rgba(var(--bg-rgb, 10,5,8), .30);
  backdrop-filter:blur(18px) saturate(165%); -webkit-backdrop-filter:blur(18px) saturate(165%); }
.app[data-view="about"] .screenScan{ opacity:.25; }
html[data-reduce-transparency="true"] .app[data-view="about"] #screenContent{ background:#0d1020; backdrop-filter:none; -webkit-backdrop-filter:none; }
.aboutHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.aboutHead h2{ margin:0 !important; }
.aboutHead .nowWrap{ margin:0; }
#panel-about .pills.small{ justify-content:center; }
/* the heading gets focus when a tab opens (for screen readers); no visible ring for that */
.tabPanel h2:focus, .tabPanel h2:focus-visible{ outline:none; box-shadow:none; }

/* ==========================================================================
   WIN98 (v0.12): real windows, a taskbar with Start, classic controls.
   Everything here is scoped to html[data-theme="win98"]; the w98only bits are
   hidden in every other theme.
   ========================================================================== */
.w98only{ display:none !important; }
html[data-theme="win98"]{
  --font-mono:Tahoma, 'MS Sans Serif', Verdana, Geneva, sans-serif;
  --w98-face:#c0c0c0; --w98-hi:#fff; --w98-lo:#808080; --w98-dk:#000;
  --w98-bevel:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --w98-sunk:inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
html[data-theme="win98"] body{ font-size:12px; }

/* ---- 1 · readable text: every screen is a grey window, headings get a grey label ---- */
html[data-theme="win98"] #screenContent,
html[data-theme="win98"] .app[data-view] #screenContent{ background:var(--w98-face) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html[data-theme="win98"] .tabPanel p, html[data-theme="win98"] .tabPanel li, html[data-theme="win98"] .note{ color:#000 !important; }
html[data-theme="win98"] .tabPanel p b{ color:#000; font-weight:700; }
html[data-theme="win98"] .tabPanel p a{ color:#0000ee; }
html[data-theme="win98"] .caseTitle, html[data-theme="win98"] .galTitle{ background:var(--w98-face); box-shadow:var(--w98-bevel); padding:8px 12px 6px; }
html[data-theme="win98"] .caseTitle p, html[data-theme="win98"] .galTitle p{ margin:4px 0 0; }
html[data-theme="win98"] .tabPanel h2{ color:#000 !important; }
html[data-theme="win98"] .setHint, html[data-theme="win98"] .sideLabel{ color:#404040 !important; }

/* ---- 2 · no glass, glow or code texture ---- */
html[data-theme="win98"] .app[data-view] #stageWrap, html[data-theme="win98"] #stageWrap{
  border-radius:0 !important; background:var(--w98-face) !important; border:none !important; box-shadow:var(--w98-bevel), 1px 1px 0 #000 !important; padding:3px !important; }
html[data-theme="win98"] .sideTab::after, html[data-theme="win98"] .pill::before, html[data-theme="win98"] .pills a::before{ content:none !important; display:none !important; }
html[data-theme="win98"] .screenScan{ display:none; }
html[data-theme="win98"] .topbar > .refract-layer{ display:none; }
html[data-theme="win98"] .topbar{ overflow:visible; padding:4px 6px; min-height:40px; box-shadow:var(--w98-bevel) !important; border:none !important; }
html[data-theme="win98"] .sidebar{ box-shadow:var(--w98-bevel), 1px 1px 0 #000 !important; border:none !important; padding:3px 6px 8px; }
html[data-theme="win98"] #homeCard{ border-radius:0; background:var(--w98-face); color:#000; box-shadow:var(--w98-bevel); border:none; }
html[data-theme="win98"] #homeCard a{ color:#0000ee; }
html[data-theme="win98"] .nowWrap .nowLine{ border-radius:0; animation:none; background:var(--w98-face); border:none; box-shadow:var(--w98-sunk); color:#000; }
html[data-theme="win98"] .nowWrap .nowLine a{ color:#0000ee; }
html[data-theme="win98"] .nowLine b{ transform:none; background:#000080; color:#fff !important; border-radius:0; }
html[data-theme="win98"] .nowDot{ border-radius:0; animation:none; box-shadow:none; background:#008000; }
html[data-theme="win98"] .aboutRoom, html[data-theme="win98"] .supportCard{ border-radius:0; border:none; box-shadow:var(--w98-sunk); }
html[data-theme="win98"] .supportCard{ background:var(--w98-face); box-shadow:var(--w98-bevel); }
html[data-theme="win98"] .supportCard h3{ color:#000080; }
html[data-theme="win98"] .iconBtn{ border-radius:0; background:var(--w98-face); color:#000; border:none; box-shadow:var(--w98-bevel); }
html[data-theme="win98"] .brandMark{ border-radius:0; box-shadow:var(--w98-sunk); background:#fff; }
html[data-theme="win98"] .brand{ border-bottom:1px solid #808080; box-shadow:0 1px 0 #fff; }
html[data-theme="win98"] .sideItem .mk, html[data-theme="win98"] .sideTab .mk{ border-radius:0; }
html[data-theme="win98"] .pill, html[data-theme="win98"] .pills a, html[data-theme="win98"] .sideTab, html[data-theme="win98"] .setPill{
  border:none !important; box-shadow:var(--w98-bevel) !important; }
html[data-theme="win98"] .pill:active, html[data-theme="win98"] .pills a:active, html[data-theme="win98"] .sideTab:active, html[data-theme="win98"] .iconBtn:active,
html[data-theme="win98"] .sideTab.active, html[data-theme="win98"] .setPill.active{ box-shadow:var(--w98-sunk) !important; transform:none !important; }
html[data-theme="win98"] .pill:hover, html[data-theme="win98"] .pills a:hover{ background:var(--w98-face); color:#000; transform:none; }
html[data-theme="win98"] .pills a, html[data-theme="win98"] .pill{ color:#000; letter-spacing:0; font-weight:400; }
html[data-theme="win98"] #panel-about .pills.small a:hover{ transform:none; }

/* ---- 3 · the system font everywhere the code font was ---- */
html[data-theme="win98"] .tabPanel p, html[data-theme="win98"] .setHint, html[data-theme="win98"] .sideItem, html[data-theme="win98"] #siteFooter{ font-family:var(--font-mono); letter-spacing:0; }

/* ---- 4 · window title bars (sidebar = Explorer, screen = SCVRLET - <tab>, settings = Display Properties) ---- */
html[data-theme="win98"] .w98only{ display:flex !important; }
.w98title{ align-items:center; justify-content:space-between; gap:6px; height:22px; padding:0 2px 0 6px; flex:none;
  background:linear-gradient(90deg, #000080, #1084d0); color:#fff; font:700 12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; user-select:none; }
.w98t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w98btns{ display:flex; gap:2px; flex:none; }
.w98btns .w98b + .w98b + .w98b{ margin-left:2px; }
.w98b{ position:relative; width:16px; height:14px; padding:0; border:none; background:#c0c0c0; box-shadow:var(--w98-bevel); cursor:pointer; }
.w98b:active{ box-shadow:var(--w98-sunk); }
.w98b:active i{ transform:translate(1px, 1px); }
.w98b i{ position:absolute; display:block; }
.w98b .gMin{ left:4px; bottom:3px; width:6px; height:2px; background:#000; }
.w98b .gMax{ left:3px; top:2px; width:9px; height:9px; box-sizing:border-box; border:1px solid #000; border-top-width:2px; }
.w98b .gX{ left:4px; top:3px; width:8px; height:7px; }
.w98b .gX::before, .w98b .gX::after{ content:''; position:absolute; left:3px; top:-1px; width:2px; height:9px; background:#000; transform:rotate(45deg); }
.w98b .gX::after{ transform:rotate(-45deg); }
html[data-theme="win98"] .sidebar > .w98title{ margin:0 -3px 6px; }
html[data-theme="win98"] #w98StageBar{ position:absolute; top:3px; left:3px; right:3px; z-index:12; }
html[data-theme="win98"] #stageFrame, html[data-theme="win98"] #gameFrame, html[data-theme="win98"] #screenContent{ top:25px !important; left:3px !important; right:auto !important; bottom:auto !important; width:calc(100% - 6px) !important; height:calc(100% - 28px) !important; }
html[data-theme="win98"] #settingsPanel .setHead{ background:linear-gradient(90deg, #000080, #1084d0); padding:3px 3px 3px 6px; border:none; }
html[data-theme="win98"] #settingsPanel .setTitle{ font-size:0 !important; color:#fff !important; }
html[data-theme="win98"] #settingsPanel .setTitle::before{ content:'Display Properties'; font:700 12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; letter-spacing:0; color:#fff; }
html[data-theme="win98"] #settingsClose{ width:16px; height:14px; padding:0; background:#c0c0c0; box-shadow:var(--w98-bevel); color:#000; font:700 10px/14px Tahoma, sans-serif; }
html[data-theme="win98"] #settingsClose:active{ box-shadow:var(--w98-sunk); }
html[data-theme="win98"] #settingsPanel{ padding:3px; box-shadow:var(--w98-bevel), 1px 1px 0 #000 !important; border:none !important; }

/* ---- 5 · the top bar is a taskbar: Start on the left, a tray with the clock on the right ---- */
.w98startWrap{ position:relative; align-items:center; }
.w98start{ display:flex; align-items:center; gap:5px; height:26px; padding:0 8px 0 5px; border:none; background:#c0c0c0; box-shadow:var(--w98-bevel);
  font:700 12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; color:#000; cursor:pointer; }
.w98start canvas{ height:16px; width:auto; image-rendering:pixelated; }
.w98start.down, .w98start:active{ box-shadow:var(--w98-sunk); }
.w98start.down b{ outline:1px dotted #000; outline-offset:1px; }
.w98menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:80; display:flex; min-width:190px; background:#c0c0c0; box-shadow:var(--w98-bevel), 2px 2px 0 rgba(0,0,0,.35); padding:3px; }
.w98menu[hidden]{ display:none !important; }
.w98side{ width:22px; background:linear-gradient(0deg, #000080, #1084d0); display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; }
.w98side span{ writing-mode:vertical-rl; transform:rotate(180deg); color:#fff; font:700 14px Tahoma, 'MS Sans Serif', Verdana, sans-serif; letter-spacing:.04em; }
.w98items{ flex:1; display:flex; flex-direction:column; padding:2px 0; }
.w98items a, .w98items button{ display:flex; align-items:center; gap:10px; padding:6px 18px 6px 6px; border:none; background:none; text-align:left;
  font:12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; color:#000; text-decoration:none; cursor:pointer; }
.w98items a:hover, .w98items a:focus, .w98items button:hover, .w98items button:focus{ background:#000080; color:#fff; outline:none; }
.w98items .mk{ min-width:22px; height:20px; font-size:7px; border-radius:0; background:#fff; color:#000080; border:1px solid #808080; }
.w98items hr{ border:none; border-top:1px solid #808080; border-bottom:1px solid #fff; margin:3px 2px; }
.w98tray{ align-items:center; height:26px; padding:0 10px; box-shadow:var(--w98-sunk); font:12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; color:#000; }
.w98tray b{ font-weight:400; font-variant-numeric:tabular-nums; }
html[data-theme="win98"] .sideFoot{ display:none; }
html[data-theme="win98"] #topMark{ height:24px; }
html[data-theme="win98"] #musicBtn{ height:26px; }
@media (max-width:860px){ html[data-theme="win98"] .w98start b{ display:none; } html[data-theme="win98"] .w98tray{ padding:0 6px; } }

/* ---- 6 · classic controls: checkboxes, sliders, scrollbars, dotted focus ---- */
html[data-theme="win98"] input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:13px; height:13px; margin:0; background:#fff; box-shadow:var(--w98-sunk); border:none; border-radius:0; cursor:pointer; flex:none; }
html[data-theme="win98"] input[type=checkbox]:checked{ background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' shape-rendering='crispEdges'%3E%3Cpath d='M3 5h1v1H3zM3 6h2v1H3zM3 7h3v1H3zM4 8h3v1H4zM5 9h1v1H5zM6 7h1v1H6zM7 6h1v1H7zM8 5h1v1H8zM9 4h1v1H9zM6 8h1v1H6zM7 7h1v1H7zM8 6h1v1H8zM9 5h1v1H9zM9 3h1v1H9z' fill='%23000'/%3E%3C/svg%3E") center/13px 13px no-repeat; }
html[data-theme="win98"] input[type=range]{ appearance:none; -webkit-appearance:none; background:transparent; height:22px; accent-color:auto; }
html[data-theme="win98"] input[type=range]::-webkit-slider-runnable-track{ height:4px; background:#fff; box-shadow:var(--w98-sunk); }
html[data-theme="win98"] input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:11px; height:21px; margin-top:-9px; background:#c0c0c0; box-shadow:var(--w98-bevel); border:none; border-radius:0; }
html[data-theme="win98"] input[type=range]::-moz-range-track{ height:4px; background:#fff; box-shadow:var(--w98-sunk); border:none; }
html[data-theme="win98"] input[type=range]::-moz-range-thumb{ width:11px; height:21px; background:#c0c0c0; box-shadow:var(--w98-bevel); border:none; border-radius:0; }
html[data-theme="win98"] *{ scrollbar-width:auto !important; scrollbar-color:auto !important; }
html[data-theme="win98"] ::-webkit-scrollbar{ width:16px; height:16px; }
html[data-theme="win98"] ::-webkit-scrollbar-track{ background:#dfdfdf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E"); }
html[data-theme="win98"] ::-webkit-scrollbar-thumb{ background:#c0c0c0; box-shadow:var(--w98-bevel); border-radius:0; }
html[data-theme="win98"] ::-webkit-scrollbar-corner{ background:#c0c0c0; }
html[data-theme="win98"] ::-webkit-scrollbar-button:single-button{ display:block; width:16px; height:16px; background-color:#c0c0c0; box-shadow:var(--w98-bevel); background-repeat:no-repeat; background-position:center; }
html[data-theme="win98"] ::-webkit-scrollbar-button:single-button:vertical:decrement{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
html[data-theme="win98"] ::-webkit-scrollbar-button:single-button:vertical:increment{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
html[data-theme="win98"] ::-webkit-scrollbar-button:single-button:horizontal:decrement{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
html[data-theme="win98"] ::-webkit-scrollbar-button:single-button:horizontal:increment{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E"); }
html[data-theme="win98"] ::-webkit-scrollbar-button:single-button:active{ box-shadow:var(--w98-sunk); }
html[data-theme="win98"] :focus-visible{ outline:1px dotted #000 !important; outline-offset:-4px !important; }
html[data-theme="win98"] .w98items :focus-visible{ outline:none !important; }
html[data-theme="win98"] #siteFooter, html[data-theme="win98"] #siteFooter p, html[data-theme="win98"] #siteFooter .build{ color:#fff !important; border-top-color:rgba(255,255,255,.35); }
html[data-theme="win98"] #siteFooter a{ color:#fff !important; text-decoration:underline; }

/* ---- music button (v0.12.1): a play / pause icon left of the sound wave shows what the music is doing ---- */
#musicBtn .mbIcon{ position:relative; display:inline-block; width:8px; height:9px; flex:none; }
/* v0.15: the icon is the action, like a media player — paused shows ▶ (play), playing shows ❚❚ (pause) */
#musicBtn .mbIcon::before, #musicBtn .mbIcon::after{ content:''; position:absolute; top:0; width:3px; height:9px; background:currentColor; }
#musicBtn .mbIcon::before{ left:0; } #musicBtn .mbIcon::after{ right:0; }
#musicBtn:not(.on) .mbIcon::after{ display:none; }
#musicBtn:not(.on) .mbIcon::before{ left:1px; width:0; height:0; background:none; border-style:solid; border-width:4.5px 0 4.5px 7px; border-color:transparent transparent transparent currentColor; }

/* ---- GAMES (v0.12.2): the player's TV is a slim 16:9 flatscreen on a neck and foot (no squished CRT) ---- */
.gdTv.flat{ width:100%; aspect-ratio:auto; padding:5px 5px 0; border-radius:4px;
  background:linear-gradient(160deg, #2c2f3a, #14151c 60%); box-shadow:inset 0 0 0 1px #3c404e, inset 0 1px 0 rgba(255,255,255,.12), 0 10px 18px rgba(0,0,0,.5); }
.gdTv.flat .gdScreen{ width:100%; height:auto; aspect-ratio:16 / 9; border-radius:1px; box-shadow:0 0 0 1px #000; }
.gdTv.flat .gdScreen::after{ border-radius:1px; background:linear-gradient(115deg, rgba(255,255,255,.14), transparent 38%), radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,.35)); }
.gdChin{ display:flex; align-items:center; justify-content:flex-end; height:9px; padding:0 6px; }
.gdPower{ width:4px; height:4px; border-radius:50%; background:#3a1c1c; }
.gameDeck.on .gdPower{ background:#6dff9a; box-shadow:0 0 6px #6dff9a; }
.gdNeck{ position:relative; width:100%; height:12px; display:flex; justify-content:center; }
.gdNeck::before{ content:''; width:12%; height:9px; background:linear-gradient(90deg, #1c1e26, #3a3d4a, #1c1e26); }
.gdNeck i{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:44%; height:4px; border-radius:3px 3px 1px 1px; background:linear-gradient(#3a3d4a, #1a1c24); box-shadow:0 2px 3px rgba(0,0,0,.45); }
.gdTv.flat + .gdNeck + .gdPlayer{ margin-top:2px; }
@media (max-width:700px){ .gameDeck{ --deckW:156px; } }
@media (max-width:700px){ .bookcase{ padding-bottom:236px; } }

/* ---- the top-bar fox (v0.13): 10 pets → a speech bubble ---- */
.foxSays{ position:absolute; right:100%; top:50%; transform:translate(-6px, -50%); white-space:nowrap; padding:5px 8px; border-radius:3px;
  font:var(--label-size) var(--font-label); letter-spacing:.06em; color:#0b0508; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); pointer-events:none;
  animation:foxSays 3.2s ease-out forwards; }
.foxSays::after{ content:''; position:absolute; right:-4px; top:50%; margin-top:-3px; border:3px solid transparent; border-left-color:#fff; border-right:0; }
@keyframes foxSays{ 0%{ opacity:0; transform:translate(0, -50%) scale(.8); } 8%, 85%{ opacity:1; transform:translate(-6px, -50%) scale(1); } 100%{ opacity:0; transform:translate(-6px, -60%); } }
html[data-reduce-motion="true"] .foxSays{ animation:none; }

/* ---- polish (v0.13): MUSIC's 14 records sit in one row that scrolls sideways instead of wrapping off-screen ---- */
.app[data-view="music"] .shelf{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:thin; padding-top:18px;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.app[data-view="music"] .shelf > .albumItem{ flex:none; scroll-snap-align:start; }

/* ---- GAMES (v0.14): pixel plants instead of the book boxes ---- */
.potGroup{ display:flex; align-items:flex-end; gap:6px; }
.pxPlant{ --px:3px; width:calc(var(--pw) * var(--px)); height:calc(var(--ph) * var(--px)); image-rendering:pixelated; image-rendering:crisp-edges;
  margin-bottom:calc(var(--hang, 0) * var(--px) * -1); transform-origin:50% 100%; animation:plantSway 6s ease-in-out infinite; position:relative; z-index:1; }
.pxPlant[data-plant="succ"], .pxPlant[data-plant="cactus"]{ animation:none; }
.pxPlant[data-plant="snake"]{ animation-duration:8s; animation-delay:-2s; }
.pxPlant[data-plant="monstera"]{ animation-delay:-3.5s; }
.pxPlant[data-plant="pothos"]{ transform-origin:50% 55%; animation-duration:7s; }
@keyframes plantSway{ 0%, 100%{ transform:rotate(-1.2deg); } 50%{ transform:rotate(1.2deg); } }
html[data-reduce-motion="true"] .pxPlant{ animation:none; }
@media (max-width:1100px){ .pxPlant{ --px:2.5px; } }

/* ---- Settings (v0.14): wallpaper windows, mini music player ---- */
.wpSet{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:4px 0 8px; }
.wpCard{ position:relative; padding:3px 3px 16px; border:1px solid var(--line); border-radius:4px; background:rgba(0,0,0,.25); cursor:pointer; transition:transform .12s, border-color .12s; }
.wpCard canvas{ display:block; width:100%; aspect-ratio:88 / 50; border-radius:2px; background:var(--bg); }
.wpCard span{ position:absolute; left:0; right:0; bottom:2px; text-align:center; font:600 9px var(--font-mono); color:var(--ink); letter-spacing:.02em; white-space:nowrap; overflow:hidden; }
.wpCard:hover, .wpCard:focus-visible{ transform:translateY(-2px); border-color:var(--accent); outline:none; }
.wpCard.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 12px rgba(var(--accent-rgb), .4); }
.wpCard.active span{ color:var(--accent); }
.setPlayer{ display:flex; align-items:center; gap:6px; margin:4px 0 10px; }
.spBtn{ position:relative; flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--ink); cursor:pointer; }
.spBtn:hover, .spBtn:focus-visible{ border-color:var(--accent); color:var(--accent); outline:none; }
.spBtn.spMain{ width:36px; height:36px; background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.spBtn.spMain:hover{ color:var(--on-accent); filter:brightness(1.1); }
.spBtn i{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block; }
.gPlay{ width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; margin-left:2px; }
.spMain.on .gPlay{ width:10px; height:12px; border:0; margin:0; background:linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.gPrev, .gNext{ width:12px; height:10px; }
.gPrev::before, .gNext::before{ content:''; position:absolute; top:0; width:2px; height:10px; background:currentColor; }
.gPrev::after, .gNext::after{ content:''; position:absolute; top:0; width:0; height:0; border-style:solid; }
.gPrev::before{ left:0; } .gPrev::after{ left:2px; border-width:5px 8px 5px 0; border-color:transparent currentColor transparent transparent; }
.gNext::before{ right:0; } .gNext::after{ right:2px; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; }
.spTrack{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:6px 10px; border:1px solid var(--line); border-radius:6px;
  background:rgba(0,0,0,.2); color:var(--ink); cursor:pointer; text-align:left; }
.spTrack b{ font:var(--label-size) var(--font-label); letter-spacing:.04em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spTrack small{ font:10px var(--font-mono); color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spTrack:hover, .spTrack:focus-visible{ border-color:var(--accent); outline:none; }
.spTrack:hover b{ color:var(--accent); }
html[data-theme="win98"] .wpCard, html[data-theme="win98"] .spTrack{ border-radius:0; border:none; background:#c0c0c0; box-shadow:var(--w98-bevel); }
html[data-theme="win98"] .wpCard.active{ box-shadow:var(--w98-sunk); }
html[data-theme="win98"] .wpCard span, html[data-theme="win98"] .spTrack b{ color:#000; }
html[data-theme="win98"] .spBtn{ border-radius:0; border:none; background:#c0c0c0; color:#000; box-shadow:var(--w98-bevel); }
html[data-theme="win98"] .spBtn.spMain{ background:#c0c0c0; color:#000; }
html[data-theme="win98"] .spBtn:active{ box-shadow:var(--w98-sunk); }

/* ---- trays (v0.14): on phones they swipe sideways and snap firmly to each item ---- */
@media (max-width:860px){
  .shelf{ flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scroll-padding-inline:12px; scrollbar-width:none; }
  .shelf::-webkit-scrollbar{ display:none; }
  .shelf > *{ flex:none; scroll-snap-align:center; }
  .app[data-view="music"] .shelf{ scroll-snap-type:x mandatory; }
}


/* ==========================================================================
   v0.15 — phones: ART photos on the gallery wall, records by the player;
   record player back / next; a tidier Settings panel
   ========================================================================== */
.galWall, .deckCrate{ display:none; }
.app.traysIn[data-view="art"]:not([data-wall="1"]) .shelf, .app.traysIn[data-view="music"] .shelf{ display:none; }
@media (max-width:860px){
  .gallery{ flex-direction:column; justify-content:flex-start; height:auto; min-height:100%; overflow:visible; padding:56px 0 30px; }
  .galTitle{ position:static; align-self:flex-start; margin:0 18px 18px; }
  .galFrame{ width:82%; margin-bottom:58px; }
  .galWall{ display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:22px 10px; justify-items:center; width:100%; padding:0 14px; }
  .galWall > .photoItem{ display:flex; }
  .galWall .photo{ width:min(112px, 100%); }
  .galWall .photoThumb{ width:100%; height:auto; aspect-ratio:106 / 74; }
  .deckCrate{ display:grid; grid-column:1 / -1; grid-template-columns:repeat(auto-fill, minmax(86px, 1fr)); gap:18px 8px; justify-items:center; width:100%; padding:6px 4px 0; }
  .deckCrate > .albumItem{ display:flex; }
  .deckCrate .albumItem small{ max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* record player: back · play/pause · next */
.deckCtl{ display:flex; align-items:center; gap:8px; margin:4px 0 0; }
.deckCtl .pill{ margin:0; }
.deckStep{ position:relative; flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--ink); cursor:pointer; transition:border-color .15s, color .15s, transform .1s; }
.deckStep:hover, .deckStep:focus-visible{ border-color:var(--accent); color:var(--accent); outline:none; }
.deckStep:active{ transform:scale(.94); }
.deckStep i, .spBtn i{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block; }
@media (max-width:860px){ .deckCtl{ justify-content:center; } }
html[data-theme="win98"] .deckStep{ border-radius:0; border:none; background:#c0c0c0; color:#000; box-shadow:var(--w98-bevel); }
html[data-theme="win98"] .deckStep:active{ box-shadow:var(--w98-sunk); transform:none; }

/* Settings: each section is a card with an icon, music first as a "now playing" card */
#settingsPanel{ width:340px; }
.setBody{ padding:10px 12px 14px; }
.setSection{ margin:0 0 10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.setSection:last-child{ border:1px dashed var(--line); background:none; }
.setSection h4{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font:var(--label-size) var(--font-label); letter-spacing:.1em; color:var(--accent); }
.shIco{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; font:12px/1 system-ui, sans-serif; color:var(--on-accent); background:var(--accent); }
.setMusicCard{ background:radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgb), .16), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.spNow{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.spDisc{ --vc:var(--accent); flex:none; width:44px; height:44px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,.45);
  background:radial-gradient(circle, #0b0b0d 0 6%, var(--vc) 7% 30%, #0b0b0d 31% 100%), repeating-radial-gradient(circle, #0b0b0d 0 2px, #1b1b20 2px 3px); }
.spDisc.on{ animation:spSpin 2.2s linear infinite; }
@keyframes spSpin{ to{ transform:rotate(360deg); } }
html[data-reduce-motion="true"] .spDisc.on{ animation:none; }
.setPlayer{ justify-content:center; gap:12px; margin:0 0 6px; }
.setMusicCard .spTrack{ flex:1; }
@media (max-width:860px){ #settingsPanel{ width:auto; } }
html[data-theme="win98"] .setSection{ border-radius:0; border:none; background:#c0c0c0; box-shadow:var(--w98-sunk); }
html[data-theme="win98"] .setSection h4{ color:#000080; }
html[data-theme="win98"] .shIco{ border-radius:0; background:#000080; color:#fff; }

/* ==========================================================================
   v0.16 — ART photos on the wall and MUSIC records in a crate, at every size;
   the backlit record-player panel; the in-game bar (EJECT / SETTINGS)
   ========================================================================== */
.srOnly{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* no tray under the screen for ART (unless the wallpaper windows are up), MUSIC, or a running game — the screen gets the height */
.app[data-view="art"]:not([data-wall="1"]) .shelf, .app[data-view="music"] .shelf, .app[data-playing="game"] .shelf{ display:none !important; }
.app[data-view="art"]:not([data-wall="1"]) #stageWrap:not(.full), .app[data-view="music"] #stageWrap:not(.full), .app[data-playing="game"] #stageWrap:not(.full){
  height:clamp(420px, calc(100vh - var(--topbar-h) - 3 * var(--gap)), 1000px) !important; }
@media (max-width:860px){ .app[data-view="art"]:not([data-wall="1"]) #stageWrap:not(.full), .app[data-view="music"] #stageWrap:not(.full), .app[data-playing="game"] #stageWrap:not(.full){ height:min(80vh, 720px) !important; } }
.galWall{ display:grid; }
.deckCrate{ display:grid; }

/* ---- ART: the framed piece and a salon wall of photos beside it ---- */
@media (min-width:861px){
  .gallery{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(250px, 1fr); align-items:center; column-gap:4%; padding:70px 4% 60px; overflow-y:auto; }
  .galFrame{ width:100%; margin:0 0 50px; }
  .galWall{ grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:26px 14px; justify-items:center; align-content:center; padding:10px 0 20px; }
  .galWall > .photoItem{ display:flex; }
  .galWall .photo{ width:min(120px, 100%); }
  .galWall .photoThumb{ width:100%; height:auto; aspect-ratio:106 / 74; }
}

/* ---- MUSIC: now playing · the player with its backlit panel · the crate ---- */
.deck{ display:grid; grid-template-columns:auto minmax(250px, 1fr); grid-template-rows:auto minmax(0, 1fr); grid-template-areas:"now now" "player crate"; align-items:start; align-content:start;
  column-gap:clamp(20px, 3vw, 44px); row-gap:14px; padding:22px clamp(18px, 3vw, 44px) 26px; height:100%; overflow:hidden; }
.deckNow{ grid-area:now; }
.deckNow .nowLabel{ margin:0 0 6px; }
.deckNow #nowTitle{ margin:0 0 4px; }
.deckNow #nowSub{ margin:0; }
.deckPlayer{ grid-area:player; --tt2:min(44vh, 380px); display:flex; flex-direction:column; }
.deckPlayer .turntable{ --tt:var(--tt2); border-radius:14px 14px 0 0; }
.ttPanel{ width:calc(var(--tt2) * 1.22); display:grid; gap:10px; padding:12px 14px 14px; border-radius:0 0 14px 14px;
  background:linear-gradient(#1d1f27, #121319); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.5), 0 14px 26px rgba(0,0,0,.5); }
.lcd{ position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:10px; row-gap:6px; padding:8px 10px 7px; border-radius:6px; overflow:hidden;
  color:rgb(var(--accent-rgb)); text-shadow:0 0 6px rgba(var(--accent-rgb), .8);
  background:radial-gradient(120% 140% at 50% 0%, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .10) 60%), #050c0b;
  box-shadow:inset 0 0 0 2px #000, inset 0 0 22px rgba(var(--accent-rgb), .35), 0 0 16px rgba(var(--accent-rgb), .18); }
.lcd::after{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.lcdState{ font:var(--label-size) var(--font-label); letter-spacing:.06em; white-space:nowrap; }
.lcdTrk{ font:var(--label-size) var(--font-label); letter-spacing:.06em; white-space:nowrap; overflow:hidden; }
.lcdTrk span{ display:inline-block; padding-left:100%; animation:lcdScroll 14s linear infinite; }
@keyframes lcdScroll{ to{ transform:translateX(-100%); } }
.lcd .eqBars{ grid-column:1 / -1; height:16px; margin:0; gap:2px; overflow:hidden; }
.lcd .eqBars i{ flex:1; width:auto; height:2px; background:rgb(var(--accent-rgb)); box-shadow:0 0 6px rgba(var(--accent-rgb), .8); opacity:.9; }
.deck[data-playing="true"] .lcd .eqBars i{ animation-name:eqbLcd; }
@keyframes eqbLcd{ from{ height:2px; } to{ height:16px; } }
html[data-reduce-motion="true"] .lcdTrk span{ animation:none; padding-left:0; }
.ttPanel .deckCtl{ display:flex; align-items:center; gap:10px; margin:0; }
.deckStep{ background:radial-gradient(circle at 35% 30%, #4a4e5c, #1c1e26 70%); border:1px solid #0a0b0f; box-shadow:0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.12); }
.deckStep.deckMain{ width:46px; height:46px; color:rgb(var(--accent-rgb)); box-shadow:0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px rgba(var(--accent-rgb), .35); }
.deckStep.deckMain.on{ box-shadow:0 2px 0 #000, 0 0 0 2px var(--accent), 0 0 14px rgba(var(--accent-rgb), .6); }
.deckStep.deckMain.on .gPlay{ width:10px; height:12px; border:0; margin:0; background:linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.ttPanel .deckVol{ margin:0 0 0 auto; gap:8px; }
.ttPanel .deckVol input{ width:min(110px, 22vw); }
/* the crate */
.crate{ grid-area:crate; align-self:stretch; min-height:0; display:flex; flex-direction:column; padding:8px; border-radius:6px;
  background:repeating-linear-gradient(180deg, #6e4629 0 30px, #5b391f 30px 32px); box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.12), 0 16px 30px rgba(0,0,0,.5); }
.crateHead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:4px 6px 10px; }
.crateHead b{ font:var(--label-size) var(--font-label); letter-spacing:.14em; color:#2a170b; text-shadow:0 1px 0 rgba(255,255,255,.2); }
.crateHead .note{ margin:0 !important; padding:0 !important; border:0 !important; font-size:10px !important; color:#f3e2cc !important; opacity:.85; }
.deckCrate{ flex:1; min-height:0; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); align-content:start; gap:20px 10px; justify-items:center;
  overflow-y:auto; overscroll-behavior:contain; padding:16px 8px 20px; border-radius:3px; background:linear-gradient(#0f0906, #1a100a); box-shadow:inset 0 10px 18px rgba(0,0,0,.75); scrollbar-width:thin; }
.deckCrate > .albumItem{ display:flex; }
.crateLip{ height:14px; margin:8px 20% 0; border-radius:0 0 8px 8px; background:#3c2414; box-shadow:inset 0 3px 4px rgba(0,0,0,.6); }
@media (max-width:860px){
  .deck{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"now" "player" "crate"; justify-items:center; text-align:center; height:auto; min-height:100%; overflow:visible; }
  .deckPlayer{ --tt2:min(40vh, 70vw); }
  .crate{ width:100%; }
  .deckCrate{ display:flex !important; grid-template-columns:none; overflow-x:auto; overflow-y:hidden; gap:14px; padding:16px 12px; scroll-snap-type:x mandatory; }
  .deckCrate > .albumItem{ flex:none; scroll-snap-align:center; }
  .ttPanel .deckCtl{ flex-wrap:wrap; justify-content:center; }
  .ttPanel .deckVol{ margin:0; flex-basis:100%; justify-content:center; }
}
html[data-theme="win98"] .ttPanel{ background:#c0c0c0; box-shadow:var(--w98-bevel); border-radius:0; }
html[data-theme="win98"] .crate{ border-radius:0; }

/* ---- the in-game bar ---- */
.gameBar{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:7; display:flex; flex-direction:column; align-items:center; }
.gameBar[hidden]{ display:none; }
.gbTabs{ display:flex; gap:6px; }
.gbTab{ font:var(--label-size) var(--font-label); letter-spacing:.06em; color:var(--ink); padding:8px 12px; border-radius:3px; cursor:pointer; white-space:nowrap;
  background:rgba(5,6,12,.72); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.gbTab[hidden]{ display:none; }
.gbTab:hover, .gbTab:focus-visible, .gbTab[aria-expanded="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); outline:none; }
.gameSet{ margin-top:8px; width:min(360px, 92vw); padding:12px; border-radius:10px; background:var(--panel-bg-strong); border:1px solid var(--panel-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 18px 40px rgba(0,0,0,.55); animation:rowIn .3s cubic-bezier(.3,1.5,.5,1); }
.gameSet[hidden]{ display:none; }
.gsRow{ display:flex; gap:8px; }
.gsBtn{ flex:1; display:inline-flex; justify-content:center; align-items:center; font:var(--label-size) var(--font-label); letter-spacing:.06em; padding:10px 8px; border-radius:4px; cursor:pointer;
  color:var(--ink); text-decoration:none; background:rgba(0,0,0,.3); border:1px solid var(--line); }
.gsBtn:hover, .gsBtn:focus-visible{ border-color:var(--accent); outline:none; }
.gsBtn.on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.gsLabel{ font:var(--label-size) var(--font-label); letter-spacing:.1em; color:var(--muted); margin:12px 2px 8px; }
.gsList{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.gsCart{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 4px 7px; border-radius:6px; cursor:pointer; color:var(--ink);
  border:1px solid var(--line); background:linear-gradient(var(--cc), var(--cc)) top / 100% 4px no-repeat, rgba(0,0,0,.3); }
.gsCart img{ height:24px; width:auto; image-rendering:pixelated; }
.gsCart span{ font:var(--label-size)/1.3 var(--font-label); letter-spacing:.03em; text-align:center; }
.gsCart:hover, .gsCart:focus-visible{ border-color:var(--cc); outline:none; }
.gsCart.current{ border-color:var(--cc); box-shadow:0 0 0 1px var(--cc), 0 0 12px color-mix(in srgb, var(--cc) 45%, transparent); }
.app[data-playing="game"] #stageBack, .app[data-playing="game"] .screenBtns{ display:none !important; }
html[data-theme="win98"] .gbTab, html[data-theme="win98"] .gsBtn, html[data-theme="win98"] .gsCart{ border-radius:0; border:none; background:#c0c0c0; color:#000; box-shadow:var(--w98-bevel); }
html[data-theme="win98"] .gameSet{ border-radius:0; background:#c0c0c0; box-shadow:var(--w98-bevel); }
html[data-theme="win98"] #w98StageBar ~ .gameBar{ top:30px; }

/* ==========================================================================
   v0.17 — REFERRALS: the ad cards beside the TV (like ART's wall), the
   disclosure as one line along the bottom of the screen
   ========================================================================== */
.app[data-view="links"] .shelf{ display:none !important; }
.app[data-view="links"] #stageWrap:not(.full){ height:clamp(420px, calc(100vh - var(--topbar-h) - 3 * var(--gap)), 1000px) !important; }
.adDesk{ grid-template-columns:auto minmax(260px, 1fr); grid-template-rows:auto 1fr auto; grid-template-areas:"tv info" "tv wall" "fine fine";
  align-items:center; column-gap:clamp(24px, 4vw, 60px); row-gap:14px; padding:26px clamp(18px, 4vw, 56px) 16px; overflow-y:auto; }
.adDesk .oldTv{ grid-area:tv; align-self:center; }
.adDesk .adInfo{ grid-area:info; align-self:end; }
.adWall{ grid-area:wall; align-self:start; display:grid; grid-template-columns:repeat(2, max-content); gap:18px 16px; justify-content:start; padding:6px 0 10px; }
.adWall > .adItem{ display:flex; animation:rowIn .45s cubic-bezier(.3,1.5,.5,1) backwards; }
.adWall > .adItem:nth-child(2){ animation-delay:.05s; } .adWall > .adItem:nth-child(3){ animation-delay:.1s; } .adWall > .adItem:nth-child(4){ animation-delay:.15s; }
.adFine{ grid-area:fine; margin:0 !important; padding-top:10px; border-top:1px solid var(--line); text-align:center; font-size:10.5px !important; line-height:1.6; color:var(--muted); max-width:none !important; }
@media (max-width:860px){
  .app[data-view="links"] #stageWrap:not(.full){ height:min(80vh, 720px) !important; }
  .adDesk{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-template-areas:"tv" "info" "wall" "fine"; justify-items:center; text-align:center; height:auto; min-height:100%; }
  .adDesk .adInfo{ align-self:auto; }
  .adWall{ justify-content:center; }
}
@media (max-width:400px){ .adWall{ gap:14px 10px; } }
@media (max-width:860px){ .adFine{ text-align:center; } }

/* ==========================================================================
   v0.18 — Referrals: see-through screen, lit card on air, channel tags, the TV
   screen is a link, the open ad slot, a wall that scrolls · titles gone ·
   HOME: FULL / POP OUT move to the top-left corner
   ========================================================================== */
/* the screen goes see-through on REFERRALS: just the wallpaper behind the TV and cards */
.app[data-view="links"] #stageWrap{ box-shadow:none; border-color:transparent; }
.app[data-view="links"] #screenContent{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-reduce-transparency="true"] .app[data-view="links"] #screenContent{ background:transparent; }
.app[data-view="links"] .screenScan{ opacity:0; }
.adDesk{ background:none; }
.adInfo, .adFine{ text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.6); }
.adFine{ border-top-color:rgba(255,255,255,.12); }
html[data-theme="win98"] .adInfo, html[data-theme="win98"] .adFine{ text-shadow:none; }   /* WIN98 keeps its grey window face */

/* the card on air: lit, a steady accent frame and an ON AIR lamp (hover only lifts) */
.adCard:hover, .adCard:focus-visible{ box-shadow:0 14px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.35); }
.adCard.current{ transform:translateY(-6px) rotate(0deg) scale(1.06); border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent), 0 0 22px rgba(var(--accent-rgb), .75), 0 14px 26px rgba(0,0,0,.55); filter:brightness(1.12); }
.adCard.current::before{ content:'ON AIR'; position:absolute; z-index:2; bottom:6px; right:5px; padding:2px 4px 2px 12px; font:var(--label-size) var(--font-label); letter-spacing:.06em;
  color:#fff; background:rgba(0,0,0,.72) radial-gradient(circle at 6px 50%, var(--accent) 0 2.5px, transparent 3.5px) no-repeat; }
.adCard.current .adIcon{ opacity:.25; }
.adCard.current .adCh{ visibility:hidden; }   /* ON AIR sits in its place */
/* channel tag, bottom-right of every card */
.adCh{ position:absolute; right:7px; bottom:9px; font:var(--label-size) var(--font-label); letter-spacing:.04em; color:rgba(255,255,255,.55); }
.adCard.current .adCh{ color:#7dff8a; }
/* the TV screen is a link while an ad is on */
.tvGlass{ cursor:pointer; }
.tvVisit{ position:absolute; inset:0; z-index:2; border-radius:inherit; }
.tvVisit[hidden]{ display:none; }
.tvVisit span{ position:absolute; right:9%; bottom:10%; padding:3px 6px; font:var(--label-size) var(--font-label); letter-spacing:.06em; color:#fff;
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.35); transition:background .15s, color .15s; }
.tvVisit:hover span, .tvVisit:focus-visible span{ background:var(--accent); color:#0b0508; border-color:var(--accent); }
.tvVisit:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
.oldTv.surf .tvVisit span{ opacity:.8; }
/* the open slot: an empty, dashed cartridge */
.adCard.openSlot{ background:rgba(0,0,0,.35); border:2px dashed rgba(var(--accent-rgb), .8); box-shadow:none; }
.adCard.openSlot .adTag{ background:transparent; color:var(--accent); border:1px solid var(--accent); padding:1px 3px; }
.adCard.openSlot b{ color:var(--accent); }
.adCard.openSlot em{ color:rgba(255,255,255,.7); }
.adCard.openSlot.current{ border-style:solid; }
/* the wall scrolls once it has more cards than fit (room for more ads) */
.adWall{ min-height:0; max-height:100%; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y proximity; padding:14px 10px 12px 4px; margin:-8px -10px 0 -4px;
  scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb), .6) transparent; }
.adWall > .adItem{ scroll-snap-align:start; }
@media (max-width:860px){ .adWall{ max-height:none; overflow:visible; margin:0; padding:10px 0 12px; } }

/* titles removed (ART, GAMES, MUSIC now-playing, REFERRALS stay for screen readers only) */
@media (min-width:861px){ .gallery{ padding-top:40px; } }
.deck{ grid-template-rows:minmax(0, 1fr); grid-template-areas:"player crate"; align-content:center; }
@media (max-width:860px){ .deck{ grid-template-rows:none; grid-template-areas:"player" "crate"; align-content:start; } }

/* HOME: FULL / POP OUT sit in the top-left corner (where SCVRLET // NIGHT SHIFT was) */
@media (max-width:860px){ .adInfo .pills{ justify-content:center; } }

/* ==========================================================================
   v0.19 — ABOUT: no title, see-through screen, the bio in its own glass
   capsule, FULL / POP OUT in the fox's window · MUSIC: TRACK INFO ·
   SCVRLET RUN: stats in the dirt, LIBRARY / HOME left, SETTINGS right
   ========================================================================== */
.app[data-view="about"] #stageWrap{ box-shadow:none; border-color:transparent; }
.app[data-view="about"] #screenContent{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-reduce-transparency="true"] .app[data-view="about"] #screenContent{ background:transparent; }
.app[data-view="about"] .screenScan{ opacity:0; }
.aboutHead{ justify-content:flex-end; }
/* v1.1: NOW building runs the full width of the fox's studio, like a title bar over it */
.aboutHead .nowWrap{ flex:1 1 100%; }
.aboutHead .nowWrap .nowLine{ display:flex; width:100%; max-width:none !important; justify-content:center; border-radius:10px; padding:10px 18px; }
/* v1.1: COMMISSIONS & ADS and SEND SNACK/COFFEE? side by side (stacked on narrow screens) */
.aboutCards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; max-width:760px; margin:22px auto 0; align-items:stretch; }
#panel-about .aboutCards .supportCard{ margin:0; max-width:none; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:640px){ .aboutCards{ grid-template-columns:1fr; } }
.bioCard{ max-width:560px; margin:18px auto 0; padding:18px 24px; border-radius:18px; text-align:center; }
.bioCard p{ margin:0 0 10px !important; max-width:none !important; }
.bioCard p:last-child{ margin-bottom:0 !important; }
#panel-about .supportCard{ margin-left:auto; margin-right:auto; text-align:center; }
#panel-about .supportCard .pills{ justify-content:center; }
#panel-about .pills.small a{ text-shadow:0 1px 2px rgba(0,0,0,.8); }
#aboutRoomWrap .screenBtns{ right:10px; bottom:10px; }
html[data-theme="win98"] .bioCard{ border-radius:0; background:var(--w98-face); color:#000; box-shadow:var(--w98-bevel); border:none; }
html[data-theme="win98"] .bioCard a{ color:#0000ee; }

/* MUSIC: WINDOWSURF's record has its real cover on the sleeve, and a NEW tag */
.album.hasCover .sleeve{ background-size:cover; background-position:center; }
.album.hasCover .sleeve::before{ opacity:0; }
.album.hasCover .sleeve b{ color:#fff; background:rgba(0,0,0,.55); padding:1px 3px; }
.album .newTag{ position:absolute; z-index:2; top:-6px; left:-6px; padding:2px 4px; font:var(--label-size) var(--font-label); letter-spacing:.06em; color:var(--on-accent); background:var(--accent); transform:rotate(-8deg); box-shadow:0 2px 0 rgba(0,0,0,.4); }
/* TRACK INFO: a small plate on the record player's plinth (top-left; the tonearm is top-right) */
.ttInfo{ position:absolute; z-index:3; left:4%; top:5%; display:inline-flex; align-items:center; gap:6px; padding:6px 9px 6px 6px; border-radius:4px; cursor:pointer;
  font:var(--label-size) var(--font-label); letter-spacing:.06em; color:#e9e2d4; background:linear-gradient(#2b2a2e, #18171b); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 2px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); transition:color .15s, border-color .15s, transform .1s; }
.ttInfo i{ display:inline-grid; place-items:center; width:13px; height:13px; border-radius:50%; font:italic 700 9px Georgia, serif; color:#0b0d16; background:rgb(var(--accent-rgb)); box-shadow:0 0 8px rgba(var(--accent-rgb), .7); }
.ttInfo:hover, .ttInfo:focus-visible, .ttInfo[aria-expanded="true"]{ color:#fff; border-color:var(--accent); outline:none; }
.ttInfo:active{ transform:translateY(1px); }
/* the panel: over the whole MUSIC screen */
.trackInfo{ position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:rgba(3,4,10,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:tiFade .25s ease-out; }
.trackInfo[hidden]{ display:none; }
@keyframes tiFade{ from{ opacity:0; } }
.tiCard{ position:relative; display:grid; grid-template-columns:auto minmax(220px, 300px); gap:28px; align-items:center; max-width:100%; max-height:100%; overflow:auto;
  padding:26px 28px; border-radius:16px; background:var(--panel-bg-strong); border:1px solid var(--panel-border); box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:tiPop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes tiPop{ from{ transform:translateY(16px) scale(.96); opacity:0; } }
.tiClose{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; cursor:pointer; color:var(--ink); background:rgba(0,0,0,.35); border:1px solid var(--line); font-size:12px; }
.tiClose:hover, .tiClose:focus-visible{ border-color:var(--accent); color:var(--accent); outline:none; }
.tiCover{ --size:min(46vh, 380px); position:relative; width:var(--size); height:var(--size); border-radius:6px; overflow:hidden; background:#0b0d16;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--vc) 30%, transparent); }
.tiCover.img{ width:auto; height:auto; max-width:min(52vw, 520px); max-height:min(52vh, 420px); aspect-ratio:auto; background:none; }
.tiCover.img img{ display:block; max-width:min(52vw, 520px); max-height:min(52vh, 420px); width:auto; height:auto; image-rendering:pixelated; }
.tiCover.cart{ display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--vc) 45%, #111), #0b0d16 70%); }
.tiCover.cart img{ width:62%; height:auto; image-rendering:pixelated; filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.tiCover.art canvas{ display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.tiCover.sleeveBig{ background:linear-gradient(135deg, var(--vc), color-mix(in srgb, var(--vc) 45%, #0b0d16)); display:flex; flex-direction:column; justify-content:flex-end; padding:18px; box-sizing:border-box; }
.tiCover.sleeveBig::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 8px, transparent 8px 22px); }
.tiCover.sleeveBig canvas{ position:absolute; left:18px; top:18px; height:42px; width:auto; image-rendering:pixelated; }
.tiCover.sleeveBig b{ position:relative; font:14px/1.5 var(--font-pixel); color:#0b0d16; letter-spacing:.04em; }
.tiText{ min-width:0; }
.tiText .nowLabel{ margin:0 0 8px; }
.tiText h3{ margin:0 0 16px; font:clamp(16px, 2.2vw, 22px)/1.35 var(--font-pixel); color:var(--ink); letter-spacing:.04em; overflow-wrap:anywhere; }
.tiRows{ display:grid; grid-template-columns:auto 1fr; gap:9px 14px; margin:0 0 20px; }
.tiRows dt{ font:var(--label-size)/2 var(--font-label); letter-spacing:.08em; color:var(--muted); }
.tiRows dd{ margin:0; font:13px/1.5 var(--font-mono); color:var(--ink); }
.tiBtns{ display:flex; gap:8px; }
@media (max-width:860px){
  .tiCard{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px; padding:22px 18px; }
  .tiCover{ --size:min(64vw, 280px); }
  .tiCover.img, .tiCover.img img{ max-width:78vw; max-height:36vh; }
  .tiRows{ text-align:left; }
  .tiBtns{ justify-content:center; }
  .trackInfo{ position:fixed; z-index:90; }
}
html[data-theme="win98"] .tiCard{ border-radius:0; background:var(--w98-face); color:#000; box-shadow:var(--w98-bevel); border:none; }
html[data-theme="win98"] .tiText h3, html[data-theme="win98"] .tiRows dd{ color:#000; }
html[data-theme="win98"] .ttInfo{ border-radius:0; background:#c0c0c0; color:#000; box-shadow:var(--w98-bevel); border:none; }
html[data-reduce-motion="true"] .trackInfo, html[data-reduce-motion="true"] .tiCard{ animation:none; }

/* the in-game bar: one centred row (EJECT · SETTINGS) so the cashcat games keep their corner scores clear;
   SCVRLET RUN: GAME LIBRARY + HOME on the left, SETTINGS on the right. SETTINGS' panel drops down under it. */
.gameBar{ flex-direction:row; align-items:flex-start; gap:6px; }
.gbR{ position:relative; flex-direction:column; align-items:center; }
.gbR .gameSet{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; }
.app[data-game="srun"] .gameBar{ left:10px; right:10px; transform:none; justify-content:space-between; pointer-events:none; }
.app[data-game="srun"] .gameBar .gbTabs{ pointer-events:auto; }
.app[data-game="srun"] .gbR{ align-items:flex-end; }
.app[data-game="srun"] .gbR .gameSet{ left:auto; right:0; transform:none; }
.tiClose{ z-index:3; }

/* ==========================================================================
   v0.21 — FULL / POP OUT top right (HOME, ART, GAMES, REFERRALS), with CLOSE
   beside them on an ART piece · in the MUSIC crate's header · < > arrows
   through the ART pieces · WALLPAPER choices under the header
   ========================================================================== */
.screenBtns{ top:10px; right:10px; bottom:auto; align-items:center; }
#stageBack{ position:static; }
html[data-theme="win98"] #stageWrap > .screenBtns{ top:32px; }
#aboutRoomWrap .screenBtns{ top:auto; right:10px; bottom:10px; }
.adFine{ text-align:left; }
/* MUSIC: the buttons in the RECORD CRATE header */
.crateBtns{ display:flex; margin-left:auto; }
.crateBtns .screenBtns{ position:static; }
.crateHead{ align-items:center; }
/* ART: < > through the pieces, top centre */
.artNav{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:8px; }
.artNav[hidden]{ display:none; }
.artNav .pill{ min-width:40px; justify-content:center; font-size:12px; padding:5px 12px; background:rgba(5,6,12,.55); }
html[data-theme="win98"] .artNav{ top:32px; }
/* WALLPAPER: DENSITY / BACKGROUND and the style windows move up under the header; the clear screen follows */
.app[data-wall="1"] .main > .wpBar{ order:1; margin-top:0; }
.app[data-wall="1"] .main > .shelf{ order:2; }
.app[data-wall="1"] .main > #stageWrap{ order:3; }
.app[data-wall="1"] .main > #siteFooter{ order:4; }
@media (min-width:861px){ .app[data-wall="1"] .shelf{ flex-wrap:wrap; overflow-x:visible; row-gap:16px; } }   /* desktop: every style at once */

/* v0.21.1 — REFERRALS: the disclosure runs as a marquee between the TV's legs (the bottom line is gone) */
.adDesk{ grid-template-rows:auto 1fr; grid-template-areas:"tv info" "tv wall"; }
@media (max-width:860px){ .adDesk{ grid-template-rows:none; grid-template-areas:"tv" "info" "wall"; padding-bottom:24px; } }
.tvLegs{ position:relative; }
.tvMarquee{ position:absolute; left:calc(16% + 20px); right:calc(16% + 20px); top:calc(var(--tv) * .02);   /* out of the flow: its text can't widen the TV */ overflow:hidden; white-space:nowrap; padding:4px 0;
  border-radius:3px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 0 8px rgba(0,0,0,.6);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tvMqTrack{ display:inline-flex; animation:tvMq 26s linear infinite; }
.tvMqTrack span{ padding-right:48px; font:var(--label-size) var(--font-label); letter-spacing:.06em; color:#ffd24a; text-shadow:0 0 6px rgba(255,210,74,.45); }
@keyframes tvMq{ to{ transform:translateX(-50%); } }
.tvMarquee:hover .tvMqTrack{ animation-play-state:paused; }
html[data-reduce-motion="true"] .tvMarquee{ white-space:normal; -webkit-mask-image:none; mask-image:none; text-align:center; }
html[data-reduce-motion="true"] .tvMqTrack{ animation:none; display:block; }
html[data-reduce-motion="true"] .tvMqTrack span + span{ display:none; }
html[data-reduce-motion="true"] .tvMqTrack span{ padding:0 6px; line-height:1.7; }
html[data-theme="win98"] .tvMarquee{ border-radius:0; background:#000; }

/* v0.21.2 — REFERRALS / ABOUT: truly clear (the screen's frosted-glass blur is off, so the wallpaper shows sharp) · white marquee */
.app:is([data-view="links"], [data-view="about"]) #stageWrap{ backdrop-filter:none; -webkit-backdrop-filter:none; background:transparent; }
.tvMqTrack span{ color:#fff; text-shadow:0 0 6px rgba(255,255,255,.35); }

/* ==========================================================================
   v0.22 — REFERRALS: the TV stands on a console, the cards are pinned to a
   cork board, a TV-guide strip names the channels, the open slot glows
   ========================================================================== */
.adDesk{ grid-template-rows:auto auto 1fr; grid-template-areas:"tv info" "tv guide" "tv wall"; }
@media (max-width:860px){ .adDesk{ grid-template-rows:none; grid-template-areas:"tv" "info" "guide" "wall"; } }
/* 1 · the console: a low wooden cabinet with two drawers, little feet and a shadow on the floor */
.tvStand{ position:relative; display:block; width:118%; margin:-2px 0 0 -9%; }
.tvStand .top{ display:block; height:calc(var(--tv) * .05); border-radius:3px 3px 0 0;
  background:linear-gradient(#9a6a44, #7a4e30); box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 2px 0 #3a2012; }
.tvStand .front{ display:flex; gap:calc(var(--tv) * .04); height:calc(var(--tv) * .17); padding:calc(var(--tv) * .025) calc(var(--tv) * .05);
  background:repeating-linear-gradient(90deg, #5e361f 0 7px, #55301b 7px 10px, #663c23 10px 16px, #4f2c18 16px 18px);
  box-shadow:inset 0 0 0 3px #3a2012, inset 0 -6px 0 rgba(0,0,0,.25); box-sizing:border-box; }
.tvStand .front i{ flex:1; position:relative; border-radius:2px; background:linear-gradient(#6e4328, #5a341e); box-shadow:inset 0 0 0 2px #2e180c, inset 0 2px 0 rgba(255,255,255,.08); }
.tvStand .front i::after{ content:''; position:absolute; left:50%; top:50%; width:22%; height:12%; min-height:3px; transform:translate(-50%, -50%); border-radius:2px; background:#c9a36a; box-shadow:0 1px 0 #2e180c; }
.tvStand .feet{ display:flex; justify-content:space-between; padding:0 6%; }
.tvStand .feet i{ width:calc(var(--tv) * .05); height:calc(var(--tv) * .045); background:#2e180c; border-radius:0 0 3px 3px; }
.tvStand::after{ content:''; position:absolute; z-index:-1; left:-4%; right:-4%; bottom:calc(var(--tv) * -.035); height:calc(var(--tv) * .08); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%); }
.oldTv{ isolation:isolate; }
/* 2 · the cork board: the cards pinned up like flyers */
.adWall{ align-self:start; justify-self:start; margin:4px 0 0; padding:20px 20px 18px; gap:22px 18px; border-radius:6px; max-width:100%; box-sizing:border-box;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.18) 0 1px, transparent 2px) 0 0 / 9px 11px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 1px, transparent 2px) 0 0 / 13px 7px,
    linear-gradient(135deg, #b98a57, #a2764a 55%, #8f6640);
  border:8px solid #5a341e; box-shadow:inset 0 0 0 2px #3a2012, inset 0 6px 16px rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.45); }
.adWall > .adItem{ position:relative; }
.adWall > .adItem::before{ content:''; position:absolute; z-index:3; left:50%; top:-6px; width:10px; height:10px; margin-left:-5px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, #fff 0 12%, var(--pin, #e2463c) 30%, color-mix(in srgb, var(--pin, #e2463c) 55%, #000) 100%); box-shadow:1px 3px 3px rgba(0,0,0,.45); }
.adWall > .adItem:nth-child(2){ --pin:#f2c94c; } .adWall > .adItem:nth-child(3){ --pin:#4fa3e0; } .adWall > .adItem:nth-child(4){ --pin:#6fcf6f; } .adWall > .adItem:nth-child(5){ --pin:#ffffff; }
.adWall .adCard{ box-shadow:0 6px 12px rgba(0,0,0,.45); }
.adWall .adCard.openSlot{ background:rgba(20,12,8,.55); }
@media (max-width:860px){ .adWall{ justify-self:center; padding:18px 12px 14px; border-width:6px; } }
@media (max-width:400px){ .adWall{ gap:18px 8px; padding:16px 8px 12px; } }
html[data-theme="win98"] .adWall{ border-radius:0; }
/* 4 · the TV guide: the channel list, the one on air lit */
.tvGuide{ grid-area:guide; display:flex; flex-wrap:wrap; gap:4px; margin:2px 0 6px; padding:5px; border-radius:4px; max-width:420px;
  background:#101a6e; border:2px solid #2a3aa8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.4); }
.tgItem{ display:inline-flex; align-items:center; gap:6px; padding:5px 7px; border:0; border-radius:2px; cursor:pointer; background:rgba(255,255,255,.06);
  font:var(--label-size) var(--font-label); letter-spacing:.05em; color:#dfe6ff; }
.tgItem b{ font-weight:400; color:#ffd24a; }
.tgItem:hover, .tgItem:focus-visible{ outline:none; background:rgba(255,255,255,.18); }
.tgItem.on{ background:#ffd24a; color:#101a6e; }
.tgItem.on b{ color:#101a6e; }
.tgItem.open span{ color:#9fe8ff; } .tgItem.open.on span{ color:#101a6e; }
@media (max-width:860px){ .tvGuide{ justify-content:center; margin:0 auto 6px; } }
html[data-theme="win98"] .tvGuide{ border-radius:0; }
/* 5 · the open slot glows now and then */
.adCard.openSlot:not(.current){ animation:slotGlow 7s ease-in-out infinite; }
@keyframes slotGlow{ 0%, 78%, 100%{ box-shadow:none; border-color:rgba(var(--accent-rgb), .8); }
  86%{ box-shadow:0 0 0 2px rgba(var(--accent-rgb), .55), 0 0 22px rgba(var(--accent-rgb), .7); border-color:var(--accent); } }
html[data-reduce-motion="true"] .adCard.openSlot{ animation:none !important; }
@media (max-width:860px){ .tvStand{ width:100%; margin-left:0; } }
.adWall{ padding-top:24px; }

/* ==========================================================================
   v0.23 — REFERRALS: NOW SHOWING is a mini billboard standing on top of the
   cork board (the VISIT button and the TV-guide strip are gone: the TV screen
   is the link)
   ========================================================================== */
.adDesk{ grid-template-rows:minmax(0, 1fr); grid-template-areas:"tv stack"; align-items:center; }
@media (max-width:860px){ .adDesk{ grid-template-rows:none; grid-template-areas:"tv" "stack"; } }
.adStack{ grid-area:stack; display:flex; flex-direction:column; align-items:stretch; justify-self:start; max-height:100%; min-height:0; }
@media (max-width:860px){ .adStack{ justify-self:center; max-height:none; } }
.adStack .adWall{ flex:1 1 auto; min-height:0; margin:0; justify-self:auto; align-self:stretch; }
.billboard #adVisitRow, .tvGuide{ display:none !important; }
/* the billboard: a lit sign with a row of bulbs, on two posts that stand on the board's frame */
.billboard{ position:relative; display:flex; flex-direction:column; align-items:center; margin:0 18px; text-align:center; }
.bbFace{ position:relative; width:100%; box-sizing:border-box; padding:22px 16px 14px; border-radius:4px;
  background:linear-gradient(#1b1e2b, #10121b); border:5px solid #2b2e38;
  box-shadow:inset 0 0 0 2px #0a0b10, inset 0 0 26px rgba(var(--accent-rgb), .18), 0 10px 22px rgba(0,0,0,.5); }
.bbFace::before{ content:''; position:absolute; left:8px; right:8px; top:7px; height:6px;          /* marquee bulbs along the top */
  background:radial-gradient(circle, #ffe9a8 0 2px, rgba(255,210,74,.35) 3px, transparent 4px) 0 0 / 14px 6px repeat-x;
  filter:drop-shadow(0 0 3px rgba(255,210,74,.8)); animation:bbBulbs 1.2s steps(2) infinite; }
@keyframes bbBulbs{ 50%{ background-position:7px 0; } }
.bbFace .nowLabel{ margin:0 0 6px; color:#ffd24a; }
.bbFace #adName{ margin:2px 0 6px; font-size:clamp(13px, 1.7vw, 19px); color:#fff; text-shadow:0 0 10px rgba(var(--accent-rgb), .55); overflow-wrap:anywhere; }
.bbFace #adPerk{ margin:0 !important; font-size:12px; color:#c9cfdf; }
.bbPosts{ display:flex; justify-content:space-between; width:62%; }
.bbPosts i{ width:10px; height:16px; background:linear-gradient(90deg, #6e4328, #4a2a16); box-shadow:inset 0 2px 0 rgba(0,0,0,.35); }
.adInfo.billboard{ text-shadow:none; }
html[data-reduce-motion="true"] .bbFace::before{ animation:none; }
html[data-theme="win98"] .bbFace{ border-radius:0; }
@media (max-width:860px){ .billboard{ margin:0 12px; } }

/* v0.24 — the billboard: centred and as wide as the board, a warm backlit face (hot amber centre fading to
   white, glowing out past its edges), a soft flicker, dark lettering; the line runs as a marquee only if it can't fit */
.billboard{ margin:0; align-self:stretch; }
.bbFace{ padding:16px 18px 14px; border-radius:6px; border:6px solid #23252d; overflow:hidden;
  background:radial-gradient(ellipse 70% 90% at 50% 50%, #ffc56e 0%, #ffe0a6 38%, #fff6e6 72%, #ffffff 100%);
  box-shadow:inset 0 0 0 2px #121318, inset 0 0 18px rgba(255,255,255,.9),
    0 0 18px 4px rgba(255,200,120,.55), 0 0 60px 12px rgba(255,190,110,.28), 0 10px 22px rgba(0,0,0,.5);
  animation:bbFlicker 9s linear infinite; }
.bbFace::before{ content:none; display:none; animation:none; }
.bbFace::after{ content:''; position:absolute; inset:0; pointer-events:none;                      /* faint lightbox diffuser lines */
  background:repeating-linear-gradient(0deg, rgba(120,70,20,.035) 0 2px, transparent 2px 5px); }
@keyframes bbFlicker{ 0%, 41%, 45%, 47%, 100%{ filter:brightness(1); } 42%{ filter:brightness(.86); } 43%{ filter:brightness(1.04); } 46%{ filter:brightness(.92); }
  72%{ filter:brightness(1); } 73%{ filter:brightness(.95); } 74%{ filter:brightness(1); } }
.bbFace .nowLabel{ position:relative; z-index:1; margin:0 0 7px; color:#8a4a12; letter-spacing:.2em; text-shadow:none; }
.bbFace #adName{ position:relative; z-index:1; color:#1c140e; text-shadow:0 1px 0 rgba(255,255,255,.6); letter-spacing:.04em; }
.bbFace #adPerk{ position:relative; z-index:1; color:#3a2a1c; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:clip; }
.bbFace #adPerk.mq{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.bbMq{ display:inline-flex; animation:tvMq 10s linear infinite; }
.bbMq span{ padding-right:44px; }
.bbPosts{ width:58%; }
.bbPosts i{ width:12px; height:14px; }
html[data-reduce-motion="true"] .bbFace{ animation:none; }
html[data-reduce-motion="true"] .bbFace #adPerk{ white-space:normal; -webkit-mask-image:none; mask-image:none; }
html[data-reduce-motion="true"] .bbMq{ animation:none; display:inline; }
html[data-reduce-motion="true"] .bbMq span + span{ display:none; }
html[data-theme="win98"] .bbFace{ border-radius:0; }
.billboard{ contain:inline-size; }   /* its text never widens the stack: the cork board sets the width, the line marquees if it's longer */
.adDesk .adStack .billboard{ align-self:stretch; }

/* ==========================================================================
   v0.25 — REFERRALS as a room: the giant TV is the back wall (canvas, art.js
   'tvroom'); the billboard + cork board hang in an alcove on the right
   ========================================================================== */
.adDesk.tvRoomDesk{ --tvglow:60,70,90; padding:0; gap:0; height:100%; background:#0c0d12;
  grid-template-columns:minmax(0, 1fr) minmax(392px, 36%); grid-template-rows:minmax(0, 1fr); grid-template-areas:"tv stack"; align-items:stretch; }
/* v1.1: mid-size windows: smaller business cards so the TV keeps its room */
@media (min-width:861px) and (max-width:1100px){ .adDesk.tvRoomDesk{ grid-template-columns:minmax(0, 1fr) minmax(352px, 37%); } .alcove{ --ws:10px; --wc:14px; --wf:20px; } .adCard{ width:136px; height:78px; } .adCard b{ font-size:12px; bottom:22px; } }
.tvRoom{ grid-area:tv; position:relative; min-height:0; min-width:0; }
#tvRoomCv{ display:block; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; cursor:pointer; touch-action:manipulation; }
#adScreen{ display:none; }
/* v1.1: site.js lays the ad canvas itself over the room's screen at a whole-number zoom (crisp text) */
.tvRoom #adScreen.crisp{ display:block; position:absolute; z-index:1; pointer-events:none; margin:0; }
/* v1.1: the disclosure ticker under the TV, as real text: Silkscreen, no bigger than the billboard's name */
.roomTicker{ position:absolute; z-index:1; display:flex; align-items:center; overflow:hidden; white-space:nowrap; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.roomTicker[hidden]{ display:none; }
.roomTicker .tickTrack{ display:inline-flex; animation:tvMq 30s linear infinite; }
.roomTicker span{ padding-right:56px; font:var(--tick-size, 12px)/1 var(--font-label); letter-spacing:.04em; color:#fff; text-shadow:0 0 6px rgba(255,255,255,.35); }
html[data-reduce-motion="true"] .roomTicker .tickTrack{ animation:none; }
html[data-reduce-motion="true"] .roomTicker span + span{ display:none; }
.tvRoom .tvVisit{ position:absolute; inset:auto; z-index:2; border-radius:2px; }
.tvRoom .tvVisit span{ right:10px; bottom:10px; }
.alcove{ grid-area:stack; position:relative; min-height:0; display:flex; align-items:center; justify-content:center;
  /* v1.1.3: the billboard + cork board sit in their own room, built like the TV's but about a third as deep:
     ceiling, side walls and floor are the four borders of one box (they meet on the diagonals, like the
     canvas room's corners), the padding box is the back wall */
  --wc:18px; --ws:14px; --wf:26px; --ai:34px;
  padding:calc(var(--ai) + var(--wc) + 12px) calc(12px + var(--ws) + 8px) calc(12px + var(--wf) + 10px) calc(var(--ws) + 8px); }
.alcove::before{ content:''; position:absolute; inset:var(--ai) 12px 12px 0; pointer-events:none; box-sizing:border-box;
  border-style:solid; border-width:var(--wc) var(--ws) var(--wf); border-color:#1b2025 #21272d #353840 #262c33;
  background:linear-gradient(180deg, #14171c, #111318 70%, #16181e);
  box-shadow:0 0 0 1px #0a0b0f, inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 60px rgba(var(--tvglow), .24), 0 0 40px rgba(var(--tvglow), .06);
  transition:box-shadow 1s ease; }
/* the floor gets the same faint boards as the TV room's */
.alcove::after{ content:''; position:absolute; left:0; right:12px; bottom:12px; height:var(--wf); pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.18) 22px 23px);
  clip-path:polygon(0 100%, 100% 100%, calc(100% - var(--ws)) 0, var(--ws) 0); }
.alcove .adWall{ padding:18px 14px 14px; gap:18px 12px; }
.alcove .adStack{ position:relative; z-index:1; max-height:100%; justify-self:auto; }
@media (max-width:860px){
  .adDesk.tvRoomDesk{ height:auto; min-height:100%; grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-template-areas:"tv" "stack"; }
  .tvRoom{ aspect-ratio:1 / .92; }
  .alcove{ --wc:12px; --ws:10px; --wf:18px; --ai:10px; padding:calc(10px + 12px + 12px) calc(8px + 10px + 6px) calc(44px + 18px + 10px) calc(8px + 10px + 6px); }
  .alcove::before{ inset:10px 8px 44px; }
  .alcove::after{ left:8px; right:8px; bottom:44px; }
}

@media (max-width:860px){ .adDesk.tvRoomDesk{ justify-items:stretch; } .tvRoom{ width:100%; justify-self:stretch; } .alcove{ justify-self:stretch; } }

/* ==========================================================================
   v0.26 — rooms: GAMES and ART are the back walls of small pixel rooms (short
   floors); MUSIC is a tabletop seen from above
   ========================================================================== */
.roomFrame{ position:relative; height:100%; --wl:5.5%; --wr:5.5%; --wt:3.5%; --wb:8%; }    /* the back wall's inset: left, right, top, bottom (= the floor) */
.roomShell, .roomFront{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; image-rendering:pixelated; image-rendering:crisp-edges; }
.roomShell{ z-index:0; }
.roomFront{ z-index:5; }
.roomFrame > .bookcase, .roomFrame > .gallery{ position:absolute; left:var(--wl); right:var(--wr); top:var(--wt); bottom:var(--wb); height:auto; z-index:1;
  box-shadow:0 0 0 2px rgba(0,0,0,.55), 0 0 30px rgba(0,0,0,.45); }
.roomFloor{ position:absolute; inset:auto 0 0 0; height:0; z-index:3; pointer-events:none; }
/* GAMES: the TV + console stand on the floor (no longer inside the bookcase), plants in pots on the floor */
.roomFrame > .bookcase{ padding-right:clamp(16px, 5vw, 70px); }
.roomFrame > .gameDeck{ right:9%; bottom:2.2%; z-index:4; filter:drop-shadow(0 10px 8px rgba(0,0,0,.55)); }
.floorPlant{ position:absolute; bottom:0; --px:3.5px; transform-origin:50% 100%; }
.floorPlant.fpA{ left:1.2%; bottom:.6vh; --px:4px; }
.floorPlant.fpB{ left:12%; bottom:1.2vh; }
.floorPlant.fpC{ right:1.8%; bottom:.8vh; --px:3.8px; }
/* (the fronts draw their light as soft colour) */
/* ART: the gallery is the wall */
.roomFrame > .gallery{ padding-top:56px; }
/* phones: no room around the page (not enough width); the TV sits back in the bookcase spot, plants hide */
@media (max-width:860px){
  .roomFrame{ height:auto; min-height:100%; }
  .roomShell, .roomFront, .roomFloor{ display:none; }
  .roomFrame > .bookcase, .roomFrame > .gallery{ position:relative; inset:auto; box-shadow:none; }
  .roomFrame > .gameDeck{ right:50%; bottom:48px; filter:none; }
  .roomFrame > .gallery{ padding-top:56px; }
}
@media (min-width:861px){ #panel-games.active, #panel-art.active{ height:100%; } }

/* MUSIC: a wooden tabletop from above — the player and crate sit on it with shadows, a plant and a mug beside them */
.deck{ position:relative; isolation:isolate; }
.tableTop, .tableFront{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; image-rendering:pixelated; image-rendering:crisp-edges; }
.tableTop{ z-index:-1; }
.tableFront{ z-index:6; }
.deck .deckPlayer{ filter:drop-shadow(16px 20px 12px rgba(0,0,0,.55)); }
.deck .crate{ box-shadow:0 0 0 9px #5a341e, 0 0 0 11px #2e180c, 16px 22px 22px 8px rgba(0,0,0,.5); margin:10px; }
@media (max-width:860px){ .tableFront{ display:none; } .deck .crate{ margin:10px 0; } }
.roomFrame{ --deckW:clamp(190px, 19%, 270px); }
.roomFrame > .gameDeck{ right:13%; }
.floorPlant.fpC{ right:2.2%; }
@media (max-width:860px){
  .roomFrame > .gameDeck{ right:50% !important; transform:translateX(50%); }
  .roomFrame > .bookcase, .roomFrame > .gallery{ min-height:100%; }
  .roomFrame{ display:flex; flex-direction:column; } .roomFrame > .bookcase, .roomFrame > .gallery{ flex:1; }
}

/* ==========================================================================
   v0.28 — clickable candle · gallery light switch · compact settings player ·
   the pixel fox head in the sidebar
   ========================================================================== */
/* the bookcase candle is a button: click to blow it out (smoke) or light it */
button.candle{ padding:0; border:0; background:none; cursor:pointer; display:block; }
button.candle > span{ display:block; }
button.candle:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
button.candle .flame{ transition:opacity .25s, transform .25s; }
button.candle.out .flame{ opacity:0; transform:scale(.3, .2); animation:none; }
button.candle.out .wick{ background:#120a06; }
.candle .smoke{ position:absolute; left:50%; bottom:50px; width:0; height:0; pointer-events:none; }
.candle .smoke i{ position:absolute; left:-2px; bottom:0; width:4px; height:4px; background:rgba(220,220,230,.7); opacity:0; }
.candle.puff .smoke i{ animation:smokeUp 1.8s ease-out forwards; }
.candle.puff .smoke i:nth-child(2){ animation-delay:.18s; } .candle.puff .smoke i:nth-child(3){ animation-delay:.36s; }
@keyframes smokeUp{ 0%{ opacity:.8; transform:translate(0, 0); } 50%{ transform:translate(5px, -22px); } 100%{ opacity:0; transform:translate(-4px, -46px) scale(1.6); } }
/* the gallery light switch, on the art room's left wall */
.roomSwitch{ position:absolute; z-index:7; left:1.6%; top:48%; width:16px; height:26px; padding:0; cursor:pointer;
  border:0; border-radius:2px; background:#d8d2c6; box-shadow:2px 2px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25); }
.roomSwitch i{ position:absolute; left:5px; top:4px; width:6px; height:10px; border-radius:1px; background:#3a3a40; transition:top .12s; }
.roomSwitch i::after{ content:''; position:absolute; left:1px; top:1px; width:4px; height:4px; background:var(--accent); }
.roomSwitch[aria-pressed="false"] i{ top:12px; }
.roomSwitch[aria-pressed="false"] i::after{ top:5px; background:#aaa; }
.roomSwitch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.roomFrame.lightsOff .roomSwitch{ box-shadow:2px 2px 0 rgba(0,0,0,.45), 0 0 8px rgba(255,236,190,.45); }
@media (max-width:860px){ .roomSwitch{ display:none; } }
/* settings: a compact player — one row, then a slim volume */
.setMusicCard .spNow{ gap:8px; margin-bottom:6px; }
.setMusicCard .spDisc{ width:30px; height:30px; }
.setMusicCard .spTrack{ padding:4px 8px; gap:2px; }
.setMusicCard .spTrack small:empty{ display:none; }
.setMusicCard .setPlayer{ margin:0; gap:4px; flex:none; }
.setMusicCard .spBtn{ width:24px; height:24px; }
.setMusicCard .spBtn.spMain{ width:28px; height:28px; }
.setMusicCard .spBtn i{ transform:translate(-50%, -50%) scale(.8); }
.setMusicCard .spVol{ margin:0; gap:8px; }
.setMusicCard .spVol label{ font-size:10px; }
/* the fox head logo */
.brandMark canvas{ width:24px; height:auto; }
button.candle:focus:not(:focus-visible){ outline:none; box-shadow:none; }

/* v0.29 — the domain on the WALLPAPER bar (right end), faint */
.wpBar .wpMark{ margin-left:auto; font:var(--label-size) var(--font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.28; }
@media (max-width:560px){ .wpBar .wpMark{ display:none; } }
/* the cashcat games' corner mark lives in games/arcade.js */

/* ==========================================================================
   v0.30 — GAMES: the fox perched on the succulent + its speech bubble
   ========================================================================== */
.caseItem.foxPerch{ position:relative; }
.shelfFox{ position:absolute; z-index:4; right:-6px; bottom:40px; width:calc(16 * 3px); pointer-events:none; }   /* sits in the succulent's rosette */
.shelfFox canvas{ display:block; width:calc(16 * 3px); height:calc(10 * 3px); image-rendering:pixelated; image-rendering:crisp-edges; pointer-events:auto; cursor:pointer;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.shelfFox.hop canvas{ animation:foxHop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes foxHop{ 0%, 100%{ transform:translateY(0); } 40%{ transform:translateY(-10px); } }
/* the speech bubble: pixel box over the cartridges, its tail pointing back at the fox */
.foxSay{ position:absolute; left:calc(100% + 14px); bottom:calc(100% + 58px); white-space:nowrap; padding:6px 9px 5px; pointer-events:none;
  font:var(--label-size) var(--font-label); letter-spacing:.08em; color:#0b0508; background:#fbf4ec;
  box-shadow:0 0 0 2px #0b0508, 3px 3px 0 2px rgba(0,0,0,.35); animation:sayBob 2.4s ease-in-out infinite; }
/* a stepped pixel tail: three little blocks stepping down from the bubble to the fox */
.foxSay::before, .foxSay::after{ content:''; position:absolute; background:#fbf4ec; box-shadow:0 0 0 2px #0b0508; }
.foxSay::before{ left:4px; top:calc(100% + 10px); width:8px; height:8px; }
.foxSay::after{ left:-6px; top:calc(100% + 28px); width:6px; height:6px; box-shadow:0 0 0 2px #0b0508, -11px 16px 0 -1px #fbf4ec, -11px 16px 0 1px #0b0508; }
.foxSay span::after{ content:'_'; animation:sayCaret 1s steps(1) infinite; }
@keyframes sayBob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@keyframes sayCaret{ 50%{ opacity:0; } }
html[data-reduce-motion="true"] .foxSay, html[data-reduce-motion="true"] .foxSay span::after, html[data-reduce-motion="true"] .shelfFox.hop canvas{ animation:none; }
html[data-theme="win98"] .foxSay{ font-family:var(--font-mono); letter-spacing:0; }