/* Kept in its own file, not a <style> block, so the page's CSP can be
   `style-src 'self'` with no 'unsafe-inline'. */
:root {
  --bg: #120d14; --panel: #1d1620; --line: #332637; --fg: #f0e9ee;
  --dim: #9c8fa4; --accent: #e04a4a; --ok: #5ec98a; --warn: #e0a33a;
}
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* Column layout rather than an overlaid HUD: this game keeps its dialogue box
   and its message log along the bottom of the screen, which is exactly where an
   overlaid control bar would sit. The canvas gets the leftover height. */
body { display: flex; flex-direction: column; }
#wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center;
        justify-content: center; padding: 4px; }
/* width/height:auto leaves the canvas at its intrinsic 240x160. Filling the box
   and letting object-fit letterbox it is what actually scales up at 3:2. */
canvas { display: block; background: #000; image-rendering: pixelated;
         width: 100%; height: 100%; object-fit: contain; }

#overlay { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
           gap: 18px; align-items: center; justify-content: center;
           background: rgba(18, 13, 20, .97); padding: 24px; text-align: center;
           overflow-y: auto; }
#overlay.hidden { display: none; }
h1 { margin: 0; font-size: clamp(19px, 4.6vw, 28px); letter-spacing: .01em; }
.sub { margin: 0; color: var(--dim); max-width: 62ch; }
a { color: #8ab4f8; }
#pick { background: var(--panel); border: 2px dashed var(--line); border-radius: 14px;
        padding: 26px 34px; cursor: pointer; max-width: 62ch;
        transition: border-color .15s, background .15s; }
#pick:hover, #pick.drag { border-color: var(--accent); background: #251b29; }
#pick b { display: block; font-size: 16px; margin-bottom: 6px; }
#pick .hint { color: var(--dim); font-size: 12.5px; }
#rom-file { display: none; }
.note { color: var(--dim); font-size: 12.5px; max-width: 64ch; }
.note strong { color: var(--fg); font-weight: 600; }
#err { color: #ff8a7b; min-height: 1.4em; }

#hud { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
       justify-content: center; padding: 7px 12px; background: #0d090f;
       border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
#hud button { background: var(--panel); color: var(--fg); border: 1px solid var(--line);
              border-radius: 7px; padding: 5px 11px; font: inherit; cursor: pointer; }
#hud button:hover { border-color: var(--accent); }
#hud .sep { opacity: .4; }
#mutebtn.muted { color: var(--warn); }
#savedot { color: var(--ok); opacity: 0; transition: opacity .3s; }
#savedot.on { opacity: 1; }
kbd { border: 1px solid #473a4c; border-bottom-width: 2px; border-radius: 4px;
      padding: 0 5px; font: 11.5px ui-monospace, monospace; color: var(--fg); }
@media (max-width: 820px) { #hud .deskonly { display: none; } }