/* ============================================================
   BINTAGE 002 — handheld shell styling. Mobile-first.
   Aesthetic: late-80s DMG plastic, skeuomorphic & tactile.
   ============================================================ */

:root {
  --shell:      #c9c5b8;   /* classic dust-gray plastic   */
  --shell-hi:   #e4e1d6;   /* plastic highlight            */
  --shell-lo:   #a6a294;   /* plastic shadow               */
  --shell-edge: #8d8a7d;   /* deep edge                    */
  --ink:        #4b4a43;   /* printed labels               */
  --ink-soft:   #76746a;
  --accent:     #2a4a9c;   /* deep blue A/B + script       */
  --accent-2:   #6b3a8c;   /* muted purple (select label)  */
  --bezel:      #5a5b63;   /* screen surround plastic      */
  --bezel-lo:   #3b3c44;
  --lcd-off:    #7b8421;   /* dim olive when "off"         */
  --btn-dark:   #2a2a2c;   /* start/select + dpad          */
  --radius:     7% 7% 26% 7% / 5% 5% 16% 5%;
  --tap: rgba(0,0,0,0);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: var(--tap); }
html, body {
  margin: 0; height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #2c2d33 0%, #181820 45%, #0b0b10 100%);
  font-family: "Press Start 2P", ui-monospace, "Courier New", monospace;
  color: #ddd;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
/* faint film grain over the room */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
}

/* ---------------- THE DEVICE ---------------- */
.device {
  position: relative;
  width: min(94vw, 430px);
  max-height: 96vh;
  aspect-ratio: 90 / 151;
  padding: 3.2% 4% 3% 4%;
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  background:
    linear-gradient(157deg, var(--shell-hi) 0%, var(--shell) 26%, var(--shell) 72%, var(--shell-lo) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.65),
    inset 0 -7px 14px rgba(0,0,0,.30),
    inset 6px 0 12px rgba(255,255,255,.18),
    inset -7px 0 14px rgba(0,0,0,.22),
    0 1px 0 #f3f1ea,
    0 26px 40px -12px rgba(0,0,0,.7),
    0 50px 80px -28px rgba(0,0,0,.85);
  isolation: isolate;
}
/* moulded seam line near the bottom curve */
.device::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 4.5%;
  height: 1px; border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.18) 20%, rgba(0,0,0,.18) 80%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* corner screws */
.device .screw, .device::after { }

/* ---------- top row ---------- */
.shell-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2% 1.6%;
}
.power-slot {
  position: relative; width: 30%; max-width: 88px; height: 15px;
  appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer;
}
.power-slot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
.power-rail {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 9px; border-radius: 6px;
  background: linear-gradient(#8f8b7e, #c7c3b6);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.5);
}
.power-knob {
  position: absolute; z-index: 1; left: 2px; top: 50%; width: 18px; height: 13px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(#efece2, #b8b4a6 60%, #9c988a);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.45);
  transition: left .2s cubic-bezier(.34, 1.56, .5, 1);
}
.device.power-on .power-knob { left: calc(100% - 20px); }
.power-label {
  position: absolute; left: 0; right: 0; top: 17px; text-align: center;
  font-size: 5px; letter-spacing: .5px; color: var(--ink-soft); white-space: nowrap;
}
.device.power-on .power-label { color: var(--accent-2); }
.brand-top {
  font-size: clamp(8px, 2.6vw, 12px); letter-spacing: 1px; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.brand-top .brand-tm { font-size: .5em; vertical-align: super; }
.brand-top em {
  font-style: normal; margin-left: 5px; color: var(--accent-2);
  font-size: .8em; letter-spacing: .5px;
}

/* ---------------- SCREEN ---------------- */
.screen-area { padding: 0 1%; }
.bezel {
  position: relative;
  border-radius: 8px 8px 30px 8px;
  padding: 9% 9% 8%;
  background: linear-gradient(150deg, #6a6b73, var(--bezel) 35%, var(--bezel-lo) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.18),
    inset 0 -3px 8px rgba(0,0,0,.55),
    inset 3px 0 6px rgba(0,0,0,.3),
    0 2px 3px rgba(255,255,255,.35);
}
.bezel-top {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 6px;
}
.led {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3;
}
.led i {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a3a3a, #511616 60%, #2c0a0a);
  box-shadow: inset 0 0 2px rgba(0,0,0,.5);
  transition: box-shadow .25s, background .25s;
}
.device.power-on .led i {
  background: radial-gradient(circle at 35% 30%, #ff9a9a, #ff2424 55%, #9c1111);
  box-shadow: 0 0 9px 2px rgba(255,60,60,.95), inset 0 0 2px rgba(255,255,255,.7);
}
.led b {
  font-weight: 400; font-size: 4px; letter-spacing: 0; color: #c3c4cc;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.bezel-title {
  font-size: 5px; letter-spacing: .5px; color: #c3c4cc;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.lcd {
  position: relative; width: 100%; aspect-ratio: 160 / 144;
  border-radius: 3px; overflow: hidden;
  background: #8b9622;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 2px 10px rgba(0,0,0,.45);
}
#lcd {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #9bbc0f;
}
/* glass glare + vignette */
.lcd-glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 18%, transparent 38%),
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.35), transparent 60%);
}
/* subtle dot-matrix scanlines */
.lcd-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.brand-script {
  margin: 7px 0 0 2px; font-size: clamp(13px, 4.5vw, 20px);
  font-style: italic; font-weight: 700; letter-spacing: -.5px;
  color: var(--accent);
  text-shadow: 1px 1px 0 rgba(255,255,255,.5), 0 2px 3px rgba(0,0,0,.18);
  transform: skewX(-6deg);
}
.brand-script b { color: var(--accent-2); }

