:root{
  /* colour tokens: sunset beach */
  --ink:#24193a; --ink-2:#2f2350; --panel:#33275a; --panel-2:#3e3069; --line:#55468a; --line-2:#6c5ca8;
  --cream:#fff6e6; --cream-2:#f5e3c6; --muted:#c2b5e0;
  --sun:#ffc94a; --sun-d:#c98a12; --coral:#ff6f61; --coral-d:#b8392f;
  --teal:#2fd3c4; --teal-d:#178a80; --sea:#1fa8c9; --sea-d:#126b85; --sand:#f4d9a4;
  --opp:#ff6f61; --opp-d:#b8392f;
  /* type scale */
  --fs-xs:12px; --fs-s:14px; --fs-m:16px; --fs-l:20px; --fs-xl:28px;
  /* spacing (4 px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-s:10px; --r-m:16px; --r-l:24px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.2,.9,.25,1.2);
  --disp:"Lilita One","Arial Black",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--cream);
  font-family:Nunito,system-ui,sans-serif;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font-family:inherit}

/* ---------- overlays ---------- */
.ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 72px) calc(var(--sar) + var(--s4)) calc(var(--sab) + var(--s4)) calc(var(--sal) + var(--s4));
  background:radial-gradient(130% 90% at 50% 35%,rgba(36,25,58,.2),rgba(36,25,58,.82));
  overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;z-index:10;touch-action:pan-y}
.ov.show{opacity:1;visibility:visible;transition:opacity .28s ease}
.card{position:relative;width:min(100%,440px);margin:auto;
  background:linear-gradient(180deg,rgba(62,48,105,.97),rgba(47,35,80,.97));
  border:2px solid var(--line);border-radius:var(--r-l);padding:var(--s5);
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 -3px 0 rgba(0,0,0,.25) inset,0 20px 44px rgba(20,10,40,.55);
  transform:translateY(20px) scale(.96);opacity:0;transition:transform .42s var(--ease),opacity .3s ease}
.ov.show .card{transform:none;opacity:1}
.card.wide{width:min(100%,720px)}
.card.narrow{width:min(100%,360px)}
.title.card{background:linear-gradient(180deg,rgba(62,48,105,.86),rgba(47,35,80,.92));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);width:min(100%,460px)}

/* ---------- title ---------- */
.badges{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:rgba(255,201,74,.13);color:var(--sun);border:1.5px solid rgba(255,201,74,.5)}
.badge.alt{background:rgba(47,211,196,.1);color:var(--teal);border-color:rgba(47,211,196,.45)}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.logo{margin:var(--s4) 0 var(--s2);text-align:center;font-family:var(--disp);font-weight:400;line-height:.86;letter-spacing:.01em}
.logo span{display:block}
.logo .l1{font-size:clamp(46px,13vw,74px);color:var(--sun);text-shadow:0 4px 0 var(--sun-d),0 8px 0 var(--ink),0 12px 20px rgba(0,0,0,.4);transform:rotate(-3deg) translateX(-.3em)}
.logo .l2{font-size:clamp(40px,11.5vw,64px);color:var(--cream);text-shadow:0 4px 0 var(--coral-d),0 8px 0 var(--ink),0 12px 20px rgba(0,0,0,.4);transform:rotate(-3deg) translateX(.12em);margin-top:.1em}
.tag{text-align:center;font-size:var(--fs-l);color:var(--cream);margin:var(--s4) 0 var(--s1);font-weight:800}
.early{margin:var(--s1) auto var(--s4);text-align:center;font-size:var(--fs-s);color:var(--muted);max-width:34ch;line-height:1.4;font-weight:600}

.btns{display:grid;gap:var(--s3)}
.btn{appearance:none;border:0;cursor:pointer;font:inherit;min-height:58px;border-radius:var(--r-m);padding:var(--s3) var(--s4);
  display:flex;align-items:center;gap:var(--s3);text-align:left;color:var(--ink);background:var(--sun);
  box-shadow:0 5px 0 var(--sun-d),0 9px 18px rgba(0,0,0,.3);transition:transform .08s ease,box-shadow .08s ease,filter .15s;position:relative}
