:root{
  --bg:#0f172a;
  --bg-deep:#080d18;
  --panel:#141c2e;
  --panel-2:#1b2437;
  --ink:#f8fafc;
  --muted:#94a3b8;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --red:#dc2626;
  --blue:#2563eb;
  --green:#22c55e;
  --gold:#fbbf24;
  --pink:#f472b6;
  --sky:#7dd3fc;
  --radius:22px;
  --clay: 0 10px 20px rgba(2,6,23,.55), 0 2px 0 rgba(255,255,255,.06) inset, 0 -6px 14px rgba(2,6,23,.5) inset;
  --clay-sm: 0 5px 12px rgba(2,6,23,.45), 0 -3px 8px rgba(2,6,23,.4) inset, 0 1px 0 rgba(255,255,255,.07) inset;
  --tap: .18s cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg-deep);
  color:var(--ink);
  font-family:Nunito,system-ui,sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
h1,h2,h3,b,.clock,.stat b,button{font-family:Fredoka,Nunito,sans-serif}
h1{font-size:clamp(2.3rem,6vw,3.3rem);line-height:1;margin:.1em 0 .15em;font-weight:600;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 .3em;font-weight:600}
p{margin:0}
.hidden{display:none !important}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.screen{
  position:fixed;inset:0;z-index:40;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);
  background:radial-gradient(120% 90% at 50% 0%,rgba(37,99,235,.28),transparent 60%),
             radial-gradient(90% 70% at 15% 100%,rgba(220,38,38,.24),transparent 60%),
             rgba(8,13,24,.86);
  backdrop-filter:blur(10px);
  overflow-y:auto;
}
.card{
  position:relative;
  width:min(560px,100%);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-strong);
  border-radius:26px;
  padding:clamp(20px,4vw,32px);
  box-shadow:var(--clay);
  animation:pop .38s cubic-bezier(.34,1.4,.64,1) both;
}
.card.narrow{width:min(420px,100%);text-align:center}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.tagline{color:var(--muted);font-size:.98rem;line-height:1.5;margin-bottom:1.1rem}
.field{margin-bottom:.95rem}
.field label{display:block;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;font-weight:700}
input[type=text],input:not([type]){
  width:100%;padding:.7rem .9rem;border-radius:16px;font:600 1rem Fredoka,Nunito,sans-serif;
  color:var(--ink);background:#0d1524;border:1px solid var(--line-strong);box-shadow:var(--clay-sm);
  outline:none;transition:border-color var(--tap),box-shadow var(--tap)
}
input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.seg{display:flex;gap:.4rem;padding:.32rem;background:#0d1524;border-radius:18px;border:1px solid var(--line);box-shadow:var(--clay-sm)}
.seg button{
  flex:1;padding:.55rem .4rem;border:0;border-radius:14px;background:transparent;color:var(--muted);
  font-size:.92rem;font-weight:600;cursor:pointer;transition:all var(--tap)
}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.seg button.on{background:linear-gradient(180deg,#2a3550,#1e2942);color:var(--ink);box-shadow:var(--clay-sm);transform:translateY(-1px)}
.big-btn,.ghost-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;padding:.92rem 1.2rem;margin-top:.4rem;border-radius:20px;border:1px solid rgba(0,0,0,.35);
  font-size:1.06rem;font-weight:600;cursor:pointer;transition:transform var(--tap),box-shadow var(--tap),filter var(--tap)
}
.big-btn{background:linear-gradient(180deg,#34d27f,#16a34a);color:#062b16;box-shadow:0 8px 0 #0f7a37,0 16px 24px rgba(2,6,23,.5)}
.big-btn svg{width:20px;height:20px}
.big-btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 10px 0 #0f7a37,0 20px 26px rgba(2,6,23,.55)}
.big-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #0f7a37}
.ghost-btn{background:linear-gradient(180deg,#243049,#182238);color:var(--ink);box-shadow:var(--clay-sm)}
.ghost-btn:hover{transform:translateY(-2px);border-color:var(--line-strong)}
button:focus-visible,input:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.row>*{flex:1 1 160px;width:auto}
.howto{margin:1.15rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem;font-size:.9rem;color:var(--muted)}
.howto li{position:relative;padding-left:1.35rem;line-height:1.45}
.howto li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(34,197,94,.8)}
.howto b{color:var(--ink);font-weight:600}
.logo-egg{width:78px;height:78px;margin:0 auto .2rem;border-radius:50%;background:radial-gradient(120% 100% at 30% 25%,#fff,var(--sky) 55%,var(--blue));
  box-shadow:0 12px 26px rgba(37,99,235,.45),0 -6px 16px rgba(255,255,255,.35) inset;animation:bob 2.4s ease-in-out infinite}
.logo-egg span{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 72%,rgba(255,255,255,.5),transparent 45%)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hud{position:fixed;inset:0;z-index:20;pointer-events:none}
.hud button,.dock,.board{pointer-events:auto}
.topbar{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.5rem;
  padding:.55rem clamp(.6rem,2vw,1rem);
  background:linear-gradient(180deg,rgba(8,13,24,.92),rgba(8,13,24,.35) 70%,transparent);
  backdrop-filter:blur(8px)
}
.stat{display:flex;align-items:center;gap:.5rem;padding:.35rem .7rem .35rem .4rem;border-radius:18px;background:rgba(20,28,46,.75);border:1px solid var(--line);box-shadow:var(--clay-sm)}
.stat b{display:block;font-size:1.05rem;line-height:1.05}
.stat small{display:block;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.chip{display:grid;place-items:center;width:30px;height:30px;border-radius:11px;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--c)}
.chip svg{width:17px;height:17px}
.clock{
  margin:0 auto;padding:.35rem 1.1rem;border-radius:18px;font-size:1.5rem;font-weight:600;letter-spacing:.03em;
  background:linear-gradient(180deg,#1e2942,#141c2e);border:1px solid var(--line-strong);box-shadow:var(--clay-sm);
  font-variant-numeric:tabular-nums;min-width:104px;text-align:center;transition:color .2s
}
.clock.urgent{color:#fca5a5;animation:pulse .9s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.tools{display:flex;gap:.4rem;margin-left:auto}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:rgba(20,28,46,.8);border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:all var(--tap)}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--line-strong);background:var(--panel-2)}
.icon-btn svg{width:18px;height:18px}
.stamina-wrap{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% - 100% + 60px);width:min(240px,42vw);height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;opacity:0;transition:opacity .3s}
.stamina-wrap.on{opacity:1}
.stamina{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--sky),var(--green));transition:width .12s linear}
.stamina.low{background:linear-gradient(90deg,#f59e0b,#ef4444)}
@media (max-width:720px){
  .ghost{display:none}
  .clock{font-size:1.22rem;min-width:88px;padding:.3rem .7rem}
  .stat{padding:.3rem .55rem .3rem .35rem}
  .stat small{display:none}
  .stamina-wrap{top:auto;bottom:118px;width:min(200px,52vw)}
}
.board{
  position:absolute;top:64px;right:clamp(.6rem,2vw,1rem);width:190px;display:grid;gap:.38rem;
  padding:.6rem;border-radius:20px;background:rgba(14,20,34,.72);border:1px solid var(--line);
  backdrop-filter:blur(8px);box-shadow:var(--clay-sm)
}
.rank{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700}
.rank .dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 10px currentColor}
.rank .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-weight:600}
.rank.me .nm{color:var(--ink);font-weight:800}
.rank .vl{font-variant-numeric:tabular-nums}
.bar{grid-column:1/-1;height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;transition:width .3s ease}
@media (max-width:720px){
  .board{top:54px;left:8px;right:8px;width:auto;display:flex;gap:.55rem;overflow-x:auto;border-radius:16px;padding:.35rem .5rem}
  .rank{grid-template-columns:auto auto;min-width:74px;font-size:.74rem;gap:.35rem}
  .bar{grid-column:1/-1}
  .toasts{top:104px}
}
.toasts{position:absolute;top:64px;left:50%;transform:translateX(-50%);display:grid;gap:.4rem;width:min(420px,86vw);justify-items:center}
.toast{
  padding:.5rem .95rem;border-radius:16px;font-size:.86rem;font-weight:700;text-align:center;
  background:rgba(20,28,46,.94);border:1px solid var(--line-strong);box-shadow:var(--clay-sm);
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1) both
}
.toast.good{border-color:rgba(34,197,94,.5);color:#86efac}
.toast.bad{border-color:rgba(239,68,68,.55);color:#fca5a5}
.toast.rare{border-color:rgba(244,114,182,.6);color:#f9a8d4}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
.carry{
  position:absolute;left:50%;transform:translateX(-50%);bottom:132px;display:flex;align-items:center;gap:.45rem;
  padding:.42rem .9rem;border-radius:16px;font-size:.85rem;font-weight:700;color:#fde68a;
  background:rgba(120,53,15,.55);border:1px solid rgba(251,191,36,.45);backdrop-filter:blur(6px)
}
.carry svg{width:16px;height:16px;animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.dock{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(.6rem,2vw,1.1rem);
  display:flex;gap:.55rem;padding:.55rem;border-radius:22px;
  background:rgba(14,20,34,.8);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:var(--clay)
}
.up{
  position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:.1rem .5rem;
  padding:.5rem .8rem .5rem .6rem;border-radius:16px;border:1px solid var(--line-strong);cursor:pointer;
  background:linear-gradient(180deg,#22304b,#182238);color:var(--ink);text-align:left;transition:all var(--tap);min-width:132px
}
.up:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(34,197,94,.5)}
.up svg{grid-row:1/3;width:22px;height:22px;color:var(--sky)}
.up .lbl{font-size:.86rem;font-weight:700}
.up .cost{font-size:.74rem;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.up .key{position:absolute;top:-7px;right:-6px;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font:700 .68rem Fredoka,sans-serif;background:#0d1524;border:1px solid var(--line-strong);color:var(--muted)}
.up:disabled{opacity:.45;cursor:not-allowed}
.up.ready{border-color:rgba(34,197,94,.75);box-shadow:0 0 0 1px rgba(34,197,94,.35),0 8px 18px rgba(2,6,23,.5);animation:glow 1.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 1px rgba(34,197,94,.3),0 8px 18px rgba(2,6,23,.5)}50%{box-shadow:0 0 0 3px rgba(34,197,94,.45),0 8px 22px rgba(2,6,23,.55)}}
.up.maxed .cost{color:#86efac}
.touch{position:absolute;inset:0;display:block}
.touch.hidden{display:none}
.stick{
  position:absolute;left:clamp(14px,4vw,34px);bottom:clamp(14px,4vw,34px);width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line-strong);box-shadow:var(--clay-sm);touch-action:none;pointer-events:auto
}
.knob{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:linear-gradient(180deg,#3b4a6b,#222d45);border:1px solid var(--line-strong);
  box-shadow:0 6px 14px rgba(2,6,23,.6);transition:transform .08s linear
}
.sprint-btn{
  position:absolute;right:clamp(14px,4vw,34px);bottom:clamp(24px,5vw,44px);display:grid;place-items:center;gap:.15rem;
  width:92px;height:92px;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);color:#eff6ff;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 0 #1e3a8a,0 12px 22px rgba(2,6,23,.5);font:600 .72rem Fredoka,sans-serif;transition:transform var(--tap)
}
.sprint-btn svg{width:24px;height:24px}
.sprint-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #1e3a8a}
.sprint-btn.off{filter:grayscale(.55) brightness(.85)}
@media (hover:hover) and (pointer:fine){.touch{display:none}}
@media (max-width:720px){
  .dock{bottom:148px;gap:.4rem;padding:.45rem;max-width:calc(100vw - 16px);overflow-x:auto}
  .up{min-width:110px;padding:.42rem .6rem .42rem .5rem}
  .up .key{display:none}
  .carry{bottom:232px}
  .stamina-wrap{bottom:206px}
}
.results{display:grid;gap:.45rem;margin:1rem 0 .4rem}
.res{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:16px;background:#0d1524;border:1px solid var(--line);font-size:.9rem}
.res.win{border-color:rgba(251,191,36,.6);background:linear-gradient(90deg,rgba(251,191,36,.16),transparent)}
.res.me{border-color:rgba(34,197,94,.5)}
.res .medal{font-family:Fredoka,sans-serif;font-weight:700;color:var(--muted);min-width:1.4rem}
.res .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .val{font-family:Fredoka,sans-serif;font-weight:600;color:var(--gold)}
.res .sub{grid-column:2/-1;font-size:.72rem;color:var(--muted)}
.stats{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .2rem}
.pill{padding:.32rem .7rem;border-radius:99px;background:#0d1524;border:1px solid var(--line);font-size:.76rem;color:var(--muted);font-weight:700}
.pill b{color:var(--ink)}
.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:.3rem}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:.01ms !important}}
.icon-btn.wide{width:auto;padding:0 .75rem;font:600 .82rem Fredoka,Nunito,sans-serif}
.logo-egg.fallback{background:radial-gradient(120% 100% at 30% 25%,#fff,#fbbf24 55%,#b45309)}