/* ---------------- CONTROLS ---------------- */
.controls {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4% 1% 0;
  min-height: 0;
}

/* D-pad: 3x3 grid cross */
.dpad {
  position: relative;
  width: 40%; aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.dbtn {
  appearance: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  background:
    linear-gradient(150deg, #46464a, #232325 70%, #161617);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -2px 3px rgba(0,0,0,.6),
    0 2px 3px rgba(0,0,0,.45);
  position: relative;
}
.d-up    { grid-area: 1 / 2 / 2 / 3; border-radius: 5px 5px 0 0; }
.d-down  { grid-area: 3 / 2 / 4 / 3; border-radius: 0 0 5px 5px; }
.d-left  { grid-area: 2 / 1 / 3 / 2; border-radius: 5px 0 0 5px; }
.d-right { grid-area: 2 / 3 / 3 / 4; border-radius: 0 5px 5px 0; }
.dpad-hub {
  grid-area: 2 / 2 / 3 / 3;
  background: linear-gradient(150deg, #3a3a3d, #1c1c1e);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.6);
}
/* raised dimple on the cross center */
.dpad::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 26%; height: 26%; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a4a4e, #202022);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25), inset 0 -1px 2px rgba(0,0,0,.7);
  pointer-events: none;
}
.dbtn::before { /* directional arrow */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; transform: translate(-50%,-50%); opacity: .5;
}
.d-up::before    { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #cfcfcf; margin-top: -2px; }
.d-down::before  { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #cfcfcf; margin-top: 2px; }
.d-left::before  { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 5px solid #cfcfcf; margin-left: -2px; }
.d-right::before { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #cfcfcf; margin-left: 2px; }
.dbtn:active {
  background: linear-gradient(150deg, #1c1c1e, #101011);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.8);
  transform: translateY(.5px);
}

/* A / B */
.ab {
  width: 36%;
  display: flex; align-items: center; justify-content: center; gap: 10%;
  transform: rotate(-22deg);
}
.rbtn {
  appearance: none; border: 0; cursor: pointer;
  width: 17vw; max-width: 60px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 38% 30%, #5a7ad4, var(--accent) 52%, #162a5c 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.45),
    inset 0 -4px 6px rgba(0,0,0,.4),
    0 4px 6px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.3);
  position: relative;
}
.rbtn span {
  position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
/* A/B sit level within the row; the row's tilt (matching Start/Select)
   creates the diagonal, so both pairs slant in the same direction. */
.rbtn:active {
  background: radial-gradient(circle at 38% 30%, #3a5aa0, #162a5c 60%, #0c1a3a);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.6);
  transform: translateY(2px) scale(.97);
}

/* Start / Select */
.startsel {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin: 1% 0 11%;
  transform: rotate(-22deg);
  transform-origin: center;
}
.pill {
  appearance: none; border: 0; cursor: pointer;
  width: 15%; min-width: 52px; height: 15px; border-radius: 9px;
  background: linear-gradient(#9b9789, #6f6c61 55%, #54514a);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.4);
  position: relative;
}
.pill span {
  position: absolute; left: 0; right: 0; top: 15px;
  font-size: 6px; letter-spacing: .5px; color: var(--accent-2); text-align: center;
}
.pill[data-btn="select"] { transform: translateY(-20px); }
.pill:active { background: linear-gradient(#5e5b52, #44423c); box-shadow: inset 0 2px 4px rgba(0,0,0,.7); transform: translateY(1px); }
.pill[data-btn="select"]:active { transform: translateY(-19px); }

/* Speaker grille — anchored to the bottom-right corner */
.speaker {
  position: absolute; right: 8%; bottom: 7%;
  display: flex; gap: 6px;
  transform: rotate(-22deg); transform-origin: bottom right;
}
.speaker span {
  width: 5px; height: 30px; border-radius: 3px;
  background: linear-gradient(var(--shell-lo), var(--shell-hi));
  box-shadow: inset 0 2px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.45);
}

.hint {
  margin: 0; font-size: 7px; letter-spacing: .5px; color: #6f7079;
  text-align: center; opacity: .85; line-height: 1.6;
  transition: opacity .5s;
}
.hint.dim { opacity: 0; }

/* ---------------- responsive tuning ---------------- */
@media (max-height: 700px) {
  .brand-script { font-size: 14px; margin-top: 4px; }
  .bezel-title, .power-label { display: none; }
}
@media (min-width: 520px) and (orientation: landscape) {
  .device { aspect-ratio: 90 / 151; max-height: 94vh; width: auto; }
}
@media (pointer: fine) {
  .dbtn:hover, .rbtn:hover, .pill:hover { filter: brightness(1.05); }
}

/* ---------------- PWA install toast ---------------- */
.pwa-toast {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.34, 1.56, .5, 1);
  padding: 0 10px max(10px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.pwa-toast.show { transform: translateY(0); }
.pwa-toast-inner {
  pointer-events: auto;
  max-width: 430px; margin: 0 auto;
  background: linear-gradient(157deg, var(--shell-hi) 0%, var(--shell) 26%, var(--shell) 72%, var(--shell-lo) 100%);
  border-radius: 10px 10px 0 0;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.65),
    inset 0 -3px 6px rgba(0,0,0,.15),
    0 -4px 20px rgba(0,0,0,.5);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border-top: 3px solid var(--accent);
}
.pwa-toast-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 8px;
  background: linear-gradient(150deg, #6a6b73, var(--bezel) 35%, var(--bezel-lo) 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.55);
  display: grid; place-items: center;
  font-size: 9px; color: #9bbc0f; line-height: 1;
  text-shadow: 0 0 6px rgba(155,188,15,.8);
  font-family: "Press Start 2P", monospace;
}
.pwa-toast-body { flex: 1; min-width: 0; }
.pwa-toast-title {
  font-family: "Press Start 2P", monospace;
  font-size: 8px; color: var(--ink); line-height: 1.4;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  margin-bottom: 4px;
}
.pwa-toast-sub {
  font-family: "Press Start 2P", monospace;
  font-size: 6px; color: var(--ink-soft); line-height: 1.6;
}
.pwa-toast-actions { flex-shrink: 0; display: flex; gap: 8px; }
.pwa-toast-btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: "Press Start 2P", monospace;
  font-size: 7px; padding: 8px 12px; border-radius: 6px;
  transition: transform .1s, box-shadow .1s;
}
.pwa-toast-btn:active { transform: translateY(1px); }
.pwa-btn-install {
  background: radial-gradient(circle at 38% 30%, #5a7ad4, var(--accent) 52%, #162a5c 100%);
  color: #fff;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.45), inset 0 -3px 4px rgba(0,0,0,.4), 0 3px 5px rgba(0,0,0,.4);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.pwa-btn-install:active {
  background: radial-gradient(circle at 38% 30%, #3a5aa0, #162a5c 60%, #0c1a3a);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}
.pwa-btn-close {
  background: linear-gradient(#9b9789, #6f6c61 55%, #54514a);
  color: var(--ink);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.3);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.pwa-btn-close:active {
  background: linear-gradient(#5e5b52, #44423c);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}
/* blink animation for the pixel arrow on iOS toast */
@keyframes pwa-blink {
  0%, 100% { opacity: 1; } 50% { opacity: .3; }
}
.pwa-toast-sub b {
  color: var(--accent); font-weight: 400;
  animation: pwa-blink 1.2s step-end infinite;
}