/* ───────────────────────────────────────────────────────────────
   Brewtendo 3DS simulator — console & hardware
   All geometry is in 3ds.png pixel space, cropped to the console
   (crop offset 106,68). js/hardware.js scales .stage to the window.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Rodin';
  src: url('../meta/FOT-RodinNTLG Pro DB.otf') format('opentype');
  font-display: swap;
}

:root {
  --crop-x: 106px;
  --crop-y: 68px;
  --stage-w: 988px;
  --stage-h: 1060px;
  --fit: 1;
  --backdrop: #1d1a17;
  --glow: rgba(241, 122, 10, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, var(--glow), transparent 70%),
    var(--backdrop);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  font-family: 'Rodin', 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: translate(-50%, -50%) scale(var(--fit));
  transform-origin: center center;
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.stage.is-ready { visibility: visible; }

/* Console artwork on top of the screens (screen areas are transparent) */
.frame {
  position: absolute;
  left: calc(-1 * var(--crop-x));
  top: calc(-1 * var(--crop-y));
  width: 1200px;
  height: 1200px;
  z-index: 2;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── Screens ──────────────────────────────────────────────────── */
.screen {
  --bleed: 1px;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background: #000;
  left:   calc(var(--x) - var(--crop-x) - var(--bleed));
  top:    calc(var(--y) - var(--crop-y) - var(--bleed));
  width:  calc(var(--w) + var(--bleed) * 2);
  height: calc(var(--h) + var(--bleed) * 2);
}
.screen--top    { --x: 273px; --y: 152px; --w: 655px; --h: 393px; }
.screen--bottom { --x: 338px; --y: 663px; --w: 524px; --h: 393px; }

/* Each display renders at 2× the real 3DS resolution and is scaled
   to fill its hole exactly (655/800 = 524/640 = 0.81875).         */
.display {
  position: absolute;
  left: var(--bleed);
  top: var(--bleed);
  overflow: hidden;
  transform-origin: 0 0;
}
.screen--top .display    { width: 800px; height: 480px; transform: scale(0.81875); }
.screen--bottom .display { width: 640px; height: 480px; transform: scale(0.81875); }

/* ── Hardware layer (above the artwork) ───────────────────────── */
.hw {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.hw:focus { outline: none; }
.hw:focus-visible { outline: 3px solid #ffb445; outline-offset: 2px; }

/* Round face buttons: centre at --cx/--cy (image px), radius --r */
.hw--round {
  left: calc(var(--cx) - var(--crop-x) - var(--r));
  top:  calc(var(--cy) - var(--crop-y) - var(--r));
  width:  calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  transition: background 0.06s, box-shadow 0.06s;
}
.hw--round:hover  { background: rgba(255, 255, 255, 0.06); }
.hw--round.is-down {
  background: radial-gradient(circle, rgba(0,0,0,0.35), rgba(0,0,0,0.15) 70%, transparent 72%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.btn-x { --cx: 985px;  --cy: 741px; --r: 24px; }
.btn-y { --cx: 933px;  --cy: 789px; --r: 24px; }
.btn-a { --cx: 1037px; --cy: 789px; --r: 24px; }
.btn-b { --cx: 985px;  --cy: 840px; --r: 24px; }
.btn-start  { --cx: 931px; --cy: 949px;  --r: 16px; }
.btn-select { --cx: 931px; --cy: 1010px; --r: 16px; }

/* HOME pill */
.btn-home {
  left: calc(568px - var(--crop-x));
  top:  calc(1081px - var(--crop-y));
  width: 64px;
  height: 32px;
  border-radius: 16px;
}
.btn-home:hover   { background: rgba(255,255,255,0.06); }
.btn-home.is-down { background: rgba(0,0,0,0.32); }

/* D-pad: centre 212,890 — four arms */
.dpad {
  --cx: 212px; --cy: 890px;
  --arm: 36px;   /* arm thickness */
  --reach: 58px; /* centre → tip */
}
.dpad-arm { border-radius: 4px; }
.dpad-arm:hover { background: rgba(255,255,255,0.05); }
.dpad-arm.is-down { background: rgba(0,0,0,0.38); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.dpad-up, .dpad-down {
  left: calc(var(--cx) - var(--crop-x) - var(--arm) / 2);
  width: var(--arm);
  height: calc(var(--reach) - var(--arm) / 2);
}
.dpad-up   { top: calc(var(--cy) - var(--crop-y) - var(--reach)); }
.dpad-down { top: calc(var(--cy) - var(--crop-y) + var(--arm) / 2); }
.dpad-left, .dpad-right {
  top: calc(var(--cy) - var(--crop-y) - var(--arm) / 2);
  height: var(--arm);
  width: calc(var(--reach) - var(--arm) / 2);
}
.dpad-left  { left: calc(var(--cx) - var(--crop-x) - var(--reach)); }
.dpad-right { left: calc(var(--cx) - var(--crop-x) + var(--arm) / 2); }

/* Circle pad & C-stick: a nub sprite that follows the pointer */
.stick {
  left: calc(var(--cx) - var(--crop-x) - var(--zone));
  top:  calc(var(--cy) - var(--crop-y) - var(--zone));
  width:  calc(var(--zone) * 2);
  height: calc(var(--zone) * 2);
  border-radius: 50%;
}
.stick-cpad   { --cx: 214px; --cy: 738px; --zone: 60px; --nub: 47px; }
.stick-cstick { --cx: 933px; --cy: 683px; --zone: 26px; --nub: 21px; }
.stick .nub {
  position: absolute;
  left: calc(var(--zone) - var(--nub));
  top:  calc(var(--zone) - var(--nub));
  width:  calc(var(--nub) * 2);
  height: calc(var(--nub) * 2);
  pointer-events: none;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform 0.12s cubic-bezier(.3,1.6,.5,1);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.stick.is-dragging .nub { transition: none; }

/* Sliders on the console edge */
.slider {
  left: calc(var(--x0) - var(--crop-x));
  top:  calc(386px - var(--crop-y));
  width: var(--sw);
  height: 96px;           /* slot 386 → 482 */
  cursor: ns-resize;
}
.slider-vol { --x0: 106px;  --sw: 22px; }
.slider-3d  { --x0: 1072px; --sw: 24px; }
.slider .knob {
  position: absolute;
  left: 0;
  width: var(--sw);
  height: 32px;
  top: calc(var(--t, 0) * 64px); /* 0 = top of travel, 1 = bottom */
  pointer-events: none;
}

/* Power LED glow (blue LED on the front edge) */
.led {
  position: absolute;
  z-index: 3;
  left: calc(887px - var(--crop-x) - 7px);
  top:  calc(1118px - var(--crop-y) - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(140,230,255,0.95), rgba(60,180,255,0.4) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.6s;
}
.led.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .stick .nub { transition: none; }
}