html, body { margin: 0; }
:root {
    color-scheme: dark;
    --night: #07060a;
    --soot: #15110f;
    --ash: #8d8279;
    --bone: #e9dcc6;
    --ember: #f08a2c;
    --blood: #8e1f14;
  }
  html, body { height: 100%; }
  body { background: var(--night); color: var(--bone); font-family: "Spectral", Georgia, serif; overflow: hidden; }
  #stage { position: fixed; inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0; background: #000; }
  #unity-canvas { width: 100%; height: 100%; display: block; background: #000; outline: none; }
  #veil {
    position: absolute; inset: 0; display: grid; place-items: center; padding-inline: 16px;
    background: radial-gradient(120% 90% at 50% 62%, rgba(240,138,44,.13), transparent 55%), var(--night);
    transition: opacity .6s ease;
  }
  #veil.gone { opacity: 0; pointer-events: none; }
  .card { width: min(560px, 100%); display: grid; gap: 22px; text-align: center; }
  h1 { margin: 0; font-family: "IM Fell English SC", "Times New Roman", serif; font-weight: 400; font-size: clamp(44px, 9vw, 86px); letter-spacing: .06em; line-height: .95; text-wrap: balance; color: var(--bone); text-shadow: 0 0 28px rgba(240,138,44,.35); }
  .sub { margin: 0; color: var(--ash); font-size: 15px; letter-spacing: .02em; }
  .fuel { display: grid; gap: 8px; }
  .fuel-label { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); font-variant-numeric: tabular-nums; }
  .bar { height: 6px; background: var(--soot); border: 1px solid #2a211b; border-radius: 3px; overflow: hidden; }
  .bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--blood), var(--ember)); box-shadow: 0 0 12px var(--ember); transition: width .25s linear; }
  #go-unused {
    justify-self: center; font: 600 16px/1 "Spectral", Georgia, serif; letter-spacing: .12em; text-transform: uppercase;
    padding: 14px 30px; color: var(--night); background: var(--ember); border: 0; border-radius: 3px; cursor: pointer;
    box-shadow: 0 0 0 1px #ffb46a inset, 0 8px 30px rgba(240,138,44,.35);
  }
  #go:focus-visible, #fs:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
  #go[hidden] { display: none; }
  .keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 18px; text-align: left; font-size: 13px; color: var(--ash); }
  .keys b { color: var(--bone); font-weight: 600; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .04em; margin-inline-end: 6px; }
  #err { color: #ff9d7a; font-size: 14px; white-space: pre-wrap; text-align: left; }
  #fs {
    position: absolute; right: 12px; top: 12px; z-index: 5; font: 600 12px/1 "Spectral", Georgia, serif; letter-spacing: .12em; text-transform: uppercase;
    padding: 8px 12px; color: var(--bone); background: rgba(7,6,10,.55); border: 1px solid rgba(233,220,198,.25); border-radius: 3px; cursor: pointer;
  }
  @media (prefers-reduced-motion: reduce) { #veil, .bar > i { transition: none; } }