:root {
  color-scheme: dark;
  --gold: #ffe28a;
  --ink: #030817;
  --panel: rgba(4, 12, 34, .92);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #020714; }
body {
  font-family: "Courier New", monospace;
  color: white;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
#app {
  width: 100vw;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 25%, #193867 0, #07162f 55%, #020714 100%);
}
#stage-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100vw, calc((100dvh - 185px) * 16 / 9));
  max-height: calc(100dvh - 185px);
  overflow: hidden;
  background: #69bdf2;
  box-shadow: 0 0 0 3px #a9d9ff, 0 0 0 7px #18345f, 0 16px 50px #000b;
  image-rendering: auto;
}
canvas { display: block; width: 100%; height: 100%; image-rendering: auto; outline: none; touch-action:none; }
#topbar { position: absolute; inset: 8px 10px auto; display: flex; align-items: start; justify-content: space-between; pointer-events: none; }
.brand { color: #fff; font-weight: 900; font-size: clamp(8px, 1.4vw, 15px); text-shadow: 2px 2px #132049; letter-spacing: 1px; }
.brand span { color: var(--gold); }
.options { display: flex; gap: 5px; pointer-events: auto; }
.small { border: 1px solid #b8dbff99; background: #06132daa; padding: 5px 7px; font-size: clamp(7px, 1vw, 11px); cursor: pointer; }
#overlay, #pause-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(#02081c33, #020817cc); z-index: 10; opacity: 0; pointer-events: none; transition: opacity .2s; }
#overlay.visible, #pause-overlay:not([hidden]) { opacity: 1; pointer-events: auto; }
.panel { width: min(84%, 650px); text-align: center; padding: clamp(20px, 5vw, 48px); border: 3px double #ffe9a4; background: linear-gradient(135deg, #081534ee, #190c31ee); box-shadow: 8px 8px 0 #0008, inset 0 0 35px #366ba633; }
.panel.compact { max-width: 520px; padding: 25px; }
.eyebrow { font-size: clamp(8px, 1.2vw, 13px); letter-spacing: 3px; color: #b9deff; }
h1 { margin: 10px 0; color: #fff4bf; font-size: clamp(28px, 6vw, 62px); line-height: .95; text-shadow: 4px 4px #9a2940, 7px 7px #150d2c; }
h2 { color: #fff4bf; }
.panel p { font: 700 clamp(10px, 1.7vw, 16px)/1.5 Arial, sans-serif; }
.panel button { margin: 10px; border: 0; padding: 13px 22px; background: #f6c94f; color: #24142c; box-shadow: 0 5px #a83d3d; font-weight: 900; cursor: pointer; }
.panel button:active { transform: translateY(3px); box-shadow: 0 2px #a83d3d; }
.keyline { margin-top: 16px; font-size: clamp(7px, 1.1vw, 11px); color: #b7ccec; }
.keyline b { color: #ffe28a; }
#touch-controls { width: min(680px, 96vw); height: 165px; flex: 0 0 165px; display: flex; align-items: center; justify-content: space-between; padding: 4px 4vw 0; touch-action:none; }
#dpad { width: 145px; height: 145px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 2px; filter: drop-shadow(0 5px 5px #0008); }
#dpad button { border: 2px solid #8abce066; background: #18395edb; font-size: 20px; }
#dpad button.active { background: #54a8db; color: #fffbd1; }
.up { grid-area: 1/2; border-radius: 9px 9px 0 0; }.left { grid-area: 2/1; border-radius: 9px 0 0 9px; }.right { grid-area: 2/3; border-radius: 0 9px 9px 0; }.down { grid-area: 3/2; border-radius: 0 0 9px 9px; }.dpad-center { grid-area: 2/2; background: #18395edb; position: relative; }.dpad-center:after { content:"✦"; position:absolute; inset:0; display:grid; place-items:center; color:#73a3c5; }
#actions { display: flex; align-items: center; gap: 17px; }
.action { width: 83px; height: 83px; border-radius: 50%; border: 4px solid #ffffff88; font-weight: 900; box-shadow: 0 7px 0 #071126aa, 0 0 18px #87dbff44; }
.action span { display: block; font-size: 31px; line-height: 30px; }.action small { font-size: 9px; }
.action.a { background: radial-gradient(circle at 35% 30%, #fff4ae, #e49a21 55%, #933c32); color: #321b31; }.action.b { width: 70px; height: 70px; background: radial-gradient(circle at 35% 30%, #b4e8ff, #4c60c5 55%, #27205d); }
.action.active { transform: translateY(4px); box-shadow: 0 3px 0 #071126aa, 0 0 25px #fff8ab; filter: brightness(1.35); }
@media (orientation: landscape) {
  #app { justify-content: center; }
  #stage-shell { width: min(100vw, calc(100dvh * 16 / 9)); max-height: 100dvh; }
  #touch-controls { position: fixed; inset: auto max(env(safe-area-inset-right), 10px) max(env(safe-area-inset-bottom), 8px) max(env(safe-area-inset-left), 10px); width: auto; height: auto; padding: 0; pointer-events: none; z-index: 8; }
  #dpad, #actions { pointer-events: auto; opacity: .58; }
  #dpad { width: 126px; height: 126px; }
  .action { width: 76px; height: 76px; }.action.b { width: 64px; height: 64px; }
}
@media (min-width: 900px) and (pointer: fine) {
  #stage-shell { width: min(96vw, calc(96dvh * 16 / 9)); max-height: 96dvh; }
  #touch-controls { position: fixed; opacity: .18; width: 100%; max-width: 1200px; pointer-events: none; }
}
@media (max-height: 430px) { .small { padding: 3px 5px; } .panel { padding: 16px; } }

/* Celestial brass, midnight glass, and tactile inset controls. */
#topbar { z-index: 12; }
.brand { font-family: Georgia, serif; letter-spacing: 2px; font-size: clamp(8px,1.2vw,13px); }
.small { border-color: #c6b48166; border-radius: 4px; background: linear-gradient(#273750ee,#0a1429ee); box-shadow: inset 0 1px #ffffff22,0 2px 5px #0005; min-height: 28px; }
#fullscreen-toggle { min-width:32px;padding:3px 7px;font-size:17px;line-height:1; }
.small:hover { border-color: #ffdf90; color: #fff0bc; }
button:focus-visible { outline: 2px solid #fff0b4; outline-offset: 3px; }
.panel { position:relative; border: 1px solid #dec383; border-radius: 12px; padding: clamp(16px,3vw,34px); background: radial-gradient(ellipse at top,#283d56ec,#0b142bea 65%,#090e1cf5); box-shadow: 0 0 0 5px #0b1123aa,0 0 0 6px #98855766,0 24px 65px #000a,inset 0 0 65px #87bfe511; }
#overlay .panel,#pause-overlay .panel { max-height:94%;overflow:auto;touch-action:pan-y; }
.panel:before { content:''; position:absolute; pointer-events:none; inset:6px; border:1px solid #c3af7655; border-radius:7px; }
.panel.compact { max-width:640px; padding:20px 28px; }
.crest { color:#f1d58f; font-size:30px; line-height:32px; margin-top:6px; text-shadow:0 0 25px #f6d28088; }
h1 { font-family:Georgia,serif; font-size:clamp(25px,5.4vw,58px); letter-spacing:2px; line-height:1.05; text-shadow:0 2px #946245,0 6px 18px #000; }
h2 { font-family:Georgia,serif; letter-spacing:3px; margin:12px 0; }
.panel p { color:#cddbec; font-weight:400; }
.scripture-note { display:block; margin:4px 0 10px; color:#d9c793; font:italic clamp(10px,1.2vw,13px) Georgia,serif; letter-spacing:.04em; }
.panel button { border:1px solid #ffe6a4; border-radius:5px; padding:13px 25px; letter-spacing:2px; background:linear-gradient(#ffedb0,#cf9c48); box-shadow:inset 0 1px #fff9d6,0 4px #65482f,0 7px 20px #0006; }
.panel button:hover { filter:brightness(1.08); }
.panel button:disabled { opacity:.6; cursor:wait; }
.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px auto 8px; }
.control-grid>span { border:1px solid #819dc633; border-radius:5px; padding:9px 5px; background:#040b1d66; font-size:clamp(8px,1.1vw,11px); }
.control-grid b { display:block; margin-top:8px; font:400 clamp(9px,1.1vw,12px) Arial,sans-serif; color:#d6e4f5; }
kbd { display:inline-block; padding:3px 5px; border:1px solid #92acc277; border-bottom-width:3px; border-radius:4px; background:#25374c; color:#fff1c3; font:inherit; }
.mix-controls { display:flex; justify-content:center; gap:25px; margin:14px 0; font:12px Arial,sans-serif; color:#d3deed; }
.mix-controls label { display:grid; gap:8px; text-align:left; width:42%; }
.mix-controls input { width:100%; accent-color:#e8c47c; }
#pc-hint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:max-content; max-width:70%; text-align:center; padding:6px 12px; border:1px solid #b5c9dc44; border-radius:4px; color:#e1e9f6; background:#071225aa; font-size:clamp(8px,1vw,11px); pointer-events:none; }
.action { border-color:#e5d6b1aa; box-shadow:inset 0 3px 3px #ffffff77,inset 0 -5px 7px #061027aa,0 6px 0 #071126cc,0 9px 15px #0008; }
#dpad button { background:linear-gradient(140deg,#385373,#162942); border-color:#95b6d780; box-shadow:inset 0 2px #ffffff33; }
@media (pointer:coarse) { #pc-hint { display:none; } .small { min-height:36px; } }
@media (max-width:600px) { .crest { display:none; } .panel { width:90%; padding:12px; } .control-grid { margin:8px 0; gap:4px; } .control-grid>span { padding:4px 2px; } .panel button { padding:8px 12px; margin:5px; } .keyline { margin-top:7px; } .panel p { margin:7px 0; } .eyebrow { letter-spacing:1px; } .brand { display:none; } .options { margin-left:auto; } .panel.compact { padding:9px 16px; } .mix-controls { margin:8px 0; } .hint { font-size:10px!important; } }
@media (max-height:430px) { .crest { display:none; } .panel h1 { font-size:32px; } .panel p { margin:5px; } .control-grid { margin:8px 0; } .panel.compact { padding:9px 20px; } .panel.compact h2 { margin:6px; } .mix-controls { margin:6px 0; } }

#run-result { margin:8px auto; color:#ffe7a6; font:700 clamp(12px,1.8vw,18px) Georgia,serif; }
#hall-open { background:linear-gradient(#b5d4e9,#5a88a5); color:#081529; }
.difficulty-select { display:flex;justify-content:center;gap:6px;margin:10px auto 2px; }
.panel .difficulty-select button { margin:2px;padding:8px 20px;background:#142945;color:#e2eeff;box-shadow:none;border-color:#8ca7c488; }
.panel .difficulty-select button.selected { color:#21172d;background:linear-gradient(#ffe9aa,#c89b52);border-color:#ffe9aa; }
.difficulty-note { display:block;color:#bbd5ea;font:11px Arial,sans-serif; }
#hall-overlay { position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#020815e8; }
#hall-overlay[hidden],#hall-entry[hidden],#hall-auth[hidden],#run-result[hidden] { display:none!important; }
.hall-panel { width:min(92%,750px);max-height:94%;padding:clamp(10px,1.6vw,20px);display:flex;flex-direction:column;align-items:stretch; }
.hall-panel h2 { margin:4px 0;color:#ffe7aa;font-size:clamp(20px,3.1vw,35px); }
.hall-panel p { margin:3px 0;font-size:clamp(9px,1vw,12px); }
.hall-panel #hall-close { position:absolute;right:12px;top:8px;padding:2px 9px;margin:0;background:#283d59;color:#fff;font-size:19px;z-index:1; }
.hall-difficulties,.hall-tabs { display:flex;justify-content:center;gap:5px; }
.hall-panel button { margin:3px;padding:5px 10px;font-size:clamp(8px,.95vw,12px);letter-spacing:.5px; }
.hall-difficulties button,.hall-tabs button { color:#dcecff;background:#142945;box-shadow:none;border-color:#7498ba88; }
.hall-difficulties button.selected,.hall-tabs button.selected { color:#21172d;background:linear-gradient(#ffe9aa,#c89b52);border-color:#ffe9aa; }
.hall-heading { display:flex;justify-content:space-between;gap:8px;margin:6px 0 2px;color:#ffe6a4;font-size:clamp(8px,.9vw,11px); }
.hall-list { overflow:auto;touch-action:pan-y;min-height:80px;max-height:min(42vh,310px);border:1px solid #b6cda877;background:#06142bd9; }
.hall-list table { width:100%;border-collapse:collapse;font:clamp(10px,1.05vw,13px) 'Courier New',monospace;text-align:left; }
.hall-list th,.hall-list td { padding:4px 7px;border-bottom:1px solid #9ab4cf22;white-space:nowrap; }
.hall-list th { position:sticky;top:0;background:#152d4b;color:#ffe5a5; }
.hall-list td:nth-child(3),.hall-list td:nth-child(4),.hall-list td:nth-child(5) { text-align:right; }
.hall-list tr:nth-child(-n+3) td:first-child { color:#ffe08c;font-weight:bold; }
#hall-entry { display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:5px;font-size:10px;color:#ffe5a5; }
#hall-auth { margin-top:7px;padding:7px;border:1px solid #87a6c455;border-radius:5px;background:#0a1b35b8; }
#hall-auth p { color:#ffe6ad; }
#hall-name { width:120px;max-width:30%;padding:5px;border:1px solid #aabed4;border-radius:3px;background:#e4eff9;color:#101b31;font:12px 'Courier New',monospace; }
#hall-feedback { min-height:1.4em;color:#b9d7ed; }
.hall-panel .hall-rules { color:#d8c694;font-size:clamp(8px,.85vw,10px); }
@media(max-height:530px) { .hall-list { max-height:28vh; } .hall-panel h2 { margin:0; } .hall-panel p { margin:1px 0; } }

/* Fullscreen includes the controls; the 16:9 playfield is letterboxed, never stretched. */
#app:fullscreen,#app.immersive { position:fixed;inset:0;width:100vw;height:100dvh;z-index:1000;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#app:fullscreen #stage-shell,#app.immersive #stage-shell { width:min(100%,calc(100dvh * 16 / 9));max-height:100%;box-shadow:none; }
@media (orientation:portrait) and (pointer:coarse) {
  /* Menus use the entire viewport, even when the wide game canvas is letterboxed. */
  #overlay,#pause-overlay,#hall-overlay { position:fixed;inset:0;z-index:30; }
  #overlay .panel,#pause-overlay .panel,#hall-overlay .panel { max-height:calc(100dvh - 30px);overflow:auto; }
  #touch-controls { width:min(680px,96vw); }
}
@media (orientation:landscape) and (max-height:430px) and (pointer:coarse) {
  #topbar { inset:4px 6px auto; }
  .options { gap:3px; }
  .small { min-height:29px;padding:2px 5px; }
  #fullscreen-toggle { min-width:29px;font-size:15px; }
}

/* The result panel keeps its two actions on one row, with the score above them. */
.panel-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }

/* Short windows and landscape phones: the panel is barely taller than its own
   content, so the Hall of Fame button used to sit below the fold with only a
   hidden inner scroll to reach it. After a win or a loss the controls crib and
   the decorative lines step aside so both buttons stay on screen. */
@media (max-height: 620px) {
  #overlay .panel { padding: 12px 20px; }
  #overlay .crest { display: none; }
  #overlay .panel h1 { margin: 4px 0; }
  #overlay .panel p { margin: 4px 0; }
  #overlay.result .control-grid,
  #overlay.result .keyline,
  #overlay.result .scripture-note,
  #overlay.result .difficulty-note { display: none; }
  #overlay.result .difficulty-select { margin: 4px 0 0; }
}

/* Landscape phones (iPhone SE is only 320px tall): the two result buttons have
   to share one row, or the Hall of Fame button drops below the panel again. */
@media (max-height: 430px) {
  #overlay.result .panel-actions button { margin: 5px; padding: 9px 14px; font-size: 13px; letter-spacing: 1px; }
  #overlay.result .panel p { margin: 2px 0; font-size: 12px; }
  #overlay.result .arcade-back { margin-top: 4px; }
}