.btn:hover{filter:brightness(1.07)}
.btn:active,.btn.press{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-d),0 3px 6px rgba(0,0,0,.3)}
.btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.btn .ic{flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(36,25,58,.14);font-family:var(--disp);font-size:24px}
.btn .ic svg{width:26px;height:26px}
.btn b{display:block;font-family:var(--disp);font-weight:400;font-size:25px;letter-spacing:.02em;line-height:1}
.btn small{display:block;font-size:var(--fs-s);font-weight:700;opacity:.78;margin-top:3px}
.btn.sea{background:var(--teal);box-shadow:0 5px 0 var(--teal-d),0 9px 18px rgba(0,0,0,.3)}
.btn.sea:active,.btn.sea.press{box-shadow:0 1px 0 var(--teal-d)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--cream);box-shadow:inset 0 0 0 2px var(--line-2);justify-content:center;min-height:48px;font-weight:800;font-size:var(--fs-m)}
.btn.ghost:hover{background:rgba(255,255,255,.09)}
.btn.ghost:active,.btn.ghost.press{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--muted)}
.btn.center{justify-content:center;text-align:center}
.btn[disabled]{filter:grayscale(.7) brightness(.8);cursor:default}
.row{display:flex;gap:var(--s3)} .row>.btn{flex:1}

.how{margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.how div{background:rgba(255,255,255,.05);border:1.5px solid var(--line);border-radius:var(--r-s);padding:var(--s2);font-size:var(--fs-xs);color:var(--muted);line-height:1.3;text-align:center;font-weight:700}
.how b{display:block;color:var(--sun);font-family:var(--disp);font-weight:400;font-size:var(--fs-m);letter-spacing:.02em;margin-bottom:2px}

details.full{margin-top:var(--s3);border-radius:var(--r-m);background:rgba(255,255,255,.04);border:1.5px solid var(--line)}
details.full summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s4);font-size:var(--fs-m);color:var(--cream);font-weight:800}
details.full summary::-webkit-details-marker{display:none}
details.full summary::after{content:"+";font-family:var(--disp);font-size:26px;color:var(--sun);transition:transform .2s}
details.full[open] summary::after{transform:rotate(45deg)}
details.full summary:focus-visible{outline:3px solid var(--cream);outline-offset:2px;border-radius:var(--r-m)}
details.full ul{margin:0;padding:0 var(--s4) var(--s3) calc(var(--s4) + 18px);font-size:var(--fs-s);line-height:1.45;color:var(--cream-2);font-weight:600}
details.full li{margin:5px 0} details.full li::marker{color:var(--sun)}
details.full p{margin:0 var(--s4) var(--s4);font-size:var(--fs-xs);color:var(--muted);line-height:1.5;font-weight:600}

/* ---------- headings ---------- */
.h{font-family:var(--disp);font-weight:400;letter-spacing:.02em;font-size:34px;line-height:1.05;margin:0 0 var(--s4);text-align:center;color:var(--cream);text-shadow:0 3px 0 var(--ink)}
.h.big{font-size:48px;color:var(--sun);margin-top:var(--s3)}
.h3{font-family:var(--disp);font-weight:400;font-size:var(--fs-l);letter-spacing:.03em;margin:var(--s4) 0 var(--s2);color:var(--muted)}
.sub{text-align:center;color:var(--muted);font-size:var(--fs-s);margin:calc(-1*var(--s2)) 0 var(--s4);font-weight:700}
.eyebrow{margin:0 0 var(--s2);text-align:center;text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-xs);color:var(--sun);font-weight:800}

/* ---------- cup ladder ---------- */
.ladder{display:grid;gap:var(--s2)}
.rung{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-m);background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);min-height:64px;position:relative}
.rung canvas{width:56px;height:56px;flex:0 0 56px}
.rung .nfo{flex:1;min-width:0}
.rung b{display:block;font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:.02em;line-height:1.1}
.rung small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:700;margin-top:2px}
.rung .st{font-size:var(--fs-xs);font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
.rung.done{opacity:.78}
.rung.done .st{background:rgba(47,211,196,.16);color:var(--teal)}
.rung.next{box-shadow:inset 0 0 0 3px var(--sun),0 6px 18px rgba(0,0,0,.3);background:linear-gradient(90deg,rgba(255,201,74,.14),var(--panel) 60%)}
.rung.next .st{background:var(--sun);color:var(--ink)}
.rung.lock{opacity:.55}
.rung.lock .st{background:rgba(255,255,255,.06);color:var(--muted)}
.rung .num{font-family:var(--disp);font-size:var(--fs-l);color:var(--muted);width:20px;text-align:center}
.pips{display:flex;gap:4px;margin-top:5px}
.pips i{width:14px;height:5px;border-radius:3px;background:var(--line)}
.pips i.on{background:var(--coral)}

/* ---------- quick setup ---------- */
.rivals{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.pick{appearance:none;border:0;font:inherit;cursor:pointer;border-radius:var(--r-m);padding:var(--s2) var(--s2) var(--s3);background:var(--panel);color:var(--cream);
  box-shadow:inset 0 0 0 2px var(--line),0 5px 0 rgba(0,0,0,.28);transition:transform .14s var(--ease),box-shadow .14s;text-align:center;min-height:44px;position:relative}
.pick:hover{transform:translateY(-3px)}
.pick:active{transform:translateY(2px)}
.pick:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.pick.sel{box-shadow:inset 0 0 0 3px var(--sun),0 5px 0 var(--sun-d);background:linear-gradient(180deg,#4a3a7c,var(--panel))}
.pick.sel::after{content:"✓";position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--ink);font-size:13px;line-height:22px;font-weight:900}
.pick canvas{display:block;margin:0 auto 2px;width:64px;height:64px}
.pick b{display:block;font-family:var(--disp);font-weight:400;font-size:18px;letter-spacing:.02em;line-height:1.1}
.pick small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px;line-height:1.3;font-weight:700}
.pick .pips{justify-content:center}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:var(--r-m);background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 2px var(--line)}
.sg{appearance:none;border:0;cursor:pointer;min-height:44px;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-m);font-weight:800;transition:background .15s,color .15s,transform .08s}
.sg:hover{color:var(--cream)}
.sg:active{transform:scale(.97)}
.sg:focus-visible{outline:3px solid var(--cream);outline-offset:1px}
.sg.sel{background:var(--teal);color:var(--ink);box-shadow:0 3px 0 var(--teal-d)}
.foot-row{margin-top:var(--s5)}
.foot-row .btn.center{flex:1.6}

