/* ═══════════════════════════════════════════════════════════════════════════
   A Nintendo Game Boy (DMG-01), drawn to scale.
   One unit `--u` is one millimetre of the real console (90 × 148 mm), so every
   measurement below is the real thing's, taken from a straight-on photo.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Jost';       font-weight: 700; font-style: italic; src: url('../assets/fonts/Jost-BoldItalic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka';    font-weight: 700; src: url('../assets/fonts/Fredoka.woff2') format('woff2');    font-display: swap; }
@font-face { font-family: 'Jost';       font-weight: 500; src: url('../assets/fonts/Jost.woff2') format('woff2');       font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

:root {
  --pad: clamp(22px, 5vh, 60px);
  --hint-h: 70px;
  --vh: 100vh;
  --u-fit: min(calc((100vw - 2 * var(--pad)) / 93), calc((var(--vh) - 2 * var(--pad) - var(--hint-h)) / 148), 5.2px);
  --u: max(var(--u-fit), 2.4px);
  --blue: #3f40a6;               /* the logo / label ink */
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
@media (max-width: 600px) { :root { --pad: 24px; --hint-h: 76px; } }
@media (max-height: 600px) { :root { --pad: 18px; --hint-h: 56px; } }

/* touch-action: manipulation keeps taps fast and stops the double-tap page zoom of
   mobile Safari, everywhere on the page and not only on the console. */
html { height: 100%; touch-action: manipulation; }
body {
  margin: 0;
  touch-action: manipulation;
  /* Nothing on the page is meant to be copied (the screen is a canvas). Without
     this, a finger sliding off a control starts a text or image selection on iOS.
     Safari still needs the -webkit- prefix. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  min-height: 100%;
  background: #4d3525;
  color: #ddd;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* The lighting and room detail are baked into one responsive WebP. No scene
   animation, parallax, WebGL, live blur, or additional JavaScript frame loop. */
.room { position: fixed; inset: 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
.room img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-user-drag: none; }
.stage {
  position: relative;
  min-height: var(--vh);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  padding-top: max(var(--pad), env(safe-area-inset-top));
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
}

/* ---------- accessibility helpers ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -100px; padding: 8px 12px; background: #fff; color: #000; border-radius: 6px; z-index: 100; }
.skip:focus { top: 8px; }
.gameboy button:focus-visible { outline: 2px solid #ffd54a; outline-offset: 3px; }
.noscript { text-align: center; padding: 1em; }

/* ---------- the console ---------- */
.gameboy {
  position: relative;
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 148);
  flex: none;
  font-family: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.gameboy > * { position: absolute; }
.gameboy button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }

/* shell body (SVG so the big superelliptical corner is exact and casts a real shadow) */
.shell {
  left: 0; top: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(calc(var(--u) * .45) calc(var(--u) * .65) calc(var(--u) * .2) rgba(37, 24, 15, .6))
          drop-shadow(calc(var(--u) * 2.4) calc(var(--u) * 3.8) calc(var(--u) * 2.6) rgba(30, 18, 10, .5));
}
.sheen {
  inset: 0; pointer-events: none;
  clip-path: url(#shell-clip);
  background:
    radial-gradient(95% 55% at 28% 6%, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the groove across the top of the face */
.groove {
  left: 0; right: 0; top: calc(var(--u) * 5.6); height: calc(var(--u) * .45);
  background: #a29e98;
  box-shadow: 0 calc(var(--u) * .3) 0 rgba(255, 255, 255, .5);
}

/* power switch: pokes up over the top edge; slides right when on */
.power {
  left: calc(var(--u) * 14.5); top: calc(var(--u) * -1.6);
  width: calc(var(--u) * 7.5); height: calc(var(--u) * 2.6);
  border: 0; padding: 0; cursor: pointer;
  border-radius: calc(var(--u) * .6) calc(var(--u) * .6) 0 0;
  background: linear-gradient(#dad6d0, #b9b5af);
  box-shadow: inset 0 calc(var(--u) * .25) 0 rgba(255, 255, 255, .6), inset calc(var(--u) * -.25) 0 0 rgba(0, 0, 0, .1);
  transition: transform .12s ease;
}
.power::before {
  content: ''; position: absolute; left: 24%; right: 24%; top: 26%; height: 36%;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 13%, transparent 13% 34%);
}
.power.off { transform: translateX(calc(var(--u) * -3.2)); }

/* contrast (left) and volume (right) thumb-wheels */
.dial {
  width: calc(var(--u) * 2.1); border: 0; padding: 0; cursor: pointer;
  background: repeating-linear-gradient(180deg, #a19c96 0, #a19c96 calc(var(--u) * .35), #5f5b56 calc(var(--u) * .35), #5f5b56 calc(var(--u) * .85));
  transition: background-position .3s ease;
}
.dial.spin { background-position: 0 calc(var(--u) * .85); }
.dial-contrast {
  left: calc(var(--u) * -1.35); top: calc(var(--u) * 37); height: calc(var(--u) * 12);
  border-radius: calc(var(--u) * .6) 0 0 calc(var(--u) * .6);
  box-shadow: inset calc(var(--u) * -.45) 0 calc(var(--u) * .4) rgba(0, 0, 0, .4);
}
.dial-volume {
  right: calc(var(--u) * -1.35); top: calc(var(--u) * 50); height: calc(var(--u) * 13);
  border-radius: 0 calc(var(--u) * .6) calc(var(--u) * .6) 0;
  box-shadow: inset calc(var(--u) * .45) 0 calc(var(--u) * .4) rgba(0, 0, 0, .4);
}
.gameboy.muted .dial-volume { filter: brightness(.8); }

/* ---------- screen lens ---------- */
.bezel {
  left: calc(var(--u) * 7.5); top: calc(var(--u) * 12.2);
  width: calc(var(--u) * 76.3); height: calc(var(--u) * 57.6);
  border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 6.5) calc(var(--u) * 6.5);
  background: linear-gradient(168deg, #838491 0%, #737483 45%, #666776 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * .2) rgba(255, 255, 255, .07),
    inset 0 calc(var(--u) * .5) calc(var(--u) * .8) rgba(0, 0, 0, .28),
    0 0 0 calc(var(--u) * .12) rgba(0, 0, 0, .2);
}
.bezel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .045) 38%, rgba(255, 255, 255, 0) 39%);
}
.bezel > * { position: absolute; }

.stripe {
  top: calc(var(--u) * 2.4); height: calc(var(--u) * .45);
  background: #c43d9b; border-radius: calc(var(--u) * .25);
}
.stripe::after {
  content: ''; position: absolute; left: calc(var(--u) * -.9); top: calc(var(--u) * 1.5);
  width: 100%; height: 100%; background: #3d3fab; border-radius: inherit;
}
.stripe-l { left: calc(var(--u) * 2.6); width: calc(var(--u) * 17); }
.stripe-r { left: calc(var(--u) * 64.6); width: calc(var(--u) * 7.2); }
.bezel-text {
  left: calc(var(--u) * 22.5); top: calc(var(--u) * 1.9); width: calc(var(--u) * 42);
  text-align: center; white-space: nowrap;
  font-weight: 500; font-size: calc(var(--u) * 2.05); line-height: 1; letter-spacing: .1em;
  color: #dedee6;
}
.battery { left: calc(var(--u) * 1.9); top: calc(var(--u) * 21.6); width: calc(var(--u) * 8.8); text-align: center; }
.led {
  display: block; margin: 0 0 0 calc(var(--u) * 1.4); width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5c2a31, #2a1216 70%);
  box-shadow: 0 0 0 calc(var(--u) * .2) rgba(0, 0, 0, .35), inset 0 0 calc(var(--u) * .3) rgba(0, 0, 0, .5);
  transition: background .25s, box-shadow .25s;
}
.led.on {
  background: radial-gradient(circle at 40% 35%, #ff9088, #ff2219 60%, #c20000);
  box-shadow: 0 0 calc(var(--u) * 1.5) rgba(255, 50, 40, .85), 0 0 0 calc(var(--u) * .2) rgba(0, 0, 0, .35);
}
.battery-label { display: block; margin-top: calc(var(--u) * 1.9); font-weight: 500; font-size: calc(var(--u) * 1.75); line-height: 1; letter-spacing: .04em; color: #e8e8ee; }

/* the LCD window: 48 × 43.4 mm including its dark rim; the live area is 10:9 like the panel */
.lcd {
  left: calc(var(--u) * 14.4); top: calc(var(--u) * 7.7);
  width: calc(var(--u) * 48); height: calc(var(--u) * 43.4);
  background: var(--lcd-off, #a6b53a);
  border: calc(var(--u) * .8) solid #101115;
  border-radius: calc(var(--u) * .3);
  overflow: hidden; z-index: 2; cursor: zoom-in;
  touch-action: manipulation;   /* our own double-tap zoom, not Safari's */
  transform-origin: 50% 50%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lcd canvas { display: block; width: 100%; height: 100%; transition: opacity .35s ease; }
.lcd.off canvas { opacity: 0; }
.lcd .glass {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow:
    inset calc(var(--u) * .7) calc(var(--u) * .7) calc(var(--u) * 1.4) rgba(0, 0, 0, .42),
    inset calc(var(--u) * -.3) calc(var(--u) * -.3) calc(var(--u) * .6) rgba(0, 0, 0, .18);
  background: linear-gradient(118deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 34%, rgba(255, 255, 255, 0) 35%);
}
.lcd.zoom { z-index: 20; cursor: zoom-out; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 7) rgba(0, 0, 0, .65); }

/* ---------- logo ---------- */
.logo {
  left: calc(var(--u) * 6.6); top: calc(var(--u) * 72.9);
  display: flex; align-items: baseline; white-space: nowrap; line-height: 1;
  color: var(--blue); pointer-events: none;
}
.brand { font-family: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', sans-serif; font-weight: 700; font-size: calc(var(--u) * 5); letter-spacing: -.01em; margin-right: calc(var(--u) * 1.2); }
.model { font-family: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif; font-weight: 700; font-style: italic; font-size: calc(var(--u) * 7.9); display: inline-block; letter-spacing: -.005em; }
.tm { font-weight: 500; font-size: calc(var(--u) * 1.5); margin-left: calc(var(--u) * .6); align-self: flex-end; margin-bottom: calc(var(--u) * .25); letter-spacing: .05em; }

/* ---------- D-pad ---------- */
.dpad-wrap { left: calc(var(--u) * 7.1); top: calc(var(--u) * 90.4); width: calc(var(--u) * 23.5); height: calc(var(--u) * 23.5); }
.tri { position: absolute; width: 0; height: 0; border: calc(var(--u) * .95) solid transparent; }
.tri-up    { left: 50%; top: calc(var(--u) * -2.3);    margin-left: calc(var(--u) * -.95); border-top: 0;    border-bottom-color: #aeaaa4; }
.tri-down  { left: 50%; bottom: calc(var(--u) * -2.3); margin-left: calc(var(--u) * -.95); border-bottom: 0; border-top-color: #aeaaa4; }
.tri-left  { top: 50%;  left: calc(var(--u) * -2.3);   margin-top: calc(var(--u) * -.95);  border-left: 0;   border-right-color: #aeaaa4; }
.tri-right { top: 50%;  right: calc(var(--u) * -2.3);  margin-top: calc(var(--u) * -.95);  border-right: 0;  border-left-color: #aeaaa4; }
.dpad {
  --rock-x: 0deg; --rock-y: 0deg; --cap-y: -.65;
  position: absolute; inset: calc(var(--u) * -1.6); touch-action: none; cursor: pointer;
}
.dpad svg {
  position: absolute; inset: calc(var(--u) * 1.6); width: calc(var(--u) * 23.5); height: calc(var(--u) * 23.5);
  overflow: visible; pointer-events: none;
}
.dpad-socket {
  fill: #181617; stroke: #302a28; stroke-width: 2.7; stroke-linejoin: round;
  transform: translateY(calc(var(--u) * .45));
  filter: drop-shadow(0 calc(var(--u) * .35) calc(var(--u) * .25) rgba(0, 0, 0, .4));
}
.dpad-cap {
  transform-origin: 50% 50%;
  transform: perspective(calc(var(--u) * 75)) translateY(calc(var(--u) * var(--cap-y))) rotateX(var(--rock-x)) rotateY(var(--rock-y));
  filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .18) rgba(0, 0, 0, .5));
  transition: transform 130ms cubic-bezier(.2, .8, .25, 1);
}
.dpad[data-vertical="up"] { --rock-x: 14deg; }
.dpad[data-vertical="down"] { --rock-x: -14deg; }
.dpad[data-horizontal="left"] { --rock-y: -14deg; }
.dpad[data-horizontal="right"] { --rock-y: 14deg; }
.dpad[data-dir]:not([data-dir=""]) { --cap-y: .05; }
.dpad[data-dir]:not([data-dir=""]) .dpad-cap { transition-duration: 65ms; }
.dpad-pressure { opacity: 0; transform-origin: 50% 50%; transition: opacity 100ms ease; }
.dpad[data-dir]:not([data-dir=""]) .dpad-pressure { opacity: .55; }
.dpad[data-dir="down"] .dpad-pressure { transform: rotate(180deg); }
.dpad[data-dir="left"] .dpad-pressure { transform: rotate(-90deg); }
.dpad[data-dir="right"] .dpad-pressure { transform: rotate(90deg); }
.dpad-hit { position: absolute; width: 33%; height: 33%; border: 0; border-radius: calc(var(--u) * .6); padding: 0; background: none; cursor: pointer; }
.hit-up    { left: 33.5%; top: 0; }
.hit-down  { left: 33.5%; bottom: 0; }
.hit-left  { left: 0; top: 33.5%; }
.hit-right { right: 0; top: 33.5%; }

/* ---------- A / B ---------- */
.ab { left: calc(var(--u) * 56); top: calc(var(--u) * 88); width: calc(var(--u) * 34); height: calc(var(--u) * 30); }
.ab > * { position: absolute; }
.ab-recess {
  left: calc(var(--u) * -.25); top: calc(var(--u) * 5); width: calc(var(--u) * 32); height: calc(var(--u) * 15.5);
  border-radius: calc(var(--u) * 8); transform: rotate(-25deg);
  background: rgba(0, 0, 0, .015);
  box-shadow: inset 0 calc(var(--u) * .3) calc(var(--u) * .5) rgba(0, 0, 0, .05), 0 calc(var(--u) * .2) 0 rgba(255, 255, 255, .22);
}
.round-btn {
  width: calc(var(--u) * 10.9); height: calc(var(--u) * 10.9); border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; touch-action: none;
  /* The socket and hit area stay put; only the plastic cap moves. */
  background: #3b2932;
  box-shadow:
    0 0 0 calc(var(--u) * .3) #87746f,
    0 calc(var(--u) * .25) 0 calc(var(--u) * .45) rgba(255, 245, 226, .42),
    inset 0 calc(var(--u) * .65) calc(var(--u) * .8) #170c13;
}
.round-btn::before {
  content: ''; position: absolute; inset: calc(var(--u) * .22); border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 35% 24%, #c24d93 0%, #a32e73 48%, #7c2054 100%);
  transform: translateY(calc(var(--u) * -.85));
  box-shadow:
    0 calc(var(--u) * .7) 0 #5d173e,
    0 calc(var(--u) * 1.05) calc(var(--u) * .65) rgba(24, 8, 17, .65),
    inset 0 calc(var(--u) * .35) calc(var(--u) * .35) rgba(255, 255, 255, .28),
    inset 0 calc(var(--u) * -.4) calc(var(--u) * .5) rgba(54, 5, 31, .35);
  transition: transform 130ms cubic-bezier(.2, .8, .25, 1), box-shadow 130ms ease;
}
.round-btn.is-pressed::before {
  transform: translateY(calc(var(--u) * .15)) scale(.975);
  box-shadow:
    0 calc(var(--u) * .08) 0 #5d173e,
    0 calc(var(--u) * .12) calc(var(--u) * .2) rgba(24, 8, 17, .55),
    inset 0 calc(var(--u) * .5) calc(var(--u) * .8) rgba(54, 5, 31, .4),
    inset 0 calc(var(--u) * -.15) calc(var(--u) * .3) rgba(54, 5, 31, .25);
  transition-duration: 55ms;
}
.btn-b { left: calc(var(--u) * 3.25); top: calc(var(--u) * 10.65); }
.btn-a { left: calc(var(--u) * 17.35); top: calc(var(--u) * 3.95); }
.ab-label {
  width: calc(var(--u) * 5); height: calc(var(--u) * 3.4); text-align: center; pointer-events: none;
  font-family: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', sans-serif; font-weight: 700;
  font-size: calc(var(--u) * 3.3); line-height: calc(var(--u) * 3.4);
  color: var(--blue); transform: rotate(-25deg);
}
.label-b { left: calc(var(--u) * 10.6); top: calc(var(--u) * 23.9); }
.label-a { left: calc(var(--u) * 24.7); top: calc(var(--u) * 17.2); }

/* ---------- SELECT / START ---------- */
.ss { left: calc(var(--u) * 26); top: calc(var(--u) * 116.3); width: calc(var(--u) * 34); height: calc(var(--u) * 16); }
.ss > * { position: absolute; }
.pill-hole {
  width: calc(var(--u) * 11.6); height: calc(var(--u) * 4.6); border-radius: calc(var(--u) * 2.3);
  transform: rotate(-25deg);
  background: linear-gradient(#b3afa9, #c3bfb9);
  box-shadow:
    inset 0 calc(var(--u) * .35) calc(var(--u) * .45) rgba(0, 0, 0, .4),
    inset 0 calc(var(--u) * -.15) 0 rgba(255, 255, 255, .4),
    0 0 0 calc(var(--u) * .2) rgba(0, 0, 0, .2);
}
.hole-select { left: calc(var(--u) * 2.3); top: calc(var(--u) * 4); }
.hole-start  { left: calc(var(--u) * 17.3); top: calc(var(--u) * 4); }
.pill-btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; border: 0; padding: 0; cursor: pointer; touch-action: none; background: none;
}
.pill-btn::before {
  content: ''; position: absolute; left: 50%; top: 50%; pointer-events: none;
  width: calc(var(--u) * 9.4); height: calc(var(--u) * 3);
  margin: calc(var(--u) * -1.5) 0 0 calc(var(--u) * -4.7);
  border-radius: calc(var(--u) * 1.5);
  background: linear-gradient(#a2a19e, #777674);
  transform: translateY(calc(var(--u) * -.45));
  box-shadow:
    0 calc(var(--u) * .55) 0 #53514f,
    0 calc(var(--u) * .8) calc(var(--u) * .45) rgba(0, 0, 0, .5),
    0 0 0 calc(var(--u) * .2) rgba(0, 0, 0, .45),
    inset 0 calc(var(--u) * .25) 0 rgba(255, 255, 255, .45),
    inset 0 calc(var(--u) * -.3) calc(var(--u) * .3) rgba(0, 0, 0, .25);
  transition: transform 140ms cubic-bezier(.2, .8, .25, 1), box-shadow 140ms ease;
}
.pill-btn.is-pressed::before {
  transform: translateY(calc(var(--u) * .35)) scaleY(.88);
  box-shadow:
    0 calc(var(--u) * .05) 0 #53514f,
    0 calc(var(--u) * .1) calc(var(--u) * .15) rgba(0, 0, 0, .4),
    0 0 0 calc(var(--u) * .2) rgba(0, 0, 0, .5),
    inset 0 calc(var(--u) * .45) calc(var(--u) * .5) rgba(0, 0, 0, .35),
    inset 0 calc(var(--u) * -.1) calc(var(--u) * .2) rgba(0, 0, 0, .15);
  transition-duration: 70ms;
}
.ss-label {
  width: calc(var(--u) * 14); text-align: center; white-space: nowrap; pointer-events: none;
  font-family: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', sans-serif; font-weight: 700;
  font-size: calc(var(--u) * 2.35); line-height: calc(var(--u) * 2.6); letter-spacing: .13em;
  color: var(--blue); transform: rotate(-25deg);
}
.label-select { left: calc(var(--u) * 1.9); top: calc(var(--u) * 9.7); }
.label-start  { left: calc(var(--u) * 16.9); top: calc(var(--u) * 9.7); }

/* ---------- speaker grille ---------- */
.speaker {
  left: calc(var(--u) * 58.4); top: calc(var(--u) * 123.5);
  width: calc(var(--u) * 25.2); height: calc(var(--u) * 16.8);
  transform: rotate(-17deg);
  display: flex; justify-content: space-between; pointer-events: none;
}
.speaker span {
  position: relative; display: block; width: calc(var(--u) * 2.4); height: 100%;
  border-radius: calc(var(--u) * 1.2);
  background: linear-gradient(90deg, #8d8983 0%, #bfbbb5 55%, #d3cfc9 100%);
  box-shadow: inset calc(var(--u) * .3) calc(var(--u) * .3) calc(var(--u) * .5) rgba(0, 0, 0, .4), 0 calc(var(--u) * .15) 0 rgba(255, 255, 255, .45);
}
.speaker span::after {
  content: ''; position: absolute; left: calc(var(--u) * .45); top: calc(var(--u) * 1.1);
  width: calc(var(--u) * .95); height: calc(100% - var(--u) * 2.2);
  border-radius: calc(var(--u) * .5); background: #161616; box-shadow: inset 0 0 calc(var(--u) * .25) #000;
}

/* ---------- PHONES (moulded, bottom left) ---------- */
.phones {
  left: calc(var(--u) * 33.5); top: calc(var(--u) * 144.6);
  display: flex; align-items: flex-end; gap: calc(var(--u) * .5); white-space: nowrap; pointer-events: none;
  font-weight: 500; font-size: calc(var(--u) * 1.75); line-height: 1; letter-spacing: .1em;
  color: rgba(60, 58, 56, .35); text-shadow: 0 calc(var(--u) * .12) 0 rgba(255, 255, 255, .45);
}
.phones i {
  display: block; width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.5); margin-bottom: calc(var(--u) * .05);
  border: calc(var(--u) * .4) solid rgba(60, 58, 56, .35); border-bottom: 0;
  border-radius: calc(var(--u) * 1) calc(var(--u) * 1) 0 0;
}

/* ---------- hint under the console ---------- */
.hint {
  max-width: min(780px, 100%); margin: 26px 0 0; padding: 9px 15px;
  border: 1px solid rgba(240, 218, 182, .18); border-radius: 6px;
  background: rgba(34, 23, 16, .86); box-shadow: 0 2px 8px rgba(26, 17, 11, .12);
  font-size: 11px; line-height: 1.9; color: #dfcdb7; text-align: center; text-wrap: pretty;
}
.hint kbd { font: inherit; font-size: 10px; padding: 1px 4px; border: 1px solid rgba(240, 218, 182, .3); border-bottom-width: 2px; border-radius: 3px; color: #fff1dc; white-space: nowrap; }
.hint-touch { display: none; }
@media (hover: none), (max-width: 600px) { .hint-keys { display: none; } .hint-touch { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  .lcd, .lcd canvas, .power, .dial, .dpad-cap, .dpad-pressure, .round-btn::before, .pill-btn::before { transition-duration: 0s !important; }
}