:root{
  /* colour tokens */
  --bg:#151a30; --panel:#1f2645; --panel-2:#283057; --line:#3a4374; --line-2:#4d5795;
  --cream:#fff6e8; --cream-2:#f3e2c7; --muted:#aab1d8;
  --orange:#ff8a2a; --orange-d:#c25a10; --gold:#ffd447;
  --lime:#a6e22e; --lime-d:#5f8f12; --grape:#a066ff; --grape-d:#5d33b8;
  /* 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(--bg);color:var(--cream);
  font-family:Fredoka,system-ui,sans-serif;font-weight:600;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(21,26,48,.25),rgba(21,26,48,.84));
  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(40,48,87,.97),rgba(31,38,69,.97));
  border:2px solid var(--line);border-radius:var(--r-l);padding:var(--s5);
  box-shadow:0 2px 0 rgba(255,255,255,.07) inset,0 -3px 0 rgba(0,0,0,.25) inset,0 20px 44px rgba(0,0,0,.5);
  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(40,48,87,.9),rgba(31,38,69,.94));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- 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:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:rgba(255,212,71,.13);color:var(--gold);border:1.5px solid rgba(255,212,71,.5)}
.badge.alt{background:rgba(166,226,46,.1);color:var(--lime);border-color:rgba(166,226,46,.45)}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.logo{margin:var(--s3) 0 var(--s2);text-align:center;font-family:var(--disp);font-weight:400;line-height:.84;font-size:clamp(60px,17vw,100px);letter-spacing:.01em}
.logo span{display:block}
.logo .l1{color:var(--cream);text-shadow:0 5px 0 var(--orange-d),0 9px 0 var(--bg),0 12px 20px rgba(0,0,0,.45);transform:rotate(-4deg)}
.logo .l2{color:var(--orange);text-shadow:0 5px 0 #8a3a05,0 9px 0 var(--bg),0 12px 20px rgba(0,0,0,.45);transform:rotate(3deg) translateX(.18em);animation:flop 2.6s ease-in-out infinite}
.ballo{display:inline-block;width:.74em;height:.74em;vertical-align:-.04em;margin:0 .02em;filter:drop-shadow(0 5px 0 var(--orange-d)) drop-shadow(0 4px 0 var(--bg));animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flop{0%,100%{transform:rotate(3deg) translateX(.18em)}45%{transform:rotate(6deg) translateX(.2em) translateY(2px)}55%{transform:rotate(-1deg) translateX(.16em)}}
.tag{text-align:center;font-size:var(--fs-l);color:var(--cream);margin:var(--s4) 0 var(--s1);font-weight:600}
.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:500}

.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(--bg);background:var(--orange);
  box-shadow:0 5px 0 var(--orange-d),0 9px 18px rgba(0,0,0,.32);transition:transform .08s ease,box-shadow .08s ease,filter .15s;position:relative}
.btn:hover{filter:brightness(1.08)}
.btn:active,.btn.press{transform:translateY(4px);box-shadow:0 1px 0 var(--orange-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(21,26,48,.16);font-family:var(--disp);font-size:24px}
.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:600;opacity:.78;margin-top:3px}
.btn.grape{background:var(--grape);color:#fff;box-shadow:0 5px 0 var(--grape-d),0 9px 18px rgba(0,0,0,.32)}
.btn.grape .ic{background:rgba(255,255,255,.16)}
.btn.grape:active,.btn.grape.press{box-shadow:0 1px 0 var(--grape-d)}
.btn.ghost{background:rgba(255,255,255,.03);color:var(--cream);box-shadow:inset 0 0 0 2px var(--line-2);justify-content:center;min-height:48px;font-weight:700;font-size:var(--fs-m)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.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}
.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,.04);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:500}
.how b{display:block;color:var(--cream);font-family:var(--disp);font-weight:400;font-size:var(--fs-m);letter-spacing:.02em}
kbd{font:inherit;font-weight:700;color:var(--cream);background:var(--line);border-radius:5px;padding:0 6px;box-shadow:0 2px 0 rgba(0,0,0,.4)}

details.full{margin-top:var(--s3);border-radius:var(--r-m);background:rgba(255,255,255,.035);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:700}
details.full summary::-webkit-details-marker{display:none}
details.full summary::after{content:"+";font-family:var(--disp);font-size:26px;color:var(--orange);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:500}
details.full li{margin:5px 0} details.full li::marker{color:var(--orange)}
details.full p{margin:0 var(--s4) var(--s4);font-size:var(--fs-xs);color:var(--muted);line-height:1.5;font-weight:500}

/* ---------- headings ---------- */
.h{font-family:var(--disp);font-weight:400;letter-spacing:.02em;font-size:36px;line-height:1;margin:0 0 var(--s4);text-align:center;color:var(--cream);text-shadow:0 3px 0 var(--bg)}
.h.big{font-size:48px;color:var(--gold)}
.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:500}
.eyebrow{margin:0 0 var(--s3);text-align:center;text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-xs);color:var(--gold);font-weight:700}

