/* ============================================================
   Gaming page (gaming.html): the cartridge shelf.
   A wood-panelled basement: CRT + console on the left, shelf on the
   right. Games are cartridges with their covers as labels, emulator
   systems are blank carts with masking tape, channels are VHS tapes.
   Single committed look; does not follow the light/dark toggle.
   ============================================================ */
:root{
  color-scheme:dark;
  --xp:Tahoma,"Segoe UI",Verdana,sans-serif; --px:"Press Start 2P",ui-monospace,monospace; --marker:"Permanent Marker","Comic Sans MS",cursive;
  --cream:#f1e3c8; --yellow:#ffd400; --plank:#2a170b; --plastic:#6b6c72;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;font:15px/1.5 var(--xp);color:var(--cream);background:#3f2715;
  background-image:
    radial-gradient(60% 50% at 30% 25%,rgba(255,220,160,.16),transparent 70%),
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg,#4a2e1a 0 46px,#3f2715 46px 48px,#523420 48px 94px,#3a2313 94px 96px);
  background-attachment:fixed}
a{color:var(--yellow)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;justify-content:space-between;padding:8px 24px;background:#1b0f06;border-bottom:6px solid var(--plank);box-shadow:0 6px 10px rgba(0,0,0,.5)}
.strip .brand{font:12px/1 var(--px);color:#c9b48f;text-decoration:none;letter-spacing:.06em}
.strip .brand b{color:var(--yellow);font-weight:400}
.strip nav{display:flex;flex-wrap:wrap;gap:0 18px}
.strip nav a{font:13px/1 var(--xp);font-weight:700;color:var(--cream);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.strip nav a:hover{color:var(--yellow)}

.room{max-width:1220px;margin:0 auto;padding:34px 24px 60px;display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:40px;align-items:start}
.set{position:sticky;top:20px}

/* CRT */
.tv{position:relative;z-index:1;background:linear-gradient(#2b2b2e,#151517);border-radius:26px;padding:26px 26px 54px;box-shadow:0 20px 34px rgba(0,0,0,.6),inset 0 2px 0 #49494d}
.glass{aspect-ratio:4/3;border-radius:28px/22px;overflow:hidden;position:relative;background:#000;box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.glass img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1) contrast(1.05)}
.glass img:not([src]){visibility:hidden}
.glass iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.glass::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.65))}
.glass.live::after{display:none}
.glass.static img{opacity:0}
.glass.static{background:repeating-radial-gradient(circle at 30% 40%,#777 0 1px,#111 1px 3px)}
.osd{position:absolute;left:0;right:0;bottom:14%;text-align:center;font:14px/1.5 var(--px);color:#fff;text-shadow:2px 2px 0 #000;z-index:1}
.blink{animation:blink 1.1s steps(1) infinite;color:var(--yellow)}
@keyframes blink{50%{opacity:0}}
.ch{position:absolute;right:16%;top:7%;font:16px/1 var(--px);color:#7dff7d;text-shadow:2px 2px 0 #000;z-index:1}
.knobs{position:absolute;left:26px;right:26px;bottom:14px;display:flex;align-items:center;gap:10px}
.knobs i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#77777c,#2a2a2e);display:block}
.knobs span{margin-left:auto;font:700 11px/1 var(--xp);letter-spacing:.2em;color:#9a9aa0}

/* console */
.console{margin:30px auto 0;width:min(360px,100%);height:96px;border-radius:18px 18px 26px 26px;background:linear-gradient(#5b5c62,#2e2f33);position:relative;box-shadow:0 14px 20px rgba(0,0,0,.55)}
.console .slot{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:150px;height:16px;border-radius:4px;background:#0c0c0e;box-shadow:inset 0 2px 4px #000}
.console .pw{position:absolute;left:34px;bottom:18px;width:46px;height:18px;border-radius:4px;background:linear-gradient(#77787e,#45464b)}
.console .led{position:absolute;left:96px;bottom:24px;width:8px;height:8px;border-radius:50%;background:#4a1310}
.console.on .led{background:#e2271e;box-shadow:0 0 8px #ff3b2f}
.console .brandmark{position:absolute;right:30px;bottom:18px;font:9px/1 var(--px);color:#c6c7cc}
.console .incart{position:absolute;left:50%;top:-64px;transform:translateX(-50%);width:130px;opacity:0;transition:top .5s cubic-bezier(.5,0,.2,1),opacity .2s}
.console.on .incart{top:-28px;opacity:1}

.play{margin-top:20px;text-align:center}
.play h2{margin:0;font:14px/1.5 var(--px);color:var(--yellow);text-shadow:2px 2px 0 #000}
.play p{margin:10px auto 16px;max-width:420px;font:14px/1.5 var(--xp)}
.play a{display:inline-block;font:13px/1 var(--px);color:#1b1203;background:var(--yellow);padding:14px 18px;border:3px solid #000;box-shadow:4px 4px 0 #000;text-decoration:none}
.play a:hover{background:#ffe45c}
.play a:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}

/* shelf */
.intro{margin-bottom:26px}
.intro .eyebrow{margin:0 0 10px;font:16px/1.2 var(--marker);color:#efe3b8}
.intro h1{margin:0 0 12px;font:clamp(22px,3.2vw,32px)/1.25 var(--px);color:var(--yellow);text-shadow:4px 4px 0 #000}
.intro p:last-child{margin:0;max-width:56ch;font-size:16px}
.shelf h2{margin:0 0 4px;font:16px/1.4 var(--px);color:var(--yellow);text-shadow:3px 3px 0 #000}
.shelf .lead{margin:0 0 16px;font:14px/1.45 var(--xp)}
.plank{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;padding:0 16px;min-height:120px;border-bottom:18px solid var(--plank);box-shadow:0 14px 16px -10px rgba(0,0,0,.7);margin-bottom:38px}

.cart{width:150px;cursor:pointer;background:none;border:0;padding:0;display:block;color:inherit;font:inherit}
.cart svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5));transition:transform .15s}
.cart:hover svg,.cart:focus-visible svg{transform:translateY(-6px)}
.cart .lbl{display:block;margin:6px 0 4px;font:700 13px/1.25 var(--xp);text-align:center}
.cart .badge{display:block;font:15px/1.1 var(--marker);color:#efe3b8;text-align:center;transform:rotate(-2deg)}
.cart[aria-pressed="true"] .lbl{color:var(--yellow)}

.blanks{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0 0 2px}
.blanks li{width:96px;height:78px;background:linear-gradient(#77787d,#55565b);border-radius:8px 8px 4px 4px;position:relative;display:grid;place-items:end center;padding:0 4px 8px;box-shadow:0 6px 8px rgba(0,0,0,.5)}
.blanks span{background:#efe3b8;transform:rotate(-3deg);padding:3px 6px;font:13px/1.1 var(--marker);color:#333;box-shadow:0 1px 2px rgba(0,0,0,.4);text-align:center}
.blanks em{position:absolute;top:6px;right:6px;font:7px/1 var(--px);color:var(--yellow);font-style:normal}

.tapes{gap:16px;padding-bottom:0}
.vhs{width:230px;height:128px;border-radius:6px;background:linear-gradient(#1b1b1d,#0b0b0c);position:relative;box-shadow:0 8px 12px rgba(0,0,0,.6);text-decoration:none;display:block;border:0;padding:0;cursor:pointer;font:inherit;text-align:left;transition:transform .15s}
.vhs:hover,.vhs:focus-visible{transform:translateY(-4px)}
.vhs .lab{position:absolute;left:12px;right:12px;top:12px;min-height:46px;background:#f2ecdc;border-radius:2px;padding:6px 8px;font:15px/1.05 var(--marker);color:#222;overflow:hidden}
.vhs .lab small{display:block;font:700 10px/1.2 var(--xp);letter-spacing:.12em;margin-top:5px;color:#fff;padding:2px 5px;width:max-content;max-width:100%;background:#555}
.vhs .win{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:120px;height:32px;border-radius:4px;background:#2b2b2e;display:flex;justify-content:space-between;align-items:center;padding:0 12px}
.vhs .win i{width:22px;height:22px;border-radius:50%;background:radial-gradient(#5a5a5e 30%,#111 34%,#111 60%,#3a3a3e 62%)}
.vhs.here .win i{animation:spin 2.4s linear infinite paused}
.vhs.here[aria-pressed="true"] .win i{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:900px){
  /* phone/tablet: intro first, then the TV, then the shelves */
  .room{display:flex;flex-direction:column;gap:28px;padding:20px 16px 48px}
  .shelf{display:contents}
  .intro{order:0;margin-bottom:0}
  .set{order:1;position:static;max-width:520px;width:100%;margin:0 auto}
  .shelf section{order:2}
}
@media (max-width:520px){
  .strip{padding:6px 16px}
  .tv{padding:16px 16px 44px;border-radius:20px}
  .knobs{left:16px;right:16px;bottom:10px}
  .osd{font-size:11px}
  .ch{font-size:12px}
  .plank{padding:0 6px;gap:14px}
  .cart{width:calc(50% - 7px)}
  .vhs{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}