:root{--opp:#2b5cff;--red:#ff3b4e;--yellow:#ffd23a;--ink:#0b1020;--glass:rgba(10,14,32,.72);--f:'Arial Black','Segoe UI Black',Impact,system-ui,sans-serif;--t:system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#0b1020;color:#fff;font-family:var(--f);touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font-family:inherit;color:inherit;border:0;cursor:pointer}
.round{pointer-events:auto;width:40px;height:40px;border-radius:50%;background:var(--glass);font-size:17px;backdrop-filter:blur(6px)}
.round.off{opacity:.45;text-decoration:line-through}
.chip{pointer-events:auto;height:40px;padding:0 14px;border-radius:999px;background:var(--glass);font-size:15px;backdrop-filter:blur(6px);font-style:italic}

/* team crest: two colours and a tag */
.crest{display:inline-grid;place-items:center;width:2.4em;height:2.4em;font-size:13px;font-style:italic;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);background:linear-gradient(135deg,var(--c1,#ff3b4e) 0 58%,var(--c2,#fff) 58% 70%,var(--c1,#ff3b4e) 70%);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);padding-bottom:.35em;flex:none}
.crest.you{--c1:#ff3b4e;--c2:#fff;font-size:11px}
.crest.big{font-size:22px}

/* ---------- in-match HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#scorebar{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(12px,2vw,26px);padding:10px clamp(14px,2vw,26px) 9px;border-radius:22px;background:var(--glass);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
#scorebar .tm{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:62px}
#scorebar .crest{font-size:clamp(13px,1.3vw,16px)}
#scorebar .tm{position:relative}
#scorebar .tm.serving::after{content:'';position:absolute;top:-3px;right:2px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c2,#ffd23a 55%,#e09a00);box-shadow:0 0 0 2px rgba(10,14,32,.9),0 0 10px rgba(255,210,58,.8)}
#scorebar .crest.you{font-size:clamp(11px,1.1vw,14px);width:2.8em;height:2.8em}
#scorebar .score{font-size:clamp(30px,3.6vw,44px);font-style:italic;display:flex;gap:clamp(8px,1vw,14px);align-items:center;min-width:3.4em;justify-content:center;line-height:1}
#scorebar .score i{opacity:.4;font-style:normal}
#scorebar .score span{min-width:.7em;text-align:center}
#scorebar .score span.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.6)}}
.pips{display:flex;gap:5px}
.pips i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.pips i.on{background:#fff;box-shadow:0 0 6px #fff}
#roundTag{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 88px);left:50%;transform:translateX(-50%);font:700 clamp(10px,1vw,12px) var(--t);letter-spacing:.22em;opacity:.8;text-shadow:0 1px 4px #000;white-space:nowrap}
#rally{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 108px);left:50%;transform:translateX(-50%);font-size:clamp(14px,1.5vw,18px);letter-spacing:.12em;color:var(--yellow);text-shadow:0 2px 6px rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
#rally.on{opacity:1}
#hud.drilling #scorebar,#hud.drilling #roundTag,#hud.drilling #rally{display:none}
/* perks during the match: icons on the left edge; one flashes when it does its job */
#perkBar{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);gap:8px}   /* up to 7 a column, then a second column */
#hud.drilling #perkBar{display:none}
.hp{position:relative;width:56px;height:56px;border-radius:16px;background:var(--glass);backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s,background .18s;transform-origin:left center}
.hp i{font-style:normal;font-size:25px;line-height:1;margin-top:-5px}
/* perk pictures */
.pi{display:block;width:1.5em;height:1.5em;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.hp .pi{width:40px;height:40px;margin-top:-7px}
.perk .ic .pi{width:clamp(72px,9vw,96px);height:clamp(72px,9vw,96px)}
.vc .pi{width:1.7em;height:1.7em;margin:-3px 0}
#cardIcon img{display:block;width:96px;height:96px;object-fit:contain}
.hp em{position:absolute;left:0;right:0;bottom:5px;display:flex;justify-content:center;gap:3px}
.hp u{width:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.hp u.on{background:var(--yellow)}
.hp b{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.6);transform-origin:left center;padding:4px 12px;border-radius:999px;background:var(--yellow);color:#3a2a00;font-size:15px;font-style:italic;letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .15s,transform .18s cubic-bezier(.2,1.6,.4,1)}
.hp.fire{z-index:3;transform:scale(1.5);background:#2a3a8c;box-shadow:0 0 0 3px var(--yellow),0 0 26px rgba(255,210,58,.9)}
.hp.fire b{opacity:0}   /* the big card next to it carries the words */
.hp.spent{opacity:.4;filter:grayscale(1)}
.hp s{position:absolute;right:-5px;top:-5px;min-width:20px;padding:1px 5px;border-radius:9px;background:var(--yellow);color:#3a2a00;font:900 11px var(--t);text-decoration:none;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.hp s:empty{display:none}
.hp.charged{background:#5a1a00;box-shadow:0 0 0 2px #ff8a00,0 0 18px rgba(255,138,0,.9);animation:pulse 1s ease-in-out infinite}
@media (max-width:560px){#perkBar{left:6px;top:calc(max(10px,env(safe-area-inset-top)) + 112px);transform:none;gap:5px;grid-template-rows:repeat(7,auto)}.hp{width:38px;height:38px;border-radius:11px}.hp i{font-size:18px}.hp .pi{width:27px;height:27px;margin-top:-5px}.hp em{bottom:3px}.hp u{width:6px}}   /* phones: top left, over the stands, away from the court */
#menuBtn{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;gap:5px}
#menuBtn i{width:5px;height:17px;border-radius:2px;background:#fff}
/* pause */
#pause{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(6,9,22,.66);backdrop-filter:blur(3px)}
#pause .box{width:min(360px,100%);padding:26px 24px 24px;border-radius:24px;background:rgba(14,20,48,.96);box-shadow:0 24px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px;text-align:center;animation:rise .22s cubic-bezier(.2,1.2,.3,1)}
#pause .ptitle{font-size:clamp(30px,5vw,40px);font-style:italic;transform:skewX(-8deg);margin-bottom:6px}
#pause button{font-size:19px;font-style:italic;padding:15px 18px;border-radius:14px;background:rgba(255,255,255,.12)}
#pause button.primary{background:var(--red);box-shadow:0 4px 0 #6a0a19}
#pause button:active{transform:translateY(3px);box-shadow:none}
#hint{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:999px;background:var(--glass);font-size:clamp(14px,1.8vw,20px);letter-spacing:.06em;transition:background .12s,color .12s,transform .12s;backdrop-filter:blur(6px)}
#hint.off{display:none}
#hint.go{background:#28e070;color:#04250f;transform:translateX(-50%) scale(1.1)}
#hint.air{background:var(--yellow);color:#3a2a00}
/* finger cue: a button that is pressed (.go) or let go (.air) */
.hand{position:relative;width:26px;height:26px;border-radius:50%;border:3px solid currentColor;flex:none}
.hand::after{content:'';position:absolute;inset:4px;border-radius:50%;background:currentColor;transform:scale(.25);transition:transform .12s}
.go .hand::after{transform:scale(1)}
.air .hand::after{transform:scale(0)}
.air .hand{box-shadow:0 0 0 6px rgba(255,255,255,.35)}
.hand.big{width:64px;height:64px;border-width:6px}
.hand.big::after{inset:9px}

#pop{position:fixed;left:0;top:0;pointer-events:none;font-style:italic;text-align:center;transform:translate(-50%,-50%);white-space:nowrap;opacity:0}
#pop .g{font-size:clamp(30px,5.6vw,72px);line-height:.95;-webkit-text-stroke:2px rgba(0,0,0,.55);paint-order:stroke fill;text-shadow:0 5px 0 rgba(0,0,0,.35)}
#pop .s{font-size:clamp(13px,1.9vw,22px);margin-top:4px;text-shadow:0 2px 6px rgba(0,0,0,.7)}
#pop .s em{font-style:normal;color:var(--yellow)}
#pop.show{animation:pop .9s cubic-bezier(.2,1.4,.3,1) forwards}
#pop.perfect .g{color:var(--yellow);text-shadow:0 0 30px #ff8a00,0 5px 0 rgba(0,0,0,.35)}
#pop.great .g{color:#7dffb0}
#pop.bad .g,#pop.miss .g{color:#ff8b8b}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.4) rotate(-6deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(-4deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(-4deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1) rotate(-4deg)}}

#banner{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%) skewX(-8deg);pointer-events:none;text-align:center;opacity:0;white-space:nowrap}
#banner .t{display:inline-block;padding:3px 26px;font-size:clamp(22px,4vw,52px);font-style:italic;background:var(--ink);border-left:8px solid var(--yellow);border-right:8px solid var(--yellow);box-shadow:0 10px 26px rgba(0,0,0,.45)}
#banner .u{margin-top:6px;font:700 clamp(11px,1.4vw,16px) var(--t);letter-spacing:.08em;text-shadow:0 2px 8px rgba(0,0,0,.9)}
#banner.win .t{background:var(--red)}
#banner.lose .t{background:color-mix(in srgb,var(--opp) 80%,#000)}
#banner.show{animation:banner 1.4s ease forwards}
@keyframes banner{0%{opacity:0;transform:translate(-120%,-50%) skewX(-8deg)}14%{opacity:1;transform:translate(-50%,-50%) skewX(-8deg)}82%{opacity:1;transform:translate(-50%,-50%) skewX(-8deg)}100%{opacity:0;transform:translate(40%,-50%) skewX(-8deg)}}

#setcall{position:fixed;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;font-style:italic;font-size:clamp(11px,1.4vw,16px);padding:2px 9px;border-radius:999px;background:var(--glass);opacity:0;transition:opacity .15s;white-space:nowrap}
#setcall.on{opacity:1}
#setcall.quick{background:var(--yellow);color:#3a2a00}

#speedlines{position:fixed;inset:-20%;pointer-events:none;opacity:0;transition:opacity .12s;background:repeating-conic-gradient(from 0deg at var(--sx,50%) var(--sy,50%),rgba(255,255,255,0) 0deg 3.2deg,rgba(255,255,255,.5) 3.4deg 3.8deg,rgba(255,255,255,0) 4deg 7deg);-webkit-mask:radial-gradient(circle at var(--sx,50%) var(--sy,50%),transparent 0 22%,#000 60%);mask:radial-gradient(circle at var(--sx,50%) var(--sy,50%),transparent 0 22%,#000 60%)}
#speedlines.on{opacity:.75}
#flash{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0}
#flash.on{animation:flash .28s ease-out}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}

/* ---------- a new move: card, then one helped attempt */
#card{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:rgba(6,9,22,.62)}
#card .box{width:min(540px,100%);padding:26px 26px 24px;border-radius:26px;background:rgba(14,20,48,.96);box-shadow:0 24px 60px rgba(0,0,0,.6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;animation:rise .28s cubic-bezier(.2,1.2,.3,1)}
#card .ctag{font:700 12px var(--t);letter-spacing:.26em;color:var(--yellow)}
#cardIcon{font-size:64px;line-height:1}
#cardTitle{font-size:clamp(30px,5vw,46px);font-style:italic;line-height:1;transform:skewX(-8deg)}
#cardLead{font:600 clamp(16px,2vw,19px)/1.4 var(--t);opacity:.85;max-width:26em}
#cardHow{font:800 clamp(18px,2.4vw,23px)/1.3 var(--t);color:var(--yellow);max-width:22em;padding:12px 16px;border-radius:14px;background:rgba(255,210,58,.1)}
#cardHow.steps{display:flex;flex-direction:column;gap:10px;padding:0;background:none;width:100%;max-width:none;color:#fff;text-align:left}
.cstep{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08)}
.cstep .hand{width:34px;height:34px;border-width:4px}
.cstep .hand::after{inset:5px}
.cstep.go .hand{color:#28e070}
.cstep.air .hand{color:var(--yellow)}
.cstep b{display:block;font:800 clamp(16px,2.1vw,20px)/1.2 var(--t)}
.cstep.go b{color:#28e070}
.cstep.air b{color:var(--yellow)}
.cstep small{font:600 clamp(13px,1.6vw,15px) var(--t);opacity:.8}
#cardOk{margin-top:8px;font-size:clamp(20px,2.6vw,26px);font-style:italic;padding:14px 46px;border-radius:16px;background:linear-gradient(180deg,#ff5a4e,#c41730);box-shadow:0 5px 0 #6a0a19}
#cardOk:active{transform:translateY(4px);box-shadow:0 1px 0 #6a0a19}
#drill{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center}
#drill .dhead{margin-top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:14px;padding:10px 22px;border-radius:999px;background:var(--glass);backdrop-filter:blur(6px);font-style:italic;font-size:clamp(17px,2.2vw,24px)}
#drill .dtag{font:700 11px var(--t);letter-spacing:.2em;color:var(--yellow)}
#drill .dlead{margin-top:12px;font:800 clamp(15px,2vw,21px) var(--t);text-shadow:0 2px 8px rgba(0,0,0,.9);text-align:center;padding:0 16px}
#drill .dcue{margin-top:auto;margin-bottom:max(26px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;font-size:clamp(22px,3.6vw,40px);font-style:italic;text-shadow:0 3px 10px rgba(0,0,0,.8);opacity:0;transition:opacity .1s}
#drill .dcue.on{opacity:1}
#drill .dcue.go{color:#28e070}
#drill .dcue.air{color:var(--yellow)}
#drill .dcue.wait .hand{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.18)}}

/* ---------- match intro */
#vs{position:fixed;inset:0;display:flex;align-items:stretch;justify-content:center;pointer-events:none;background:rgba(6,9,22,.35);transition:opacity .4s}
#vs.out{opacity:0}
#vs .side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,18px);padding:16px;transform:skewX(-8deg)}
#vs .you{background:linear-gradient(120deg,rgba(179,20,42,.92),rgba(255,59,78,.8));margin-left:-6vw;padding-left:8vw}
#vs .opp{background:linear-gradient(120deg,color-mix(in srgb,var(--opp) 88%,#000),color-mix(in srgb,var(--opp) 55%,#000));margin-right:-6vw;padding-right:8vw}
#vs .pics{display:flex;justify-content:center;gap:clamp(6px,1vw,12px)}
#vs .pics img{width:clamp(58px,8.6vw,132px);aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:4px solid rgba(255,255,255,.9);background:#dfe3ea;box-shadow:0 10px 24px rgba(0,0,0,.4)}
#vs .pics img.twin{transform:scaleX(-1)}
#vs .side>b{display:flex;align-items:center;gap:10px;font-size:clamp(20px,3.2vw,42px);font-style:italic;text-shadow:0 4px 0 rgba(0,0,0,.3)}
.vsx{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:34em}
.vc{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(6,9,22,.55);font:800 clamp(13px,1.5vw,17px) var(--t);white-space:nowrap}
.vc i{font-style:normal;font-size:1.25em;line-height:1}
.vc em{font-style:normal;color:var(--yellow)}
.vc.none{opacity:.7;padding:7px 14px}
#vs .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 clamp(10px,2.4vw,34px);background:var(--ink);transform:skewX(-8deg);box-shadow:0 0 40px rgba(0,0,0,.6);z-index:1;text-align:center}
#vs .mid b{font-size:clamp(38px,8vw,110px);font-style:italic;color:var(--yellow);line-height:.9}
#vs .mid i{font:700 clamp(11px,1.3vw,15px) var(--t);letter-spacing:.22em;opacity:.8;font-style:normal}
#vs .mid span{font-size:clamp(12px,1.5vw,18px);letter-spacing:.12em;white-space:nowrap}
#vs .mid em{font:800 clamp(11px,1.3vw,15px) var(--t);font-style:normal;letter-spacing:.14em;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12)}
#vs .tap{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2;font:800 13px var(--t);letter-spacing:.24em;padding:8px 18px;border-radius:999px;background:rgba(6,9,22,.7);opacity:0;transition:opacity .3s}
#vs.skip .tap{opacity:.9}
@media (max-aspect-ratio:1/1){#vs{flex-direction:column}#vs .side{transform:none;margin:0;padding:14px}#vs .mid{transform:none;padding:10px;flex-direction:row;flex-wrap:wrap;gap:12px}#vs .pics img{width:clamp(58px,19vw,110px)}}

/* ---------- tour (home) */
.logo{font-style:italic;line-height:.82;transform:skewX(-8deg) rotate(-3deg);filter:drop-shadow(0 8px 0 rgba(0,0,0,.35))}
.logo span{display:block;font-size:clamp(30px,6vw,70px);letter-spacing:.04em}
.logo b{display:block;font-size:clamp(56px,12vw,140px);background:linear-gradient(180deg,#fff3a8,#ffb300 60%,#ff6a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo.mini{filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.logo.mini span{font-size:15px}.logo.mini b{font-size:30px}
#tour{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.3vh,18px);padding:0 clamp(10px,2vw,28px) max(14px,env(safe-area-inset-bottom));background:rgba(6,9,22,.6);overflow-y:auto;touch-action:pan-y}
#tour .top{width:100%;display:flex;align-items:center;gap:10px;padding-top:max(10px,env(safe-area-inset-top))}
.grow{flex:1}
#tour .chip{height:46px;padding:0 18px;font-size:18px}
#tour .panel{width:min(1280px,100%);margin:auto 0;padding:clamp(12px,1.6vw,20px);border-radius:26px;background:rgba(12,17,40,.82);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ph{display:flex;align-items:baseline;gap:14px;margin:2px 4px 8px}
.ph b{font-size:clamp(18px,2vw,24px);font-style:italic;letter-spacing:.04em}
.ph span{font:700 clamp(12px,1.2vw,14px) var(--t);opacity:.7}
#strip + .ph{margin-top:clamp(10px,1.6vh,20px)}
/* an open zone: the venue on top, its three stages below */
.mt{display:flex;align-items:center;gap:12px;padding:7px 14px 7px 12px;min-height:52px;border-radius:16px;background:rgba(255,255,255,.08);text-align:left;font-family:inherit;color:inherit}
.mt .crest{font-size:13px}
.mt .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mt small{font:800 10px var(--t);letter-spacing:.14em;opacity:.65;white-space:nowrap}
.mt b{font-size:clamp(14px,1.25vw,17px);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt .st{flex:none;font-size:11px;color:var(--yellow)}
.mt .st i{font-style:normal;opacity:.25}
.mt.won{background:rgba(255,210,58,.12)}
.mt.cur{background:var(--red);box-shadow:inset 0 0 0 2px #fff,0 0 18px rgba(255,59,78,.6)}
.mt.cur .st{color:#fff;font-size:18px}
.mt.cur small{opacity:.95}
.mt.locked{opacity:.45;cursor:default}
.mt.locked .st{font-size:13px}
.mt:not(.locked):active{transform:translateY(2px)}
/* a locked zone: one greyed picture of the venue, nothing else */
#play{flex:none;max-width:100%;display:flex;align-items:center;gap:clamp(10px,3vw,18px);padding:10px clamp(16px,4vw,30px) 10px clamp(14px,3.6vw,26px);border-radius:22px;background:linear-gradient(180deg,#ff5a4e,#c41730);box-shadow:0 6px 0 #6a0a19,0 14px 30px rgba(255,59,78,.45);font-style:italic;animation:bob 1.6s ease-in-out infinite}
#play:active{transform:translateY(4px);box-shadow:0 2px 0 #6a0a19}
#play .pl{font-size:clamp(28px,min(5.6vh,9vw),50px);line-height:1}
#play .pm{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left}
#play .pm i{font:700 clamp(10px,2.6vw,12px) var(--t);letter-spacing:.18em;font-style:normal;opacity:.9;white-space:nowrap}
#play .pm span{display:flex;align-items:center;gap:8px;font-size:clamp(15px,1.9vw,21px);white-space:nowrap}
@keyframes bob{50%{transform:translateY(-3px)}}

/* ---------- sheets */
#sheet,#end{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(6,9,22,.3);padding:10px}
#sheet .card,#end .card{pointer-events:auto;position:relative;width:min(560px,100%);max-height:86vh;overflow:auto;border-radius:22px;background:rgba(12,17,40,.9);backdrop-filter:blur(10px);padding:18px 16px 16px;box-shadow:0 20px 50px rgba(0,0,0,.55);animation:rise .28s cubic-bezier(.2,1.2,.3,1)}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
#sheet .x{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.12)}
#sheet .shead{font-size:clamp(18px,2.6vw,26px);font-style:italic;margin:0 44px 12px 2px}
#sheet .shead small{display:block;font:700 10px var(--t);letter-spacing:.2em;opacity:.7;font-style:normal;margin-bottom:2px}
.mrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.07);margin-top:7px}
.mrow .rn{font:700 10px var(--t);letter-spacing:.14em;opacity:.7;width:22px}
.mrow .tm{flex:1;min-width:0}
.mrow .tm b{display:block;font-size:clamp(13px,1.8vw,17px);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .tm small{font:600 11px var(--t);opacity:.75}
.mrow .st{color:var(--yellow);letter-spacing:1px;font-size:14px;white-space:nowrap}
.mrow .st i{opacity:.22;font-style:normal}
.mrow .go{pointer-events:auto;padding:8px 14px;border-radius:10px;background:var(--red);font-size:13px;font-style:italic;box-shadow:0 3px 0 #6a0a19}
.mrow .go.sub{background:rgba(255,255,255,.14);box-shadow:none;padding:8px 10px}
.mrow.locked{opacity:.45}
.info{font:600 13px/1.55 var(--t);opacity:.92}
.info b{color:var(--yellow)}

#end{background:rgba(6,9,22,.55);align-items:center}
#end .card{text-align:center;width:min(720px,100%);padding:26px clamp(16px,3vw,32px) 24px;display:flex;flex-direction:column;align-items:center;gap:14px}
#endTitle{font-size:clamp(38px,6.5vw,72px);font-style:italic;line-height:.95;transform:skewX(-8deg)}
#end.win #endTitle{color:var(--yellow)}
#end.lose #endTitle{color:#9fb4ff}
#endStars{font-size:clamp(34px,5vw,52px);line-height:1;color:var(--yellow);letter-spacing:12px;margin-right:-12px}
#endStars i{opacity:.2;font-style:normal}
#end.lose #endStars{display:none}
#endSub{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.8vw,19px);font-style:italic;opacity:.92}
#endLine{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
#endLine div{padding:12px 8px 10px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;flex-direction:column;gap:5px}
#endLine b{font-size:clamp(20px,2.6vw,28px);font-style:italic;line-height:1;color:#fff}
#endLine span{font:700 11px var(--t);letter-spacing:.14em;opacity:.7}
#perkPick{width:100%}
#perkPick .pp{font:800 14px var(--t);letter-spacing:.24em;color:var(--yellow);margin:6px 0 12px}
#perkPick .cards{display:flex;gap:12px;justify-content:center}
.perk{pointer-events:auto;flex:1;max-width:220px;padding:18px 12px 16px;border-radius:18px;background:linear-gradient(180deg,#2a3a8c,#151d4c);box-shadow:0 5px 0 #0a0f2b;transition:transform .1s;display:flex;flex-direction:column;align-items:center;gap:8px}
.perk:active{transform:translateY(3px);box-shadow:none}
.perk .ic{font-size:clamp(38px,5vw,50px);line-height:1}
.perk .tg{font:800 10px/1 var(--t);letter-spacing:.16em;opacity:.75;display:flex;align-items:center;gap:6px;min-height:18px}
.perk .tg b{background:var(--yellow);color:#1a1300;border-radius:6px;padding:4px 6px 3px;letter-spacing:.1em}
.perk.fresh{box-shadow:0 5px 0 #0a0f2b,inset 0 0 0 2px var(--yellow)}
.perk .n{font-size:clamp(13px,1.7vw,17px);font-style:italic}
.perk .d{font:600 clamp(13px,1.5vw,15px)/1.35 var(--t);opacity:.9;min-height:2.7em}
.perk .lv{display:flex;justify-content:center;gap:4px}
.perk .lv i{width:18px;height:5px;border-radius:3px;background:rgba(255,255,255,.25)}
.perk .lv i.on{background:var(--yellow)}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
.btns button{pointer-events:auto;font-size:clamp(16px,2vw,21px);font-style:italic;border-radius:14px;padding:15px 30px;background:rgba(255,255,255,.14)}
.btns button.primary{background:var(--red);box-shadow:0 4px 0 #6a0a19}
.btns button:active{transform:translateY(3px);box-shadow:none}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 30%,#18265f,#070a18)}
#bar{width:min(320px,70vw);height:10px;border-radius:9px;background:rgba(255,255,255,.15);overflow:hidden}
#bar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .2s}

@media (max-width:560px){#drill .dhead{margin-top:calc(max(10px,env(safe-area-inset-top)) + 50px)}}

/* deterministic step mode (testing): no real-time CSS animations */
body.manual #flash,body.manual #banner{display:none}
body.manual #pop.show{animation:none;opacity:1}
body.manual #vs{transition:none}
body.manual #play,body.manual .card,body.manual #card .box,body.manual #pause .box,body.manual #lobbyMenu .box{animation:none!important}
body.manual .hp,body.manual .hp b{transition:none}
body.manual .hp.charged{animation:none}

/* ---- final prep: one boost for the final, bought with fans */
#shop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(6,9,22,.6)}
#shop .card{pointer-events:auto;width:min(880px,100%);max-height:94vh;overflow:auto;border-radius:24px;background:rgba(12,17,40,.94);backdrop-filter:blur(10px);padding:22px clamp(14px,3vw,30px) 20px;box-shadow:0 20px 50px rgba(0,0,0,.55);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;animation:rise .28s cubic-bezier(.2,1.2,.3,1)}
#shop .stitle{font-size:clamp(30px,5vw,46px);font-style:italic;color:var(--yellow);line-height:1}
#shop .ssub{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:clamp(13px,1.6vw,16px);font-style:italic;letter-spacing:.04em}
#shopIntro,#shopBody{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
#shopIntro.hidden,#shopBody.hidden{display:none}
#shopIntro .lead{font-size:clamp(18px,2.4vw,24px);font-style:italic;margin:6px 0 0}
#shopIntro .how{font:600 clamp(14px,1.7vw,17px)/1.45 var(--t);opacity:.9;max-width:520px;margin:0}
#shop .sfans{display:flex;align-items:baseline;gap:8px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.08);font-size:clamp(20px,2.6vw,26px)}
#shop .sfans b{color:var(--yellow)}
#shop .sfans span{font:800 11px var(--t);letter-spacing:.2em;opacity:.7}
#shopCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:100%}
#shopCards .perk{max-width:none;padding:14px 10px 12px;gap:6px}
#shopCards .perk .d{font-size:clamp(12px,1.35vw,14px);min-height:4em}
#shopCards .price{margin-top:auto;padding:6px 14px;border-radius:999px;background:var(--yellow);color:#3a2a00;font-size:17px;font-style:italic}
#shopCards .perk:disabled{opacity:.42;cursor:default}
#shopCards .perk.bought{opacity:1;box-shadow:0 5px 0 #0a0f2b,inset 0 0 0 3px var(--yellow)}
#shopCards .perk.bought .price{background:#28e070;color:#04301a}
#shop .snote{font:700 13px var(--t);letter-spacing:.06em;opacity:.75;min-height:1em}
@media (max-width:640px){#shopCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#shopCards .perk .ic .pi{width:56px;height:56px}#shopCards .perk .d{min-height:0}}
#play .pm em{display:flex;align-items:center;gap:6px;font:800 clamp(10px,2.4vw,12px) var(--t);letter-spacing:.12em;font-style:normal;color:var(--yellow)}
#play .pm em .pi{width:20px;height:20px}
#play .pm em.hidden{display:none}
.hp.bst{box-shadow:0 0 0 2px var(--yellow)}
.vc.bst{box-shadow:inset 0 0 0 2px var(--yellow)}

/* ---- the lobby's menu (same look as the pause menu) */
#lobbyMenu{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(6,9,22,.66);backdrop-filter:blur(3px)}
#lobbyMenu .box{width:min(360px,100%);padding:26px 24px 24px;border-radius:24px;background:rgba(14,20,48,.96);box-shadow:0 24px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px;text-align:center;animation:rise .22s cubic-bezier(.2,1.2,.3,1)}
#lobbyMenu .ptitle{font-size:clamp(30px,5vw,40px);font-style:italic;transform:skewX(-8deg);margin-bottom:6px}
#lobbyMenu button{font-size:19px;font-style:italic;padding:15px 18px;border-radius:14px;background:rgba(255,255,255,.12)}
#lobbyMenu button.primary{background:var(--red);box-shadow:0 4px 0 #6a0a19}
#lobbyMenu button:active,#pause button:active{transform:translateY(3px);box-shadow:none}
#lobbyMenu button.off,#pause button.off{opacity:.6}
#menu2{width:46px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#menu2 i{width:18px;height:3px;border-radius:2px;background:#fff}
/* perk cards stay inside the screen with longer (Russian) words */
#perkPick .cards .perk{min-width:0}
.perk .tg{flex-wrap:wrap;justify-content:center;row-gap:4px}
.perk .n{overflow-wrap:anywhere}
@media (max-width:560px){#perkPick .cards{gap:8px}#perkPick .cards .perk{padding:12px 6px 12px}.perk .tg{font-size:9px;letter-spacing:.08em}.perk .d{font-size:12px}}
/* the PLAY button on a phone: the Russian word is longer, the opponent's name may shorten */
@media (max-width:560px){#play{gap:10px;padding:10px 14px}#play .pl{font-size:clamp(22px,7vw,30px)}#play .pm{min-width:0}#play .pm span{max-width:52vw;overflow:hidden;text-overflow:ellipsis}#play .pm span b{overflow:hidden;text-overflow:ellipsis}}

/* a perk at work: a big card with its icon and name pops out of the perk bar */
.ptoast{position:fixed;z-index:30;pointer-events:none;display:flex;align-items:center;gap:14px;transform-origin:left center;animation:ptoast 1.4s cubic-bezier(.2,1.2,.3,1) forwards}
.ptoast i{flex:none;width:136px;height:136px;border-radius:34px;display:grid;place-items:center;background:#2a3a8c;box-shadow:0 0 0 5px var(--yellow),0 0 60px rgba(255,210,58,.85)}
.ptoast .pi{width:108px;height:108px}
.ptoast span{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ptoast b{padding:8px 20px;border-radius:999px;background:var(--yellow);color:#3a2a00;font-size:32px;font-style:italic;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.ptoast em{padding:3px 12px;border-radius:999px;background:rgba(6,9,22,.75);color:#fff;font:800 14px var(--t);letter-spacing:.12em;font-style:normal}
@keyframes ptoast{0%{opacity:0;transform:translateY(-50%) scale(.3)}14%{opacity:1;transform:translateY(-50%) translateX(14px) scale(1.12)}24%{transform:translateY(-50%) translateX(14px) scale(1)}78%{opacity:1;transform:translateY(-50%) translateX(14px) scale(1)}100%{opacity:0;transform:translateY(-50%) translateX(34px) scale(.92)}}
@media (max-width:560px){.ptoast{gap:8px}.ptoast i{width:78px;height:78px;border-radius:20px;box-shadow:0 0 0 4px var(--yellow),0 0 40px rgba(255,210,58,.85)}.ptoast .pi{width:60px;height:60px}.ptoast b{font-size:18px;padding:6px 12px}.ptoast em{font-size:11px}}
body.manual .ptoast{animation:none;transform:translateY(-50%)}
#shop .card{width:min(1060px,100%)}
#shopCards .perk .n{font-size:clamp(12px,1.35vw,15px);overflow-wrap:normal;hyphens:manual}

/* ---- the logo: drawn, no picture behind it */
#tour .brand{flex:none;width:clamp(150px,15vw,236px);margin:-4px 0 -10px -4px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
#tour .brand img{display:block;width:100%;height:auto;user-select:none}
/* the logo is the reference picture with its background cut out (assets/ui/logo.png, transparent) */
.screen .brandBig{width:min(560px,78vw);height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));user-select:none}

/* ---- world tour: the five arenas as an accordion in tour order */
#strip{display:flex;gap:clamp(8px,1vw,14px);height:clamp(280px,40vh,390px);padding:4px 2px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x pan-y}
#strip::-webkit-scrollbar,#perkRow::-webkit-scrollbar{display:none}
.ven{position:relative;flex:0 0 auto;min-width:0;height:100%;border-radius:20px;overflow:hidden;background:#0c1128;color:inherit;font-family:inherit;text-align:left;padding:0;transition:flex-basis .35s cubic-bezier(.3,1,.4,1),flex-grow .35s,box-shadow .2s,transform .15s}
.ven .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ven .vn{position:absolute;left:12px;top:12px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(6,9,22,.78);display:grid;place-items:center;font-size:16px;font-style:italic}
.ven .cup{position:absolute;right:10px;top:9px;z-index:2;font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.ven .nm{position:absolute;left:12px;right:12px;bottom:14px;z-index:2;font-size:clamp(15px,1.3vw,19px);font-style:italic;line-height:1.08;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.85)}
/* open: the arena's picture and its three matches */
.ven.open{flex:1 1 0;min-width:min(420px,72vw);display:flex;flex-direction:column;gap:7px;padding:7px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.ven.open.next{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 0 26px rgba(255,59,78,.35)}
.ven.open .th{position:relative;flex:1 1 auto;min-height:90px;border-radius:15px;background-size:cover;background-position:center;overflow:hidden}
.ven.open .th::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,17,40,0) 40%,rgba(12,17,40,.88))}
.ven.open .vn{left:10px;top:10px}
.ven.open .nm{left:18px;right:18px;bottom:12px;text-align:left;font-size:clamp(22px,2.6vw,36px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ven.open .rows{flex:none;display:flex;flex-direction:column;gap:6px}
.ven.open .mt{min-height:46px}
/* folded: an arena already played, in colour, with its stars; it opens on a tap */
.ven.fold{flex-basis:clamp(96px,8.6vw,138px);cursor:pointer}
.ven.fold .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,17,40,.05) 30%,rgba(12,17,40,.92))}
.ven.fold .nm{bottom:44px;font-size:clamp(13px,1.15vw,17px)}
.ven.fold .sr{position:absolute;left:0;right:0;bottom:14px;z-index:2;text-align:center;font-size:18px;color:var(--yellow);letter-spacing:.06em;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.ven.fold .sr i{font-style:normal;color:#fff;opacity:.28}
.ven.fold:hover{transform:translateY(-3px)}
.ven.fold:active{transform:translateY(1px)}
/* the arena with the next match, folded while an old one is looked at: it says where the tour goes on */
.ven.fold.next{flex-basis:clamp(110px,9.6vw,150px);box-shadow:inset 0 0 0 3px var(--red),0 0 22px rgba(255,59,78,.55)}
.ven.fold.next .go{position:absolute;left:8px;right:8px;bottom:12px;z-index:2;padding:6px 4px;border-radius:999px;background:var(--red);font-size:12px;font-style:italic;text-align:center;white-space:nowrap;animation:bob 1.6s ease-in-out infinite}
/* locked: arenas not reached yet stay large, grey, with a lock */
.ven.locked{flex-basis:clamp(124px,12.6vw,196px)}
.ven.locked .bg{filter:grayscale(1) brightness(.62) contrast(1.05)}
.ven.locked .lk{position:absolute;left:50%;top:44%;z-index:2;transform:translate(-50%,-50%);font-size:40px;filter:grayscale(1) brightness(1.7);opacity:.9}
.ven.locked .nm{opacity:.75}
.ven.locked .vn{opacity:.85}

/* ---- perks on the tour: a compact row of icons with their levels, and the way to the details */
#perkRow{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;touch-action:pan-x pan-y}
#perkRow .pt{flex:none;position:relative;width:64px;height:64px;border-radius:16px;background:linear-gradient(180deg,#2a3a8c,#151d4c);box-shadow:0 3px 0 #0a0f2b;display:grid;place-items:center;padding:0}
#perkRow .pt .pi{width:44px;height:44px;margin-top:-8px}
#perkRow .pt em{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:3px}
#perkRow .pt u{width:11px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
#perkRow .pt u.on{background:var(--yellow)}
#perkRow .pt:active,#perkRow .pall:active{transform:translateY(2px)}
#perkRow .pall{flex:none;margin-left:auto;height:44px;padding:0 18px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);font-size:14px;font-style:italic;white-space:nowrap}
#perkHead{margin-top:clamp(12px,1.8vh,20px)}
/* the perks sheet */
.prow{display:flex;align-items:center;gap:12px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.prow .pi{width:42px;height:42px}
.prow div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.prow b{font-size:15px;font-style:italic}
.prow small{font:600 13px/1.35 var(--t);opacity:.85}
.prow em{display:flex;gap:3px}
.prow u{width:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.prow u.on{background:var(--yellow)}
.psub{margin:14px 6px 6px;font:800 11px var(--t);letter-spacing:.2em;opacity:.7}
.pchips{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px}
.pchips span{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(255,255,255,.07);font-size:12px;font-style:italic;opacity:.8}
.pchips .pi{width:24px;height:24px;filter:grayscale(.6)}
.pmore{margin:12px 6px 2px;font:600 12px var(--t);opacity:.6}

/* ---- phones: the accordion scrolls sideways, the open arena takes most of the width */
@media (max-width:700px){
  #tour .brand{width:clamp(118px,34vw,150px);margin:-2px 0 -6px -2px}
  #strip{height:clamp(300px,44vh,360px)}
  .ven.open{flex:0 0 78vw;min-width:0}
  .ven.fold{flex-basis:84px}.ven.fold.next{flex-basis:96px}
  .ven.locked{flex-basis:104px}
  .ven .nm{font-size:13px}
  .ven.open .nm{font-size:22px}
  #perkRow .pt{width:54px;height:54px;border-radius:14px}#perkRow .pt .pi{width:36px;height:36px}
  #perkRow .pall{height:40px;padding:0 14px;font-size:12px}
}

/* the perks header carries its own "all" button on phones, where the row scrolls */
#perkHead .pall{display:none;margin-left:auto;align-self:center;height:34px;padding:0 14px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);font-size:12px;font-style:italic}
@media (max-width:700px){
  #perkHead .pall{display:block}#perkRow .pall{display:none}
  .ven.open{flex-basis:72vw}
  .ven.open .nm{white-space:normal;font-size:clamp(17px,5.4vw,22px);line-height:1.05}
  #play .pm i{max-width:54vw;overflow:hidden;text-overflow:ellipsis}
}
/* the PLAY button sits halfway between the tour panel and the bottom of the screen (equal free space above the panel,
   between the panel and the button, and under the button) */
#tour .panel{margin-top:auto;margin-bottom:0}
#tour #play{margin-top:auto;margin-bottom:auto}
#tour{padding-bottom:max(clamp(8px,1.3vh,18px),env(safe-area-inset-bottom))}   /* the same as the gap above the button, so it sits in the middle */