:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    --bg: #000; --hint: rgba(255,255,255,.55); --btn-bg: rgba(255,255,255,.08); --btn-border: rgba(255,255,255,.25); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000; } }
  :root[data-theme="dark"] { --bg: #000; }
  html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
  html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
  body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
  #stage { position: relative; width: 100%; height: 100%; }
  canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
  canvas.pixel { image-rendering: pixelated; }
  canvas:active { cursor: grabbing; }
  button { font: inherit; font-size: 13px; color: #fff; background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
  button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* ---- Game UI: drawn into a low-res canvas, with invisible buttons on top for input ---- */
  #ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  #uiCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  #uiCanvas.pixel { image-rendering: pixelated; }
  #uiCanvasHi { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  #uiCanvasHi.pixel { image-rendering: pixelated; }
  .hit { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0; border: 0; border-radius: 8px;
    background: transparent; color: transparent; pointer-events: auto; cursor: pointer; }
  .hit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .hit[hidden] { display: none; }
  a.hit { font-size: 0; text-decoration: none; }
  .sound { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; width: 34px; height: 34px; padding: 6px;
    background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; pointer-events: auto; opacity: .75; }
  .sound:hover { opacity: 1; }
  .sound svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
  .sound .x { display: none; } .sound.off .x { display: inline; } .sound.off .wave { display: none; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }