/* =========================================================================
   Arcade console v2 (Oct 2026) — a more realistic 16-bit console.
   Glossy black plastic body, a raised ring round the cartridge slot with
   dust flaps, ribbed vents, gold "16-BIT" print, a volume slider, RESET and
   POWER with a red LED, a front lip with two controller ports, a headphone
   socket and a pad cable running off the front. Original design, no third-
   party marks. Overrides the console parts of videos-v1.css / arcade-v1.css.
   ========================================================================= */
.console--v2{
  --plastic-hi:#2f2f33;--plastic:#151517;--plastic-lo:#0a0a0b;
  position:relative;display:block;overflow:visible;border-radius:16px 16px 12px 12px;
  background:none;box-shadow:none;margin-bottom:18px}
.console--v2 .console__body{
  position:relative;display:flex;align-items:stretch;border-radius:16px 16px 6px 6px;
  background:
    radial-gradient(140% 120% at 30% -20%,rgba(255,255,255,.10),transparent 55%),
    linear-gradient(180deg,var(--plastic-hi),var(--plastic) 38%,var(--plastic-lo));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.6),
    inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(255,255,255,.04)}

/* ---- left: the raised ring and the slot ----------------------------- */
.console--v2 .console__top{
  position:relative;flex:1 1 58%;display:flex;align-items:center;justify-content:center;
  min-height:122px;padding:30px 22px 20px;background:none}
.console--v2 .console__ring{
  position:absolute;left:50%;top:54%;width:min(92%,460px);aspect-ratio:2.9/1;transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(closest-side,transparent 70%,rgba(255,255,255,.08) 71%,transparent 74%),
    repeating-radial-gradient(closest-side,#1b1b1e 0 7px,#232327 7px 9px,#161618 9px 11px),
    radial-gradient(closest-side,#202024,#0f0f11);
  box-shadow:0 2px 0 rgba(255,255,255,.09),0 -2px 0 rgba(0,0,0,.6),inset 0 6px 14px rgba(0,0,0,.65),inset 0 -2px 4px rgba(255,255,255,.06)}
.console--v2 .console__slot{
  position:relative;z-index:1;width:min(70%,360px);height:22px;padding:0;border-radius:5px;overflow:visible;
  background:linear-gradient(180deg,#020202,#0b0b0c);
  box-shadow:inset 0 3px 6px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.8)}
.console--v2 .console__flap{position:absolute;top:2px;bottom:2px;width:50%;background:linear-gradient(180deg,#1d1d20,#0e0e10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:transform .3s,opacity .3s}
.console--v2 .console__flap--l{left:2px;border-radius:3px 0 0 3px}
.console--v2 .console__flap--r{right:2px;border-radius:0 3px 3px 0}
.console--v2:has(.console__cart.is-in) .console__flap{opacity:0}

/* the cartridge: stands up out of the slot; sinks in when pushed */
.console--v2 .console__cart{
  position:absolute;left:50%;bottom:6px;width:94%;height:78px;padding:0 12px 8px;gap:10px;align-items:center;
  transform:translate(-50%,-18px);border-radius:6px 6px 2px 2px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.07),transparent 8%,transparent 92%,rgba(0,0,0,.25)),
    linear-gradient(180deg,#3b3b3f,#2a2a2e 55%,#1f1f22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6),0 8px 10px -6px rgba(0,0,0,.8);
  transition:transform .4s cubic-bezier(.3,.7,.2,1)}
.console--v2 .console__cart.is-in{transform:translate(-50%,6px)}
.console--v2 .console__cart:not(.is-in){transform:translate(-50%,-18px)}
.console--v2 .console__cart-grip{position:absolute;left:8px;right:8px;top:6px;height:9px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#1a1a1d 0 3px,#323236 3px 5px);opacity:.9}
.console--v2 .console__cart-art{height:46px;margin-top:10px;border-radius:2px}
.console--v2 .console__cart-label{height:46px;margin-top:10px;border-radius:2px;
  background:linear-gradient(135deg,#f6f1e2,#e2dac2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

/* ---- right: vents, print, controls --------------------------------- */
.console--v2 .console__deck{
  position:relative;flex:1 1 42%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:10px 14px;
  padding:16px 18px 14px 16px;border-left:1px solid rgba(0,0,0,.75);box-shadow:inset 1px 0 0 rgba(255,255,255,.05)}
.console--v2 .console__vents{grid-column:1/-1;height:26px;border-radius:4px;
  background:repeating-linear-gradient(90deg,#060607 0 4px,#1f1f22 4px 6px,#2a2a2e 6px 7px,#121214 7px 9px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07)}
.console--v2 .console__brand{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.console--v2 .console__engrave{flex:none;width:96px;height:22px}
.console--v2 .console__bits{
  font:900 italic clamp(15px,1.9vw,22px)/1 'Arial Black',Impact,Helvetica Neue,Arial,sans-serif;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff1b8,#e0b54d 45%,#9a6b1c 55%,#e8c461);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9))}
.console--v2 .console__tag{color:#8e8e97;font:700 8px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.32em}
.console--v2 .console__front{
  display:flex;align-items:center;gap:10px;padding:0;border:0;box-shadow:none;flex-wrap:nowrap;justify-content:flex-end}
.console--v2 .console__vol{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;margin-right:4px}
.console--v2 .console__vol::before{content:"";display:block;width:46px;height:8px;border-radius:4px;background:#050506;
  box-shadow:inset 0 2px 3px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.08)}
.console--v2 .console__vol i{position:absolute;top:-3px;left:28px;width:12px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,#58585f,#2a2a2f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.8)}
.console--v2 .console__vol em{font:700 7px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.24em;color:#7d7d86;font-style:normal}
.console--v2 .console__key.btn{
  height:34px;min-height:34px;padding:0 12px;border-radius:5px;border:0;gap:7px;
  font:800 9px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.2em;color:#cfcfd6;
  background:linear-gradient(180deg,#3a3a40,#232327 60%,#1a1a1d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 0 #050506,0 5px 6px rgba(0,0,0,.6);
  transition:transform .08s,box-shadow .08s}
.console--v2 .console__key.btn:active,.console--v2 .console__key.btn.is-latched{
  transform:translateY(2px);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 #050506,0 2px 3px rgba(0,0,0,.5)}
.console--v2 #gameReset{color:#f2f2f6;background:linear-gradient(180deg,#5a1f1a,#3a1310)}
.console--v2 .led{width:8px;height:8px}

/* ---- the front lip: ports, headphones, model print, cable ------------ */
.console--v2 .console__lip{
  position:relative;display:flex;align-items:center;gap:14px;height:30px;margin:0 10px;padding:0 16px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#0d0d0f,#1a1a1d 40%,#0b0b0c);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 10px 16px -8px rgba(0,0,0,.85)}
.console--v2 .console__port{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:16px;
  clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:#030303;box-shadow:inset 0 0 0 2px #26262a}
.console--v2 .console__port b{position:absolute;top:-1px;left:-12px;color:#6c6c74;font:700 8px/1 Helvetica Neue,Arial,sans-serif}
.console--v2 .console__port::after{content:"";width:24px;height:6px;background:radial-gradient(circle,#a49a7a 0 1px,transparent 1.5px) 0 0/5px 3px}
.console--v2 .console__phones{width:10px;height:10px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 2px #2b2b2f}
.console--v2 .console__lip-text{margin-left:auto;color:#5f5f68;font:700 7px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.3em}
.console--v2 .console__cable{position:absolute;left:46px;bottom:-26px;width:120px;height:30px;pointer-events:none;
  border:4px solid #0b0b0c;border-top:0;border-right:0;border-radius:0 0 0 28px;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.5))}
.console--v2 .console__cable::before{content:"";position:absolute;left:-9px;top:-10px;width:14px;height:12px;border-radius:3px;background:#1d1d20;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}

@media (max-width:760px){
  .console--v2 .console__body{flex-direction:column}
  .console--v2 .console__deck{border-left:0;border-top:1px solid rgba(0,0,0,.75);grid-template-columns:1fr}
  .console--v2 .console__front{justify-content:space-between}
  .console--v2 .console__vol{display:none}
  .console--v2 .console__lip-text{display:none}
}
.console--v2 .console__engrave{filter:brightness(2.2) contrast(1.1)}

/* v6: the how-to line — 1 cartridge in, 2 power on — the step you're on lights up */
.console-guide{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:18px auto 10px;padding:0 16px;
  font:800 13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#8a8f98;text-align:center}
.console-guide__step{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid currentColor;border-radius:999px;opacity:.55;transition:opacity .2s,color .2s,background .2s}
.console-guide__step b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:currentColor;color:#111;font-size:11px}
.console-guide__arrow{opacity:.5}
.console-guide[data-at="1"] [data-step="1"],.console-guide[data-at="2"] [data-step="2"]{opacity:1;color:#ffcf3a;background:rgba(255,207,58,.08);animation:guide-pulse 1.2s ease-in-out infinite}
.console-guide[data-at="2"] [data-step="1"]{opacity:.45;text-decoration:line-through}
.console-guide[data-at="done"]{visibility:hidden}
@keyframes guide-pulse{50%{box-shadow:0 0 0 6px rgba(255,207,58,.15)}}
.console__cart.is-hint{animation:cart-hint 1.4s ease-in-out infinite}
@keyframes cart-hint{50%{filter:drop-shadow(0 0 10px rgba(255,207,58,.85))}}
#gamePower.is-hint{animation:power-hint 1.1s ease-in-out infinite}
@keyframes power-hint{50%{box-shadow:0 0 0 4px rgba(255,207,58,.5),0 0 18px rgba(255,207,58,.6)}}
@media (prefers-reduced-motion:reduce){.console-guide__step,.console__cart.is-hint,#gamePower.is-hint{animation:none!important}}
.console-guide__step{background:rgba(12,12,14,.86)!important;color:#a7adb6;border-color:rgba(255,255,255,.18);opacity:.8;text-shadow:none}
.console-guide[data-at="1"] [data-step="1"],.console-guide[data-at="2"] [data-step="2"]{color:#ffcf3a;border-color:#ffcf3a;opacity:1}
.console-guide__arrow{color:#2b2b30;opacity:.8}
.console-guide__step b{background:#a7adb6!important;color:#111!important}
.console-guide[data-at="1"] [data-step="1"] b,.console-guide[data-at="2"] [data-step="2"] b{background:#ffcf3a!important}
