:root {
  --bg: #2b1d3a;
  --bg2: #3e2a52;
  --shell: #b9a3e3;        /* "Grape" GBC */
  --shell-hi: #cdbcf0;
  --shell-lo: #8f78bd;
  --bezel: #3b3b4f;
  --bezel-lo: #2a2a3a;
  --btn: #5b2a5e;
  --btn-hi: #7a3d7e;
  --ink: #f4eefc;
  --muted: #b8a9cf;
  --dpad: #2c2c36;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--bg2), var(--bg) 70%);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  gap: 14px;
}

/* ---------- device ---------- */
.device {
  --w: min(92vw, 400px, calc((100dvh - 60px) * 0.6));
  width: var(--w);
  aspect-ratio: 0.6;
  background: linear-gradient(160deg, var(--shell-hi), var(--shell) 35%, var(--shell-lo));
  border-radius: calc(var(--w) * 0.06) calc(var(--w) * 0.06) calc(var(--w) * 0.22) calc(var(--w) * 0.06);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 12px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.45);
  padding: calc(var(--w) * 0.07);
  display: flex; flex-direction: column;
  font-size: calc(var(--w) * 0.035);
}
.bezel {
  background: linear-gradient(var(--bezel), var(--bezel-lo));
  border-radius: 0.6em 0.6em 2.4em 0.6em;
  padding: 0.7em 1.4em 0.9em;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
.bezel-top { display: flex; align-items: center; gap: .5em; height: 1.4em; color: #9a9ab0; font-size: .6em; letter-spacing: .1em; }
.led { width: .9em; height: .9em; border-radius: 50%; background: #3a2323; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); transition: background .3s, box-shadow .3s; }
.led.on { background: #ff4d6d; box-shadow: 0 0 8px 2px rgba(255,77,109,.7); }
.screen-wrap { position: relative; aspect-ratio: 160 / 144; width: 100%; background: #0e0e14; border-radius: 3px; overflow: hidden; }
canvas {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #f8f8f0;
}
.power-on {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em;
  background: #15151d; color: var(--ink); font: inherit;
}
.power-on.hidden { display: none; }
.power-title { font-size: 1.3em; font-weight: 700; letter-spacing: .02em; text-align: center; padding: 0 1em; }
.power-hint { font-size: .8em; color: var(--muted); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.brand { margin-top: .55em; text-align: center; font-weight: 800; font-style: italic; letter-spacing: .06em; color: #c9c9da; font-size: .85em; }
.brand .c { color: #ff5f7e; } .brand .o { color: #b561ff; } .brand .l { color: #5fa8ff; } .brand .o2 { color: #3fd49a; } .brand .r { color: #ffc94d; }

/* ---------- controls ---------- */
.controls { position: relative; flex: 1; }
.dpad { position: absolute; left: 2%; top: 16%; width: 34%; aspect-ratio: 1; touch-action: none; }
.dpad-h, .dpad-v { position: absolute; background: var(--dpad); border-radius: .35em; box-shadow: 0 3px 0 #111, inset 0 1px 0 rgba(255,255,255,.15); }
.dpad-h { left: 0; right: 0; top: 33%; height: 34%; }
.dpad-v { top: 0; bottom: 0; left: 33%; width: 34%; }
.dpad-dot { position: absolute; left: 42%; top: 42%; width: 16%; height: 16%; border-radius: 50%; background: #1d1d25; }
.dpad:not([data-dir=""])[data-dir] { transform: scale(.97); }
.ab { position: absolute; right: 2%; top: 14%; width: 44%; aspect-ratio: 2 / 1.25; transform: rotate(-22deg); }
.btn {
  position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 30%, var(--btn-hi), var(--btn) 60%);
  box-shadow: 0 4px 0 #2d1230, 0 6px 10px rgba(0,0,0,.3);
  color: rgba(255,255,255,.55); font: 700 1em inherit; font-family: inherit; touch-action: none;
}
.btn.b { left: 0; bottom: 0; } .btn.a { right: 0; top: 0; }
.btn.down, .pill.down { transform: translateY(3px); box-shadow: 0 1px 0 #2d1230; }
.startselect { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); display: flex; gap: 1.6em; }
.startselect > div { display: flex; flex-direction: column; align-items: center; gap: .35em; transform: rotate(-22deg); }
.startselect span { font-size: .55em; letter-spacing: .12em; color: #5a4a80; font-weight: 700; }
.pill { width: 3.2em; height: .9em; border-radius: 1em; border: 0; background: #6f6488; box-shadow: 0 2px 0 #3e3553; touch-action: none; }
.speaker { position: absolute; right: 6%; bottom: 4%; display: flex; gap: .45em; transform: rotate(-28deg); }
.speaker i { width: .35em; height: 3.2em; border-radius: 1em; background: rgba(0,0,0,.18); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }

.keys { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.keys kbd { font: inherit; padding: 0 .35em; border-radius: 4px; background: rgba(255,255,255,.1); }
@media (hover: none) { .keys { display: none; } }