/* ===== v31 · a clean, modern look for the bars, the buttons, the badges and the achievements =====
   Loaded last, so it only restyles; nothing on the page is moved or removed. */
:root{--acc1:#ff7a59;--acc2:#ff4f8b;--brand1:#2a63e8;--brand2:#6a44e6;--line:#e9eef5}

/* ---------- top bar: plain icons, no boxes ---------- */
header.top{background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid var(--line);box-shadow:none;gap:2px;padding:6px 10px;min-height:52px}
header.top .nbell,header.top #sbtn,header.top .ic{width:38px;height:38px;margin:0;border:0;border-radius:50%;background:transparent;box-shadow:none;display:grid;place-items:center;color:#273452;flex:none;transition:background .2s,color .2s,transform .15s}
header.top .nbell:hover,header.top #sbtn:hover{background:#f1f4fa;color:var(--brand1)}
header.top .nbell:active,header.top #sbtn:active{transform:scale(.92)}
header.top .nbell svg,header.top #sbtn svg{width:23px;height:23px;stroke-width:1.8}
header.top .nbell em{top:3px;right:2px;min-width:16px;height:16px;line-height:16px;font-size:.6rem;padding:0 4px;background:linear-gradient(135deg,var(--acc1),var(--acc2));box-shadow:0 0 0 2px #fff}
/* the premium button: a small golden crown */
header.top .pbtn{flex:none;height:30px;padding:0 12px 0 9px;margin:0 4px 0 0;border:0;border-radius:99px;display:inline-flex;align-items:center;gap:5px;
 background:linear-gradient(135deg,#ffd45c,#ff9f1c);color:#4a2c00;font-size:.74rem;font-weight:800;box-shadow:0 4px 12px rgba(255,159,28,.35);white-space:nowrap;min-width:0;overflow:visible}
header.top .pbtn svg{width:16px;height:16px;flex:none}
/* the account button: only the round picture */
header.top .me{border:0;background:transparent;box-shadow:none;padding:2px;margin-left:2px;border-radius:50%;flex:none}
header.top .me>svg{display:none}
header.top .me .av{width:34px;height:34px;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(106,68,230,.35)}

/* ---------- bottom bar: icons and small words, the chosen one in colour ---------- */
.nav{background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:0 10px 30px rgba(31,58,95,.12);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
.nav button{background:none!important;box-shadow:none!important;transform:none!important;color:#8a94a8;padding:6px 4px 4px;min-width:0;flex:1;border-radius:14px;gap:3px;transition:color .2s}
.nav button svg,.nav button .i{width:23px;height:23px;stroke-width:1.8;transition:transform .2s}
.nav button span{font-size:.66rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.nav button.on{color:var(--brand1)}
.nav button.on svg{stroke:url(#nvg);transform:translateY(-1px)}
.nav button.on span{background:linear-gradient(135deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.nav button.on::after{content:'';position:absolute;bottom:-1px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:linear-gradient(90deg,var(--brand1),var(--brand2))}
.nav button:active svg{transform:scale(.9)}
@media(min-width:900px){.nav button{flex:none;padding:10px 4px}.nav button.on::after{left:auto;right:-6px;top:50%;bottom:auto;width:3px;height:22px;margin:-11px 0 0}}

/* ---------- buttons: small and tidy on a phone, never on top of each other ---------- */
@media(max-width:600px){
 .btn{padding:8px 14px;font-size:.84rem;border-radius:12px;gap:6px}
 .btn svg{width:16px;height:16px}
 .btn.sm{padding:5px 10px;font-size:.76rem;border-radius:10px}
 .btn.big{padding:11px 18px;font-size:.95rem}
 .ic{width:34px;height:34px}
 .pa,.pfact,.secH,.audocs,.shrow,.pfbtns{flex-wrap:wrap;row-gap:6px}
 .pa .btn,.pa button{flex:none}
 header.top{padding:5px 6px}
 header.top .nbell,header.top #sbtn{width:34px;height:34px}
 header.top .nbell svg,header.top #sbtn svg{width:21px;height:21px}
 header.top .me .av{width:30px;height:30px}
 header.top .brand .sulogo{font-size:11px;margin:0 0 6px}
 header.top .pbtn{height:28px;padding:0 9px 0 7px;font-size:.68rem}
}
/* a very narrow phone: the premium button keeps only its crown */
@media(max-width:380px){header.top .pbtn span{display:none}header.top .pbtn{width:30px;padding:0;justify-content:center}}

/* ---------- badges: small clean pills ---------- */
.bdg,.bdg2{background:linear-gradient(135deg,var(--acc1),var(--acc2));color:#fff;border:0;font-weight:700;letter-spacing:.01em;padding:3px 10px;box-shadow:0 3px 10px rgba(255,79,139,.25)}
.tag{background:#eef2fb;color:var(--brand1);border:0;font-weight:700;border-radius:99px;padding:2px 8px;font-size:.66rem}

/* ---------- achievements: round medals on clean cards ---------- */
.achgrid{gap:10px}
.card.ach{background:#fff;border:1px solid var(--line);box-shadow:0 4px 16px rgba(31,58,95,.06);border-radius:20px;padding:16px 12px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.card.ach .ai{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;margin-bottom:6px;
 background:radial-gradient(circle at 30% 25%,#fff 0 30%,#f3f5f9 70%);box-shadow:inset 0 0 0 3px #e3e8f0}
.card.ach.on .ai{background:radial-gradient(circle at 30% 25%,#fff 0 28%,#fff1e6 72%);box-shadow:inset 0 0 0 3px transparent,0 6px 16px rgba(255,122,89,.28);
 border:3px solid transparent;background-clip:padding-box;outline:3px solid transparent}
.card.ach.on .ai::before{content:'';position:absolute;inset:-3px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#ffd45c,var(--acc1),var(--acc2));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card.ach:not(.on) .ai{filter:grayscale(1);opacity:.55}
.card.ach .alk{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#fff;font-size:.7rem;font-style:normal;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.15);filter:none}
.card.ach b{font-size:.86rem;line-height:1.25;color:#1f2a44}
.card.ach small.muted{font-size:.72rem;line-height:1.3}
.card.ach .bar{width:100%;height:5px;border-radius:5px;background:#eef1f6;margin-top:6px;overflow:hidden}
.card.ach .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc1),var(--acc2))}
.card.ach.on .bar i{background:linear-gradient(90deg,#20c38b,#14a874)}
.card.ach>small:last-child{font-size:.7rem;font-weight:700;color:#8a94a8}
.card.ach.on>small:last-child{color:#14a874}
.ach-hero{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#fff;border:0}
.ach-hero .muted{color:rgba(255,255,255,.85)}
.ach-hero .ring{background:conic-gradient(#ffd45c calc(var(--p)*1%),rgba(255,255,255,.25) 0)!important}
.ach-hero .ring b,.ach-hero .ring small{color:#1f2a44}
.ach-hero .pill.ok{background:rgba(255,255,255,.2);color:#fff}
@media(max-width:600px){.card.ach .ai{width:54px;height:54px;font-size:1.55rem}.card.ach{padding:14px 10px 10px}}

/* ---------- messages: a clean list, and the chat over the whole page ---------- */
.chlist2{padding:4px 0;overflow:hidden}
.chrow2{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:12px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;border-bottom:1px solid var(--line);transition:background .15s}
.chrow2:last-child{border-bottom:0}.chrow2:hover,.chrow2:active{background:#f6f8fc}
.chav{position:relative;flex:none}.chav .av{width:46px;height:46px}
.chav .od{position:absolute;right:0;bottom:1px;width:12px;height:12px;margin:0;border:2px solid #fff;border-radius:50%}
.chtx{min-width:0;display:flex;flex-direction:column;gap:2px}
.chtop{display:flex;align-items:center;gap:6px;min-width:0}.chtop b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chtop small{margin-left:auto;color:#8a94a8;font-size:.7rem;flex:none}
.chlast{color:#6b7790;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chlast.new{color:#1f2a44;font-weight:700}.chlast i{color:#a3acbd}
.chrow2 .unb{flex:none;min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:99px;text-align:center;font-size:.7rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--acc1),var(--acc2))}
.chrow2 .ansby{font-size:.68rem;color:#8a94a8}
#chatfs{position:fixed;inset:0;z-index:80;background:#f5f7fb;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;padding-bottom:env(safe-area-inset-bottom)}
#chatfs.in{transform:none}
body.chatopen{overflow:hidden}
.cfh{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--line)}
.cfx{width:28px;height:28px;flex:none;border:0;border-radius:50%;background:#f1f4fa;color:#4a5670;display:grid;place-items:center;cursor:pointer}
.cfx svg{width:14px;height:14px;stroke-width:2.4}
.cfav .av{width:36px;height:36px}.cfav,.cfn{cursor:pointer}
.cfn{display:flex;flex-direction:column;min-width:0}.cfn b{font-size:.95rem}.cfn small{font-size:.72rem;color:#8a94a8;display:flex;align-items:center;gap:4px}
.cft{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.cft .bub{max-width:78%;padding:9px 13px;border-radius:18px;font-size:.92rem;line-height:1.4;overflow-wrap:anywhere}
.cft .bub.me{align-self:flex-end;color:#fff;background:linear-gradient(135deg,var(--brand1),var(--brand2));border-bottom-right-radius:6px}
.cft .bub.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.cft .bub small{display:block;font-size:.62rem;opacity:.7;margin-top:2px}
.cft .chempty{margin:auto}
.cfi{display:flex;gap:8px;align-items:center;padding:8px 10px;background:#fff;border-top:1px solid var(--line)}
.cfi .fi{border-radius:99px;padding:10px 14px;font-size:.92rem}
.cfs{width:40px;height:40px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand1),var(--brand2));cursor:pointer}
.cfs svg{width:18px;height:18px}
.cfr{margin:0;padding:0 12px 8px;background:#fff;font-size:.66rem;color:#8a94a8;text-align:center}

/* ===== v31.1 · SpeakUp icons in place of keyboard emojis ===== */
.ei{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;line-height:0;font-style:normal;flex:none}
.ei svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1.5px rgba(31,58,95,.18))}
.card.ach .ai .ei{width:58%;height:58%;vertical-align:0}
.card.ach .alk .ei{width:100%;height:100%}
.bdg .ei,.bdg2 .ei,.pill .ei{width:1.05em;height:1.05em;margin-right:1px}
.bdg .ei svg,.bdg2 .ei svg{filter:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.85);border-radius:50%}
.fli .ei,.evi .ei,.ev .evi .ei{width:1.4em;height:1.4em}
h1 .ei,h2 .ei,h3 .ei{vertical-align:-.15em}

/* ---------- reactions under a post ---------- */
.rxbar{display:flex;align-items:center;gap:8px;margin:10px 2px 0;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:.8rem;color:#7b869c}
.rxsum{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.rxsum:hover span:last-child{text-decoration:underline}
.rxst{display:inline-flex}
.rxst .ei{width:19px;height:19px;margin-left:-5px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:#fff}
.rxst .ei:first-child{margin-left:0}
.rxst .ei svg{filter:none}
.rxcm{margin-left:auto}
.post .pa{margin-top:4px;gap:4px}
.post .pa .rt{color:#5b6680;background:none;border:0;font-weight:700}
.post .pa .rt .ei{width:18px;height:18px}
.post .pa .rt.on{background:none;color:var(--brand1)}
/* the reaction picker: a small floating pill of round icons */
.post{position:relative}
.rx.rxpick{border:0;margin:0 0 6px;padding:6px 8px;gap:4px;width:max-content;max-width:100%;border-radius:99px;background:#fff;box-shadow:0 8px 26px rgba(31,58,95,.18),0 0 0 1px var(--line);flex-wrap:nowrap}
.rx.rxpick .r{border:0;background:none;padding:2px;border-radius:50%;display:flex;flex-direction:column;align-items:center;font-size:1.55rem;line-height:1;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.6,1)}
.rx.rxpick .r .ei{width:34px;height:34px}
.rx.rxpick .r small{display:none}
.rx.rxpick .r:hover,.rx.rxpick .r:focus-visible{transform:scale(1.28) translateY(-5px)}
.rx.rxpick .r.on .ei{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand1);border-radius:50%}
.rx.rxpick.show .r{animation:rxpop .3s both}
.rx.rxpick.show .r:nth-child(2){animation-delay:.03s}.rx.rxpick.show .r:nth-child(3){animation-delay:.06s}.rx.rxpick.show .r:nth-child(4){animation-delay:.09s}.rx.rxpick.show .r:nth-child(5){animation-delay:.12s}.rx.rxpick.show .r:nth-child(6){animation-delay:.15s}
@keyframes rxpop{from{transform:translateY(10px) scale(.4);opacity:0}to{transform:none;opacity:1}}
@media(max-width:600px){.rx.rxpick .r .ei{width:30px;height:30px}.rxst .ei{width:17px;height:17px}}

/* ===== v32 · modern pictures in place of the emojis of the lessons and games ===== */
.fe{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em;line-height:0;position:relative}
.fe img{width:100%;height:100%;object-fit:contain;display:block}
.fe-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;line-height:normal}
.fe.fe-x{width:auto;height:auto;line-height:inherit;vertical-align:baseline}
.fe.fe-x .fe-t{position:static!important;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}

/* ---------- #tags inside posts ---------- */
.htl{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--brand1);cursor:pointer}
.post .sq .htl,.post .tile .htl,.post .sqp .htl{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- the world's number one: a square card ---------- */
.wtpost .ph{display:none}
.wtsq{position:relative;overflow:hidden;aspect-ratio:1/1;max-height:460px;margin:2px 0 4px;border-radius:22px;padding:22px 18px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#fff;
 background:radial-gradient(120% 80% at 50% 0%,#7b5cff 0%,#3f5ff0 45%,#1f2f8f 100%)}
.wtglow{position:absolute;inset:-30%;background:conic-gradient(from 0deg,rgba(255,212,92,.0),rgba(255,212,92,.35),rgba(255,79,139,.0),rgba(255,212,92,.3),rgba(255,212,92,0));animation:wtspin 14s linear infinite;pointer-events:none}
@keyframes wtspin{to{transform:rotate(360deg)}}
.wtrank{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);font-weight:800;font-size:.85rem;letter-spacing:.02em}
.wtrank .ei{width:20px;height:20px}
.wtav{position:relative;padding:5px;border-radius:50%;background:linear-gradient(135deg,#ffd45c,#ff7a59,#ff4f8b);box-shadow:0 12px 34px rgba(0,0,0,.3)}
.wtav .av{width:112px;height:112px;font-size:2.4rem;border:4px solid #fff;box-sizing:border-box}
.wtname{position:relative;font-size:1.25rem;font-weight:800}
.wttag{cursor:pointer;color:#ffe08a}
.wtpts{position:relative;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:1rem}
.wtpts .ei{width:22px;height:22px}
.wtsub{position:relative;font-size:.78rem;opacity:.8}
@media(max-width:600px){.wtav .av{width:92px;height:92px}.wtname{font-size:1.1rem}}
.fooff{padding:28px 18px}