/* ---------- setup ---------- */
.rivals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pick{appearance:none;border:0;font:inherit;cursor:pointer;border-radius:var(--r-m);padding:var(--s3);background:var(--panel);color:var(--cream);
  box-shadow:inset 0 0 0 2px var(--line),0 5px 0 rgba(0,0,0,.3);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(--orange),0 5px 0 var(--orange-d);background:linear-gradient(180deg,#323b6b,var(--panel))}
.pick.sel::after{content:"✓";position:absolute;top:8px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--orange);color:var(--bg);font-size:14px;line-height:24px;font-weight:700}
.pick canvas{display:block;margin:0 auto var(--s1);width:84px;height:84px}
.pick b{display:block;font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:.02em;line-height:1.1}
.pick small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:3px;line-height:1.3;font-weight:500}
.pips{display:flex;gap:4px;justify-content:center;margin-top:var(--s2)}
.pips i{width:16px;height:6px;border-radius:3px;background:var(--line)}
.pips i.on{background:var(--orange)}
.courts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.courts .pick{padding:0;overflow:hidden;text-align:left}
.courts .pick canvas{width:100%;height:auto;aspect-ratio:2/1;margin:0}
.courts .pick div{padding:var(--s2) var(--s3) var(--s3)}
.pvp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pv{display:flex;align-items:center;gap:var(--s3);background:var(--panel);border-radius:var(--r-m);padding:var(--s3);box-shadow:inset 0 0 0 2px var(--line)}
.pv.t0{box-shadow:inset 0 0 0 2px var(--lime-d)} .pv.t1{box-shadow:inset 0 0 0 2px var(--grape-d)}
.pv canvas{width:60px;height:60px;flex:0 0 60px}
.pv b{display:block;font-family:var(--disp);font-weight:400;font-size:20px}
.pv.t0 b{color:var(--lime)} .pv.t1 b{color:var(--grape)}
.pv small{display:block;font-size:var(--fs-s);color:var(--muted);margin-top:4px;line-height:1.5;font-weight:500}
.foot-row{margin-top:var(--s5)}
.foot-row .btn.center{flex:1.6}

