/* Super Romeo — a handheld-console shell around a 256×240 screen. */
:root {
  --shell: #d8d3c8;
  --shell-dark: #b9b2a4;
  --bezel: #2b2733;
  --ink: #2b2733;
  --red: #c8283c;
  --red-dark: #8c1024;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #17151c; color: #f4f1ea;
  font: 600 15px/1.3 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body { position: fixed; inset: 0; }
#app {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
#bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px;
}
#back {
  color: #cfc8ff; text-decoration: none; font-size: 14px; padding: 12px 6px; min-width: 44px;
}
#brand { flex: 1; text-align: center; letter-spacing: 0.18em; font-size: 12px; color: #9d97b5; }
#bar button, #startBtn {
  appearance: none; border: 0; border-radius: 10px; background: #2f2b38; color: #f4f1ea;
  min-width: 44px; height: 36px; font: inherit; font-size: 14px; cursor: pointer;
}
#bar button { display: inline-flex; align-items: center; justify-content: center; }
/* 44 px touch targets without growing the visuals (36 px bar buttons, the 30 px START pill). */
#bar button, #startBtn { position: relative; }
#bar button::before, #startBtn::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
#bar button svg { display: block; pointer-events: none; }
#mute .slash { display: none; }
#mute[aria-pressed="true"] { color: #8f89a6; }
#mute[aria-pressed="true"] .slash { display: inline; }
#mute[aria-pressed="true"] .waves { display: none; }
#screen { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
#bezel { background: #000; line-height: 0; border-radius: 4px; box-shadow: 0 0 0 3px #000; }
#cv { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#bezel { position: relative; }
/* The family-board line (web/shared/leaderboard.js showResult) floats over the canvas on the
   end-of-run cards; main.js places it (left/top/width) at the card's gap. Only the pill takes taps. */
#lbResult { position: absolute; left: 0; top: 0; margin: 0; transform: translateY(-50%); line-height: normal; pointer-events: none; z-index: 1; }
#lbResult .lb-line { pointer-events: auto; }
#keys { flex: 0 0 auto; margin: 6px 0 10px; text-align: center; color: #8f89a6; font-size: 13px; }
#dbg { position: fixed; left: 4px; top: calc(var(--safe-t) + 48px); margin: 0; padding: 4px 6px; background: rgba(0,0,0,.7);
  color: #7f7; font: 11px/1.3 ui-monospace, Menlo, monospace; pointer-events: none; z-index: 9; white-space: pre-wrap; max-width: 90vw; }

/* ---- the on-screen pad (touch devices) ---- */
#pad { display: none; }
body.touch #keys { display: none; }
body.touch #pad { display: grid; }

/* Portrait: handheld layout — screen on top, controls below. */
body.touch:not(.land) #app { background: linear-gradient(180deg, #1c1a22 0, #1c1a22 44px, var(--shell) 44px); }
body.touch:not(.land) #bar { background: #1c1a22; }
body.touch:not(.land) #screen { flex: 0 0 auto; padding: 6px 8px 4px; }
body.touch:not(.land) #bezel { padding: 8px 8px 20px; background: var(--bezel); border-radius: 10px 10px 28px 10px; box-shadow: inset 0 0 0 2px #1a1720; position: relative; }
body.touch:not(.land) #bezel::after { content: "SUPER ROMEO · 8-BIT"; position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-size: 9px; letter-spacing: 0.25em; color: #8d86a6; line-height: 1; }
body.touch:not(.land) #pad {
  flex: 1 1 auto; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-items: center;
  padding: 4px 16px 14px; color: var(--ink); max-height: 420px;
}
body.touch:not(.land) #dpad { grid-row: 1; grid-column: 1; }
body.touch:not(.land) #btns { grid-row: 1; grid-column: 2; }
body.touch:not(.land) #mid { grid-row: 2; grid-column: 1 / span 2; }
/* Landscape: controls flank the screen. */
body.touch.land #app { flex-direction: row; flex-wrap: wrap; }
body.touch.land #bar { position: absolute; top: calc(var(--safe-t) + 2px); left: calc(var(--safe-l) + 6px); right: calc(var(--safe-r) + 6px); height: 40px; padding: 0; z-index: 2; pointer-events: none; }
body.touch.land #bar > * { pointer-events: auto; }
body.touch.land #brand { visibility: hidden; }
body.touch.land #screen { position: absolute; inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); pointer-events: none; }
body.touch.land #screen canvas { pointer-events: auto; }
body.touch.land #pad { position: absolute; inset: calc(var(--safe-t) + 44px) var(--safe-r) var(--safe-b) var(--safe-l); grid-template-columns: 1fr 1fr; align-items: end; padding: 0 14px 18px; pointer-events: none; }
/* The pad spans the screen in landscape: only its controls take touches, taps elsewhere reach the canvas (menus). */
body.touch.land #pad > * { pointer-events: auto; }
/* Landscape: START sits in the left column under ← Arcade, clear of the play field. */
body.touch.land #mid { position: absolute; top: calc(var(--safe-t) + 56px); left: calc(var(--safe-l) + 16px); }
body.touch.land #startBtn { background: rgba(47,43,56,.8); }

