/* ======================================================================
   PocketJS hero — Sony PSP-3000 device frame (v2)
   Shape rules (from the reference): the body is a STADIUM — the left and
   right ends are full semicircular arcs, NOT rounded-rect corners — with a
   symmetric concave NOTCH masked out of all four corners; the two top
   notches cradle the L/R triggers. No SONY/PSP wordmarks. The d-pad and face
   buttons are real <button>s wired to the WebAssembly canvas (assets/home.js).
   Pure HTML + CSS + inline SVG. Everything scoped under .psp-device; sizes in
   container-query units so the whole rig scales from one width.
   ====================================================================== */

.psp-device {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 348;
  container-type: inline-size;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  filter:
    drop-shadow(0 3cqw 4cqw rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 5cqw rgba(56, 189, 248, 0.10));
}

/* ---- body silhouette (SVG, behind everything) -------------------------- */
.psp-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
}

/* ---- L / R shoulder triggers: sit IN the top corner notches ------------ */
/* Tucked BEHIND the body (z-index 0, before the shell SVG in the DOM) so only
   the top sliver peeks above the top edge and the rest shows through the corner
   notch — reads as an L/R shoulder button seated in its recess. */
.psp-trigger {
  position: absolute;
  top: -1.9cqw;
  width: 14cqw;
  height: 4.7cqw;
  z-index: 1;
  background: linear-gradient(180deg, #bccde7 0%, #7092ca 22%, #2f79e0 48%, #1a56bd 100%);
  box-shadow:
    inset 0 0.35cqw 0.3cqw rgba(255, 255, 255, 0.6),
    0 0.5cqw 0.6cqw -0.3cqw rgba(0, 0, 0, 0.45);
}
.psp-trigger-l { left: 3cqw; border-radius: 2.6cqw 1.6cqw 0.5cqw 0.5cqw; }
.psp-trigger-r { right: 3cqw; border-radius: 1.6cqw 2.6cqw 0.5cqw 0.5cqw; }

/* ---- screen ------------------------------------------------------------ */
.psp-screen {
  position: absolute;
  left: 29%;
  top: 12%;
  width: 42%;
  aspect-ratio: 480 / 272;
  z-index: 2;
  border-radius: 1.6cqw;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 0.7cqw #05070d,
    0 0 0 1.2cqw rgba(120, 160, 230, 0.10),
    inset 0 0 3cqw rgba(0, 0, 0, 0.55);
}
.psp-screen canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  outline: none;
}
.psp-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.6cqw;
  color: #5b6b86;
}

/* ---- D-pad (recessed dish + 4 interactive direction pads) --------------- */
.psp-dpad {
  position: absolute;
  left: 5.5%;
  top: 20%;
  width: 15%;
  aspect-ratio: 1;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1b2740 0%, #101b32 68%, #0b1428 100%);
  box-shadow:
    inset 0 0.6cqw 1cqw rgba(0, 0, 0, 0.65),
    inset 0 -0.4cqw 0.5cqw rgba(120, 160, 230, 0.12),
    0 0.35cqw 0.4cqw rgba(255, 255, 255, 0.14);
}
.psp-d {
  position: absolute;
  border: 0;
  cursor: pointer;
  padding: 0;
  background: linear-gradient(160deg, #33456a 0%, #1c273f 100%);
  box-shadow:
    inset 0 0.25cqw 0.35cqw rgba(255, 255, 255, 0.16),
    inset 0 -0.25cqw 0.4cqw rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  color: #8394b6;
}
.psp-d svg { width: 30%; height: 30%; }
.psp-d.up    { top: 5%;  left: 34%; width: 32%; height: 46%; border-radius: 1.4cqw 1.4cqw 0.4cqw 0.4cqw; }
.psp-d.down  { bottom: 5%; left: 34%; width: 32%; height: 46%; border-radius: 0.4cqw 0.4cqw 1.4cqw 1.4cqw; }
.psp-d.left  { left: 5%;  top: 34%; height: 32%; width: 46%; border-radius: 1.4cqw 0.4cqw 0.4cqw 1.4cqw; }
.psp-d.right { right: 5%; top: 34%; height: 32%; width: 46%; border-radius: 0.4cqw 1.4cqw 1.4cqw 0.4cqw; }
.psp-d.is-down, .psp-d:active { background: linear-gradient(160deg, #4f9bff, #2f7bed); color: #eaf2ff; }
.psp-d-hub {
  position: absolute;
  left: 37%; top: 37%; width: 26%; height: 26%;
  border-radius: 50%;
  background: #0d1526;
  box-shadow: inset 0 0 0.7cqw #000, 0 0.15cqw 0 rgba(255, 255, 255, 0.06);
}

/* ---- analog nub -------------------------------------------------------- */
.psp-nub {
  position: absolute;
  left: 8.5%;
  top: 58%;
  width: 8.5%;
  aspect-ratio: 1;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #27324c 0%, #0e1627 72%);
  box-shadow:
    inset 0 0.4cqw 0.7cqw rgba(0, 0, 0, 0.6),
    0 0.2cqw 0.25cqw rgba(255, 255, 255, 0.14);
}

/* ---- face buttons (interactive) ---------------------------------------- */
.psp-faces {
  position: absolute;
  right: 5.5%;
  top: 20%;
  width: 16%;
  aspect-ratio: 1;
  z-index: 2;
}
.psp-f {
  position: absolute;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  padding: 0;
  background: radial-gradient(circle at 50% 36%, #2b3755 0%, #131d33 74%);
  box-shadow:
    inset 0 0.25cqw 0.4cqw rgba(255, 255, 255, 0.16),
    inset 0 -0.3cqw 0.5cqw rgba(0, 0, 0, 0.5),
    0 0.35cqw 0.45cqw rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
}
.psp-f svg { width: 52%; height: 52%; }
.psp-f.tri   { top: 0;   left: 28.5%; color: #7fe0b0; }
.psp-f.sq    { top: 28.5%; left: 0;   color: #f3a6d0; }
.psp-f.ci    { top: 28.5%; right: 0;  color: #ff9aa2; }
.psp-f.cross { bottom: 0; left: 28.5%; color: #8fb6ff; }
.psp-f.is-down, .psp-f:active { filter: brightness(1.55); transform: scale(0.93); }

/* ---- bottom controls (no PSP / SONY wordmarks) ------------------------- */
.psp-bottom {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 3.5%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
}
.psp-ps {
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: linear-gradient(160deg, #eef2f8, #a9b4c8);
  box-shadow: inset 0 0.2cqw 0.3cqw #fff, 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.45);
}
.psp-pill {
  border: 0;
  cursor: pointer;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  font-family: inherit;
  font-size: 1.25cqw;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.psp-pill::before {
  content: "";
  width: 6cqw;
  height: 1.9cqw;
  border-radius: 1cqw;
  background: linear-gradient(180deg, #33456a, #17233c);
  box-shadow: inset 0 0.2cqw 0.3cqw rgba(255, 255, 255, 0.14), inset 0 -0.2cqw 0.3cqw rgba(0, 0, 0, 0.4);
}
.psp-pill.is-down::before, .psp-pill:active::before { background: linear-gradient(180deg, #4f9bff, #2f7bed); }

/* ---- caption (below the device) ---------------------------------------- */
.psp-caption {
  margin-top: 3cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1cqw;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 2.4cqw;
  color: #5b6b86;
}
@container (min-width: 380px) { .psp-caption { font-size: 11px; } }
.psp-fps { color: #34d399; }