/* ---------- rule card ---------- */
.rulecard{width:min(100%,380px);text-align:center}
.rc{margin:0 auto var(--s3);width:min(100%,280px);border-radius:20px;padding:var(--s4) var(--s4) var(--s5);
  background:linear-gradient(160deg,#fff6e8,#ffe2b8);color:var(--bg);box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--gold),0 16px 30px rgba(0,0,0,.45);
  transform:rotate(-2deg);transition:transform .3s var(--ease)}
.rc canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:12px;background:var(--bg)}
.rc b{display:block;font-family:var(--disp);font-weight:400;font-size:32px;margin:var(--s3) 0 var(--s1);line-height:1}
.rc span{display:block;font-size:var(--fs-m);font-weight:600;color:#4a3a5a;line-height:1.3}
.rc.spin{animation:cardflip .14s linear}
.rc.land{animation:cardland .5s var(--ease)}
@keyframes cardflip{0%{transform:rotate(-2deg) scaleX(1)}50%{transform:rotate(-2deg) scaleX(.15)}100%{transform:rotate(-2deg) scaleX(1)}}
@keyframes cardland{0%{transform:rotate(-8deg) scale(1.12)}100%{transform:rotate(-2deg) scale(1)}}
.dots{display:flex;justify-content:center;gap:6px;margin:var(--s4) 0}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.rulecard .row .btn.center{flex:1.6}

/* ---------- end ---------- */
.result .win{text-align:center}
#endFace{width:132px;height:132px;display:block;margin:0 auto var(--s2)}
.score{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin:0 0 var(--s4)}
.score .side{text-align:center;min-width:100px}
.score .num{display:block;font-family:var(--disp);font-size:64px;line-height:1}
.score .t0 .num{color:var(--lime)} .score .t1 .num{color:var(--grape)}
.score .nm{display:block;font-size:var(--fs-s);color:var(--muted);font-weight:600}
.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)}
.st{display:grid;grid-template-columns:22% 1fr 22%;align-items:center;background:rgba(255,255,255,.04);border-radius:var(--r-s);min-height:32px}
.st b{font-family:var(--disp);font-weight:400;font-size:var(--fs-l);text-align:center}
.st b.a{color:var(--lime)} .st b.b{color:var(--grape)}
.st span{text-align:center;color:var(--muted);font-weight:600}
.foot{margin:var(--s4) 0 0;text-align:center;font-size:var(--fs-xs);color:var(--muted);line-height:1.5;font-weight:500}