#dpad { justify-self: start; width: min(41vw, 172px); aspect-ratio: 1; position: relative; touch-action: none; }
body.land #dpad { width: min(24vw, 168px); }
#dpad .cross { position: absolute; inset: 0; pointer-events: none; }
#dpad .cross i { position: absolute; background: #25222b; box-shadow: inset 0 -4px 0 #111016; }
#dpad .u, #dpad .d { left: 34%; width: 32%; height: 36%; }
#dpad .u { top: 0; border-radius: 8px 8px 0 0; }
#dpad .d { bottom: 0; border-radius: 0 0 8px 8px; }
#dpad .l, #dpad .r { top: 34%; height: 32%; width: 36%; }
#dpad .l { left: 0; border-radius: 8px 0 0 8px; }
#dpad .r { right: 0; border-radius: 0 8px 8px 0; }
#dpad .c { left: 32%; top: 32%; width: 36%; height: 36%; box-shadow: none !important; }
#dpad .u::after, #dpad .d::after, #dpad .l::after, #dpad .r::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border: 7px solid transparent; }
#dpad .u::after { border-bottom-color: #4a4555; border-top-width: 0; }
#dpad .d::after { border-top-color: #4a4555; border-bottom-width: 0; }
#dpad .l::after { border-right-color: #4a4555; border-left-width: 0; }
#dpad .r::after { border-left-color: #4a4555; border-right-width: 0; }
#dpad[data-dir~="left"] .l, #dpad[data-dir~="right"] .r, #dpad[data-dir~="up"] .u, #dpad[data-dir~="down"] .d { background: #3a3642; }
body.land #dpad .cross i { background: rgba(37,34,43,.78); }

#mid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#startBtn { height: 30px; min-width: 64px; border-radius: 15px; font-size: 11px; letter-spacing: 0.15em; background: #7e7789; color: #f4f1ea; box-shadow: inset 0 -3px 0 #5e586a; }

#btns { justify-self: end; position: relative; width: min(45vw, 186px); height: min(38vw, 156px); touch-action: none; }
body.land #btns { width: min(28vw, 196px); height: min(24vw, 150px); }
.btn { position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: inset 0 -6px 0 var(--red-dark), 0 3px 0 rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; pointer-events: none; }
.btn b { font-size: 22px; line-height: 1; }
.btn small { font-size: 9px; letter-spacing: 0.12em; opacity: .85; margin-top: 2px; }
#bA { right: 0; top: 0; }
#bB { left: 0; bottom: 0; }
.btn.on { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--red-dark); filter: brightness(1.15); }
body.land .btn { background: rgba(200,40,60,.82); }

@media (prefers-reduced-motion: reduce) { .btn.on { transform: none; } }