/* MatchPoint Kids · clean look (3 Nov 2026), from Joshua's Figma HOME (GzGtyIWBKggoBJ98FKkZSd, node 145:165; 1766 wide → ÷4.53).
   "Cleaner and more minimal… I've taken the borders, the shadows and things off." Loaded last, after design/clean.css (which strips
   the old lips, rims and card shadows everywhere). Plain pale lavender screens, flat white cards, pill buttons, orange Home tab. */
:root{
  --k-card-shadow:none; --k-float:none; --k-rim:transparent; --k-lip:transparent;
  --line:#ECEAF5;
  --c-bg:linear-gradient(180deg,#FAFAFF 0%,#F5F3FD 100%);
  --c-ink:#0B1021; --c-tab:#6D84AE; --c-tab-on:#FD7E25;
}

/* ---------- screens: no wave picture, just the soft gradient ---------- */
.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],
.flow:not(.gamef):not(.cerf),.flow.slamf{background:var(--c-bg)}
.app[data-tab=home] .bar,.app[data-tab=play] .bar,.app[data-tab=mine] .bar,.app[data-tab=rewards] .bar{background:transparent;box-shadow:none}
.bar .pill{background:#fff;box-shadow:none}

/* ---------- Home's top: "Today" + the player's face ---------- */
.bar.td{align-items:center;padding-left:24px;padding-right:24px}
.bar .td-h,.bar .td-av{display:none}
.bar.td .td-h{display:block;flex:1;margin:0;font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1.1;color:var(--c-ink)}
.bar.td .td-av{display:block;flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2.5px #fff;cursor:pointer}
.bar.td .td-av img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(1.15)}
.bar.td .td-av span{display:grid;place-items:center;width:100%;height:100%;color:#fff;font-weight:900;font-size:18px}
.bar.td .me-b,.bar.td .pill{display:none}

/* ---------- Home ---------- */
.h5{gap:0;padding:4px 24px 30px}
.h5 .h4-focus{padding:18px 20px 22px;border-radius:20px;background:linear-gradient(180deg,#FCBD3F,#F49339);box-shadow:none}
.h5 .h4-focus:active{transform:scale(.985);box-shadow:none}
.h5 .h4-focus::before{right:-50px;top:auto;bottom:-40px;width:180px;height:180px;background:rgba(255,255,255,.08)}
.h5 .h4-tag{padding:6px 14px;border-radius:99px;background:rgba(0,0,0,.1);color:#fff;font-size:11.5px;letter-spacing:.04em}
.h5 .h4-art{height:150px;margin:-8px -10px 6px}
.h5 .h4-art i{left:4%;right:4%;bottom:6px;height:28px;background:rgba(150,82,0,.14)}
.h5 .h4-art img{bottom:10px;max-width:100%;max-height:150px;filter:none}
.h5 .h4-t{margin-top:0;font-size:28px;line-height:1.18;letter-spacing:-.035em;text-shadow:0 1px 1px rgba(0,0,0,.09)}
.h5 .h4-s{margin-top:6px;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.02em;opacity:1;text-shadow:0 1px 1px rgba(0,0,0,.09)}
.h5-h{margin:20px 0 10px;font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--c-ink)}
.h5 .h4-tell{margin-top:14px;background:#fff;box-shadow:none}
.h5 .h4-road{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:16px 14px 16px 14px;border-radius:26px;background:#fff;box-shadow:none}
.h5 .h4-rl{flex:1;min-width:0}
.h5 .h4-tag.g{padding:6px 14px;border-radius:99px;background:rgba(45,208,84,.2);color:#0AA52F;font-size:10.5px;letter-spacing:.03em}
.h5 .h4-left{margin-top:12px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.h5 .h4-dots{margin-top:6px}
.h5 .h4-dots i{width:16px;height:16px}
.h5 .h4-dots i.d{background:#2DD054}.h5 .h4-dots i.d svg{width:10px;height:10px;stroke-width:3}
.h5 .h4-dots i.c{background:#E4E7EF;box-shadow:none}
.h5 .h4-dots s{width:11px;border-top:1.5px dashed #2DD054}
.h5 .h4-go{flex:none;align-self:flex-start;width:auto;height:40px;margin:14px 0 0;padding:0 18px 0 22px;gap:10px;border-radius:99px;font-size:18.5px;font-weight:900;
  background:linear-gradient(180deg,#52D753,#0AC955);box-shadow:0 2px 4px rgba(1,156,63,.12);color:#fff}
.h5 .h4-go svg{width:16px;height:16px}
.h5 .h4-st{flex:none;align-self:center;width:130px;height:102px;border-radius:16px;background:linear-gradient(180deg,#B990FF,#7F69FF);box-shadow:0 0 0 1.3px rgba(0,0,0,.07) inset}
.h5 .h4-st img{position:absolute;left:50%;top:auto;bottom:-6px;width:112%;height:auto;max-width:none;transform:translateX(-50%)}

/* ---------- tab bar: white, one hairline, orange for the tab you're on ---------- */
.tabs{background:#fff;box-shadow:none;border-top:1.3px solid #E2DDF5}
.tabs button .tl{color:var(--c-tab);font-size:11px;font-weight:800}
.tabs button.on .tl,.tabs button.on[data-tab] .tl{color:var(--c-tab-on)}

/* ---------- buttons: flat pills ---------- */
.b3{border-radius:99px;box-shadow:0 2px 4px rgba(1,156,63,.12)}
.b3:active{box-shadow:none;transform:scale(.985)}
.b3.sm{border-radius:99px;box-shadow:none}
.b3.white,.b3.white.sm{background:#fff;box-shadow:none}
.sheet .b3.white,.flow .b3.white{background:#F2F0FA}
.b3.ghost{box-shadow:none}
.b3[disabled],.ffoot .b3[disabled]{background:#ECEAF4;color:#A9A6C4;box-shadow:none}
.b3.rec{box-shadow:none}

/* ---------- scrolled top bar: a plain solid strip with one hairline (no frosted glass, no floating pill) ---------- */
#app .bar::before{background:#FAFAFF;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 #ECEAF5}
#app .bar.min::before{inset:0;border-radius:0;box-shadow:0 1px 0 #ECEAF5}
#app .bar.min .td-h{font-size:21px}
#app .bar.min .td-av{width:34px;height:34px}
.bar .td-h,.bar .td-av{transition:font-size .28s ease,width .28s ease,height .28s ease}

/* ---------- Home v2 (3 Nov, Figma 145:93): Tip of the day · Continue Journey with a photo · My Weekly Focus · Did you know ---------- */
.h6 .h5-h{margin:22px 0 10px}
.tod{border-radius:20px;background:linear-gradient(180deg,#FCBD3F,#F49339);color:#fff;overflow:hidden;position:relative}
.tod::before{content:"";position:absolute;right:-60px;bottom:-50px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.tod-b{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:18px 18px 18px;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.tod-b:active{opacity:.94}
.tod .h4-tag{padding:0 14px;height:27px;line-height:27px;border-radius:99px;background:rgba(0,0,0,.08);color:#fff;font-size:11.5px;letter-spacing:.04em}
.tod-art{position:relative;display:block;align-self:stretch;height:146px;margin:-6px -8px 4px}
.tod-art i{position:absolute;left:4%;right:4%;bottom:6px;height:28px;border-radius:50%;background:rgba(150,82,0,.14)}
.tod-art img{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:100%;max-height:146px}
.tod-t{display:block;font-size:28px;font-weight:900;line-height:1.2;letter-spacing:-.035em;text-shadow:0 1px 1px rgba(0,0,0,.09)}
.tod-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:17.5px;font-weight:700;line-height:1.33;letter-spacing:-.02em;opacity:.92}
.tod-w{display:none;margin-top:12px;padding:10px 14px;border-radius:14px;background:rgba(0,0,0,.08);font-size:16px;font-weight:800;line-height:1.3}
.tod-w small{display:block;margin-bottom:2px;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.tod-rm{display:inline-flex;align-items:center;gap:8px;height:30px;margin-top:12px;padding:0 12px 0 15px;border:0;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer}
.tod-rm svg{width:12px;height:12px}
.tod-x{display:none;position:relative;flex-wrap:wrap;align-items:center;gap:10px;padding:0 18px 18px}
.tod-x .tod-rm{margin-top:0}.tod-x .tod-rm svg{transform:rotate(-90deg)}
.tod-mine{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:99px;background:#fff;color:#E07B12;font:inherit;font-size:16px;font-weight:900;cursor:pointer}
.tod-mine svg{width:18px;height:18px}
.tod.open .tod-s{display:block;-webkit-line-clamp:unset}
.tod.open .tod-w{display:block;animation:todIn .3s ease}
.tod.open .tod-x{display:flex;animation:todIn .3s ease}
.tod.open .tod-b .tod-rm{display:none}
.tod.open .tod-b{padding-bottom:14px}
@keyframes todIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.h6-road{position:relative;overflow:hidden;min-height:160px;padding-right:0}
.h6-road .h4-rl{position:relative;z-index:1;flex:none;width:56%}
.h6-ph{position:absolute;right:0;top:0;bottom:0;width:47%}
.h6-ph img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.h6-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 26%)}

.h6-hr{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px}
.h6 .h6-hr .h5-h{margin:0}
.h6-link{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;color:#6B6E99;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer}
.h6-link svg{width:11px;height:11px}
.myf{padding:16px;border-radius:20px;background:#fff}
.myf-top{display:flex;align-items:flex-start;gap:14px;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:var(--c-ink);cursor:pointer}
.myf-ic{flex:none;width:50px;height:46px;object-fit:contain}
.myf-top b{flex:1;font-size:17.5px;font-weight:800;line-height:1.28;letter-spacing:-.02em}
.myf-ed{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#F3F1FD;color:#5E6385}
.myf-ed svg{width:16px;height:16px}
.myf-row{display:flex;align-items:center;gap:10px;margin-top:14px;padding:0 12px;height:38px;border-radius:12px;background:#F3F0FE}
.myf-did{flex:1;display:flex;align-items:center;gap:9px;height:100%;padding:0;border:0;background:none;color:var(--c-ink);font:inherit;font-size:14px;font-weight:800;text-align:left;cursor:pointer;white-space:nowrap}
.myf-did i{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:5.5px;background:#fff;box-shadow:0 0 0 1px #DBD4F2 inset;color:#fff}
.myf-did i svg{width:12px;height:12px}
.myf-did.on i{background:#2DD054;box-shadow:none}
.myf-row s{flex:none;width:1px;height:21px;background:#D9D4EB}
.myf-wk{display:inline-flex;align-items:center;gap:6px;color:#5E6385;font-size:12.5px;font-weight:800;white-space:nowrap}
.myf-wk svg{width:13px;height:13px}
.myf-shic{background:#F3F1FD!important;box-shadow:none!important}.myf-shic img{width:78%;height:78%;object-fit:contain}
.myf-now{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:#F3F0FE;font-size:16px;font-weight:800;color:var(--c-ink)}
.myf-now small{display:block;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7C6FB0}

.dyk{position:relative;display:block;width:100%;min-height:144px;padding:20px 16px;border:0;border-radius:20px;text-align:left;font:inherit;color:#fff;cursor:pointer;
  background:radial-gradient(ellipse 60% 70% at 92% 105%,rgba(255,255,255,.2),rgba(255,255,255,0) 70%),linear-gradient(141deg,#7632E4 19%,#0F0052 81%);clip-path:inset(-14px 0 0 0 round 0 0 20px 20px)}
.dyk:active{transform:scale(.99)}
.dyk p{position:relative;z-index:1;width:54%;margin:0;font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.02em}
.dyk p b{font-weight:800}
.dyk img{position:absolute;right:0;bottom:0;height:150px;max-width:46%;object-fit:contain;object-position:right bottom}
.dyk.pro img{height:153px;bottom:0;top:auto}
.h6 .h4-road .h4-tag.g{white-space:normal;height:auto;line-height:1.25;padding:6px 12px;border-radius:12px}
.myf-row{gap:8px;padding:0 10px}
.myf-did{gap:8px;font-size:13px;letter-spacing:-.015em;min-width:0}
.myf-wk{font-size:12px;gap:5px}

/* ---------- text boxes: no outline any more, so a soft lavender fill shows where to type ---------- */
.hwin textarea,.ci-type input{background:#F1EEFB}
.hwin textarea:focus,.ci-type input:focus{background:#fff;box-shadow:0 0 0 2.5px #A78BFA inset;outline:none}
.sheet .myf-now+.hwin{margin-top:0}
.sheet .hwin+.b3{margin-top:12px}
.sheet .b3+.tl-h{margin-top:20px}
.h6{padding-bottom:40px}

/* ---------- Home: the "Today" bar sits in the page and scrolls away with it (3 Nov, Joshua: "I don't want a bar that goes over the top") ---------- */
#app .bar.inline{position:relative!important;z-index:1}
#app .bar.inline::before{display:none}
.app[data-tab=home] .bar-sp{display:none}

/* ---------- the "change my focus" sheet: small, two-thirds high at most (3 Nov) ---------- */
#sheet:has(.fcs-h){max-height:66%;padding-top:10px}
.fcs-h{padding:2px 4px 0}
.fcs-h small{display:block;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7C5CE0}
.fcs-h b{display:block;margin-top:4px;font-size:21px;font-weight:900;line-height:1.2;letter-spacing:-.02em;color:var(--c-ink)}
.fcs-now{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:6px 4px 12px;font-size:14px;font-weight:700;line-height:1.35;color:#6B6E99}
.fcs-now span{color:var(--c-ink);font-weight:800}
.fcs-in{margin-top:0}
.fcs-in textarea{min-height:54px;height:54px;padding:15px 58px 15px 16px;border-radius:16px;font-size:16px}
.fcs-in .micsm{top:50%;bottom:auto;right:7px;width:40px;height:40px;transform:translateY(-50%)}
.fcs-in .micsm svg{width:18px;height:18px}
.b3.fcs-save{height:50px;min-height:50px;margin-top:10px;font-size:17px}
.fcs-or{margin:16px 4px 8px;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#8A8DB0}
.fcs-pick{display:grid;gap:6px}
.fcs-pick button{padding:11px 14px;border:0;border-radius:14px;background:#F4F2FC;color:var(--c-ink);font:inherit;font-size:15px;font-weight:800;line-height:1.3;text-align:left;cursor:pointer}
.fcs-pick button:active{background:#E9E5FA}

/* ---------- Home polish (3 Nov, Joshua: "Apple-style, but Duolingo fun… less padding outside the cards… premium").
   Apple layout: 16pt side margins (the same as the other tabs), spacing in 8/16/24 steps, a large title with the date above it
   (like the App Store's Today), one corner radius and one inner padding for every card. ---------- */
.h6{padding:0 16px 40px}
.bar.td{padding-left:16px;padding-right:16px;padding-bottom:16px;align-items:flex-end}
.bar .td-hw{display:none}
.bar.td .td-hw{display:block;flex:1;min-width:0}
.bar.td .td-d{display:block;margin-bottom:3px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8A8DB0}
.bar.td .td-h{font-size:32px;line-height:1.05;letter-spacing:-.03em}
.bar.td .td-av{width:40px;height:40px;margin-bottom:1px}

.h6 .h5-h{margin:28px 2px 12px;font-size:20px;letter-spacing:-.025em}
.h6 .h6-hr{margin:28px 2px 12px}
.h6-link{font-size:15px}

.tod,.h6 .h4-road,.myf,.dyk{border-radius:22px}
.dyk{clip-path:inset(-14px 0 0 0 round 0 0 22px 22px);padding:22px 18px}
.tod-b{padding:18px}
.tod-x{padding:0 18px 18px}
.myf{padding:18px}
.h6 .h4-road{padding:18px}
.h6 .h6-road{padding-right:0}

/* the road card: the tag gets the whole top line, so "Road to the Australian Open" never breaks in two */
.h6 .h4-road:not(.h6-road){display:grid;grid-template-columns:1fr 112px;column-gap:14px;align-items:center}
.h6 .h4-road:not(.h6-road) .h4-rl{display:contents}
.h6 .h4-road .h4-tag.g{white-space:nowrap;height:27px;line-height:27px;padding:0 13px;border-radius:99px;font-size:11px;letter-spacing:.04em}
.h6 .h4-road:not(.h6-road) .h4-tag.g{grid-column:1/-1;justify-self:start;margin-bottom:4px}
.h6 .h4-road:not(.h6-road) .h4-left{grid-column:1;grid-row:2;margin-top:6px}
.h6 .h4-road:not(.h6-road) .h4-dots{grid-column:1;grid-row:3}
.h6 .h4-road:not(.h6-road) .h4-go{grid-column:1;grid-row:4;justify-self:start}
.h6 .h4-road:not(.h6-road) .h4-st{grid-column:2;grid-row:2/5;align-self:center;width:112px;height:104px;border-radius:18px}
.h6 .h4-left{margin-top:10px;font-size:19px}

/* five steps at a time: green ticks done, a green ring where you are, grey still to come (Duolingo's path, small) */
.h6 .h4-dots{margin:8px 0 16px}
.h6 .h4-dots i{width:16px;height:16px;background:#E6E8F0;box-shadow:none}
.h6 .h4-dots i.d{background:#2DD054}
.h6 .h4-dots i.c{width:18px;height:18px;background:#fff;box-shadow:0 0 0 2.5px #2DD054 inset,0 0 0 4px rgba(45,208,84,.16)}
.h6 .h4-dots i.c::after{content:"";width:6px;height:6px;border-radius:50%;background:#2DD054}
.h6 .h4-dots s{width:10px;border-top:2px dashed #D9DCE6}
.h6 .h4-dots s.d{border-top-color:#2DD054}
.h6 .h4-go{margin-top:0;height:42px}
.h6 .h5-h,.h6 .h6-hr{margin-left:0;margin-right:0}
.tod-t,.myf-top b,.h4-left,.fcs-h b{text-wrap:balance}
.tod-s,.dyk p,.tod-w{text-wrap:pretty}
.dyk p{width:58%}

/* ---------- little premium effects (3 Nov): specks of light rising behind the Tip and Did you know cards, a slow shine across Continue,
   the "you are here" ring breathing, cards that give a little when pressed. Transform/opacity only; off for reduced motion. ---------- */
.fx-pt{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.fx-pt i{position:absolute;left:var(--x);bottom:-8px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 6px 1px rgba(255,255,255,.55);animation:ptUp var(--d) linear var(--dl) infinite;will-change:transform,opacity}
@keyframes ptUp{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  18%{opacity:var(--o)}
  50%{transform:translate3d(var(--w),-110px,0) scale(1)}
  82%{opacity:var(--o)}
  100%{transform:translate3d(0,-230px,0) scale(.7);opacity:0}}
.tod .fx-pt i{background:#FFF6DA;box-shadow:0 0 7px 1px rgba(255,240,200,.6)}
.tod .fx-pt{height:100%;max-height:380px;top:auto}
.dyk .fx-pt{border-radius:22px}
.dyk img{z-index:1}
.tod-b,.tod-x{z-index:1}

.h6 .h4-go{position:relative;overflow:hidden;isolation:isolate}
.h6 .h4-go::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:32%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));transform:skewX(-18deg);animation:goShine 5s ease-in-out 1.2s infinite}
@keyframes goShine{0%{left:-45%}28%,100%{left:125%}}

.h6 .h4-dots i.c{animation:ringBreath 2.4s ease-in-out infinite}
@keyframes ringBreath{0%,100%{box-shadow:0 0 0 2.5px #2DD054 inset,0 0 0 3px rgba(45,208,84,.14)}50%{box-shadow:0 0 0 2.5px #2DD054 inset,0 0 0 7px rgba(45,208,84,.1)}}

.tod-b,.myf-top,.dyk,.h6 .h4-go,.myf-did,.tod-rm,.tod-mine{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.tod:has(.tod-b:active){transform:scale(.985)}
.tod{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.tod-b:active{opacity:1}
.dyk:active{transform:scale(.975)}
.h6 .h4-go:active{transform:scale(.95)}
.myf:has(.myf-top:active){transform:scale(.985)}
.myf{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}

@media (prefers-reduced-motion:reduce){.fx-pt{display:none}.h6 .h4-go::after,.h6 .h4-dots i.c{animation:none}}

/* Home's date sits just under the phone's status bar (3 Nov, Joshua: "a lot of gap between Tuesday 3 November and the time"): was 52px+ */
#app .bar.td.inline{padding-top:max(20px,calc(env(safe-area-inset-top) + 2px))}
/* softer, like dust in a sunbeam (3 Nov, Joshua: "quite intense… more like soft dust particles"): smaller, fainter, slower, no glow, Did you know only */
.fx-pt i{background:rgba(255,255,255,.9);box-shadow:0 0 3px rgba(255,255,255,.35);filter:blur(.3px)}

/* ---------- Red Ball curriculum (3 Nov): ball marks on the court, a wrong pick sits out the second try ---------- */
.ct.cl .ct-h{opacity:.16}
.ct.cl .cl-b{fill:#fff;stroke:#fff;stroke-width:2}
.ct.cl.on .cl-b{stroke:var(--k-purple);stroke-width:3.5}.ct.cl.ok .cl-b{stroke:#16A34A;stroke-width:3.5}.ct.cl.no .cl-b{stroke:#E5484D;stroke-width:3.5}
.ct.gone,.opts button.gone{opacity:.35;pointer-events:none}
.opts button.gone{text-decoration:line-through}
/* Games card on Home (3 Nov: Games left the tab bar) */
.h4-games{display:flex;align-items:center;gap:14px;width:100%;padding:14px 14px 14px 12px;border:0;border-radius:22px;background:#fff;text-align:left;font:inherit;color:var(--c-ink);cursor:pointer}
.h4-games>img{width:58px;height:58px;flex:none;object-fit:contain}
.h4-games>span:not(.h4-gp){flex:1;min-width:0}.h4-games small{display:block;font-size:12px;font-weight:800;color:#7C3AED;text-transform:uppercase;letter-spacing:.06em}
.h4-games b{display:block;font-size:17px;font-weight:900;line-height:1.2;margin-top:2px}.h4-games em{display:block;font-style:normal;font-size:13px;font-weight:700;color:#6D84AE;margin-top:2px}
.h4-gp{flex:none;height:38px;padding:0 18px;border-radius:99px;background:#7C3AED;color:#fff;font-size:16px;font-weight:900;display:grid;place-items:center}
/* Profile tab */
.pf{margin:6px 16px 0;padding:18px 16px 16px;border-radius:24px;background:linear-gradient(135deg,#60A5FA,#3B6FF6);color:#fff}
.pf-card{display:flex;align-items:center;gap:14px}
.pf-av{width:64px;height:64px;flex:none;border-radius:50%;overflow:hidden;background:#fff;border:3px solid rgba(255,255,255,.85);display:grid;place-items:center}
.pf-av img{width:100%;height:100%;object-fit:cover}.pf-av span{width:100%;height:100%;display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff}
.pf-n{flex:1;min-width:0}.pf-n h2{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.1}.pf-n p{font-size:14px;font-weight:700;color:#E3ECFF;margin-top:3px}
.pf-sw{flex:none;height:34px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.22);color:#fff;font:inherit;font-size:14px;font-weight:900;cursor:pointer}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.pf-stats div{padding:10px 4px;border-radius:16px;background:#fff;color:var(--c-ink);text-align:center}
.pf-stats b{display:block;font-size:20px;font-weight:900;line-height:1.1}.pf-stats small{display:block;font-size:11.5px;font-weight:800;color:#6D84AE;margin-top:2px}
/* two-answer cards with words only (Forehand / Backhand…): bigger words, no icon */
.tf.words button{font-size:22px;font-weight:900;line-height:1.2;padding:16px 14px}
/* the 3D target is the focus icon everywhere (3 Nov, Joshua): on "Make it my focus" and "Make it my weekly focus" */
.tod-mine img{width:28px;height:28px;margin-left:-6px;object-fit:contain}
.b3 .b3-ic{width:28px;height:28px;object-fit:contain;flex:none}
/* centred lesson screens (intro, lesson done…): when the content is taller than the screen, centring cut the top off (Carlos's hair,
   3 Nov). Auto margins centre it when there's room and let it scroll from the top when there isn't */
.fbody.center{justify-content:flex-start}
.fbody.center>:first-child{margin-top:auto}.fbody.center>:last-child{margin-bottom:auto}
/* Carlos's picture ends at his jacket: fade the bottom edge so it doesn't stop on a hard line */
.kw-hero img{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}