/* ---------- 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(21,26,48,.82);border-radius:18px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 6px 16px rgba(0,0,0,.35);overflow:hidden}
.tm{display:flex;align-items:center;gap:10px;padding:4px 12px;min-width:104px}
.tm.t0{justify-content:flex-end;background:linear-gradient(90deg,transparent,rgba(166,226,46,.2))}
.tm.t1{background:linear-gradient(270deg,transparent,rgba(160,102,255,.24))}
.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(--lime)} .tm.t1 b{color:var(--grape)}
.tm b.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:scale(1.8)}100%{transform:scale(1)}}
.tnm{font-size:var(--fs-s);font-weight:700;max-width:80px;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:96px}
.to{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.rchip{font-family:var(--disp);font-size:var(--fs-m);color:var(--gold);white-space:nowrap}
#mp{font-family:var(--disp);font-size:var(--fs-m);color:var(--bg);background:var(--gold);padding:3px 12px;border-radius:999px;box-shadow:0 3px 0 #b08a12;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(21,26,48,.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(--orange)}
.iconbtn i{display:block;width:16px;height:18px;border-left:5px solid var(--cream);border-right:5px solid var(--cream)}
#zones{position:fixed;inset:0;pointer-events:none;z-index:2;display:flex}
.zone{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--sab) + 14px)}
.zone span{font-family:var(--disp);font-size:var(--fs-m);padding:6px 14px;border-radius:999px;background:rgba(21,26,48,.7);transition:transform .08s,background .08s}
.z0 span{color:var(--lime);box-shadow:inset 0 0 0 2px var(--lime-d)} .z1 span{color:var(--grape);box-shadow:inset 0 0 0 2px var(--grape-d)}
.z0{border-right:2px dashed rgba(255,255,255,.08)}
.zone.on span{transform:scale(1.12)} .z0.on span{background:var(--lime);color:var(--bg)} .z1.on span{background:var(--grape);color:#fff}
#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:600;
  background:rgba(21,26,48,.84);padding:8px 16px;border-radius:999px;white-space:nowrap;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
#hint b{color:var(--gold);font-weight:700}
#hint.up{bottom:calc(var(--sab) + 64px)}
#rot{position:fixed;left:50%;bottom:calc(var(--sab) + 60px);transform:translateX(-50%);font-size:var(--fs-xs);color:var(--muted);background:rgba(21,26,48,.84);
  padding:6px 12px;border-radius:999px;z-index:3;pointer-events:none;white-space:nowrap}

/* ---------- layout variants ---------- */
.split>.menu{margin-top:var(--s2)}
@media (max-width:560px){
  .rivals{gap:var(--s2)}
  .pick{padding:var(--s2)}
  .pick canvas{width:64px;height:64px}
  .pick b{font-size:18px}
  .pvp{grid-template-columns:1fr}
  .h{font-size:32px}
  .card{padding:var(--s4)}
  .tm{min-width:84px;padding:4px 8px;gap:6px}
  .tnm{max-width:56px;font-size:var(--fs-xs)}
  .mid{min-width:84px;padding:4px 6px}
  #hud{top:calc(var(--sat) + 70px)}
}
@media (max-height:560px) and (orientation:landscape){
  .ov{padding:calc(var(--sat) + 10px) calc(var(--sar) + 16px) calc(var(--sab) + 10px) calc(var(--sal) + 16px)}
  .card{padding:var(--s4) var(--s5)}
  .card.wide,.title.card,.result{width:min(100%,800px)}
  .split{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s5);align-items:center}
  .split>.menu{margin-top:0}
  .logo{font-size:72px;margin:var(--s2) 0}
  .tag{font-size:var(--fs-m);margin-top:var(--s3)}
  .early{margin-bottom:0}
  .btn{min-height:52px;padding:var(--s2) var(--s4)}
  .btn b{font-size:22px}
  .how{margin-top:var(--s3)}
  .h{font-size:30px;margin-bottom:var(--s3)}
  .h.big{font-size:40px}
  .h3{margin:var(--s3) 0 var(--s2)}
  .rivals .pick{display:grid;grid-template-columns:52px 1fr;column-gap:var(--s2);align-items:center;text-align:left;padding:var(--s2)}
  .rivals .pick canvas{width:52px;height:52px;grid-row:1/4;margin:0}
  .rivals .pick .pips{justify-content:flex-start;margin-top:4px}
  .rivals .pick b{font-size:18px}
  .courts .pick{display:flex;align-items:center}
  .courts .pick canvas{width:120px;flex:0 0 120px;aspect-ratio:2/1}
  .rc{width:min(100%,300px);padding:var(--s3) var(--s3) var(--s4)}
  .rc canvas{aspect-ratio:12/5;object-fit:cover}
  .rc b{font-size:26px;margin-top:var(--s2)}
  .rc span{font-size:var(--fs-s)}
  .dots{margin:var(--s3) 0}
  .eyebrow{margin-bottom:var(--s2)}
  .stats{grid-template-columns:repeat(5,1fr);gap:var(--s2)}
  .st{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;padding:6px 4px;row-gap:2px}
  .st span{grid-column:1/3;grid-row:2;font-size:var(--fs-xs)}
  .score{margin-bottom:var(--s3)}
  .foot-row{margin-top:var(--s3)}
  .rulecard{width:min(100%,400px)}
  #endFace{width:96px;height:96px}
  .score .num{font-size:52px}
  .foot{margin-top:var(--s2)}
}
@media (min-width:900px) and (min-height:640px){
  .title.card{width:min(100%,820px);padding:var(--s6)}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
  .split>.menu{margin-top:0}
  .result.card{width:min(100%,760px)}
}
@media (max-height:720px) and (orientation:portrait){
  .logo{font-size:56px;margin:var(--s2) 0}
  .tag{font-size:var(--fs-m);margin-top:var(--s2)}
  .early{margin-bottom:var(--s3)}
  .btn{min-height:52px}
  .how{margin-top:var(--s3)}
  .how div{padding:6px}
  #endFace{width:76px;height:76px}
  .h.big{font-size:38px;margin-bottom:var(--s3)}
  .score .num{font-size:48px}
  .score{margin-bottom:var(--s3)}
  .stats{grid-template-columns:repeat(5,1fr);gap:4px}
  .st{grid-template-columns:1fr 1fr;padding:6px 2px;row-gap:2px}
  .st span{grid-column:1/3;grid-row:2;font-size:var(--fs-xs)}
  .foot{margin-top:var(--s3)}
}
@media (prefers-reduced-motion:reduce){.logo .l2,.ballo,#mp{animation:none}}