/* ---------- end ---------- */
.result .win{text-align:center}
.score{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin:0 0 var(--s4)}
.score .side{text-align:center;min-width:96px}
.score .num{display:block;font-family:var(--disp);font-size:64px;line-height:1}
.score .t0 .num{color:var(--teal)} .score .t1 .num{color:var(--opp)}
.score .nm{display:block;font-size:var(--fs-s);color:var(--muted);font-weight:800}
.score .dash{font-family:var(--disp);font-size:18px;color:var(--muted);background:var(--panel);border:2px solid var(--line);border-radius:999px;width:46px;height:46px;display:grid;place-items:center}
.stats{display:grid;gap:4px;margin:0 0 var(--s4);font-size:var(--fs-s)}
.strow{display:grid;grid-template-columns:22% 1fr 22%;align-items:center;background:rgba(255,255,255,.05);border-radius:var(--r-s);min-height:32px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.strow.in{opacity:1;transform:none}
.strow b{font-family:var(--disp);font-weight:400;font-size:var(--fs-l);text-align:center}
.strow b.a{color:var(--teal)} .strow b.b{color:var(--opp)}
.strow span{text-align:center;color:var(--muted);font-weight:800}
.foot{margin:var(--s4) 0 0;text-align:center;font-size:var(--fs-xs);color:var(--muted);line-height:1.5;font-weight:700}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:calc(var(--sat) + 10px);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:4;gap:6px}
.sb{display:flex;align-items:stretch;background:rgba(36,25,58,.82);border-radius:18px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.3);overflow:hidden}
.tm{display:flex;align-items:center;gap:10px;padding:4px 12px;min-width:96px}
.tm.t0{justify-content:flex-end;background:linear-gradient(90deg,transparent,rgba(47,211,196,.22))}
.tm.t1{background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--opp) 28%,transparent))}
.tm b{font-family:var(--disp);font-weight:400;font-size:34px;line-height:1;min-width:24px;text-align:center;display:inline-block}
.tm.t0 b{color:var(--teal)} .tm.t1 b{color:var(--opp)}
.tm b.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:scale(1.8)}100%{transform:scale(1)}}
.tm.srv .tnm::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 8px var(--sun);margin-right:5px;vertical-align:1px}
.tnm{font-size:var(--fs-s);font-weight:800;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 10px;background:rgba(0,0,0,.2);min-width:92px}
.to{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800;white-space:nowrap}
.wind{display:flex;align-items:center;gap:5px;font-size:var(--fs-s);color:var(--sun);font-weight:800;white-space:nowrap}
.wind i{display:block;width:18px;height:10px;background:currentColor;clip-path:polygon(0 35%,62% 35%,62% 0,100% 50%,62% 100%,62% 65%,0 65%);transition:transform .3s}
.wind.calm i{width:8px;height:8px;border-radius:50%;clip-path:none;opacity:.6}
#mp{font-family:var(--disp);font-size:var(--fs-m);color:var(--ink);background:var(--sun);padding:3px 12px;border-radius:999px;box-shadow:0 3px 0 var(--sun-d);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.iconbtn{position:fixed;top:calc(var(--sat) + 10px);right:calc(var(--sar) + 10px);width:48px;height:48px;border-radius:14px;border:0;
  background:rgba(36,25,58,.78);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 4px 0 rgba(0,0,0,.3);cursor:pointer;z-index:6;
  display:grid;place-items:center;transition:transform .08s}
