/* ==========================================================================
   Pocket shell: a portrait, Game Boy-style handheld that fills a phone screen.
   Don't edit per game, except the label in index.html and --shell colours.
   ========================================================================== */
:root {
  --shell: #c9c4b8;          /* body plastic */
  --shell-hi: #dcd8ce;
  --shell-lo: #aaa497;
  --bezel: #4f5163;          /* glass surround */
  --stripe-a: #8b2c5c;
  --stripe-b: #2d3f8f;
  --ink: #2d3f8f;            /* printed label */
  --pad: #26262b;            /* d-pad */
  --pad-hi: #3a3a42;
  --ab: #a3214f;             /* A/B buttons */
  --ab-hi: #c43a6a;
  --pill: #7f7c75;           /* start/select */
  --lcd-off: #1d2420;
  --page: #1a1c22;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--page); overflow: hidden;
  overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; font-family: "Rubik", system-ui, sans-serif;
}
body { display: flex; justify-content: center; align-items: stretch; }

/* ---------------------------------------------------------------- body */
.pocket {
  position: relative;
  width: min(100vw, 62dvh);              /* portrait proportions on any phone */
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) clamp(14px, 5vw, 26px) max(14px, env(safe-area-inset-bottom));
  background:
    linear-gradient(100deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--shell-hi), var(--shell) 30%, var(--shell-lo));
  border-radius: 14px 14px clamp(48px, 16vw, 90px) 14px;   /* the big rounded bottom-right corner */
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 10px rgba(0,0,0,.18), inset -3px 0 6px rgba(0,0,0,.08);
}
@media (min-width: 700px) { .pocket { margin: 2dvh 0; height: 96dvh; } }

