/* MatchPoint · Feed tab (feed.js). Duolingo-style: no boxed cards, posts split by a thin line, a big coloured picture, a small coloured tag,
   one outline button. Each kind of post has its own colour: tips green, pressure points purple, did-you-know yellow, videos coral. */
.fd .hf-top h1{margin:0}
.fd-list{margin-top:6px}
.fd-p{position:relative;padding:20px 0 18px;border-bottom:2px solid #EFEFF2}
.fd-p:last-child{border-bottom:0}
.fd-ban{display:block;width:100%;height:150px;margin:0 0 12px;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:pointer;background:#E4F6D6}
.fd-ban img{width:100%;height:100%;object-fit:contain;padding:12px;box-sizing:border-box}
.fd-pp .fd-ban{background:#EEE6FF}
.fd-dyk .fd-ban{background:#FFF1C9;cursor:default}.fd-dyk .fd-ban img{object-fit:cover;padding:0}
.fd-meta{display:flex;align-items:center;gap:10px}
.fd-tag{padding:5px 10px;border-radius:10px;font:900 12px/1 Nunito,system-ui,sans-serif;letter-spacing:.8px;text-transform:uppercase;background:#E4F6D6;color:#3F9A1C}
.fd-pp .fd-tag{background:#EEE6FF;color:#7A48E0}
.fd-dyk .fd-tag{background:#FFF1C9;color:#C98A00}
.fd-meta small{font:700 14px Nunito,system-ui,sans-serif;color:#A3A3AE}
.fd-txt{margin:10px 0 0;font:600 17px/1.42 Nunito,system-ui,sans-serif;color:#4B4B55}
.fd-txt b{font-weight:800;color:#2E2E36}
.fd-ob{display:inline-flex;align-items:center;height:44px;margin-top:14px;padding:0 18px;border:2px solid #E3E3E8;border-radius:14px;background:#fff;box-shadow:0 3px 0 #E3E3E8;font:900 14px Nunito,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#4B4B55;cursor:pointer}
.fd-ob:active{transform:translateY(3px);box-shadow:none}
/* who posted */
.fd-au{display:flex;align-items:center;gap:12px}
.fd-au img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#F1F1F4}
.fd-au b{display:block;font:800 16px Nunito,system-ui,sans-serif;color:#3C3C44}.fd-au small{display:block;margin-top:1px;font:700 13.5px Nunito,system-ui,sans-serif;color:#A3A3AE}
/* character moments: words on the left, the character on the right (like Duolingo's friend posts) */
.fd-mrow{display:flex;align-items:center;gap:10px}
.fd-mrow .fd-txt{flex:1;font-size:17.5px}
.fd-mpic{flex:none;width:112px;height:112px;object-fit:contain;margin:4px -4px 0 0}
/* funny videos */
.fd-v{position:relative;margin-top:12px;border-radius:18px;overflow:hidden;background:#FFE4DE;aspect-ratio:4/5}
.fd-v video{display:block;width:100%;height:100%;object-fit:cover}
.fd-play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:#fff}
.fd-play svg{width:30px;height:30px;padding:18px;border-radius:50%;background:#FF6B5B;box-shadow:0 4px 0 #D94B3C;box-sizing:content-box;transform:translateX(0)}
.fd-v.on .fd-play svg{opacity:0}
.fd-vt{display:inline-block;margin-right:8px;padding:3px 8px;border-radius:8px;background:#FFE6E2;color:#E0503F;font:900 11px/1.2 Nunito,system-ui,sans-serif;font-style:normal;letter-spacing:.7px;text-transform:uppercase;vertical-align:1px}
/* stickers */
.fd-re{position:relative;display:flex;align-items:center;gap:12px;margin-top:14px}
.fd-rb{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px 0 12px;border:2px solid #E3E3E8;border-radius:14px;background:#fff;box-shadow:0 3px 0 #E3E3E8;font:800 15px Nunito,system-ui,sans-serif;color:#4B4B55;cursor:pointer}
.fd-rb svg{width:24px;height:24px}.fd-rb img{width:28px;height:28px;margin:-4px 0}
.fd-rb.on{border-color:#FFC2B9;background:#FFF3F0;box-shadow:0 3px 0 #FFC2B9;color:#E0503F}
.fd-rb.pop img{animation:fdPop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes fdPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.fd-rc{display:flex;align-items:center;gap:8px;font:800 15px Nunito,system-ui,sans-serif;color:#8C8C98}
.fd-rf{display:flex}.fd-rf img{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #fff;margin-left:-9px}.fd-rf img:first-child{margin-left:0}
.fd-tray{position:absolute;left:0;bottom:54px;z-index:5;display:block;padding:8px;border:2px solid #E9E9EE;border-radius:20px;background:#fff;box-shadow:0 10px 26px rgba(30,30,50,.14);animation:fdUp .22s cubic-bezier(.3,1.4,.5,1)}
.fd-tray button{display:flex;flex-direction:column;align-items:center;gap:3px;width:50px;padding:4px 0;border:0;border-radius:14px;background:none;cursor:pointer}
.fd-tray button.on{background:#FFF0EC}
.fd-tray img{width:40px;height:40px;transition:transform .15s}.fd-tray button:active img{transform:scale(1.25)}
.fd-tray small{font:800 10.5px Nunito,system-ui,sans-serif;color:#8C8C98;white-space:nowrap}
@keyframes fdUp{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.fd-end{margin:18px 0 0;text-align:center;font:700 14px Nunito,system-ui,sans-serif;color:#A3A3AE}

/* ---------- Tab bar (11 Nov, Joshua: Duolingo's bar has no words under the icons) ----------
   Icons stay in full colour (no grey when not picked), a bit bigger; the picked tab is a pale blue tile with a blue outline.
   The last one is the ••• More button: a purple circle that opens the More sheet (Profile, Tico's Pro Shop, Trophies, Badges, Partners). */
html.va .tabs{height:70px!important;padding:0 8px!important}
html.va .tabs button{flex-direction:row!important;height:62px;gap:0}
html.va .tabs .tl{display:none!important}
html.va .tabs .ti{width:46px!important;height:40px!important;border-radius:14px;border:2px solid transparent;box-sizing:border-box}
html.va .tabs .ti img{width:30px!important;height:30px!important;filter:none!important;opacity:1!important}
html.va .tabs button.on .ti{background:#DDF4FF!important;border-color:#84D8FF}
html.va .tabs .ptn-tab,html.va .tabs .ptn-tab>img:first-child,html.va .tabs .ptn-tab>.ptn-l{width:34px!important;height:34px!important}
.mo-i{display:flex;align-items:center;justify-content:center;gap:3px;width:27px;height:27px;border-radius:50%;background:linear-gradient(160deg,#D99BFF,#A960F5);box-shadow:inset 0 -3px 0 rgba(90,30,170,.25)}
.mo-i i{width:4px;height:4px;border-radius:50%;background:#fff}
/* More sheet: rises above the tab bar, rows like Duolingo's (big icon, big word, thin line between) */
.mo-v{position:absolute;left:0;right:0;top:0;bottom:70px;z-index:40;width:100%;border:0;padding:0;cursor:default;background:rgba(20,20,30,.38);animation:moFade .2s both}
.mo-sh{position:absolute;left:0;right:0;bottom:70px;z-index:41;background:#fff;border-radius:22px 22px 0 0;padding:6px 0 4px;box-shadow:0 -8px 28px rgba(20,20,40,.14);animation:moUp .28s cubic-bezier(.32,.72,0,1) both}
.mo-sh button{display:flex;align-items:center;gap:16px;width:100%;padding:12px 22px;border:0;background:none;text-align:left;cursor:pointer;font:800 19px Nunito,system-ui,sans-serif;color:#3C3C44}
.mo-sh button+button{border-top:2px solid #F1F1F4}
.mo-sh button:active{background:#F7F7FA}
.mo-sh img{width:46px;height:46px;object-fit:contain}
.mo-sh .mo-av{border-radius:50%;object-fit:cover;background:#EAF6FF}
.mo-sh span{flex:1}
.mo-sh em{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:12px;background:#FFF4D6;color:#B07A00;font:900 14px Nunito,system-ui,sans-serif;font-style:normal}
.mo-sh em img{width:18px;height:18px}
@keyframes moUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes moFade{from{opacity:0}to{opacity:1}}

/* ---------- The ••• More pages (11 Nov, Joshua: "the way they use colour… different colours on different screens") ----------
   Each page opens with a full-width colour header (like Duolingo's Quests page): big white title, one line, the star balance, its picture on the right. */
.cb-hero{position:relative;margin:-6px -16px 16px;padding:28px 20px 22px;min-height:118px;overflow:hidden;background:#E07316;color:#fff}
.cb-hero h1{position:relative;z-index:1;margin:0;max-width:62%;font:800 28px/1.08 Nunito,system-ui,sans-serif;letter-spacing:-.4px;color:inherit}
.cb-hero small{position:relative;z-index:1;display:block;max-width:60%;margin-top:6px;font:800 14.5px/1.3 Nunito,system-ui,sans-serif;opacity:.92}
.cb-hbal{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:34px;margin-top:14px;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.95);box-shadow:0 3px 0 rgba(0,0,0,.14);color:#8A5A00;font:900 15px Nunito,system-ui,sans-serif;cursor:pointer}
.cb-hbal img{width:20px;height:20px}
.cb-hart{position:absolute;right:14px;bottom:12px;width:128px;height:128px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.16))}
.cbv[data-seg="cab"] .cb-hero{background:#FFC83D;color:#5E4100}
.cbv[data-seg="badges"] .cb-hero{background:#12A08D}
.cbv[data-seg="partners"] .cb-hero{background:#2E8DF0}
.cbv[data-seg="partners"] .cb-hart{width:140px;height:140px;bottom:-6px}


/* ---------- Journey: a colour for every unit (kids.js jsPaint) ---------- */
html.jsec .nrow .js-n.done .js-c{background:var(--js-sc,#FFC93C);box-shadow:0 7px 0 var(--js-sd,#E2A300)}
html.jsec .nrow .js-n.done:active .js-c{box-shadow:0 2px 0 var(--js-sd,#E2A300)}
html.jsec .nrow .js-n.done .js-un{color:var(--js-sd,#C99B1E)}
html.jsec .nrow .js-n.done .js-c::after{content:"";position:absolute;left:18%;top:14%;width:26%;height:16%;border-radius:50%;background:rgba(255,255,255,.28);transform:rotate(-28deg)}
html.jsec .js-n.cur .js-c::after{content:"";position:absolute;left:18%;top:14%;width:26%;height:16%;border-radius:50%;background:rgba(255,255,255,.28);transform:rotate(-28deg)}
html.va.jm.jsec .app .scroll .chap .j-topic span{color:var(--ud,#A6A6AE)!important}
html.jsec .jsbar{transition:background .25s,box-shadow .25s}
html.jsec .jcs .jc.jc-later img{filter:grayscale(1) brightness(1.08);opacity:.5;transition:filter .3s,opacity .3s}

/* Journey "Current stop" button (11 Nov, Joshua: it sat under the phone, and a bare arrow didn't say what it does).
   Pinned to the app screen (not the browser window), bottom right just above the tab bar, with a short label. */
#app .js-jump{position:absolute;right:14px;bottom:84px;width:auto;height:46px;padding:0 16px 0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font:900 14.5px/1 Nunito,system-ui,sans-serif;letter-spacing:.2px;color:var(--jsu,#4FA675);animation:jjIn .25s cubic-bezier(.3,1.4,.5,1)}
#app .js-jump[hidden]{display:none}
#app .js-jump svg{width:20px;height:20px}
@keyframes jjIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}

/* ---------- Home trim (11 Nov): this week's focus with Film it + one peek at the Feed. Green (Joshua: the Journey card above is orange); Kip or Pundy filming (cast/film) ---------- */
.hf-oc{position:relative;overflow:hidden;background:#EBF9E1;border-color:#BFE7A3;box-shadow:0 4px 0 #BFE7A3;padding-right:128px;min-height:150px}
.hf-oc .hf-lab{color:#3D9A12}
.hf-oc .hf-ct{display:block;margin-top:6px;font-size:19px;line-height:1.25;color:#2B2B33}
.hf-ocp{position:absolute;right:4px;bottom:6px;width:auto;height:142px;max-width:126px;object-fit:contain;object-position:bottom}
.hf-ocb{display:flex;align-items:center;gap:14px;margin-top:14px}
.hf-ocgo{display:inline-flex;align-items:center;gap:7px;border:0;background:#58CC02;box-shadow:0 3px 0 #46A302;color:#fff;cursor:pointer}
.hf-ocgo svg{width:19px;height:19px}.hf-ocgo:active{transform:translateY(3px);box-shadow:none}
.hf-occh{border:0;background:none;padding:0;font:800 14px Nunito,system-ui,sans-serif;color:#3D9A12;cursor:pointer}
.fd-peek{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;padding:12px 14px 12px 12px}
.fd-pk{position:relative;flex:none;width:64px;height:86px;border-radius:12px;overflow:hidden;background:#FFE4DE}
.fd-pk img{width:100%;height:100%;object-fit:cover;display:block}
.fd-pk i{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.fd-pk i svg{width:14px;height:14px;padding:8px;border-radius:50%;background:#FF6B5B;box-sizing:content-box}
.fd-pt{flex:1;min-width:0}.fd-pt small{display:block;font:900 11.5px Nunito,system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#E8574A}
.fd-pt b{display:block;margin-top:4px;font:800 15.5px/1.3 Nunito,system-ui,sans-serif;color:#2B2B33}
.fd-pc{flex:none;width:20px;height:20px;color:#B5B5BD}
.hf-ocb .hf-ocgo{margin-top:0;height:40px;padding:0 18px;font-size:14.5px;font-weight:800}

/* tab bar switch (11 Nov, Profile › Tab bar): "old" = the picked tab in a soft blue rounded square, the others greyed out */
#app[data-tabsty="old"] .tabs .ti{border-color:transparent!important}
#app[data-tabsty="old"] .tabs button:not(.on) .ti img,#app[data-tabsty="old"] .tabs button:not(.on) .mo-i{filter:grayscale(1)!important;opacity:.55!important}
#app[data-tabsty="old"] .tabs button.on .ti{background:rgba(0,172,230,.15)!important}
.ps-earn2{display:inline-flex;align-items:center;gap:4px;margin:2px 0 14px;padding:0;border:0;background:none;font:800 14.5px Nunito,system-ui,sans-serif;color:#C45E29;cursor:pointer}
.ps-earn2 svg{width:16px;height:16px}

/* Shop header v2 (11 Nov, Joshua: "I don't like this banner… or the icon"): Tico behind his own stall under a striped shop awning, warm sunny colours */
.cbv[data-seg="shop"] .cb-hero{padding:46px 20px 20px;min-height:178px;background:linear-gradient(180deg,#FFF3D1 0%,#FFE3A1 100%);color:#5A3A12}
.cbv[data-seg="shop"] .cb-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;z-index:2;
  background:repeating-linear-gradient(90deg,#FFB31F 0 30px,#FFF8E8 30px 60px);
  -webkit-mask:radial-gradient(15px 9px at 15px 21px,#000 98%,transparent) 0 0/30px 100% repeat-x,linear-gradient(#000 0 0) top/100% 21px no-repeat;
  -webkit-mask-composite:source-over;mask:radial-gradient(15px 9px at 15px 21px,#000 98%,transparent) 0 0/30px 100% repeat-x,linear-gradient(#000 0 0) top/100% 21px no-repeat;
  filter:drop-shadow(0 3px 0 rgba(160,100,10,.18))}
.cbv[data-seg="shop"] .cb-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:#D9A15A;box-shadow:inset 0 3px 0 #E8B774}
.cbv[data-seg="shop"] .cb-hero h1{font-size:27px;color:#4A2E0C}
.cbv[data-seg="shop"] .cb-hero small{max-width:56%;color:#8A5A1E;opacity:1}
.cbv[data-seg="shop"] .cb-hbal{background:#fff;box-shadow:0 3px 0 #EBC98A;color:#8A5A00}
.cbv[data-seg="shop"] .cb-hart{right:8px;bottom:8px;width:158px;height:158px;object-position:bottom;filter:drop-shadow(0 6px 8px rgba(120,70,10,.18))}   /* Tico front-facing, waving you in (GPT Image 2.6, cast/iso/tico-shop-wave.webp) */

/* ---------- Reactions v2 (11 Nov, Joshua: "cool effects… animate them… choose a character") ---------- */
.fd-p{position:relative}
.fd-tch{display:flex;gap:6px;padding:0 2px 8px;margin-bottom:6px;border-bottom:2px solid #F1F1F4}
.fd-tch button{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:5px!important;width:auto!important;height:32px;padding:0 10px 0 4px!important;border:2px solid #ECECF0!important;border-radius:999px!important;font:800 12.5px Nunito,system-ui,sans-serif;color:#6B6B78}
.fd-tch button img{width:24px!important;height:24px!important}
.fd-tch button.on{border-color:#FF9A8A!important;background:#FFF3F0!important;color:#E0503F}
.fd-tf{display:flex;gap:2px}
/* each face moves its own way in the tray */
.fd-tf .fx-lol img{animation:fxLol 1.1s ease-in-out infinite}
.fd-tf .fx-wow img{animation:fxWow 1.3s cubic-bezier(.3,1.6,.5,1) infinite}
.fd-tf .fx-love img{animation:fxLove 1s ease-in-out infinite}
.fd-tf .fx-proud img{animation:fxProud 1.6s ease-in-out infinite}
.fd-tf .fx-hmm img{animation:fxHmm 2s ease-in-out infinite}
.fd-tf .fx-zzz img{animation:fxZzz 2.4s ease-in-out infinite}
.fd-tf .fx-love,.fd-tf .fx-zzz{position:relative}
.fd-tf .fx-love::after{content:"♥";position:absolute;top:0;right:4px;font-size:13px;color:#FF5A7A;animation:fxHeart 1.4s ease-out infinite}
.fd-tf .fx-zzz::after{content:"z";position:absolute;top:-2px;right:6px;font:900 12px Nunito,system-ui,sans-serif;color:#8B6CF0;animation:fxZ 2.4s ease-out infinite}
@keyframes fxLol{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg) translateY(-1px)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg) translateY(-1px)}80%{transform:rotate(4deg)}}
@keyframes fxWow{0%,55%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-7px) scale(1.08)}}
@keyframes fxLove{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(.98)}45%{transform:scale(1.1)}}
@keyframes fxProud{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(-4deg) translateY(-2px)}}
@keyframes fxHmm{0%,100%{transform:rotate(0) translateX(0)}30%{transform:rotate(-10deg) translateX(-2px)}60%{transform:rotate(-10deg) translateX(-2px)}}
@keyframes fxZzz{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(6deg) translateY(2px)}}
@keyframes fxHeart{0%{opacity:0;transform:translateY(6px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-14px) scale(1.1)}}
@keyframes fxZ{0%{opacity:0;transform:translate(0,4px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(8px,-14px) scale(1.2)}}
/* the burst */
.fd-burst{position:absolute;z-index:6;width:0;height:0;pointer-events:none}
.fd-burst img{position:absolute;left:0;top:0}
.fd-bb{width:96px;height:96px;margin:-48px 0 0 -48px;animation:fdBig .9s cubic-bezier(.3,1.5,.5,1) forwards;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.fd-bm{width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;animation:fdFly .8s cubic-bezier(.2,.8,.3,1) var(--dl) forwards}
.fd-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:var(--c);opacity:0;animation:fdBit .7s ease-out forwards}
@keyframes fdBig{0%{transform:scale(.2) translateY(0);opacity:0}25%{transform:scale(1.15) translateY(-40px);opacity:1}55%{transform:scale(1) translateY(-46px);opacity:1}100%{transform:scale(.7) translateY(-80px);opacity:0}}
@keyframes fdFly{0%{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}
@keyframes fdBit{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(200deg)}}
.fd-rn{font-weight:800}.fd-rn.bump{display:inline-block;animation:fdBump .5s cubic-bezier(.3,1.7,.5,1);color:#E0503F}
@keyframes fdBump{0%{transform:scale(1)}40%{transform:scale(1.35) translateY(-2px)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fd-tf img,.fd-tf button::after{animation:none!important}}

/* ---------- Tab bar, final (11 Nov, Joshua): the picked tab sits in a pale square of its OWN icon colour, icon dead centre, on every page
   (the Journey page had an old white-on-white rule, and older per-icon nudges pushed icons off centre) ---------- */
html.va #app .tabs button[data-tab="home"]{--tint:#DCEEFF}
html.va #app .tabs button[data-tab="path"]{--tint:#DCF3E1}
html.va #app .tabs button[data-tab="court"]{--tint:#FFE6EC}
html.va #app .tabs button[data-tab="feed"]{--tint:#FFE2E9}
html.va #app .tabs button[data-tab="mine"]{--tint:#ECE4FF}
html.va #app .tabs button[data-act="more"]{--tint:#F1E3FF}
html.va #app .tabs button .ti{display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:42px!important;margin:0!important;padding:0!important;border:0!important;border-radius:14px!important;background:none!important;box-shadow:none!important;transform:none!important}
html.va #app .tabs button .ti img{display:block!important;width:30px!important;height:30px!important;margin:0!important;transform:none!important;translate:none!important;scale:none!important}
html.va #app .tabs button.on .ti{background:var(--tint)!important}
html.va #app[data-tabsty="old"] .tabs button.on .ti{background:var(--tint)!important}

/* ---------- Friends, coach clips, quiz, challenge, Slam week (11 Nov) ---------- */
.fd .hf-top{display:flex;align-items:center;justify-content:space-between}
.fd-frb{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border:2px solid #E5E5EA;border-radius:999px;background:#fff;box-shadow:0 3px 0 #E5E5EA;font:800 14.5px Nunito,system-ui,sans-serif;color:#3B3F52;cursor:pointer}
.fd-frb span{display:flex}.fd-frb img{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-10px}.fd-frb img:first-child{margin-left:0}
.fr-req{display:grid;grid-template-columns:56px 1fr;gap:4px 12px;align-items:center;margin:4px 0 14px;padding:14px;border:2px solid #CDEBFA;border-radius:20px;background:#F0FAFF}
.fr-req>img{width:56px;height:56px;border-radius:50%;grid-row:span 1}
.fr-req b{display:block;font:800 16px/1.25 Nunito,system-ui,sans-serif;color:#1F2A3A}.fr-req small{display:block;margin-top:2px;font:700 13px/1.3 Nunito,system-ui,sans-serif;color:#6A7A8C}
.fr-btns{grid-column:1/-1;display:flex;gap:10px;margin-top:10px}
.fr-ok{height:42px;padding:0 18px;border:0;border-radius:14px;background:#1CB0F6;box-shadow:0 3px 0 #1592CC;color:#fff;font:800 15px Nunito,system-ui,sans-serif;cursor:pointer}
.fr-ok:active{transform:translateY(3px);box-shadow:none}.fr-ok.big{width:100%;height:50px;margin-top:16px;font-size:16px}
.fr-no{height:42px;padding:0 14px;border:0;background:none;color:#6A7A8C;font:800 15px Nunito,system-ui,sans-serif;cursor:pointer}
.fd-vt.fr{background:#E3F4FD!important;color:#1592CC!important}.fd-vt.co{background:#E9F6EE!important;color:#2F8A55!important}
/* achievement cards */
.fw-card{position:relative;overflow:hidden;margin-top:12px;padding:22px 18px 20px;border-radius:22px;text-align:center;color:#fff;background:linear-gradient(160deg,#4F8EF7,#2B5FD9)}
.fw-slam{background:linear-gradient(170deg,#2E7BF2 0%,#1B4FC4 100%);padding-top:18px}
.fw-badge{background:linear-gradient(160deg,#20C3A6,#11917F)}
.fw-ace{background:linear-gradient(160deg,#8B6CF0,#5E42C9)}
.fw-streak{background:linear-gradient(160deg,#FFA13D,#F2672B)}
.fw-green{background:linear-gradient(160deg,#5CC46E,#2F9A48)}
.fw-stad{position:absolute;left:50%;top:-18px;width:120%;transform:translateX(-50%);opacity:.22;pointer-events:none}
.fw-card>i{position:absolute;width:10px;height:10px;border-radius:3px;opacity:.9;animation:fwFloat 4s ease-in-out infinite}
.fw-c1{left:12%;top:18%;background:#FFD43B;transform:rotate(20deg)}.fw-c2{right:14%;top:12%;background:#fff;width:7px!important;height:7px!important;border-radius:50%!important;animation-delay:-1s!important}
.fw-c3{left:20%;bottom:22%;background:#FF8FB1;transform:rotate(-15deg);animation-delay:-2s!important}.fw-c4{right:18%;bottom:30%;background:#B9F0FF;animation-delay:-3s!important}
@keyframes fwFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.fw-pw{position:relative;display:inline-block;margin:0 auto 8px}
.fw-pic{display:block;width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.22));animation:fwPop .7s cubic-bezier(.3,1.6,.5,1) both}
.fw-av{position:absolute;right:-14px;bottom:-4px;width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.2)}
@keyframes fwPop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.fw-k{position:relative;display:block;font:800 14px Nunito,system-ui,sans-serif;opacity:.92}
.fw-big{position:relative;display:block;margin-top:2px;font:900 27px/1.1 Nunito,system-ui,sans-serif;letter-spacing:-.3px;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.fw-sub{position:relative;display:inline-block;margin-top:8px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.2);font:800 13px Nunito,system-ui,sans-serif}
/* coach clip */
.fc-v{position:relative;margin-top:12px;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#DDE7EE}
.fc-v>img{width:100%;height:100%;object-fit:cover;display:block}
.fc-mk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fc-note{position:absolute;left:66%;top:34%;padding:5px 10px;border-radius:10px;background:#FFD43B;color:#4A3700;font:900 13px Nunito,system-ui,sans-serif;box-shadow:0 3px 0 #D9B020;white-space:nowrap}
.fc-tag{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:10px;background:rgba(20,24,30,.66);color:#fff;font:800 12.5px Nunito,system-ui,sans-serif}
.fc-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.fc-lock{display:inline-flex;align-items:center;gap:5px;font:800 12.5px Nunito,system-ui,sans-serif;color:#8C8C98}.fc-lock svg{width:15px;height:15px}
.fc-save{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border:0;border-radius:14px;background:#53A470;box-shadow:0 3px 0 #3E7F56;color:#fff;font:800 14.5px Nunito,system-ui,sans-serif;cursor:pointer}
.fc-save svg{width:17px;height:17px}.fc-save.on{background:#E9F6EE;box-shadow:0 3px 0 #C3E5CF;color:#2F8A55}
/* quiz */
.fd-quiz .fd-tag{background:#FFE9D6;color:#D9661F}
.fq-q{margin:10px 0 12px;font:800 18px/1.3 Nunito,system-ui,sans-serif;color:#2B2B33}
.fq-a{display:grid;gap:9px}
.fq-a button{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px 8px 10px;overflow:hidden;border:2px solid #E5E5EA;border-radius:16px;background:#fff;box-shadow:0 3px 0 #E5E5EA;text-align:left;font:800 15.5px Nunito,system-ui,sans-serif;color:#2B2B33;cursor:pointer}
.fq-a button:active:not([disabled]){transform:translateY(3px);box-shadow:none}
.fq-a i{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#F1F1F4;font:900 14px Nunito,system-ui,sans-serif;color:#6B6B78;font-style:normal}
.fq-a i svg{width:18px;height:18px}
.fq-a span{position:relative;z-index:1;flex:1}.fq-a em{position:relative;z-index:1;font:900 14px Nunito,system-ui,sans-serif;font-style:normal;color:#8C8C98}
.fq-a u{position:absolute;left:0;top:0;bottom:0;background:#F4F4F7;animation:fqBar .7s ease-out both}
@keyframes fqBar{from{width:0!important}}
.fq-a .ok{border-color:#58CC02;box-shadow:0 3px 0 #9BE06A;cursor:default}.fq-a .ok u{background:#E6F8D8}.fq-a .ok i{background:#58CC02;color:#fff}.fq-a .ok em{color:#3F9A1C}
.fq-a .no{border-color:#FF8A8A;box-shadow:0 3px 0 #FFC2C2;cursor:default}.fq-a .no u{background:#FFECEC}.fq-a .no i{background:#FF5A5A;color:#fff}
.fq-a .dim{cursor:default;color:#8C8C98}
.fq-why{margin-top:12px;padding:12px 14px;border-radius:14px;background:#F6F7FA;font:700 14.5px/1.4 Nunito,system-ui,sans-serif;color:#4B4B55}.fq-why b{color:#2B2B33}
.fq-hint{margin-top:10px;font:700 13px Nunito,system-ui,sans-serif;color:#9A9AA6}
/* weekly challenge */
.fch{position:relative;overflow:hidden;padding:18px 130px 18px 18px;border-radius:22px;background:linear-gradient(160deg,#FFF6D6,#FFE9A8);min-height:170px}
.fch-pic{position:absolute;right:-6px;bottom:-8px;width:140px}
.fch-k{display:block;font:900 12px Nunito,system-ui,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#B7791F}
.fch-t{display:block;margin-top:6px;font:900 20px/1.2 Nunito,system-ui,sans-serif;color:#4A3200}
.fch-s{display:block;margin-top:4px;font:700 13.5px Nunito,system-ui,sans-serif;color:#8A6A2A}
.fch-dots{display:flex;gap:8px;margin-top:14px}
.fch-dots i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #F2D27A;font:900 14px Nunito,system-ui,sans-serif;font-style:normal;color:#C29A3A}
.fch-dots i.on{background:#58CC02;border-color:#58CC02;color:#fff;animation:fwPop .45s cubic-bezier(.3,1.6,.5,1)}.fch-dots i svg{width:18px;height:18px}
.fch-go{margin-top:14px;height:42px;padding:0 16px;border:0;border-radius:14px;background:#FFB31F;box-shadow:0 3px 0 #D9900A;color:#fff;font:800 15px Nunito,system-ui,sans-serif;cursor:pointer}
.fch-go:active{transform:translateY(3px);box-shadow:none}
.fch-done{display:inline-block;margin-top:14px;padding:8px 12px;border-radius:12px;background:#58CC02;color:#fff;font:900 14px Nunito,system-ui,sans-serif}
/* Slam week */
.fs{position:relative;overflow:hidden;min-height:170px;padding:18px 18px 20px;border-radius:22px;background:linear-gradient(170deg,#2E7BF2,#1B4FC4);color:#fff}
.fs-stad{position:absolute;right:-30px;bottom:-24px;width:72%;opacity:.95;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.fs-k{position:relative;display:inline-block;padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.18);font:900 11.5px Nunito,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase}
.fs-t{position:relative;display:block;max-width:60%;margin-top:10px;font:900 24px/1.1 Nunito,system-ui,sans-serif}
.fs-s{position:relative;display:block;max-width:56%;margin-top:6px;font:700 13.5px/1.35 Nunito,system-ui,sans-serif;opacity:.92}
.fs-l{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.fs-l li{position:relative;padding-left:22px;font:700 14.5px/1.4 Nunito,system-ui,sans-serif;color:#3B3F52}
.fs-l li::before{content:"";position:absolute;left:4px;top:7px;width:9px;height:9px;border-radius:50%;background:#2E7BF2}
/* friends sheets */
.fr-sh h3,.fr-gu h3{margin:4px 0 12px;font:900 22px Nunito,system-ui,sans-serif;color:#1F2A3A}
.fr-list{display:grid;gap:8px}
.fr-li{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;background:#F6F7FA}.fr-li img{width:46px;height:46px;border-radius:50%}
.fr-li b{display:block;font:800 16px Nunito,system-ui,sans-serif;color:#2B2B33}.fr-li small{font:700 13px Nunito,system-ui,sans-serif;color:#8C8C98}
.fr-code{margin-top:14px;padding:14px;border:2px dashed #BFE3F7;border-radius:16px;background:#F0FAFF;text-align:center}
.fr-code small{display:block;font:800 12.5px Nunito,system-ui,sans-serif;color:#6A7A8C}.fr-code b{display:block;margin:4px 0;font:900 24px Nunito,system-ui,sans-serif;letter-spacing:1px;color:#1592CC}
.fr-code span{font:700 13px Nunito,system-ui,sans-serif;color:#6A7A8C}
.fr-add{display:flex;gap:8px;margin-top:12px}
.fr-add input,.fr-q input{flex:1;min-width:0;height:46px;padding:0 14px;border:2px solid #E5E5EA;border-radius:14px;font:800 15px Nunito,system-ui,sans-serif;color:#2B2B33;background:#fff}
.fr-add button{height:46px;padding:0 18px;border:0;border-radius:14px;background:#1CB0F6;box-shadow:0 3px 0 #1592CC;color:#fff;font:800 15px Nunito,system-ui,sans-serif;cursor:pointer}
.fr-safe{display:flex;gap:8px;margin:14px 0 6px;font:700 13px/1.4 Nunito,system-ui,sans-serif;color:#6A7A8C}.fr-safe svg{flex:none;width:18px;height:18px;margin-top:1px;color:#8C8C98}
.fr-gu{text-align:center}.fr-gu>img{width:72px;height:72px;border-radius:50%;margin-top:4px}
.fr-gu p{font:700 14.5px/1.45 Nunito,system-ui,sans-serif;color:#4B4B55}
.fr-q{display:block;margin-top:14px;text-align:left}.fr-q span{display:block;margin-bottom:6px;font:800 14.5px Nunito,system-ui,sans-serif;color:#2B2B33}.fr-q input{width:100%;box-sizing:border-box}

/* ---------- Profile header (11 Nov, Joshua: "a profile header as well, like Tico's Pro Shop… Duolingo's got it"): the player large on a hard court ---------- */
html.va #app .prf .prf-hero{position:relative;margin:-6px -16px 0;padding:30px 20px 52px;text-align:center;overflow:hidden;background:linear-gradient(180deg,#5CB8FF 0%,#2F8CF0 100%);color:#fff}
.prf-court{position:absolute;inset:0;pointer-events:none;opacity:.32;
  background:linear-gradient(#fff,#fff) 50% 0/3px 100% no-repeat,linear-gradient(#fff,#fff) 0 62%/100% 3px no-repeat,linear-gradient(#fff,#fff) 14% 0/3px 100% no-repeat,linear-gradient(#fff,#fff) 86% 0/3px 100% no-repeat}
.prf-court::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:90px;border-radius:50%;background:rgba(0,40,110,.14)}
.prf-hsw{position:absolute;top:14px;right:14px;z-index:2;height:34px;padding:0 14px;border:0;border-radius:12px;background:#fff;box-shadow:0 3px 0 rgba(0,40,110,.22);color:#1F6FCC;font:900 14px Nunito,system-ui,sans-serif;cursor:pointer}
.prf-hsw:active{transform:translateY(3px);box-shadow:none}
.prf-hav{position:relative;z-index:1;display:block;width:118px;height:118px;margin:0 auto;border-radius:50%;padding:5px;background:#fff;box-shadow:0 6px 0 rgba(0,40,110,.2)}
.prf-hav img,.prf-hav span{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.prf-hav span{display:grid;place-items:center;font:900 44px Nunito,system-ui,sans-serif;color:#fff}
.prf-hn{position:relative;z-index:1;display:block;margin-top:12px;font:900 29px/1.05 Nunito,system-ui,sans-serif;letter-spacing:-.4px}
.prf-hs{position:relative;z-index:1;display:block;margin-top:6px;font:800 14px/1.3 Nunito,system-ui,sans-serif;opacity:.95}
html.va #app .prf .prf-card2{position:relative;z-index:2;margin:-34px 0 6px;padding:0;border:0;background:none;box-shadow:none}
html.va #app .prf .prf-card2 .prf-st{margin-top:0;padding:14px 4px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px #E6E6EC,0 4px 0 #E6E6EC}
.prf-card2 .prf-st>div+div{border-left-color:#EEEEF2}

/* grown-ups fold into one dropdown (11 Nov, Joshua: "at the moment it looks like a lot of things") */
.prf-gu{margin-top:22px}
.prf-gu>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid #E6E6EC;border-radius:18px;background:#fff;box-shadow:0 4px 0 #E6E6EC;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.prf-gu>summary::-webkit-details-marker{display:none}
.prf-gu>summary:active{transform:translateY(3px);box-shadow:0 1px 0 #E6E6EC}
.prf-gi{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F1ECFF;color:#7C5CE6}
.prf-gi svg{width:21px;height:21px}
.prf-gu>summary>span:nth-child(2){flex:1;min-width:0}
.prf-gu>summary b{display:block;font:900 16.5px Nunito,system-ui,sans-serif;color:#2B2B33}
.prf-gu>summary small{display:block;margin-top:2px;font:700 13px/1.3 Nunito,system-ui,sans-serif;color:#8A8A94}
.prf-gc{flex:none;width:22px;height:22px;color:#A3A3AD;transition:transform .2s}
.prf-gu[open]>summary .prf-gc{transform:rotate(180deg)}
.prf-gu[open]>summary{border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.prf-gu>.prf-set{margin-top:12px;animation:guIn .22s ease-out}
@keyframes guIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Trophy cabinet header v2 (11 Nov, Joshua: "could be designed better… shadow behind the trophy"): velvet + spotlight + three real trophies ---------- */
.cbv[data-seg="cab"] .cb-hero{min-height:182px;padding:30px 20px 22px;background:radial-gradient(120% 90% at 78% 0%,#2F7A55 0%,#1C5238 45%,#123A28 100%);color:#fff}
.cbv[data-seg="cab"] .cb-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(180deg,#8A5A2B,#6B4220);box-shadow:inset 0 2px 0 #B07A3E}
.cbv[data-seg="cab"] .cb-hero h1{max-width:52%;color:#FFD66B;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.cbv[data-seg="cab"] .cb-hero small{max-width:50%;color:#CFE8D9;opacity:1}
.cbv[data-seg="cab"] .cb-hbal{box-shadow:0 3px 0 rgba(0,0,0,.3)}
.cb-tro3{position:absolute;right:6px;bottom:12px;width:178px;height:160px}
.cb-beam{position:absolute;left:50%;top:-40px;width:200px;height:210px;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 30%,rgba(255,236,170,.42),rgba(255,236,170,0) 70%);pointer-events:none}
.cb-tro3 img{position:absolute;bottom:10px;height:auto;object-fit:contain}
.cb-tro3 .t1{left:4px;width:52px;transform:rotate(-6deg)}
.cb-tro3 .t3{right:4px;width:52px;transform:rotate(6deg)}
.cb-tro3 .t2{left:50%;width:78px;margin-left:-39px;bottom:12px;z-index:1}
.cb-plinth{position:absolute;left:10px;right:10px;bottom:0;height:12px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#F6CD5B,#C8901E);box-shadow:inset 0 2px 0 #FFE6A0}
.cb-sp{position:absolute;width:12px;height:12px;background:#FFE7A1;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:cbTw 2.4s ease-in-out infinite}
.cb-sp.s1{left:18px;top:18px}.cb-sp.s2{right:20px;top:4px;width:9px;height:9px;animation-delay:.8s}.cb-sp.s3{left:60px;top:-6px;width:8px;height:8px;animation-delay:1.5s}
@keyframes cbTw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.cb-sp{animation:none}}

/* ---------- The cast post (11 Nov, Joshua): Coach Carlos gives tips + pressure points, the cast host quizzes, Umpire Reg rules, Gus back-in-my-day ---------- */
.fd-vt.t-tip-of-the-day{background:#E4F6D6;color:#3F9A1C}
.fd-vt.t-pressure-point{background:#EEE6FF;color:#7A48E0}
.fd-vt.t-quick-quiz{background:#FFE9D6;color:#D9661F}
.fd-vt.t-rule-of-the-week{background:#E3EAF7;color:#22407A}
.fd-vt.t-back-in-my-day{background:#FFF1C9;color:#B07A00}
.fd-tip .fd-tq,.fd-pp .fd-tq{margin:12px 0 12px;font-size:17px;font-weight:800;color:#2B2B33}
.fd-quiz .fq-q{margin-top:12px}
.fr-card{display:flex;align-items:center;gap:6px;margin-top:12px;padding:6px 16px 0 0;border-radius:18px;background:linear-gradient(135deg,#1E3A6E,#2D5596);color:#fff;overflow:hidden;min-height:132px}
.fr-card img{flex:none;width:118px;height:132px;object-fit:cover;object-position:top;align-self:flex-end}
.fr-card small{display:block;font:900 11.5px Nunito,system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:#FFD66B}
.fr-card b{display:block;margin-top:6px;font:900 21px/1.15 Nunito,system-ui,sans-serif;letter-spacing:-.2px}
.fd-rule .fd-txt{margin-top:12px}
.cb-tro3 .t2{width:86px;margin-left:-43px}.cb-tro3 .t1,.cb-tro3 .t3{width:56px}
.fr-card img{transform:scale(1.5);transform-origin:50% 6%}
/* 11 Nov, Joshua's own picture: Bruno serving at his phone on a tripod (cast/film/bruno-film.webp) */
.hf-oc{padding-right:150px}
.hf-oc .hf-ocp{right:2px;bottom:8px;height:146px;max-width:150px}
.fd-au img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #ECECF1}

/* Daily quiz (11 Nov): the card at the top of the Feed, the 3-question sheet and the score screen (feed.js dq*) */
.dq-card{display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 6px;padding:14px 14px 14px 12px;border:2px solid #B9DDFB;border-radius:20px;background:#E8F4FE;box-shadow:0 4px 0 #B9DDFB;text-align:left;cursor:pointer;font-family:Nunito,system-ui,sans-serif}
.dq-card:active{transform:translateY(3px);box-shadow:0 1px 0 #B9DDFB}
.dq-faces{flex:none;display:flex}.dq-faces img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2.5px #fff;margin-left:-12px;background:#fff}.dq-faces img:first-child{margin-left:0}
.dq-t{flex:1;min-width:0}.dq-t small{display:flex;align-items:center;gap:4px;font:900 11.5px Nunito,system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#1F7FCF}
.dq-t small img{width:14px;height:14px;margin-left:2px}
.dq-t b{display:block;margin-top:3px;font:900 17px/1.2 Nunito,system-ui,sans-serif;color:#2B2B33}.dq-t em{display:block;margin-top:2px;font:700 13px Nunito,system-ui,sans-serif;font-style:normal;color:#5E6B7A}
.dq-go{flex:none;padding:10px 16px;border-radius:14px;background:#2F9BF0;box-shadow:0 3px 0 #1E7FD0;color:#fff;font:900 14.5px Nunito,system-ui,sans-serif}
.dq-dots{flex:none;display:flex;gap:5px}.dq-dots i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#FFD9D9}.dq-dots i.ok{background:#58CC02;color:#fff}.dq-dots svg{width:14px;height:14px}
.dq-card.done{background:#F3F9FF;border-color:#D6E9FA;box-shadow:0 4px 0 #D6E9FA}
.dq-pk{flex:none;display:flex;align-items:center;justify-content:center;width:64px;height:86px;border-radius:12px;background:#E8F4FE;flex-direction:column;gap:0}
.dq-pk img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px #fff;margin-top:-10px}.dq-pk img:first-child{margin-top:0}
.dq-peek .fd-pt small{color:#1F7FCF}
.dq-sh{position:relative;padding:4px 20px 22px;font-family:Nunito,system-ui,sans-serif}
.dq-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}.dq-top small{font:900 13px Nunito,system-ui,sans-serif;color:#8C8C98}
.dq-prog{flex:1;display:flex;gap:6px}.dq-prog i{flex:1;height:10px;border-radius:99px;background:#EDEDF1}.dq-prog i.on{background:#B9DDFB}.dq-prog i.ok{background:#58CC02}.dq-prog i.no{background:#FF8A8A}
.dq-host{display:flex;align-items:center;gap:10px}.dq-host img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #ECECF1}
.dq-host b{display:block;font:900 15.5px Nunito,system-ui,sans-serif;color:#2B2B33}.dq-host small{display:block;font:800 12.5px Nunito,system-ui,sans-serif;color:#1F7FCF}
.dq-q{margin:14px 0 14px}
.dq-next{display:block;width:100%;margin-top:14px;height:52px;border:0;border-radius:16px;background:#2F9BF0;box-shadow:0 4px 0 #1E7FD0;color:#fff;font:900 16.5px Nunito,system-ui,sans-serif;cursor:pointer}
.dq-next:active{transform:translateY(4px);box-shadow:none}
.dq-end{text-align:center;padding-top:6px}.dq-faces.big{justify-content:center}.dq-faces.big img{width:64px;height:64px;margin-left:-16px;box-shadow:0 0 0 3px #fff}.dq-faces.big img:first-child{margin-left:0}
.dq-end h3{margin:14px 0 2px;font:900 24px Nunito,system-ui,sans-serif;color:#2B2B33}
.dq-sc{margin:0;font:800 15px Nunito,system-ui,sans-serif;color:#6B6B78}.dq-sc b{font-size:20px;color:#2B2B33}
.dq-gain{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.dq-gain span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;background:#FFF5D6;font:900 14px Nunito,system-ui,sans-serif;color:#8A5A00}
.dq-gain span+span{background:#FFE9DC;color:#B24A12}.dq-gain img{width:18px;height:18px}
.dq-rev{display:grid;gap:8px;text-align:left}.dq-rev>div{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#F6F7FA}
.dq-rev i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FF8A8A;color:#fff;font:900 13px Nunito,system-ui,sans-serif;font-style:normal}.dq-rev .ok i{background:#58CC02}.dq-rev i svg{width:15px;height:15px}
.dq-rev b{display:block;font:800 14px/1.3 Nunito,system-ui,sans-serif;color:#2B2B33}.dq-rev small{display:block;margin-top:2px;font:800 13px Nunito,system-ui,sans-serif;color:#3F9A1C}
.dq-tm{margin:14px 0 0;font:700 13.5px Nunito,system-ui,sans-serif;color:#8C8C98}
.dq-sh .fd-burst{position:absolute}
.dq-t em{display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dq-t em img{width:14px;height:14px;flex:none}

/* Invite friends (11 Nov): the share sheet button in Friends, WhatsApp + Copy underneath; the Feed's top button says Invite friends until you have one */
.fd-frb.inv{padding:0 16px 0 12px;gap:6px;border-color:#BFE3F7;box-shadow:0 3px 0 #BFE3F7;color:#1592CC}.fd-frb.inv b{font:900 20px/1 Nunito,system-ui,sans-serif}
.fr-none{margin:0 0 6px;font:700 15px Nunito,system-ui,sans-serif;color:#6A7A8C}
.fr-inv{margin-top:14px;text-align:center}
.fr-ib{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:52px;border:0;border-radius:16px;background:#2F9BF0;box-shadow:0 4px 0 #1E7FD0;color:#fff;font:900 16.5px Nunito,system-ui,sans-serif;cursor:pointer}
.fr-ib:active{transform:translateY(4px);box-shadow:none}.fr-ib svg{width:20px;height:20px}
.fr-iw{display:flex;gap:8px;margin-top:8px}
.fr-iw button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border:2px solid #E5E5EA;border-radius:14px;background:#fff;box-shadow:0 3px 0 #E5E5EA;font:800 14.5px Nunito,system-ui,sans-serif;color:#3C3C44;cursor:pointer}
.fr-iw button:first-child{color:#1E9E50}.fr-iw svg{width:18px;height:18px}
.fr-inv small{display:block;margin-top:8px;font:700 12.5px Nunito,system-ui,sans-serif;color:#8C8C98}
/* weekly focus sheet: grown-ups can see more ideas (11 Nov) */
.fcs-more{display:block;width:100%;margin-top:8px;padding:10px;border:0;background:none;color:#B87A1E;font:900 14.5px Nunito,sans-serif;cursor:pointer}
.fcs-more:active{opacity:.6}
/* Pro Shop: the Courts / Rally kit grid sits straight on the page. duo/duo2's .lkr shadow drew a line under it (11 Nov, Joshua) */
html .hf.ps .lkr{box-shadow:none!important;background:none!important;border:0!important}
/* game app icons (11 Nov): the picture is the whole tile, already rounded */
i.gart{background:none!important;box-shadow:none!important;padding:0!important;overflow:visible!important;color:inherit}
i.gart img{display:block;width:100%;height:100%;object-fit:cover;border-radius:23%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.14))}
.prf-gs i.gart,.pf-gg i.gart{width:58px!important;height:58px!important}.pl-g i.gart{width:50px!important;height:50px!important;flex:none}
/* profile picture picker (11 Nov) */
button.prf-hav{border:0;cursor:pointer;font:inherit}
.prf-pen{position:absolute;right:2px;bottom:4px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:#2B70E4;box-shadow:0 2px 6px rgba(0,30,90,.25)}
.prf-pen svg{width:17px;height:17px}
.avs .jx-shh{margin-bottom:12px}
.avs-t{display:flex;gap:6px;padding:4px;margin-bottom:14px;border-radius:14px;background:#F1F2F6}
.avs-t button{flex:1;height:38px;border:0;border-radius:11px;background:none;font:900 14.5px Nunito,sans-serif;color:#6B6E80;cursor:pointer}
.avs-t button.on{background:#fff;color:#1F2030;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.avs-g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avs-g button{aspect-ratio:1;padding:3px;border:3px solid transparent;border-radius:50%;background:none;cursor:pointer;transition:transform .12s}
.avs-g button:active{transform:scale(.94)}
.avs-g button.on{border-color:#58CC02}
.avs-g img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.avs-n{margin:14px 2px 2px;color:#7A7D8F;font:700 13px/1.4 Nunito,sans-serif;text-align:center}

/* 11 Nov: Coach Carlos whiteboard tips (tips/board/) are whole scenes, so they fill the banner edge to edge */
.fd-ban.brd{height:auto;aspect-ratio:960/645;background:#DCE8F5}
.fd-ban.brd img{object-fit:cover;padding:0}

/* 11 Nov: pick your court for the profile header (k.bg, design/assets/courts/). A soft dark wash keeps the white name readable on every court */
html.va #app .prf .prf-hero.bgc{background:#2F8CF0}
.prf-bgi{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.prf-hero.bgc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,40,.10) 0%,rgba(10,20,40,.18) 55%,rgba(10,20,40,.42) 100%)}
.prf-hero.bgc .prf-court{display:none}
.prf-hero.bgc .prf-hn,.prf-hero.bgc .prf-hs{text-shadow:0 2px 10px rgba(0,0,0,.35)}
.prf-hbg{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:12px;background:#fff;box-shadow:0 3px 0 rgba(0,40,110,.22);color:#1F6FCC;font:900 14px Nunito,system-ui,sans-serif;cursor:pointer}
.prf-hbg svg{width:17px;height:17px}
.prf-hbg:active{transform:translateY(3px);box-shadow:none}
.avs-c{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.avs-c button{position:relative;aspect-ratio:3/2;padding:0;border:3px solid transparent;border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;transition:transform .12s}
.avs-c button i{position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg,#5CB8FF,#2F8CF0)}
.avs-c button:active{transform:scale(.96)}
.avs-c button.on{border-color:#58CC02}
.avs-c img{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;object-fit:cover}
.avs-c span{position:absolute;left:8px;bottom:7px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.92);color:#1F2030;font:900 12px Nunito,sans-serif}

/* 11 Nov: the monthly prize draw (draws.js): a Coach Carlos post in the Feed, and the entry sheet */
.fd-draw .drw-st{margin:0;color:#4B4B55;font:700 14.5px/1.45 Nunito,system-ui,sans-serif}
.fd-draw .drw-st b{color:#1F2030}
.fd-draw .drw-go{border-color:#58CC02;background:#58CC02;box-shadow:0 3px 0 #46A302;color:#fff}
.fd-draw .drw-go.in{border-color:#E3E3E8;background:#fff;box-shadow:0 3px 0 #E3E3E8;color:#58A700}
.drs-p{display:block;width:150px;height:150px;margin:-4px auto 8px;border-radius:22px;object-fit:cover;box-shadow:0 6px 18px rgba(20,30,60,.14)}
.drs .jx-shh{text-align:center}
.drs-n{display:flex;align-items:center;gap:12px;margin:12px 0 14px;padding:12px 14px;border-radius:16px;background:#F1FBE8}
.drs-n>b{font:900 34px/1 Nunito,sans-serif;color:#46A302}
.drs-n span{font:900 16px/1.2 Nunito,sans-serif;color:#1F2030}.drs-n small{display:block;margin-top:2px;font:700 12.5px/1.35 Nunito,sans-serif;color:#6B6E80}
.drs-f label{display:block;margin-bottom:10px}
.drs-f label>span{display:block;margin-bottom:5px;font:900 13.5px Nunito,sans-serif;color:#2B2B33}
.drs-f input:not([type=checkbox]){width:100%;box-sizing:border-box;height:46px;padding:0 14px;border:2px solid #E3E3E8;border-radius:14px;font:700 16px Nunito,sans-serif;color:#1F2030;background:#fff}
.drs-f input:focus{outline:0;border-color:#1CB0F6}
.drs-ask{margin:-2px 2px 10px;font:800 13px Nunito,sans-serif;color:#CE7A00}
label.drs-ok{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#F6F7FA;cursor:pointer}
.drs-ok input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:#58CC02}
.drs-ok span{margin:0!important;font:700 13.5px/1.4 Nunito,sans-serif!important;color:#4B4B55!important}
.drs-err{min-height:18px;margin:6px 2px;font:800 13px Nunito,sans-serif;color:#E5484D}
.drs-b{width:100%;height:50px;margin-top:4px;font:900 16px Nunito,sans-serif!important;background:#58CC02!important;box-shadow:0 4px 0 #46A302!important}.drs-b:disabled{opacity:.6}
.drs-r{margin-top:12px;color:#7A7D8F;font:700 12.5px/1.45 Nunito,sans-serif}
.drs-r summary{cursor:pointer;font-weight:900;color:#6B6E80}
.drs-r p{margin:8px 0 0}
/* prize draw round 2 (11 Nov): invite a friend + country */
.drs-f select{width:100%;box-sizing:border-box;height:46px;padding:0 12px;border:2px solid #E3E3E8;border-radius:14px;font:700 16px Nunito,sans-serif;color:#1F2030;background:#fff;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8A8D9C 50%),linear-gradient(135deg,#8A8D9C 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px;background-repeat:no-repeat}
.drs-inv{margin:0 0 14px;padding:14px;border-radius:16px;background:#EAF6FF;border:2px solid #CDEBFF}
.drs-inv>b{display:block;font:900 16px/1.2 Nunito,sans-serif;color:#1F2030}
.drs-inv>p{margin:5px 0 0;font:700 13.5px/1.4 Nunito,sans-serif;color:#4B4B55}
.drs-inv .drs-fr{font-weight:900;color:#1899D6}
.drs-sh{width:100%;height:46px;margin-top:10px;border:0;border-radius:14px;font:900 15.5px Nunito,sans-serif;color:#fff;background:#1CB0F6;box-shadow:0 4px 0 #1899D6;cursor:pointer}
.drs-sh:active{transform:translateY(2px);box-shadow:0 2px 0 #1899D6}
.drs-r ol{margin:8px 0 0;padding-left:18px}.drs-r li{margin-bottom:5px}
.avs-done{display:block;width:100%;height:50px;margin-top:14px}   /* the picture sheet stays open while you try pictures (11 Nov) */
#sheet.still>*{animation:none!important}
.avs-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.avs-me{position:relative;flex:none;width:96px;height:64px;border-radius:14px;overflow:hidden;background:#2F8CF0;box-shadow:0 4px 12px rgba(20,30,60,.15)}
.avs-me.blue{background:linear-gradient(160deg,#4AA8FF,#2F7FE0)}
.avs-me>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avs-me>img.f{inset:auto;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;border:2.5px solid #fff;object-fit:cover;background:#fff}
/* 11 Nov: six sticker sets now (Carlos, Bruno, Kip, Phoebe, Skye, Things), so the set chips scroll sideways */
.fd-tch{max-width:312px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.fd-tch::-webkit-scrollbar{display:none}
.fd-tch button{flex:none}
.fd-tf .fx-zzz[data-s="rain"]::after,.fd-tf .fx-zzz[data-s="rain"]::after{content:none}
/* 11 Nov (later): tips now show a cast character acting out the problem (tips/cast/, see-through), on the tip sheet's purple so the card matches the sheet it opens */
.fd-ban.tcast{height:200px;background:linear-gradient(181deg,#6D49FF 1%,#592EDA 99%)}
.fd-ban.tcast img{padding:14px 12px 10px;filter:drop-shadow(0 8px 14px rgba(20,8,70,.3))}

/* 12 Nov review: no streak yet = grey flame (a lit flame next to "0" read like a loss) */
.st0 img{filter:grayscale(1);opacity:.5}.st0{color:#9AA0AE!important}
/* 12 Nov, Joshua: "like those little vans by the pitch that sell hot chips, burgers and hot dogs". Big Al's Snack Van: the van photo is the hero
   (GPT Image 2.6, design/assets/club/van-hero.webp), the shelves are a chalkboard menu */
.cbv[data-seg="shop"] .cb-hero{min-height:214px;padding:22px 18px 20px;background:#6E5FC8}
.cbv[data-seg="shop"] .cb-hero::before{content:"";-webkit-mask:none;mask:none;filter:none;inset:0;height:auto;z-index:1;background:linear-gradient(100deg,rgba(32,22,74,.62) 0%,rgba(32,22,74,.28) 34%,transparent 52%)}
.cbv[data-seg="shop"] .cb-hero::after{z-index:1;height:10px;background:#3C8A3A;box-shadow:inset 0 3px 0 #52A84E}
.cbv[data-seg="shop"] .cb-hart{left:0;top:0;right:auto;bottom:auto;width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:none;z-index:0}
.cbv[data-seg="shop"] .cb-hero h1{z-index:2;max-width:44%;font-size:27px;color:#fff;text-shadow:0 2px 0 rgba(20,12,50,.35)}
.cbv[data-seg="shop"] .cb-hero small{z-index:2;max-width:44%;color:#F3EEFF;text-shadow:0 1px 0 rgba(20,12,50,.35)}
.cbv[data-seg="shop"] .cb-hbal{z-index:3}
.cbv[data-seg="shop"] .ps-cats{position:relative;margin:4px -16px 14px;padding:30px 14px 14px;gap:7px;background:#2D332E;box-shadow:inset 0 0 0 5px #8A5A2B,inset 0 0 0 7px #6B4220}
.cbv[data-seg="shop"] .ps-cats::before{content:"Today’s menu";position:absolute;left:18px;top:9px;font:700 13px/1 "Segoe Print","Bradley Hand","Chalkboard SE",cursive;color:#FFE9A8;letter-spacing:.3px}
.cbv[data-seg="shop"] .ps-cats button{height:34px;padding:0 13px;border:1.5px dashed rgba(255,255,255,.45);border-radius:10px;background:transparent;box-shadow:none;font:700 14px "Chalkboard SE","Bradley Hand",Nunito,system-ui,sans-serif;color:#F4F1E8}
.cbv[data-seg="shop"] .ps-cats button.on{border:1.5px solid #F08A00;background:#F08A00;color:#fff}

/* 12 Nov, Joshua: "a football pitch rather than the tennis court on the profile". The plain header is a mown pitch (stripes, halfway line, centre circle); the buttons and shadows go green to match */
html.va #app .prf .prf-hero{background:repeating-linear-gradient(90deg,#3FB765 0 44px,#36AB5B 44px 88px)}
html.va #app .prf .prf-hero.bgc{background:#1E7B4B}
.prf-court{opacity:.42;background:linear-gradient(#fff,#fff) 0 89px/100% 3px no-repeat}
.prf-court::before{content:"";position:absolute;left:50%;top:89px;width:176px;height:176px;border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%)}
.prf-court::after{background:rgba(0,60,25,.16)}
.prf-hsw,.prf-hbg{color:#167A43;box-shadow:0 3px 0 rgba(0,60,25,.25)}
html.va #app .prf .prf-hav{box-shadow:0 6px 0 rgba(0,60,25,.22)}
.avs-c button i{background:repeating-linear-gradient(90deg,#3FB765 0 16px,#36AB5B 16px 32px)}
.avs-c button i::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;border:2px solid rgba(255,255,255,.6);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 0 transparent}
.avs-me.pitch{background:repeating-linear-gradient(90deg,#3FB765 0 12px,#36AB5B 12px 24px)}