:root {
    --bg: #04060a;
    --scene-ink: #edf2f6;
    --scene-ink-soft: #b4bfca;
    --scene-bronze: #d9b673;
    --scrim: rgba(3, 5, 9, 0.9);
    --ink: #12171d;
    --ink-soft: #46515d;
    --plate: rgba(236, 241, 246, 0.86);
    --plate-line: rgba(18, 23, 29, 0.16);
    --exit-ink: #1fae5c;
    --exit-plate: #07140c;
    --exit-line: rgba(31, 174, 92, 0.55);
    --exit-glow: rgba(31, 174, 92, 0.3);
    --focus: #2b6be4;
    --joy-ring: rgba(255, 255, 255, 0.38);
    --joy-knob: rgba(255, 255, 255, 0.3);
    --fade: #000000;
    --rec-ink: #ffe2de;
    --rec-dot: #ff2b1c;
    --rec-line: rgba(255, 64, 48, 0.42);
    --rec-plate: rgba(18, 3, 4, 0.62);
    --flash: #f2fff7;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #e8eef4;
      --ink-soft: #a6b2be;
      --plate: rgba(9, 13, 19, 0.7);
      --plate-line: rgba(232, 238, 244, 0.16);
      --exit-ink: #3fe88e;
      --exit-line: rgba(63, 232, 142, 0.5);
      --exit-glow: rgba(63, 232, 142, 0.35);
      --focus: #8fb6ff;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --ink: #e8eef4;
    --ink-soft: #a6b2be;
    --plate: rgba(9, 13, 19, 0.7);
    --plate-line: rgba(232, 238, 244, 0.16);
    --exit-ink: #3fe88e;
    --exit-line: rgba(63, 232, 142, 0.5);
    --exit-glow: rgba(63, 232, 142, 0.35);
    --focus: #8fb6ff;
    color-scheme: dark;
  }
  html { height: 100%; background: var(--bg); scroll-padding-top: env(safe-area-inset-top, 0px); }
  body {
    height: 100%; margin: 0; background: var(--bg); color: var(--scene-ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    overflow: hidden; -webkit-tap-highlight-color: transparent;
  }
  #app { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
  #app > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; }
  #app.pre .brand, #app.pre .tools, #app.pre .mode, #app.pre .rec, #app.pre .run, #app.pre .act { visibility: hidden; }

  .brand { position: absolute; left: 18px; top: 14px; pointer-events: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); }
  .brand .name { margin: 0; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 19px; letter-spacing: 0.06em; color: var(--scene-bronze); }
  .brand .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--scene-ink-soft); }

  .tools { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; align-items: center; }
  .tbtn {
    appearance: none; font: 500 13px/1.1 "IBM Plex Sans", system-ui, sans-serif; color: var(--ink);
    background: var(--plate); border: 1px solid var(--plate-line); border-radius: 9px; padding: 9px 11px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer;
  }
  .fps { position: absolute; top: 46px; right: 4px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--scene-ink-soft); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); min-width: 46px; text-align: right; pointer-events: none; }

  .sign {
    appearance: none; font: 600 15px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0.01em;
    color: var(--exit-ink); background: var(--exit-plate); border: 1.5px solid var(--exit-line); border-radius: 5px;
    padding: 13px 18px; text-shadow: 0 0 12px var(--exit-glow); box-shadow: 0 0 22px var(--exit-glow); cursor: pointer;
  }
  .mode { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; }

  .toast {
    position: absolute; left: 50%; bottom: 78px; transform: translate(-50%, 8px); max-width: min(86%, 420px);
    padding: 11px 14px; border-radius: 9px; background: var(--plate); border: 1px solid var(--plate-line); color: var(--ink);
    font-size: 14px; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .toast.on { opacity: 1; transform: translate(-50%, 0); }

  .rec {
    position: absolute; left: 18px; top: 64px; display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 9px; border-radius: 7px; background: var(--rec-plate); border: 1px solid var(--rec-line);
    font: 600 13px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
    color: var(--rec-ink); opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .rec.on { opacity: 1; transform: none; }
  .rec .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec-dot); box-shadow: 0 0 9px var(--rec-dot); }

  .act {
    position: absolute; left: 50%; bottom: 76px; transform: translate(-50%, 6px); display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; width: max-content; max-width: 94vw; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .act.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .act .tbtn { padding: 12px 16px; font-size: 15px; }
  #app.acting .toast { bottom: 140px; }
  .run { position: absolute; right: 14px; bottom: 18px; display: none; padding: 12px 16px; font-size: 15px; }
  #app.touch .run { display: block; }
  .run[aria-pressed="true"] { border-color: var(--exit-line); color: var(--exit-ink); background: var(--exit-plate); box-shadow: 0 0 16px var(--exit-glow); }
  #app.riding .mode, #app.riding .run { visibility: hidden; }
  .flash { position: absolute; inset: 0; background: var(--flash); opacity: 0; pointer-events: none; transition: opacity 0.8s ease; }
  .flash.on { opacity: 1; transition-duration: 0.4s; }
  .arrive {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
  }
  .arrive.on { opacity: 1; pointer-events: auto; }
  .arrive .card { max-width: 30em; text-align: center; }
  .arrive .kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--scene-ink-soft); }
  .arrive h2 { margin: 0 0 14px; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(36px, 9vw, 60px); line-height: 1; letter-spacing: 0.04em; color: var(--scene-bronze); }
  .arrive p { margin: 0 auto 22px; max-width: 26em; font-size: 16px; line-height: 1.55; color: var(--scene-ink); }

  .menu {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .menu.on { opacity: 1; pointer-events: auto; }
  .menu .card { width: min(360px, 100%); text-align: center; }
  .menu h2 { margin: 0 0 18px; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 34px; letter-spacing: 0.04em; color: var(--scene-bronze); }
  .menu-actions { display: flex; flex-direction: column; gap: 10px; }
  .menu-actions .sign, .menu-actions .tbtn { width: 100%; padding: 13px 16px; font-size: 15px; }
  .menu-help { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--scene-ink-soft); }
  #app.touch #mMouse { display: none; }
  .arrive-alt { margin: 14px 0 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .act kbd { display: inline-block; margin-left: 9px; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; font: 600 11px/1.4 "IBM Plex Sans", system-ui, sans-serif; opacity: 0.7; }
  @media (max-width: 560px) { #btnSound, #btnQuality { display: none; } }
  .cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45); display: none; pointer-events: none; }
  #app.locked .cross { display: block; }
  .joy { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1.5px solid var(--joy-ring); display: none; pointer-events: none; }
  .joy .knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--joy-knob); }

  .fade { position: absolute; inset: 0; background: var(--fade); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; }
  .fade.on { opacity: 1; }

  .intro {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 22px 28px;
    background: linear-gradient(to bottom, rgba(3, 5, 9, 0) 28%, var(--scrim) 80%); transition: opacity 0.6s ease;
  }
  .intro.gone { opacity: 0; pointer-events: none; }
  .intro h1 { margin: 0 0 14px; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(42px, 11vw, 76px); line-height: 1; letter-spacing: 0.04em; color: var(--scene-bronze); }
  .intro p { margin: 0 0 12px; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--scene-ink); }
  .intro p.how { font-size: 14px; color: var(--scene-ink-soft); }
  .intro .sign { align-self: flex-start; margin-top: 8px; font-size: 16px; padding: 14px 24px; }

  .tbtn:focus-visible, .sign:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .fatal { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--scene-ink); background: var(--bg); font-size: 16px; line-height: 1.5; }
  .fatal[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) { .toast, .fade, .intro, .rec, .act, .flash, .arrive, .menu { transition: none; } }