/* MatchPoint Kids · style kit v2 (31 Oct 2026), from Joshua's two mocks: Home (Danny, Weekly focus, Road to Wimbledon) and the
   "Corner to Corner" lesson start. One look everywhere: soft lavender screens, white cards with a soft lavender lip, purple for
   "where you are", one green button with an arrow for the main thing to do, glossy 3D pictures, Nunito 800–900 with tight tracking.
   Loaded AFTER kids.css so it restyles the app's existing classes; the style guide is design/kit.html (same classes, live). */
:root{
  /* screens */
  --k-bg:linear-gradient(180deg,#EBEEFF 0%,#F4F3FD 55%,#F7F6FD 100%);
  --k-bg-top:#EBEEFF;
  /* Joshua's background (31 Oct): soft waves, a racket and tennis balls in pale blue; 941×1672, cover from the top */
  --k-bg-img:#EEF2FE url(assets/bg-lavender-soft.webp) center top/cover no-repeat;
  /* text */
  --k-ink:#101B40; --k-ink2:#4A5379; --k-muted:#8A90AD;
  /* cards: white, a hairline rim and a soft lavender lip underneath */
  --k-card:#FFFFFF; --k-rim:#E7E3F3; --k-lip:#E3DFF0;
  --k-card-shadow:0 0 0 1.5px var(--k-rim) inset,0 4px 0 var(--k-lip);
  --k-float:0 18px 30px -22px rgba(76,58,170,.45);
  --k-r-card:26px; --k-r-tile:20px; --k-r-btn:22px; --k-r-pill:99px;
  /* purple: progress, "new", the chosen answer */
  --k-purple:#7C3AED; --k-purple-hi:#9F6BFF; --k-purple-dk:#5B21B6; --k-purple-soft:#F1EAFF; --k-purple-line:#C9B2FF;
  --k-purple-grad:linear-gradient(180deg,var(--k-purple-hi),var(--k-purple));
  /* green go: the one main action on a screen */
  --k-go-top:#52D753; --k-go-bot:#0AC955; --k-go-lip:#019C3F; --k-go-rim:#59F571;
  --k-go:linear-gradient(180deg,var(--k-go-top),var(--k-go-bot));
  /* orange: the weekly focus card */
  --k-orange:linear-gradient(180deg,#FCBD3F,#F49339); --k-orange-lip:#D57F28;
  /* right / wrong */
  --k-ok:#16A34A; --k-ok-soft:#EAFBE6; --k-ok-line:#58DA4A;
  --k-no:#E5484D; --k-no-soft:#FFEFF0; --k-no-line:#FF9DA0; --k-no-lip:#C53036;
  /* stars + the yellow underline */
  --k-gold:#FFC531;
  --k-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* the app's own names, pointed at the kit so every older card picks it up */
  --ink:var(--k-ink); --ink2:var(--k-ink2); --muted:var(--k-muted); --line:var(--k-rim); --bg:#F4F3FD;
}

/* ---------- screens: lavender behind every tab (the Path keeps its sky) and every full-screen step ---------- */
.app[data-tab=home],.app[data-tab=home][data-sky=day],.app[data-tab=home][data-sky=night],.app[data-tab=play],.app[data-tab=mine],.app[data-tab=rewards]{background:#EEF2FE url(assets/bg-lavender-soft.webp) center top/cover no-repeat}
.app[data-tab=play] .bar,.app[data-tab=mine] .bar,.app[data-tab=rewards] .bar{background:transparent;box-shadow:none}
.app[data-tab=play] .scroll.plain,.app[data-tab=mine] .scroll.plain,.app[data-tab=rewards] .scroll.plain{background:transparent}
.bar .pill{background:#fff;box-shadow:var(--k-card-shadow)}
.flow:not(.gamef):not(.cerf),.flow.slamf{background:#EEF2FE url(assets/bg-lavender-soft.webp) center top/cover no-repeat}
.flow>*{position:relative;z-index:1}
.flow>.fban{position:absolute;z-index:5}

/* ---------- type ---------- */
.fq h2,.rw h2,.sh-h b,.mt-h,.li-t,.hm-h{color:var(--k-ink);letter-spacing:-.035em}
.fq h2{font-size:28px;line-height:1.12}

/* ---------- the green button (every main action) ---------- */
.b3{min-height:58px;border-radius:var(--k-r-btn);background:var(--k-go);color:#fff;font-size:20px;font-weight:900;letter-spacing:0;
  box-shadow:0 0 0 1px var(--k-go-rim) inset,0 5px 0 var(--k-go-lip);text-shadow:0 1px 1px rgba(0,0,0,.12)}
.b3:active{box-shadow:0 0 0 1px var(--k-go-rim) inset,0 1px 0 var(--k-go-lip)}
.b3 svg{width:22px;height:22px}
/* an arrow on the right when the button is just words (Continue, Let's go!, Check…) */
.b3:not(.ghost):not(.white):not(.sm):not(.rec):not(:has(svg)){padding:0 50px}
.b3:not(.ghost):not(.white):not(.sm):not(.rec):not(:has(svg))::after{content:"";position:absolute;right:24px;top:50%;width:20px;height:20px;margin-top:-10px;background:currentColor;
  -webkit-mask:var(--k-chev) center/contain no-repeat;mask:var(--k-chev) center/contain no-repeat;z-index:1}
/* the white partner button and the quiet text link */
.b3.white{background:#fff;color:var(--k-ink);text-shadow:none;box-shadow:var(--k-card-shadow)}
.b3.white:active{box-shadow:0 0 0 1.5px var(--k-rim) inset,0 1px 0 var(--k-lip)}
.b3.ghost{background:transparent;color:var(--k-muted);box-shadow:none;text-shadow:none;font-size:18px}
.b3.sm{min-height:42px;border-radius:14px;font-size:15px;box-shadow:0 0 0 1px var(--k-go-rim) inset,0 4px 0 var(--k-go-lip)}
.b3.white.sm{box-shadow:var(--k-card-shadow)}
.b3[disabled],.ffoot .b3[disabled]{opacity:1;background:#E6E3F2;color:#A9A6C4;text-shadow:none;box-shadow:0 0 0 1px #DCD8EC inset,0 5px 0 #D2CDE6}
/* buttons that must stay their own colour: recording, Grand Slam stadium buttons on the ceremony */
.b3.rec{background:#E11D48;box-shadow:0 5px 0 #A8122F}

/* ---------- cards + tiles: white, hairline rim, soft lavender lip ---------- */
.rc,.tcard,.teach,.tipcard,.lsn,.rv,.rf,.hw,.prog2,.pathcard,.row,.mission,.prize,.chlist button,.goals button,.tiles button,.faces button,.tried button,.ord-p button,.pl-g,.pl-opp button,.pl-court button,
.mt-why,.mycoach,.hm-next,.nchal,.cs-key>div{background:#fff;box-shadow:var(--k-card-shadow)}
.rc,.lsn,.rv,.rf,.hw,.prog2,.pathcard,.row,.mission,.prize,.mt-why,.mycoach,.tipcard{border-radius:22px}
.tcard{border-radius:var(--k-r-card)}
.rc small,.mt-why b{color:var(--k-muted)}
.rc.tipr{background:var(--k-purple-soft);box-shadow:0 0 0 1.5px var(--k-purple-line) inset,0 4px 0 var(--k-purple-line)}.rc.tipr small{color:var(--k-purple)}

/* ---------- tags: tinted pills, capitals ---------- */
.k-tag,.sh-h small{display:inline-block;width:auto;padding:5px 12px;border-radius:var(--k-r-pill);background:var(--k-purple-soft);color:var(--k-purple);font-size:11.5px;font-weight:900;letter-spacing:.05em;line-height:1.35;text-transform:uppercase}

/* ---------- sheets ---------- */
.sheet{border-radius:32px 32px 0 0;padding-left:20px;padding-right:20px}
.sheet .grab{background:#E2DEEF}
.sh-h{align-items:center}
.sh-h b{font-size:25px;margin-top:6px}
.sh-p{color:var(--k-ink2)}
/* the picture tile: glossy, with a lip (any colour the screen gives it) */
.sh-h .ic,.gc-ic{position:relative;overflow:hidden;width:64px;height:64px;border-radius:22px}
.sh-h .ic::before,.gc-ic::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(0,0,0,.12));box-shadow:0 0 0 1.5px rgba(255,255,255,.35) inset}
.sh-h .ic svg,.gc-ic svg{position:relative;filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
/* the game card at the top of a game sheet: white like every card, the game's colour only in its picture tile */
.gcard{background:#fff!important;box-shadow:var(--k-card-shadow)!important;border-radius:var(--k-r-card)!important}
.gcard small{color:var(--gc)!important}
.gcard b{color:var(--k-ink)!important;letter-spacing:-.03em}
.gcard p{color:var(--k-ink2)!important}
.gc-ic{background:var(--gc)!important;box-shadow:0 4px 0 rgba(0,0,0,.18)!important}
/* Easy / Advanced: tiles; the chosen one purple */
.rmode button{background:#fff!important;box-shadow:var(--k-card-shadow)!important;border:0!important;border-radius:var(--k-r-tile)!important}
.rmode button.on{background:var(--k-purple-soft)!important;box-shadow:0 0 0 2.5px var(--k-purple) inset,0 4px 0 var(--k-purple-dk)!important}
.rmode button.on b{color:var(--k-purple)!important}
.tkline,.tix-note{border-radius:18px!important;background:var(--k-purple-soft)!important;color:var(--k-purple-dk)!important}

/* ---------- full-screen steps: header = close button, a label, the purple bar ---------- */
.fh{gap:14px;align-items:center}
.fh .x{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--k-ink);box-shadow:0 0 0 1.5px var(--k-rim) inset,0 3px 0 var(--k-lip)}
.fh .x svg{width:20px;height:20px;stroke-width:3}
.fh-m{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;margin-right:58px;min-width:0}
.fh-l{font-size:16px;font-weight:900;color:var(--k-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fh .pb{width:100%;flex:none;height:12px;border-radius:6px;background:#E1DEF0}
.fh .pb i{background:var(--k-purple-grad);box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),inset 0 2px 0 rgba(255,255,255,.3)}
.fh .qz-pts{margin-left:-58px}

/* ---------- lesson start (the "Corner to Corner" mock) ---------- */
.ki{justify-content:flex-start!important;align-items:center;text-align:center;padding-top:0}
.ki-hero{position:relative;width:300px;height:252px;margin:6px auto -28px;flex:none}
.ki-hero img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 100%;animation:kiPop .55s cubic-bezier(.3,1.5,.5,1) both}
.ki-card{position:relative;z-index:1;width:100%;padding:34px 18px 22px;border-radius:var(--k-r-card);background:rgba(255,255,255,.92);box-shadow:0 0 0 1.5px #fff inset,0 0 0 1px var(--k-rim),var(--k-float);animation:kiUp .5s .1s var(--ease) both}
.ki-pill{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:7px 18px;border-radius:var(--k-r-pill);background:var(--k-purple-grad);color:#fff;font-size:14px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 10px -4px rgba(124,58,237,.6)}
.ki-card h2{font-size:34px;line-height:1.08;font-weight:900;letter-spacing:-.045em;color:var(--k-ink);text-wrap:balance}
.ki-card h2 u{text-decoration:none;padding-bottom:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M4 8c30-6 80-7 112-2' fill='none' stroke='%23FFC531' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 11px no-repeat}
.ki-card p{margin-top:12px;font-size:18px;line-height:1.4;font-weight:700;color:var(--k-ink2)}
.ki-steps{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin-top:22px}
.ki-steps span{display:flex;flex-direction:column;align-items:center;gap:8px;width:92px;font-size:15px;line-height:1.2;font-weight:900;color:var(--k-ink);animation:kiUp .45s var(--d,.3s) var(--ease) both}
.ki-steps i{display:grid;place-items:center;width:76px;height:72px;border-radius:22px;background:#fff;box-shadow:var(--k-card-shadow),var(--k-float)}
.ki-steps i svg{width:46px;height:46px}
.ki-steps em{color:#9AA0C8;margin-top:26px;animation:kiUp .45s var(--d,.3s) var(--ease) both}.ki-steps em svg{width:18px;height:18px}
@keyframes kiPop{from{opacity:0;transform:translate(-50%,24px) scale(.85)}}
@keyframes kiUp{from{opacity:0;transform:translateY(14px)}}
@media (max-height:760px){.ki-hero{width:200px;height:172px;margin-bottom:-22px}.ki-card h2{font-size:29px}.ki-card p{font-size:16px}.ki-steps{margin-top:14px}.ki-steps i{width:64px;height:60px}.ki-steps i svg{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.ki-hero img,.ki-card,.ki-steps span,.ki-steps em{animation:none}}

/* ---------- the tip ---------- */
.tcard .tpic.kp{height:auto;width:100%;border-radius:20px;overflow:hidden}
.tcard .tpic.kp .fp{width:100%;height:auto;display:block}
.tcard .tpic.kc{height:200px}.tcard .tpic.kc img{height:200px;width:auto}
.tsay b{color:var(--k-ink);letter-spacing:-.03em}
.tsteps li{background:#fff;box-shadow:var(--k-card-shadow)}
.tsteps li i{background:var(--k-purple-soft)!important;color:var(--k-purple)!important}
.tsteps li.on{background:#fff;box-shadow:0 0 0 2.5px var(--k-purple) inset,var(--k-card-shadow)}.tsteps li.on i{background:var(--k-purple)!important;color:#fff!important}

/* ---------- questions: white tiles, the one you pick turns purple ---------- */
.kick{color:var(--k-purple)!important}
.opts button,.tf button{border-radius:var(--k-r-tile);box-shadow:var(--k-card-shadow);color:var(--k-ink)}
.opts em{border-radius:11px;box-shadow:0 0 0 1.5px var(--k-rim) inset;color:var(--k-muted)}
.opts button.on,.tf button.on{background:var(--k-purple-soft);box-shadow:0 0 0 2.5px var(--k-purple) inset,0 4px 0 var(--k-purple-dk);color:var(--k-purple-dk)}
.opts button.on em{background:var(--k-purple);box-shadow:none;color:#fff}
.ord-a span,.ord-a button{border-radius:16px}
/* the answer bar: a white card coming up from the bottom, coloured by right / wrong */
.fban{border-radius:30px 30px 0 0;box-shadow:0 -10px 30px -18px rgba(76,58,170,.5)}
.fban.ok{background:var(--k-ok-soft);color:var(--k-ok)}
.fban.no{background:var(--k-no-soft);color:var(--k-no)}
.fban p{color:var(--k-ink2)}.fban p b{color:var(--k-ink)}
.fban .fb-h b{letter-spacing:-.03em}
.fban.ok .b3,.flow.slamf .fban .b3{background:var(--k-go);box-shadow:0 0 0 1px var(--k-go-rim) inset,0 5px 0 var(--k-go-lip)}
.fban.no .b3,.flow.slamf .fban.no .b3{background:linear-gradient(180deg,#FF6B6F,var(--k-no));box-shadow:0 0 0 1px #FF9DA0 inset,0 5px 0 var(--k-no-lip)}

/* ---------- results ---------- */
.rw h2{font-size:32px}
.xp div{border:0;border-radius:20px;box-shadow:0 0 0 2px var(--bc) inset,0 4px 0 color-mix(in srgb,var(--bc) 55%,#fff)}
.xp small{border-radius:18px 18px 0 0}

/* ---------- tab pages ---------- */
.mt-h{font-size:32px;font-weight:900}
.mt-tabs{background:#E6E3F5!important}
.mt-tabs button.on{box-shadow:0 0 0 1.5px var(--k-rim) inset,0 3px 0 var(--k-lip)!important;color:var(--k-ink)!important}
/* the weekly focus card is the same orange card as Home, whatever the ball colour */
.wkf{background:var(--k-orange)!important;box-shadow:0 0 0 1.3px rgba(0,0,0,.12) inset,0 4.5px 0 var(--k-orange-lip),0 18px 28px -18px rgba(213,127,40,.55)!important;color:#fff;border-radius:var(--k-r-card)!important}
.wkf .b3.white{color:#C46A12}

/* ---------- tab bar: Joshua's icons with a label under each (the open one in its colour) ---------- */
.tabs{padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 #ECE9F5}
.tabs button{width:auto;flex:1;gap:2px;padding:4px 0 0;color:#8A90AD}
.tabs button .tl{display:block;font-size:12px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:#8A90AD;white-space:nowrap}
.tabs button.on .tl{font-weight:900}
.tabs button.on[data-tab=home] .tl{color:#F26B1D}
.tabs button.on[data-tab=path] .tl{color:#16A34A}
.tabs button.on[data-tab=play] .tl{color:#2563EB}
.tabs button.on[data-tab=mine] .tl{color:#7C3AED}
.tabs button.on[data-tab=rewards] .tl{color:#7C3AED}
.tabs button .ti{height:40px!important}
.tabs button .ti img{width:33px;height:33px}
.tabs button.on .ti img{width:37px;height:37px}
.app[data-tab=path] .tabs{background:#fff}

/* ---------- lesson done: 3D Carlos on a soft glow instead of a flat medal ---------- */
.kw-hero{position:relative;width:240px;height:190px;margin:0 auto}
.kw-hero::before{content:"";position:absolute;left:50%;top:52%;width:210px;height:210px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 70%)}
.kw-hero img{position:absolute;left:50%;bottom:0;width:240px;transform:translateX(-50%);animation:kiPop .6s cubic-bezier(.3,1.5,.5,1) both}
.rw .kw-hero+h2{margin-top:10px}
/* a white picture tile holding one of the glossy step pictures (Learn sheet) */
.sh-h .ic.kic{background:#fff;box-shadow:var(--k-card-shadow)}
.sh-h .ic.kic::before{display:none}
.sh-h .ic.kic svg{width:40px;height:40px;filter:none}

/* ---------- Home road card (Joshua's mock): tag, steps and dots beside the stadium, then the green Continue across the whole card ---------- */
.h4-road{flex-wrap:wrap;padding:16px 16px 20px 20px}
.h4-rl{justify-content:flex-start}
.h4-st{width:132px;height:104px}
.h4-go{flex:1 0 100%;width:100%;margin:6px 0 0;height:56px;padding:0 22px 0 24px;border-radius:var(--k-r-btn);font-size:21px;box-shadow:0 0 0 1px var(--k-go-rim) inset,0 5px 0 var(--k-go-lip)}
.h4-go svg{width:20px;height:20px}

/* ---------- court questions: white numbered targets, purple when picked, green / red after Check ---------- */
.courtq svg{width:min(100%,330px);max-height:54vh;filter:drop-shadow(0 5px 0 #2448AE) drop-shadow(0 18px 24px rgba(47,88,201,.28))}
.ct{cursor:pointer}
.ct .ct-h{fill:#fff;opacity:.22;transform-box:fill-box;transform-origin:center;animation:ctPulse 1.8s ease-in-out infinite}
.ct .ct-r{fill:#fff;opacity:1;stroke:none}
.ct .ct-c{fill:#fff;stroke:#DCD3FF;stroke-width:2}
.ct text{fill:var(--k-purple)}
.ct.on .ct-h{fill:#C4B0FF;opacity:.55;animation:none}.ct.on .ct-r{fill:#fff}.ct.on .ct-c{fill:var(--k-purple);stroke:none}.ct.on text{fill:#fff}
.ct.ok .ct-h{fill:#86EFAC;opacity:.6;animation:none}.ct.ok .ct-r{fill:#fff}.ct.ok .ct-c{fill:#16A34A;stroke:none}.ct.ok text{fill:#fff}
.ct.no .ct-h{fill:#FCA5A5;opacity:.6;animation:none}.ct.no .ct-r{fill:#fff}.ct.no .ct-c{fill:#E5484D;stroke:none}.ct.no text{fill:#fff}
.locked .ct .ct-h{animation:none}
@keyframes ctPulse{50%{transform:scale(1.18);opacity:.1}}
@media (prefers-reduced-motion:reduce){.ct .ct-h{animation:none}}

/* ---------- character slots (kids.js CH): a character instead of a flat icon; dashed placeholder in test mode until Joshua draws one ---------- */
.chs{display:grid;place-items:center;flex:none}
.chs img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 8px rgba(40,30,110,.18))}
.chs.ph{border-radius:20px;background:repeating-linear-gradient(-45deg,rgba(124,58,237,.06) 0 8px,rgba(124,58,237,.12) 8px 16px);box-shadow:0 0 0 2px var(--k-purple-line) inset;color:var(--k-purple);text-align:center;padding:4px}
.chs.ph b{font-size:10.5px;font-weight:900;line-height:1.15;letter-spacing:.02em;word-break:break-word}
/* in a sheet header: bigger than the old icon, standing on the header line, no tile behind it */
.sh-h .chs.shc{width:96px;height:92px;margin:-14px -4px -2px -6px;background:none;box-shadow:none;border-radius:0;overflow:visible}
.sh-h .chs.shc::before{display:none}
.sh-h .chs.shc.ph{width:84px;height:84px;margin:0;border-radius:20px;background:repeating-linear-gradient(-45deg,rgba(124,58,237,.06) 0 8px,rgba(124,58,237,.12) 8px 16px);box-shadow:0 0 0 2px var(--k-purple-line) inset}
/* game card */
.gcard .chs.gc-ch{width:104px;height:104px;margin:-6px 0 -6px -6px}
.gcard .chs.gc-ch.ph{width:84px;height:84px;margin:0}
/* empty states: the character sits above the line */
.empty .chs.emp{width:150px;height:130px;margin:0 auto 10px}
.empty .chs.emp.ph{width:120px;height:110px}
/* level picker */
.lv-row .chs.lvc{width:46px;height:46px}
.lv-row .chs.lvc.ph{border-radius:14px;padding:2px}.lv-row .chs.lvc.ph b{font-size:8px}

/* ---------- 1 Nov: four tabs, Games on Home, My Tennis on one page ---------- */
/* Home › Games card: white card, the Games icon, a purple Play pill (the green Continue above stays the one green button) */
.h4-games{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px 12px 12px;border-radius:26px;background:#fff;box-shadow:var(--k-card-shadow);font:inherit;text-align:left;color:var(--k-ink);cursor:pointer}
.h4-games>img{width:62px;height:62px;flex:none;object-fit:contain;padding:6px;border-radius:18px;background:var(--k-purple-soft)}
.h4-games>span:not(.h4-gp){flex:1;min-width:0;display:flex;flex-direction:column}
.h4-games small{font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--k-purple)}
.h4-games b{font-size:18px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.h4-games em{font-style:normal;font-size:13.5px;font-weight:700;color:var(--k-muted)}
.h4-gp{flex:none;padding:0 16px;height:40px;line-height:40px;border-radius:14px;background:linear-gradient(180deg,var(--k-purple-hi),var(--k-purple));color:#fff;font-size:16px;font-weight:900;box-shadow:0 3px 0 var(--k-purple-dk)}
.h4-games:active{transform:translateY(3px)}
/* Games page: back to Home */
.pl-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;padding:0 14px 0 10px;height:38px;border-radius:99px;background:#fff;box-shadow:var(--k-card-shadow);font:inherit;font-size:15px;font-weight:900;color:var(--k-ink2);cursor:pointer}
.pl-back svg{width:18px;height:18px}
/* My Tennis */
.mt .sec{margin-top:26px}
.mt .sec .lk{color:var(--k-purple)}
.mt .empty{padding:16px 16px 18px}
.mt-more{display:block;margin:4px auto 0;color:var(--k-purple)}
.dy-l{display:flex;flex-direction:column;gap:10px;margin:4px 0 12px;max-height:60vh;overflow:auto}
/* Journey › heroes and Locker › progress */
.pj-heroes{margin:8px 18px 0}
.lk-prog{padding:0 2px 24px}

/* ---------- JOURNEY v2 (1 Nov): same family as the rest of the app ----------
   Lavender screen + top bar like every other tab; the Road banner is Home's white road card; the path sits on a "court" card
   in the Slam's colour (softened), or a light version (test bar › Journey › Light). Characters come from a layout (kids.js JCL). */
.chap[data-slam=ao]{--jc:var(--c-ao,#0062FF)}.chap[data-slam=rg]{--jc:var(--c-rg,#BC4F10)}.chap[data-slam=wim]{--jc:var(--c-wim,#01653B)}.chap[data-slam=uso]{--jc:var(--c-uso,#532895)}
.app[data-tab=path][data-jlook]{--pn:#EEF2FE;--pn2:#fff;background:#EEF2FE url(assets/bg-lavender-soft.webp) center top/cover no-repeat!important}
.app[data-tab=path][data-jlook] .scroll{background:none!important;box-shadow:none!important}
.app[data-tab=path][data-jlook] .bar{background:transparent!important;box-shadow:none!important}
.app[data-tab=path][data-jlook] .bar .me-n{color:var(--k-ink)!important}
.app[data-tab=path][data-jlook] .bar .pill{background:#fff!important;box-shadow:var(--k-card-shadow)!important}
.app[data-tab=path][data-jlook] .bar .pill.st.stat{color:#D9A400!important}
.app[data-tab=path][data-jlook] .tabs{background:#fff!important;box-shadow:0 -1px 0 var(--k-rim)!important}
.app[data-tab=path][data-jlook] .chap,.app[data-tab=path][data-jlook] .chap + .chap{background:none!important;border-top:0!important;margin-top:0!important;padding:0 0 8px!important}
.app[data-tab=path][data-jlook] .chap + .chap{padding-top:26px!important}
.app[data-tab=path][data-jlook] .chap::after{display:none}
/* the court card the path runs down */
.app[data-tab=path][data-jlook] .path{margin:16px 10px 0;padding-top:34px;border-radius:34px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 46px,rgba(255,255,255,0) 46px 92px),radial-gradient(120% 420px at 50% 0,rgba(255,255,255,.22),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--jc) 80%,#fff) 0,color-mix(in srgb,var(--jc) 88%,#fff) 60%,color-mix(in srgb,var(--jc) 92%,#000) 100%)!important;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.06) inset,0 5px 0 color-mix(in srgb,var(--jc) 70%,#000),0 22px 40px -26px color-mix(in srgb,var(--jc) 70%,#000)}
.app[data-tab=path][data-jlook=light] .path{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--jc) 5%,transparent) 0 46px,transparent 46px 92px),
  linear-gradient(180deg,color-mix(in srgb,var(--jc) 9%,#fff),color-mix(in srgb,var(--jc) 16%,#fff))!important;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--jc) 18%,#fff) inset,0 5px 0 color-mix(in srgb,var(--jc) 22%,#fff)}
.app[data-tab=path][data-jlook=light] .trail path,.app[data-tab=path][data-jlook=light] .trail path.on{stroke:color-mix(in srgb,var(--jc) 45%,#fff)!important}
/* Road banner = Home's road card */
.app[data-tab=path][data-jlook] .road.jr{display:grid;grid-template-columns:1fr 112px;grid-template-areas:"l st" "l bk";gap:8px 14px;align-items:start;margin:10px 16px 0;padding:16px 16px 16px 20px;border-radius:26px;background:#fff!important;box-shadow:var(--k-card-shadow)!important;color:var(--k-ink)}
.jr-l{grid-area:l;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;align-self:center}
.jr-tag{display:inline-block;padding:7px 13px;border-radius:99px;background:color-mix(in srgb,var(--jc) 12%,#fff);color:var(--jc);font-size:12px;font-weight:900;letter-spacing:.05em;line-height:1.25;text-transform:uppercase}
.jr-left{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--k-ink)}.jr-left b{font-size:26px;font-weight:900;margin-right:2px}
.road.jr .rd-bar{width:100%;height:12px;margin:0;border-radius:99px;background:#EEF0F7;box-shadow:none}
.road.jr .rd-bar i,.rd-mini .rd-bar i{left:0;top:0;bottom:0;min-width:12px;max-width:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--jc) 75%,#fff),var(--jc))}
.jr-st{grid-area:st;width:112px;height:86px;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--jc) 12%,#fff)}
.jr-st img{width:100%;height:100%;object-fit:cover;display:block}
.jr-book{grid-area:bk;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border:0;border-radius:12px;background:var(--k-purple-soft);color:var(--k-purple);font:inherit;font-size:14px;font-weight:900;cursor:pointer}
.jr-book svg{width:17px;height:17px}
/* the one-line version pinned while scrolling */
.app[data-tab=path][data-jlook] .rd-mini{background:#fff!important;color:var(--k-ink)!important;box-shadow:var(--k-card-shadow),0 12px 24px -14px rgba(27,34,54,.35)!important}
.app[data-tab=path][data-jlook] .rd-mini span,.app[data-tab=path][data-jlook] .rd-more em{color:var(--jc)!important}
.app[data-tab=path][data-jlook] .rd-mini .rd-book{background:var(--k-purple-soft)!important;color:var(--k-purple)!important;box-shadow:none!important}
.rd-mini .rd-st{width:34px;height:26px;border-radius:8px;object-fit:cover;flex:none}
.rd-mini .rd-bar{height:10px;margin:0;background:#EEF0F7;box-shadow:none}
.app[data-tab=path][data-jlook] .rd-pin::before{background:linear-gradient(#EEF2FE 55%,rgba(238,242,254,0))!important}
/* below the court: season, next stop, heroes on lavender */
.app[data-tab=path][data-jlook] .season{margin:18px 16px 0;background:#fff!important;box-shadow:var(--k-card-shadow)!important;color:var(--k-ink)!important}
.app[data-tab=path][data-jlook] .next-w{background:#fff!important;border-color:var(--k-rim)!important;color:var(--k-muted)!important}
.app[data-tab=path][data-jlook] .next-w b{color:var(--k-ink)}
.app[data-tab=path][data-jlook] .legend{color:var(--k-ink2)}
/* characters by the road */
.jcs{position:absolute;inset:0;z-index:0;pointer-events:none}
.jc{position:absolute;transform:translateX(-50%);pointer-events:none}
.jc img{position:relative;display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.jc img.fl{scale:-1 1}
.jc .ch-sh{left:50%;bottom:-3%;width:72%;height:14%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(8,18,40,.3),rgba(8,18,40,.14) 55%,rgba(8,18,40,0))}
.app[data-motion] .jc{transform:translate(-50%,var(--py,0px));will-change:transform}
/* Arrange characters (test mode) */
.app[data-arr] .jcs{z-index:6}
.app[data-arr] .jc{pointer-events:auto;cursor:grab;touch-action:none;border-radius:18px}
.app[data-arr] .jc:active{cursor:grabbing}
.app[data-arr] .jc.sel{outline:2.5px dashed #fff;outline-offset:4px;box-shadow:0 0 0 6px rgba(124,58,237,.45)}
.app[data-arr] .jc img{animation:none!important}
.arr-bar{position:absolute;left:10px;right:10px;bottom:98px;z-index:50;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:22px;background:#fff;box-shadow:var(--k-card-shadow),0 18px 40px -16px rgba(27,34,54,.45)}
.arr-h{display:flex;flex-direction:column;padding:0 4px}
.arr-h b{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:900;color:var(--k-ink)}.arr-h b svg{width:18px;height:18px;color:var(--k-purple)}
.arr-h small{font-size:12.5px;font-weight:700;color:var(--k-muted)}
.arr-r{display:flex;gap:6px}
.arr-r button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:38px;padding:0 6px;border:0;border-radius:12px;background:#F2F0FA;color:var(--k-ink);font:inherit;font-size:13.5px;font-weight:900;cursor:pointer;white-space:nowrap}
.arr-r button svg{width:15px;height:15px}
.arr-r button[data-act=jcsize]{flex:0 0 44px;font-size:20px}
.arr-r button.del{color:var(--k-no)}
.arr-r button.done{background:linear-gradient(180deg,var(--k-purple-hi),var(--k-purple));color:#fff;box-shadow:0 3px 0 var(--k-purple-dk)}
.jc-lib{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px;max-height:56vh;overflow:auto}
.jc-lib button{aspect-ratio:1;padding:8px;border:0;border-radius:16px;background:var(--k-purple-soft);cursor:pointer}
.jc-lib img{width:100%;height:100%;object-fit:contain}
.jc-out{width:100%;height:150px;margin:6px 0 4px;padding:10px;border:1.5px solid var(--k-rim);border-radius:14px;font:600 11.5px/1.4 ui-monospace,Menlo,monospace;color:var(--k-ink)}
.app:has(#sheet.on) .arr-bar{display:none}

/* ---------- JOURNEY v3 (1 Nov): pale court card + court lines, white road, five kinds of step, "Up next" over the tab bar ---------- */
.app[data-tab=path][data-jlook=new] .path{margin:14px 10px 0;padding-top:34px;border-radius:34px;overflow:visible;
  background:radial-gradient(130% 380px at 50% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),linear-gradient(180deg,color-mix(in srgb,var(--jc) 8%,#fff),color-mix(in srgb,var(--jc) 15%,#fff))!important;
  box-shadow:0 0 0 1.5px #fff inset,0 0 0 1px color-mix(in srgb,var(--jc) 14%,#fff),0 5px 0 color-mix(in srgb,var(--jc) 18%,#E6E3F2),0 24px 40px -28px rgba(27,34,54,.35)!important}
.j3court{position:absolute;inset:0;width:100%;height:100%;border-radius:34px;color:color-mix(in srgb,var(--jc) 22%,transparent);pointer-events:none;z-index:0}
.app[data-jlook=new] .pstar,.app[data-jlook=new] .dball,.app[data-jlook=new] .nring{display:none!important}
/* the road */
.app[data-tab=path][data-jlook=new] .trail{display:block;z-index:0}
.app[data-tab=path][data-jlook=new] .trail path{fill:none;stroke-linecap:round;animation:none!important;opacity:1!important;stroke-dashoffset:0!important}
.app[data-tab=path][data-jlook=new] .trail path.re{stroke:color-mix(in srgb,var(--jc) 20%,#fff)!important;stroke-width:38px!important;stroke-dasharray:none!important}
.app[data-tab=path][data-jlook=new] .trail path.rb{stroke:#fff!important;stroke-width:30px!important;stroke-dasharray:none!important}
.app[data-tab=path][data-jlook=new] .trail path.rm{stroke:#D7DBE8!important;stroke-width:4px!important;stroke-dasharray:3 13!important}
.app[data-tab=path][data-jlook=new] .trail path.rm.on{stroke:var(--k-purple)!important;stroke-width:5px!important;stroke-dasharray:none!important}
/* a step */
.k-learn{--ka:#B993FF;--kb:#7C3AED;--kd:#5B21B6}
.k-game{--ka:#7FB7FF;--kb:#2F7BF5;--kd:#1E4FB5}
.k-practice{--ka:#FFB774;--kb:#F97316;--kd:#C2410C}
.k-ticket{--ka:#FFE17A;--kb:#F4A80B;--kd:#B7770A}
.k-slam{--ka:color-mix(in srgb,var(--jc) 60%,#fff);--kb:var(--jc);--kd:color-mix(in srgb,var(--jc) 70%,#000)}
.app[data-jlook=new] .node.j3n{width:76px;height:76px;border:0;background:none;padding:0;cursor:pointer;z-index:2}
.app[data-jlook=new] .node.j3n::before{display:none}
.j3w{position:absolute;inset:0;display:grid;place-items:center;filter:drop-shadow(0 6px 0 var(--kd)) drop-shadow(0 14px 12px rgba(27,34,54,.16));transition:transform .15s,filter .2s}
.j3t{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.6),rgba(255,255,255,0) 46%),linear-gradient(180deg,var(--ka),var(--kb));box-shadow:inset 0 -5px 0 rgba(0,0,0,.08),inset 0 0 0 3px rgba(255,255,255,.3)}
.j3t svg{width:46%;height:46%;color:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.14))}
/* tickets are ticket-shaped: notches each side and a dashed tear line */
.k-ticket .j3t{position:relative;width:112%;height:80%;border-radius:14px;rotate:-8deg;
  -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat}
.k-ticket .j3t::after{content:"";position:absolute;top:14%;bottom:14%;right:24%;border-left:2.5px dashed rgba(150,90,0,.35)}
.k-ticket .j3t svg{width:40%;height:52%;margin-right:14%}
.app[data-jlook=new] .node.j3n:active .j3w{transform:translateY(4px) scale(.96)}
/* done ✓ / later 🔒 badge */
.j3b{position:absolute;z-index:2;right:-5px;top:-5px;width:27px;height:27px;border-radius:50%;display:none;place-items:center}
.j3b svg{width:15px;height:15px}
.app[data-jlook=new] .node.j3n.done .j3b{display:grid;background:var(--k-purple);color:#fff;box-shadow:0 0 0 3px #fff,0 3px 6px rgba(27,34,54,.2)}
.app[data-jlook=new] .node.j3n.lock .j3b{display:grid;background:#fff;color:#9AA3B5;box-shadow:0 0 0 1.5px var(--k-rim),0 2px 0 var(--k-rim)}
.app[data-jlook=new] .node.j3n.lock .j3w{filter:saturate(.35) brightness(1.08) opacity(.6) drop-shadow(0 5px 0 rgba(27,34,54,.12))}
/* the step you're on: bigger, bobbing, a soft glow ring */
.app[data-jlook=new] .node.j3n.cur .j3w{animation:j3bob 1.9s ease-in-out infinite}
.app[data-jlook=new] .node.j3n.cur::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--kb) 30%,transparent),transparent);animation:j3glow 1.9s ease-in-out infinite;z-index:-1}
@keyframes j3bob{0%,100%{transform:scale(1.16)}50%{transform:scale(1.16) translateY(-5px)}}
@keyframes j3glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
.app[data-jlook=new] .node.j3n .go{color:var(--kb);bottom:calc(100% + 14px)}
/* the name under each step */
.j3l{position:absolute;z-index:3;top:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--k-rim),0 2px 0 var(--k-rim);
  white-space:nowrap;font-size:12.5px;font-weight:900;line-height:1.3;letter-spacing:-.005em;color:var(--k-ink2)}
.app[data-jlook=new] .node.j3n.cur .j3l{top:calc(100% + 16px);background:var(--kb);color:#fff;box-shadow:0 2px 0 var(--kd)}
.app[data-jlook=new] .node.j3n.lock .j3l{color:var(--k-muted);background:rgba(255,255,255,.8)}
.app[data-jlook=new] .node.j3n.k-ticket.cur .j3l{color:#5A3A00}
/* the Grand Slam at the end: smaller, a white label with the two tickets */
.app[data-jlook=new] .slam3d{width:236px}
.app[data-jlook=new] .slam3d .s3-sh{bottom:50px;height:56px}
.app[data-jlook=new] .slam3d .s3-lab{background:#fff;color:var(--k-ink);box-shadow:var(--k-card-shadow);padding:8px 18px 9px}
.app[data-jlook=new] .slam3d .s3-lab small{color:var(--sc);opacity:1}
.app[data-jlook=new] .slam3d.lock .s3-lab{background:#fff;box-shadow:var(--k-card-shadow)}
.app[data-jlook=new] .slam3d.lock img{filter:grayscale(.4) brightness(1.04);opacity:.85}
.app[data-jlook=new] .slam3d .s3-lock{width:46px;height:46px;top:40%}.app[data-jlook=new] .slam3d .s3-lock svg{width:22px;height:22px}
.app[data-jlook=new] .slam3d .s3-tix i{background:#F1F2F8}.app[data-jlook=new] .slam3d .s3-tix i svg{color:#B8BFCE}
.app[data-jlook=new] .slam3d .s3-tix i.on{background:#FFD23F}.app[data-jlook=new] .slam3d .s3-tix i.on svg{color:#7A4A00}
/* header: stadium · "Road to" + name · bar + "6 to go" · two tickets */
.app[data-tab=path] .road.j3r{display:flex;align-items:center;gap:12px;margin:10px 16px 0;padding:12px 14px 12px 12px;border-radius:26px;background:#fff!important;box-shadow:var(--k-card-shadow)!important;color:var(--k-ink)}
.j3r-st{flex:none;width:76px;height:62px;border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--jc) 10%,#fff)}
.j3r-st img{width:100%;height:100%;object-fit:cover;display:block}
.j3r-m{flex:1;min-width:0;display:flex;flex-direction:column}
.j3r-m small{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
.j3r-m b{font-size:20px;line-height:1.15;font-weight:900;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j3r-p{display:flex;align-items:center;gap:8px;margin-top:7px}
.j3r-p .rd-bar{flex:1;height:10px;margin:0;border-radius:99px;background:#EEF0F7;box-shadow:none;position:relative;overflow:hidden}
.j3r-p .rd-bar i{position:absolute;left:0;top:0;bottom:0;min-width:10px;border-radius:99px;background:linear-gradient(180deg,var(--k-purple-hi),var(--k-purple))!important}
.j3r-p em{font-style:normal;font-size:13px;font-weight:900;color:var(--k-purple);white-space:nowrap}
.j3r-tx{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding-left:12px;border-left:1.5px solid var(--k-rim)}
.j3r-tx span{display:flex;gap:4px}
.j3r-tx i{display:grid;place-items:center;width:28px;height:22px;border-radius:7px;background:#F1F2F8;rotate:-6deg}
.j3r-tx i svg{width:17px;height:17px;color:#B8BFCE}
.j3r-tx i.on{background:linear-gradient(180deg,#FFE17A,#F4A80B);box-shadow:0 2px 0 #B7770A}.j3r-tx i.on svg{color:#7A4A00}
.j3r-tx small{font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--k-muted)}
.app[data-jlook=new] .rd-mini b{text-transform:none;letter-spacing:-.01em;font-size:16px}
.app[data-jlook=new] .rd-mini .rd-bar i{background:linear-gradient(180deg,var(--k-purple-hi),var(--k-purple))!important}
.app[data-jlook=new] .rd-mini span{color:var(--k-purple)!important}
/* Up next + Start, over the tab bar */
.j3next{position:absolute;left:12px;right:12px;bottom:98px;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:24px;background:#fff;
  box-shadow:0 0 0 1px var(--k-rim),0 4px 0 #E3DFF0,0 20px 36px -18px rgba(27,34,54,.5);animation:kiUp .4s var(--ease) both}
.j3next .j3w{position:relative;inset:auto;flex:none;width:50px;height:50px;filter:drop-shadow(0 4px 0 var(--kd))}
.j3x{flex:1;min-width:0;display:flex;flex-direction:column}
.j3x small{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--k-purple);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j3x b{font-size:17px;line-height:1.2;font-weight:900;letter-spacing:-.02em;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j3next .b3{flex:none;width:auto;min-width:92px;margin:0;padding:0 18px}
.app:has(#sheet.on) .j3next,.app:has(.flow) .j3next{display:none}
/* the key at the bottom uses the same pictures */
.app[data-jlook=new] .legend.j3leg{gap:10px 14px;margin:20px 16px 0;padding:14px;border-radius:22px;background:#fff;box-shadow:var(--k-card-shadow)}
.legend.j3leg i.j3w{position:relative;inset:auto;width:26px;height:26px;background:none;filter:drop-shadow(0 2px 0 var(--kd))}
.legend.j3leg i.k-ticket .j3t::after{display:none}
.legend.j3leg .j3t svg{width:15px;height:15px}
/* v3 steps: undo the old ball-step icon rules */
.app[data-tab=path][data-jlook=new] .node.j3n .j3t svg{position:relative;top:0;width:46%;height:46%;color:#fff!important;transform:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.14));animation:none}
.app[data-tab=path][data-jlook=new] .node.j3n.k-ticket .j3t svg{width:40%;height:52%;margin-right:14%}
.app[data-tab=path][data-jlook=new] .node.j3n .j3b svg{position:static;top:0;width:15px;height:15px;color:inherit!important;filter:none;transform:none}
.app[data-tab=path][data-jlook=new] .node.j3n.lock .j3b svg{width:13px;height:13px}
.app[data-tab=path][data-jlook=new] .j3court{color:color-mix(in srgb,var(--jc) 15%,transparent)}
.app[data-tab=path][data-jlook=new] .node .pkid{display:none}
.app[data-tab=path][data-jlook=new] .rd-mini span,.app[data-tab=path][data-jlook=new] .rd-more em{color:var(--k-purple)!important}
.app[data-tab=path][data-jlook=new] .node.j3n.lock .j3w{filter:saturate(.55) opacity(.5) drop-shadow(0 5px 0 rgba(27,34,54,.1))}
.app[data-tab=path][data-jlook=new] .slam3d .s3-lab,.app[data-tab=path][data-jlook=new] .slam3d.lock .s3-lab{background:#fff!important;color:var(--k-ink)!important;box-shadow:var(--k-card-shadow)!important}
.app[data-tab=path][data-jlook=new] .slam3d.lock .s3-lab small{color:var(--k-muted)!important}
.app[data-tab=path][data-jlook=new] .node.j3n .go{display:none}

/* ---------- WHY IT HELPS (1 Nov, Joshua: "what you're teaching, why you're teaching it, how it helps") ---------- */
.ki-why{display:flex;flex-direction:column;gap:3px;margin-top:14px;padding:11px 14px;border-radius:16px;background:var(--k-purple-soft);text-align:left}
.ki-why b,.g-why b{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--k-purple)}
.ki-why b svg,.g-why b svg{width:15px;height:15px}
.ki-why span{font-size:15.5px;line-height:1.35;font-weight:800;color:var(--k-ink)}
.g-why{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:11px 14px;border-radius:16px;background:var(--k-purple-soft)}
.g-why span{font-size:15px;line-height:1.35;font-weight:800;color:var(--k-ink)}
.g-win{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:14px;font-weight:800;color:var(--k-ink2)}.g-win svg{width:18px;height:18px;color:#F5B400;flex:none}.g-win b{color:var(--k-ink)}
.g-rows{display:flex;flex-direction:column;gap:2px;margin:12px 0 4px;padding:6px 14px;border-radius:18px;background:#F7F6FC;box-shadow:0 0 0 1px var(--k-rim) inset}
.g-rows>div{display:flex;align-items:flex-start;gap:11px;padding:8px 0}
.g-rows>div+div{border-top:1px solid var(--k-rim)}
.g-rows i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--k-rim);color:var(--k-purple)}
.g-rows i svg{width:18px;height:18px}
.g-rows span{display:flex;flex-direction:column;min-width:0}
.g-rows small{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--k-muted)}
.g-rows b{font-size:15px;line-height:1.3;font-weight:800;color:var(--k-ink)}

/* ---------- JOURNEY v3 round 2 (1 Nov, "still looks a bit messy"): fewer things on the map ---------- */
.app[data-tab=path][data-jlook=new] .path{background:linear-gradient(180deg,color-mix(in srgb,var(--jc) 6%,#fff),color-mix(in srgb,var(--jc) 11%,#fff))!important;
  box-shadow:0 0 0 1.5px #fff inset,0 0 0 1px color-mix(in srgb,var(--jc) 10%,#fff),0 18px 36px -28px rgba(27,34,54,.3)!important}
.app[data-tab=path][data-jlook=new] .trail path.re{stroke:color-mix(in srgb,var(--jc) 10%,#fff)!important;stroke-width:42px!important}
.app[data-tab=path][data-jlook=new] .trail path.rb{stroke:#fff!important;stroke-width:34px!important}
.app[data-tab=path][data-jlook=new] .trail path.rb.on{stroke:#EEE6FF!important}
.app[data-jlook=new] .node.j3n{width:80px;height:80px}
.app[data-tab=path][data-jlook=new] .node.j3n.lock .j3w{filter:saturate(.45) brightness(1.06) opacity(.5) drop-shadow(0 5px 0 rgba(27,34,54,.1))}
.app[data-tab=path][data-jlook=new] .node.j3n.done .j3t svg{width:44%;height:44%}
/* "Up next" beside the step you're on */
.j3up{position:absolute;z-index:4;top:50%;width:max-content;max-width:var(--bw,200px);padding:10px 14px 11px;border-radius:18px;background:#fff;text-align:left;
  box-shadow:0 0 0 1px var(--k-rim),0 4px 0 #E3DFF0,0 14px 26px -14px rgba(27,34,54,.4);animation:j3upIn .45s .15s var(--ease) both}
.j3up small{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--kb);line-height:1.2}
.j3up b{display:block;margin-top:2px;font-size:16.5px;line-height:1.2;font-weight:900;letter-spacing:-.02em;color:var(--k-ink)}
.j3up::before{content:"";position:absolute;width:14px;height:14px;background:#fff;rotate:45deg;box-shadow:-1px 1px 0 var(--k-rim)}
.j3up-r{left:calc(100% + 18px);transform:translateY(-50%)}.j3up-r::before{left:-7px;top:calc(50% - 7px)}
.j3up-l{right:calc(100% + 18px);transform:translateY(-50%)}.j3up-l::before{right:-7px;top:calc(50% - 7px);box-shadow:1px -1px 0 var(--k-rim)}
.j3up-b{top:calc(100% + 18px);left:50%;transform:translateX(-50%);text-align:center}.j3up-b::before{top:-7px;left:calc(50% - 7px);box-shadow:-1px -1px 0 var(--k-rim)}
.app[data-jlook=new] .node.j3n.k-ticket .j3up small{color:#B7770A}
@keyframes j3upIn{from{opacity:0;scale:.9}}
/* the slim Start bar (only while the current step is off screen) */
.j3next{left:14px;right:14px;bottom:100px;gap:10px;padding:7px 7px 7px 9px;border-radius:20px;transition:opacity .2s,transform .25s var(--ease)}
.j3next .j3w{width:38px;height:38px;filter:drop-shadow(0 3px 0 var(--kd))}
.j3next .j3t svg{width:50%;height:50%}
.j3x small{font-size:10.5px}.j3x b{font-size:15px}
.j3next .b3{min-width:78px;height:40px;padding:0 14px;font-size:15px}
.j3next.hide{opacity:0;transform:translateY(16px);pointer-events:none}
/* a shorter header */
.app[data-tab=path] .road.j3r{gap:12px;padding:9px 14px 9px 9px;border-radius:22px}
.j3r-st{width:58px;height:46px;border-radius:13px}
.j3r-m b{font-size:18px}
.j3r-p{margin-top:5px}.j3r-p .rd-bar{height:8px}
.j3r-tx{flex-direction:row;gap:4px;padding-left:10px}
.j3r-tx i{width:26px;height:20px}.j3r-tx i svg{width:15px;height:15px}
.j3up-b{top:calc(100% + 12px);max-width:210px;padding:5px 12px 6px;border-radius:99px;background:var(--kb);box-shadow:0 3px 0 var(--kd)}
.j3up-b::before{display:none}
.j3up-b b{margin:0;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app[data-jlook=new] .node.j3n.k-ticket .j3up-b b{color:#5A3A00}
/* ---------- 3D tennis-ball step icons (1 Nov, Joshua's art): the picture already has its own shading, so no flat lip ---------- */
.j3w.ball{filter:drop-shadow(0 10px 10px rgba(27,34,54,.22))}
.j3img{width:112%;height:112%;max-width:none;object-fit:contain;pointer-events:none}
/* done tick (1 Nov, Joshua: "should be top right of ball"): its middle sits on the ball's top-right edge, not the tile corner; designer › Done tick sets the --tk* vars */
.j3ok{position:absolute;right:var(--tkx,24%);top:var(--tky,24%);transform:translate(50%,-50%);z-index:2;width:var(--tks,28px);height:var(--tks,28px);border-radius:var(--tkr,50%);display:grid;place-items:center;background:var(--k-purple);color:var(--tki,#fff);box-shadow:0 0 0 var(--tkw,3px) var(--tkc,#fff),var(--tksh,0 3px 6px rgba(27,34,54,.2))}
.j3ok svg{width:var(--tkg,54%);height:var(--tkg,54%)}
.app[data-tab=path][data-jlook=new] .node.j3n.lock .j3w.ball{filter:saturate(.25) brightness(1.1) opacity(.55) drop-shadow(0 6px 6px rgba(27,34,54,.1))}
.app[data-tab=path][data-jlook=new] .node.j3n.done .j3w.ball .j3img{filter:saturate(.8)}
.j3next .j3w.ball,.legend.j3leg i.j3w.ball{filter:drop-shadow(0 2px 3px rgba(27,34,54,.2))}
.app[data-tab=path][data-jlook=new] .node.j3n .j3ok svg{position:static;top:0;width:var(--tkg,54%);height:var(--tkg,54%);color:var(--tki,#fff)!important;transform:none;filter:none;animation:none}
/* ---------- Home road card (1 Nov): a bar for every step to the Slam, then the next step ---------- */
.h4-bar{display:flex;align-items:center;gap:3px;width:100%;margin-top:12px}
.h4-bar i{flex:1;height:9px;border-radius:5px;background:#E6E8F0}
.h4-bar i.d{background:var(--k-purple)}
.h4-bar i.c{background:#E2D6FF;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--k-purple);animation:h4cur 1.6s ease-in-out infinite}
@keyframes h4cur{50%{background:#C7B0FF}}
.h4-bar b{flex:none;width:26px;height:26px;margin-left:4px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#FFD54A,#F5A400);box-shadow:0 2px 0 #C98300}
.h4-bar b svg{width:15px;height:15px;color:#fff}
.h4-nx{flex:1 0 100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding:9px 12px 9px 9px;border-radius:18px;background:#F6F3FF;box-shadow:0 0 0 1.5px #ECE6FB inset;text-align:left}
.h4-nx img,.h4-nx>i{flex:none;width:44px;height:44px;filter:drop-shadow(0 3px 4px rgba(27,34,54,.18))}
.h4-nx>i{border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#FFD54A,#F5A400);rotate:-8deg}
.h4-nx>i svg{width:24px;height:24px;color:#fff}
.h4-nx>span{min-width:0}
.h4-nx small{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--k-purple)}
.h4-nx b{display:block;margin-top:1px;font-size:17px;line-height:1.2;font-weight:900;letter-spacing:-.02em;color:var(--k-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h4-nx+.h4-go{margin-top:12px}
/* top bar chips: both a bold number with a small word under it */
.bar .pill.hp>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.bar .pill.hp b{font-size:18px!important;font-weight:900}
.bar .pill.hp small{display:block;font-size:10.5px;font-weight:800;color:#64748B!important;opacity:1;margin-top:2px}
.bar .pill.st.hp b{color:#E89A00!important}
.h4-bar{gap:2px}
.h4-bar i{height:12px;border-radius:2px}
.h4-bar i:first-child{border-radius:6px 2px 2px 6px}
.h4-bar i:nth-last-child(2){border-radius:2px 6px 6px 2px}
.h4-bar i.c{box-shadow:none;background:#D9C8FF}
/* ---------- game intro (1 Nov): its own screen after Play, the pop-up stays small ---------- */
.flow.gi{z-index:60}
.gi .ki-pill{background:var(--gc);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--gc) 70%,transparent)}
.gi .ki-hero img{height:100%}
.gi-ic{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:150px;height:150px;border-radius:40px;display:grid;place-items:center;background:var(--gc);color:#fff;box-shadow:0 8px 0 color-mix(in srgb,var(--gc) 70%,#000)}
.gi-ic svg{width:84px;height:84px}
.gi-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:14px}
.gi-chips span{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:12px;border-radius:20px;background:#fff;text-align:left;box-shadow:var(--k-card-shadow);animation:kiUp .45s var(--d,.3s) var(--ease) both}
.gi-chips i{grid-row:span 2;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--k-purple-soft);color:var(--k-purple)}
.gi-chips span:last-child i{background:#FFF4D6;color:#E89A00}
.gi-chips i svg{width:22px;height:22px}
.gi-chips small{font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#8A90AD;line-height:1.2}
.gi-chips b{font-size:15px;line-height:1.2;font-weight:900;color:var(--k-ink)}
.gi-chips:has(span:only-child){grid-template-columns:1fr}
.gi .ki-hero{width:100%}
.gi .ki-hero img{height:auto;max-height:100%;max-width:100%;object-fit:contain}
/* ---------- one card on the Journey (1 Nov): the top banner went; this card is always there ---------- */
.j3next{left:12px;right:12px;bottom:96px;display:block;padding:10px 10px 10px 12px;border-radius:24px;opacity:1!important;transform:none!important}
.j3n-top{display:flex;align-items:center;gap:8px;padding:0 2px 9px;margin-bottom:9px;border-bottom:1.5px solid var(--k-rim)}
.j3n-top img{flex:none;width:30px;height:24px;object-fit:cover;border-radius:7px}
.j3n-top b{flex:none;font-size:14px;font-weight:900;letter-spacing:-.01em;color:var(--k-ink)}
.j3n-bar{flex:1;min-width:40px;display:flex;gap:2px}
.j3n-bar i{flex:1;height:8px;border-radius:2px;background:#E6E8F0}
.j3n-bar i:first-child{border-radius:5px 2px 2px 5px}.j3n-bar i:last-child{border-radius:2px 5px 5px 2px}
.j3n-bar i.d{background:var(--k-purple)}.j3n-bar i.c{background:#D9C8FF}
.j3n-top em{flex:none;font-style:normal;font-size:12px;font-weight:900;color:var(--k-purple)}
.j3n-bk{flex:none;width:30px;height:30px;border:0;border-radius:10px;display:grid;place-items:center;background:var(--k-purple-soft);color:var(--k-purple);cursor:pointer}
.j3n-bk svg{width:16px;height:16px}
.j3n-row{display:flex;align-items:center;gap:10px}
.j3n-row .j3x{flex:1;min-width:0}
.j3next .j3w{width:44px;height:44px}
/* the map: a small START bubble over the step you're on */
.j3go{position:absolute;z-index:4;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%);padding:7px 14px;border-radius:12px;background:#fff;color:var(--k-purple);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 0 1.5px var(--k-rim),0 3px 0 #E3DFF0;animation:j3goBob 1.9s ease-in-out infinite}
.j3go::after{content:"";position:absolute;left:calc(50% - 6px);bottom:-6px;width:12px;height:12px;background:#fff;rotate:45deg;box-shadow:1.5px 1.5px 0 var(--k-rim)}
@keyframes j3goBob{50%{transform:translateX(-50%) translateY(-4px)}}
/* locked steps: light and clean, not muddy */
.app[data-tab=path][data-jlook=new] .node.j3n.lock .j3w.ball{filter:grayscale(1) brightness(1.3) contrast(.7) opacity(.55)!important}
.app[data-tab=path][data-jlook=new] .node.j3n.lock.k-ticket .j3w{filter:grayscale(1) brightness(1.2) opacity(.45)!important}
/* Journey has no top bar (1 Nov, Joshua: the name, streak and stars aren't needed there); the map starts under the phone's status bar */
.app[data-tab=path][data-jlook=new] .bar{display:none}
/* status-bar room on the Journey sits in .bar-sp, which kids.js barGlass paints with the first map, so there is no white strip (2 Nov) */
.app[data-tab=path][data-jlook=new] .scroll{padding-top:0}
.app[data-tab=path][data-jlook=new] .bar-sp{height:calc(max(env(safe-area-inset-top),34px) + 1px);margin-bottom:-1px}   /* tucks 1px under the map: no hairline where they meet */
/* inside the designer (editor.html): no test bar */
.mpedit .testbar{display:none!important}
/* ---------- Word Rally, redesigned (1 Nov): a real little court, a ball can, the clue as a card, keys right under the word ---------- */
.flow.gamef:has(.wr2){background:#EEF2FE url(assets/bg-lavender-soft.webp) center top/cover no-repeat}
.wr2{padding:4px 14px calc(12px + env(safe-area-inset-bottom))}
.wr-hud{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wr-pill{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 8px;border-radius:99px;background:#fff;box-shadow:var(--k-card-shadow);font-size:15px;font-weight:900;color:var(--k-ink2)}
.wr-pill i{width:24px;height:24px;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,.08)}
.wr-pill b{font-size:19px;color:var(--k-ink)}
.wr-can{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 12px;border-radius:99px;background:#fff;box-shadow:var(--k-card-shadow)}
.wr-can small{font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
.wr-can>span{display:flex;gap:3px;padding:4px 6px;border-radius:99px;background:#F1F2F8}
.wr2 .wr-can 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,.08);transition:transform .3s}
.wr2 .wr-can i.gone{background:none;box-shadow:inset 0 0 0 2px #D6DAE6;transform:scale(.8)}
.wr2 .wr-court{position:relative;height:150px;border-radius:24px;overflow:hidden;background:var(--out);box-shadow:0 0 0 4px #fff,0 8px 0 4px #E3DFF0,0 18px 28px -16px rgba(27,34,54,.35)}
.wr-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wr-lab{position:absolute;top:22px;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.92);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--k-ink)}
.wr-lab.l{left:14%}.wr-lab.r{left:56%}
.wr2 .wr-outt{position:absolute;right:0;width:10.5%;top:50%;transform:translateY(-50%) rotate(90deg);text-align:center;font-size:12px;font-weight:900;letter-spacing:.14em;color:#fff;bottom:auto}
.wr-deep{position:absolute;right:13%;bottom:16px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.wr2 .wr-ball{position:absolute;left:17%;top:62%;z-index:3;width:22px;height:22px;margin:-11px 0 0 -11px;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-sh{position:absolute;left:17%;top:72%;z-index:2;width:22px;height:8px;margin:-4px 0 0 -11px;border-radius:50%;background:rgba(0,0,0,.35);opacity:.5}
.wr2 .wr-mark{position:absolute;z-index:1;width:16px;height:7px;margin:-3px 0 0 -8px;border-radius:50%;background:rgba(255,255,255,.75);animation:wrMark .7s ease-out both;bottom:auto}
.wr2 .wr-mark.deep{background:none;width:16px;height:16px;margin:-8px 0 0 -8px;animation:wrPop .3s cubic-bezier(.3,1.6,.5,1) both}
.wr2 .wr-mark.deep::before,.wr2 .wr-mark.deep::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:4px;margin:-2px 0 0 -8px;border-radius:2px;background:#FF4D55;box-shadow:0 0 0 1.5px #fff;rotate:45deg}
.wr2 .wr-mark.deep::after{rotate:-45deg}
@keyframes wrMark{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
@keyframes wrPop{from{transform:scale(0)}}
.wr-court.shake{animation:wrShake .35s}
@keyframes wrShake{25%{translate:-5px 0}50%{translate:4px 0}75%{translate:-2px 0}}
.wr-mid{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:10px 0}
.wr-clue{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.wr-clue span{padding:7px 14px;border-radius:99px;background:var(--k-purple-grad);color:#fff;font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 4px 10px -4px rgba(124,58,237,.6)}
.wr-clue em{font-style:normal;font-size:14px;font-weight:900;color:var(--k-muted)}
.wr2 .wr-word{display:flex;justify-content:center;gap:6px;margin:0}
.wr2 .wr-word span{flex:none;width:min(46px,calc((100% - (var(--n) - 1) * 6px) / var(--n)));height:56px;border-radius:14px;background:#fff;box-shadow:0 0 0 1.5px var(--k-rim) inset,0 4px 0 var(--k-lip);display:grid;place-items:center;font-size:28px;font-weight:900;color:var(--k-ink);position:relative}
.wr2 .wr-word span:empty::after{content:"";position:absolute;left:24%;right:24%;bottom:12px;height:3px;border-radius:2px;background:#DCD6EE}
.wr2 .wr-word span.on{color:var(--k-purple);animation:none}
.wr2 .wr-word span.new{background:var(--k-purple-soft);box-shadow:0 0 0 2px var(--k-purple-line) inset,0 4px 0 var(--k-purple-line);animation:wrPop .35s cubic-bezier(.3,1.6,.5,1) both}
.wr2 .wr-word span.rv{color:var(--k-no);background:var(--k-no-soft);box-shadow:0 0 0 1.5px var(--k-no-line) inset,0 4px 0 var(--k-no-line)}
.wr2 .wr-word i.sp{flex:none;width:12px}
.wr2 .wr-help{margin:14px 0 0;min-height:22px;text-align:center;font-size:15px;font-weight:800;color:var(--k-ink2)}
.wr2 .wr-help b{color:var(--k-ink);font-weight:900}
.wr2 .wr-kb{margin-top:0;gap:7px;padding:10px 6px 4px;border-radius:24px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1.5px #fff inset}
.wr2 .wr-kb div{gap:5px}
.wr2 .wr-kb button{max-width:36px;height:50px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1.5px var(--k-rim) inset,0 4px 0 var(--k-lip);font-size:19px;font-weight:900;color:var(--k-ink);transition:transform .08s}
.wr2 .wr-kb button:active{transform:translateY(3px);box-shadow:0 0 0 1.5px var(--k-rim) inset,0 1px 0 var(--k-lip)}
.wr2 .wr-kb button.ok{background:linear-gradient(180deg,var(--k-go-top),var(--k-go-bot));color:#fff;box-shadow:0 0 0 1px var(--k-go-rim) inset,0 4px 0 var(--k-go-lip)}
.wr2 .wr-kb button.no{background:#EEF0F6;color:#B8BFCE;box-shadow:none;text-decoration:line-through;text-decoration-color:#FF7A80;text-decoration-thickness:2.5px}
@media (min-height:800px){.wr2 .wr-court{height:170px}.wr2 .wr-word span{height:62px;font-size:31px}}

/* ---------- 1 Nov: "Our ball" (drawn in code, design.js MPD.ball) ---------- */
.mpball{position:relative;display:grid;place-items:center;width:100%;height:100%}
.mpball>svg{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;margin:0!important;overflow:visible;transform:none!important;filter:none!important;animation:none!important;color:inherit!important}
.mpball .mpg{position:relative;display:grid;place-items:center;width:var(--bgs);height:var(--bgs);margin:0;font-style:normal;color:var(--bg);filter:drop-shadow(0 2px 0 color-mix(in srgb,var(--bdk) 70%,transparent)) drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.mpball .mpg.flat{filter:none}
.mpball .mpg svg{position:static!important;width:100%!important;height:100%!important;color:inherit!important;filter:none!important;transform:none!important;animation:none!important;margin:0!important}
.h4-nx .mpball{flex:none;width:44px;height:44px}
.app[data-tab=path][data-jlook=new] .node.j3n.lock .j3w.ball .mpball{filter:grayscale(1) brightness(1.25) contrast(.75)}

/* ---------- 1 Nov: the Journey runs edge to edge (no card, no 10px sides). Designer › Journey map › "Map in a card" brings the card back ---------- */
html:not(.mapcard) .app[data-tab=path][data-jlook=new] .path{margin:0;border-radius:0;box-shadow:none!important}
html:not(.mapcard) .app[data-tab=path][data-jlook=new] .j3court{border-radius:0}
:where(html:not(.mapcard)) .app[data-tab=path][data-jlook=new] .chap + .chap{margin-top:0;padding-top:0!important;border-top:0}   /* "Gap between Slams" in the designer still wins */
html:not(.mapcard) .app[data-tab=path][data-jlook=new] .chap:not(:last-child){padding-bottom:0!important}
html:not(.mapcard) .app[data-tab=path][data-jlook=new] .chap:not(:last-child) > div[style*="height:178px"]{display:none}   /* the room for the bottom card, only after the last Slam */
.j3w>.mpball{width:114%;height:114%;flex:none}   /* same size as the painted balls (their picture has a margin) */
.app[data-tab=path][data-jlook=new] .trail path.rbm{stroke:#000!important;stroke-width:0;stroke-dasharray:none!important;opacity:1!important}
.jc-lib .jc-up{display:grid;place-items:center;align-content:center;gap:6px;background:#fff;box-shadow:0 0 0 2px var(--k-purple-soft) inset;border:2px dashed color-mix(in srgb,var(--k-purple) 45%,#fff);color:var(--k-purple);font:800 13px/1.15 inherit;font-family:inherit}
.jc-lib .jc-up svg{width:30px;height:30px}
/* Arrange › Shadow: each character's own shadow (sliders + drag) */
.arr-r button.del{flex:0 0 44px}
.arr-r button.del svg{width:18px;height:18px}
.arr-sl{display:flex;align-items:center;gap:10px;padding:0 4px;font-size:13px;font-weight:900;color:var(--k-ink2)}
.arr-sl span{flex:0 0 52px}
.arr-sl input{flex:1;min-width:0;accent-color:var(--k-purple);height:24px}
.app[data-arr]:has(.arr-bar.sh) .jc.sel{outline-color:transparent;box-shadow:none;cursor:move}
.app[data-arr]:has(.arr-bar.sh) .jc.sel .ch-sh{outline:2px dashed var(--k-purple);outline-offset:3px}
.app[data-arr]:has(.arr-bar.sh) .jc.sel .ch-sh[style*="display:none"]{display:block!important;opacity:.35}
/* ---------- 2 Nov: iOS-style top bar. It floats over the page; scrolled down (.bar.min) it turns to frosted glass, shrinks, and the name goes white ---------- */
.app .bar{position:absolute!important;top:0;left:0;right:0;z-index:20;transition:padding .28s ease}
.app .bar::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .28s ease;transform:translateZ(0);will-change:opacity;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 1px 0 rgba(27,34,54,.06)}
/* Journey: clear glass that takes the map's colour (a touch darker so the white name reads) */
.app[data-tab=path] .bar::before{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(22px) saturate(180%) brightness(.9);backdrop-filter:blur(22px) saturate(180%) brightness(.9);box-shadow:0 1px 0 rgba(255,255,255,.18)}
.bar-sp{height:var(--barH,0px);flex:none}
.wh,.rd-pin{top:var(--barH,0px)!important}
.bar .me,.bar .me-n,.bar .pill.hp,.bar .pill.hp img,.bar .pill.hp b,.bar .pill.hp small{transition:width .28s ease,height .28s ease,font-size .28s ease,color .28s ease,background-color .28s ease,box-shadow .28s ease,padding .28s ease,margin .28s ease,opacity .2s ease}
.bar.now,.bar.now::before,.bar.now *{transition:none!important}
#app .bar.min{background:transparent!important;box-shadow:none!important;padding-top:max(44px,calc(env(safe-area-inset-top) + 2px));padding-bottom:7px}
#app .bar.min::before{opacity:1}
#app .bar.min .me{width:32px;height:32px}
#app .bar.min .me-n{font-size:16.5px}
#app[data-tab=path] .bar.min .me-n{color:#fff!important;text-shadow:0 1px 8px rgba(10,14,40,.25)}
#app .bar.min .pill.hp{height:32px;padding:0 10px 0 8px;border-radius:12px}
#app[data-tab=path] .bar.min .pill.hp{background:rgba(255,255,255,.16)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important}
#app .bar.min .pill.hp img{height:18px}
#app .bar.min .pill.hp b,#app .bar.min .pill.hp>span{font-size:15px!important}
#app[data-tab=path] .bar.min .pill.hp b,#app[data-tab=path] .bar.min .pill.hp>span{color:#fff!important}
#app .bar.min .pill.hp small{font-size:0!important;opacity:0;margin:0}
/* 2 Nov, Joshua: "the top bar could minimise like this" — scrolled down, the glass is a floating capsule round the name + stats, not a band to the top edge */
.app .bar::before{transition:opacity .28s ease,inset .28s ease,border-radius .28s ease,box-shadow .28s ease}
#app .bar.min{padding-left:18px;padding-right:18px}
#app .bar.min::before{inset:calc(max(44px,calc(env(safe-area-inset-top) + 2px)) - 6px) 10px 1px;border-radius:22px;box-shadow:0 6px 18px rgba(20,24,60,.12),inset 0 0 0 1px rgba(255,255,255,.5)}
#app[data-tab=path] .bar.min::before{box-shadow:0 6px 18px rgba(10,14,40,.16),inset 0 0 0 1px rgba(255,255,255,.26)}
/* 2 Nov, Joshua: "on the actual lesson lets remove the top bar" — lessons, games and check-ins (.flow) cover the whole screen; the floating bar (z 20) sat over them */
#app:has(>.flow) .bar{visibility:hidden}
/* 2 Nov, Joshua (after Duolingo): "remove the person" — no top bar on the Journey ; streak + stars moved onto the one card at the bottom */
#app[data-tab=path] .bar{display:none!important}
.j3n-top{padding-bottom:0;margin-bottom:8px;border-bottom:0}
.j3n-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j3n-st{flex:none;display:flex;align-items:center;gap:4px;height:30px;padding:0 9px 0 7px;border:0;border-radius:10px;background:#F4F5FA;font:inherit;font-size:14px;font-weight:900;cursor:pointer}
.j3n-st img{width:17px;height:17px;object-fit:contain}
.j3n-st.fl{color:#EA580C}.j3n-st.st{color:#E89A00}
.j3n-pr{display:flex;align-items:center;gap:8px;padding:0 2px 10px;margin-bottom:10px;border-bottom:1.5px solid var(--k-rim)}
.j3n-pr em{flex:none;font-style:normal;font-size:12px;font-weight:900;color:var(--k-purple)}
/* ---------- tournaments on the road to each Slam (2 Nov): the name under the step, the tournament screen, the Locker shelf ---------- */
.j3ev{position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:4px;white-space:nowrap;padding:3px 9px 3px 10px;border-radius:999px;background:#fff;color:var(--k-ink);font-size:12px;font-weight:900;box-shadow:0 2px 6px rgba(27,34,54,.14)}
.j3ev b{font-size:10px;font-weight:900;color:#fff;background:var(--k-purple);border-radius:6px;padding:1px 5px}
.j3ev svg{width:13px;height:13px;color:#E89A00}
.j3ev.out{opacity:.75}
.node.j3n.locked .j3ev{opacity:.85}
.ev-hero{background:linear-gradient(160deg,var(--sc),var(--sd));display:grid;place-items:center}
.ev-hero .ev-st{position:relative;z-index:0;width:72%;max-width:300px;margin-top:10px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.25))}
.ev-cup{display:grid;place-items:center;border-radius:22px;background:linear-gradient(160deg,#FFE27A,#F5B700);color:#fff;box-shadow:0 4px 0 #C98F00}
.pz-t.ev-cup svg{width:58%;height:58%}
.cer-t.ev-cup{width:150px;height:150px;border-radius:40px}.cer-t.ev-cup svg{width:60%;height:60%}
.evshelf{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.evc{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--k-rim) inset}
.evc i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(160deg,#FFE27A,#F5B700);color:#fff}
.evc i svg{width:20px;height:20px}
.evc b{font-size:13px;font-weight:900}.evc small{font-size:10.5px;font-weight:900;color:#8A90AD}
.evc em{position:absolute;top:6px;right:8px;font-style:normal;font-size:11px;font-weight:900;color:#E89A00}
.evc.off i{background:#E6E8F0;color:#B6BBCB}.evc.off b{color:#8A90AD}
/* the champion screens (Grand Slam + tournaments) keep their Slam-colour glow: the lavender .flow.slamf background above was hiding it, white text on light */
.flow.slamf.cerf{background:radial-gradient(80% 60% at 50% 30%,var(--sc),var(--sd))}
.flow.slamf.cerf .b3.slb{background:#fff!important;color:var(--sd)!important;box-shadow:0 5px 0 rgba(0,0,0,.25)!important}

/* ===== 2 Nov: court challenges sit with the characters beside the road, ticket steps say so, "Morning, Danny" ===== */
.path .nrow{pointer-events:none}
.path .nrow>*{pointer-events:auto}
.jc-b{position:absolute;inset:0;pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app[data-arr] .jc-b{display:none}
.jc-bub{position:absolute;left:50%;top:4px;transform:translate(-50%,-100%);display:flex;align-items:center;gap:5px;white-space:nowrap;padding:6px 12px 6px 9px;border-radius:999px;background:#fff;color:var(--k-purple);font:900 13px/1 var(--k-font,inherit);box-shadow:0 3px 0 rgba(27,34,54,.08),0 6px 14px rgba(27,34,54,.16);animation:jcBob 2.4s ease-in-out infinite}
.jc-bub::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.jc-bub svg{width:15px;height:15px}
@keyframes jcBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.jc:active img{scale:.97}
.jc:active img.fl{scale:-.97 .97}
.j3ev.tk{background:#FFD54A;color:#5A3B00;gap:5px;padding:3px 10px 3px 8px}
#app .node .j3ev.tk svg{width:14px;height:14px;color:#8A5A00;filter:none}
#app:not([data-tab=path]) .bar .me-n{color:var(--k-ink)!important;text-shadow:none!important}