/* MatchPoint "new look" (3 Nov, Joshua: "Apple premium style, but also fun, and consistent through the whole app").
   Only on with ?look=new for now (compare.html shows it next to today's look). The rules:
   1. Apple's grey page (#F2F2F7) with white cards that lift off it (soft shadow + hairline edge), so white never melts into the background
   2. one type scale: big title 34 · section 22 · question 28 · body 17 · labels 12–13
   3. one corner size for cards (22) and buttons (pill), one spacing step (16)
   4. colour comes from the content: each lesson type's colour tints the top of the screen, the label pill and the answer numbers
   5. the fun stays: 3D pictures, characters, bouncy taps and confetti are untouched */
html.pm{--pm-bg:#F2F2F7;--pm-card:#fff;--pm-ink:#0B1021;--pm-ink2:#6B7280;--pm-line:rgba(60,60,67,.12);--pm-purple:#7C3AED;
  --pm-sh:0 1px 2px rgba(16,24,40,.05),0 10px 24px -8px rgba(16,24,40,.12);--pm-sh-lg:0 2px 6px rgba(16,24,40,.06),0 18px 36px -12px rgba(16,24,40,.24)}

/* ---------- page + tab bar ---------- */
html.pm .phone,html.pm #app:not([data-tab=path]){background:var(--pm-bg) !important}
html.pm .tabs{background:#fff;border-top:.5px solid rgba(60,60,67,.2);box-shadow:0 -8px 24px -16px rgba(16,24,40,.18)}

/* ---------- Home ---------- */
html.pm .td-h{font-size:34px;font-weight:800;letter-spacing:-.03em}
html.pm .td-d{color:var(--pm-ink2);letter-spacing:.06em}
html.pm .h6 .h5-h,html.pm .h5-h{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--pm-ink)}
html.pm .h4-road,html.pm .myf,html.pm .h4-games{background:#fff;box-shadow:var(--pm-sh),0 0 0 .5px var(--pm-line)}
html.pm .tod,html.pm .dyk{box-shadow:var(--pm-sh-lg)}
html.pm .h4-games>img{background:#F3EEFF;border-radius:16px;padding:6px}

/* ---------- lesson screens ---------- */
html.pm .flow{background:radial-gradient(130% 100% at 50% 0,color-mix(in srgb,var(--kc,#7C3AED) 20%,transparent) 0,transparent 70%) top/100% 300px no-repeat,var(--pm-bg) !important}
html.pm .fh .x{background:#fff;box-shadow:var(--pm-sh),0 0 0 .5px var(--pm-line)}
html.pm .pb{background:rgba(120,120,128,.16);height:10px}
html.pm .pb i{background:linear-gradient(90deg,color-mix(in srgb,var(--kc,#7C3AED) 75%,#fff),var(--kc,#7C3AED))}
html.pm .fq .kick{display:inline-flex;padding:6px 12px;border-radius:99px;background:#fff;color:var(--kc,#7C3AED) !important;font-size:12px;letter-spacing:.09em;box-shadow:0 0 0 .5px var(--pm-line)}
html.pm .fq h2{font-size:28px;font-weight:800;letter-spacing:-.025em;color:var(--pm-ink)}

/* answers: white cards that lift off the grey; the number sits in a chip of the lesson's colour */
html.pm .opts{gap:12px}
html.pm .opts button,html.pm .tf button{background:#fff;border:0;border-radius:20px;box-shadow:var(--pm-sh),0 0 0 .5px var(--pm-line);color:var(--pm-ink)}
html.pm .opts button{min-height:66px;padding:12px 16px 12px 12px}
html.pm .opts button em{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:17px;font-weight:900;
  background:color-mix(in srgb,var(--kc,#7C3AED) 14%,#fff);color:var(--kc,#7C3AED)}
html.pm .opts button.on,html.pm .tf button.on{background:#F6F1FF;color:#4C1D95;box-shadow:0 0 0 2.5px var(--pm-purple) inset,0 12px 24px -12px rgba(124,58,237,.55)}
html.pm .opts button.on em{background:var(--pm-purple);color:#fff}
html.pm .tf button{height:180px}
html.pm .tf button span{width:68px;height:68px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12),0 8px 18px -8px rgba(16,24,40,.35)}

/* Check: always the purple pill, faded until you pick (it used to go grey and vanish into the page) */
html.pm .ffoot .b3[data-check]{background:linear-gradient(180deg,#8B5CF6,#7C3AED);color:#fff;box-shadow:0 12px 24px -12px rgba(124,58,237,.8)}
html.pm .ffoot .b3[data-check][disabled]{opacity:.38;box-shadow:none}

/* lesson start + the tip */
html.pm .ki-card,html.pm .tcard{box-shadow:var(--pm-sh-lg),0 0 0 .5px var(--pm-line)}
html.pm .ki-pill{background:color-mix(in srgb,var(--kc,#7C3AED) 14%,#fff);color:var(--kc,#7C3AED)}
html.pm .tsteps li{background:#fff;box-shadow:var(--pm-sh),0 0 0 .5px var(--pm-line)}
html.pm .flow .tsteps li i{background:var(--kc,#7C3AED) !important;color:#fff !important}

/* ---------- My Tennis, Trophies, Profile (3 Nov: the new look on every tab) ---------- */
html.pm .mt-why,html.pm .rf,html.pm .hw,html.pm .prog2,html.pm .rv,html.pm .evc,html.pm .stk,html.pm .grown,html.pm .mycoach,
html.pm .mt .b3.white,html.pm .hw .b3.white,html.pm .rv{background:#fff;box-shadow:var(--pm-sh),0 0 0 .5px var(--pm-line) !important}
html.pm .evc.off,html.pm .stk.off{box-shadow:0 0 0 .5px var(--pm-line) !important;background:rgba(255,255,255,.7)}
html.pm .mt-h,html.pm .cab h2,html.pm .stk-h h2{font-size:28px;letter-spacing:-.025em}

/* =====================================================================================================
   ROUND 2 (?look=r2, html.pm2, on top of the new look), from Apple's Human Interface Guidelines (Buttons, Color, Layout, Typography):
   A. "Avoid using the same color to mean different things": purple = something you tap or pick, green = right / done,
      red = wrong, the lesson's own colour = which kind of lesson it is. Nothing else gets those colours.
   B. "Keep the number of prominent buttons to one or two per view": each screen has one filled button; the rest are tinted.
   C. "Prefer a monochromatic appearance for tab bars" in colourful apps: the 3D icons carry the colour, the labels are ink/grey.
   D. Don't rely on colour alone: after Check, the right answer gets a green tick badge and a wrong pick a red cross.
   E. One text colour for secondary words (Apple's secondary label grey) instead of four blue-greys.
   F. "A hit region of at least 44x44 pt" and "always include a press state".
   G. Group with space: 32 above a section heading, 12 under it; inner corners follow the card's corners (concentric).
   ===================================================================================================== */
html.pm2{--pm-ink2:#6E6E73;--pm-ok:#22A55A;--pm-no:#E5484D}

/* A + B: Home's one main action is the purple Continue; Play and Read more step back to tinted buttons */
html.pm2 .h5 .h4-go,html.pm2 .h4-go{background:linear-gradient(180deg,#8B5CF6,#7C3AED) !important;box-shadow:0 10px 22px -12px rgba(124,58,237,.85) !important;color:#fff !important}
html.pm2 .h4-gp{background:#F1EAFF;color:#6D28D9}
html.pm2 .h4-games small{color:#6D28D9}
html.pm2 .h4-tag.g{background:#F1EAFF;color:#6D28D9}

/* C: tab bar labels in ink (on) and grey (off) */
html.pm2 .tabs button .tl{color:#8E8E93}
html.pm2 .tabs button.on .tl,html.pm2 .tabs button.on[data-tab] .tl{color:var(--pm-ink)}

/* D: answers mark themselves after Check */
html.pm2 .opts button,html.pm2 .tf button{position:relative}
html.pm2 .opts button.ok,html.pm2 .tf button.ok{background:#ECFBF2 !important;color:#14532D !important;box-shadow:0 0 0 2.5px var(--pm-ok) inset !important}
html.pm2 .opts button.no,html.pm2 .tf button.no{background:#FFF0F0 !important;color:#7F1D1D !important;box-shadow:0 0 0 2.5px var(--pm-no) inset !important}
html.pm2 .opts button.ok em{background:var(--pm-ok) !important;color:#fff !important}
html.pm2 .opts button.no em{background:var(--pm-no) !important;color:#fff !important}
html.pm2 .opts button.ok::after,html.pm2 .opts button.no::after,html.pm2 .tf button.ok::after,html.pm2 .tf button.no::after{position:absolute;right:14px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;line-height:26px;text-align:center}
html.pm2 .opts button.ok::after,html.pm2 .tf button.ok::after{content:"✓";background:var(--pm-ok)}
html.pm2 .opts button.no::after,html.pm2 .tf button.no::after{content:"✕";background:var(--pm-no)}
html.pm2 .tf button.ok::after,html.pm2 .tf button.no::after{top:14px;right:14px;margin-top:0}

/* E: one secondary grey */
html.pm2 .td-d,html.pm2 .h6-link,html.pm2 .h4-games em,html.pm2 .fq .fh-l,html.pm2 .ki-card p,html.pm2 .tsay small,html.pm2 .pf-stats small,html.pm2 .cab p,html.pm2 .stk-h p,html.pm2 .mt-s{color:var(--pm-ink2) !important}
html.pm2 .opts button,html.pm2 .tf button{font-weight:700}

/* F: 44pt tap targets */
html.pm2 .myf-ed{width:44px;height:44px;border-radius:14px;margin:-8px -8px 0 0}
html.pm2 .h6-link{min-height:44px}
html.pm2 .tod-rm{height:44px;padding:0 16px 0 18px}
html.pm2 .myf-row{height:48px}

/* G: rhythm + concentric corners */
html.pm2 .h6 .h5-h,html.pm2 .h5-h{margin:32px 2px 12px}
html.pm2 .h6 .h6-hr{margin:32px 2px 12px}
html.pm2 .myf{padding:16px}html.pm2 .myf-row{border-radius:12px}
html.pm2 .h4-road .h4-st,html.pm2 .h4-road .h6-ph{border-radius:14px}
html.pm2 .opts{gap:12px}
html.pm2 .h6 .h6-hr .h5-h{margin:0}
/* A again: after an answer, Continue is the purple "tap" button; the sheet's tint already says right (green) or not quite (red) */
html.pm2 .fban .b3{background:linear-gradient(180deg,#8B5CF6,#7C3AED) !important;box-shadow:0 12px 24px -12px rgba(124,58,237,.8) !important;color:#fff !important}
/* Tab icons: one size knob + a per-icon scale and nudge, so ?tune can adjust them live (3 Nov) */
.tabs button .ti img,.tabs button.on .ti img{width:var(--tab-ic,39px);height:var(--tab-ic,39px);translate:0 var(--ty,0px);scale:var(--ts,1)}
.tabs button .tl{font-size:var(--tab-l,9px)}
/* Joshua's tuned bar (3 Nov): icons only, no words (the buttons keep aria-labels), slimmer bar */
.tabs button .tl{display:none}.tabs button{justify-content:center}
html.tu-words .tabs button .tl{display:block}
.tabs button[data-tab=home] .ti img{--ts:var(--ts-home,.86);--ty:var(--ty-home,-3.5px)}
.tabs button[data-tab=path] .ti img{--ts:var(--ts-path,.99);--ty:var(--ty-path,-5px)}
.tabs button[data-tab=mine] .ti img{--ts:var(--ts-mine,1);--ty:var(--ty-mine,-2px)}
.tabs button[data-tab=rewards] .ti img{--ts:var(--ts-rewards,.94);--ty:var(--ty-rewards,-2px)}
.tabs button[data-tab=me] .ti img{--ts:var(--ts-me,.84);--ty:var(--ty-me,-1px)}
/* White tab bar height knobs for ?tune (3 Nov); defaults match the bar as it was (6 + 58 + 8) */
html .tabs{padding-top:var(--tab-pt,6px);padding-bottom:calc(var(--tab-pb,8px) + env(safe-area-inset-bottom))}
html .tabs button{height:var(--tab-h,48px)}

/* ---------- Continue Journey card options (?jcard=a|b|c, 3 Nov) ---------- */
.jx{position:relative;display:block;border-radius:22px;background:#fff;overflow:hidden;box-shadow:var(--pm-sh,0 1px 2px rgba(16,24,40,.06),0 8px 24px -10px rgba(16,24,40,.14)),0 0 0 .5px var(--pm-line,rgba(60,60,67,.12));text-align:left;color:var(--pm-ink,#0B1021)}
.jx small{display:block;font-size:13px;font-weight:800;color:#6E6E73;line-height:1.2}
.jx .jx-nt b{display:block;font-size:18px;font-weight:900;line-height:1.2;letter-spacing:-.01em;margin-top:2px}
.jx-go{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 20px;border:0;border-radius:99px;background:var(--k-purple,#7C3AED);color:#fff;font:inherit;font-size:16px;font-weight:900;box-shadow:0 6px 16px -6px rgba(124,58,237,.6)}
.jx-go svg{width:18px;height:18px}
.jx-go.wide{display:flex;width:100%;min-height:52px;font-size:18px;margin-top:16px}
.jx-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#F2F2F7;overflow:hidden}
.jx-ic img,.jx-ic svg{width:40px;height:40px;object-fit:contain}.jx-ic>i{display:grid;place-items:center;width:100%;height:100%;font-style:normal}.jx-ic>i svg{width:26px;height:26px}
.jx-next{display:flex;align-items:center;gap:12px}.jx-next .jx-nt{flex:1;min-width:0}
.jx-pill{flex:none;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.9);font-size:13px;font-weight:900;color:var(--pm-ink,#0B1021)}
.jx-ttl small{color:inherit;opacity:.85;font-weight:800}.jx-ttl b{display:block;font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.05}

/* a: destination poster */
.jx-a .jx-art{position:relative;height:168px;background-size:cover;background-position:center 30%;display:flex;align-items:flex-end;padding:16px 18px;color:#fff}
.jx-a .jx-art::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(8,20,48,.72) 100%)}
.jx-a .jx-ttl{position:relative;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.jx-a .jx-body{padding:14px 16px 16px}
.jx-bar{display:flex;align-items:center;gap:3px}.jx-bar i{flex:1;height:8px;border-radius:99px;background:#E5E5EA}.jx-bar i.d{background:#34C759}.jx-bar i.c{background:var(--k-purple,#7C3AED)}
.jx-bar b{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-left:4px;border-radius:50%;background:#FFF4D6;color:#E8A317}.jx-bar b svg{width:16px;height:16px}
.jx-a .jx-step{margin:8px 0 14px}

/* b: next step first */
.jx-b{padding:18px}
.jx-b-top{display:flex;align-items:center;gap:14px}
.jx-ic.big{width:72px;height:72px;border-radius:20px}.jx-ic.big img,.jx-ic.big>svg{width:60px;height:60px}.jx-ic.big>i svg{width:36px;height:36px}
.jx-b .jx-nt b{font-size:22px}
.jx-b-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:10px 12px 10px 10px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0)),var(--c1);color:#fff}
.jx-dest{display:flex;align-items:center;gap:10px;min-width:0}.jx-dest img{flex:none;width:64px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.jx-dest small{color:rgba(255,255,255,.85)}.jx-dest b{display:block;font-size:16px;font-weight:900}

/* c: mini path */
.jx-c{padding:16px 16px 14px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 60%),var(--c1);color:#fff}
.jx-c-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.jx-c .jx-ttl b{font-size:24px}
.jx-path{display:flex;align-items:center;margin:16px 0 14px;padding:0 2px}
.jx-path>i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);font-style:normal;font-size:13px;font-weight:900}
.jx-path>i:nth-of-type(even){translate:0 -8px}
.jx-path>i.d{background:#34C759;box-shadow:0 0 0 2.5px #fff}.jx-path>i.d svg{width:18px;height:18px}
.jx-path>i.me{width:48px;height:48px;background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(255,255,255,.35);overflow:hidden}
.jx-path>i.me img{width:100%;height:100%;object-fit:cover}.jx-path>i.me span{display:grid;place-items:center;width:100%;height:100%;color:#fff;font-size:20px}
.jx-path>s{flex:1;min-width:8px;height:0;border-top:3px dashed rgba(255,255,255,.55)}.jx-path>s.d{border-top-style:solid;border-color:#fff}
.jx-path>s.far{flex:1.4}
.jx-st{flex:none;width:96px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.jx-c .jx-next{padding:10px 10px 10px 10px;border-radius:16px;background:#fff;color:var(--pm-ink,#0B1021)}
/* painted scenes (landscape) sit lower than the old stadium art */
.jx-art.scene{background-position:center 58%}

/* d: whole card is the scene */
.jx-d{min-height:300px;background:#DDE8F5}
.jx-d>.jx-art{position:absolute;inset:0;background-size:cover;background-position:center 40%}
.jx-d-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:14px}
.jx-d-top .jx-pill{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.jx-d-top .jx-pill:first-child{font-size:15px;padding:8px 14px}
.jx-d-panel{position:absolute;left:12px;right:12px;bottom:12px;padding:10px;border-radius:18px;background:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.3)}

/* e: poster + mini path on white */
.jx-path.lt{margin:2px 0 14px}
.jx-path.lt>i{background:#F2F2F7;box-shadow:inset 0 0 0 2px #E5E5EA;color:#6E6E73}
.jx-path.lt>i.d{background:#34C759;color:#fff;box-shadow:none}
.jx-path.lt>i.me{background:#fff;box-shadow:0 0 0 3px var(--k-purple,#7C3AED),0 0 0 6px rgba(124,58,237,.18)}
.jx-path.lt>s{border-top-color:#D1D1D6}.jx-path.lt>s.d{border-top-color:#34C759}
.jx-tro{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#FFF4D6;color:#E8A317}.jx-tro svg{width:22px;height:22px}
.jx-e .jx-body{padding-top:16px}

/* f: ticket */
.jx-f .jx-art{height:150px;background-size:cover}
.jx-tear{position:relative;height:0;margin:0 14px;border-top:2.5px dashed #D1D1D6}
.jx-tear::before,.jx-tear::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:#F2F2F7}
.jx-tear::before{left:-26px}.jx-tear::after{right:-26px}
.jx-stub{display:flex;justify-content:space-between;gap:8px;padding:14px 18px 4px}
.jx-stub span b{display:block;font-size:17px;font-weight:900;margin-top:2px}
.jx-stub span:last-child{text-align:right}
.jx-f-next{padding:10px 16px 16px}

/* g: App Store "Today" style */
.jx-g .jx-art{height:200px;background-size:cover;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.jx-g .jx-body{position:relative;margin-top:-34px;padding:0 18px 16px}
.jx-kick{color:var(--c1)!important}.jx-big{display:block;font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:2px 0 12px}
.jx-g .jx-step{margin:8px 0 14px}
/* Journey: no stripes behind the path (3 Nov, Joshua), even if an old test setting picked them */
.app[data-tab=path] .chap::before{background-image:none!important}
.app[data-tab=path][data-pat=stripes] .path{background-image:none}

/* h, i, j: Joshua's mockups (words left, scene right, one big button) */
.jx-s{padding:16px 16px 16px}
.jx-s-art{position:absolute;top:0;right:0;width:50%;height:calc(100% - 84px);background-size:cover;background-position:center 60%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.jx-s-art.sky{background:linear-gradient(180deg,#BFE0FF,#E9F4FF);display:grid;place-items:end center}
.jx-s-art.sky img{width:118%;max-width:none;margin-bottom:-6px;translate:8% 0}
.jx-s-l{position:relative;width:62%;min-height:150px}
.jx-tag{display:inline-block;padding:5px 11px;border-radius:99px;background:#fff;color:var(--c1);font-size:12px;font-weight:900;box-shadow:0 0 0 1px rgba(0,0,0,.06);white-space:nowrap}
.jx-s-t{display:block;margin-top:12px;font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.05}
.jx-s-sub{margin-top:5px;font-size:14px!important}
.jx-seg{display:flex;gap:3px;margin-top:14px}.jx-seg i{flex:1;height:12px;border-radius:4px;background:#E5E5EA}.jx-seg i.d{background:#34C759}.jx-seg i.c{background:var(--k-purple,#7C3AED)}
.jx-ms{margin:14px 0 0!important}.jx-ms>i{width:30px;height:30px}.jx-ms>i.me{width:40px;height:40px}.jx-ms .jx-tro{width:34px;height:34px}
.jx-s .jx-go.wide{position:relative}
.jx-j{min-height:250px;padding:16px 16px 16px 0;background:linear-gradient(180deg,#CDE7FF,#F2F8FF)}
.jx-j-bg{position:absolute;inset:0;background-size:cover;background-position:center 55%;opacity:.35}
.jx-j-ch{position:absolute;left:-14px;bottom:-8px;width:46%;height:auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}
.jx-j-r{position:relative;margin-left:42%}
.jx-j-r .jx-tag{white-space:normal}
.jx-ring{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:5px 14px 5px 5px;border-radius:99px;background:#fff;font-size:15px;font-weight:900}
.jx-ring i{width:26px;height:26px;border-radius:50%;background:conic-gradient(#34C759 var(--p),#E5E5EA 0);-webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px)}
.jx-j .jx-go.wide{margin-top:14px;font-size:16px;min-height:48px}