:root{
  --sand:#E9C98F;
  --navy:#17203A;
  --panel:rgba(23,32,58,.78);
  --blue:#2F7BFF;
  --red:#E5383B;
  --gold:#FFB020;
  --gold-dark:#C77A00;
  --white:#FFFFFF;
  --muted:#C9D3EA;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--sand);color:var(--white);font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#stage{position:fixed;inset:0;touch-action:none}
#stage canvas{display:block;width:100%;height:100%}
.display{font-family:'Lilita One','Arial Black',Impact,sans-serif;font-weight:400;letter-spacing:.01em}
.outline{text-shadow:0 2px 0 var(--navy),0 -1px 0 var(--navy),1px 0 0 var(--navy),-1px 0 0 var(--navy),0 3px 6px rgba(0,0,0,.35)}

.hud-top{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:560px;margin:0 auto}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row.tight{gap:8px}
.chip{background:var(--panel);border-radius:999px;padding:6px 14px;font-size:15px;display:flex;align-items:center;gap:8px}
.chip small{color:var(--muted);font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.icon-btn{pointer-events:auto;width:36px;height:36px;border-radius:50%;border:0;background:var(--panel);color:var(--white);display:grid;place-items:center;cursor:pointer;text-decoration:none;padding:0}
.icon-btn svg{width:20px;height:20px}
.icon-btn:focus-visible{outline:3px solid var(--white);outline-offset:2px}
#muteBtn .off{display:none}
#muteBtn[aria-pressed="true"] .on{display:none}
#muteBtn[aria-pressed="true"] .off{display:block}
.bar{position:relative;height:26px;border-radius:999px;background:var(--panel);overflow:hidden;border:2px solid rgba(255,255,255,.18)}
.bar.mini{height:14px;width:120px;border-width:1px;margin-top:6px}
.bar .fill{position:absolute;inset:0;width:100%;background:linear-gradient(180deg,#FF6B6B,var(--red) 60%,#B51F24);transition:width .15s linear}
.bar .fill.blue{background:linear-gradient(180deg,#6FA6FF,var(--blue) 60%,#1B55C4)}
.bar .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:15px}
.bar .lbl small{font-family:'Nunito',sans-serif;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

.hud-bottom{position:fixed;left:0;right:0;bottom:0;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 22px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none;max-width:560px;margin:0 auto}
.count{background:var(--panel);border-radius:18px;padding:8px 14px;display:flex;flex-direction:column;line-height:1.05}
.count b{font-size:28px;font-variant-numeric:tabular-nums}
.count small{color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.count small.gap{margin-top:3px}
.giant{pointer-events:auto;width:76px;height:76px;border-radius:50%;border:0;padding:0;cursor:pointer;position:relative;
  background:conic-gradient(var(--gold) calc(var(--p,0)*1%),rgba(23,32,58,.78) 0);display:grid;place-items:center;transition:transform .12s}
.giant span{width:62px;height:62px;border-radius:50%;background:var(--navy);display:grid;place-items:center;color:var(--white)}
.giant svg{width:30px;height:30px}
.giant em{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-style:normal;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.giant.ready span{background:var(--blue)}
.giant.ready{animation:pulse 1s ease-in-out infinite}
.giant:disabled{cursor:default}
.giant:focus-visible{outline:3px solid var(--white);outline-offset:3px}
@keyframes pulse{50%{transform:scale(1.08)}}

.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(ellipse at center,rgba(23,32,58,.55),rgba(23,32,58,.84));z-index:5}
.card{width:min(100%,380px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.card h1{margin:0;font-size:clamp(46px,14vw,68px);line-height:.9;text-wrap:balance}
.card h1 .r{color:var(--red)} .card h1 .b{color:#7FB0FF}
.card p{margin:0;font-size:16px;line-height:1.45;color:#EAF0FF;max-width:32ch}
.card .keys{font-size:13px;color:var(--muted)}
.stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.stat{background:rgba(255,255,255,.1);border-radius:14px;padding:8px 14px;min-width:110px}
.stat b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.stat small{font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.btn{font-family:'Lilita One','Arial Black',sans-serif;font-size:24px;color:var(--navy);background:var(--gold);border:0;border-radius:18px;padding:12px 40px 14px;
  box-shadow:0 6px 0 var(--gold-dark),0 10px 20px rgba(0,0,0,.3);cursor:pointer;transition:transform .08s,box-shadow .08s;text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold-dark),0 4px 10px rgba(0,0,0,.3)}
.btn:focus-visible{outline:3px solid var(--white);outline-offset:4px}
.btn.ghost{background:transparent;color:var(--white);box-shadow:none;font-size:18px;padding:4px 16px;text-decoration:underline;text-underline-offset:4px}
.demo-chips{display:flex;gap:8px;justify-content:center}
.demo-chips span{font-family:'Lilita One',sans-serif;font-size:22px;padding:4px 12px;border-radius:10px;background:#9B4DEB;border:3px solid #6C22B8}
.demo-chips span.o{background:#FF9F1C;border-color:#C46A00}
.demo-chips span.c{background:#3FA9F5;border-color:#1E77B8}

/* attract mode, embedded on the hub */
body.demo .hud-top,body.demo .hud-bottom,body.demo .overlay{display:none!important}
body.demo #stage{pointer-events:none}
@media (prefers-reduced-motion:reduce){.giant.ready{animation:none}}