.topline { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; color: #8d877b; font-size: 11px; }
.topline .power { display: flex; align-items: center; gap: 6px; letter-spacing: .04em; }
.topline .groove { flex: 1; height: 2px; margin: 0 10px; background: linear-gradient(var(--shell-lo), var(--shell-hi)); border-radius: 2px; }

/* ---------------------------------------------------------------- screen */
.bezel {
  background: var(--bezel);
  border-radius: 10px 10px 34px 10px;
  padding: 14px 7% 10px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.stripes { display: flex; align-items: center; gap: 8px; margin: -4px -2% 8px; }
.stripes i { flex: 1; height: 7px; background:
  linear-gradient(var(--stripe-a) 0 2px, transparent 2px 5px, var(--stripe-b) 5px 7px); }
.stripes span { color: #b9bbc8; font-size: 8.5px; letter-spacing: .08em; white-space: nowrap; }
.bezel { position: relative; }
.battery { position: absolute; left: 1.4%; top: 44%; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #b9bbc8; font-size: 6.5px; letter-spacing: .08em; }
.led { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 6px #ff3b3b, 0 0 2px #fff inset; }
.led.off { background: #5a1d1d; box-shadow: none; }
.screen {
  position: relative; width: 100%; aspect-ratio: 10 / 9;
  background: var(--lcd-off); border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.screen::after {   /* faint glass + pixel grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), transparent 35%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
}
.brand { margin: 10px 4px 0; display: flex; align-items: baseline; gap: 8px; color: var(--ink); }
.brand b { font-weight: 800; font-style: italic; font-size: clamp(18px, 5.2vw, 24px); letter-spacing: -.02em; }
.brand small { font-weight: 700; font-style: italic; font-size: clamp(10px, 2.8vw, 13px); color: var(--stripe-a); }

/* ---------------------------------------------------------------- controls */
.controls { flex: 1; position: relative; min-height: 0; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-items: center; }

.dpad { --s: clamp(118px, 36vw, 168px); justify-self: start; position: relative; width: var(--s); height: var(--s); margin-left: 2%; touch-action: none; }
.dpad::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.14), rgba(0,0,0,0) 70%); }
.dpad .arm { position: absolute; background: linear-gradient(var(--pad-hi), var(--pad)); box-shadow: 0 4px 0 #111, 0 6px 8px rgba(0,0,0,.35); }
.dpad .h { left: 4%; right: 4%; top: 34%; height: 32%; border-radius: 6px; }
.dpad .v { top: 4%; bottom: 4%; left: 34%; width: 32%; border-radius: 6px; }
.dpad .hub { position: absolute; left: 41%; top: 41%; width: 18%; height: 18%; border-radius: 50%; background: radial-gradient(#1c1c20, #2c2c33); z-index: 2; }
.dpad .tri { position: absolute; z-index: 2; width: 0; height: 0; border: 6px solid transparent; opacity: .5; }
.dpad .t-up    { left: 50%; top: 12%; transform: translateX(-50%); border-bottom: 8px solid #6c6c78; border-top: 0; }
.dpad .t-down  { left: 50%; bottom: 12%; transform: translateX(-50%); border-top: 8px solid #6c6c78; border-bottom: 0; }
.dpad .t-left  { top: 50%; left: 12%; transform: translateY(-50%); border-right: 8px solid #6c6c78; border-left: 0; }
.dpad .t-right { top: 50%; right: 12%; transform: translateY(-50%); border-left: 8px solid #6c6c78; border-right: 0; }
.dpad.up .v    { box-shadow: 0 2px 0 #111, inset 0 18px 10px -8px rgba(0,0,0,.6); }
.dpad.down .v  { box-shadow: 0 2px 0 #111, inset 0 -18px 10px -8px rgba(0,0,0,.6); }
.dpad.left .h  { box-shadow: 0 2px 0 #111, inset 18px 0 10px -8px rgba(0,0,0,.6); }
.dpad.right .h { box-shadow: 0 2px 0 #111, inset -18px 0 10px -8px rgba(0,0,0,.6); }

.ab { --b: clamp(54px, 16vw, 74px); justify-self: end; margin-right: 1%; position: relative;
  width: calc(var(--b) * 2.35); height: calc(var(--b) * 1.7); transform: rotate(-25deg); }
.ab::before { content: ""; position: absolute; inset: 14% -4%; border-radius: 999px; background: rgba(0,0,0,.09); }
.btn-round { position: absolute; width: var(--b); height: var(--b); border: 0; border-radius: 50%; padding: 0;
  background: radial-gradient(circle at 38% 32%, var(--ab-hi), var(--ab) 62%, #6e1235);
  box-shadow: 0 5px 0 #5a0f2b, 0 8px 10px rgba(0,0,0,.3); touch-action: none; cursor: pointer; }
.btn-round span { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%) rotate(25deg);
  font: 800 italic 13px "Rubik", sans-serif; color: var(--ink); }
.btn-round.b { left: 0; bottom: 0; }
.btn-round.a { right: 0; top: 0; }
.btn-round.on { transform: translateY(4px); box-shadow: 0 1px 0 #5a0f2b, 0 2px 4px rgba(0,0,0,.3); }

.pills { grid-column: 1 / -1; display: flex; justify-content: center; gap: clamp(18px, 7vw, 34px); padding-bottom: 6px; transform: rotate(-25deg) translateY(-6px); }
.pill { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 6px; touch-action: none; cursor: pointer; }
.pill i { display: block; width: clamp(42px, 12vw, 54px); height: 11px; border-radius: 999px; background: linear-gradient(#97948c, var(--pill)); box-shadow: 0 2px 0 #5d5b55, inset 0 0 0 2px rgba(0,0,0,.08); }
.pill span { font: 700 italic 10px "Rubik", sans-serif; letter-spacing: .06em; color: var(--ink); }
.pill.on i { transform: translateY(2px); box-shadow: 0 0 0 #5d5b55; }

.speaker { position: absolute; right: 6%; bottom: 3%; display: flex; gap: 7px; transform: rotate(-25deg); pointer-events: none; }
.speaker i { width: 6px; height: clamp(34px, 11vw, 48px); border-radius: 3px; background: rgba(0,0,0,.22); box-shadow: inset 0 2px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.4); }

button:focus-visible { outline: 3px solid #ffd34d; outline-offset: 3px; }

/* ---------------------------------------------------------------- landscape: controls either side */
@media (orientation: landscape) and (max-height: 600px) {
  .pocket { width: 100vw; height: 100dvh; border-radius: 0; flex-direction: row; align-items: center; padding: 8px max(18px, env(safe-area-inset-left)); gap: 12px; }
  .topline, .brand, .speaker, .battery { display: none; }
  .bezel { order: 2; height: calc(100dvh - 24px); padding: 8px; border-radius: 10px; }
  .bezel .stripes { display: none; }
  .screen { height: 100%; width: auto; }
  .controls { display: contents; }
  .dpad { order: 1; --s: min(40vh, 150px); }
  .ab { order: 3; --b: min(15vh, 64px); }
  .pills { position: fixed; z-index: 5; bottom: 4px; right: max(14px, env(safe-area-inset-right)); left: auto; transform: none; gap: 10px; padding: 0; }
  .pills .pill { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }