:root{
  /* ---- ink ---------------------------------------------------------- */
  --ink:#241f47;          /* body copy, sits over the light lower half   */
  --ink-head:#241f47;     /* header + HUD, sits over the upper half      */
  --muted:#857fa6;
  --faint:#9a95b6;
  --line:#e4e1f2;
  --accent:#6a5bf0;
  --accent-deep:#4a3ad6;
  --mint:#2fc79a;

  /* ---- backdrop ------------------------------------------------------ */
  --g-top:#f7f5fd;
  --g-mid:#f4ece0;
  --g-bot:#f1e2c6;
  --hill:rgba(255,253,247,0.72);
  --arcline:rgba(36,31,71,0.07);

  /* ---- surfaces ------------------------------------------------------ */
  --glass:rgba(250,248,255,0.72);
  --card:rgba(250,248,255,0.93);

  /* ---- read by game.js ----------------------------------------------- */
  --shadow-rgb:58,49,112;
  --shadow-op:0.14;
  --pad:#6a5bf0;
  --pad-alt:#9b8ffb;
  --arc:#2fc79a;

  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--g-top);
  font-synthesis:none;
}

/* deep — the Arc reading: cool night at the top, warm ground below */
body[data-bg="deep"]{
  --ink:#1b2438;
  --ink-head:#e8eef8;
  --muted:#6f7b93;
  --faint:#8d97ab;
  --line:rgba(27,36,56,0.12);
  --accent:#5b6ff0;
  --accent-deep:#3d51d6;
  --g-top:#0b1730;
  --g-mid:#3c6b8c;
  --g-bot:#f0e2c6;
  --hill:rgba(255,252,244,0.80);
  --arcline:rgba(255,255,255,0.14);
  --glass:rgba(250,248,255,0.62);
  --card:rgba(252,250,255,0.94);
  --shadow-rgb:48,40,86;
  --shadow-op:0.16;
  --pad:#6d7ef5;
  --pad-alt:#a8b2fb;
  --arc:#2fc79a;
}

/* ember — same structure, hue rotated off Arc's blue so the violet pops */
body[data-bg="ember"]{
  --ink:#2b1f2c;
  --ink-head:#f6e9e0;
  --muted:#7d6a72;
  --faint:#94838a;
  --line:rgba(43,31,44,0.12);
  --accent:#6a5bf0;
  --accent-deep:#4a3ad6;
  --g-top:#1a1130;
  --g-mid:#a2603f;
  --g-bot:#f6e4c4;
  --hill:rgba(255,250,240,0.78);
  --arcline:rgba(255,255,255,0.16);
  --glass:rgba(255,250,244,0.66);
  --card:rgba(255,251,246,0.94);
  --shadow-rgb:74,44,40;
  --shadow-op:0.16;
  --pad:#6a5bf0;
  --pad-alt:#a596fb;
  --arc:#2fc79a;
}

*{box-sizing:border-box}

/* the backdrop lives behind everything; the canvas is transparent on top */
body::before{
  content:'';position:fixed;inset:0;z-index:-3;
  background:linear-gradient(180deg,
    var(--g-top) 0%, var(--g-top) 14%,
    var(--g-mid) 52%,
    var(--g-bot) 88%, var(--g-bot) 100%);
}
body::after{
  content:'';position:fixed;z-index:-2;
  left:-30%;right:-30%;bottom:-118vh;height:160vh;
  border-radius:50%;
  background:var(--hill);
  box-shadow:0 -1px 0 rgba(255,255,255,0.35);
}
.arcline{
  position:fixed;z-index:-2;right:-14vw;top:-26vh;width:78vw;height:150vh;
  border-radius:50%;border:1px solid var(--arcline);border-left-color:transparent;
  pointer-events:none;
}
@media(max-width:700px){.arcline{right:-40vw;width:120vw}}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{display:grid;grid-template-rows:86px minmax(0,1fr) 67px;min-height:430px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,main:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

header{padding:0 42px;display:flex;align-items:center;justify-content:space-between;z-index:3;color:var(--ink-head)}
.lockup{display:flex;align-items:center;gap:16px;min-width:0}
.ca-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid currentColor;background:none;border-radius:30px;
  padding:6px 12px;font-family:'Courier New',monospace;font-size:12px;letter-spacing:.4px;
  color:var(--ink-head);opacity:.62;cursor:default;white-space:nowrap;
}
.ca-chip[data-live="1"]{cursor:pointer}
.ca-chip[data-live="1"]:hover{opacity:.95}
.ca-chip[data-copied="1"]{opacity:1;border-color:var(--mint);color:var(--mint)}
.ca-key{opacity:.6;letter-spacing:1.6px}
.ca-copy{font-size:13px}
.brand{font-family:'Courier New',monospace;font-weight:900;font-size:34px;letter-spacing:-3px}
.brand span{color:var(--accent)}
nav{display:flex;gap:32px;align-items:center;font-size:14px}
nav a{padding:10px 0;white-space:nowrap}
nav a:hover{opacity:.72}
nav a span{font-size:13px;opacity:.6;margin-left:6px}
nav a[aria-disabled=true]{opacity:.55;cursor:default}

main{position:relative;min-height:0;outline:none;isolation:isolate;touch-action:none}
#scene{position:absolute;inset:0;z-index:-1}
canvas{display:block;width:100%;height:100%}

#intro{position:absolute;bottom:5%;left:0;width:100%;display:flex;align-items:center;flex-direction:column;text-align:center;pointer-events:none}
.tiny-label{font-family:'Courier New',monospace;font-size:12px;letter-spacing:.25px;color:var(--muted)}
#start-button{pointer-events:auto;border:0;background:none;font-size:22px;letter-spacing:-.6px;font-weight:600;padding:10px 20px;margin-top:6px}
#start-button:disabled{cursor:wait;color:#a39eba}
#intro p,#game-help{font-size:12px;color:var(--muted);margin:9px 0 0}
#intro p span,#game-help span{margin:0 9px}

#score-hud{position:absolute;top:16px;left:42px;pointer-events:none;color:var(--ink-head)}
#score-hud>span{font-family:'Courier New',monospace;font-size:11px;letter-spacing:2px;opacity:.7}
#score-hud strong{display:block;font-size:48px;letter-spacing:-2px;line-height:1.15;margin-top:5px;font-weight:500;font-variant-numeric:tabular-nums}
#score-hud strong span{font-size:15px;letter-spacing:0;opacity:.65;margin-left:6px}

.quiet-button{border:0;background:var(--glass);padding:10px 14px;border-radius:30px;color:var(--muted);font-size:12px;backdrop-filter:blur(8px)}
#pause-button{position:absolute;right:29px;top:12px;background:transparent;color:var(--ink-head);opacity:.8}
#motion-button{position:absolute;right:29px;bottom:20px}

#game-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;min-width:290px;padding:30px 30px 25px;background:var(--card);border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(18px);box-shadow:0 20px 90px #241f470d}
#game-overlay h1{font-size:38px;letter-spacing:-1.8px;font-weight:600;margin:14px 0}
#overlay-copy{font-size:15px;line-height:1.5;color:#756f96;margin:0 0 20px}
#replay-button{display:block;background:var(--accent);border:0;border-radius:40px;color:#fff;padding:14px 24px;font-size:15px;margin:0 auto}
#replay-button:hover{background:var(--accent-deep)}
.back-button{border:0;background:none;font-size:13px;color:var(--muted);padding:17px 10px 3px}
.back-button:hover{color:var(--accent-deep)}

#game-help{position:absolute;bottom:18px;left:0;width:100%;text-align:center;pointer-events:none}
#mobile-controls{position:absolute;inset:auto 18px 14px;display:flex;justify-content:space-between;pointer-events:none}
#mobile-controls button{pointer-events:auto;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);font-size:27px;color:var(--accent);border-radius:50%;height:54px;width:54px;touch-action:none;user-select:none}
#mobile-controls button:active{background:#e3dffb}

footer{padding:0 42px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:3;font-size:13px}
.burn-stat{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.burn-icon{width:22px;height:22px;border-radius:50%;background:#e6e2fd;display:grid;place-items:center;color:var(--accent);font-size:16px}
.burn-stat strong{font-size:17px;font-weight:500;letter-spacing:-.2px}
.burn-unit{color:var(--faint);font-size:12px}
.burn-detail{color:var(--faint);margin-left:13px;font-size:12px}
.footer-right{display:flex;gap:27px;align-items:center}
.chain{color:var(--faint);font-family:'Courier New',monospace;font-size:12px}
#burn-source,#privacy-link{font-size:12px;color:#6e6795}
#burn-source:hover,#privacy-link:hover{color:var(--accent-deep)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
body[data-mode=playing] main{cursor:default}
body[data-mode=lobby] main{cursor:pointer}

@media(min-width:800px){#mobile-controls{display:none!important}}
@media(max-width:700px){
  body{grid-template-rows:78px minmax(0,1fr) 76px}
  header{padding:0 19px;gap:15px}
  .brand{font-size:26px;letter-spacing:-2.4px}
  nav{gap:15px;font-size:12px}
  nav a span{display:none}
  #intro{bottom:7%}
  .tiny-label{font-size:11px}
  #start-button{font-size:20px}
  #intro p{font-size:11px}
  #motion-button{right:8px;bottom:2px;font-size:11px}
  #score-hud{top:9px;left:20px}
  #score-hud strong{font-size:35px}
  #pause-button{right:8px;top:6px}
  #game-help{font-size:11px;bottom:33px;left:20%;width:60%}
  footer{padding:0 19px;gap:8px;align-items:center;font-size:12px}
  .burn-stat{gap:8px;flex-wrap:wrap;max-width:70%}
  .burn-stat strong{font-size:15px}
  .burn-icon{display:none}
  .burn-detail{flex-basis:100%;margin:0;font-size:11px}
  .footer-right{flex-direction:column;align-items:flex-end;gap:8px}
  .chain{font-size:11px}
  #burn-source,#privacy-link{font-size:11px}
}
/* four nav items do not fit a phone at full length, so the long one shortens */
nav .short{display:none}
@media(max-width:620px){
  .lockup{gap:8px}
  .ca-chip{padding:4px 8px;font-size:10px;gap:5px}
  .ca-key{display:none}
  nav .full{display:none}
  nav .short{display:inline}
  nav{flex:1;justify-content:flex-end;gap:11px;font-size:11px}
  nav a{white-space:nowrap;max-width:none}
  header{gap:12px}
}
@media(max-width:390px){
  nav{gap:8px;font-size:10.5px}
  header{padding:0 11px;gap:7px}
  .brand{font-size:22px;letter-spacing:-2px}
  .ca-chip{font-size:9.5px;padding:3px 7px}
  #intro p{font-size:10px}
  .brand{font-size:24px}
}
@media(max-height:600px) and (min-width:701px){
  body{grid-template-rows:60px minmax(0,1fr) 48px}
  #intro{bottom:1%}
  .tiny-label{display:none}
  #intro p{margin-top:0}
  #motion-button{bottom:5px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}