/* CRT arcade-cabinet framing: scanlines, vignette, flicker, bezel glow. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #05030d;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  overflow: hidden;
}
#stage {
  position: relative;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, #14102b, #0a0618 60%);
  box-shadow:
    0 0 0 3px #241b4d,
    0 0 40px rgba(123, 47, 247, 0.45),
    0 0 90px rgba(255, 45, 149, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.8);
}
#screen {
  position: relative;
  display: block;
  max-width: 85vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0a0618;
  border-radius: 8px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9);
}
/* scanlines */
#screen::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  border-radius: 8px;
  mix-blend-mode: multiply;
}
/* vignette + glass curve */
#screen::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.35) 100%);
  border-radius: 8px;
  animation: crt-flicker 4s infinite;
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.86; }
  94% { opacity: 1; }
  97% { opacity: 0.92; }
  98% { opacity: 1; }
}
#brand {
  position: absolute;
  bottom: -34px; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  color: #7b2ff7;
  letter-spacing: 2px;
}
#brand a { color: #00e5ff; text-decoration: none; }

/* ---- mobile touch controls ---- */
#touchpad {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50; display: none;
  justify-content: space-between; align-items: flex-end;
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
  pointer-events: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
@media (pointer: coarse) { #touchpad { display: flex; } }

/* cross-shaped d-pad, NES style (3x3 grid) */
.tp-dpad {
  display: grid; pointer-events: auto;
  grid-template-areas: ". up ." "left hub right" ". down .";
  gap: 2px;
}
.tp-dpad .tp-up    { grid-area: up; }
.tp-dpad .tp-down  { grid-area: down; }
.tp-dpad .tp-left  { grid-area: left; }
.tp-dpad .tp-right { grid-area: right; }
.tp-hub { grid-area: hub; width: 68px; height: 68px; background: rgba(20,16,43,.3);
  border: 2px solid rgba(0,229,255,.2); border-radius: 8px; }
.tp-hub.tp-turbo { color: #ff3b3b; border-color: rgba(255,59,59,.5);
  box-shadow: 0 0 10px rgba(255,59,59,.2); }

.tp-actions { display: flex; gap: 16px; align-items: center; pointer-events: auto; }
.tp-btn {
  width: 68px; height: 68px; border-radius: 15px;
  border: 2px solid rgba(0,229,255,.4);
  background: rgba(20,16,43,.35);
  color: rgba(244,241,255,.85); font-family: 'Press Start 2P', monospace;
  font-size: 16px; touch-action: none;
  box-shadow: 0 0 10px rgba(0,229,255,.15), inset 0 0 12px rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent;
}
.tp-btn:active, .tp-btn.tp-held {
  background: rgba(123,47,247,.55);
  border-color: #ff2d95;
  color: #fff;
  box-shadow: 0 0 18px rgba(255,45,149,.5), inset 0 0 12px rgba(0,0,0,.35);
}
.tp-a { width: 86px; height: 86px; border-radius: 50%; font-size: 22px;
  border-color: rgba(255,45,149,.5);
  background: rgba(20,16,43,.35);
  box-shadow: 0 0 12px rgba(255,45,149,.22), inset 0 0 12px rgba(0,0,0,.35); }
.tp-mute { width: 48px; height: 48px; border-radius: 12px; font-size: 14px;
  color: rgba(244,241,255,.85); border-color: rgba(0,229,255,.4);
  background: rgba(20,16,43,.35);
  box-shadow: 0 0 6px rgba(0,229,255,.15); }
.tp-mute.tp-muted { color: #ff3b3b; border-color: rgba(255,59,59,.6);
  background: rgba(80,10,20,.45); box-shadow: 0 0 10px rgba(255,59,59,.35); }
.tp-pause { width: 48px; height: 48px; border-radius: 12px; font-size: 11px;
  color: rgba(122,107,176,.8); border-color: rgba(122,107,176,.4);
  background: rgba(20,16,43,.35);
  box-shadow: 0 0 6px rgba(122,107,176,.2); }

/* landscape: compact, sits higher so it clears the game screen */
@media (orientation: landscape) {
  #touchpad { padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  .tp-dpad .tp-btn, .tp-hub { width: 48px; height: 48px; font-size: 12px; }
  .tp-actions { gap: 10px; }
  .tp-a { width: 62px; height: 62px; font-size: 16px; }
  .tp-pause, .tp-mute { width: 40px; height: 40px; font-size: 10px; }
}

/* portrait forced-landscape: JS rotates #ls-wrap; no CSS repositioning needed */