/* MatchPoint Kids v2: a game path through the ball-colour worlds. Glossy 3D nodes, drawn icons (no emoji), Nunito.
   World colours drive everything through --w1 (main) / --w2 (dark edge) / --w3 (soft tint). */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;outline:none}
button{cursor:pointer}
img,svg{display:block}
:root{--ink:#1B2236;--ink2:#4B5470;--muted:#8A92A8;--line:#E6EAF2;--bg:#F3F6FB;
  --w1:#FF9F1C;--w2:#D97900;--w3:#FFF1DC;--wg:linear-gradient(160deg,#FFB547,#FF8A00);
  --gold:#FFC531;--gold2:#E09A00;--star:#FFC531;--flame:#FF7A1A;
  --ease:cubic-bezier(.2,.8,.2,1);--pop:cubic-bezier(.34,1.56,.64,1)}
[data-w=red]{--w1:#FF4D5E;--w2:#D42A3C;--w3:#FFE3E6;--wg:linear-gradient(160deg,#FF6B7A,#F2364A)}
[data-w=orange]{--w1:#FF9F1C;--w2:#D97900;--w3:#FFF1DC;--wg:linear-gradient(160deg,#FFB547,#FF8A00)}
[data-w=green]{--w1:#2FC46B;--w2:#14974B;--w3:#DFF7E8;--wg:linear-gradient(160deg,#4BD884,#1FAE5A)}
[data-w=yellow]{--w1:#F2C81B;--w2:#C79F00;--w3:#FFF8D6;--wg:linear-gradient(160deg,#FFDA3D,#EDB800)}
body{font-family:Nunito,ui-rounded,system-ui,sans-serif;color:var(--ink);background:#E9EEF7;-webkit-font-smoothing:antialiased;overflow:hidden}

/* stage */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:64px;padding:24px;background:radial-gradient(45% 55% at 12% 18%,#FFE4C2 0,transparent 70%),radial-gradient(45% 55% at 88% 82%,#D6E6FF 0,transparent 70%),radial-gradient(35% 45% at 85% 12%,#DFF7E8 0,transparent 70%),#EEF2F9}
.side-l{width:310px}
.side-l .back{display:inline-block;font-weight:700;color:var(--ink2);text-decoration:none;font-size:15px;margin-bottom:22px}
.side-l h1{font-size:46px;font-weight:900;line-height:1;letter-spacing:-.02em}
.side-l h1 span{background:linear-gradient(90deg,#FF4D5E,#FF9F1C 35%,#2FC46B 70%,#E8B800);-webkit-background-clip:text;background-clip:text;color:transparent}
.side-l p{font-size:17px;color:var(--ink2);margin-top:12px;line-height:1.45;font-weight:600}
.who{display:grid;gap:10px;margin-top:26px}
.who button{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:20px;background:#fff;box-shadow:0 1px 0 var(--line),0 10px 24px -16px rgba(27,34,54,.4);text-align:left;transition:transform .2s var(--pop)}
.who button:hover{transform:translateY(-2px)}
.who button.on{box-shadow:0 0 0 3px var(--c),0 10px 24px -16px rgba(27,34,54,.4)}
.who .avs{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:21px;flex:none;background:var(--c)}
.who b{display:block;font-size:18px;font-weight:800}.who small{display:block;font-size:13.5px;color:var(--muted);font-weight:700}
.who .reset{justify-content:center;font-size:13.5px;color:var(--muted);box-shadow:none;background:transparent;font-weight:700}
.phone{position:relative;width:390px;height:min(844px,calc(100vh - 48px));border-radius:50px;background:var(--bg);box-shadow:0 0 0 10px #151A2A,0 50px 90px -30px rgba(27,34,54,.6);overflow:hidden;flex:none}
.app{position:absolute;inset:0;display:flex;flex-direction:column}
@media (max-width:820px){.side-l{display:none}.stage{padding:0;background:var(--bg)}.phone{width:100%;height:100%;border-radius:0;box-shadow:none}}

/* top bar: solid, no blur */
.bar{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding:52px 16px 12px;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.me{width:40px;height:40px;border-radius:50%;background:var(--w1);color:#fff;font-weight:900;font-size:19px;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.pill{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:19px;font-weight:900;font-size:17px}
.pill svg{width:22px;height:22px}
.pill.fl{color:var(--flame)}.pill.st{color:#E0A100}
.pill.wd{margin-left:auto;background:var(--w3);color:var(--w2);font-size:14px;gap:7px}
.pill.wd i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,transparent 50%),var(--w1)}
.bump{animation:bump .6s var(--pop)}@keyframes bump{40%{transform:scale(1.3)}}

/* scroll area + tabs */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative}
.scroll::-webkit-scrollbar{display:none}
.tabs{display:flex;justify-content:space-around;padding:8px 20px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 var(--line);position:relative;z-index:3}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;width:80px;padding:6px 0;border-radius:14px;color:#A5ADC0;font-weight:800;font-size:12px}
.tabs button svg{width:28px;height:28px}
.tabs button.on{color:var(--w1);background:var(--w3)}

/* world header */
.wh{position:sticky;top:0;z-index:2;margin:12px 14px 0;padding:14px 16px;border-radius:22px;background:var(--wg);color:#fff;box-shadow:0 5px 0 var(--w2);display:flex;align-items:center;gap:12px}
.wh small{display:block;font-size:12.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.wh b{display:block;font-size:21px;font-weight:900;line-height:1.1;margin-top:1px}
.wh .pr{height:8px;border-radius:4px;background:rgba(255,255,255,.3);margin-top:8px;overflow:hidden;width:170px}
.wh .pr i{display:block;height:100%;border-radius:4px;background:#fff}
.wh .gb{margin-left:auto;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.wh .gb svg{width:30px;height:30px}

/* the path */
.path{position:relative;padding:34px 0 30px}
.done-w{display:flex;align-items:center;gap:10px;margin:18px 30px 0;padding:10px 14px;border-radius:16px;background:#fff;color:var(--muted);font-weight:800;font-size:14px;box-shadow:0 1px 0 var(--line)}
.done-w i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff}
.done-w i svg{width:13px;height:13px}
.nrow{position:relative;z-index:1;height:118px;display:flex;justify-content:center;align-items:center}
.node{position:relative;width:76px;height:72px;border-radius:50%;transform:translateX(var(--x));display:grid;place-items:center;transition:transform .2s}
.node .face{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.55),transparent 42%),var(--c);box-shadow:0 7px 0 var(--d),inset 0 -4px 0 rgba(0,0,0,.08);transition:transform .12s,box-shadow .12s}
.node:active .face{transform:translateY(5px);box-shadow:0 2px 0 var(--d)}
.node svg{position:relative;width:34px;height:34px;color:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12))}
.node.done{--c:var(--gold);--d:var(--gold2)}
.node.cur{--c:var(--w1);--d:var(--w2)}
.node.lock{--c:#E3E7EF;--d:#C8CEDB}
.node.lock svg{color:#A9B1C3;filter:none}
.node.cur::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:5px solid var(--w1);opacity:.25;animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.node.big{width:96px;height:90px}.node.big svg{width:44px;height:44px}
.go{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:14px;background:#fff;color:var(--w1);font-weight:900;font-size:15px;letter-spacing:.04em;white-space:nowrap;box-shadow:0 2px 0 var(--line),0 10px 20px -10px rgba(27,34,54,.35);animation:hop 1.6s ease-in-out infinite}
.go::after{content:"";position:absolute;top:100%;left:50%;margin-left:-8px;border:8px solid transparent;border-top-color:#fff}
@keyframes hop{50%{transform:translate(-50%,-6px)}}
.nlab{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:800;color:var(--muted)}
.next-w{margin:16px 24px 0;padding:18px;border-radius:22px;background:#fff;border:2px dashed #D6DCE7;text-align:center;color:var(--muted);font-weight:800}
.next-w b{display:block;color:var(--ink);font-size:18px;font-weight:900;margin-top:4px}
.next-w svg{width:40px;height:40px;margin:0 auto}

/* bottom sheet */
.veil{position:absolute;inset:0;z-index:8;background:rgba(15,20,35,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.veil.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:9;padding:12px 18px calc(22px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;background:#fff;transform:translateY(105%);transition:transform .45s var(--ease)}
.sheet.on{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:#DCE1EA;margin:0 auto 14px}
.sh-h{display:flex;align-items:center;gap:14px}
.sh-h .ic{width:60px;height:60px;border-radius:20px;background:var(--wg);display:grid;place-items:center;box-shadow:0 4px 0 var(--w2);flex:none}
.sh-h .ic svg{width:32px;height:32px;color:#fff}
.sh-h small{display:block;font-size:12.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--w2)}
.sh-h b{display:block;font-size:24px;font-weight:900;line-height:1.1;margin-top:2px}
.sh-p{font-size:16.5px;font-weight:700;color:var(--ink2);margin-top:12px;line-height:1.4}

/* 3D buttons */
.b3{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:12px;padding:0 20px;border-radius:18px;background:var(--c,var(--w1));color:#fff;font-size:18px;font-weight:900;letter-spacing:.02em;box-shadow:0 5px 0 var(--d,var(--w2));transition:transform .12s,box-shadow .12s}
.b3:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d,var(--w2))}
.b3 svg{width:24px;height:24px}
.b3.white{--c:#fff;--d:#DCE1EA;color:var(--ink);box-shadow:0 0 0 2px #DCE1EA inset,0 5px 0 #DCE1EA}
.b3.blue{--c:#3B82F6;--d:#1D5FD0}
.b3.ghost{background:transparent;color:var(--muted);box-shadow:none;min-height:48px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.duo .tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:132px;padding:16px;border-radius:24px;background:var(--c);color:#fff;text-align:left;box-shadow:0 6px 0 var(--d);transition:transform .12s,box-shadow .12s}
.duo .tile:active{transform:translateY(5px);box-shadow:0 1px 0 var(--d)}
.duo .tile svg{width:36px;height:36px}
.duo .tile b{font-size:20px;font-weight:900;line-height:1.1}
.duo .tile small{display:block;font-size:13px;font-weight:800;opacity:.85;margin-top:2px}
.duo .tile.done{opacity:.55}

/* full-screen flow */
.flow{position:absolute;inset:0;z-index:10;background:var(--bg);display:flex;flex-direction:column;padding:54px 18px calc(22px + env(safe-area-inset-bottom));animation:fin .4s var(--ease)}
@keyframes fin{from{opacity:0;transform:translateY(24px)}}
.fh{display:flex;align-items:center;gap:12px}
.fh .x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#A5ADC0}
.fh .x svg{width:22px;height:22px}
.fh .pb{flex:1;height:16px;border-radius:8px;background:#E3E7EF;overflow:hidden}
.fh .pb i{display:block;height:100%;border-radius:8px;background:var(--wg);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),inset 0 3px 0 rgba(255,255,255,.35);transition:width .5s var(--ease)}
.fq{margin-top:28px}
.fq h2{font-size:30px;font-weight:900;line-height:1.1;letter-spacing:-.01em}
.fq p{font-size:17px;font-weight:700;color:var(--muted);margin-top:6px}
.fbody{flex:1;overflow-y:auto;scrollbar-width:none;margin:18px -4px 0;padding:4px}
.fbody::-webkit-scrollbar{display:none}
.ffoot{padding-top:10px}
.ffoot .b3[disabled]{--c:#E3E7EF;--d:#C8CEDB;color:#A9B1C3}

/* faces */
.faces{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.faces button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 10px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:12.5px;font-weight:800;color:var(--muted);transition:transform .2s var(--pop)}
.faces button svg{width:44px;height:44px}
.faces button.on{box-shadow:0 0 0 3px var(--w1) inset,0 4px 0 var(--w2);color:var(--w2);background:var(--w3);transform:translateY(-3px)}
/* sticker tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tiles button{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:16px;font-weight:800;text-align:left;line-height:1.15;transition:transform .2s var(--pop)}
.tiles button i{width:44px;height:44px;border-radius:14px;background:var(--tc);display:grid;place-items:center;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.tiles button i svg{width:26px;height:26px;color:#fff}
.tiles button.on{box-shadow:0 0 0 3px var(--w1) inset,0 4px 0 var(--w2);background:var(--w3);transform:translateY(-2px)}
.tiles.hard button.on{box-shadow:0 0 0 3px #3B82F6 inset,0 4px 0 #1D5FD0;background:#E6EFFF}
.tiles button.on::after{content:"";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--w1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.tiles.hard button.on::after{background-color:#3B82F6}
.goals{display:grid;gap:10px}
.goals button{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:18px;font-weight:800;text-align:left;transition:transform .2s var(--pop)}
.goals button i{width:46px;height:46px;border-radius:14px;background:var(--tc);display:grid;place-items:center;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.goals button i svg{width:26px;height:26px;color:#fff}
.goals button.on{box-shadow:0 0 0 3px var(--w1) inset,0 4px 0 var(--w2);background:var(--w3)}
.tipcard{padding:22px 20px;border-radius:24px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:23px;font-weight:800;line-height:1.3}
.tipcard small{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--w2);margin-bottom:10px}
.tipcard small svg{width:18px;height:18px}
.talk2{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.micb{width:112px;height:112px;border-radius:50%;background:var(--wg);display:grid;place-items:center;box-shadow:0 7px 0 var(--w2);transition:transform .12s}
.micb svg{width:46px;height:46px;color:#fff}
.micb:active{transform:translateY(5px);box-shadow:0 2px 0 var(--w2)}
.micb.rec{background:linear-gradient(160deg,#FF6B7A,#E11D48);box-shadow:0 7px 0 #A8122F;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.micl{font-size:15px;font-weight:800;color:var(--muted)}
.kt{width:100%;margin-top:16px;min-height:100px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset;font-size:18px;font-weight:700;line-height:1.4;resize:none}
.kt::placeholder{color:#B4BBCB}
/* balloon */
.ball2{position:relative;width:230px;height:230px;margin:10px auto 0;display:grid;place-items:center}
.ball2 i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.6),transparent 40%),var(--wg);box-shadow:0 8px 0 var(--w2);transform:scale(.42);transition:transform 3.4s ease-in-out}
.ball2.in i{transform:scale(1)}
.ball2 b{position:relative;font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.bcount{text-align:center;font-size:17px;font-weight:800;color:var(--muted);margin-top:18px}

/* reward */
.rw{text-align:center;padding-top:10px}
.rw .medal{width:150px;height:150px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.65),transparent 42%),linear-gradient(160deg,#FFD84D,#FFB800);box-shadow:0 10px 0 #D99500,0 0 0 10px #FFF1C2;display:grid;place-items:center;animation:medal .9s var(--pop) both}
@keyframes medal{from{transform:scale(0) rotate(-120deg)}}
.rw .medal svg{width:80px;height:80px;color:#fff;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.rw h2{font-size:32px;font-weight:900;margin-top:22px}
.rw p{font-size:17px;font-weight:700;color:var(--muted);margin-top:4px}
.xp{display:flex;justify-content:center;gap:10px;margin-top:18px}
.xp div{min-width:104px;padding:10px 12px;border-radius:18px;border:2.5px solid var(--bc);background:#fff;text-align:center}
.xp small{display:block;font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--bc);margin:-10px -12px 8px;padding:5px 0;border-radius:14px 14px 0 0}
.xp b{display:flex;align-items:center;justify-content:center;gap:6px;font-size:22px;font-weight:900}
.xp b svg{width:22px;height:22px}
.rc{margin-top:12px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);text-align:left;animation:fin .5s var(--ease) both}
.rc small{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rc b{display:block;font-size:18px;font-weight:800;line-height:1.3;margin-top:4px}
.rc.tipr{background:#EAF2FF;box-shadow:0 0 0 2px #CFE0FF inset,0 4px 0 #CFE0FF}.rc.tipr small{color:#1D5FD0}

/* stickers tab */
.stk-h{padding:20px 18px 0}
.stk-h h2{font-size:28px;font-weight:900}.stk-h p{font-size:15px;font-weight:700;color:var(--muted);margin-top:2px}
.stk-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}
.stk{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.stk i{width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.55),transparent 42%),var(--tc);display:grid;place-items:center;box-shadow:0 6px 0 rgba(0,0,0,.14),inset 0 -4px 0 rgba(0,0,0,.1)}
.stk i svg{width:42px;height:42px;color:#fff}
.stk.off i{background:#E3E7EF;box-shadow:0 6px 0 #C8CEDB}
.stk.off i svg{color:#B4BBCB}
.stk b{font-size:14px;font-weight:800;line-height:1.15}
.stk.off b{color:var(--muted)}

/* chest */
.chest{width:150px;height:130px;margin:20px auto 0;animation:shake .7s ease-in-out 3}
@keyframes shake{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.chest.open{animation:medal .7s var(--pop)}

/* effects */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.cf{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:fall var(--t) cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--x),900px) rotate(var(--r))}}
.toast{position:absolute;left:50%;bottom:100px;transform:translate(-50%,20px);padding:12px 18px;border-radius:16px;background:var(--ink);color:#fff;font-size:15.5px;font-weight:800;opacity:0;transition:all .35s var(--pop);white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.node.shake{animation:nshake .4s}
@keyframes nshake{25%{transform:translateX(calc(var(--x) - 6px))}75%{transform:translateX(calc(var(--x) + 6px))}}

/* the path backdrop: world tint, faint court lines, a dotted trail, a few balls */
.scroll{background:repeating-linear-gradient(90deg,transparent 0 64px,rgba(255,255,255,.6) 64px 67px),linear-gradient(var(--w3) 0,#F7F9FC 900px);background-attachment:local}
.scroll.plain{background:var(--bg)}
.trail{position:absolute;left:50%;top:0;width:390px;margin-left:-195px;pointer-events:none;overflow:visible}
.trail path{fill:none;stroke:#D5DBE6;stroke-width:9;stroke-linecap:round;stroke-dasharray:1 18}
.trail path.on{stroke:var(--gold);stroke-dasharray:none;stroke-width:8;opacity:.85}
.dball{position:absolute;z-index:0;color:#D7F23C;transform:rotate(var(--r));filter:drop-shadow(0 6px 6px rgba(27,34,54,.15));animation:bob 4s ease-in-out infinite}
.dball svg{width:100%;height:100%}
.dball:nth-of-type(2n){animation-delay:-2s}
@keyframes bob{50%{transform:rotate(var(--r)) translateY(-8px)}}
.dnet{position:absolute;left:calc(50% + 70px);width:86px;height:86px;color:#fff;opacity:.9;transform:rotate(-8deg);filter:drop-shadow(0 4px 0 rgba(27,34,54,.08))}
.dnet svg{width:100%;height:100%}
.wh{background:var(--wg)}

/* ---------- lessons (Duolingo-style) ---------- */
.tabs button{width:76px}
.teach{padding:22px 20px;border-radius:26px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 5px 0 var(--line);animation:fin .5s var(--ease)}
.teach .tic{width:62px;height:62px;border-radius:20px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.5),transparent 45%),var(--tc);display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.16)}
.teach .tic svg{width:34px;height:34px;color:#fff}
.teach p{font-size:19px;font-weight:700;line-height:1.45;color:var(--ink2);margin-top:16px}
.tchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px}
.tchips span{padding:9px 14px;border-radius:14px;background:var(--w3);color:var(--w2);font-weight:900;font-size:16px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);animation:pop .5s var(--pop) both}
.tchips i{font-style:normal;color:#C5CCDA;font-weight:900}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.opts{display:grid;gap:10px}
.opts button,.tf button{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:18px;font-weight:800;text-align:left;transition:transform .15s}
.opts button:active,.tf button:active{transform:translateY(3px)}
.opts em{width:32px;height:32px;border-radius:10px;box-shadow:0 0 0 2px var(--line) inset;display:grid;place-items:center;font-style:normal;font-size:15px;color:var(--muted);flex:none}
.opts button.on,.tf button.on{background:#E6F2FF;box-shadow:0 0 0 2.5px #84C1FF inset,0 4px 0 #84C1FF;color:#1D6FD6}
.opts button.on em{box-shadow:0 0 0 2px #84C1FF inset;color:#1D6FD6}
.tf{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tf button{flex-direction:column;justify-content:center;gap:12px;height:170px;font-size:20px;text-align:center}
.tf button span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.tf button span svg{width:30px;height:30px;color:#fff}
.tf .t{background:#2FC46B}.tf .f{background:#FF4D5E}
.ord-a{display:grid;gap:8px;min-height:80px;padding:12px;border-radius:20px;background:#EEF2F8}
.ord-a span,.ord-a button{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;border-radius:14px;font-size:17px;font-weight:800;text-align:left}
.ord-a span{border:2.5px dashed #D3DAE6;color:#B4BBCB}
.ord-a button{background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line);animation:pop .3s var(--pop)}
.ord-a b{width:28px;height:28px;border-radius:50%;background:var(--w3);color:var(--w2);display:grid;place-items:center;font-size:14px;font-weight:900;flex:none}
.ord-a span b{background:transparent;color:#B4BBCB}
.ord-p{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ord-p button{padding:13px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:17px;font-weight:800}
.ord-p button.used{display:none}
.fbody.locked{pointer-events:none}
.fban{position:absolute;left:0;right:0;bottom:0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;animation:up .35s var(--ease)}
@keyframes up{from{transform:translateY(100%)}}
.fban.ok{background:#D7FFB8;color:#4A9A00}
.fban.no{background:#FFDFE0;color:#E3262F}
.fb-h{display:flex;align-items:center;gap:10px}
.fb-h span{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center}
.fb-h span svg{width:20px;height:20px}
.fb-h b{font-size:24px;font-weight:900}
.fban p{font-size:17px;font-weight:700;margin-top:8px}
.fban p b{font-weight:900}
.fban .b3{margin-top:14px}
.fban.ok .b3{--c:#58CC02;--d:#46A302}
.fban.no .b3{--c:#FF4B4B;--d:#EA2B2B}
.lsn-l{display:grid;gap:10px;padding:16px 16px 30px}
.lsn{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);text-align:left}
.lsn i{width:52px;height:52px;border-radius:16px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.5),transparent 45%),var(--tc);display:grid;place-items:center;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.lsn i svg{width:28px;height:28px;color:#fff}
.lsn span{flex:1;min-width:0}
.lsn b{display:block;font-size:17px;font-weight:900}
.lsn small{display:block;font-size:13.5px;font-weight:700;color:var(--muted);margin-top:1px}
.lsn em{width:32px;height:32px;display:grid;place-items:center;color:#C5CCDA}
.lsn em svg{width:20px;height:20px}
.lsn.done em{color:var(--gold2)}
.lsn.next{box-shadow:0 0 0 2.5px var(--w1) inset,0 4px 0 var(--w2)}
.lsn.next em{color:var(--w1)}
.lsn.lock i{background:#E3E7EF}.lsn.lock i svg{color:#B4BBCB}.lsn.lock b{color:var(--muted)}

/* ===================== v3: Home focus, Before/After tennis, homework, My Tennis ===================== */
.pill.wk{color:#2563EB;font-size:14px;gap:5px}.pill.wk svg{width:19px;height:19px}
.tabs button{width:74px;font-size:11.5px}
.b3 small{font-size:12.5px;font-weight:800;opacity:.6;margin-left:2px}
.b3.sm{min-height:42px;font-size:15px;border-radius:14px;margin-top:0;width:auto;padding:0 14px;box-shadow:0 4px 0 var(--d,var(--w2))}
.b3.sm svg{width:18px;height:18px}
.b3.white.sm{box-shadow:0 0 0 2px #DCE1EA inset,0 4px 0 #DCE1EA}
.fine{font-size:13px;font-weight:700;color:var(--muted);line-height:1.4;margin-top:10px}.fine.c{text-align:center}
.empty{padding:16px;border-radius:18px;background:#fff;border:2px dashed #DCE1EA;color:var(--muted);font-weight:700;font-size:15px;text-align:center}
.sec{display:flex;align-items:center;gap:8px;margin:24px 2px 10px}
.sec h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.sec h3 svg{width:20px;height:20px;color:var(--w1)}
.lk{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:14.5px;color:var(--w2)}
.lk svg{width:16px;height:16px}

/* home */
.hm{padding:20px 16px 30px}
.hm-h{font-size:29px;font-weight:900;line-height:1.08;letter-spacing:-.01em}
.hm-s{font-size:16.5px;font-weight:700;color:var(--muted);margin-top:4px}
.focus{position:relative;margin-top:16px;padding:18px 18px 16px;border-radius:28px;background:var(--wg);color:#fff;box-shadow:0 7px 0 var(--w2);overflow:hidden}
.focus::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.28),transparent 60%);pointer-events:none}
.fo-top{display:flex;align-items:center;gap:8px}
.src{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 8px;border-radius:12px;background:rgba(255,255,255,.22);font-size:13px;font-weight:900}
.src svg{width:16px;height:16px}
.rdy{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:12px;background:#fff;color:#16A34A;font-size:13px;font-weight:900}
.rdy svg{width:14px;height:14px}
.fo-cue{display:block;font-size:30px;font-weight:900;line-height:1.08;margin-top:14px;letter-spacing:-.01em;text-shadow:0 2px 0 rgba(0,0,0,.08)}
.fo-why{font-size:15.5px;font-weight:700;line-height:1.4;margin-top:8px;opacity:.92}
.fo-acts .b3{margin-top:14px;color:var(--w2)}
.focus.live{box-shadow:0 7px 0 var(--w2),0 0 0 4px #fff,0 0 0 8px var(--w1)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ba-t{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:22px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 5px 0 var(--line);text-align:left;transition:transform .12s}
.ba-t:active{transform:translateY(4px)}
.ba-t .ic{width:46px;height:46px;border-radius:15px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.45),transparent 45%),var(--tc);display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.ba-t .ic svg{width:26px;height:26px;color:#fff}
.ba-t b{font-size:17px;font-weight:900;margin-top:4px}
.ba-t small{font-size:13px;font-weight:700;color:var(--muted)}
.ba-t.on2{box-shadow:0 0 0 3px var(--w1) inset,0 5px 0 var(--w2);background:var(--w3)}
.insight{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:20px;background:#F3EEFF;color:#5B21B6}
.insight>svg{width:24px;height:24px;flex:none;margin-top:2px}
.insight p{font-size:16px;font-weight:800;line-height:1.35;color:var(--ink)}
.insight .b3{margin-top:10px;--c:#8B5CF6;--d:#6D28D9}
.hw{display:flex;gap:12px;padding:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);margin-bottom:10px}
.hw-ic{width:40px;height:40px;border-radius:13px;background:#E8F7EE;color:#16A34A;display:grid;place-items:center;flex:none}
.hw-ic svg{width:22px;height:22px}
.hw-b{flex:1;min-width:0}
.hw-b small{display:block;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hw-b>b{display:block;font-size:17px;font-weight:900;line-height:1.25;margin-top:3px}
.hw-m{display:block;font-size:14.5px;font-weight:700;color:var(--ink2);margin-top:4px;line-height:1.35}
.hw-d{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--muted);margin-top:6px}
.hw-d svg{width:15px;height:15px;color:var(--w1)}
.hw-f{display:flex;align-items:center;gap:10px;margin-top:10px}
.cnt{flex:1;font-size:13px;font-weight:800;color:#16A34A}
.hw-x{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.hw-x button{font-size:13.5px;font-weight:800;color:var(--w2)}
.hw-x button[data-hwdel]{color:#B4BBCB}
.hw.done{opacity:.6}
.addhw{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:16px;border:2.5px dashed #D3DAE6;color:var(--ink2);font-weight:900;font-size:15.5px}
.addhw svg{width:20px;height:20px;color:var(--w1)}
.pathcard{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);text-align:left}
.pathcard>svg{width:22px;height:22px;color:var(--w1)}
.pc-ic{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.55),transparent 42%),var(--w1);box-shadow:0 4px 0 var(--w2);display:grid;place-items:center;flex:none}
.pc-ic svg{width:26px;height:26px;color:#fff}
.pc-t{flex:1;min-width:0}
.pc-t small{display:block;font-size:12.5px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pc-t b{display:block;font-size:18px;font-weight:900;margin-top:1px}
.pr{display:block;height:8px;border-radius:4px;background:#E8ECF3;margin-top:8px;overflow:hidden}
.pr i{display:block;height:100%;border-radius:4px;background:var(--w1)}

/* path extras: labels + legend */
.nlab{top:calc(100% + 13px);font-size:12.5px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#9AA3B7}
.node.cur .nlab{color:var(--w2)}
.node.done .nlab{color:#C9A23A}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin:20px 18px 0;padding:12px;border-radius:18px;background:#fff;box-shadow:0 1px 0 var(--line)}
.legend span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--ink2)}
.legend i{width:24px;height:24px;border-radius:50%;background:var(--w1);display:grid;place-items:center}
.legend i svg{width:14px;height:14px;color:#fff}

/* My Tennis */
.mt{padding:20px 16px 34px}
.mt-h{font-size:28px;font-weight:900}.mt-s{font-size:15px;font-weight:700;color:var(--muted);margin-top:2px}
.mini-focus{padding:16px;border-radius:20px;background:var(--wg);color:#fff;box-shadow:0 5px 0 var(--w2)}
.mini-focus small{font-size:12.5px;font-weight:900;opacity:.9;text-transform:uppercase;letter-spacing:.04em}
.mini-focus b{display:block;font-size:21px;font-weight:900;line-height:1.15;margin-top:4px}
.mini-focus span{display:block;font-size:14.5px;font-weight:700;margin-top:6px;opacity:.92}
.rv{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);text-align:left;margin-bottom:10px}
.rv i{width:44px;height:44px;border-radius:14px;background:var(--tc);display:grid;place-items:center;flex:none}
.rv i svg{width:24px;height:24px;color:#fff}
.rv span{flex:1}.rv b{display:block;font-size:16px;font-weight:900}.rv small{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.rv em svg{width:20px;height:20px;color:var(--w1)}
.rf{padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);margin-bottom:10px}
.rf-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rf-f svg{width:28px;height:28px}
.rf-h b{font-size:15px;font-weight:900}
.tag{margin-left:auto;padding:4px 9px;border-radius:9px;background:#EEF2F8;font-size:12px;font-weight:800;color:var(--ink2)}
.tag.ok{background:#E3F8EC;color:#15803D}
.rf p{display:flex;gap:8px;font-size:15px;font-weight:700;line-height:1.35;margin-top:6px}
.rf p em{flex:none;width:86px;font-style:normal;font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.rf em.w{color:#16A34A}.rf em.o{color:#D97706}.rf em.n{color:#2563EB}
.prog2{padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);display:grid;gap:12px}
.prog2 small{display:block;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.prog2 b{display:block;font-size:16px;font-weight:900;margin-top:1px}
.prog2 .pr{margin-top:6px}
.grown{padding:16px;border-radius:20px;background:#EEF2F8;font-size:14px;font-weight:700;color:var(--ink2);line-height:1.45}
.grown p+p{margin-top:8px}
.grown .b3{margin-top:12px}
.stk small{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.2}

/* sheets: focus choices, homework */
.chlist{display:grid;gap:8px;margin-top:14px}
.chlist button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:13px 15px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);text-align:left}
.chlist small{font-size:12px;font-weight:900;color:var(--w2);text-transform:uppercase;letter-spacing:.04em}
.chlist b{font-size:17px;font-weight:900;line-height:1.25}
.chlist button.on{box-shadow:0 0 0 3px var(--w1) inset,0 4px 0 var(--w2);background:var(--w3)}
.who3{display:flex;gap:6px;margin-top:14px;padding:4px;border-radius:16px;background:#EEF2F8}
.who3 button{flex:1;height:40px;border-radius:12px;font-weight:900;font-size:15px;color:var(--muted)}
.who3 button.on{background:#fff;color:var(--ink);box-shadow:0 2px 0 var(--line)}
.hwin{position:relative;margin-top:12px}
.hwin textarea{width:100%;min-height:86px;padding:14px 64px 14px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--line) inset;font-size:17px;font-weight:700;line-height:1.4;resize:none}
.hwin textarea:focus{box-shadow:0 0 0 2.5px var(--w1) inset}
.micsm{position:absolute;right:10px;top:10px;width:46px;height:46px;border-radius:50%;background:var(--wg);box-shadow:0 4px 0 var(--w2);display:grid;place-items:center}
.micsm svg{width:22px;height:22px;color:#fff}
.micsm.rec{background:linear-gradient(160deg,#FF6B7A,#E11D48);box-shadow:0 4px 0 #A8122F;animation:pulse 1.2s ease-in-out infinite}
.micl{min-height:18px;font-size:13.5px;font-weight:800;color:var(--muted);margin-top:6px;padding-left:4px}
.ex{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ex button{padding:8px 11px;border-radius:12px;background:#EEF2F8;font-size:13px;font-weight:800;color:var(--ink2)}
.hwpv{margin-top:12px;padding:12px 14px;border-radius:16px;background:#E8F7EE;color:#15803D;animation:fin .3s var(--ease)}
.hwpv small{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.hwpv b{display:block;font-size:16px;font-weight:900;color:var(--ink);margin-top:2px}
.hwpv span{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;margin-top:4px}
.hwpv span svg{width:15px;height:15px}
.sheet{max-height:88%;overflow-y:auto}

/* remind me: big, glanceable on court */
.remind{position:absolute;inset:0;z-index:15;background:var(--wg);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:60px 22px 34px;animation:fin .35s var(--ease)}
.remind .x{position:absolute;top:54px;right:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.remind .x svg{width:20px;height:20px;color:#fff}
.remind small{font-size:15px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.remind>b{font-size:40px;font-weight:900;line-height:1.05;margin-top:8px}
.remind>p{font-size:18px;font-weight:800;margin-top:16px;opacity:.95}
.remind .frames{margin-top:22px}
.remind .frame{background:rgba(255,255,255,.18);box-shadow:none}
.remind .b3{margin-top:26px;color:var(--w2)}

/* movement pictures */
.frames{display:flex;align-items:center;gap:6px}
.frame{position:relative;flex:1;padding:10px 8px 12px;border-radius:22px;background:var(--wg);box-shadow:0 5px 0 var(--w2);text-align:center;color:#fff}
.frame svg{width:100%;height:132px}
.frame b{display:block;font-size:15px;font-weight:900;margin-top:2px}
.frame .fn{position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.3);font-size:14px;font-weight:900;display:grid;place-items:center}
.farr svg{width:22px;height:22px;color:#B4BBCB}
.teach+.frames{margin-top:14px}

/* flows */
.fbody.center{display:flex;flex-direction:column;justify-content:center}
.kick{display:flex;align-items:center;gap:6px;font-size:13px!important;font-weight:900!important;letter-spacing:.06em;text-transform:uppercase;color:var(--w2)!important}
.kick svg{width:16px;height:16px}
.fq .kick+h2{margin-top:6px}
.wel{text-align:center}
.wel-b{display:block;width:120px;height:120px;margin:0 auto;color:#D7F23C;filter:drop-shadow(0 10px 0 rgba(27,34,54,.12));animation:hop 1.6s ease-in-out infinite}
.wel-b svg{width:100%;height:100%}
.wel h2{font-size:32px;font-weight:900;line-height:1.08;margin-top:22px}
.wel p{font-size:18px;font-weight:700;color:var(--muted);margin-top:8px}
.wel-dots{display:flex;justify-content:center;gap:6px;margin-top:20px}
.wel-dots i{width:10px;height:10px;border-radius:50%;background:#DCE1EA}.wel-dots i.on{background:var(--w1);width:26px;border-radius:5px}
@keyframes hop{50%{transform:translateY(-10px)}}
.bigfocus{padding:22px 20px;border-radius:26px;background:var(--wg);color:#fff;box-shadow:0 6px 0 var(--w2)}
.bigfocus b{display:block;font-size:31px;font-weight:900;line-height:1.08}
.bigfocus p{font-size:16.5px;font-weight:700;line-height:1.4;margin-top:10px;opacity:.94}
.lk2{display:block;margin:14px auto 0;font-weight:900;font-size:15px;color:var(--w2);padding:6px 10px}
.mission{margin-top:14px;padding:16px 18px;border-radius:22px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line)}
.mission small{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--w2)}
.mission small svg{width:16px;height:16px}
.mission b{display:block;font-size:20px;font-weight:900;line-height:1.25;margin-top:6px}
.more{margin-top:12px;padding:12px 16px;border-radius:18px;background:#EEF2F8;font-size:15px;font-weight:700;color:var(--ink2)}
.more summary{font-weight:900;cursor:pointer;color:var(--ink)}
.more p{margin-top:8px;line-height:1.4}
.q2{font-size:18px;font-weight:900;margin-bottom:10px}
.tried{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tried button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:16px;font-weight:900}
.tried button svg{width:30px;height:30px;color:var(--w1)}
.tried button.on{background:var(--w3);box-shadow:0 0 0 3px var(--w1) inset,0 4px 0 var(--w2)}
.talkbox{margin-top:14px}
.talkbox textarea{min-height:74px}
.flow .tiles{grid-template-columns:1fr 1fr}
.flow .tiles button{padding:11px 12px;font-size:15px}
.flow .tiles button i{width:38px;height:38px;border-radius:12px}
.flow .tiles button i svg{width:22px;height:22px}
.sum{display:block;margin-bottom:12px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--line) inset}
.sum small{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.sum small svg{width:16px;height:16px}
.sum.w small{color:#16A34A}.sum.o small{color:#D97706}.sum.n small{color:#2563EB}
.sum textarea{width:100%;margin-top:4px;font-size:17px;font-weight:800;line-height:1.35;resize:none;color:var(--ink)}
.sum:focus-within{box-shadow:0 0 0 2.5px var(--w1) inset}
.flow.quiz .fq{margin-top:18px}
.flow.quiz .qtile{width:58px;height:58px;border-radius:18px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.5),transparent 45%),var(--tc);display:grid;place-items:center;box-shadow:0 4px 0 rgba(0,0,0,.15);margin-bottom:14px}
.flow.quiz .qtile svg{width:32px;height:32px;color:#fff}
.flow.quiz .fq h2{font-size:28px}
.flow.quiz .fbody{margin-top:22px}
.flow.quiz .opts button{min-height:64px;font-size:19px}
.flow.quiz .tf button{height:200px}

.bar .pill{white-space:nowrap;padding:0 9px;font-size:15px}.bar .pill.wk{font-size:13px}.bar .pill.wd{font-size:13px}
.ba-t.on1{box-shadow:0 0 0 3px #3B82F6 inset,0 5px 0 #1D5FD0;background:#EEF5FF}

/* home v4: one focus card, two slim rows */
.hm{display:flex;flex-direction:column;min-height:100%}
.hm .hm-h{font-size:28px}
.focus{margin-top:18px;padding:20px 20px 18px}
.fo-k{display:block;margin-top:22px;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.fo-cue{margin-top:6px;font-size:34px}
.fo-acts .b3{margin-top:20px;min-height:62px;font-size:19px}
.row{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);text-align:left;transition:transform .12s}
.row:active{transform:translateY(3px)}
.row>svg{width:22px;height:22px;color:#C5CCDA;flex:none}
.row-ic{width:46px;height:46px;border-radius:15px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.45),transparent 45%),var(--w1);display:grid;place-items:center;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.row-ic svg{width:24px;height:24px;color:#fff}
.row-ic.pth{background:#EEF2F8;box-shadow:none}.row-ic.pth svg{color:var(--w1)}
.row-t{flex:1;min-width:0}.row-t b{display:block;font-size:17px;font-weight:900}.row-t small{display:block;font-size:13.5px;font-weight:700;color:var(--muted);margin-top:1px}
.row.hot{box-shadow:0 0 0 3px var(--w1) inset,0 4px 0 var(--w2);background:var(--w3)}.row.hot>svg{color:var(--w1)}
.qr{display:flex;align-items:center;gap:14px;margin-top:22px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 1px 0 var(--line),0 10px 24px -16px rgba(27,34,54,.4)}
.qr img{width:96px;height:96px;flex:none}
.qr b{display:block;font-size:16px;font-weight:900}.qr small{display:block;font-size:13.5px;font-weight:700;color:var(--muted);margin-top:2px}

/* ===================== Grand Slam stops ===================== */
.slamrow{height:150px}
.slamnode{position:relative;display:flex;align-items:center;gap:10px;width:250px;height:96px;padding:0 12px 0 0;border-radius:26px;background:#fff;box-shadow:0 0 0 3px var(--sc) inset,0 7px 0 var(--sd);transform:translateX(calc(var(--x) - 20px));overflow:visible;text-align:left;transition:transform .12s}
.slamnode:active{transform:translateX(calc(var(--x) - 20px)) translateY(4px)}
.sn-pic{width:96px;height:96px;flex:none;border-radius:26px 0 0 26px;overflow:hidden}
.sn-pic svg{width:100%;height:100%}
.sn-t{flex:1;min-width:0}.sn-t small{display:block;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--sc)}.sn-t b{display:block;font-size:18px;font-weight:900;line-height:1.1}
.sn-tro{width:44px;height:48px;flex:none}.sn-tro svg{width:100%;height:100%}
.slamnode.lock{filter:grayscale(.85);opacity:.7}
.slamnode.done{box-shadow:0 0 0 3px var(--gold) inset,0 7px 0 var(--gold2)}
.slamnode.cur::before{content:"";position:absolute;inset:-9px;border-radius:32px;border:4px solid var(--sc);opacity:.3;animation:ring2 1.8s ease-out infinite}
@keyframes ring2{0%{transform:scale(.97);opacity:.5}100%{transform:scale(1.08);opacity:0}}
.slamnode .go{color:var(--sc)}
.legend i.t-slam{background:#4B2A7B}
.flow.slamf{padding:0;background:#F3F6FB}
.flow.slamf .ffoot{padding:10px 18px calc(22px + env(safe-area-inset-bottom))}
.flow.slamf>.fh,.flow.slamf>.fq,.flow.slamf>.fbody{margin-left:18px;margin-right:18px}
.flow.slamf>.fh{margin-top:54px}
.b3.slb{--c:var(--sc);--d:var(--sd)}
.sl-hero{position:relative;height:300px;flex:none;overflow:hidden;border-radius:0 0 30px 30px}
.sl-hero>svg{position:absolute;inset:0;width:100%;height:100%}
.sl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(10,15,35,.7))}
.sl-hero .x{position:absolute;z-index:2;top:52px;right:16px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center}
.sl-hero .x svg{width:20px;height:20px;color:var(--ink)}
.crest{position:absolute;z-index:2;top:50px;left:16px;width:56px;height:56px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.crest svg{width:100%;height:100%}
.sl-ht{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;color:#fff}
.sl-ht small{font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.sl-ht b{display:block;font-size:36px;font-weight:900;line-height:1;margin-top:4px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.sl-b{padding-top:16px}
.prize{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line)}
.pz-t{width:70px;height:74px;flex:none;animation:hop 2.4s ease-in-out infinite}.pz-t svg{width:100%;height:100%}
.prize small{display:block;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.prize b{display:block;font-size:19px;font-weight:900;line-height:1.15;margin-top:2px}
.prize em{display:block;font-style:normal;font-size:13px;font-weight:800;color:var(--sc);margin-top:4px}
.rounds{display:grid;gap:8px;margin-top:14px}
.rnd{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--line) inset}
.rnd i{width:40px;height:40px;border-radius:50%;background:#E3E7EF;color:#A9B1C3;display:grid;place-items:center;flex:none}
.rnd i svg{width:20px;height:20px}
.rnd b{display:block;font-size:16px;font-weight:900}.rnd small{display:block;font-size:13.5px;font-weight:700;color:var(--muted)}
.rnd.done i{background:var(--gold);color:#fff}
.rnd.next{box-shadow:0 0 0 3px var(--sc) inset}.rnd.next i{background:var(--sc);color:#fff}
.rnd.lock{opacity:.6}
.rpips{flex:1;display:flex;gap:6px}
.rpips i{flex:1;height:30px;border-radius:10px;background:#E3E7EF;color:#A9B1C3;font-style:normal;font-size:12.5px;font-weight:900;display:grid;place-items:center}
.rpips i.on{background:var(--sc);color:#fff}.rpips i.done{background:var(--gold);color:#fff}
.flow.slamf.quiz .fq{margin-top:20px}
.flow.slamf .fban .b3{--c:#58CC02;--d:#46A302}.flow.slamf .fban.no .b3{--c:#FF4B4B;--d:#EA2B2B}
/* semi-final counter */
.sf{display:flex;flex-direction:column;align-items:center}
.ring2{position:relative;width:200px;height:200px;margin-top:6px}
.ring2 svg{width:100%;height:100%}
.rc2{position:absolute;inset:0;display:grid;place-items:center;align-content:center}
.rc2 b{font-size:64px;font-weight:900;line-height:1;color:var(--ink)}
.rc2 small{font-size:15px;font-weight:800;color:var(--muted)}
.lvl{width:180px;height:8px;border-radius:4px;background:#E6EAF1;margin-top:12px;overflow:hidden}
.lvl i{display:block;height:100%;width:0;background:var(--sc);transition:width .08s}
.micl.c{text-align:center;margin-top:8px}
.sfb{display:flex;align-items:center;gap:10px;margin-top:12px;width:100%}
.sfb .b3{margin-top:0}
.sfb .b3:not(.sm){flex:1}
.sfb .b3.sm{width:58px;min-height:58px;font-size:22px;padding:0}
.b3.rec{--c:#E11D48;--d:#A8122F;animation:pulse 1.2s ease-in-out infinite}
/* final: line calls */
.lc{position:relative;height:250px;border-radius:24px;overflow:hidden;background:linear-gradient(var(--court) 58%,var(--out) 58%);box-shadow:0 5px 0 rgba(0,0,0,.12)}
.lc-line{position:absolute;left:0;right:0;top:58%;height:6px;margin-top:-3px;background:#fff}
.lc-in,.lc-out{position:absolute;left:14px;font-size:13px;font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.8)}
.lc-in{top:14px}.lc-out{bottom:12px}
.lc-ball{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6FF9E,#D7F23C 55%,#A9C81C);box-shadow:0 0 0 2px rgba(0,0,0,.08);animation:drop .7s cubic-bezier(.3,1.4,.6,1) both}
@keyframes drop{0%{transform:translateY(-140px) scale(1.6);opacity:0}60%{opacity:1}100%{transform:none}}
.lc-ball.landed{animation:none;box-shadow:0 0 0 2px rgba(0,0,0,.08),0 0 0 8px rgba(255,255,255,.35)}
.lc-res{position:absolute;left:50%;top:16px;transform:translateX(-50%);padding:8px 14px;border-radius:14px;font-weight:900;font-size:16px;color:#fff;animation:pop .4s var(--pop)}
.lc-res.ok{background:#16A34A}.lc-res.no{background:#E11D48}
.lcb{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lcb .b3{margin-top:0;min-height:70px;font-size:26px}
.dots2{display:flex;justify-content:center;gap:8px;margin-top:14px}
.dots2 i{width:14px;height:14px;border-radius:50%;background:#DCE1EA}
.dots2 i.on{background:var(--sc);transform:scale(1.2)}.dots2 i.ok{background:#22C55E}.dots2 i.no{background:#EF4444}
/* trophy ceremony */
.flow.cerf{background:radial-gradient(80% 60% at 50% 30%,var(--sc),var(--sd));color:#fff}
.cer{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 22px 0}
.cer-glow{position:absolute;top:12%;left:50%;width:360px;height:360px;margin-left:-180px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.14) 0 10deg,transparent 10deg 20deg);animation:spin 18s linear infinite;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.cer-t{position:relative;width:170px;height:176px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.3));animation:lift 1.2s var(--pop) both}
@keyframes lift{0%{transform:translateY(80px) scale(.3) rotate(-20deg);opacity:0}100%{transform:none;opacity:1}}
.cer-t svg{width:100%;height:100%}
.cer small{position:relative;margin-top:14px;font-size:14px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#FFE08A}
.cer h2{position:relative;font-size:32px;font-weight:900;line-height:1.05;margin-top:6px}
.cer>p{position:relative;font-size:17px;font-weight:800;opacity:.9;margin-top:4px}
.cer-f{position:relative;margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.16);font-size:14.5px;font-weight:700;line-height:1.4}
.cer .xp div{background:#fff}
.cer-n{position:relative;display:flex;align-items:center;gap:8px;margin-top:14px;font-weight:900;font-size:15px}.cer-n svg{width:20px;height:20px;color:#E4FF4A}
.flow.cerf .b3.slb{--c:#fff;--d:rgba(0,0,0,.25);color:var(--sd)}
/* trophy cabinet */
.cab{padding:20px 18px 0}
.cab h2{font-size:28px;font-weight:900}.cab p{font-size:15px;font-weight:700;color:var(--muted);margin-top:2px}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px;padding:16px 8px 12px;border-radius:22px;background:linear-gradient(#3A2A1E,#2A1D13);box-shadow:inset 0 -14px 0 #5B4330,0 6px 0 #1E140C}
.tro{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;text-align:center}
.tro svg{width:62px;height:66px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.tro b{font-size:13px;font-weight:900;margin-top:6px}.tro small{font-size:10.5px;font-weight:700;opacity:.7;line-height:1.2}
.tro.off svg{opacity:.45;filter:none}.tro.off b{opacity:.6}
.tro-big{width:150px;height:156px;margin:0 auto 8px}.tro-big svg{width:100%;height:100%}

/* ===================== tickets + path games ===================== */
.pill.tk{color:#7C3AED}.pill.tk svg{width:22px;height:22px}
.node.t-game.cur{--c:var(--gc);--d:color-mix(in srgb,var(--gc) 68%,#000)}
.node.t-game.cur::before{border-color:var(--gc)}
.node.t-game.cur .go{color:var(--gc)}
.tkb{position:absolute;right:-6px;top:-4px;width:26px;height:26px;border-radius:50%;background:#fff;color:#7C3AED;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tkb svg{width:16px!important;height:16px!important;color:#7C3AED!important;filter:none!important}
.node.done .tkb{display:none}
.legend i.t-game{background:#8B5CF6}
.gcard{display:flex;gap:14px;align-items:center;padding:16px;border-radius:22px;background:color-mix(in srgb,var(--gc) 12%,#fff)}
.gc-ic{width:64px;height:64px;border-radius:20px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.5),transparent 45%),var(--gc);display:grid;place-items:center;flex:none;box-shadow:0 5px 0 color-mix(in srgb,var(--gc) 65%,#000)}
.gc-ic svg{width:34px;height:34px;color:#fff}
.gcard small{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--gc)}
.gcard b{display:block;font-size:24px;font-weight:900;line-height:1.1}
.gcard p{font-size:15px;font-weight:700;color:var(--ink2);margin-top:4px}
.tkline{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:16px;background:#F3EEFF;color:#5B21B6;font-size:15px;font-weight:700}
.tkline svg{width:22px;height:22px}
.earn{display:grid;gap:8px;margin-top:14px}
.earn div{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#F6F3FF}
.earn b{width:42px;height:32px;border-radius:10px;background:#8B5CF6;color:#fff;font-weight:900;display:grid;place-items:center;flex:none}
.earn span{font-size:15px;font-weight:800}
/* game shell */
.flow.gamef{padding:0;background:#F3F6FB}
.gh{display:flex;align-items:center;gap:10px;padding:50px 14px 8px}
.gh b{flex:1;text-align:center;font-size:18px;font-weight:900}
.gh .x{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 0 var(--line)}
.gh .x svg{width:20px;height:20px;color:var(--ink2)}
.ghost-host{flex:1;position:relative;min-height:0;display:flex;flex-direction:column}
/* Rally and Target Practice fill the whole screen: the painting runs to the top, the close and sound buttons float over it
   as small dark round buttons, the scoreboard sits between them and Carlos just below the sound button (no white header bar) */
.flow.gamef.full{background:#0B1636}
.flow.gamef.full .gh{position:absolute;left:0;right:0;top:0;z-index:20;padding:calc(env(safe-area-inset-top) + 10px) 12px 0;pointer-events:none}
.flow.gamef.full .gh b{visibility:hidden}
.flow.gamef.full .gh .x{pointer-events:auto;width:38px;height:38px;background:rgba(11,22,54,.62);box-shadow:none}
.flow.gamef.full .gh .x svg{color:#fff;width:18px;height:18px}
.flow.gamef.full .rl{--rl-top:calc(env(safe-area-inset-top) + 10px);--rl-ctop:calc(env(safe-area-inset-top) + 56px)}
.flow.gamef.full .rl-sb{left:50%;transform:translateX(-50%)}
.flow.gamef.full .tg-hud{top:calc(env(safe-area-inset-top) + 56px)}
.bd-msg{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgba(15,20,40,.62);color:#fff;border-radius:22px}
.bd-msg b{font-size:28px;font-weight:900}
.bd-msg span{font-size:16px;font-weight:700;line-height:1.5;max-width:300px}
.bd-msg em{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FFD43B;color:#1B2236;font-style:normal;font-weight:900;font-size:14px;margin-right:4px}
.bd-msg .b3{width:auto;padding:0 40px;margin-top:8px;--c:var(--gc);--d:rgba(0,0,0,.3)}
/* Word Rally */
.g-wr{flex:1;display:flex;flex-direction:column;padding:0 14px calc(14px + env(safe-area-inset-bottom))}
.wr-top{padding:6px 0 0}
.wr-score{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:15px;color:var(--ink2);margin-bottom:8px}
.wr-score b{color:var(--ink);font-size:18px}
.wr-lives{display:flex;gap:4px}
.wr-lives i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6FF9E,#D7F23C 55%,#A9C81C);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.wr-lives i.gone{background:#E3E7EF;box-shadow:none}
.wr-court{position:relative;height:120px;border-radius:20px;overflow:hidden;background:linear-gradient(90deg,var(--court) 0 88%,var(--out) 88%);box-shadow:0 4px 0 rgba(0,0,0,.1)}
.wr-court span.wr-you,.wr-court span.wr-them{position:absolute;top:8px;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.wr-you{left:10px}.wr-them{left:52%}
.wr-net{position:absolute;left:50%;top:18%;bottom:0;width:4px;margin-left:-2px;background:repeating-linear-gradient(#fff 0 4px,rgba(255,255,255,.4) 4px 8px)}
.wr-outl{position:absolute;left:88%;top:0;bottom:0;width:4px;background:#fff}
.wr-outt{position:absolute;right:6px;bottom:8px;font-size:12px;font-weight:900;color:#fff;letter-spacing:.08em}
.wr-ball{position:absolute;left:12%;bottom:18%;width:20px;height:20px;margin:0 0 0 -10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6FF9E,#D7F23C 55%,#A9C81C);box-shadow:0 3px 4px rgba(0,0,0,.25);z-index:2}
.wr-mark{position:absolute;bottom:12%;width:12px;height:5px;margin-left:-6px;border-radius:50%;background:rgba(255,255,255,.6)}
.wr-mark.deep{background:rgba(255,80,80,.85)}
.wr-cat{text-align:center;font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.wr-word{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.wr-word span{width:34px;height:44px;border-radius:10px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line);display:grid;place-items:center;font-size:24px;font-weight:900}
.wr-word span.on{color:var(--gc);animation:pop .35s var(--pop)}
.wr-word span.rv{color:#E11D48}
.wr-word i.sp{width:14px}
.wr-help{text-align:center;font-size:14.5px;font-weight:800;color:var(--ink2);margin:12px 0 8px;min-height:20px}
.wr-kb{margin-top:auto;display:grid;gap:6px}
.wr-kb div{display:flex;justify-content:center;gap:5px}
.wr-kb button{flex:1;max-width:34px;height:48px;border-radius:10px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line);font-size:18px;font-weight:900;color:var(--ink)}
.wr-kb button:active{transform:translateY(2px)}
.wr-kb button.ok{background:#22C55E;color:#fff;box-shadow:0 3px 0 #15803D}
.wr-kb button.no{background:#E3E7EF;color:#A9B1C3;box-shadow:none}
/* Ball Kid Dash */
.g-bd{flex:1;display:flex;flex-direction:column;padding:0 10px calc(10px + env(safe-area-inset-bottom));min-height:0}
.bd-hud{display:flex;align-items:center;gap:12px;font-weight:900;font-size:15px;color:var(--ink2);padding:2px 6px 8px}
.bd-hud b{color:var(--ink)}
.bd-hud #bdL{display:flex;gap:4px}.bd-hud #bdL i{width:16px;height:16px;border-radius:50%;background:var(--gc)}.bd-hud #bdL i.gone{background:#E3E7EF}
.bd-pw{margin-left:auto;color:#2563EB;font-size:13px}
.bd-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.bd-wrap canvas{border-radius:16px;box-shadow:0 6px 0 rgba(0,0,0,.12);touch-action:none}
.bd-pad{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px}
.bd-pad div{display:flex;gap:6px}
.bd-pad button{width:62px;height:52px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:20px;color:var(--ink2);touch-action:manipulation}
.bd-pad button:active{transform:translateY(3px);box-shadow:0 0 0 2px var(--line) inset,0 1px 0 var(--line)}
/* Split-Step Rhythm */
.g-rh{flex:1;display:flex;flex-direction:column;min-height:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.rh-hud{display:flex;align-items:center;justify-content:space-between;padding:2px 16px 8px;font-weight:900;font-size:15px;color:var(--ink2)}
.rh-hud b{color:var(--ink)}
.rh-combo{color:#E0A100;font-size:16px}
.rh-wrap{position:relative;flex:1;min-height:0;margin:0 10px;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.12)}
.rh-wrap canvas{display:block}
.rh-tap{display:grid;place-items:center;height:76px;margin:10px 10px calc(10px + env(safe-area-inset-bottom));border-radius:20px;background:var(--gc);color:#fff;font-weight:900;font-size:18px;box-shadow:0 5px 0 color-mix(in srgb,var(--gc) 65%,#000)}
.wr-court{height:160px}
.wr-word span{width:40px;height:52px;font-size:28px}
.wr-cat{margin-top:22px}
.wr-help{margin:16px 0 12px}

/* ===================== feel: press, ripple, hover, sparkles, entrances (fx.js) ===================== */
.b3,.row,.ba-t,.tiles button,.opts button,.tf button,.chlist button,.goals button,.lsn,.rv,.addhw,.tabs button,.pathcard,.who button{position:relative;overflow:hidden;isolation:isolate}
.b3,.row,.ba-t,.tiles button,.opts button,.tf button,.faces button,.tried button,.chlist button,.goals button,.gcard,.lsn,.rv,.tro,.ex button,.who3 button,.ord-p button,.wr-kb button,.bd-pad button,.tabs button,.pathcard,.addhw,.who button,.node,.slamnode,.lk,.lk2{transition:scale .42s cubic-bezier(.3,1.35,.5,1),box-shadow .2s,filter .2s,background-color .2s,translate .3s cubic-bezier(.2,.8,.2,1)}
.pressing{scale:.965;transition:scale .09s ease-out,box-shadow .1s!important}
.node.pressing,.slamnode.pressing{scale:.94}
.tabs button.pressing{scale:.92}

.b3 .ripple,span.ripple{position:absolute!important;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35) 0,rgba(255,255,255,.14) 40%,transparent 70%);pointer-events:none;transform:scale(0);animation:rip .7s cubic-bezier(.2,.7,.3,1) forwards}
.ripple.dark{background:radial-gradient(circle,color-mix(in srgb,var(--w1) 28%,transparent) 0,color-mix(in srgb,var(--w1) 10%,transparent) 45%,transparent 70%)}
@keyframes rip{to{transform:scale(1);opacity:0}}
.b3>:not(.ripple),.row>:not(.ripple),.ba-t>:not(.ripple),.tiles button>:not(.ripple),.opts button>:not(.ripple),.tabs button>:not(.ripple){position:relative;z-index:1}
/* sparkles */
.spk{position:absolute;z-index:30;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;pointer-events:none;animation:spk .65s cubic-bezier(.15,.7,.3,1) forwards}
.spk svg{width:100%;height:100%}
@keyframes spk{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg);opacity:0}}
/* entrances */
.ain{animation:ain .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes ain{from{opacity:0;transform:translateY(16px) scale(.98)}}
.pin .node,.pin .slamnode{animation:pin .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:inherit}
@keyframes pin{from{opacity:0;scale:.5}}
.pill.bump{animation:bump .6s var(--pop)}
/* hover (mouse only) */
@media (hover:hover) and (pointer:fine){
  .b3:not([disabled]):hover{filter:brightness(1.06) saturate(1.05)}
  .b3:not(.white):not(.ghost)::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
  .b3:not(.white):not(.ghost):hover::before{transform:translateX(120%)}
  .row:hover,.ba-t:hover,.pathcard:hover,.lsn:hover,.rv:hover,.gcard:hover,.chlist button:hover,.goals button:hover,.opts button:hover,.tiles button:hover,.tried button:hover{translate:0 -2px;box-shadow:0 0 0 2px color-mix(in srgb,var(--w1) 35%,var(--line)) inset,0 7px 0 var(--line),0 14px 24px -14px rgba(27,34,54,.35)}
  .faces button:hover{translate:0 -3px}
  .node:not(.lock):hover{scale:1.07}.node:not(.lock):hover svg{animation:wig .5s ease}
  .slamnode:hover{scale:1.03}
  .tro:hover svg,.stk:hover i{animation:wig .6s ease}
  .tabs button:hover{color:var(--w1)}
  .who button:hover{translate:0 -2px}
  .wr-kb button:hover:not([disabled]){translate:0 -2px;box-shadow:0 0 0 2px var(--w1) inset,0 4px 0 var(--line)}
  .bd-pad button:hover{background:var(--w3)}
}
@keyframes wig{25%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
/* light that follows the pointer + a slow sheen on the focus card */
.focus,.slamnode,.gcard,.prize,.bigfocus{background-image:radial-gradient(260px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.22),transparent 60%),var(--bgi,none)}
.focus{--bgi:var(--wg)}.bigfocus{--bgi:var(--wg)}
.focus::before,.bigfocus::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%);transform:translateX(-130%);animation:sheen 6s ease-in-out 1.2s infinite;pointer-events:none;border-radius:inherit}
.bigfocus{position:relative;overflow:hidden}
@keyframes sheen{0%,62%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
/* tab icon pop when it becomes active */
.tabs button.on svg{animation:tabpop .45s cubic-bezier(.34,1.8,.5,1)}
@keyframes tabpop{40%{transform:scale(1.25) translateY(-2px)}}
/* chips: the tick pops in */
.tiles button.on::after,.pick button.on::after{animation:pop .35s cubic-bezier(.34,1.8,.5,1)}
.tiles button.on i{animation:wig .45s ease}
/* sheets: children slide up one after another */
.sheet.on>*{animation:ain .45s cubic-bezier(.2,.8,.2,1) both}
.sheet.on>*:nth-child(2){animation-delay:.04s}.sheet.on>*:nth-child(3){animation-delay:.08s}.sheet.on>*:nth-child(4){animation-delay:.12s}.sheet.on>*:nth-child(5){animation-delay:.16s}.sheet.on>*:nth-child(6){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* selections animate in place now (no full redraw), so give the "on" state a smooth change */
.faces button,.tried button,.opts button,.tf button,.tiles button,.chlist button{transition:scale .42s cubic-bezier(.3,1.35,.5,1),translate .3s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-color .25s,color .25s}
.faces button.on svg{animation:wig .5s ease}
.opts button.on em{animation:pop .3s cubic-bezier(.34,1.8,.5,1)}
.b3[disabled]{transition:background-color .3s,box-shadow .3s,color .3s}

/* Home on the court (Joshua's park background) with Coach Carlos in the focus card */
.app[data-tab=home]{background:#5BBAF7 url(carlos/park.webp) center bottom/cover no-repeat}
.app[data-tab=home] .bar{background:transparent;box-shadow:none}
.app[data-tab=home] .bar .pill{background:rgba(255,255,255,.9);box-shadow:0 2px 0 rgba(0,0,0,.06)}
.app[data-tab=home] .scroll.plain{background:transparent}
.app[data-tab=home] .hm-h{text-shadow:0 2px 0 rgba(255,255,255,.55)}
.app[data-tab=home] .row{box-shadow:0 4px 0 rgba(0,0,0,.12)}
.focus .fo-carlos{position:absolute;right:14px;top:12px;width:86px;height:86px;border-radius:50%;padding:0;background:#A8DBFF url(carlos/park.webp) center 38%/250% no-repeat;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 6px 14px rgba(0,0,0,.2);z-index:2;overflow:visible}
.fo-carlos .fo-cv{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.fo-rig,.fo-rig svg{position:absolute;inset:0;width:100%;height:100%}
.fo-carlos i{position:absolute;right:2px;bottom:4px;width:16px;height:16px;border-radius:50%;background:#2FC46B;box-shadow:0 0 0 3px #fff}
.focus:has(.fo-carlos)::after{display:none}
.focus:has(.fo-carlos) .fo-cue{padding-right:6px}

/* Path scenes: Joshua's painted road to each Grand Slam (start at the top, the stadium at the bottom where the slam step is) */
.path-art .scroll[class*=scene-]{background:#2F7A47 url(carlos/path-rg.webp) center top/auto var(--sceneh,1200px) no-repeat;background-attachment:local}
/* on the painted scene: labels sit on little white pills, locked steps stay solid, the drawn trail steps back (the painted road is the path) */
.path-art .scroll[class*=scene-] .nlab{background:rgba(255,255,255,.92);padding:3px 9px;border-radius:9px;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.path-art .scroll[class*=scene-] .node.done .nlab{color:#A9801C}
.path-art .scroll[class*=scene-] .node.lock{--c:#F4F6FA;--d:#C8CEDB}
.path-art .scroll[class*=scene-] .slamnode.lock{filter:grayscale(.6);opacity:1}
.path-art .scroll[class*=scene-] .trail path{opacity:.55}
.path-art .scroll[class*=scene-] .dball{display:none}   /* Paris for every path until the other three are painted */
/* Joshua's season road, one painting cut into the four cities: each chapter's stadium sits at its Grand Slam step */
.path-art .scroll.scene-ao{background-image:url(carlos/path-ao.webp?v=2);background-color:#4F9E3E}
.path-art .scroll.scene-rg{background-image:url(carlos/path-rg.webp?v=2);background-color:#4F9E3E}
.path-art .scroll.scene-wim{background-image:url(carlos/path-wim.webp?v=2);background-color:#3F7F3A}
.path-art .scroll.scene-uso{background-image:url(carlos/path-uso.webp?v=2);background-color:#2E5E37}

/* Home v5: Carlos says hello (speech bubble + live Carlos), one smart next step, the week, the next Grand Slam */
.hm .hero{position:relative;display:flex;align-items:flex-end;gap:2px;min-height:168px;margin:-6px -6px 0 0}
.hero-bub{position:relative;flex:1;align-self:center;text-align:left;padding:13px 40px 14px 15px;border-radius:22px 22px 22px 22px;background:#fff;box-shadow:0 6px 18px rgba(16,40,30,.14);margin-bottom:26px}
.hero-bub::after{content:"";position:absolute;right:-14px;bottom:22px;width:22px;height:20px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.hero-bub b{display:block;font-size:20px;font-weight:900;line-height:1.15;color:#1B2236}
.hero-bub span{display:block;margin-top:3px;font-size:15px;font-weight:800;line-height:1.3;color:#4B5568}
.hero-bub i{position:absolute;right:10px;top:10px;width:24px;height:24px;color:#1FA855}.hero-bub i svg{width:24px;height:24px}
.hero-c{position:relative;width:138px;height:168px;flex:none;padding:0}
.hero-cv,.hero-rig,.hero-rig svg{position:absolute;inset:0;width:100%;height:100%}
.focus.nx-after{--bgi:linear-gradient(160deg,#A78BFA,#7C3AED);box-shadow:0 7px 0 #5B21B6}.focus.nx-after .fo-acts .b3{color:#6D28D9}
.focus.nx-done{--bgi:linear-gradient(160deg,#4BD884,#1FAE5A);box-shadow:0 7px 0 #14974B}.focus.nx-done .fo-acts .b3{color:#15803D}
.hm .focus{margin-top:2px}
.hm .focus::after{display:none}
.fo-alt{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;color:#fff;font-weight:900;font-size:15px;opacity:.95}
.fo-alt svg{width:16px;height:16px}
.wk{margin-top:16px;padding:12px 14px 14px;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 4px 0 rgba(0,0,0,.1)}
.wk-h{display:flex;align-items:center;justify-content:space-between}
.wk-h b{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:900}.wk-h b svg{width:18px;height:18px;color:#F97316}
.wk-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.wk-d{display:flex;flex-direction:column;align-items:center;gap:4px}
.wk-d small{font-size:12px;font-weight:900;color:#94A3B8}
.wk-d i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#F1F5F9;color:#9CCB3B}
.wk-d i svg{width:17px;height:17px}
.wk-d.on i{background:linear-gradient(160deg,#FFB547,#FF7A1A);color:#fff;box-shadow:0 3px 0 #D9600B}
.wk-d.td small{color:#1B2236}.wk-d.td i{box-shadow:0 0 0 3px #1B2236}.wk-d.td.on i{box-shadow:0 0 0 3px #1B2236,0 3px 0 #D9600B}
.wk-d.fut i{opacity:.6}
.row.goal{margin-top:12px;background:rgba(255,255,255,.96)}
.gl-t{width:46px;height:46px;flex:none;display:grid;place-items:center}.gl-t svg{width:44px;height:44px}
.gl-bar{display:block;height:9px;margin-top:7px;border-radius:9px;background:#EEF2F7;overflow:hidden}.gl-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#FFC531,#FF9F1C)}
.dpick{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.dpick button{padding:12px 0;border-radius:14px;background:#F1F5F9;font-weight:900;font-size:14px;color:#475569;box-shadow:0 3px 0 #DCE2EC}
.dpick button.on{background:var(--w1);color:#fff;box-shadow:0 3px 0 var(--w2)}
.tpick{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-weight:900}.tpick input{font:inherit;font-weight:900;border:0;border-radius:12px;padding:8px 10px;background:#F1F5F9}
/* Path on the painted scene: the top bar sits on the same sky as the painting (no white strip) */
.path-art .app[data-tab=path]{background:#58BCF8}
.path-art .app[data-tab=path] .bar{background:transparent;box-shadow:none}
.path-art .app[data-tab=path] .bar .pill{background:rgba(255,255,255,.92);box-shadow:0 2px 0 rgba(0,0,0,.06)}
/* calmer Home: one short Carlos line, a simple focus card, one summary card */
.hm .focus.calm{padding:18px 20px 16px}
.hm .focus.calm .fo-k{margin-top:0}
.hm .focus.calm .fo-cue{font-size:28px;margin-top:6px}
.hm .focus.calm .fo-acts .b3{margin-top:16px;min-height:56px;font-size:18px}
.hero-bub span{font-size:15px}
.sum{margin-top:16px;padding:14px 16px;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 4px 0 rgba(0,0,0,.08)}
.sum .wk-h b{font-size:15px;color:#334155}
.sum .wk-d i{width:30px;height:30px;background:#F1F5F9}
.sum .wk-d.ten i{box-shadow:inset 0 0 0 2px #BEE3A8}
.sum .wk-d.on i{background:linear-gradient(160deg,#FFB547,#FF7A1A);box-shadow:none}
.sum .wk-d.td small{color:#1B2236}.sum .wk-d.td i{box-shadow:0 0 0 2.5px #1B2236}
.sum-g{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding-top:12px;border-top:1px solid #EEF2F7;text-align:left}
.sum-g .gl-t{width:36px;height:36px}.sum-g .gl-t svg{width:34px;height:34px}
.sum-g > span:last-child{flex:1}.sum-g b{display:block;font-size:15px;font-weight:900;color:#1B2236}

/* Home v6 (calm): pale sky, Carlos tile + greeting, a smaller focus card, a quiet link, the next Grand Slam */
.app[data-tab=home]{background:radial-gradient(60% 18% at 85% 14%,rgba(255,255,255,.9),transparent 70%),radial-gradient(45% 14% at 10% 40%,rgba(255,255,255,.75),transparent 70%),radial-gradient(50% 14% at 80% 78%,rgba(255,255,255,.7),transparent 70%),#E8F4FE}
.app[data-tab=home] .hm-h{text-shadow:none}
.bar .me-n{font-size:18px;font-weight:900;margin-right:auto}
.bar .pill.fl{color:#F97316}.bar .pill.fl svg{color:#F97316}
.hm3{padding-top:10px}
.c-hero{display:flex;align-items:center;gap:14px}
.c-tile{position:relative;width:104px;height:104px;flex:none;border-radius:26px;overflow:hidden;background:#5CC6F5;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(27,34,54,.14)}
.c-tile .hero-cv,.c-tile .hero-rig,.c-tile .hero-rig svg{position:absolute;inset:0;width:100%;height:100%}
.c-txt{flex:1;text-align:left}
.c-txt b{display:block;font-size:24px;font-weight:900;line-height:1.1;color:#1B2236}
.c-txt span{display:block;margin-top:5px;font-size:16px;font-weight:800;color:#55607A;line-height:1.3}
.hm3 .focus.calm{margin-top:18px;padding:16px 18px 16px}
.fo-row{display:flex;align-items:center;justify-content:space-between}
.fo-row .fo-k{margin:0}
.fo-t{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:900;opacity:.9}.fo-t svg{width:15px;height:15px}
.hm3 .focus.calm .fo-cue{font-size:26px;margin-top:8px}
.hm3 .focus.calm .fo-acts .b3{margin-top:14px;min-height:54px;font-size:18px}
.c-row{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:6px;padding:14px 6px;border-bottom:1px solid rgba(27,34,54,.08)}
.c-row span{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:900;color:#1B2236}.c-row span svg{width:20px;height:20px;color:#55607A}
.c-row em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:16px;font-weight:900;color:var(--w2)}.c-row em svg{width:17px;height:17px}
.nchal{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:12px;border-radius:22px;background:#fff;box-shadow:0 4px 0 rgba(27,34,54,.08);text-align:left}
.nc-pic{width:78px;height:78px;flex:none;border-radius:16px;background:#2B3A7A center 46%/260% no-repeat;overflow:hidden}
.nc-pic.svg{background:#E8F4FE}.nc-pic.svg svg{width:100%;height:100%}
.nc-b{flex:1;min-width:0}.nc-b small{display:block;font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#94A3B8}
.nc-b b{display:block;font-size:19px;font-weight:900;margin-top:2px;color:#1B2236}.nc-s{display:block;font-size:14px;font-weight:800;color:#64748B;margin-top:1px}
.nchal>svg{width:20px;height:20px;color:#C5CCDA;flex:none}
.tkrow{display:flex;align-items:center;gap:12px;margin:16px 16px 0;padding:14px 16px;border-radius:20px;background:#F3EEFF;color:#6D28D9}
.tkrow>svg{width:30px;height:30px;flex:none}.tkrow b{display:block;font-size:17px;font-weight:900}.tkrow small{display:block;font-size:13px;font-weight:700;color:#7C6BA8;margin-top:1px}

/* the kid's real coach (coach.js): a face that marks what their coach said */
.cav{display:inline-block;flex:none;width:22px;height:22px;border-radius:7px;overflow:hidden;vertical-align:middle;box-shadow:0 0 0 2px #fff}
.cav svg{display:block;width:100%;height:100%}
.cav.sm{width:24px;height:24px;border-radius:8px;margin-right:7px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.cav.md{width:52px;height:52px;border-radius:16px;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(27,34,54,.12)}
.cav.hwf{width:44px;height:44px;border-radius:14px;box-shadow:0 0 0 2px #fff,0 3px 0 rgba(0,0,0,.08)}
.cav.carl{background:#DCEBFF}.cav.carl img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.5);transform-origin:50% 0}
.fo-k.fo-co{display:flex;align-items:center;text-transform:none;letter-spacing:0;font-size:15px}
.mycoach{display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:0 3px 0 rgba(27,34,54,.06)}
.mycoach>span:nth-child(2){flex:1;min-width:0}.mycoach b{display:block;font-size:17px;font-weight:900}.mycoach small{display:block;font-size:13px;font-weight:700;color:#64748B;margin-top:1px}
.mycoach.none .hw-ic{flex:none}

.cs{position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;background:var(--appBg,#F7F9FC);font-family:Nunito,system-ui,sans-serif;color:#1B2236;opacity:0;transform:translateY(24px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.cs.on{opacity:1;transform:none}.cs.off{opacity:0;transform:translateY(30px);transition:opacity .3s,transform .35s}
.cs-top{display:flex;align-items:center;justify-content:space-between;padding:calc(20px + env(safe-area-inset-top)) 18px 0}
.cs-dots{display:flex;gap:6px}.cs-dots i{width:26px;height:8px;border-radius:9px;background:#C9DCEC;transition:background .3s}.cs-dots i.on{background:#2FC46B}
.cs-later{font-weight:900;font-size:15px;color:#64748B;padding:8px 4px}
.cs-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 22px calc(26px + env(safe-area-inset-bottom));overflow:auto}
.cs-body>*{animation:csIn .4s cubic-bezier(.2,.9,.3,1.2) both}.cs-body>*:nth-child(2){animation-delay:.05s}.cs-body>*:nth-child(3){animation-delay:.1s}
@keyframes csIn{from{opacity:0;transform:translateY(10px)}}
.cs-c{position:relative;display:block;width:190px;height:170px;flex:none;margin-top:4px}
.cs-c .cs-ci{position:absolute;left:0;right:0;bottom:8px;margin:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(27,34,54,.12))}
.cs-c .cs-sh{display:none}
.cs-c .cs-ci{-webkit-mask-image:linear-gradient(#000 72%,transparent 98%);mask-image:linear-gradient(#000 72%,transparent 98%)}
.cs h2{margin-top:22px;font-size:27px;font-weight:900;line-height:1.15;letter-spacing:-.01em}
.cs p{margin-top:8px;font-size:17px;font-weight:700;color:#55607A;line-height:1.35;max-width:310px}
.cs-acts{width:100%;margin-top:auto;padding-top:20px}
.cs-acts .b3{--c:#2FC46B;--d:#1E9D4F}.cs-acts .b3.white{--c:#fff;--d:#DCE1EA}
.cs-acts .b3:disabled{opacity:.45}
.cs-in{display:flex;align-items:center;gap:8px;width:100%;margin-top:22px;padding:6px 6px 6px 18px;border-radius:20px;background:#fff;box-shadow:0 0 0 3px #CFE3F3}
.cs-in:focus-within{box-shadow:0 0 0 3px #2FC46B}
.cs-in span{font-size:22px;font-weight:900;color:#94A3B8}
.cs-in input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:22px;font-weight:900;color:#1B2236;padding:12px 4px;background:transparent}
.cs-big{display:block;width:118px;height:118px;flex:none;border-radius:32px;overflow:hidden;box-shadow:0 0 0 4px #fff,0 10px 24px rgba(27,34,54,.14);margin-top:4px}
.cs-big svg{display:block;width:100%;height:100%}
.cs-big.sm{width:104px;height:104px;border-radius:28px;margin:0}
.cs-nm{margin-top:12px;font-size:16px;font-weight:900;padding:4px 12px;border-radius:99px;background:#fff}
.cs-body .cs-nm+h2{margin-top:14px;font-size:23px}
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:14px}
.cs-grid button{aspect-ratio:1;border-radius:18px;overflow:hidden;box-shadow:0 3px 0 rgba(27,34,54,.1);transition:transform .15s}
.cs-grid button svg{display:block;width:100%;height:100%}
.cs-grid button.on{box-shadow:0 0 0 4px #1B2236;transform:scale(1.04)}
.cs-cols{display:flex;gap:12px;justify-content:center;margin-top:16px}
.cs-cols button{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.12)}
.cs-cols button.on{box-shadow:0 0 0 3px #fff,0 0 0 6px #1B2236}
.cs-pair{display:flex;gap:10px;align-items:flex-end;margin-top:10px}.cs-pair .cs-c{margin:0;width:150px;height:140px}
.cs-key{width:100%;margin-top:20px;display:flex;flex-direction:column;gap:10px;text-align:left}
.cs-key>div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:0 3px 0 rgba(27,34,54,.06)}
.cs-key .cav{width:44px;height:44px;border-radius:13px}
.cs-key b{display:block;font-size:17px;font-weight:900}.cs-key small{display:block;font-size:14px;font-weight:700;color:#64748B}
.phone{overflow:clip}

/* Home sky by time of day (kids.js sets data-sky): Joshua's sunny court painting by day, the starry one in the evening (light text on it) */
.app[data-tab=home][data-sky=day]{background:#4DB6F8 url(carlos/home-day.webp?v=1) center bottom/cover no-repeat}
.app[data-tab=home][data-sky=day] .c-tile{box-shadow:0 0 0 3px #fff,0 8px 20px rgba(27,34,54,.18)}
.app[data-tab=home][data-sky=day] .c-txt span{color:#3E4A66}
.app[data-tab=home][data-sky=day] .nchal{box-shadow:0 6px 18px rgba(27,34,54,.18)}
.app[data-tab=home][data-sky=night]{background:#151A6B url(carlos/home-night.webp?v=1) center bottom/cover no-repeat}
.app[data-tab=home][data-sky=night] .bar .me-n{color:#fff}
.app[data-tab=home][data-sky=night] .c-txt b{color:#fff}
.app[data-tab=home][data-sky=night] .c-txt span{color:#C7CEF5}
.app[data-tab=home][data-sky=night] .c-tile{box-shadow:0 0 0 3px #fff,0 8px 20px rgba(0,0,0,.3)}
.app[data-tab=home][data-sky=night] .c-row{border-bottom-color:rgba(255,255,255,.15)}
.app[data-tab=home][data-sky=night] .c-row span{color:#fff}.app[data-tab=home][data-sky=night] .c-row span svg{color:#C7CEF5}
.app[data-tab=home][data-sky=night] .c-row em{color:var(--w1)}
.app[data-tab=home][data-sky=night] .nchal{box-shadow:0 6px 18px rgba(0,0,0,.25)}
.app[data-tab=home][data-sky=day] .c-row{margin-top:12px;padding:13px 16px;border:0;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(27,34,54,.12)}
.bar{padding-top:max(52px,calc(env(safe-area-inset-top) + 8px))}

/* test mode (grown-ups trying the app): banner on the Path + the full lesson list */
.testbar{position:relative;z-index:4;margin:12px 14px 0;padding:12px 14px;border-radius:18px;background:#FFF7E0;box-shadow:0 0 0 2px #FFD66B inset,0 4px 0 rgba(0,0,0,.08)}
.tb-h{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}.tb-h b{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:900;color:#8A5A00}.tb-h b svg{width:16px;height:16px}
.tb-h span{order:3;flex-basis:100%;font-size:13px;font-weight:700;color:#7A6230}.tb-h .lk{margin-left:auto}
.tb-w{display:flex;gap:6px;margin-top:10px}
.tb-w button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 0;border-radius:12px;background:#fff;font-size:13px;font-weight:900;color:#475569;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.tb-w button.on{background:#1B2236;color:#fff}
.tb-w i{width:12px;height:12px;border-radius:50%}.tb-red{background:#EF4444}.tb-orange{background:#FF8A1F}.tb-green{background:#22C55E}.tb-yellow{background:#E4F23A;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.tlist{display:flex;flex-direction:column;gap:8px;margin-top:14px;max-height:52vh;overflow:auto}
.tlist button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#F5F7FB;text-align:left}
.tlist i{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--tc);color:#fff}.tlist i svg{width:22px;height:22px}
.tlist b{display:block;font-size:16px;font-weight:900}.tlist small{display:block;font-size:13px;font-weight:700;color:#64748B}

/* court questions: tap where you'd hit it */
.courtq{display:flex;flex-direction:column;align-items:center}
.courtq svg{width:min(100%,300px);height:auto;max-height:42vh;filter:drop-shadow(0 6px 0 rgba(0,0,0,.08))}
.ct{cursor:pointer}.ct .ct-r{fill:rgba(255,225,77,.22);stroke:#FFE14D;stroke-width:3;stroke-dasharray:5 5}.ct .ct-c{fill:#FFE14D}.ct text{fill:#1B2236}
.ct.on .ct-r{fill:rgba(255,225,77,.5);stroke-dasharray:none}.ct.on .ct-c{fill:#1B2236}.ct.on text{fill:#FFE14D}
.ct.ok .ct-r{fill:rgba(88,204,2,.45);stroke:#58CC02;stroke-dasharray:none}.ct.ok .ct-c{fill:#58CC02}.ct.ok text{fill:#fff}
.ct.no .ct-r{fill:rgba(255,75,75,.4);stroke:#FF4B4B}.ct.no .ct-c{fill:#FF4B4B}.ct.no text{fill:#fff}
.cq-key{display:flex;gap:16px;margin-top:8px;font-size:13px;font-weight:800;color:var(--muted)}.cq-key span{display:flex;align-items:center;gap:6px}.cq-key i{width:12px;height:12px;border-radius:50%}
.fb-why{margin-top:6px;font-size:15px;font-weight:800;line-height:1.35;color:#1B2236;opacity:.85}

/* season header on the Path: this season's four Slams */
.season{position:relative;z-index:4;margin:12px 14px 0;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 4px 0 rgba(0,0,0,.08);display:flex;align-items:center;gap:10px}
.ss-h{flex:1;min-width:0}.ss-h small{display:block;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#94A3B8}.ss-h b{display:block;font-size:18px;font-weight:900;line-height:1.15}
.ss-r{display:flex;gap:4px}
.ss-s{position:relative;width:44px;display:flex;flex-direction:column;align-items:center;opacity:.45}.ss-s svg{width:30px;height:30px}.ss-s small{font-size:9.5px;font-weight:900;color:#64748B}
.ss-s.won,.ss-s.cur{opacity:1}.ss-s.cur{border-radius:12px;background:#FFF3C4;box-shadow:0 0 0 2px #FFD66B}
.ss-s i{position:absolute;top:-4px;right:2px;width:16px;height:16px;border-radius:50%;background:#58CC02;color:#fff;display:grid;place-items:center}.ss-s i svg{width:10px;height:10px}
.tro{position:relative}.tro-n{position:absolute;top:4px;right:6px;font-style:normal;font-size:12px;font-weight:900;color:#fff;background:#F59E0B;border-radius:99px;padding:1px 7px}
.tl-h{margin:8px 2px 0;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#94A3B8}
.ballpick{margin:4px 0 12px}
/* Rally: Easy / Advanced */
.rmode{display:flex;gap:8px;margin-top:14px}
.rmode button{flex:1;padding:10px 12px;border-radius:16px;background:#F3F5F9;text-align:left;box-shadow:0 0 0 2px #E2E7F0 inset}
.rmode button b{display:block;font-size:16px;font-weight:900}.rmode button small{display:block;font-size:12.5px;font-weight:700;color:#64748B;margin-top:1px;line-height:1.25}
.rmode button.on{background:#ECFDF3;box-shadow:0 0 0 3px #16A34A inset}.rmode button.on b{color:#15803D}

/* five tabs: Home · Path · Play · My Tennis · Rewards */
.tabs{padding-left:8px;padding-right:8px}.tabs button{flex:1;width:auto;min-width:0;font-size:11.5px}
/* Home: two small cards under the big one */
.htiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.htile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:0 4px 12px rgba(27,34,54,.12);text-align:left;min-width:0}
.htile i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--tc);color:#fff;margin-bottom:6px;box-shadow:0 3px 0 rgba(0,0,0,.15)}.htile i svg{width:20px;height:20px}
.htile b{font-size:16px;font-weight:900;color:#1B2236}.htile small{font-size:13px;font-weight:700;color:#64748B;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.focus.gamecard{background-size:cover;background-position:center 30%;box-shadow:0 6px 0 rgba(11,22,54,.35)}
.focus.gamecard .fo-k,.focus.gamecard .fo-t,.focus.gamecard .fo-cue{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}
/* PLAY tab */
.pl{padding:0 16px}
.pl-hero{position:relative;margin-top:14px;border-radius:24px;min-height:200px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center 30%;box-shadow:0 6px 0 rgba(11,22,54,.25);overflow:hidden}
.pl-ht small{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.pl-ht b{display:block;font-size:25px;font-weight:900;color:#fff;line-height:1.15;margin-top:2px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.pl-hero .b3{--c:#16A34A;--d:#15803D;margin-top:12px}
.pl-opp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl-opp button,.pl-court button{display:flex;flex-direction:column;align-items:flex-start;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line);text-align:left;min-width:0}
.pl-opp button.on,.pl-court button.on{box-shadow:0 0 0 3px #16A34A inset,0 3px 0 #15803D}
.pl-opp i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:900;font-size:16px;background-size:cover;background-position:center;margin-bottom:6px}
.pl-opp b,.pl-court b{font-size:15px;font-weight:900}.pl-opp small,.pl-court small{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:700;color:#64748B}
.pl-opp small svg{width:12px;height:12px;color:#16A34A}
.pl-court{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pc-pic{position:relative;display:block;width:100%;height:58px;border-radius:12px;overflow:hidden;margin-bottom:6px;background:var(--cc)}.pc-pic svg{width:100%;height:100%}
.pl-court button.lock .pc-pic{filter:grayscale(.85);opacity:.6}.pc-pic em{position:absolute;inset:0;display:grid;place-items:center;color:#fff}.pc-pic em svg{width:22px;height:22px}
.pl-g{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:12px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line);text-align:left}
.pl-g i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--gc);color:#fff}.pl-g i svg{width:22px;height:22px}
.pl-g span{flex:1}.pl-g b{display:block;font-size:16px;font-weight:900}.pl-g small{display:block;font-size:12.5px;font-weight:700;color:#64748B}.pl-g>svg{width:18px;height:18px;color:#C5CCDA}
.pl{padding-top:14px}

/* Locker room (top of Rewards): spend stars on kit, rackets, headbands, ball trails and courts */
.lkr{margin:14px 16px 0;padding:16px;border-radius:24px;background:linear-gradient(180deg,#1B2A55,#0F1A3A);color:#fff;box-shadow:0 6px 0 rgba(11,22,54,.25)}
.lk-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.lk-h h2{font-size:22px;font-weight:900}.lk-h p{font-size:13.5px;font-weight:700;color:#B9C5E8;margin-top:2px}
.lk-st{display:flex;align-items:center;gap:5px;flex:none;padding:6px 11px;border-radius:99px;background:#FFD23F;color:#0F172A;font-weight:900}.lk-st svg{width:16px;height:16px}
.lk-stage{position:relative;margin-top:12px;height:200px;border-radius:18px;background:radial-gradient(60% 40% at 50% 92%,rgba(126,217,87,.55),transparent 70%),radial-gradient(80% 70% at 50% 30%,#2E4B9A,#16234D);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.lk-stage canvas{height:190px;width:auto}
.lk-tags{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:4px}.lk-tags span{font-size:11.5px;font-weight:900;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.14)}
.lk-cats{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none}.lk-cats::-webkit-scrollbar{display:none}
.lk-cats button{flex:none;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.1);color:#D6DEF5;font-weight:900;font-size:13.5px}.lk-cats button.on{background:#fff;color:#0F172A}
.lk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.lk-grid button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 9px;border-radius:16px;background:rgba(255,255,255,.08);color:#fff;text-align:center;min-width:0}
.lk-grid button.on{background:rgba(255,255,255,.2);box-shadow:0 0 0 3px #FFD23F inset}
.lk-grid .sw{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 4px 8px rgba(0,0,0,.3)}
.lk-grid .sw.court{border-radius:12px}.lk-grid .sw.ico svg{width:36px;height:36px}
.lk-stage .lk-3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s}.lk-stage canvas#lkPrev{transition:opacity .35s}   /* 11 Nov: the 3D Locker preview (gear3d.js) */.lk-grid .sw svg{width:20px;height:20px;color:#fff}.lk-grid .sw.orig{background:rgba(255,255,255,.15)}
.lk-grid b{font-size:12.5px;font-weight:900;line-height:1.15}.lk-grid small{display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;color:#FFD23F}.lk-grid small svg{width:12px;height:12px}
.lk-grid button.own small{color:#86EFAC}

/* Grand Slam draw: your road to the trophy */
.draw{margin-top:16px}
.dr-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}.dr-h b{font-size:18px;font-weight:900}.dr-h small{font-size:13px;font-weight:800;color:var(--sd,#334155)}
.dr-m{position:relative;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line)}
.dr-m>small{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#94A3B8;margin-bottom:4px}
.dr-p{display:flex;align-items:center;gap:8px;padding:3px 0}.dr-p i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:900;font-size:12px;background-size:cover;background-position:center;flex:none}
.dr-p b{flex:1;font-size:15px;font-weight:800;color:#64748B}.dr-p.w b{color:#0F172A;font-weight:900}.dr-p svg{width:16px;height:16px;color:#16A34A}
.dr-m.cur{box-shadow:0 0 0 3px var(--sc,#16A34A) inset,0 4px 0 var(--sd,#15803D)}.dr-m.cur>small{color:var(--sd,#15803D)}
.dr-m.next{opacity:.55}.dr-m.won{background:#F0FDF4}.dr-m.lost{background:#FEF2F2}
.dr-go{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:12px;background:var(--sc,#16A34A);color:#fff;font-weight:900;font-size:14px;box-shadow:0 3px 0 var(--sd,#15803D)}.dr-go svg{width:16px;height:16px}
.dr-ln{display:block;width:3px;height:12px;margin:0 auto;background:#D5DBE6;border-radius:2px}

/* Home layout switcher (while comparing) */
.hv{display:flex;align-items:center;gap:6px;margin:8px 16px 0;padding:6px;border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 3px 10px rgba(27,34,54,.12)}
.hv>span{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#64748B;padding:0 4px;line-height:1.1;width:46px}
.hv button{flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 2px;border-radius:11px;font-weight:900;font-size:15px;color:#1B2236}
.hv button small{font-size:9.5px;font-weight:800;color:#64748B;white-space:nowrap}.hv button.on{background:#1B2236;color:#fff}.hv button.on small{color:#C7D2FE}
/* B · Big Carlos */
.hb-stage{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:6px}
.hb-bub{position:relative;z-index:2;max-width:86%;padding:12px 16px;border-radius:20px;background:#fff;text-align:center;box-shadow:0 6px 16px rgba(27,34,54,.15)}
.hb-bub::after{content:"";position:absolute;left:50%;bottom:-11px;width:22px;height:16px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);transform:translateX(-50%)}
.hb-bub b{display:block;font-size:20px;font-weight:900;color:#1B2236}.hb-bub span{display:block;font-size:15px;font-weight:700;color:#55607A;margin-top:2px}
.hb-c{position:relative;width:220px;height:230px;margin-top:4px}.hb-c .hero-cv,.hb-c .hero-rig,.hb-c .hero-rig svg{position:absolute;inset:0;width:100%;height:100%}
.hb-main{--c:#16A34A;--d:#15803D;min-height:72px;justify-content:flex-start;gap:14px;text-align:left;margin-top:0}
.hb-main svg{width:30px;height:30px;flex:none}.hb-main span{min-width:0}.hb-main b{display:block;font-size:20px}.hb-main small{display:block;font-size:13.5px;opacity:.85;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.hb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.hb-row button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px;border-radius:18px;background:#fff;font-weight:900;font-size:13px;color:#1B2236;box-shadow:0 4px 12px rgba(27,34,54,.12)}
.hb-row i{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--tc);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.15)}.hb-row i svg{width:22px;height:22px}
/* C · My day */
.hc-top{display:flex;align-items:center;gap:12px}
.c-tile.mini{position:relative;width:64px;height:64px;flex:none;border-radius:20px;overflow:hidden;background:#5CC6F5;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(27,34,54,.15)}
.c-tile.mini .hero-cv,.c-tile.mini .hero-rig,.c-tile.mini .hero-rig svg{position:absolute;inset:0;width:100%;height:100%}
.hc-t{flex:1;min-width:0}.hc-t small{display:block;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#55607A}.hc-t b{display:block;font-size:20px;font-weight:900;color:#1B2236;line-height:1.15}
.hc-ring{position:relative;width:62px;height:62px;flex:none}.hc-ring svg{width:100%;height:100%}.hc-ring b{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:15px;color:#1B2236}
.hc-list{margin-top:14px;padding:12px;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(27,34,54,.12)}
.hc-list h3{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#94A3B8;margin:2px 4px 6px}
.hc-i{display:flex;align-items:center;gap:12px;width:100%;padding:10px 6px;border-radius:14px;text-align:left}.hc-i+.hc-i{border-top:1px solid #EEF2F7}
.hc-i i{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--w1);color:#fff}.hc-i i svg{width:20px;height:20px}
.hc-i span{flex:1;min-width:0}.hc-i b{display:block;font-size:16px;font-weight:900;color:#1B2236}.hc-i small{display:block;font-size:13px;font-weight:700;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-i>svg{width:18px;height:18px;color:#C5CCDA;flex:none}.hc-i.done i{background:#22C55E}.hc-i.done b{color:#94A3B8;text-decoration:line-through}
.hc .nchal{margin-top:12px}
/* D · Game hub */
.hd-hero{position:relative;margin-top:8px;padding:18px 16px 16px;border-radius:24px;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center 30%;color:#fff;box-shadow:0 6px 0 rgba(11,22,54,.3);overflow:hidden}
.hd-hero small{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.85}.hd-hero>b{font-size:30px;font-weight:900;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hd-hero>span{font-size:15px;font-weight:800;margin-top:2px}.hd-hero .gl-bar{margin-top:8px;background:rgba(255,255,255,.25)}.hd-hero .b3{--c:#FFD23F;--d:#D9A900;color:#1B2236;margin-top:12px}
.hd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.hd-stats span{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 3px 10px rgba(27,34,54,.1)}
.hd-stats svg{width:20px;height:20px;color:#F97316}.hd-stats span:nth-child(2) svg{color:#EAB308}.hd-stats span:nth-child(3) svg{color:#8B5CF6}
.hd-stats b{font-size:18px;font-weight:900;color:#1B2236}.hd-stats small{font-size:11.5px;font-weight:800;color:#64748B}
.hd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hd-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border-radius:20px;background:#fff;text-align:left;box-shadow:0 4px 12px rgba(27,34,54,.12);min-width:0}
.hd-grid i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--tc);color:#fff;margin-bottom:6px;box-shadow:0 3px 0 rgba(0,0,0,.15)}.hd-grid i svg{width:22px;height:22px}
.hd-grid b{font-size:16px;font-weight:900;color:#1B2236}.hd-grid small{font-size:12.5px;font-weight:700;color:#64748B;line-height:1.25}
.hd-c{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 12px;border-radius:20px;background:rgba(255,255,255,.95);text-align:left;box-shadow:0 4px 12px rgba(27,34,54,.12)}
.hd-c .c-tile.mini{width:52px;height:52px;border-radius:16px}.hd-c b{display:block;font-size:16px;font-weight:900;color:#1B2236}.hd-c small{display:block;font-size:13px;font-weight:700;color:#64748B}
.app[data-tab=home][data-sky=night] .hc-t b,.app[data-tab=home][data-sky=night] .hc-ring b{color:#fff}.app[data-tab=home][data-sky=night] .hc-t small{color:#C7CEF5}

/* Home: the focus deck (swipe to change your focus) */
.deck-w{margin-top:16px}
.deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 0 10px;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.deck>.dk{flex:0 0 calc(100% - 32px);margin:0 16px;scroll-snap-align:center;scroll-snap-stop:always}
.hm3 .deck>.focus.calm{margin-top:0}
.dk .fo-cue{min-height:2.3em}
.dk-p{margin-top:6px;font-size:14.5px;font-weight:700;line-height:1.35;opacity:.92}
.dk-add{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 18px 16px;border-radius:28px;background:rgba(255,255,255,.95);border:3px dashed #C9D3E3;color:#1B2236}
.dk-ai{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#E8F7EE;color:#16A34A}.dk-ai svg{width:26px;height:26px}
.dk-add b{margin-top:8px;font-size:19px;font-weight:900;line-height:1.2}.dk-add p{margin-top:4px;font-size:14px;font-weight:700;color:#64748B}
.dk-add .b3{--c:#16A34A;--d:#15803D;margin-top:12px;min-height:50px;font-size:16px}
.dk-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px}
.dk-nav button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#334155;box-shadow:0 2px 6px rgba(0,0,0,.12)}.dk-nav button svg{width:16px;height:16px}
.dk-dots{display:flex;gap:6px}.dk-dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:width .2s}
.dk-dots i.on{width:22px;background:#fff}
.dk-hint{text-align:center;font-size:12px;font-weight:800;color:#55607A;margin-top:4px}
.app[data-sky=night] .dk-hint{color:#C7CEF5}
.htile.hot{box-shadow:0 0 0 3px #3B82F6,0 4px 12px rgba(27,34,54,.12)}
.deck>.focus.dk{display:flex;flex-direction:column}.deck>.focus.dk .fo-acts{margin-top:auto;padding-top:4px}.deck>.dk-add .b3{margin-top:auto}

/* each focus card fits its own text */
.deck{align-items:flex-start}
/* TODAY'S FOCUS (once a day before Home) */
.tfo{position:absolute;inset:0;z-index:44;display:flex;flex-direction:column;background:radial-gradient(70% 30% at 50% 0%,#FFFFFF,transparent 70%),linear-gradient(180deg,#DFF1FF,#EAF6FF 45%,#F4FAFF);font-family:Nunito,system-ui,sans-serif;color:#1B2236;opacity:0;transform:translateY(20px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.tfo.on{opacity:1;transform:none}.tfo.off{opacity:0;transform:translateY(24px);transition:opacity .3s,transform .35s}
.tf-top{display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 18px 0}
.tf-strk{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:99px;background:#fff;font-weight:900;font-size:14px;color:#F97316;box-shadow:0 2px 8px rgba(27,34,54,.1)}.tf-strk svg{width:16px;height:16px}
.tf-later{font-weight:900;font-size:15px;color:#64748B;padding:8px 4px}
.tf-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 20px calc(24px + env(safe-area-inset-bottom));overflow:auto}
.tf-body>*{animation:csIn .4s cubic-bezier(.2,.9,.3,1.2) both}.tf-body>*:nth-child(2){animation-delay:.06s}.tf-body>*:nth-child(3){animation-delay:.12s}.tf-body>*:nth-child(4){animation-delay:.18s}
.tf-c{position:relative;display:block;width:116px;height:116px;flex:none;border-radius:32px;overflow:hidden;background:#5CC6F5;box-shadow:0 0 0 4px #fff,0 10px 24px rgba(27,34,54,.14)}
.tf-cv,.tf-cv>div,.tf-cv svg{position:absolute;inset:0;width:100%;height:100%}
.tf-body h2{margin-top:18px;font-size:26px;font-weight:900;line-height:1.15}
.tf-body>p{margin-top:6px;font-size:16px;font-weight:700;color:#55607A;max-width:320px}
.tf-opts{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:20px}
.tf-opts button{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:22px;background:#fff;text-align:left;box-shadow:0 0 0 2px #E3EAF4 inset,0 4px 0 #D9E2EE;transition:transform .12s}
.tf-opts button:active{transform:translateY(3px);box-shadow:0 0 0 2px #E3EAF4 inset,0 1px 0 #D9E2EE}
.tf-opts i{width:48px;height:48px;flex:none;border-radius:16px;display:grid;place-items:center;background:var(--oc);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.15);overflow:hidden}.tf-opts i svg{width:26px;height:26px}
.tf-opts .cav.tff{width:48px;height:48px;border-radius:0;box-shadow:none}
.tf-opts span{flex:1;min-width:0}.tf-opts b{display:block;font-size:17px;font-weight:900}.tf-opts small{display:block;font-size:14px;font-weight:700;color:#64748B;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-opts>button>svg{width:20px;height:20px;color:#C5CCDA;flex:none}
.tf-k{margin-top:22px;font-size:14px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#64748B}
.tf-card{width:100%;margin-top:12px;perspective:900px}
.tf-in{padding:22px 20px 20px;border-radius:28px;background:linear-gradient(160deg,var(--oc),color-mix(in srgb,var(--oc) 70%,#0B1636));color:#fff;text-align:left;box-shadow:0 8px 0 color-mix(in srgb,var(--oc) 60%,#0B1636);transform:rotateY(90deg);transition:transform .55s cubic-bezier(.2,1.3,.4,1)}
.tf-card.flip .tf-in{transform:none}
.tf-in small{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;opacity:.92}.tf-in small svg{width:18px;height:18px}
.tf-in>b{display:block;margin-top:10px;font-size:28px;font-weight:900;line-height:1.15}
.tf-in>p{margin-top:8px;font-size:16px;font-weight:700;line-height:1.4;opacity:.92}
.tf-in .frames{margin-top:14px}
.tf-in em{display:flex;align-items:center;gap:6px;margin-top:14px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.18);font-style:normal;font-weight:900;font-size:14px}.tf-in em svg{width:16px;height:16px}
.tf-go{--c:#16A34A;--d:#15803D;margin-top:auto;min-height:62px;font-size:20px}

/* Carlos's tip of the moment (every app open) */
.tp-hi{margin-top:26px;font-size:30px!important}
.tp-card{width:100%;margin-top:22px;padding:22px 20px 24px;border-radius:30px;background:linear-gradient(160deg,var(--t1),var(--t2));color:#fff;text-align:left;box-shadow:0 8px 0 color-mix(in srgb,var(--t2) 75%,#000)}
.tp-top{display:flex;align-items:center;gap:12px}
.tp-c{position:relative;width:58px;height:58px;flex:none;border-radius:18px;overflow:hidden;background:#5CC6F5;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.tp-c .tf-cv,.tp-c .tf-cv>div,.tp-c .tf-cv svg{position:absolute;inset:0;width:100%;height:100%}
.tp-top small{display:block;font-size:14px;font-weight:900;opacity:.95}.tp-top em{display:inline-block;margin-top:3px;font-style:normal;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.2)}
.tp-card>b{display:block;margin-top:18px;font-size:30px;font-weight:900;line-height:1.12}
.tp-card>p{margin-top:10px;font-size:18px;font-weight:700;line-height:1.4;opacity:.95}
/* design switcher at the bottom of the focus screen (while comparing) */
.tf-vs{display:flex;align-items:center;gap:5px;margin:0 14px calc(10px + env(safe-area-inset-bottom));padding:5px;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(27,34,54,.1)}
.tf-vs:empty{display:none}.tf-vs>span{font-size:10.5px;font-weight:900;text-transform:uppercase;color:#64748B;padding:0 4px}
.tf-vs button{flex:1;display:flex;flex-direction:column;align-items:center;padding:4px 2px;border-radius:10px;font-weight:900;font-size:14px;color:#1B2236}
.tf-vs button small{font-size:9px;font-weight:800;color:#64748B;white-space:nowrap}.tf-vs button.on{background:#1B2236;color:#fff}.tf-vs button.on small{color:#C7D2FE}
/* B · big tiles */
.tfb{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.tfb button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:14px 10px;border-radius:26px;background:linear-gradient(160deg,var(--oc),color-mix(in srgb,var(--oc) 70%,#0B1636));color:#fff;box-shadow:0 6px 0 color-mix(in srgb,var(--oc) 60%,#0B1636);text-align:center}
.tfb button.big{grid-column:1/-1;min-height:170px}
.tfb i{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.22);overflow:hidden}.tfb i svg{width:36px;height:36px}.tfb .cav.tff{width:64px;height:64px;border-radius:0;box-shadow:none}
.tfb b{font-size:18px;font-weight:900;line-height:1.15}.tfb small{font-size:15px;font-weight:800;opacity:.92}
/* C · one at a time */
.tfc{width:100%;display:flex;align-items:center;gap:8px;margin-top:22px}
.tfc-n{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;color:#334155;box-shadow:0 3px 8px rgba(27,34,54,.15)}.tfc-n svg{width:20px;height:20px}
.tfc-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:250px;justify-content:center;padding:20px 14px;border-radius:30px;background:linear-gradient(160deg,var(--oc),color-mix(in srgb,var(--oc) 70%,#0B1636));color:#fff;box-shadow:0 8px 0 color-mix(in srgb,var(--oc) 60%,#0B1636);animation:csIn .35s cubic-bezier(.2,.9,.3,1.2)}
.tfc-card i{width:84px;height:84px;border-radius:28px;display:grid;place-items:center;background:rgba(255,255,255,.22);overflow:hidden}.tfc-card i svg{width:46px;height:46px}.tfc-card .cav.tff{width:84px;height:84px;border-radius:0;box-shadow:none}
.tfc-card b{font-size:23px;font-weight:900;line-height:1.15}.tfc-card small{font-size:16px;font-weight:800;opacity:.92}
.tfc-dots{display:flex;gap:7px;margin-top:14px}.tfc-dots i{width:9px;height:9px;border-radius:99px;background:#C9D6E6}.tfc-dots i.on{width:24px;background:#1B2236}
/* D · Carlos asks */
.tfd{display:flex;flex-direction:column;align-items:center;margin-top:12px}
.tf-c.big{width:170px;height:170px;border-radius:44px}
.tfd-bub{position:relative;margin-top:18px;padding:14px 18px;border-radius:22px;background:#fff;box-shadow:0 6px 16px rgba(27,34,54,.12)}
.tfd-bub::before{content:"";position:absolute;left:50%;top:-10px;width:20px;height:14px;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateX(-50%)}
.tfd-bub b{display:block;font-size:22px;font-weight:900}.tfd-bub span{display:block;font-size:17px;font-weight:700;color:#55607A;margin-top:2px}
.tfd-r{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.tfd-r button{padding:15px 18px;border-radius:99px;background:#fff;color:var(--oc);font-weight:900;font-size:18px;box-shadow:0 0 0 3px var(--oc) inset,0 4px 0 color-mix(in srgb,var(--oc) 40%,#fff)}
.tfd-r small{display:block;font-size:14px;font-weight:800;color:#64748B;margin-top:2px}
.tp-hi{margin-top:auto!important}.tp-card~.tf-go{margin-top:auto}
.tfc-card{touch-action:pan-y;user-select:none}
.tp-card>.tp-when{margin-top:18px;font-size:17px;font-weight:800;opacity:.9;line-height:1.3}
.tp-card>.tp-when+b{margin-top:6px;font-size:28px}

/* ---------- tennis heroes: player badges, favourite player, fact sheets ---------- */
.plb{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:linear-gradient(150deg,var(--p1),var(--p2));box-shadow:0 3px 0 color-mix(in srgb,var(--p2) 70%,#000)}
.plb b{font-size:17px;font-weight:900;color:#fff;letter-spacing:.02em}
.plb i{position:absolute;right:-4px;bottom:-3px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;font-style:normal;font-size:13px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.plb.md{width:56px;height:56px}.plb.md b{font-size:20px}
.plb.tp{width:58px;height:58px;box-shadow:0 0 0 3px rgba(255,255,255,.9)}.plb.tp b{font-size:21px}
.plb.lg{width:78px;height:78px;box-shadow:0 0 0 4px rgba(255,255,255,.9)}.plb.lg b{font-size:28px}.plb.lg i{width:30px;height:30px;font-size:18px}
.plb.xl{width:124px;height:124px;margin-top:10px;box-shadow:0 0 0 5px #fff,0 10px 24px rgba(27,34,54,.16)}.plb.xl b{font-size:44px}.plb.xl i{width:40px;height:40px;font-size:24px;right:0;bottom:0}
/* onboarding: pick a favourite */
.cs-pl{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:calc(100% + 12px);margin:16px -6px 0}
.cs-pl button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:10px 2px 8px;border-radius:18px;background:#fff;box-shadow:0 3px 0 rgba(27,34,54,.08);transition:transform .15s}
.cs-pl button .plb{width:44px;height:44px;margin-bottom:6px}.cs-pl button .plb b{font-size:16px}.cs-pl button .plb i{width:19px;height:19px;font-size:11px;right:-5px}
.cs-pl button>b{font-size:13.5px;font-weight:900;line-height:1.1}.cs-pl button small{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;font-weight:800;color:#64748B;line-height:1.15}
.cs-pl button.on{box-shadow:0 0 0 3px #1B2236;transform:scale(1.03)}
.cs-pl+.cs-acts .b3+.b3{margin-top:10px}
/* My Tennis */
.myfav{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:14px;border-radius:22px;text-align:left;color:#fff;background:linear-gradient(150deg,var(--p1),var(--p2));box-shadow:0 4px 0 color-mix(in srgb,var(--p2) 70%,#000)}
.myfav .plb{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.myfav>span:nth-child(2){flex:1;min-width:0}.myfav b{display:block;font-size:18px;font-weight:900}.myfav small{display:block;font-size:13px;font-weight:700;opacity:.92;margin-top:2px;line-height:1.3}
.myfav em{display:flex;align-items:center;gap:2px;flex:none;font-style:normal;font-size:13px;font-weight:900;padding:6px 8px 6px 10px;border-radius:99px;background:rgba(255,255,255,.22)}.myfav em svg{width:14px;height:14px}
.myfav-ch{display:block;margin:8px 0 6px auto}
/* sheets */
.sheet:has(.pls){max-height:90%;overflow:auto}
.pls-l{display:flex;flex-direction:column;gap:8px;margin:16px 0 14px}
.pls-l button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:#F4F7FB;text-align:left}
.pls-l button.fav{background:#FFF7E0;box-shadow:inset 0 0 0 2px #F5C542}
.pls-l button>span:not(.plb){flex:1;min-width:0}.pls-l b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:17px;font-weight:900}.pls-l small{display:block;font-size:13px;font-weight:700;color:#64748B}
.pls-l b em{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:11px;font-weight:900;padding:2px 8px;border-radius:99px;background:#F5C542;color:#5B4100}.pls-l b em svg{width:11px;height:11px}
.pls-l>button>svg{width:18px;height:18px;color:#94A3B8;flex:none}
.pl-hd{display:flex;align-items:center;gap:14px;padding:16px;border-radius:24px;color:#fff;background:linear-gradient(150deg,var(--p1),var(--p2))}
.pl-hd small{display:block;font-size:12.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.9}.pl-hd b{display:block;font-size:24px;font-weight:900;line-height:1.1;margin-top:2px}.pl-hd span{display:block;font-size:13.5px;font-weight:700;opacity:.92;margin-top:4px}
.pl-fx{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.pfx{padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--t1) 28%,#fff),0 3px 0 rgba(27,34,54,.05)}
.pfx em{display:inline-block;font-style:normal;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;color:#fff;background:var(--t2)}
.pfx b{display:block;margin-top:8px;font-size:19px;font-weight:900;line-height:1.2}
.pfx p{margin-top:5px;font-size:15.5px;font-weight:700;color:var(--ink2);line-height:1.4}
.pfx span{display:flex;gap:7px;align-items:flex-start;margin-top:10px;padding:9px 11px;border-radius:14px;font-size:14.5px;font-weight:800;line-height:1.35;color:var(--t2);background:color-mix(in srgb,var(--t1) 12%,#fff)}
.pfx span svg{width:17px;height:17px;flex:none;margin-top:1px}
.pls .b3+.b3{margin-top:10px}
/* the app-open card when it's a player fact */
.pfc>b{font-size:27px}
.pfc-l{display:flex;gap:10px;align-items:flex-start;margin-top:16px!important;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.18);font-size:16.5px!important;font-weight:800!important;line-height:1.35}
.pfc-l svg{width:22px;height:22px;flex:none;margin-top:2px}.pfc-l small{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
/* the trophy ceremony */
.cer-p{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.14);text-align:left;font-size:14.5px;font-weight:700;line-height:1.35}
.cer-p b{display:block;font-size:16px;font-weight:900}
.plb.plus b{font-size:26px;line-height:1}
.cs-body>.cs-in+.cs-pl{margin-top:14px}
.cs-in span svg{width:24px;height:24px;color:#F5B400;display:block}.plb.plus b{font-size:30px}

/* ---------- Grand Slam Quiz ---------- */
.legend i.t-quiz{background:#7C3AED}
.qz-prize{display:flex;flex-direction:column;gap:8px;margin:14px 0 16px}
.qz-prize span{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:#F5F0FF;font-size:15px;font-weight:700;color:var(--ink2)}
.qz-prize svg{width:22px;height:22px;flex:none;color:#F5B400}.qz-prize span:last-child svg{color:#7C3AED}
.qz-prize b{font-weight:900;color:#1B2236;margin-right:-4px}
.qz-pts{display:flex;align-items:center;gap:4px;flex:none;margin-left:10px;padding:6px 11px;border-radius:99px;background:#FFF3C4;color:#B07800;font-size:16px;font-weight:900}
.qz-pts svg{width:17px;height:17px;color:#F5B400}
.qz-plus{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:5px 11px;border-radius:99px;background:#fff;color:#B07800;font-style:normal;font-size:14.5px;font-weight:900}
.qz-plus svg{width:15px;height:15px;color:#F5B400}
.qz-marks{display:flex;justify-content:center;gap:8px;margin:12px 0 4px}
.qz-marks i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff}.qz-marks i svg{width:18px;height:18px}
.qz-marks i.ok{background:#58CC02;box-shadow:0 3px 0 #46A302}.qz-marks i.no{background:#FF4B4B;box-shadow:0 3px 0 #EA2B2B}
.qz-prize b{white-space:nowrap}

/* switch player from the top bar, and the "All lessons" list */
.bar .me-b{display:flex;align-items:center;gap:8px;margin-right:auto;padding:0;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.bar .me-b .me-n{margin-right:0}
.bar .me-sw{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(27,34,54,.08);transform:rotate(90deg)}.bar .me-sw svg{width:12px;height:12px}
.app[data-tab=home][data-sky=night] .bar .me-sw{background:rgba(255,255,255,.22);color:#fff}
.who-l{display:flex;flex-direction:column;gap:10px;margin:16px 0 14px}
.who-l button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#F4F7FB;text-align:left}
.who-l button.on{background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:inset 0 0 0 2px var(--c)}
.who-l .avs{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--c);color:#fff;font-size:21px;font-weight:900}
.who-l button>span:nth-child(2){flex:1}.who-l b{display:block;font-size:18px;font-weight:900}.who-l small{display:block;font-size:13.5px;font-weight:700;color:#64748B}
.who-l button>svg{width:20px;height:20px;color:var(--c);flex:none}
.pls .tlist{max-height:none}
.all-les{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:10px 16px 0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 3px 0 rgba(27,34,54,.08);text-align:left}
.all-les>svg:first-child{width:34px;height:34px;padding:7px;border-radius:12px;background:#7C3AED;color:#fff;flex:none}
.all-les span{flex:1}.all-les b{display:block;font-size:16px;font-weight:900}.all-les small{display:block;font-size:12.5px;font-weight:700;color:#64748B}
.all-les>svg:last-child{width:18px;height:18px;color:#94A3B8;flex:none}

/* looking at another Grand Slam's road */
button.ss-s{padding:2px 0;border:0;background:none;font:inherit;cursor:pointer}
.ss-s.viewed{opacity:1;border-radius:12px;background:#E9E3FF;box-shadow:0 0 0 2px #8B5CF6}
button.next-w{display:block;width:calc(100% - 48px);font:inherit;cursor:pointer}
.next-w .nw-peek{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 11px;border-radius:99px;background:#EEF2FF;color:#4F46E5;font-size:13px;font-weight:900}
.next-w .nw-peek svg{width:15px;height:15px;margin:0}
.viewing{display:flex;align-items:center;gap:10px;margin:10px 16px 0;padding:10px 10px 10px 14px;border-radius:18px;background:#4F46E5;color:#fff;box-shadow:0 4px 0 #3730A3}
.viewing>span{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.viewing>span>svg{width:24px;height:24px;flex:none}
.viewing b{display:block;font-size:15.5px;font-weight:900}.viewing small{display:block;font-size:12.5px;font-weight:700;opacity:.85}
.viewing .b3{--c:#fff;--d:#C7D2FE;color:#3730A3;flex:none;width:auto;padding:0 14px;font-size:14px}

/* ---------- the Path, clean: a coloured "Road to …" banner, big 3D coin steps on a plain background, Coach Carlos beside it ---------- */
.app[data-tab=path] .scroll{background:#fff}
.app[data-tab=path] .bar{background:#fff}
.road{position:relative;z-index:4;display:flex;align-items:center;gap:12px;margin:14px 16px 0;padding:18px 18px 18px 22px;border-radius:24px;background:var(--rc);box-shadow:0 6px 0 var(--rd);color:#fff}
.rd-t{flex:1;min-width:0}
.rd-t b{display:block;font-size:20px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.rd-t span{display:block;margin-top:5px;font-size:16px;font-weight:800;opacity:.9}
.rd-t small{display:block;margin-top:3px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.rd-s{display:grid;grid-template-columns:repeat(2,34px);gap:4px}
.rd-s button{position:relative;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:11px;background:rgba(255,255,255,.16);opacity:.6;cursor:pointer;padding:0}
.rd-s button svg{width:24px;height:24px}
.rd-s button.won,.rd-s button.cur{opacity:1}.rd-s button.cur{background:rgba(255,255,255,.34)}
.rd-s button.viewed{opacity:1;box-shadow:0 0 0 2px #fff}
.rd-s i{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:#58CC02;color:#fff;display:grid;place-items:center}.rd-s i svg{width:9px;height:9px}
.app[data-tab=path] .all-les{margin-top:12px;background:#F6F7FB;box-shadow:none}
/* coins */
.app[data-tab=path] .trail,.app[data-tab=path] .dball{display:none}
.app[data-tab=path] .nrow{height:124px}
.app[data-tab=path] .node{width:108px;height:94px;border-radius:50%}
.app[data-tab=path] .node .face{border-radius:50%;inset:0 0 10px;background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.26) 30%,rgba(255,255,255,.26) 46%,transparent 46%),var(--c);box-shadow:0 11px 0 var(--d),inset 0 -5px 0 rgba(0,0,0,.05)}
.app[data-tab=path] .node:active .face{transform:translateY(7px);box-shadow:0 4px 0 var(--d)}
.app[data-tab=path] .node svg,.app[data-tab=path] .node .qmark{position:relative;top:-5px;width:44px;height:44px;color:#fff;filter:none}
.app[data-tab=path] .node .qmark{display:grid;place-items:center;font-size:46px;font-weight:900;line-height:1;width:auto;height:auto}
.app[data-tab=path] .node.done{--c:#FBC94A;--d:#E0A02A}
.app[data-tab=path] .node.done svg,.app[data-tab=path] .node.done .qmark{color:#C9701E}
.app[data-tab=path] .node.lock{--c:#E7E9EE;--d:#CDD2DB}
.app[data-tab=path] .node.lock svg,.app[data-tab=path] .node.lock .qmark{color:#B2B9C6}
.app[data-tab=path] .node.big{width:118px;height:102px}.app[data-tab=path] .node.big svg{width:52px;height:52px}
.app[data-tab=path] .node::before{border-radius:50%}
.app[data-tab=path] .node .nlab{display:none}
.app[data-tab=path] .node .go{bottom:calc(100% + 8px)}
.app[data-tab=path] .node .tkb{top:-4px;right:-2px}
/* Coach Carlos beside the road */
.path-carlos{position:absolute;right:0;top:-34px;width:170px;height:250px;pointer-events:none;z-index:0}
.path-carlos .pc-rig,.path-carlos svg{width:100%;height:100%;display:block}
.app[data-tab=path] .legend{display:none}   /* the coins speak for themselves */

/* Joshua's 3D stadium as the Grand Slam step, and characters resting beside the road, each with a soft shadow */
.s3row{height:auto!important;padding:10px 0 4px}
.slam3d{position:relative;display:block;width:300px;border:0;background:none;padding:0;cursor:pointer;transition:transform .12s}
.slam3d img{position:relative;display:block;width:100%;height:auto;z-index:1;filter:drop-shadow(0 6px 0 rgba(27,34,54,.06))}
.slam3d:active{transform:translateY(4px) scale(.98)}
.slam3d .s3-sh{position:absolute;left:4%;right:4%;bottom:52px;height:70px;border-radius:50%;background:rgba(27,34,54,.1);z-index:0}
.slam3d .s3-lab{position:relative;z-index:2;display:inline-flex;flex-direction:column;align-items:center;margin-top:-6px;padding:7px 18px 8px;border-radius:16px;background:var(--sc);box-shadow:0 4px 0 var(--sd);color:#fff;line-height:1.1}
.slam3d .s3-lab small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.85}.slam3d .s3-lab b{font-size:19px;font-weight:900}
/* Grand Final (2 Nov): its own stop just past the US Open stadium. The Champions Cup on a gold glow; grey + a lock until the US Open is won */
.app[data-tab=path] .path .nrow.gfrow,.path .nrow.gfrow{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:auto!important;margin-top:22px}
.chap-all .gfrow{padding-bottom:40px}   /* test mode has no legend under the last map: room so the Grand Final scrolls clear of the Up next card */
.gfrow::before{content:'';flex:none;height:30px;border-left:6px dotted rgba(255,255,255,.55);margin-bottom:40px}
.app[data-sky=day] .gfrow::before{border-left-color:#C8CEDB}
.gfnode{position:relative;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;cursor:pointer;transition:transform .12s}.gfnode:active{transform:scale(.96)}
.gfnode .gf-glow{position:absolute;top:-34px;left:50%;width:220px;height:220px;margin-left:-110px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,90,.6),rgba(255,214,90,0) 66%);pointer-events:none}
.gfnode .gf-cup{position:relative;z-index:1;width:132px;filter:drop-shadow(0 10px 12px rgba(20,12,54,.35))}.gfnode .gf-cup svg{display:block;width:100%;height:auto}
.gfnode.cur .gf-cup,.gfnode.open .gf-cup{animation:gfBob 2.4s ease-in-out infinite}
@keyframes gfBob{50%{transform:translateY(-6px) rotate(3deg)}}
.gfnode .gf-lab{position:relative;z-index:2;display:inline-flex;flex-direction:column;align-items:center;margin-top:-4px;padding:7px 18px 8px;border-radius:16px;background:#6D3DF0;box-shadow:0 4px 0 #43209E;color:#fff;line-height:1.1}
.gfnode .gf-lab small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.85}.gfnode .gf-lab b{font-size:19px;font-weight:900}
.gfnode.lock .gf-glow{opacity:.25}.gfnode.lock .gf-lab{background:#4A4680;box-shadow:0 4px 0 #36326A}
.app[data-sky=day] .gfnode.lock .gf-lab{background:#C8CEDB;box-shadow:0 4px 0 #A9B1C3}
.gfnode .gf-lock{position:absolute;z-index:3;top:46px;left:50%;margin-left:-19px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#6B7280;box-shadow:0 3px 0 rgba(0,0,0,.15)}.gfnode .gf-lock svg{width:20px;height:20px}
.gfnode .gf-go{position:absolute;z-index:3;top:-30px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:12px;background:#fff;color:#6D3DF0;font-size:15px;font-weight:900;letter-spacing:.04em;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.slam3d.lock img{filter:grayscale(.85) brightness(1.06);opacity:.75}
.slam3d.lock .s3-lab{background:#C8CEDB;box-shadow:0 4px 0 #A9B1C3}
.slam3d .s3-lock{position:absolute;z-index:2;left:50%;top:38%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 0 #CDD2DB}.slam3d .s3-lock svg{width:28px;height:28px;color:#A9B1C3}
.slam3d.cur img{animation:s3bob 2.2s ease-in-out infinite}
.slam3d .go{z-index:3;top:-6px;bottom:auto;color:var(--sc)}
@keyframes s3bob{50%{transform:translateY(-6px)}}
.ch-sh{position:absolute;left:50%;bottom:4px;width:62%;height:22px;transform:translateX(-50%);border-radius:50%;background:rgba(27,34,54,.12)}
.path-carlos #pathCarlos{position:absolute;inset:0}
.path-carlos .ch-sh{bottom:-6px;width:50%;height:20px}
.path-animal{position:absolute;right:2px;top:18px;width:180px;height:144px;pointer-events:none;z-index:0}
.path-animal img{position:relative;display:block;width:100%;height:auto}
.path-animal .ch-sh{bottom:2px;width:84%;height:30px;left:52%}

/* ticket challenges before the Grand Slam */
.app[data-tab=path] .node.t-ticket.lock{--c:#EDE7FB;--d:#D3C8F0}
.app[data-tab=path] .node.t-ticket.lock svg{color:#A99BD6}
.app[data-tab=path] .node.t-ticket svg{transform:rotate(-14deg)}
.app[data-tab=path] .node.t-ticket.cur{--c:#8B5CF6;--d:#6D28D9}
.app[data-tab=path] .node.t-ticket.cur::before{border-color:#8B5CF6}
.app[data-tab=path] .node.t-ticket.cur .go{color:#7C3AED}
.slam3d .s3-tix{display:flex;justify-content:center;gap:4px;margin-top:4px;font-style:normal}
.slam3d .s3-tix i{display:grid;place-items:center;width:26px;height:20px;border-radius:6px;background:rgba(255,255,255,.22)}
.slam3d .s3-tix i svg{width:16px;height:16px;color:rgba(255,255,255,.55)}
.slam3d .s3-tix i.on{background:#FFD23F}.slam3d .s3-tix i.on svg{color:#7A4A00}
.tix-note{display:flex;gap:10px;align-items:center;margin:12px 0 4px;padding:11px 14px;border-radius:16px;background:#F3EEFF;color:#4C1D95;font-size:15px;font-weight:700;line-height:1.35}
.tix-note svg{width:24px;height:24px;flex:none;color:#7C3AED;transform:rotate(-14deg)}
.tix-won{display:flex;gap:12px;align-items:center;margin:14px auto 0;max-width:340px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#FFE27A,#FFC531);box-shadow:0 5px 0 #E09A00;color:#5B3A00;text-align:left;font-size:14.5px;font-weight:700;line-height:1.35}
.tix-won svg{width:34px;height:34px;flex:none;transform:rotate(-14deg)}
.tix-won b{display:block;font-size:18px;font-weight:900}
.tix-won.miss{background:#F3EEFF;box-shadow:0 5px 0 #D3C8F0;color:#4C1D95}

/* tab bar: chunky colourful icons, no labels; the open tab sits in a soft blue rounded square */
.tabs{padding:8px 10px calc(8px + env(safe-area-inset-bottom));justify-content:space-around}
.tabs button{width:62px;height:58px;padding:0;gap:0;border-radius:18px;background:none;justify-content:center}
.tabs button .ti{display:grid;place-items:center;width:56px;height:52px;border-radius:16px;border:2.5px solid transparent;transition:background-color .2s,border-color .2s}
.tabs button .ti svg{width:42px;height:42px;color:initial}
.tabs button.on{background:none}
.tabs button.on .ti{background:#DDF4FF;border-color:#84D8FF}
.bar{gap:6px}.bar .pill{flex:none}
.tabs button .ti img{width:40px;height:40px;display:block}

/* ---------- the tip screen: Carlos says it, a court shows it, numbered steps light up ---------- */
.flow.teachf .fq.tq{margin-top:20px}
.tbody{display:flex;flex-direction:column;gap:12px}
.tc-say{display:flex;align-items:flex-end;gap:10px}
.tc-c{position:relative;flex:none;width:78px;height:78px;border-radius:22px;overflow:hidden;background:#5CC6F5;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(27,34,54,.12)}
.tc-cv,.tc-cv>div,.tc-cv svg{position:absolute;inset:0;width:100%;height:100%}
.tc-bub{position:relative;flex:1;padding:12px 15px 13px;border-radius:20px 20px 20px 6px;background:#fff;box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line)}
.tc-bub small{display:block;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--tc)}
.tc-bub b{display:block;margin-top:2px;font-size:21px;font-weight:900;line-height:1.2;color:var(--ink)}
.tdemo{display:flex;justify-content:center;padding:8px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.tdemo .dsvg{display:block;height:228px;width:auto}
.tsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.tsteps li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);transition:background-color .25s,box-shadow .25s,transform .25s}
.tsteps li i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#EEF1F6;color:#94A3B8;font-style:normal;font-size:16px;font-weight:900;transition:background-color .25s,color .25s}
.tsteps li b{display:block;font-size:17px;font-weight:900;line-height:1.2}
.tsteps li small{display:block;font-size:13.5px;font-weight:700;color:var(--ink2);margin-top:1px}
.tsteps li.on{background:color-mix(in srgb,var(--tc) 12%,#fff);box-shadow:inset 0 0 0 2.5px var(--tc);transform:scale(1.02)}
.tsteps li.on i{background:var(--tc);color:#fff}
.twhy{display:flex;gap:9px;align-items:flex-start;margin:2px 2px 0;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink2)}
.twhy svg{width:20px;height:20px;flex:none;color:#F5B400;margin-top:1px}.twhy b{color:var(--ink)}
.flow.teachf .fq.tq{margin-top:12px}
.tbody{gap:9px}
.tc-c{width:64px;height:64px;border-radius:19px}
.tc-bub{padding:10px 13px 11px}.tc-bub b{font-size:19px}
.tdemo{padding:6px}.tdemo .dsvg{height:168px}
.tsteps{gap:6px}.tsteps li{padding:7px 11px;gap:10px}.tsteps li i{width:28px;height:28px;font-size:14.5px}.tsteps li b{font-size:16px}.tsteps li small{font-size:13px}
.twhy{font-size:14.5px}
.tdemo .dsvg{height:196px}

/* lesson intro: Carlos waving, the title, one line, tip → questions → stars popping in one by one */
.lintro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:10px}
.li-c{position:relative;width:200px;height:200px;border-radius:44px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#8ADCFF,#4DB6F8);box-shadow:0 0 0 5px #fff,0 12px 28px rgba(27,34,54,.16);animation:liPop .55s cubic-bezier(.2,1.5,.4,1) both}
.li-cv,.li-cv>div,.li-cv svg{position:absolute;inset:0;width:100%;height:100%}
.li-k{margin-top:22px;font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;animation:liUp .45s .15s both}
.li-t{margin-top:4px;font-size:32px;font-weight:900;line-height:1.1;animation:liUp .45s .2s both}
.li-p{margin:12px 8px 0;font-size:19px;font-weight:700;line-height:1.4;color:var(--ink2);animation:liUp .45s .3s both}
.li-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:22px}
.li-row span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;font-weight:900;color:var(--ink2);animation:liPop .45s var(--d) cubic-bezier(.2,1.6,.4,1) both}
.li-row i{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;font-style:normal;font-size:30px;font-weight:900;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.14)}
.li-row i svg{width:30px;height:30px}
.li-row .li-tip{background:#F5B400}.li-row .li-q{background:#7C3AED}.li-row .li-s{background:#FFC531}
.li-row em{color:#C5CCDA;animation:liUp .3s var(--d) both}.li-row em svg{width:20px;height:20px}
@keyframes liPop{from{opacity:0;transform:scale(.4)}}
@keyframes liUp{from{opacity:0;transform:translateY(12px)}}
/* the tip: one big card, three small steps */
.tbody{gap:14px;padding-top:10px}
.tcard{display:flex;flex-direction:column;align-items:center;padding:14px 14px 20px;border-radius:28px;background:#fff;box-shadow:inset 0 0 0 2px var(--line),0 6px 0 var(--line);animation:liPop .45s cubic-bezier(.2,1.4,.4,1) both}
.tcard .tdemo{padding:0;box-shadow:none;background:none}.tcard .tdemo .dsvg{height:300px}
.tpic{display:grid;place-items:center;height:220px}.tpic .tic{width:120px;height:120px;border-radius:34px}.tpic .tic svg{width:64px;height:64px}
.tsay{display:block;margin-top:14px;padding:0 6px;text-align:center;font-size:24px;font-weight:900;line-height:1.2;color:var(--ink)}
.tbody .tsteps{flex-direction:row;gap:8px}
.tbody .tsteps li{flex:1;flex-direction:column;justify-content:flex-start;gap:6px;padding:10px 6px;text-align:center;transform:none}
.tbody .tsteps li.on{transform:translateY(-3px)}
.tbody .tsteps li b{font-size:13.5px;line-height:1.2}
/* the tip as a little story: ✗ the problem, then ✓ the fix */
.tsay{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:12px;min-height:92px;text-align:center}
.tsay i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:17px;font-weight:900;color:#fff;background:#94A3B8}
.tsay.bad i{background:#FF4B4B}.tsay.good i{background:#58CC02}
.tsay b{display:block;margin-top:4px;font-size:22px;font-weight:900;line-height:1.2;color:var(--ink)}
.tsay small{display:block;margin-top:3px;font-size:16px;font-weight:700;line-height:1.35;color:var(--ink2)}
.tcard{transition:box-shadow .3s}
.tcard[data-tone=bad]{box-shadow:inset 0 0 0 3px #FFB3B3,0 6px 0 #FFD1D1}
.tcard[data-tone=good]{box-shadow:inset 0 0 0 3px #A8E36B,0 6px 0 #D7F5B8}
.tcard .tdemo .dsvg{height:268px}
.tbody .tsteps li.dim{opacity:.45}
.li-p2{margin-top:8px;font-size:15.5px;font-weight:800;color:#94A3B8;animation:liUp .45s .4s both}
/* "Your turn!" */
.tcard.prac svg{touch-action:none;cursor:pointer}
.prac-r{display:flex;justify-content:center;min-height:52px;align-items:center}
.prac-r .b3{width:auto;padding:0 22px}
.pr-hint{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;background:#FFF6D8;color:#8A6100;font-size:13.5px;font-weight:800}
.pr-hint svg{width:16px;height:16px}
.tcard[data-tone=""]{box-shadow:inset 0 0 0 3px #FFE38A,0 6px 0 #FFF0B8}
.ffoot .b3:disabled{opacity:.55}
.tcard.prac .tdemo .dsvg{height:318px}
.tcard.prac .tsay{min-height:76px}
.prac-r .go-b{--c:#FF9F1C;--d:#D97706;width:auto;padding:0 34px;font-size:20px}
.prac-r .go-b svg{width:22px;height:22px}
/* Home: one big focus card + one small card */
.hw1 .wkf{margin-top:20px;padding:20px 20px 18px}
.wkf .fo-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wkf .fo-k{display:inline-flex;align-items:center;gap:6px}.wkf .fo-k svg{width:16px;height:16px}
.wk-ch{font:inherit;font-size:13.5px;font-weight:900;color:#fff;background:rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;position:relative;z-index:2}
.wkf .fo-cue{display:block;font-size:30px;line-height:1.1;margin-top:12px}
.wk-from{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:800;opacity:.92}
.wk-from .cof{width:26px;height:26px}
.wkf .fo-acts .b3{margin-top:16px;min-height:56px;font-size:18px}
.hw1 .nchal{margin-top:18px}
.hm-mic{display:grid;place-items:center;background:#3B82F6}.hm-mic svg{width:34px;height:34px;color:#fff}
/* My Tennis: a small menu, one thing at a time */
.mt-tabs{display:flex;gap:4px;margin:14px 0 16px;padding:4px;border-radius:16px;background:#E8ECF4}
.mt-tabs button{flex:1;min-width:0;font:inherit;font-size:13.5px;font-weight:900;color:#64748B;padding:9px 2px;border-radius:12px}
.mt-tabs button.on{background:#fff;color:var(--ink,#1B2236);box-shadow:0 2px 0 rgba(27,34,54,.08)}
.mt .wkf{margin-top:0}
.mt-why{margin-top:12px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 3px 0 rgba(27,34,54,.06)}
.mt-why b{display:block;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#64748B}
.mt-why p{font-size:16.5px;font-weight:700;line-height:1.35;margin-top:4px}
.mt .mt-s{margin-top:14px;text-align:center}
.mt-add{width:100%;margin:10px 0 14px}
.mt>.sec:first-of-type{margin-top:0}
/* Home greeting (Carlos is off Home for now) */
.hm-hi{font-size:27px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25);margin:6px 2px 0}
.scroll.plain .hm-hi{color:#fff}
/* focus card: picture, WHEN, the one thing */
.wk-pic{margin-top:12px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.wk-pic .fp{display:block;width:100%;height:auto}
.fp-ic{display:grid;place-items:center;height:96px;background:rgba(255,255,255,.16)}.fp-ic svg{width:52px;height:52px;color:#fff}
.wk-when{font-size:16px;font-weight:800;margin-top:14px;opacity:.95}
.wkf .wk-when+.fo-cue{margin-top:2px}
.wkf .fo-cue{font-size:28px}
/* top bar: number + a word underneath, tap to explain */
.bar .pill.stat{font:inherit;background:none;border:0;height:42px;padding:0 6px;gap:5px;cursor:pointer}
.pill.stat>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.pill.stat b{font-size:16px;font-weight:900}
.pill.stat small{font-size:10.5px;font-weight:800;letter-spacing:.02em;opacity:.8;margin-top:2px;color:#64748B}
.bar .pill.wd.stat{background:var(--w3);padding:0 11px;border-radius:21px;color:var(--w2)}
.bar .pill.wd.stat b{font-size:13.5px}
/* the Path: tennis-ball steps (Joshua's ref), dashed grey line between them */
.app[data-tab=path] .trail{display:block}
.app[data-tab=path] .trail path,.app[data-tab=path] .trail path.on{stroke:#C9CFD9;stroke-width:4;stroke-dasharray:9 9!important;stroke-dashoffset:0!important;opacity:1;animation:none}
.app[data-tab=path] .node,.app[data-tab=path] .node.big{width:100px;height:100px;border-radius:50%;background:none;box-shadow:none}
.app[data-tab=path] .node .face,.app[data-tab=path] .node .qmark,.app[data-tab=path] .node .tkb,.app[data-tab=path] .node>svg:not(.tball){display:none}
.app[data-tab=path] .node svg.tball{position:absolute;inset:0;top:0;width:100%;height:100%;color:initial;filter:drop-shadow(0 6px 0 rgba(27,34,54,.08))}
.app[data-tab=path] .node.lock svg.tball{filter:none}
.app[data-tab=path] .node:active svg.tball{transform:scale(.94)}
.app[data-tab=path] .node::before{display:none}
.app[data-tab=path] .node .nb{position:absolute;top:-4px;right:-6px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 3px 8px rgba(27,34,54,.14);z-index:2}
.app[data-tab=path] .node .nb svg{position:static;width:22px;height:22px;top:0;filter:none}
.app[data-tab=path] .node .nb-done svg{color:#22A33A!important}
.app[data-tab=path] .node .nb-cur svg{color:#8B3DF0!important;width:20px;height:20px;margin-left:3px}
.app[data-tab=path] .node .nb-lock svg{color:#4B5563!important;width:18px;height:18px}
.app[data-tab=path] .node.cur svg.tball{animation:tbBob 1.8s ease-in-out infinite}
@keyframes tbBob{50%{transform:translateY(-5px)}}
/* Home, simple (Joshua: still messy): Joshua's court painting behind, one card + one row on top */
.hw2{padding:22px 16px 30px}
.hw2 .hm-hi{color:var(--ink,#1B2236);text-shadow:none;font-size:26px;margin:0 0 16px}
.hw2 .wkf{margin-top:0}
.hw2 .wkf .fo-acts .b3{margin-top:18px}
.hm-next{display:flex;align-items:center;gap:14px;width:100%;margin-top:18px;padding:14px 16px;border-radius:22px;background:#fff;box-shadow:0 4px 0 rgba(27,34,54,.07);text-align:left;font:inherit;color:inherit}
.hm-next>span:nth-child(2){flex:1;min-width:0}
.hm-next small{display:block;font-size:13px;font-weight:800;color:#64748B}
.hm-next b{display:block;font-size:18px;font-weight:900;margin-top:2px}
.hm-next>svg{width:20px;height:20px;color:#C5CCDA;flex:none}
.hn-ic{width:48px;height:48px;flex:none;display:grid;place-items:center}.hn-ic svg{width:48px;height:48px}
.hn-ic.mic{border-radius:50%;background:#3B82F6}.hn-ic.mic svg{width:26px;height:26px;color:#fff}
/* smaller balls (Joshua: way too big) */
.app[data-tab=path] .node,.app[data-tab=path] .node.big{width:72px;height:72px}
.app[data-tab=path] .node .nb{width:28px;height:28px;top:-6px;right:-8px}
.app[data-tab=path] .node .nb svg{width:16px;height:16px}
.app[data-tab=path] .node .nb-cur svg{width:14px;height:14px;margin-left:2px}
.app[data-tab=path] .node .nb-lock svg{width:13px;height:13px}
.app[data-tab=path] .node .go{bottom:calc(100% + 6px)}
.app[data-tab=home][data-sky=night] .hw2 .hm-hi{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.app[data-tab=home][data-sky=day] .hw2 .hm-hi{color:#1B2236;text-shadow:0 2px 0 rgba(255,255,255,.6)}
.app[data-tab=home] .hm-next{box-shadow:0 6px 18px rgba(27,34,54,.18)}

/* ---------- PATH · night court: deep navy, green "Road to" card with a progress bar, white dashes, glowing "Next" ball ---------- */
.app[data-tab=path]{--pn:#2A2659;--pn2:#231F4E;background:var(--pn)}
.app[data-tab=path] .scroll{background:var(--pn)}
.app[data-tab=path] .bar{background:var(--pn);box-shadow:none}
.app[data-tab=path] .bar .me-n{color:#fff}
.app[data-tab=path] .bar .me-sw{background:rgba(255,255,255,.14);color:#fff}
.app[data-tab=path] .pill.stat small{color:#A9A6D6}
.app[data-tab=path] .bar .pill.st.stat,.app[data-tab=path] .bar .pill.stat:not(.fl):not(.wd){color:#FACC15}
.app[data-tab=path] .bar .pill.wd.stat{background:rgba(255,255,255,.1);color:#fff}
.app[data-tab=path] .tabs{background:var(--pn2);box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.app[data-tab=path] .tabs button.on .ti{background:#fff;border-color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.app[data-tab=path] .road{display:block;margin:12px 16px 0;padding:18px 18px 16px;border-radius:28px;background:linear-gradient(180deg,#0F7A4C,#0B6541);box-shadow:0 6px 0 #07432B,0 14px 28px -12px rgba(0,0,0,.5)}
.app[data-tab=path] .rd-t b{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:.03em}
.app[data-tab=path] .rd-t b svg.tball{width:30px;height:30px;flex:none}
.app[data-tab=path] .rd-t b svg.tball circle{fill:#fff}
.app[data-tab=path] .rd-t b svg.tball g{stroke:#0B6541;stroke-width:8}
.app[data-tab=path] .rd-t span{margin-top:6px;font-size:17px;color:#D6CCFF;opacity:1}
.rd-bar{position:relative;height:20px;margin-top:12px;border-radius:99px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08)}
.rd-bar i{position:absolute;left:4px;top:4px;bottom:4px;min-width:12px;max-width:calc(100% - 8px);border-radius:99px;background:#A77BFA}
.rd-bar em{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.4)}
.app[data-tab=path] .all-les{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.06);color:#fff}
.app[data-tab=path] .all-les small{color:#A9A6D6}
.app[data-tab=path] .all-les>svg:last-child{color:#A9A6D6}
.app[data-tab=path] .trail path,.app[data-tab=path] .trail path.on{stroke:rgba(255,255,255,.82);stroke-width:4;stroke-linecap:round;stroke-dasharray:8 12!important}
.app[data-tab=path] .node svg.tball,.app[data-tab=path] .node.lock svg.tball{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.app[data-tab=path] .node .nb-cur,.app[data-tab=path] .node .nb-lock{display:none}
.app[data-tab=path] .node.cur::after{content:'';position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.05) 45%,transparent 70%);z-index:-1;pointer-events:none}
.app[data-tab=path] .node .go{left:calc(100% - 4px);bottom:auto;top:-2px;transform:none;padding:7px 14px;border-radius:10px;background:#fff;color:#1D8CE0!important;font-size:16px;letter-spacing:0;box-shadow:0 4px 0 rgba(0,0,0,.18);animation:none}
.app[data-tab=path] .node .go.gl{left:auto;right:calc(100% - 4px)}
.app[data-tab=path] .ch-sh,.app[data-tab=path] .slam3d .s3-sh{background:rgba(255,255,255,.07)}
.app[data-tab=path] .slam3d.lock .s3-lab{background:#4A4680;box-shadow:0 4px 0 #36326A}
.app[data-tab=path] .season{margin:22px 16px 0;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.06);color:#fff}
.app[data-tab=path] .ss-h small,.app[data-tab=path] .ss-s small{color:#A9A6D6}
.app[data-tab=path] .ss-s.cur{background:rgba(250,204,21,.16);box-shadow:0 0 0 2px #FACC15}
.app[data-tab=path] .ss-s.viewed{background:rgba(167,123,250,.2);box-shadow:0 0 0 2px #A77BFA}
.app[data-tab=path] .next-w{background:transparent;border-color:rgba(255,255,255,.18);color:#A9A6D6}
.app[data-tab=path] .next-w b{color:#fff}
.app[data-tab=path] .next-w .nw-peek{background:rgba(255,255,255,.1);color:#D6CCFF}
.app[data-tab=path] .slam3d.lock img{filter:none;opacity:1}   /* the stadium stays in full colour, like a place you're heading to */
.app[data-tab=path] .slam3d .s3-lock{width:46px;height:46px;box-shadow:0 4px 12px rgba(0,0,0,.25)}.app[data-tab=path] .slam3d .s3-lock svg{width:22px;height:22px;color:#4B5563}
.app[data-tab=path] .node .go::after{display:none}

/* ---------- PATH · premium pass: chunky 3D pieces, ring + "Next" + the kid by the current step, pinned banner, night sky ---------- */
.pdefs{position:absolute;width:0;height:0;overflow:hidden}
.app[data-tab=path] .scroll{background:radial-gradient(150% 460px at 50% 0,#3B3690 0,rgba(59,54,144,0) 100%) no-repeat local,var(--pn);box-shadow:inset 0 -26px 26px -22px rgba(0,0,0,.4)}
.app[data-tab=path] .path{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='375' height='760'%3E%3Cg stroke='%23fff' stroke-opacity='.045' stroke-width='3' fill='none'%3E%3Cpath d='M20 0V760M355 0V760M56 0V760M319 0V760M56 380H319M187.5 380V760'/%3E%3C/g%3E%3C/svg%3E") center top/375px 760px repeat-y}
/* pieces: 72 wide, a little taller for the 3D base */
.app[data-tab=path] .node,.app[data-tab=path] .node.big{width:76px;height:82px;border-radius:0;transform:translateX(var(--x))}
.app[data-tab=path] .node svg.tball{inset:0;width:100%;height:100%;filter:none;overflow:visible}
.app[data-tab=path] .node .tb-top{transition:transform .12s cubic-bezier(.3,1.4,.5,1)}
.app[data-tab=path] .node:active svg.tball{transform:none}
.app[data-tab=path] .node:active .tb-top{transform:translateY(7px)}
.app[data-tab=path] .node.lock .tpc{filter:grayscale(1) brightness(1.18) contrast(.75)!important}
.app[data-tab=path] .node.cur svg.tball{animation:tbBob 1.8s ease-in-out infinite}
.app[data-tab=path] .node .nb{top:-4px;right:-6px}
.app[data-tab=path] .node.pk-ticket .nb,.app[data-tab=path] .node.pk-chest .nb{top:2px}
/* the current step: soft light, a ring that fills with the Road, the Next pill, the kid */
.app[data-tab=path] .node.cur::after{inset:-40px -40px -34px;top:-44px}
.nring{position:absolute;left:-12px;top:-14px;width:100px;height:100px;pointer-events:none;z-index:-1}
.app[data-tab=path] .node .nring svg{position:static;width:100%;height:100%;filter:none;overflow:visible}
.nring .nr-t{fill:none;stroke:rgba(255,255,255,.13);stroke-width:7}
.nring .nr-f{fill:none;stroke:#A77BFA;stroke-width:7;stroke-linecap:round}
.app[data-tab=path] .node .go{top:6px;bottom:auto;left:auto;right:auto;transform:none;z-index:3}
.app[data-tab=path] .node .go.go-r{left:calc(100% + 14px)}
.app[data-tab=path] .node .go.go-l{right:calc(100% + 14px)}
.app[data-tab=path] .node .go.go-t{top:-58px;left:50%;transform:translateX(-50%)}
.app[data-tab=path] .node .go.go-t::after{display:block;top:100%;border-width:7px;margin-left:-7px}
.pkid{position:absolute;bottom:-8px;width:104px;height:98px;pointer-events:none;z-index:-1}
.pkid.pk-r{left:calc(100% + 10px)}.pkid.pk-l{right:calc(100% + 10px)}
.app[data-tab=path] .node .pkid svg{position:static;width:100%;height:100%;filter:none;overflow:visible}
.pkid.pk-l svg{transform:scaleX(-1)}
.app[data-tab=path] .node.cur .go.go-r~.pkid,.app[data-tab=path] .node.cur .go.go-l~.pkid{bottom:-8px}
/* banner: Lessons button on the card, a pinned one-liner once it scrolls away */
.app[data-tab=path] .rd-t span{display:flex;align-items:center;gap:10px}
.app[data-tab=path] .rd-t span em{flex:1;font-style:normal}
.rd-ic{width:30px;height:30px;flex:none}
.rd-book{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:14px;font-weight:900;cursor:pointer;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.rd-book svg{width:18px;height:18px}
.rd-pin{position:sticky;top:0;height:0;z-index:30}
.rd-mini{position:absolute;left:12px;right:12px;top:8px;display:flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 12px;border-radius:18px;background:linear-gradient(180deg,#0F7A4C,#0B6541);box-shadow:0 4px 0 #07432B,0 12px 24px -8px rgba(0,0,0,.55);color:#fff;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.scroll.pinned .rd-mini{opacity:1;transform:none;pointer-events:auto}
.rd-mini .rd-ic{width:26px;height:26px}
.rd-mini b{flex:1;min-width:0;font-size:16px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-mini span{font-size:13.5px;font-weight:900;color:#D6CCFF;white-space:nowrap}
.rd-mini .rd-book{width:38px;padding:0;justify-content:center}
.app[data-tab=path] .road{position:relative;z-index:5}
/* night sky: light pools under the characters + stadium, twinkles */
.app[data-tab=path] .path-carlos::before,.app[data-tab=path] .path-animal::before{content:'';position:absolute;left:50%;bottom:-30px;width:230px;height:150px;margin-left:-115px;border-radius:50%;background:radial-gradient(closest-side,rgba(167,123,250,.22),rgba(167,123,250,0));z-index:-1}
.app[data-tab=path] .s3row{position:relative}
.app[data-tab=path] .s3row::before{content:'';position:absolute;left:50%;top:40%;width:420px;height:300px;margin:-150px 0 0 -210px;border-radius:50%;background:radial-gradient(closest-side,rgba(110,231,183,.16),rgba(110,231,183,0));pointer-events:none}
.pstar{position:absolute;width:12px;height:12px;margin-left:-6px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.5;animation:twk 3.2s ease-in-out var(--d) infinite;pointer-events:none}
.pstar.sm{width:7px;height:7px;margin-left:-3.5px;opacity:.35}
@keyframes twk{50%{opacity:.08;transform:scale(.6)}}
/* little moments: the step you just finished pops with sparkles, the next ball rolls down the road into place */
.app[data-tab=path] .node.just svg.tball{animation:pPop .7s cubic-bezier(.3,1.6,.5,1) .15s both}
@keyframes pPop{0%{transform:scale(.6);filter:grayscale(1)}60%{transform:scale(1.18)}100%{transform:none}}
.node .spk{position:absolute;left:50%;top:42%;width:10px;height:10px;margin:-5px;background:#FFE68A;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:spk .8s ease-out .35s both;pointer-events:none}
.node .spk:nth-of-type(1){--a:0deg}.node .spk:nth-of-type(2){--a:45deg}.node .spk:nth-of-type(3){--a:90deg}.node .spk:nth-of-type(4){--a:135deg}.node .spk:nth-of-type(5){--a:180deg}.node .spk:nth-of-type(6){--a:225deg}.node .spk:nth-of-type(7){--a:270deg}.node .spk:nth-of-type(8){--a:315deg}
@keyframes spk{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(-62px) scale(1.2)}}
.app[data-tab=path] .node.arrive svg.tball{animation:pRoll 1s cubic-bezier(.3,1.25,.5,1) .5s both,tbBob 1.8s ease-in-out 1.6s infinite}
@keyframes pRoll{0%{transform:translate(var(--dx),-118px) rotate(-340deg);opacity:0}15%{opacity:1}100%{transform:none}}
.app[data-tab=path] .node.arrive .nring,.app[data-tab=path] .node.arrive .go,.app[data-tab=path] .node.arrive .pkid{animation:pIn .4s ease-out 1.3s both}
@keyframes pIn{from{opacity:0;transform:translateY(8px)}}
.app[data-tab=path] .node.arrive .go.go-t{animation:none}
.rd-pin::before{content:'';position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(var(--pn) 55%,rgba(42,38,89,0));opacity:0;transition:opacity .2s;pointer-events:none}
.scroll.pinned .rd-pin::before{opacity:1}
.rd-mini b{font-size:14.5px;letter-spacing:.01em}
.pkid.pk-r{left:calc(100% - 2px)}.pkid.pk-l{right:calc(100% - 2px)}

/* ---------- PATH · test mode strip: one small line, opens to the ball + Grand Slam switches ---------- */
.app[data-tab=path] .testbar{margin:10px 16px 0;padding:0;border-radius:16px;background:rgba(253,211,77,.12);box-shadow:inset 0 0 0 1.5px rgba(253,211,77,.45)}
.testbar .tb-h{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:100%;padding:9px 12px;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.app[data-tab=path] .testbar .tb-h b{color:#FCD34D;font-size:14px;white-space:nowrap}
.app[data-tab=path] .testbar .tb-h span{order:0;flex:1;flex-basis:auto;min-width:0;font-size:12.5px;color:#D6CCFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testbar .tb-h>svg{width:14px;height:14px;color:#FCD34D;transform:rotate(90deg);transition:transform .2s;flex:none}
.testbar.open .tb-h>svg{transform:rotate(-90deg)}
.testbar.open{padding-bottom:12px}.testbar .tb-w{margin:2px 12px 0}.testbar .tb-w+.tb-w{margin-top:6px}
.testbar>.lk{display:block;margin:10px 12px 0}

/* ---------- order questions: drag answers into the numbered slots ---------- */
.ord-p button,.ord-a button{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ord-p button{display:inline-flex;align-items:center;gap:9px}
.grip{display:block;width:10px;height:16px;flex:none;opacity:.32;background:radial-gradient(circle,currentColor 1.5px,transparent 1.8px) 0 0/5px 5.4px}
.ord-a button .grip{margin-left:auto}
.ord-p button.lifted,.ord-a button.lifted{opacity:.3}
.ord-a [data-slot].hover{border-color:var(--w1);background:var(--w3);box-shadow:0 0 0 3px var(--w1) inset}
.ord-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;display:flex;align-items:center;gap:9px;margin:0;padding:13px 16px;border-radius:16px;background:#fff;color:var(--ink);font:inherit;font-size:17px;font-weight:800;box-shadow:0 0 0 2.5px var(--w1) inset,0 16px 30px -6px rgba(27,34,54,.35)}
.ord-ghost b{display:none}.ord-ghost .grip{margin:0}

/* ---------- PATH · daytime: light grey sky, the same pieces (navy at night) ---------- */
.app[data-tab=path][data-sky=day]{--pn:#EEF0F6;--pn2:#fff}
.app[data-tab=path][data-sky=day] .scroll{background:radial-gradient(150% 460px at 50% 0,#fff 0,rgba(255,255,255,0) 100%) no-repeat local,var(--pn);box-shadow:none}
.app[data-tab=path][data-sky=day] .path{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='375' height='760'%3E%3Cg stroke='%231B2236' stroke-opacity='.05' stroke-width='3' fill='none'%3E%3Cpath d='M20 0V760M355 0V760M56 0V760M319 0V760M56 380H319M187.5 380V760'/%3E%3C/g%3E%3C/svg%3E")}
.app[data-tab=path][data-sky=day] .bar .me-n{color:var(--ink)}
.app[data-tab=path][data-sky=day] .bar .me-sw{background:rgba(27,34,54,.08);color:var(--ink)}
.app[data-tab=path][data-sky=day] .pill.stat small{color:#64748B}
.app[data-tab=path][data-sky=day] .bar .pill.stat:not(.fl):not(.wd){color:#E0A100}
.app[data-tab=path][data-sky=day] .bar .pill.wd.stat{background:var(--w3);color:var(--w2)}
.app[data-tab=path][data-sky=day] .tabs{box-shadow:0 -1px 0 var(--line)}
.app[data-tab=path][data-sky=day] .tabs button.on .ti{background:#DDF4FF;border-color:#84D8FF;box-shadow:none}
.app[data-tab=path][data-sky=day] .trail path,.app[data-tab=path][data-sky=day] .trail path.on{stroke:#C3C9D6}
.app[data-tab=path][data-sky=day] .node.cur::after{background:radial-gradient(circle,rgba(250,204,21,.26),rgba(250,204,21,.08) 45%,transparent 70%)}
.app[data-tab=path][data-sky=day] .nring .nr-t{stroke:rgba(27,34,54,.08)}
.app[data-tab=path][data-sky=day] .node .go{box-shadow:0 0 0 2px #E3E7EF inset,0 4px 0 #DDE2EB}
.app[data-tab=path][data-sky=day] .node .go.go-t::after{border-top-color:#fff}
.app[data-tab=path][data-sky=day] .tball>ellipse,.app[data-tab=path][data-sky=day] .pkid ellipse{fill:rgba(27,34,54,.13)}
.app[data-tab=path][data-sky=day] .pstar{display:none}
.app[data-tab=path][data-sky=day] .ch-sh,.app[data-tab=path][data-sky=day] .slam3d .s3-sh{background:rgba(27,34,54,.08)}
.app[data-tab=path][data-sky=day] .path-carlos::before,.app[data-tab=path][data-sky=day] .path-animal::before{background:radial-gradient(closest-side,rgba(124,58,237,.07),rgba(124,58,237,0))}
.app[data-tab=path][data-sky=day] .s3row::before{background:radial-gradient(closest-side,rgba(34,197,94,.10),rgba(34,197,94,0))}
.app[data-tab=path][data-sky=day] .slam3d.lock .s3-lab{background:#C8CEDB;box-shadow:0 4px 0 #A9B1C3}
.app[data-tab=path][data-sky=day] .season{background:#fff;box-shadow:0 4px 0 rgba(27,34,54,.06),0 0 0 1.5px #E3E7EF inset;color:var(--ink)}
.app[data-tab=path][data-sky=day] .ss-h small,.app[data-tab=path][data-sky=day] .ss-s small{color:#64748B}
.app[data-tab=path][data-sky=day] .ss-s.cur{background:#FFF3C4;box-shadow:0 0 0 2px #FFD66B}
.app[data-tab=path][data-sky=day] .next-w{background:#fff;border-color:#D6DCE7;color:var(--muted)}
.app[data-tab=path][data-sky=day] .next-w b{color:var(--ink)}
.app[data-tab=path][data-sky=day] .next-w .nw-peek{background:#EEF2FF;color:#4F46E5}
.app[data-tab=path][data-sky=day] .rd-pin::before{background:linear-gradient(var(--pn) 55%,rgba(238,240,246,0))}
.app[data-tab=path][data-sky=day] .testbar{background:#FFF7E0;box-shadow:inset 0 0 0 1.5px #FFD66B}
.app[data-tab=path][data-sky=day] .testbar .tb-h b,.app[data-tab=path][data-sky=day] .testbar .tb-h>svg{color:#8A5A00}
.app[data-tab=path][data-sky=day] .testbar .tb-h span{color:#7A6230}
.rd-pin{z-index:6}

/* ---------- test mode: the whole season on one page (Australian Open → US Open), every step tappable ---------- */
.chap-all .viewing,.chap-all .season,.chap-all .next-w,.chap-all .legend,.chap-all:not(:first-child) .testbar{display:none!important}
.chap + .chap{margin-top:34px;padding-top:6px;border-top:1.5px solid rgba(255,255,255,.12)}
.app[data-sky=day] .chap + .chap{border-top-color:#DCE1EA}

/* ---------- test option "Slam colours": the Path takes the colour of its Slam (Day and Night each have their own colours).
   The colours can be changed with the pickers in the test bar (kids.js sets --c-ao/--c-rg/--c-wim/--c-uso on #app) ---------- */
.app{--c-ao:#0062FF;--c-rg:#BC4F10;--c-wim:#01653B;--c-uso:#532895}
.app[data-slamnow=ao]{--slamc:var(--c-ao)}.app[data-slamnow=rg]{--slamc:var(--c-rg)}.app[data-slamnow=wim]{--slamc:var(--c-wim)}.app[data-slamnow=uso]{--slamc:var(--c-uso)}
.app[data-tab=path][data-slamnow]{--pn:var(--slamc);--pn2:color-mix(in srgb,var(--slamc) 84%,#000)}
.app[data-tab=path][data-sky=day][data-slamnow]{--pn2:#fff}
.app[data-tab=path][data-slamnow] .scroll{background:radial-gradient(150% 460px at 50% 0,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 100%) no-repeat local,var(--pn);transition:background-color .4s}
.app[data-tab=path][data-slamnow] .bar,.app[data-tab=path][data-slamnow] .tabs{transition:background .4s}
/* in the whole season each Slam's stretch keeps its own colour */
.app[data-slamnow] .chap[data-slam=ao]{--cc:var(--c-ao)}.app[data-slamnow] .chap[data-slam=rg]{--cc:var(--c-rg)}
.app[data-slamnow] .chap[data-slam=wim]{--cc:var(--c-wim)}.app[data-slamnow] .chap[data-slam=uso]{--cc:var(--c-uso)}
.app[data-slamnow] .chap{background:var(--cc);padding-bottom:20px}
.app[data-slamnow] .chap[data-slam=rg]{--cp:var(--c-ao)}.app[data-slamnow] .chap[data-slam=wim]{--cp:var(--c-rg)}.app[data-slamnow] .chap[data-slam=uso]{--cp:var(--c-wim)}
/* no hard line between Slams: each stretch fades in from the colour of the one before it */
.app[data-slamnow] .chap + .chap{background:linear-gradient(180deg,var(--cp) 0,var(--cc) 260px) no-repeat,var(--cc)}
.app[data-slamnow] .chap + .chap{margin-top:0;padding-top:30px;border-top:0}
/* the colour pickers */
.tb-cols{display:flex;gap:6px;margin-top:10px}
.tb-cols label{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 0 6px;border-radius:12px;background:#fff;font-size:12px;font-weight:900;color:#475569;box-shadow:0 2px 0 rgba(0,0,0,.08);cursor:pointer}
.tb-cols input{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.tb-cols input::-webkit-color-swatch-wrapper{padding:0}.tb-cols input::-webkit-color-swatch{border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.15)}
.tb-cols input::-moz-color-swatch{border:3px solid #fff;border-radius:50%}
.tb-cols button{flex:.9;border-radius:12px;background:#fff;font-size:12px;font-weight:900;color:#475569;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.tb-w button.hot{background:#22C55E;color:#fff;box-shadow:0 2px 0 #15803D}
.tb-note{margin:8px 2px 2px;font-size:12px;font-weight:700;color:#7A6230;line-height:1.4}
.app[data-tab=path] .tb-note{color:#FCD34D;opacity:.85}
.app[data-tab=path][data-sky=day] .tb-note{color:#8A5A00}

/* the pinned Road bar: in the whole season each Slam's bar sticks while you're in that Slam; tap (or hover) to open it into the full banner */
.chap.pinned .rd-mini{opacity:1;transform:none;pointer-events:auto}
.chap.pinned .rd-pin::before{opacity:1}
.rd-mini{height:auto;min-height:52px;flex-wrap:wrap;transition:opacity .2s,transform .2s}
.rd-tap{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:52px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rd-more{display:none;flex-basis:100%;padding:0 4px 14px}
.rd-more em{display:block;font-style:normal;font-size:14px;font-weight:900;color:#D6CCFF;margin-bottom:9px}
.rd-pin.open .rd-more{display:block;animation:rdOpen .22s ease-out}
@media (hover:hover){.rd-mini:hover .rd-more{display:block}}
@keyframes rdOpen{from{opacity:0;transform:translateY(-4px)}}
.scroll.pinned .chap:not(.pinned) .rd-mini{opacity:0;transform:translateY(-12px);pointer-events:none}
.scroll.pinned .chap:not(.pinned) .rd-pin::before{opacity:0}

/* test mode · Slam colours: a little picker on the side for the Slam in view (so you can try colours without scrolling back up) */
.slam-fab{position:absolute;right:10px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 7px;border-radius:20px;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,.12),0 12px 26px -8px rgba(0,0,0,.4)}
.slam-fab small{font-size:11px;font-weight:900;color:#475569;max-width:64px;text-align:center;line-height:1.1}
.slam-fab .sf-sw{display:block;width:44px;height:44px;cursor:pointer}
.slam-fab input{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.slam-fab input::-webkit-color-swatch-wrapper{padding:0}.slam-fab input::-webkit-color-swatch{border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.18)}
.slam-fab input::-moz-color-swatch{border:3px solid #fff;border-radius:50%}
.slam-fab .sf-save{min-width:58px;height:30px;padding:0 8px;border:0;border-radius:11px;background:#EEF0F6;color:#475569;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.slam-fab .sf-save.hot{background:#22C55E;color:#fff;box-shadow:0 2px 0 #15803D}
.app:not([data-tab=path]) .slam-fab{display:none}

/* a young player hitting a backhand, beside the road on the empty left side (Joshua's art, 27 Oct) */
.path-kid{position:absolute;left:2px;top:-30px;width:188px;height:200px;pointer-events:none;z-index:0}
.path-kid img{position:relative;display:block;width:100%;height:auto}
.path-kid .ch-sh{bottom:-4px;width:70%;height:22px;left:52%}

/* Slam colours: a subtle light over each Slam's colour so the 3D balls sit in the same light (lit from the top, a soft glow down the road, edges a touch deeper). Test bar: Gradient on/off */
.app[data-slamnow]:not([data-flat]) .chap{background:radial-gradient(70% 38% at 50% 42%,rgba(255,255,255,.10),rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(255,255,255,.08) 0,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.11) 100%),linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.08)),var(--cc)}
.app[data-slamnow]:not([data-flat]) .chap + .chap{background:radial-gradient(70% 38% at 50% 42%,rgba(255,255,255,.10),rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.11) 100%),linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.08)),linear-gradient(180deg,var(--cp) 0,var(--cc) 260px) no-repeat,var(--cc)}

/* the Australian Open kangaroo, beside the road on the left (Joshua's art, 27 Oct) */
.path-roo{position:absolute;left:6px;top:-10px;width:170px;height:150px;pointer-events:none;z-index:0}
.path-roo img{position:relative;display:block;width:100%;height:auto}
.path-roo .ch-sh{bottom:2px;width:76%;height:22px;left:48%}

/* ---------- Path background pattern (Joshua, 27 Oct: the faint court lines didn't look great → off; try others from the test bar) ---------- */
.app[data-tab=path] .path{background:none}
.app[data-tab=path][data-sky=day] .path{background-image:none}
.app[data-tab=path][data-pat=stripes] .path{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 47px,rgba(255,255,255,0) 47px 94px)}
.app[data-tab=path][data-pat=dots] .path{background-image:radial-gradient(circle,rgba(255,255,255,.12) 1.6px,rgba(255,255,255,0) 2.2px);background-size:26px 26px;background-position:center top}
.app[data-tab=path][data-pat=balls] .path{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200'%3E%3Cg transform='translate(36 40) rotate(20)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='13'/%3E%3Cpath d='M-12.35 -3.9C-5.2 -0.65 -5.2 7.15 -2.6 12.35'/%3E%3Cpath d='M2.6 -12.35C5.2 -7.15 5.2 0.65 12.35 3.9'/%3E%3C/g%3E%3Cg transform='translate(132 96) rotate(-30)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='10'/%3E%3Cpath d='M-9.5 -3.0C-4.0 -0.5 -4.0 5.5 -2.0 9.5'/%3E%3Cpath d='M2.0 -9.5C4.0 -5.5 4.0 0.5 9.5 3.0'/%3E%3C/g%3E%3Cg transform='translate(64 160) rotate(60)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='9'/%3E%3Cpath d='M-8.549999999999999 -2.6999999999999997C-3.6 -0.45 -3.6 4.95 -1.8 8.549999999999999'/%3E%3Cpath d='M1.8 -8.549999999999999C3.6 -4.95 3.6 0.45 8.549999999999999 2.6999999999999997'/%3E%3C/g%3E%3Cg transform='translate(160 178) rotate(10)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='12'/%3E%3Cpath d='M-11.399999999999999 -3.5999999999999996C-4.800000000000001 -0.6000000000000001 -4.800000000000001 6.6000000000000005 -2.4000000000000004 11.399999999999999'/%3E%3Cpath d='M2.4000000000000004 -11.399999999999999C4.800000000000001 -6.6000000000000005 4.800000000000001 0.6000000000000001 11.399999999999999 3.5999999999999996'/%3E%3C/g%3E%3C/svg%3E");background-size:180px 200px}
.app[data-tab=path][data-pat=stars] .path{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='190'%3E%3Cpath transform='translate(30 36) scale(0.9)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(124 70) scale(0.6)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(70 128) scale(0.7)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(150 170) scale(0.5)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(20 170) scale(0.45)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3C/svg%3E");background-size:170px 190px}
.app[data-tab=path][data-pat=diag] .path{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,rgba(255,255,255,0) 2px 26px)}
/* daytime without Slam colours (pale grey): the same patterns in soft ink */
.app[data-tab=path][data-sky=day]:not([data-slamnow])[data-pat=stripes] .path{background-image:repeating-linear-gradient(90deg,rgba(27,34,54,.03) 0 47px,rgba(27,34,54,0) 47px 94px)}
.app[data-tab=path][data-sky=day]:not([data-slamnow])[data-pat=dots] .path{background-image:radial-gradient(circle,rgba(27,34,54,.09) 1.6px,rgba(27,34,54,0) 2.2px)}
.app[data-tab=path][data-sky=day]:not([data-slamnow])[data-pat=balls] .path{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200'%3E%3Cg transform='translate(36 40) rotate(20)' fill='none' stroke='%231B2236' stroke-opacity='0.07' stroke-width='2.2'%3E%3Ccircle r='13'/%3E%3Cpath d='M-12.35 -3.9C-5.2 -0.65 -5.2 7.15 -2.6 12.35'/%3E%3Cpath d='M2.6 -12.35C5.2 -7.15 5.2 0.65 12.35 3.9'/%3E%3C/g%3E%3Cg transform='translate(132 96) rotate(-30)' fill='none' stroke='%231B2236' stroke-opacity='0.07' stroke-width='2.2'%3E%3Ccircle r='10'/%3E%3Cpath d='M-9.5 -3.0C-4.0 -0.5 -4.0 5.5 -2.0 9.5'/%3E%3Cpath d='M2.0 -9.5C4.0 -5.5 4.0 0.5 9.5 3.0'/%3E%3C/g%3E%3Cg transform='translate(64 160) rotate(60)' fill='none' stroke='%231B2236' stroke-opacity='0.07' stroke-width='2.2'%3E%3Ccircle r='9'/%3E%3Cpath d='M-8.549999999999999 -2.6999999999999997C-3.6 -0.45 -3.6 4.95 -1.8 8.549999999999999'/%3E%3Cpath d='M1.8 -8.549999999999999C3.6 -4.95 3.6 0.45 8.549999999999999 2.6999999999999997'/%3E%3C/g%3E%3Cg transform='translate(160 178) rotate(10)' fill='none' stroke='%231B2236' stroke-opacity='0.07' stroke-width='2.2'%3E%3Ccircle r='12'/%3E%3Cpath d='M-11.399999999999999 -3.5999999999999996C-4.800000000000001 -0.6000000000000001 -4.800000000000001 6.6000000000000005 -2.4000000000000004 11.399999999999999'/%3E%3Cpath d='M2.4000000000000004 -11.399999999999999C4.800000000000001 -6.6000000000000005 4.800000000000001 0.6000000000000001 11.399999999999999 3.5999999999999996'/%3E%3C/g%3E%3C/svg%3E")}
.app[data-tab=path][data-sky=day]:not([data-slamnow])[data-pat=stars] .path{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='190'%3E%3Cpath transform='translate(30 36) scale(0.9)' fill='%231B2236' fill-opacity='0.07' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(124 70) scale(0.6)' fill='%231B2236' fill-opacity='0.07' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(70 128) scale(0.7)' fill='%231B2236' fill-opacity='0.07' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(150 170) scale(0.5)' fill='%231B2236' fill-opacity='0.07' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(20 170) scale(0.45)' fill='%231B2236' fill-opacity='0.07' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3C/svg%3E")}
.app[data-tab=path][data-sky=day]:not([data-slamnow])[data-pat=diag] .path{background-image:repeating-linear-gradient(135deg,rgba(27,34,54,.04) 0 2px,rgba(27,34,54,0) 2px 26px)}
.tb-w button[data-act=tpat]{font-size:11.5px;padding:8px 0}
.path-roo{top:4px}
/* Wimbledon's middle bend: the girl in purple sitting with her racket (Joshua's art, 27 Oct) */
.path-girl{top:-4px;width:180px;height:170px}
.path-girl .ch-sh{bottom:6px;width:80%}

/* ---------- characters beside the road: shadows tucked right under their feet, sizes + heights (Joshua, 27 Oct) ----------
   Each box is now as tall as its picture, so the shadow sits on the picture's bottom edge (where the feet are);
   left + width follow where each character actually touches the ground (measured from the art). */
.path-animal,.path-kid,.path-roo{height:auto}
.path-animal .ch-sh,.path-kid .ch-sh,.path-roo .ch-sh{bottom:-9px;height:20px;transform:translateX(-50%)}
.path-roo{width:215px;top:-18px}
.path-roo .ch-sh{left:68%;width:52%}
.path-kid .ch-sh{left:64%;width:66%}
.path-girl .ch-sh{left:47%;width:78%;bottom:-9px}
.path-animal{top:-58px}
.path-animal:has(img[src*="koala"]) .ch-sh{left:44%;width:80%}
.path-animal:has(img[src*="fox"]) .ch-sh{left:55%;width:78%}
.path-animal:has(img[src*="rooster"]) .ch-sh{left:61%;width:68%}
.path-animal:has(img[src*="bear"]) .ch-sh{left:59%;width:56%}
.path-carlos{top:-72px}
.path-carlos .ch-sh{bottom:6px;width:48%;height:18px}

/* ---------- smoother Slam-to-Slam (Joshua, 27 Oct: transitions looked like hard lines) ----------
   1) the pattern covers each whole Slam section (not just the road), so it never stops short;
   2) every section is shaded the same at its top and bottom edge, so where two meet the shade matches;
   3) the colour change is longer and softer (520px). A touch more light than before. */
.chap{position:relative;isolation:isolate}
.chap .path{background-image:none!important}
.chap::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.app[data-tab=path][data-pat=stripes] .chap::before{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 47px,rgba(255,255,255,0) 47px 94px);background-position:center top}
.app[data-tab=path][data-pat=dots] .chap::before{background-image:radial-gradient(circle,rgba(255,255,255,.12) 1.6px,rgba(255,255,255,0) 2.2px);background-size:26px 26px}
.app[data-tab=path][data-pat=diag] .chap::before{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,rgba(255,255,255,0) 2px 26px)}
.app[data-tab=path][data-sky=day]:not([data-slamnow])[data-pat=stripes] .chap::before{background-image:repeating-linear-gradient(90deg,rgba(27,34,54,.03) 0 47px,rgba(27,34,54,0) 47px 94px)}
.app[data-slamnow]:not([data-flat]) .chap{background:
  radial-gradient(75% 36% at 50% 46%,rgba(255,255,255,.15),rgba(255,255,255,0) 72%),
  linear-gradient(180deg,rgba(0,0,0,.14) 0,rgba(0,0,0,0) 22%,rgba(255,255,255,.06) 45%,rgba(0,0,0,0) 70%,rgba(0,0,0,.14) 100%),
  linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.1)),
  var(--cc)}
.app[data-slamnow]:not([data-flat]) .chap + .chap{background:
  radial-gradient(75% 36% at 50% 46%,rgba(255,255,255,.15),rgba(255,255,255,0) 72%),
  linear-gradient(180deg,rgba(0,0,0,.14) 0,rgba(0,0,0,0) 22%,rgba(255,255,255,.06) 45%,rgba(0,0,0,0) 70%,rgba(0,0,0,.14) 100%),
  linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.1)),
  linear-gradient(180deg,var(--cp) 0,var(--cc) 520px) no-repeat,
  var(--cc)}
.app[data-slamnow][data-flat] .chap + .chap{background:linear-gradient(180deg,var(--cp) 0,var(--cc) 520px) no-repeat,var(--cc)}
.app[data-tab=path][data-pat=balls] .chap::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200'%3E%3Cg transform='translate(36 40) rotate(20)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='13'/%3E%3Cpath d='M-12.35 -3.9C-5.2 -0.65 -5.2 7.15 -2.6 12.35'/%3E%3Cpath d='M2.6 -12.35C5.2 -7.15 5.2 0.65 12.35 3.9'/%3E%3C/g%3E%3Cg transform='translate(132 96) rotate(-30)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='10'/%3E%3Cpath d='M-9.5 -3.0C-4.0 -0.5 -4.0 5.5 -2.0 9.5'/%3E%3Cpath d='M2.0 -9.5C4.0 -5.5 4.0 0.5 9.5 3.0'/%3E%3C/g%3E%3Cg transform='translate(64 160) rotate(60)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='9'/%3E%3Cpath d='M-8.549999999999999 -2.6999999999999997C-3.6 -0.45 -3.6 4.95 -1.8 8.549999999999999'/%3E%3Cpath d='M1.8 -8.549999999999999C3.6 -4.95 3.6 0.45 8.549999999999999 2.6999999999999997'/%3E%3C/g%3E%3Cg transform='translate(160 178) rotate(10)' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2.2'%3E%3Ccircle r='12'/%3E%3Cpath d='M-11.399999999999999 -3.5999999999999996C-4.800000000000001 -0.6000000000000001 -4.800000000000001 6.6000000000000005 -2.4000000000000004 11.399999999999999'/%3E%3Cpath d='M2.4000000000000004 -11.399999999999999C4.800000000000001 -6.6000000000000005 4.800000000000001 0.6000000000000001 11.399999999999999 3.5999999999999996'/%3E%3C/g%3E%3C/svg%3E");background-size:180px 200px}
.app[data-tab=path][data-pat=stars] .chap::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='190'%3E%3Cpath transform='translate(30 36) scale(0.9)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(124 70) scale(0.6)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(70 128) scale(0.7)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(150 170) scale(0.5)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3Cpath transform='translate(20 170) scale(0.45)' fill='%23ffffff' fill-opacity='0.1' d='M0-10 2.4-3.1 9.5-3.1 3.8 1.2 5.9 8.1 0 4 -5.9 8.1 -3.8 1.2 -9.5-3.1 -2.4-3.1Z'/%3E%3C/svg%3E");background-size:170px 190px}
.app[data-slamnow] .chap + .chap{margin-top:-1px}   /* no hairline gap between Slams */

/* ---------- character shadows, take 2 (Joshua's example, 27 Oct): a soft contact shadow tucked UNDER the character,
   reaching up behind where they sit, as wide as their lower body, with a soft edge (no flat oval below the feet) ---------- */
.path-animal .ch-sh,.path-kid .ch-sh,.path-roo .ch-sh,.path-carlos .ch-sh{border-radius:50%;background:radial-gradient(closest-side,rgba(8,18,40,.32),rgba(8,18,40,.17) 55%,rgba(8,18,40,0) 100%);transform:translateX(-50%)}
.path-animal .ch-sh,.path-roo .ch-sh,.path-girl .ch-sh{bottom:-4%;height:30%}
.path-roo .ch-sh{left:57%;width:84%}
.path-girl .ch-sh{left:51%;width:100%}
.path-kid:not(.path-girl) .ch-sh{left:65%;width:74%;height:15%;bottom:-4%}
.path-animal:has(img[src*="koala"]) .ch-sh{left:50%;width:102%}
.path-animal:has(img[src*="fox"]) .ch-sh{left:51%;width:98%}
.path-animal:has(img[src*="rooster"]) .ch-sh{left:55%;width:88%}
.path-animal:has(img[src*="bear"]) .ch-sh{left:52%;width:96%}
.path-carlos .ch-sh{bottom:2px;width:58%;height:26px}

/* ---------- Path motion (27 Oct): gentle, premium, never busy. Off with the test bar's Motion button; off for reduced motion ---------- */
@property --dof{syntax:'<length>';inherits:false;initial-value:0px}
/* 1+2+3) characters: pop in once when they scroll into view, then breathe (shadow breathes with them); a touch of parallax depth */
.app[data-motion] .path-roo,.app[data-motion] .path-kid,.app[data-motion] .path-animal{transform:translateY(var(--py,0px));will-change:transform}
.app[data-motion] .seen img{transform-origin:50% 100%;animation:chPop .7s cubic-bezier(.3,1.55,.5,1) both,chBreathe 4.8s ease-in-out .7s infinite alternate}
.app[data-motion] .path-animal.seen img{animation:chPop .7s cubic-bezier(.3,1.55,.5,1) both,chBreathe 6s ease-in-out .7s infinite alternate}
.app[data-motion] .path-kid:not(.path-girl).seen img{animation:chPop .7s cubic-bezier(.3,1.55,.5,1) both,chSway 3.6s ease-in-out .7s infinite alternate}
.app[data-motion] .seen .ch-sh{animation:shIn .5s ease-out both,shBreathe 4.8s ease-in-out .7s infinite alternate}
.app[data-motion] .path-animal.seen .ch-sh{animation:shIn .5s ease-out both,shBreathe 6s ease-in-out .7s infinite alternate}
@keyframes chPop{0%{opacity:0;transform:translateY(14px) scale(.82)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes chBreathe{from{transform:none}to{transform:scale(1.012,1.028)}}
@keyframes chSway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg) translateY(-2px)}}
@keyframes shIn{from{opacity:0}to{opacity:1}}
@keyframes shBreathe{from{transform:translateX(-50%) scaleX(1)}to{transform:translateX(-50%) scaleX(.95)}}
/* 4) the sleeping koala snores: a little Z floats up now and then */
.app[data-motion] .path-animal.seen:has(img[src*="koala"])::after{content:'z';position:absolute;left:46%;top:2%;z-index:2;font:900 20px/1 Nunito,system-ui,sans-serif;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:none;animation:zzz 3.4s ease-out 1s infinite;opacity:0}
@keyframes zzz{0%{opacity:0;transform:translate(0,6px) scale(.6)}25%{opacity:.95}100%{opacity:0;transform:translate(18px,-38px) scale(1.25) rotate(-10deg)}}
/* 5) the road leading to your next step flows towards it */
.app[data-motion][data-tab=path] .trail path.on + path:not(.on){stroke-dashoffset:var(--dof)!important;animation:dashFlow 1.1s linear infinite}
@keyframes dashFlow{to{--dof:-20px}}
/* 6) soft light rays turn slowly behind any Grand Slam stadium you can reach */
.app[data-motion][data-tab=path] .s3row:has(.slam3d:not(.lock))::after{content:'';position:absolute;left:50%;top:44%;width:440px;height:440px;margin:-220px 0 0 -220px;z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.16) 0 9deg,rgba(255,255,255,0) 9deg 24deg);
  -webkit-mask:radial-gradient(closest-side,#000 25%,transparent 100%);mask:radial-gradient(closest-side,#000 25%,transparent 100%);animation:rays 48s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
/* 7) tiny specks of light drift slowly up through each Slam */
.app[data-motion][data-tab=path] .chap::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 18% 22%,rgba(255,255,255,.55) 0 1.6px,rgba(255,255,255,0) 2.6px),radial-gradient(circle at 72% 58%,rgba(255,255,255,.45) 0 1.3px,rgba(255,255,255,0) 2.3px),radial-gradient(circle at 46% 86%,rgba(255,255,255,.5) 0 1.8px,rgba(255,255,255,0) 2.8px),radial-gradient(circle at 88% 12%,rgba(255,255,255,.4) 0 1.2px,rgba(255,255,255,0) 2.2px),radial-gradient(circle at 34% 50%,rgba(255,255,255,.35) 0 1px,rgba(255,255,255,0) 2px);
  background-size:280px 560px;animation:motes 46s linear infinite}
.app[data-tab=path][data-sky=day]:not([data-slamnow]) .chap::after{display:none}
@keyframes motes{to{background-position:0 -560px}}
@media (prefers-reduced-motion:reduce){.app[data-motion] .path-roo:not(.seen) img,.app[data-motion] .path-kid:not(.seen) img,.app[data-motion] .path-animal:not(.seen) img,.app[data-motion] .path-roo:not(.seen) .ch-sh,.app[data-motion] .path-kid:not(.seen) .ch-sh,.app[data-motion] .path-animal:not(.seen) .ch-sh{opacity:1}}

/* each Slam has its own character on the middle bend (27 Oct): AO kangaroo, RG the clay-court kid (lunging, clay on his shoes), WIM the girl in purple, USO the foam-finger fan */
.path-clay{width:212px;top:-22px;left:0}
.path-clay .ch-sh{left:56%!important;width:92%!important;height:20%!important;bottom:-3%!important}
.path-fan{width:172px;top:-40px;left:10px}
.path-fan .ch-sh{left:48%!important;width:64%!important;height:12%!important;bottom:-3%!important}
.app[data-motion] .path-clay.seen img{animation:chPop .7s cubic-bezier(.3,1.55,.5,1) both,chBreathe 4.2s ease-in-out .7s infinite alternate}
.app[data-motion] .path-fan.seen img{animation:chPop .7s cubic-bezier(.3,1.55,.5,1) both,chCheer 1.8s ease-in-out .7s infinite alternate}
@keyframes chCheer{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg) translateY(-3px)}}

/* French Open: the frog in a headband on a bench, clay on his shoe (Joshua's art, 28 Oct), in Carlos's spot (right, row 2) on the French Open */
/* 28 Oct: Joshua moved him into Carlos's spot on the right (the French Open Path has the frog instead of Carlos), mirrored to face the road */
.path-frog{width:198px;top:-24px;left:auto;right:-4px}
.path-kid.path-frog .ch-sh{left:47%;width:68%;bottom:2%;height:22%}

/* Wimbledon: the hedgehog in a visor on a green stool (Joshua's art, 28 Oct), same bend as the frog in Paris */
.path-hedgehog{width:178px;top:-30px;left:2px}
.path-kid.path-hedgehog .ch-sh{left:57%;width:58%;bottom:-2%;height:20%}

/* Australian Open: the ball kid in a cork hat picking up a ball (Joshua's art, 28 Oct), same bend as the frog and the hedgehog */
.path-ballkid{width:150px;top:-44px;left:14px}
.path-kid.path-ballkid .ch-sh{left:52%;width:86%;bottom:-2%;height:16%}

/* ---------- iPad (28 Oct): the app fills the screen, and the Path is drawn bigger ----------
   html.full is set in index.html for touch screens, the home-screen app and the native app. On wide screens the Path keeps its phone
   shape in a centred column (a little wider than the road, so the characters have room), scaled up by --pz (about 1.5 on an 11" iPad);
   the characters are made bigger again on top of that. */
html.full .side-l{display:none}
html.full .stage{padding:0;background:var(--bg)}
html.full .phone{width:100%;height:100%;border-radius:0;box-shadow:none}
@media (min-width:700px){
  html.full .path{width:470px;margin:0 auto;zoom:var(--pz,1.5)}
  html.full .path-carlos,html.full .path-kid,html.full .path-roo,html.full .path-animal{zoom:1.18}
  html.full .path-hedgehog{top:10px}
  html.full .path-ballkid{top:-24px}   /* bigger characters: keep the frog clear of the clay kid's shadow */
}

/* ---------- the daily check-in on every open (28 Oct): MatchPoint design system screens (design/tokens.css + components.css) over the focus overlay ---------- */
.tfo .mp-ci{position:absolute;inset:0;z-index:5;height:100%;min-height:0}
.mp-ci .mp-title.is-long{font-size:31px;line-height:32px}
.mp-ci .mp-note[hidden]{display:none}
.mp-ci .mp-body>*{animation:csIn .4s cubic-bezier(.2,.9,.3,1.2) both}.mp-ci .mp-body>:nth-child(2){animation-delay:.05s}.mp-ci .mp-body>:nth-child(3){animation-delay:.1s}.mp-ci .mp-body>:nth-child(4){animation-delay:.15s}
.mp-ci .mp-go{margin-top:0}

/* ---------- check-in: quick challenge / new tip choice + "say it" mic ---------- */
.mp-pick{display:grid;gap:14px;margin-top:18px}
.mp-tile.mp-choice{display:flex;align-items:center;gap:14px;width:100%;height:86px;padding:0 18px 0 12px;text-align:left}
.mp-ch-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;flex:none}
.mp-ch-ic.is-chal{background:#E3F8E6}.mp-ch-ic.is-chal img{width:56px;height:46px;object-fit:contain}.mp-ch-ic.is-chal svg{width:34px;height:34px;color:#16A34A}
.mp-ch-ic.is-tip{background:#FFF3C7;color:#F5A300}.mp-ch-ic.is-tip svg{width:36px;height:36px}
.mp-ch-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-ch-t b{font-size:19px;font-weight:900;color:var(--mp-ink);line-height:1.15}
.mp-ch-t small{font-size:14px;font-weight:800;color:#6B7290;line-height:1.2}
.mp-choice>svg:last-child{width:11px;height:18px;flex:none}.mp-choice>svg:last-child path{stroke:#B9BED0}
.mp-say{position:relative}.mp-say .mp-note{padding-right:62px}
.mp-mic{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#6A3FFC;color:#fff;box-shadow:0 3px 0 #4520D0;cursor:pointer}
.mp-mic svg{width:22px;height:22px}
.mp-mic.rec{background:#EF4444;box-shadow:0 3px 0 #B91C1C,0 0 0 6px rgba(239,68,68,.25)}
.mp-micl{display:block;min-height:18px;margin-top:6px;text-align:center;color:var(--mp-on-purple-soft);font-size:13px;font-weight:800}
/* the "ask a grown-up" voice sheet must show above the check-in */
.phone:has(.tfo) .veil{z-index:45}.phone:has(.tfo) .sheet{z-index:46}

/* question screens, round 2: no icon tile, a small coloured label, softer answer cards, Carlos in the feedback */
.fq .kick{color:var(--kc,var(--w2))!important;margin-top:4px}
.opts button,.tf button{box-shadow:0 0 0 1.5px #E3E7EF inset,0 2px 0 #E3E7EF}
.opts button.on,.tf button.on{box-shadow:0 0 0 2px #84C1FF inset,0 2px 0 #84C1FF}
.opts button:hover,.tf button:hover{box-shadow:0 0 0 1.5px #D5DBE6 inset,0 3px 0 #E3E7EF,0 10px 20px -14px rgba(27,34,54,.3)}
.opts button em{box-shadow:0 0 0 1.5px #E3E7EF inset}
.fban{padding-top:14px}
.fb-c{display:flex;align-items:flex-end;gap:12px}
.fb-car{width:104px;flex:none;margin:-34px 0 -4px -6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));animation:fbCar .45s cubic-bezier(.3,1.5,.5,1) both}
.fb-t{flex:1;min-width:0;padding-bottom:4px}
.fb-t .fb-h b{font-size:23px}
.fb-t p{margin-top:4px}
.fb-t .fb-why{margin-top:4px;font-size:15px}
@keyframes fbCar{from{transform:translateY(24px) scale(.85);opacity:0}}

/* ===== Joshua's Home design (Figma "HOME", 30 Oct): light tennis pattern, white 3D pills, orange focus card, Road card, 3D tab icons ===== */
.app[data-tab=home],.app[data-tab=home][data-sky=day],.app[data-tab=home][data-sky=night]{background:#F3F5FB}
.app[data-tab=home] .bar{background:transparent;box-shadow:none}
.app[data-tab=home] .scroll.plain{background:transparent}
/* top bar (every tab) */
.bar .me-b{gap:12px}
.me.av-img{background:#fff;padding:0;overflow:hidden;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(27,34,54,.16)}
.me.av-img img,.tav.av-img img{width:100%;height:100%;object-fit:cover;display:block}
.bar .me{width:46px;height:46px}
.bar .me-n{font-size:20px;color:#1B1F3B}
.bar .pill.hp{height:44px;padding:0 13px 0 10px;gap:6px;border-radius:16px;background:#fff!important;box-shadow:0 0 0 1.5px #ECEEF5 inset,0 3px 0 #E4E7F0!important}
.bar .pill.hp img{height:24px;width:auto;display:block}
.bar .pill.hp b{font-size:18px;color:#F97316;line-height:1}
.bar .pill.hp small{color:#1B1F3B;opacity:1;font-size:10.5px;margin-top:1px}
.bar .pill.st.hp b{color:#F59E0B;font-size:19px}
/* tab bar: full-colour 3D icons, a dot under the one you're on */
.tabs{background:#fff;box-shadow:0 -1px 0 #ECEEF5}
.tabs button .ti,.tabs button.on .ti,.app[data-tab=path] .tabs button.on .ti{background:none!important;border-color:transparent!important;box-shadow:none!important;width:52px;height:46px;margin-bottom:6px}
.tabs button .ti img{width:44px;height:44px;object-fit:contain}
.tabs button{position:relative}
.tabs button.on::after{content:"";position:absolute;left:50%;bottom:1px;z-index:2;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#7C4DFF}
.tabs button.on .ti img,.tabs button.on .tav{animation:tabpop .45s cubic-bezier(.34,1.8,.5,1)}
.tav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:18px;overflow:hidden;box-shadow:0 0 0 2.5px #fff,0 3px 8px rgba(27,34,54,.2)}
.tav.av-img{background:#FFE7B8}
/* Home */
.h4{display:flex;flex-direction:column;gap:16px;padding:6px 18px 26px}
.h4-tag{align-self:flex-start;display:inline-block;padding:7px 13px;border-radius:12px;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:rgba(150,82,0,.18);color:#fff}
.h4-tag.g{background:#DDF7E6;color:#16A34A}
.h4-focus{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:18px 18px 0;border-radius:26px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 70% at 100% 100%,#F5A33A 0,transparent 60%),linear-gradient(170deg,#F8BC45,#F29A34);box-shadow:0 0 0 1.5px rgba(255,255,255,.35) inset,0 7px 0 #DB7F22,0 18px 28px -16px rgba(219,127,34,.6);font:inherit;cursor:pointer}
.h4-focus::before{content:"";position:absolute;right:-40px;top:46%;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.09)}
.h4-focus:active{transform:translateY(4px);box-shadow:0 0 0 1.5px rgba(255,255,255,.35) inset,0 3px 0 #DB7F22}
.h4-play{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;background:#fff;color:#F08A1C;display:grid;place-items:center;box-shadow:0 3px 0 rgba(150,82,0,.25)}
.h4-play svg{width:18px;height:18px;margin-left:2px}
.h4-t{font-size:27px;font-weight:900;line-height:1.15;margin-top:12px;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 0 rgba(150,82,0,.18)}
.h4-s{font-size:16px;font-weight:800;margin-top:8px;opacity:.95;line-height:1.3}
.h4-art{position:relative;display:block;height:170px;margin:4px -18px 0}
.h4-art i{position:absolute;left:8%;right:8%;bottom:12px;height:30px;border-radius:50%;background:rgba(150,82,0,.18)}
.h4-art img{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:88%;max-height:160px;filter:drop-shadow(0 8px 10px rgba(120,60,0,.18))}
.h4-tell{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:22px;background:#fff;text-align:left;box-shadow:0 0 0 1.5px #ECEEF5 inset,0 4px 0 #E4E7F0;font:inherit;color:#1B1F3B}
.h4-tell>span:nth-child(2){flex:1;display:flex;flex-direction:column}.h4-tell small{font-weight:800;color:#64748B;font-size:13px}.h4-tell b{font-weight:900;font-size:16px}
.h4-tell>svg{width:18px;height:18px;color:#A5ADC0}
.h4-road{padding:16px;border-radius:26px;background:#fff;box-shadow:0 0 0 1.5px #ECEEF5 inset,0 5px 0 #E4E7F0,0 18px 30px -22px rgba(27,34,54,.3)}
.h4-rt{display:flex;gap:12px;align-items:center}
.h4-rl{flex:1;min-width:0;display:flex;flex-direction:column}
.h4-left{margin-top:10px;font-size:19px;font-weight:900;color:#1B1F3B}.h4-left b{font-size:30px;margin-right:4px;vertical-align:-2px}
.h4-dots{display:flex;align-items:center;margin-top:8px}
.h4-dots i{flex:none;width:22px;height:22px;border-radius:50%;background:#E8EBF2;display:grid;place-items:center}
.h4-dots i.d{background:#22C55E;color:#fff}.h4-dots i.d svg{width:13px;height:13px}
.h4-dots i.c{background:#fff;box-shadow:0 0 0 3px #22C55E inset,0 0 0 4px rgba(34,197,94,.18)}
.h4-dots s{flex:none;width:9px;height:0;border-top:2.5px dashed #C9D0DD}
.h4-nx{margin-top:8px;font-size:13px;font-weight:800;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h4-st{flex:none;width:118px;height:108px;border-radius:22px;overflow:hidden;position:relative;background:linear-gradient(180deg,#8B5CF6 0,#7C4DFF 38%,#4CA86A 70%,#3E8E5E);box-shadow:0 4px 0 rgba(27,34,54,.1)}
.h4-st.st-ao{background:linear-gradient(180deg,#38BDF8,#0062FF 45%,#1E3A8A)}.h4-st.st-rg{background:linear-gradient(180deg,#FDBA74,#BC4F10 55%,#7C2D12)}.h4-st.st-uso{background:linear-gradient(180deg,#A78BFA,#532895 55%,#2E1065)}
.h4-st img{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:132%;max-width:none}
.h4-go{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:14px;padding:0 20px;height:56px;border-radius:18px;background:linear-gradient(180deg,#4ADE80,#22C55E);color:#fff;font:inherit;font-size:20px;font-weight:900;box-shadow:0 5px 0 #16A34A;cursor:pointer}
.h4-go svg{width:20px;height:20px}
.h4-go:active{transform:translateY(4px);box-shadow:0 1px 0 #16A34A}

.h4-road{display:flex;flex-direction:column}.h4-road .h4-tag{white-space:nowrap}
.h4-road .h4-rt{margin-top:10px}.h4-road .h4-left{margin-top:0}
.h4-st{width:112px;height:104px}
/* Joshua's tab icons (Figma ICONS 98:873): the open tab is in colour, the rest grey, so no dot */
.tabs button.on::after{display:none}
.tabs button .ti,.tabs button.on .ti,.app[data-tab=path] .tabs button.on .ti{margin-bottom:0}
.tabs button .ti img{width:34px;height:34px}
/* Home v2: Joshua's Figma HOME 61:480 (30 Oct), measured at 390 wide */
.app[data-tab=home],.app[data-tab=home][data-sky=day],.app[data-tab=home][data-sky=night]{background:linear-gradient(180deg,#EBEEFF,#F7F6FD)}
.h4{gap:18px;padding:6px 24px 26px}
.h4-tag{padding:0 14px;height:29px;line-height:29px;border-radius:99px;font-size:11.5px;letter-spacing:.02em;background:rgba(0,0,0,.1)}
.h4-tag.g{background:rgba(45,208,84,.2);color:#0AA52F}
.h4-focus{padding:19px 20px 0;min-height:354px;border-radius:26px;background:linear-gradient(180deg,#FCBD3F,#F49339);box-shadow:0 0 0 1.3px rgba(0,0,0,.12) inset,0 4.5px 0 #D57F28,0 18px 28px -18px rgba(213,127,40,.55)}
.h4-focus:active{box-shadow:0 0 0 1.3px rgba(0,0,0,.12) inset,0 1px 0 #D57F28}
.h4-focus::before{right:-28px;top:auto;bottom:40px;width:150px;height:140px;border-radius:60% 40% 0 50%;background:rgba(255,255,255,.1)}
.h4-focus::after{content:"";position:absolute;left:-12px;top:180px;width:34px;height:32px;border-radius:50%;background:rgba(255,255,255,.12)}
.h4-play{display:none}
.h4-t{font-size:28.5px;line-height:1.27;letter-spacing:-.04em;margin-top:24px;font-weight:800;text-shadow:0 1px 1px rgba(0,0,0,.09);text-wrap:balance}
.h4-s{font-size:18.5px;line-height:1.35;letter-spacing:-.04em;font-weight:700;margin-top:8px;opacity:1;text-shadow:0 1px 1px rgba(0,0,0,.09)}
.h4-art{flex:1;min-height:170px;margin:0 -20px}
.h4-art i{left:5%;right:5%;bottom:14px;height:33px;background:rgba(213,127,40,.35)}
.h4-art img{bottom:18px;max-width:94%;max-height:162px;filter:none}
.h4-road{flex-direction:row;align-items:stretch;gap:12px;padding:13px 13px 14px 20px;border-radius:26px;box-shadow:0 0 0 1.3px rgba(0,0,0,.07) inset,0 3.5px 0 #E8E4F0}
.h4-rl{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.h4-road .h4-tag{white-space:normal;height:auto;min-height:29px;line-height:1.2;padding:7px 14px;margin-top:0}
.h4-road .h4-left{margin-top:10px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:#101B40}
.h4-left b{font-size:29px;margin-right:2px;vertical-align:-3px}
.h4-dots{margin-top:8px}
.h4-dots i{width:20px;height:20px;background:#E3E6EE}
.h4-dots i.d{background:#22C55E}.h4-dots i.d svg{width:12px;height:12px}
.h4-dots s{width:14px;border-top:2px dashed #9BE3B0}
.h4-go{width:auto;align-self:stretch;margin:auto 0 0 -7px;height:45px;padding:0 16px 0 20px;border-radius:19px;background:linear-gradient(180deg,#52D753,#0AC955);box-shadow:0 0 0 1.1px #59F571 inset,0 4px 0 #019C3F;font-size:18.5px;font-weight:900}
.h4-go:active{box-shadow:0 0 0 1.1px #59F571 inset,0 1px 0 #019C3F}
.h4-go svg{width:16px;height:16px}
.h4-st{width:130px;height:156px;align-self:center;border-radius:26px;background:linear-gradient(180deg,#8A4AF7,#563AF5);box-shadow:0 0 0 1.3px rgba(0,0,0,.07) inset}
.h4-st img{left:-27%;top:auto;bottom:-6%;transform:none;width:156%}
.h4-road .h4-dots{margin-bottom:14px}.h4-road .h4-tag{font-size:11px}
/* Try a level (switcher): one fresh player per ball colour */
.lv-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.lv-row button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;border-radius:16px;background:#fff;box-shadow:0 0 0 1.5px #ECEEF5 inset,0 3px 0 #E4E7F0;font:inherit;font-weight:900;font-size:13px;color:#1B1F3B;cursor:pointer}
.lv-row button i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8 0 18%,transparent 20%),var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.lv-row button.on{box-shadow:0 0 0 2.5px var(--c) inset,0 3px 0 var(--c)}
.lv-p{font-size:13px;margin-top:8px}
/* Practice step: an on-court drill from the lesson */
.tipcard.drill{font-size:17px;line-height:1.35}
.dr-h{display:flex;align-items:center;gap:12px;margin-top:-6px}
.dr-h img{width:108px;height:108px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 6px rgba(27,34,54,.14))}.dr-h img.fl{transform:scaleX(-1)}
.dr-h small{display:block;font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--k-purple,#7C3AED)}
.dr-h b{display:block;font-size:28px;font-weight:900;line-height:1.05;letter-spacing:-.035em;color:var(--k-ink,#1B1F3B);margin-top:3px}
.dr-h span{display:block;font-size:16px;font-weight:800;color:var(--k-ink2,#4B5068);margin-top:5px}
.dr-card{margin-top:14px;padding:16px 18px;border-radius:22px;background:#fff;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);font-size:16px;font-weight:700;line-height:1.4;color:var(--k-ink2,#4B5068)}
.tix-won .tix-pic{width:84px;flex:none;transform:rotate(-8deg);filter:drop-shadow(0 3px 2px rgba(120,70,0,.25))}
.jc-bub.fact{background:#FFF6D6;color:#9A5B00}.jc-bub.fact::after{background:#FFF6D6}
.jc-bub.tip{background:#E3FBEA;color:#15803D}.jc-bub.tip::after{background:#E3FBEA}
.fx-sh{text-align:center;padding-top:2px}
.fx-pic{display:block;width:120px;height:120px;object-fit:contain;margin:-8px auto 6px;filter:drop-shadow(0 6px 6px rgba(27,34,54,.14))}.fx-pic.fl{transform:scaleX(-1)}
.fx-sh small{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;background:#FFF2C4;color:#9A5B00;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.fx-sh small svg{width:15px;height:15px}
.fx-sh.tip small{background:#DCFCE7;color:#15803D}
.fx-sh p{margin:12px 6px 8px;font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.02em;color:var(--k-ink,#1B1F3B)}
.fx-star{display:inline-flex;align-items:center;gap:5px;margin-bottom:6px;font-size:14px;font-weight:900;color:#B07800}.fx-star svg{width:17px;height:17px;color:#F5B400}
.dr-card b{display:block;font-size:19px;font-weight:900;color:var(--k-ink,#1B1F3B);margin-bottom:4px}
/* drill steps (2 Nov): one action per line, big number circles, like a recipe */
.dr-steps{list-style:none;margin:8px 0 0;padding:0;counter-reset:st;display:grid;gap:9px}
.dr-steps li{counter-increment:st;position:relative;padding-left:38px;min-height:28px;font-size:17px;font-weight:700;line-height:1.35;color:var(--k-ink,#1B1F3B)}
.dr-steps li::before{content:counter(st);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:#2F6BFF;color:#fff;font-size:15px;font-weight:900;display:grid;place-items:center}
.rc.tryc .dr-steps{margin:8px 0 10px;gap:7px}.rc.tryc .dr-steps li{font-size:15px;padding-left:32px}.rc.tryc .dr-steps li::before{width:24px;height:24px;font-size:13px;background:#16A34A}
.drill-goal{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:18px;background:#FFF7E0;box-shadow:0 0 0 1.5px #FDE68A inset}
.drill-goal svg{width:26px;height:26px;color:#E5A00D;flex:none}.drill-goal small{display:block;font-size:12px;font-weight:800;color:#92400E}.drill-goal b{font-size:18px;font-weight:900;color:#1B1F3B}
.rc.tryc{text-align:left;background:#F0FDF4;box-shadow:0 0 0 1.5px #BBF7D0 inset}
.rc.tryc small{display:flex;align-items:center;gap:6px;color:#15803D}.rc.tryc small svg{width:15px;height:15px}
.rc.tryc p{margin:6px 0 8px;font-size:15px;font-weight:700;line-height:1.35;color:#1B1F3B}
.rc.tryc em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:900;font-size:14px;color:#B45309;background:#FFF7E0;padding:5px 10px;border-radius:99px}.rc.tryc em svg{width:15px;height:15px}
/* Joshua's nav icons v3 (Figma 108:887, 31 Oct): icy blue when off, colour when open; the open one sits a little bigger, as in his bar */
.tabs button .ti img{width:33px;height:33px;transition:width .2s,height .2s}
.tabs button.on .ti img{width:39px;height:39px}

/* the sign at the top of each Slam's road (2 Nov) */
.path .jcs{top:var(--sg,0px)}
.rsign{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:12px;width:min(320px,calc(100% - 32px));padding:12px 14px 12px 18px;border-radius:22px;background:#fff;box-shadow:0 4px 0 rgba(27,34,54,.08),0 10px 24px -8px rgba(27,34,54,.25);text-align:left}
.rsign>div{flex:1;min-width:0}
.rsign small{display:block;font-size:11.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--k-purple,#7C3AED)}
.rsign b{display:block;font-size:21px;font-weight:900;line-height:1.1;letter-spacing:-.03em;color:var(--k-ink,#1B1F3B);margin-top:2px}
.rsign span{display:block;font-size:13.5px;font-weight:800;color:var(--k-ink2,#4B5068);margin-top:3px}
.rsign .rs-tix{display:flex;flex:none;margin:0}
.rs-tix img{width:46px;margin-left:-14px;filter:grayscale(1) opacity(.4);transform:rotate(-8deg)}
.rs-tix img:first-child{margin-left:0}.rs-tix img+img{transform:rotate(6deg)}
.rs-tix img.on{filter:drop-shadow(0 2px 2px rgba(120,70,0,.25))}
/* My Tennis (2 Nov, Joshua): no greeting / streak / stars bar, the page starts at the top. Focus picture for kids without a drawn court = a 3D object */
.app[data-tab=mine] .bar{display:none}
.app[data-tab=mine] .mt{padding-top:max(58px,calc(env(safe-area-inset-top) + 14px))}
.fp-ic.fp-obj{height:124px;background:rgba(255,255,255,.18)}
.fp-ic.fp-obj img{width:auto;height:104px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
/* Locker too (2 Nov, Joshua: "not necessary on this page"): no greeting bar */
.app[data-tab=rewards] .bar{display:none}
.app[data-tab=rewards] .bar-sp{display:block;height:max(44px,env(safe-area-inset-top))}
/* game over screens sit in the game's own box: Rally + Target Practice play on navy, but their result screen is light like every other (2 Nov, Joshua: "is the screen navy blue?") */
.flow.gamef.full:has(> .fbody){background:#F3F6FB}