.iconbtn:active{transform:translateY(2px) scale(.95)}
.iconbtn:focus-visible{outline:3px solid var(--sun)}
.iconbtn i{display:block;width:16px;height:18px;border-left:5px solid var(--cream);border-right:5px solid var(--cream)}
#hint{position:fixed;left:50%;bottom:calc(var(--sab) + 16px);transform:translateX(-50%);z-index:3;pointer-events:none;font-size:var(--fs-s);font-weight:800;
  background:rgba(36,25,58,.86);padding:9px 16px;border-radius:999px;white-space:nowrap;box-shadow:inset 0 0 0 2px rgba(255,255,255,.13),0 6px 14px rgba(0,0,0,.25);max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
#hint b{color:var(--sun);font-weight:900}
#hint.warn{box-shadow:inset 0 0 0 2px var(--coral)}
#hint.warn b{color:var(--coral)}
#banner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;text-align:center;
  background:linear-gradient(180deg,rgba(62,48,105,.95),rgba(47,35,80,.95));border:2px solid var(--line);border-radius:var(--r-l);padding:var(--s4) var(--s6);
  box-shadow:0 20px 40px rgba(0,0,0,.4);animation:bannerIn 2.2s var(--ease) forwards;max-width:calc(100vw - 32px)}
#banner small{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--sun);font-weight:900}
#banner b{display:block;font-family:var(--disp);font-weight:400;font-size:32px;margin:4px 0;white-space:nowrap}
#banner span{display:inline-block;font-size:var(--fs-s);color:var(--muted);font-weight:800}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-56%)}}
#rot{position:fixed;left:50%;bottom:calc(var(--sab) + 64px);transform:translateX(-50%);font-size:var(--fs-xs);color:var(--muted);background:rgba(36,25,58,.84);
  padding:6px 12px;border-radius:999px;z-index:3;pointer-events:none;white-space:nowrap}

/* ---------- layout variants ---------- */
.split{display:block}
@media (max-width:560px){
  #hud{top:calc(var(--sat) + 68px)}
  .rivals{grid-template-columns:repeat(2,1fr)}
  .card{padding:var(--s4)}
  .h.big{font-size:40px}
}
@media (min-width:700px) and (min-height:0px){
  .result .split{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s5);align-items:center}
}
/* short landscape phones: title goes side by side */
@media (max-height:500px) and (min-width:600px){
  .ov{padding-top:calc(var(--sat) + var(--s3));padding-bottom:calc(var(--sab) + var(--s3));padding-left:calc(var(--sal) + 128px)}
  .title.card{width:min(100%,760px);display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s5);align-items:center;padding:var(--s4) var(--s5)}
  .title .logo{margin-top:var(--s2)}
  .title .tag{font-size:var(--fs-m);margin-top:var(--s3)}
  .title .early{margin-bottom:0}
  .how{margin-top:var(--s3)}
  .card.wide{padding:var(--s4) var(--s5)}
  .h{font-size:28px;margin-bottom:var(--s3)}
  .h.big{font-size:36px}
  .score .num{font-size:52px}
  .ladder{grid-template-columns:1fr 1fr}
  .foot-row{margin-top:var(--s3)}
  .h3{margin:var(--s2) 0}
  .result .foot{margin-top:var(--s2)}
  #banner{top:45%}
  .result .split{gap:var(--s4)}
  .result .h.big{font-size:32px;margin-top:var(--s2);margin-bottom:var(--s2)}
  .result .sub{margin-bottom:var(--s2)}
  .result .score{margin-bottom:0}
  .result .score .num{font-size:44px}
  .stats{gap:3px;margin-bottom:var(--s3)}
  .strow{min-height:26px}
  .strow b{font-size:var(--fs-m)}
  .result .btn{min-height:50px}
  .result .row .btn{min-height:44px}
}
/* small phones in portrait: tighter title */
@media (max-width:560px) and (max-height:720px){
  .logo{margin-top:var(--s2)}
  .logo .l1{font-size:44px} .logo .l2{font-size:38px}
  .tag{font-size:var(--fs-m);margin-top:var(--s3)}
  .early{margin-bottom:var(--s3)}
  .how{display:none}
  .h.big{font-size:34px}
  .score .num{font-size:48px}
  .strow{min-height:28px}
  .stats{gap:3px}
}
/* big screens: scale the cards up a little */
@media (min-width:1200px) and (min-height:820px){
  .card{zoom:1.22}
}
@media (prefers-reduced-motion:reduce){
  .card,.ov{transition:none}
  #mp{animation:none}
}
@media (max-height:500px) and (min-width:600px){
  .pick canvas{width:46px !important;height:46px !important}
  .pick{padding:6px 6px 8px}
}