:root{ --bg:#0e1626; --bg2:#151f36; --card:#17223b; --card2:#1f2b48; --card3:#26365a; --ink:#eaf0f9; --muted:#a5b3cb; --faint:#9aa7bd; --line:#31415f; --line2:#3e5178; /* Grape, hue 301 — dead centre of the only unclaimed band (281–337°) across the global language apps and the top Uzbek consumer apps. Nearest claimed hues are Ucell 278° and Anorbank 336°, 23° and 35° away. The old cyan/teal collided with Payme #00C0C9 (12M users) and Iman #01CAB0 and made the app read as fintech; the mulberry that replaced it sat at 335° and read as pink. Every token below clears 4.5:1 as text on every surface in this file, --card3 included. */ --brand:#D685D5; /* dark-surface tint — 7.04:1 on --bg, 6.15:1 on --card, 4.65:1 on --card3 */ --brand2:#E6A8E5; /* lighter partner: links, and text on --brand-field */ --brand-field:#672266; /* deep brand SURFACE — carries --paper text at 9.20:1 */ --brand-deep:#9F389D; /* light-surface / print / icon-on-paper — 5.95:1 on white */ --brand-ink:#290A28; /* near-black — text on a light brand surface */ --paper:#F6EFE4; /* warm light surface — never pure #fff */ --accent:#C48BDA; --accent2:#DDB6EC; /* violet 283° — the other half of the same free band */ --good:#34d399; --good-ink:#bff3dd; --good-bg:#0d3d2f; --bad:#fb7185; --bad-ink:#ffd8de; --bad-bg:#3f1522; --warn:#fbbf24; --gold:#fcd34d; --ink-dark:#04121f; --radius:18px; --radius-sm:12px; --shadow:0 14px 40px rgba(3,8,20,.5); --shadow-sm:0 6px 18px rgba(3,8,20,.35); --tap:44px; /* themed surfaces that used to be hardcoded, so light mode can move them */ --glow1:#1d3a63; --glow2:#392a63; /* the two page radial gradients */ --header-bg:rgba(14,22,38,.86); /* sticky bar, sits over the blur */ --route-bg:linear-gradient(180deg,rgba(29,58,99,.62),rgba(21,31,54,.96)); --route-border:rgba(214,133,213,.34); --locked-ink:#C9CEDA; /* text on a locked step's own surface */ --chest-locked-bg:#2A2114; --chest-locked-ink:#CFC5A8; color-scheme:dark; } /* ============================================================ LIGHT THEME Dark is the base above; this block is the only place light values live. An inline script in stamps data-theme before first paint, so there is no flash and no need to duplicate this block into a prefers-color-scheme query. Every value below is measured: all text tokens clear 4.5:1 on ALL FOUR light surfaces (--bg/--card/--card2/--card3), --card3 being the worst case. Deliberately NOT inverted: the deep section FIELDS (--sec-field) stay saturated in both themes. That keeps the "joriy dars = to'q maydon + och matn" rule — a pale pastel block is the thing that read as qizlarcha, and it is also why the daily route still looks like itself in light mode. ============================================================ */ :root[data-theme="light"]{ --bg:#F4ECE0; --bg2:#EFE5D6; --card:#FBF6EE; --card2:#F3EADC; --card3:#EADFCD; --ink:#241A15; --muted:#5C5149; --faint:#6E6157; --line:#DED2C0; --line2:#C6B69E; /* the brand flips to its light-surface tint: #D685D5 measures 1.9:1 on paper and is unreadable there; #9F389D is the same hue at 4.52:1 on the worst surface. */ --brand:#9F389D; --brand2:#7E2A7C; --brand-deep:#9F389D; --brand-ink:#290A28; /* system colours darken so they stay legible as TEXT on light surfaces */ --good:#0F6A45; --good-ink:#0B3D28; --good-bg:#DCEFE4; --bad:#B3283F; --bad-ink:#5E1522; --bad-bg:#F7DFE3; --warn:#7E5113; --gold:#7A5A12; --ink-dark:#FBF6EE; --glow1:#E7DAF0; --glow2:#F3E2DA; --header-bg:rgba(251,246,238,.88); --route-bg:linear-gradient(180deg,rgba(255,252,247,.92),rgba(243,234,220,.96)); --route-border:rgba(159,56,157,.24); /* locked steps sit on their own PALE --sec-locked tint in light mode, so the dimmed light-grey ink from the dark theme would be invisible. 6.1:1 on every locked tint. */ --locked-ink:#5A5048; --chest-locked-bg:#F5EBD2; --chest-locked-ink:#5C4A1E; --shadow:0 14px 40px rgba(74,58,44,.16); --shadow-sm:0 6px 18px rgba(74,58,44,.12); color-scheme:light; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{margin:0;padding:0} body{ font-family:"Segoe UI",system-ui,-apple-system,"Inter",Roboto,Arial,sans-serif; font-size:16px; line-height:1.6; color:var(--ink); background: radial-gradient(1100px 560px at 82% -12%, var(--glow1) 0%, transparent 58%), radial-gradient(820px 480px at -12% 4%, var(--glow2) 0%, transparent 55%), var(--bg); background-attachment:fixed; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:var(--brand2);text-underline-offset:2px} :focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px} button:focus:not(:focus-visible){outline:none} .wrap{max-width:1000px;margin:0 auto;padding:4px 18px 120px} header.top{ position:sticky;top:0;z-index:50;backdrop-filter:blur(14px); /* The app body is --bg #0e1626. A white header above a dark app read as a separate site bolted on top, and the pale pink it picked up through the blur is exactly the "och pastel blok = qizlarcha" failure. Dark field, light text. */ background:var(--header-bg);border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); } .top-in{max-width:1000px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.2px;line-height:1.1} /* the stacked lockup (mark above wordmark) only stays legible at overlay sizes */ /* no white chip any more: the wordmark ships in the paper tint and reads directly on the dark overlay card, and a white plate behind it just fights the warm palette */ .logo .brand-logo{display:block;width:170px;height:auto;flex:0 0 auto;object-fit:contain} .logo .brand-logo-lg{width:210px} /* in the short header bar, and anywhere the logo sits beside text, use the mark alone: the wordmark renders about 5px tall at those sizes and just reads as a smudge */ .logo .brand-mark{display:block;width:38px;height:38px;flex:0 0 auto;object-fit:contain;border-radius:9px} /* ================= THE -ING DEVICE ================= -ing is at once the Uzbek polite imperative (keling, biling, gapiring), the English gerund (speaking, reading) and already the middle of bil-ING-o. Wherever a chrome label ends in those three literal letters they take the brand colour; nothing is cut, moved or abbreviated. Decorative colour only — it never carries meaning on its own. */ /* ============================================================ THE RIBBON — one continuous colour down the daily path. 8 anchors on a smooth analogous ramp: rose 330deg -> teal 176deg, hand-spaced 16-25deg apart so it reads as rose, grape, violet, indigo, blue, azure, cyan and teal rather than one purple family. Card N is filled gradient(180deg, --f1 -> --f2) where --f2 IS the next card's --f1, so each card ENDS in the colour the next one BEGINS with and the whole stack reads as a single top-to-bottom gradient rather than eight separate blocks. The old sequence jumped grape 301 -> violet 285 -> azure 218 -> bronze 33 -> green 126 -> magenta 324; leaning each card 38% toward the next could not harmonise hues that far apart, it only muddied them. An analogous ramp harmonises by construction. It also retires two collisions measured earlier: the old bronze sat 10deg from --warn and the old green 32deg from --good, so a section colour competed with the app's own success/warning vocabulary. Green and amber now mean ONLY correct and caution. Every value below is solved for a target luminance, not picked by eye: --f1/--f2 L=0.115 -> --paper label text 5.5:1 --sec L=0.400 -> >=5.1:1 on --bg/--card/--card2/--card3 (light: L=0.100, >=5.3:1) --l1/--l2 L=0.075 -> locked ink #C9CEDA >=5.3:1 (light: L=0.640, >=5.1:1) --sec-field/--sec-field2/--sec-locked were dropped: 0 references once the fills moved to --f1/--f2 and --l1/--l2. The chest stays gold on purpose — it is the reward, and it is meant to sit outside the ramp. */ .sk-vocab {--sec:#e68fbb;--sec-rgb:230,143,187;--sec-2:#ebb7d1;--f1:#ac2b6b;--f2:#a02d94;--l1:#6a4155;--l2:#684064} .sk-gram {--sec:#e58adc;--sec-rgb:229,138,220;--sec-2:#eab5e5;--f1:#a02d94;--f2:#8e35b1;--l1:#684064;--l2:#60426c} .sk-read {--sec:#cf93e7;--sec-rgb:207,147,231;--sec-2:#ddb9eb;--f1:#8e35b1;--f2:#6d45c4;--l1:#60426c;--l2:#544672} .sk-listen {--sec:#b59dea;--sec-rgb:181,157,234;--sec-2:#cdbeed;--f1:#6d45c4;--f2:#4653c5;--l1:#544672;--l2:#464b72} .sk-speak {--sec:#9da5ea;--sec-rgb:157,165,234;--sec-2:#bec3ed;--f1:#4653c5;--f2:#2d6297;--l1:#464b72;--l2:#3c4f62} .sk-write {--sec:#7aaee2;--sec-rgb:122,174,226;--sec-2:#aac9e7;--f1:#2d6297;--f2:#206879;--l1:#3c4f62;--l2:#365259} .sk-quiz {--sec:#41b7d5;--sec-rgb:65,183,213;--sec-2:#8fcfdf;--f1:#206879;--f2:#1b6a65;--l1:#365259;--l2:#335351} .sk-base {--sec:#A5AFC0;--sec-rgb:165,175,192;--sec-2:#C0C9D8;--f1:#2E3546;--f2:#262C3A;--l1:#232833;--l2:#1F232D} /* LIGHT THEME sections. Only --sec (the accent/rule/suffix on a LIGHT surface) and the LOCKED pair flip. --f1/--f2 and --sec-2 are untouched on purpose: the unlocked cards stay deep and saturated in both themes, which is the "joriy dars = toʻq maydon + och matn" rule and also what keeps the ribbon looking like itself in light mode. Same hues as dark, solved down until each clears 4.5:1 on --card3, the worst light surface. */ :root[data-theme="light"] .sk-vocab {--sec:#a91961;--l1:#e5cad8;--l2:#e5c9e2} :root[data-theme="light"] .sk-gram {--sec:#9e1891;--l1:#e5c9e2;--l2:#decbe5} :root[data-theme="light"] .sk-read {--sec:#8d1cba;--l1:#decbe5;--l2:#d6cee7} :root[data-theme="light"] .sk-listen {--sec:#652de0;--l1:#d6cee7;--l2:#ced0e7} :root[data-theme="light"] .sk-speak {--sec:#3142e0;--l1:#ced0e7;--l2:#c4d3e2} :root[data-theme="light"] .sk-write {--sec:#175a9d;--l1:#c4d3e2;--l2:#bbd6dd} :root[data-theme="light"] .sk-quiz {--sec:#126175;--l1:#bbd6dd;--l2:#b2d9d6} :root[data-theme="light"] .sk-base {--sec:#55606F;--l1:#E7E9ED;--l2:#DFE2E7} /* the suffix takes the colour of whatever section it is standing in, and falls back to the brand wherever no section owns it — the header wordmark, toasts, buttons. The device never moves; only its hue tells you where you are. */ .ing{color:var(--sec,var(--brand))} /* the header bar is DARK now, so it takes the dark-surface tint like everything else. --brand-deep is the light-surface tint and measures ~2.6:1 on the dark header — it was right while the bar was white, and wrong the moment the bar went dark. Paper "bil"/"o" + brand "ing": white and pink, mixed. .on-paper keeps the light-surface tint. */ .on-paper .ing{color:var(--brand-deep)} /* Every daily step is a deep section field now, so the suffix is highlighted on ALL of them — done and locked included. It steps up to the light tint to clear the fill: measured 5.24:1 at worst on a live field and 8.4:1 or better on a locked one. (Done and locked used to fall back to inherit, from when those cards were pale or grey. That left the device invisible on seven of eight cards on a fresh day.) */ .daily-step .ing{color:var(--sec-2)} /* --sec-2 is the light tint for deep fields. A LOCKED step in light mode is a pale tint, so the suffix has to step down to the dark --sec or it disappears. */ :root[data-theme="light"] .daily-step.locked .ing{color:var(--sec)} .daily-chest-step .ing{color:var(--gold)} /* the only places left with nothing to contrast against: a surface already filled with a LIGHT brand or gold, where the tint would vanish into its own background. */ .btn.primary .ing,.tab.active .ing,.toast .ing, .daily-chest-step.current .ing{color:inherit} /* lowercase always: all-caps BILINGO is four near-identical verticals bolted to a round n-g-o cluster and misreads as BlLlNGO at nav sizes. Never translated, never uppercased. */ .wordmark{font-weight:600;letter-spacing:-.015em;color:var(--brand-ink);text-transform:none} /* the mark used to sit beside this; alone, the wordmark has to carry the header itself */ /* --brand-ink is for LIGHT surfaces only. On the dark header the wordmark is paper + brand: "bil"/"o" near-white, "ing" in the brand colour. White and pink, mixed. */ header.top .wordmark{font-size:27px;line-height:1;color:var(--paper)} /* light theme: the bar is paper, so paper-on-paper would vanish — the wordmark takes ink, and "ing" is already flipped to the light-surface brand tint by the theme block. */ :root[data-theme="light"] header.top .wordmark{color:var(--ink)} .view-title{font-size:clamp(18px,2.6vw,21px);margin:18px 0 2px;letter-spacing:-.2px;font-weight:800; padding-bottom:9px;border-bottom:2px solid var(--sec,var(--brand))} .view-title .sep{color:var(--faint);font-style:normal;font-weight:600} /* when the pair is too wide for a phone, break BETWEEN the two languages, not inside one */ .view-title span[lang]{white-space:nowrap} .stats{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--line); padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700} .chip b{color:var(--gold)} nav.tabs{display:flex;gap:7px;overflow-x:auto;padding:10px 18px 12px;max-width:1000px;margin:0 auto; scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity} nav.tabs::-webkit-scrollbar{display:none} .tab{white-space:nowrap;border:1px solid var(--line);background:var(--card2);color:var(--muted); padding:9px 15px;border-radius:999px;cursor:pointer;font-weight:700;font-size:14px;min-height:40px; display:inline-flex;align-items:center;scroll-snap-align:start;touch-action:manipulation; transition:background .18s,color .18s,border-color .18s,transform .1s} .tab:hover{color:var(--ink);border-color:var(--line2)} .tab:active{transform:scale(.96)} .tab.active{color:var(--ink-dark);background:linear-gradient(135deg,var(--brand),var(--brand2)); border-color:transparent;box-shadow:0 6px 16px rgba(214,133,213,.35)} section.view{display:none} section.view.active{display:block;animation:fade .28s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line); border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow-sm)} h1{font-size:clamp(22px,4.5vw,30px);line-height:1.2;margin:20px 0 6px;letter-spacing:-.4px;font-weight:800} h2{font-size:clamp(18px,2.6vw,21px);margin:6px 0 10px;letter-spacing:-.2px;font-weight:800} h3{font-size:16px;margin:4px 0;font-weight:700} p{margin:0 0 12px} .muted{color:var(--muted)} .grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .btn{appearance:none;border:1px solid var(--line);background:var(--card2);color:var(--ink); min-height:var(--tap);padding:11px 16px;border-radius:12px;font-weight:700;cursor:pointer;font-size:14px; display:inline-flex;align-items:center;justify-content:center;gap:6px;touch-action:manipulation; transition:transform .12s ease,box-shadow .18s,border-color .18s,background .18s,filter .18s} .btn:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)} .btn:active{transform:scale(.97)} .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--ink-dark);border-color:transparent} .btn.primary:hover{filter:brightness(1.06);box-shadow:0 8px 20px rgba(214,133,213,.35)} .btn.good{background:linear-gradient(135deg,#059669,#34d399);color:#04231a;border-color:transparent} .btn.warn{background:linear-gradient(135deg,#b45309,#fbbf24);color:#241a03;border-color:transparent} .btn.bad{background:linear-gradient(135deg,#9f1239,#fb7185);color:#2a0710;border-color:transparent} .btn.ghost{background:transparent} .btn.ghost:hover{background:var(--card2)} .btn.sm{min-height:40px;padding:8px 13px;font-size:13px;border-radius:10px} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .bar{height:12px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;border:1px solid var(--line)} .bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--sec,var(--brand)),var(--sec-2,var(--accent)));width:0;border-radius:999px;transition:width .5s ease} .pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid transparent;letter-spacing:.2px} .pill.a1{background:#0b3d2e;color:#86efac} .pill.a2{background:#0a3a44;color:#67e8f9} .pill.b1{background:#0b3a4d;color:#7dd3fc} .pill.b2{background:#33285c;color:var(--accent2)} .pill.c1{background:#4a2f10;color:#fcd34d} .pill.c2{background:#4a1030;color:#f9a8d4} .flag{font-size:13px;color:var(--muted)} .kbd{font-family:ui-monospace,Consolas,monospace;background:#0a1120;border:1px solid var(--line); padding:2px 7px;border-radius:6px;font-size:13px;color:var(--accent2)} ul.tick{list-style:none;padding-left:0;margin:8px 0} ul.tick li{padding:5px 0 5px 28px;position:relative} ul.tick li:before{content:"✓";position:absolute;left:2px;top:5px;color:var(--good);font-weight:900} .task{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid transparent;margin:2px 0; transition:background .18s,border-color .18s} .task:hover{background:var(--card2);border-color:var(--line)} .task.done{background:linear-gradient(180deg,rgba(52,211,153,.10),rgba(52,211,153,.03));border-color:rgba(52,211,153,.35)} .task input{margin-top:4px;width:18px;height:18px;accent-color:var(--brand)} .task label{cursor:pointer} .task.done label{opacity:.75} /* flashcard */ .flash{perspective:1200px;height:clamp(200px,42vw,240px);margin:0 auto;max-width:540px} .flash-in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;cursor:pointer} .flash.flip .flash-in{transform:rotateY(180deg)} .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius); display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px; border:1px solid var(--line);background:linear-gradient(180deg,var(--card2),var(--bg2));box-shadow:var(--shadow-sm)} .face.back{transform:rotateY(180deg);background:linear-gradient(180deg,#14304a,#0f2036)} .face .word{font-size:clamp(26px,7vw,32px);font-weight:900;letter-spacing:-.5px} .face .pos{color:var(--accent2);font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase} .face .def{font-size:18px;line-height:1.4} .face .uz{color:var(--brand2);font-weight:800;margin-top:10px;font-size:16px} .face .ex{color:var(--muted);font-style:italic;margin-top:10px;font-size:15px} .opt{display:block;width:100%;text-align:left;margin:8px 0;padding:14px 16px;border-radius:14px;min-height:52px; border:1px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;font-weight:600;font-size:15px; touch-action:manipulation;transition:border-color .15s,background .15s,transform .1s} /* --card3 is the ONLY surface --brand does not clear 4.5:1 against (it measures 4.03:1). Nothing brand-coloured is allowed here — this row stays --ink. Keep it that way. */ .opt:hover{border-color:var(--brand);background:var(--card3)} .opt:active{transform:scale(.99)} .opt.correct{background:var(--good-bg);border-color:var(--good);color:var(--good-ink)} .opt.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad-ink)} .opt:disabled{cursor:default} .feedback{margin-top:12px;padding:12px 14px;border-radius:12px;font-weight:600;display:none;line-height:1.5} .feedback.show{display:block;animation:fade .2s ease} .feedback.ok{background:var(--good-bg);color:var(--good-ink);border:1px solid var(--good)} .feedback.no{background:var(--bad-bg);color:var(--bad-ink);border:1px solid var(--bad)} /* "Almost" — close but not counted yet. Neither success green nor error red: green would say "done" for work the daily task calls incorrect, red would punish a near miss. */ .feedback.near{background:var(--card2);color:var(--ink);border:1px solid var(--warn)} /* Replaced the 89 Uzbek flag emoji. Regional-indicator pairs have no glyph in most Windows/Linux font stacks, so they fell back to the bare letters and the UI read "UZ teran tushuncha". Text markers render everywhere and can be themed. */ .uz-tip{color:var(--sec,var(--brand))} .lang-tag{font-size:.5em;font-weight:800;letter-spacing:.08em;text-transform:uppercase; opacity:.72;margin-right:.45em;vertical-align:.12em} input.txt,textarea.txt{width:100%;background:#0a1120;border:1px solid var(--line);color:var(--ink); padding:13px 14px;border-radius:12px;font-size:16px;font-family:inherit;min-height:var(--tap);transition:border-color .15s,box-shadow .15s} input.txt::placeholder,textarea.txt::placeholder{color:var(--faint)} input.txt:focus,textarea.txt:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(214,133,213,.22)} :root[data-theme="light"] input.txt,:root[data-theme="light"] textarea.txt{background:#fffdf9;color:#241a15;caret-color:#241a15;border-color:#b9aa94;box-shadow:inset 0 1px 2px rgba(36,26,21,.06);color-scheme:light} :root[data-theme="light"] input.txt::placeholder,:root[data-theme="light"] textarea.txt::placeholder{color:#74685e;opacity:1} :root[data-theme="light"] input.txt:focus,:root[data-theme="light"] textarea.txt:focus{border-color:#8f3a93;box-shadow:0 0 0 3px rgba(143,58,147,.18)} :root[data-theme="light"] input.txt[readonly],:root[data-theme="light"] textarea.txt[readonly]{background:#f4eee5;color:#4f443b} :root[data-theme="light"] input.txt:-webkit-autofill,:root[data-theme="light"] input.txt:-webkit-autofill:hover,:root[data-theme="light"] input.txt:-webkit-autofill:focus{-webkit-text-fill-color:#241a15;-webkit-box-shadow:0 0 0 1000px #fffdf9 inset;caret-color:#241a15} :root[data-theme="light"] select.btn{background-color:#fffdf9;color:#241a15;border-color:#b9aa94;color-scheme:light} :root[data-theme="light"] select.btn option{background:#fffdf9;color:#241a15} :root[data-theme="light"] .speakbox,:root[data-theme="light"] .kbd{background:#fffdf9;color:#241a15;border-color:#cbbda9} textarea.txt{min-height:160px;resize:vertical;line-height:1.6} details.acc{border:1px solid var(--line);border-radius:14px;margin:10px 0;overflow:hidden;background:var(--card2)} details.acc>summary{cursor:pointer;padding:14px 16px;font-weight:800;list-style:none;display:flex;align-items:center;gap:8px;min-height:var(--tap)} details.acc>summary::-webkit-details-marker{display:none} details.acc>summary::after{content:"▾";margin-left:auto;font-size:15px;color:var(--muted);transition:transform .2s;line-height:1} details.acc[open]>summary::after{transform:rotate(180deg)} details.acc[open]>summary{border-bottom:1px solid var(--line)} details.acc .body{padding:16px} .weekhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .reader{font-size:17px;line-height:1.85;max-width:68ch} .reader p{margin:0 0 14px} .hl{background:#33285c;color:#eadfff;padding:1px 5px;border-radius:6px;cursor:help;border-bottom:1px dotted var(--accent);font-weight:600} .toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%) translateY(30px); background:linear-gradient(135deg,var(--brand),var(--accent));color:var(--ink-dark);font-weight:800; padding:13px 20px;border-radius:14px;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,transform .3s;z-index:200;max-width:90vw;text-align:center} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .badge{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card2)} .badge .ic{font-size:28px} .badge.locked{opacity:.45;filter:grayscale(.8)} .mini{font-size:13px;color:var(--muted);line-height:1.5} .speakbox{min-height:46px;padding:12px 14px;border-radius:12px;background:#0a1120;border:1px solid var(--line)} .cam-wrap{position:relative;max-width:520px;margin:0 auto;border-radius:16px;overflow:hidden; border:1px solid var(--line);background:#05070d;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center} .cam-wrap video{width:100%;height:100%;object-fit:cover;display:none} .cam-wrap.on video{display:block} .cam-wrap.mirror video{transform:scaleX(-1)} .cam-empty{color:var(--muted);text-align:center;font-size:38px;line-height:1.2} .cam-wrap.on .cam-empty{display:none} .live-dot{color:#fb7185;font-weight:800;font-size:13px;letter-spacing:.5px;animation:blink 1.4s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} #cam-badge{position:fixed;left:14px;bottom:14px;z-index:180;display:none;align-items:center;gap:8px; background:rgba(10,16,28,.94);border:1px solid var(--bad);border-radius:999px;padding:7px 8px 7px 14px; box-shadow:var(--shadow);backdrop-filter:blur(8px);font-size:13px;font-weight:700;max-width:calc(100vw - 28px)} #cam-badge.on{display:inline-flex} :root[data-theme="light"] #cam-badge{background:#fff;color:#171923;border-color:#b52d50;box-shadow:0 10px 28px rgba(44,35,41,.18)} #cam-alarm{position:fixed;top:0;left:0;right:0;z-index:300;transform:translateY(-120%); background:linear-gradient(135deg,#e11d48,#fb7185);color:#fff;text-align:center;font-weight:900; padding:16px;font-size:clamp(16px,3.5vw,20px);box-shadow:0 10px 30px rgba(225,29,72,.5);transition:transform .25s ease} #cam-alarm.show{transform:translateY(0);animation:alarmflash .45s steps(2) 3} @keyframes alarmflash{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}} .overlay{position:fixed;inset:0;z-index:400;background:rgba(8,13,24,.94);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto} .overlay-card{width:100%;max-width:420px;background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow); max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto} .overlay-card label{display:block;margin-bottom:2px} .focus-permission-overlay{z-index:460} .focus-permission-card{max-width:520px;padding:30px} .focus-permission-iris{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center; background:conic-gradient(from 210deg,var(--brand-field),var(--brand),var(--accent2),var(--brand-field)); box-shadow:0 0 0 8px rgba(214,133,213,.10),0 14px 30px rgba(0,0,0,.24)} .focus-permission-iris span{width:32px;height:32px;border:7px solid var(--paper);border-radius:50%;box-shadow:inset 0 0 0 4px var(--brand-field)} .focus-permission-kicker{text-align:center;margin:0;color:var(--brand2);font-size:11px;font-weight:900;letter-spacing:.14em} .focus-permission-card h2{text-align:center;margin:4px 0 6px;font-size:clamp(22px,5vw,30px);line-height:1.15} .focus-permission-card>p.muted{text-align:center;margin:0 auto 20px;max-width:420px} .focus-permission-options{display:grid;gap:10px} .focus-permission-option{width:100%;min-height:76px;display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;text-align:left; border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--card2);color:var(--ink);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .focus-permission-option:hover{transform:translateY(-1px);border-color:var(--brand);box-shadow:var(--shadow-sm)} .focus-permission-option:active{transform:translateY(0)} .focus-permission-mark{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:13px;font-weight:950;letter-spacing:.03em;background:var(--card3);color:var(--ink)} .focus-permission-option strong,.focus-permission-option small{display:block}.focus-permission-option strong{font-size:15px}.focus-permission-option small{margin-top:2px;color:var(--muted);font-size:12px;line-height:1.4} .focus-permission-option.is-never .focus-permission-mark{background:var(--bad-bg);color:var(--bad-ink)} .focus-permission-option.is-once .focus-permission-mark{background:rgba(196,139,218,.18);color:var(--accent2)} :root[data-theme="light"] .focus-permission-option.is-once .focus-permission-mark{color:var(--brand-deep)} .focus-permission-option.is-always{border-color:rgba(214,133,213,.46)} .focus-permission-option.is-always .focus-permission-mark{background:var(--brand-field);color:var(--paper)} .focus-permission-later{width:100%;margin-top:12px} @media(max-width:520px){.focus-permission-overlay{padding:12px}.focus-permission-card{padding:22px 16px}.focus-permission-option{grid-template-columns:46px 1fr}.focus-permission-mark{width:44px;height:44px;border-radius:12px}.focus-permission-iris{width:62px;height:62px}} .center{text-align:center} .spacer{height:8px} hr.soft{border:none;border-top:1px solid var(--line);margin:16px 0} .footer-note{color:var(--muted);font-size:13px;text-align:center;margin-top:34px;line-height:1.7} /* Daily lesson route: one clean vertical path on every screen. */ /* the wordmark sets its own colour; this is the fallback for anything else in the button */ .logo-button{appearance:none;border:0;background:transparent;color:var(--paper);padding:0;cursor:pointer;font:inherit} header.top nav.utility-tabs{margin-left:auto;padding:0;max-width:none;overflow:visible;scroll-snap-type:none} .utility-tab{width:42px;min-width:42px;height:42px;min-height:42px;padding:0;justify-content:center;font-size:18px} /* SVG icons, not emoji: emoji are font-dependent, render differently on every OS, cannot be recoloured by a token, and the 89 flag emoji already prove the point by rendering as "UZ" on Windows. currentColor lets one icon serve both idle and active states. */ .utility-tab svg,.account-chip svg{width:21px;height:21px;display:block;flex:0 0 auto; stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .utility-tab{color:var(--muted)} .utility-tab:hover{color:var(--paper)} .account-chip{color:var(--muted)} .account-chip:hover{color:var(--paper)} /* .tab.active fills with a brand gradient + glow — correct for the scrolling content tabs, far too loud for a single 42px circle sitting next to the wordmark, and it made the icon brand-on-brand. In the header the active state is a quiet tinted chip with a brand icon. */ header.top .utility-tab.active{ color:var(--brand);background:rgba(214,133,213,.15); border-color:rgba(214,133,213,.40);box-shadow:none} :root[data-theme="light"] .logo-button{color:var(--ink)} :root[data-theme="light"] header.top .utility-tab.active{ background:rgba(159,56,157,.10);border-color:rgba(159,56,157,.34)} .stats{margin-left:0}.account-chip{width:42px;height:42px;justify-content:center;padding:0;cursor:pointer;background:var(--card2);border-color:var(--line2)} .daily-route-card{max-width:760px;background:var(--route-bg);border:1px solid var(--route-border);border-radius:22px;padding:18px 22px 24px;margin:20px auto;box-shadow:var(--shadow)} .daily-path{display:flex;flex-direction:column;gap:0;padding:0 0 0 18px} /* every step is filled with its own section colour in every state — state is then carried by BRIGHTNESS (locked is the same hue, dimmed), the chip glyph and the status word, not by draining the colour out. */ .daily-step{position:relative;appearance:none;width:100%;min-width:0;margin:0 0 12px;padding:13px 15px;border-radius:18px;border:1px solid transparent;background:linear-gradient(180deg,var(--f1) 0%,var(--f2) 100%);color:var(--paper);text-align:left;font:inherit;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:4px;cursor:pointer;transition:transform .16s ease,filter .18s ease,box-shadow .18s ease} .daily-step:last-child{margin-bottom:0}.daily-step:hover:not(:disabled){transform:translateY(-2px)}.daily-step:disabled{cursor:not-allowed} .daily-step::after{content:"";position:absolute;left:-13px;top:34px;bottom:-16px;width:3px;border-radius:99px;background:rgba(var(--sec-rgb),.35)} .daily-step:last-child::after{display:none}.daily-step.done::after,.daily-step.current::after{background:var(--sec)} .daily-step.done{border-color:rgba(var(--sec-rgb),.55);opacity:.86} /* the live step is the brightest thing on the path: full field plus a ring in its own tint */ .daily-step.current{box-shadow:0 0 0 2px var(--sec),0 10px 26px rgba(var(--sec-rgb),.3)} /* locked keeps its hue, just dimmed — the section stays readable at a glance */ .daily-step.locked{background:linear-gradient(180deg,var(--l1) 0%,var(--l2) 100%);color:var(--locked-ink);border-color:rgba(var(--sec-rgb),.22)} /* three classes, to outrank .daily-step.locked: the chest is gold in every state */ .daily-step.daily-chest-step.locked{background:var(--chest-locked-bg);color:var(--chest-locked-ink);border-color:rgba(252,211,77,.3)} .daily-step.locked .daily-step-no{background:rgba(var(--sec-rgb),.16);color:var(--sec)} .daily-step-top{grid-row:1/4;grid-column:1;align-self:start;display:flex;align-items:center;justify-content:center} .daily-step-no{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.15);font-size:16px;font-weight:900;line-height:1} /* these three were tuned for a pale field — a dark overlay on the deep field is invisible */ .daily-step.current .daily-step-no{background:rgba(255,255,255,.15)} /* flex children here must be exactly [label][count]. Without .step-label the .ing span becomes a flex item of its own and space-between tears it off its word. */ .daily-step-name{grid-column:2;font-weight:900;font-size:17px;line-height:1.25;color:inherit;display:flex;align-items:baseline;justify-content:space-between;gap:10px} .daily-step-name .step-label{min-width:0;overflow-wrap:anywhere} /* Route icons: sized in em so they track the label, and stroked in currentColor so one glyph covers light/dark, locked/current/done without a second asset. Replaces the emoji, which carried their own colour into every themed surface. */ .step-label svg,.next-up-name svg,[data-view-title] svg,.daily-step-no svg{ display:inline-block;flex:0 0 auto;stroke:currentColor;fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .step-label svg,.next-up-name svg{width:1em;height:1em;vertical-align:-.13em} [data-view-title] svg{width:.92em;height:.92em;vertical-align:-.08em} .daily-step-no svg{width:20px;height:20px} .daily-step-name .step-count{font-size:12px;font-weight:800;opacity:.85;flex:0 0 auto} .daily-step-detail{grid-column:2;font-size:12.5px;line-height:1.35;color:inherit;opacity:.82} .daily-step-status{display:none} .daily-step>.bar{grid-column:2;height:5px;border:0;background:rgba(0,0,0,.28);max-width:100%;margin-top:2px} .daily-step>.bar>i{background:var(--sec-2)}.daily-step.locked>.bar>i{background:rgba(var(--sec-rgb),.5)} /* the chest is a reward, not a skill — it keeps gold in every state, including locked */ .daily-chest-step{cursor:default;border-color:rgba(252,211,77,.45)} /* matched to .daily-step.locked .daily-step-no (three classes) so it wins the cascade */ .daily-step.daily-chest-step .daily-step-no{background:#4a2f10;color:var(--gold)} .daily-step.daily-chest-step.current .daily-step-no{background:rgba(4,18,31,.14);color:var(--ink-dark)} .daily-chest-step.current{background:linear-gradient(145deg,#f7cf69,#e8a72d);box-shadow:0 13px 32px rgba(251,191,36,.22)} .daily-chest-step.done{background:linear-gradient(145deg,#223a59,#17263d);border-color:rgba(252,211,77,.64)} .chest-art{position:relative;width:48px;height:39px;margin-top:10px;border-radius:7px 7px 10px 10px;background:linear-gradient(180deg,#d79a28,#8a5115);border:2px solid #f7ca55;box-shadow:0 8px 16px rgba(0,0,0,.28)} .chest-art::before{content:"";position:absolute;left:-2px;right:-2px;top:-13px;height:18px;border-radius:24px 24px 6px 6px;background:linear-gradient(180deg,#f4bd3f,#ad6b19);border:2px solid #f7ca55;transform-origin:bottom;transition:transform .45s ease} .chest-art::after{content:"✦";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:15px;height:18px;border-radius:4px;background:#f9df83;color:#68420f;display:grid;place-items:center;font-size:10px;font-weight:900} .daily-chest-step.opened .chest-art::before{transform:translateY(-8px) rotateX(48deg)} .chest-open-row{grid-column:2;display:flex;justify-content:flex-start;margin-top:3px}.chest-results{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:9px;margin-top:3px} .chest-stat{background:rgba(4,18,31,.42);border:1px solid var(--line);border-radius:13px;padding:10px 12px}.chest-stat strong{display:block;color:var(--brand2);font-size:18px} .chest-level-message{grid-column:1/-1;margin:2px 0 0;padding:12px 14px;border-radius:13px;background:rgba(252,211,77,.12);border:1px solid rgba(252,211,77,.34);color:var(--gold);font-weight:900} :root[data-theme="light"] .daily-chest-step.done{background:linear-gradient(145deg,#233f63,#172c49);border-color:#d39a24;box-shadow:0 16px 34px rgba(30,52,83,.22)} :root[data-theme="light"] .daily-chest-step.done .daily-step-name{color:#fff} :root[data-theme="light"] .daily-chest-step.done .daily-step-detail{color:#e7f0fb;opacity:1} :root[data-theme="light"] .daily-chest-step.done .chest-stat{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} :root[data-theme="light"] .daily-chest-step.done .chest-stat .mini{color:#eef6ff;opacity:1} :root[data-theme="light"] .daily-chest-step.done .chest-stat strong{color:#ff9ceb;text-shadow:0 1px 14px rgba(255,92,222,.24)} :root[data-theme="light"] .daily-chest-step.done .chest-level-message{background:linear-gradient(135deg,rgba(255,222,115,.22),rgba(255,255,255,.08));border-color:#e4b947;color:#ffe18a;text-shadow:0 1px 10px rgba(255,199,54,.22)} /* a finished lesson is no longer a dead end — this points at the next step on the daily path, wearing that step's own colour so the hand-off is visible before you tap it */ .next-up{margin-top:20px;padding:15px 16px;border-radius:16px;display:flex;flex-direction:column; align-items:center;gap:7px;border:1px solid rgba(var(--sec-rgb),.45); background:linear-gradient(180deg,rgba(var(--sec-rgb),.14),transparent)} .next-up .mini{text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--sec)} .next-up-name{font-weight:900;font-size:19px;line-height:1.2;color:var(--ink)} .next-up .btn.primary{background:linear-gradient(135deg,var(--sec),var(--sec-2)); color:var(--brand-ink);border-color:transparent} .lesson-locked{position:relative;opacity:.62;filter:grayscale(.35)} .lesson-locked::after{content:attr(data-lock-message);position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:24px;border-radius:inherit;background:rgba(10,17,32,.88);color:var(--muted);font-weight:800} @media(max-width:600px){ .top-in{flex-wrap:nowrap}.logo{font-size:17px}header.top .wordmark{font-size:23px}.logo .brand-mark{width:34px;height:34px}.logo .brand-logo{width:132px}.logo .brand-logo-lg{width:160px}.utility-tab{width:38px;min-width:38px;height:38px;min-height:38px}.account-chip{width:38px;height:38px}.daily-route-card{margin:12px -5px;padding:15px 13px 20px;border-radius:20px}.daily-path{padding-left:12px}.daily-step{min-height:0;margin-bottom:18px;padding:16px 14px;grid-template-columns:46px minmax(0,1fr);column-gap:10px;border-radius:22px}.daily-step::after{left:-9px;top:44px;bottom:-24px;width:3px}.daily-step-no{width:38px;height:38px}.daily-step-icon{font-size:23px}.daily-step-name{font-size:17px}.daily-step-detail{font-size:13px}.chest-results{grid-template-columns:1fr}.chest-level-message{grid-column:1}.chest-open-row .btn{width:100%} } @media(max-width:600px){ .wrap{padding:4px 14px 100px} .top-in{padding:11px 14px;gap:10px} nav.tabs{padding:8px 14px 10px} .card{padding:16px;border-radius:16px} .chip{padding:6px 10px;font-size:12px} .logo{font-size:17px} .face .def{font-size:17px} } @media(max-width:380px){ .logo small{display:none!important} .stats{width:100%;margin-left:0} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .flash-in{transition:none} } /* placement: level ladder + celebration */ .pl-ladder{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:2px 0 4px} .pl-step{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card2);font-weight:800;font-size:12px;color:var(--muted)} .pl-step.cur{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 2px rgba(214,133,213,.22)} .pl-step.done{background:var(--good-bg);color:var(--good-ink);border-color:var(--good)} .salute{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden} .salute span{position:absolute;top:-40px;will-change:transform,opacity;animation:salute-fall 1.7s ease-in forwards} @keyframes salute-fall{0%{transform:translateY(-40px) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(400deg);opacity:0}} /* language picker */ .langwelcome p{margin:7px 0;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.4} .langbtns{display:flex;flex-direction:column;gap:10px;margin-top:16px} .langbtn{width:100%;font-size:17px;padding:12px} .lang-row .btn{min-width:74px} /* Abdulaziz is a character with a speech bubble, not a modal presentation card. */ .az-guide-launcher{position:fixed;right:14px;bottom:12px;z-index:240;display:flex;align-items:center;gap:5px;appearance:none;border:0;border-radius:0;padding:0;background:transparent;color:var(--ink);box-shadow:none;font:800 12px/1 system-ui,sans-serif;cursor:pointer} .az-launcher-pose{width:45px;height:45px;border-radius:50%;background-image:none;background-repeat:no-repeat;clip-path:inset(0 0 5px 0)} :root[data-theme="light"] .az-guide-launcher{background:transparent;color:var(--ink)} .az-guide-layer.overlay{display:none;position:fixed;inset:0;z-index:800;padding:0;background:transparent;backdrop-filter:none;overflow:visible;pointer-events:none} .az-guide-layer.is-open{display:block} .az-guide-shade{position:fixed;background:rgba(5,9,19,.30);backdrop-filter:none;pointer-events:auto} .az-guide-layer.has-action .az-guide-shade{pointer-events:none} .az-guide-focus{position:fixed;border:2px solid #8bd5ff;border-radius:16px;box-shadow:0 0 24px rgba(121,203,255,.58);pointer-events:none;transition:inset .2s ease,width .2s ease,height .2s ease} .az-guide-focus.is-action{animation:az-guide-pulse 1.35s ease-in-out infinite;pointer-events:auto} .az-guide-launcher.az-guide-hidden-underlay{visibility:hidden} .az-guide-card{position:fixed;z-index:2;width:min(420px,calc(100vw - 20px));min-height:180px;pointer-events:none} .az-guide-mascot{position:absolute;left:10px;bottom:0;width:145px;height:180px;background-image:none;background-repeat:no-repeat;filter:none;clip-path:inset(0 0 6px 0)} .az-guide-bubble{position:absolute;left:122px;width:298px;top:14px;min-height:108px;padding:13px 33px 13px 18px;border-radius:20px 20px 20px 6px;background:#fff;color:#18233a;box-shadow:0 13px 35px rgba(0,0,0,.32);pointer-events:auto} .az-guide-bubble::before{content:"";position:absolute;left:-15px;bottom:13px;border:10px solid transparent;border-right-color:#fff;transform:rotate(-18deg)} .az-guide-name{margin:0 0 5px;color:#345bb4;font-size:12px;font-weight:950;letter-spacing:.04em}.az-guide-card #az-guide-text{margin:0;font-size:14px;font-weight:750;line-height:1.4}.az-guide-hint{min-height:16px;margin:6px 0 0;color:#355f9d;font-size:12px;font-weight:900;line-height:1.3}.az-guide-controls{display:flex;gap:7px;justify-content:flex-end;margin-top:9px}.az-guide-nav{border:0;border-radius:10px;padding:7px 10px;background:#e8edf6;color:#243451;font:850 12px/1 system-ui,sans-serif;cursor:pointer}.az-guide-nav.primary{background:#4269c4;color:#fff}.az-guide-nav:disabled,.az-guide-nav.is-hidden{display:none} .az-guide-close{position:absolute;right:8px;top:7px;width:27px;height:27px;border:0;border-radius:50%;background:#e9eef7;color:#33415d;font-size:19px;line-height:1;cursor:pointer}.az-guide-close.is-hidden{display:none} .az-guide-card.az-nudge{animation:az-guide-nudge .28s ease}.az-guide-mascot.az-attention{animation:az-mascot-bounce .75s ease 2}.az-guide-bubble.az-remind{animation:az-bubble-pop .35s ease} @keyframes az-guide-pulse{0%,100%{box-shadow:0 0 20px rgba(121,203,255,.45)}50%{box-shadow:0 0 38px rgba(121,203,255,.82)}} @keyframes az-guide-nudge{0%,100%{transform:translateX(0)}35%{transform:translateX(-6px)}70%{transform:translateX(6px)}} @keyframes az-mascot-bounce{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-12px) rotate(-2deg)}70%{transform:translateY(-4px) rotate(2deg)}} @keyframes az-bubble-pop{0%{transform:scale(.97)}65%{transform:scale(1.02)}100%{transform:scale(1)}} @media(max-width:900px){ .az-guide-card{width:min(520px,calc(100vw - 16px));max-width:calc(100vw - 16px);min-height:166px;height:auto} .az-guide-mascot{left:10px;width:120px;height:154px} .az-guide-bubble{left:100px;right:auto;top:8px;width:360px;max-width:calc(100% - 100px);min-height:104px;max-height:min(48vh,330px);overflow:auto;overflow-wrap:anywhere;padding:11px 31px 11px 15px} .az-guide-card #az-guide-text{font-size:13px}.az-guide-hint{font-size:11px} } @media(max-width:600px){ .az-guide-launcher{right:8px;bottom:8px;padding:0}.az-guide-launcher>span:last-child{display:none}.az-launcher-pose{width:49px;height:49px} .az-guide-card{width:calc(100vw - 12px);max-width:calc(100vw - 12px)} .az-guide-mascot{left:8px;width:105px;height:142px} .az-guide-bubble{left:88px;width:calc(100% - 88px);max-width:calc(100% - 88px);min-height:96px;padding:10px 29px 10px 13px} } @media(prefers-reduced-motion:reduce){.az-guide-focus.is-action{animation:none}.az-guide-card.az-nudge{animation:none}} /* Twenty-pose Abdulaziz sprite: 5 columns × 4 rows; every state is local/offline. */ .az-launcher-pose,.az-guide-mascot,.az-chat-avatar{background-image:url('/assets/abdulaziz-guide-20.png');background-size:500% 400%;background-repeat:no-repeat} .az-launcher-pose{background-position:75% 66.666%} .az-guide-mascot.pose-p0,.az-chat-avatar.pose-p0{background-position:0 0} .az-guide-mascot.pose-p1,.az-chat-avatar.pose-p1{background-position:25% 0} .az-guide-mascot.pose-p2,.az-chat-avatar.pose-p2{background-position:50% 0} .az-guide-mascot.pose-p3,.az-chat-avatar.pose-p3{background-position:75% 0} .az-guide-mascot.pose-p4,.az-chat-avatar.pose-p4{background-position:100% 0} .az-guide-mascot.pose-p5,.az-chat-avatar.pose-p5{background-position:0 33.333%} .az-guide-mascot.pose-p6,.az-chat-avatar.pose-p6{background-position:25% 33.333%} .az-guide-mascot.pose-p7,.az-chat-avatar.pose-p7{background-position:50% 33.333%} .az-guide-mascot.pose-p8,.az-chat-avatar.pose-p8{background-position:75% 33.333%} .az-guide-mascot.pose-p9,.az-chat-avatar.pose-p9{background-position:100% 33.333%} .az-guide-mascot.pose-p10,.az-chat-avatar.pose-p10{background-position:0 66.666%} .az-guide-mascot.pose-p11,.az-chat-avatar.pose-p11{background-position:25% 66.666%} .az-guide-mascot.pose-p12,.az-chat-avatar.pose-p12{background-position:50% 66.666%} .az-guide-mascot.pose-p13,.az-chat-avatar.pose-p13{background-position:75% 66.666%} .az-guide-mascot.pose-p14,.az-chat-avatar.pose-p14{background-position:100% 66.666%} .az-guide-mascot.pose-p15,.az-chat-avatar.pose-p15{background-position:0 100%} .az-guide-mascot.pose-p16,.az-chat-avatar.pose-p16{background-position:25% 100%} .az-guide-mascot.pose-p17,.az-chat-avatar.pose-p17{background-position:50% 100%} .az-guide-mascot.pose-p18,.az-chat-avatar.pose-p18{background-position:75% 100%} .az-guide-mascot.pose-p19,.az-chat-avatar.pose-p19{background-position:100% 100%} .az-guide-mascot.az-happy{animation:az-happy-dance .75s ease 2}.az-guide-mascot.az-sad{animation:az-sad-sway 1.1s ease-in-out 2} @keyframes az-happy-dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-13px) rotate(-4deg)}55%{transform:translateY(-5px) rotate(4deg)}} @keyframes az-sad-sway{0%,100%{transform:translateX(0)}45%{transform:translateX(-5px) rotate(-2deg)}75%{transform:translateX(4px) rotate(2deg)}} .az-assistant-panel{z-index:720!important;align-items:flex-end!important;justify-content:flex-end!important;padding:16px!important;background:rgba(5,9,19,.48)!important} .az-chat-card{width:min(440px,100%);height:min(680px,calc(100vh - 32px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 24px 70px rgba(0,0,0,.45)} .az-chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(66,105,196,.18),rgba(114,206,240,.08))} .az-chat-avatar{width:54px;height:62px;flex:0 0 54px}.az-chat-head h2{margin:0;font-size:18px}.az-chat-head p{margin:2px 0 0;color:var(--muted);font-size:11px}.az-chat-close{margin-left:auto;width:36px;height:36px;border:0;border-radius:50%;background:var(--card2);color:var(--ink);font-size:23px;cursor:pointer} .az-chat-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px}.az-chat-mode{border:1px solid var(--line);border-radius:12px;padding:9px;background:var(--card2);color:var(--muted);font-weight:850;cursor:pointer}.az-chat-mode.active{border-color:var(--brand2);background:rgba(114,206,240,.14);color:var(--ink)} .az-chat-log{flex:1;overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px}.az-msg{max-width:88%;padding:9px 11px;border-radius:15px;font-size:13px;line-height:1.42;white-space:pre-wrap}.az-msg.bot{align-self:flex-start;background:var(--card2);border:1px solid var(--line)}.az-msg.user{align-self:flex-end;background:#4269c4;color:white}.az-msg small{display:block;margin-top:4px;opacity:.72} .az-chat-quick{display:flex;gap:6px;overflow-x:auto;padding:5px 12px}.az-quick{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--card2);color:var(--ink);font-size:11px;font-weight:800;cursor:pointer} .az-chat-form{display:flex;gap:8px;padding:9px 12px}.az-chat-form .txt{min-width:0}.az-chat-note{margin:0;padding:0 13px 11px;color:var(--muted);font-size:10px} :root[data-theme="light"] .az-chat-form .txt{background:#fffdf9;color:#241a15;border-color:#b9aa94;box-shadow:inset 0 1px 2px rgba(36,26,21,.06);color-scheme:light} :root[data-theme="light"] .az-chat-form .txt::placeholder{color:#74685e;opacity:1} :root[data-theme="light"] .az-chat-form .txt:focus{border-color:#8f3a93;box-shadow:0 0 0 3px rgba(143,58,147,.18)} @media(max-width:600px){.az-assistant-panel{padding:0!important}.az-chat-card{width:100%;height:100%;max-height:none;border-radius:0}.az-chat-log{padding-bottom:6px}} .az-guide-focus{z-index:3;border:4px solid #69d2ff!important;background:rgba(77,199,255,.22);box-shadow:0 0 0 5px rgba(105,210,255,.2),0 0 38px 12px rgba(105,210,255,.88)!important;pointer-events:none} .az-guide-focus.is-action{pointer-events:auto!important;cursor:pointer;touch-action:manipulation} .az-guide-focus::after{content:"";position:absolute;inset:-10px;border:3px dashed #fff;border-radius:20px;animation:az-target-ring .85s ease-in-out infinite;pointer-events:none} .az-guide-pointer{position:absolute;left:50%;top:-48px;transform:translateX(-50%);display:block;width:260px;max-width:calc(100vw - 16px);padding:9px 14px;border:3px solid #fff;border-radius:999px;background:#1269d3;color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.45);font:950 13px/1.15 system-ui,sans-serif;letter-spacing:.02em;text-align:center;animation:az-pointer-bob .65s ease-in-out infinite;pointer-events:none} .az-guide-pointer[hidden]{display:none!important} .az-guide-pointer.below{top:auto;bottom:-48px} .az-guide-pointer::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff}.az-guide-pointer.below::after{top:-12px;bottom:auto;border-top-color:transparent;border-bottom-color:#fff} @keyframes az-target-ring{0%,100%{opacity:.7;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}} @keyframes az-pointer-bob{0%,100%{margin-top:0}50%{margin-top:-5px}} .az-guide-target-live{position:relative!important;z-index:802!important;pointer-events:auto!important;isolation:isolate;outline:5px solid #69d2ff!important;outline-offset:5px!important;box-shadow:0 0 0 10px rgba(105,210,255,.2),0 0 32px rgba(105,210,255,.9)!important} .az-guide-launcher.az-guide-target-live{position:fixed!important;right:14px!important;bottom:12px!important} .lesson-locked.az-guide-ancestor-live{opacity:1;filter:none}.lesson-locked.az-guide-ancestor-live::after{display:none} @media(max-width:600px){.az-guide-focus{border-width:3px!important}.az-guide-focus::after{inset:-6px}.az-guide-target-live{outline-width:3px!important;outline-offset:3px!important}} /* Bilingo Live — the seven-colour lesson ribbon becomes a moving scoreboard. */ .live-header-btn{color:var(--gold);position:relative;overflow:hidden} .live-header-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .live-header-btn::after{content:"";position:absolute;inset:auto 8px 4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#e68fbb,#cf93e7,#9da5ea,#41b7d5)} .live-overlay{z-index:740;padding:18px;align-items:center;justify-content:center;background:rgba(6,10,20,.9)} .live-shell{width:min(960px,100%);max-height:calc(100vh - 36px);overflow:auto;border:1px solid var(--line2);border-radius:28px;background:linear-gradient(160deg,var(--card),var(--bg2));box-shadow:0 30px 90px rgba(0,0,0,.55)} .live-head{display:flex;align-items:center;gap:16px;padding:20px 24px 14px} .live-head h2{margin:1px 0 0;font-size:clamp(22px,4vw,34px)} .live-eyebrow{margin:0;color:var(--sec);font:900 11px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.18em} .live-ribbon{height:7px;display:grid;grid-template-columns:repeat(7,1fr);overflow:hidden} .live-ribbon i:nth-child(1){background:#ac2b6b}.live-ribbon i:nth-child(2){background:#a02d94}.live-ribbon i:nth-child(3){background:#8e35b1}.live-ribbon i:nth-child(4){background:#6d45c4}.live-ribbon i:nth-child(5){background:#4653c5}.live-ribbon i:nth-child(6){background:#2d6297}.live-ribbon i:nth-child(7){background:#1b6a65} .live-stage{padding:22px 24px 26px} .live-entry-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px} .live-panel{border:1px solid var(--line);border-radius:20px;padding:20px;background:linear-gradient(180deg,var(--card2),var(--card));box-shadow:var(--shadow-sm)} .live-panel h3{font-size:19px;margin-bottom:5px}.live-panel .mini{display:block;margin-bottom:12px} .live-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .live-form-grid .wide{grid-column:1/-1} .live-team-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:13px;border:1px solid var(--line2);border-radius:16px;background:linear-gradient(110deg,rgba(45,98,151,.14),rgba(109,69,196,.14))} .live-team-fields[hidden]{display:none}.live-team-fields>p{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px;font-weight:800} .live-team-fields label{display:grid;gap:6px}.live-editor-team-fields{grid-column:1/-1} .live-code-input{font:900 26px/1 ui-monospace,Consolas,monospace!important;letter-spacing:.2em;text-align:center;text-transform:uppercase} .live-form-message{min-height:24px;margin-top:9px;font-size:13px;color:var(--muted)} .live-form-message.no{color:var(--bad)}.live-form-message.ok{color:var(--good)} .live-custom-banner{width:100%;margin:16px 0 0;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;border:1px solid var(--line2);border-radius:19px;padding:13px 16px;text-align:left;background:linear-gradient(105deg,rgba(var(--sec-rgb),.15),var(--card2));color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s,border-color .15s} .live-custom-banner:hover{transform:translateY(-2px);border-color:var(--sec)}.live-custom-banner:focus-visible{outline:3px solid var(--sec);outline-offset:3px} .live-custom-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:23px;background:conic-gradient(from 25deg,#ac2b6b,#6d45c4,#2d6297,#1b6a65,#ac2b6b);box-shadow:0 8px 18px rgba(0,0,0,.2)} .live-custom-copy{display:grid;gap:3px}.live-custom-copy b{font-size:16px}.live-custom-copy small{color:var(--muted);font-size:12px}.live-custom-arrow{font-size:25px;color:var(--sec);font-weight:900} .live-editor{display:grid;gap:16px}.live-editor-head{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap} .live-editor-head h3{margin:0;font-size:clamp(21px,4vw,29px)}.live-editor-intro{margin:-8px 0 0;color:var(--muted)} .live-import-panel{position:relative;overflow:hidden;display:grid;gap:12px;padding:17px;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(120deg,rgba(var(--sec-rgb),.16),var(--card2) 42%,var(--card));box-shadow:var(--shadow-sm)} .live-import-panel::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#ac2b6b,#8e35b1,#4653c5,#2d6297,#1b6a65)} .live-import-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px}.live-import-head h4{margin:0 0 3px;font-size:18px}.live-import-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.4} .live-import-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--bg2);color:var(--sec);font:950 25px/1 ui-monospace,Consolas,monospace;box-shadow:inset 0 0 0 1px rgba(var(--sec-rgb),.3)} .live-import-local{align-self:start;border-radius:999px;padding:6px 9px;background:rgba(34,197,94,.13);color:var(--good);font-size:10px;font-weight:950;white-space:nowrap} .live-import-formats{display:flex;gap:6px;flex-wrap:wrap}.live-import-formats span{border:1px solid var(--line);border-radius:999px;padding:5px 8px;background:var(--bg2);color:var(--muted);font:850 10px/1 ui-monospace,Consolas,monospace} .live-import-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.live-import-file{position:relative;overflow:hidden}.live-import-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .live-import-help{margin:0;color:var(--muted);font-size:11px;line-height:1.4} .live-import-paste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}.live-import-paste[hidden]{display:none}.live-import-paste textarea{min-height:118px;resize:vertical;font:600 12px/1.45 ui-monospace,Consolas,monospace} .live-import-status{min-height:18px;margin:0;color:var(--muted);font-size:12px;font-weight:800}.live-import-status.ok{color:var(--good)}.live-import-status.no{color:var(--bad)} .live-import-actions .btn:focus-visible,.live-import-file:focus-within{outline:3px solid var(--sec);outline-offset:2px} @media(max-width:700px){.live-import-head{grid-template-columns:44px minmax(0,1fr)}.live-import-local{grid-column:1/-1;justify-self:start}.live-import-paste{grid-template-columns:1fr}.live-import-paste .btn{width:100%}} @media(max-width:430px){.live-import-panel{padding:14px}.live-import-actions{display:grid;grid-template-columns:1fr}.live-import-actions .btn,.live-import-actions .live-import-file{width:100%;justify-content:center;text-align:center}.live-import-formats span{font-size:9px}} @media(prefers-reduced-motion:reduce){.live-import-panel::before{animation:none}} .live-editor-meta{display:grid;grid-template-columns:1.3fr 1fr auto auto;gap:10px;padding:17px;border:1px solid var(--line);border-radius:20px;background:var(--card2)} .live-editor-meta label,.live-option-field{display:grid;gap:6px}.live-editor-meta .mini{margin:0} .live-question-stack{display:grid;gap:14px;counter-reset:live-question} .live-question-editor{counter-increment:live-question;position:relative;display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-top:5px solid #ac2b6b;border-radius:20px;background:linear-gradient(155deg,var(--card2),var(--card));box-shadow:var(--shadow-sm)} .live-question-editor:nth-child(4n+2){border-top-color:#6d45c4}.live-question-editor:nth-child(4n+3){border-top-color:#2d6297}.live-question-editor:nth-child(4n){border-top-color:#1b6a65} .live-question-top{display:flex;align-items:center;gap:10px}.live-question-top::before{content:counter(live-question);width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;background:var(--bg2);font-weight:950;color:var(--sec)} .live-question-top label{flex:1;display:grid;gap:5px}.live-question-remove{align-self:flex-end} .live-option-list{display:grid;grid-template-columns:1fr 1fr;gap:9px} .live-option-field{grid-template-columns:38px minmax(0,1fr);align-items:center;border:1px solid var(--line);border-radius:15px;padding:8px;background:var(--bg2)} .live-correct-choice{position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--card);color:var(--muted);font-weight:950;cursor:pointer} .live-correct-choice input{position:absolute;opacity:0;pointer-events:none}.live-correct-choice:has(input:checked){background:var(--good-bg);color:var(--good-ink);box-shadow:inset 0 0 0 2px var(--good)} .live-correct-choice:focus-within{outline:3px solid var(--sec);outline-offset:2px}.live-option-field .txt{min-width:0} .live-editor-toolbar,.live-editor-actions{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.live-editor-actions{justify-content:flex-end} .live-editor-status{min-height:20px;flex:1;color:var(--muted);font-size:12px}.live-editor-status.ok{color:var(--good)}.live-editor-status.no{color:var(--bad)} .live-draft-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;background:rgba(var(--sec-rgb),.13);color:var(--sec);font-size:11px;font-weight:900} .live-room-code{display:flex;justify-content:center;gap:8px;margin:18px 0 8px;user-select:all} .live-room-code b{display:grid;place-items:center;width:clamp(42px,8vw,62px);height:clamp(54px,10vw,74px);border-radius:14px;background:linear-gradient(160deg,var(--f1),var(--f2));border:1px solid rgba(255,255,255,.18);color:var(--paper);font:950 clamp(27px,5vw,42px)/1 ui-monospace,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.24)} .live-lobby{text-align:center}.live-lobby-note{color:var(--muted);font-size:13px} .live-player-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto;max-width:720px;min-height:50px} .live-player-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line2);border-radius:999px;background:var(--card2);font-weight:800} .live-player-chip::before{content:"●";color:var(--sec)} .live-player-chip.is-captain{border-color:var(--gold);background:linear-gradient(120deg,rgba(252,211,77,.2),var(--card2));box-shadow:0 0 0 2px rgba(252,211,77,.12);font-weight:950}.live-team-roster .live-player-chip.is-captain::before{content:"♛";color:var(--gold);font-size:17px;line-height:1}.live-player-chip.is-captain small{padding:3px 6px;border-radius:999px;background:rgba(252,211,77,.16);color:var(--gold);font-size:10px;font-weight:950;letter-spacing:.03em} :root[data-theme="light"] .live-player-chip.is-captain{background:linear-gradient(120deg,rgba(122,90,18,.14),#fffdf9);box-shadow:0 0 0 2px rgba(122,90,18,.09)} .live-team-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:11px;max-width:1040px;margin:18px auto} .live-team-score{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:15px;border:1px solid var(--line2);border-radius:18px;background:var(--card2);text-align:left;box-shadow:var(--shadow-sm)} .live-team-score.blue{border-color:rgba(65,183,213,.55);background:linear-gradient(120deg,rgba(45,98,151,.24),var(--card2))} .live-team-score.violet{border-color:rgba(207,147,231,.55);background:linear-gradient(120deg,rgba(109,69,196,.24),var(--card2))} .live-team-score.amber{border-color:rgba(245,184,61,.58);background:linear-gradient(120deg,rgba(180,122,20,.22),var(--card2))}.live-team-score.green{border-color:rgba(62,190,125,.55);background:linear-gradient(120deg,rgba(24,126,78,.22),var(--card2))}.live-team-score.rose{border-color:rgba(239,99,132,.55);background:linear-gradient(120deg,rgba(170,45,82,.22),var(--card2))}.live-team-score.teal{border-color:rgba(47,198,190,.55);background:linear-gradient(120deg,rgba(20,126,121,.22),var(--card2))}.live-team-score.indigo{border-color:rgba(112,120,255,.55);background:linear-gradient(120deg,rgba(67,65,175,.22),var(--card2))}.live-team-score.orange{border-color:rgba(246,139,55,.58);background:linear-gradient(120deg,rgba(181,83,16,.22),var(--card2))} .live-team-signal{width:13px;height:38px;border-radius:999px;background:#2d6297;box-shadow:0 0 0 4px rgba(45,98,151,.14)} .live-team-score.violet .live-team-signal{background:#8e35b1;box-shadow:0 0 0 4px rgba(142,53,177,.14)} .live-team-score.amber .live-team-signal{background:#d99b22}.live-team-score.green .live-team-signal{background:#29a86b}.live-team-score.rose .live-team-signal{background:#d94e76}.live-team-score.teal .live-team-signal{background:#27aaa4}.live-team-score.indigo .live-team-signal{background:#626ad8}.live-team-score.orange .live-team-signal{background:#e77f2d} .live-team-score b,.live-team-score small{display:block}.live-team-score small{margin-top:4px;color:var(--muted);font-size:11px}.live-team-score strong{color:var(--gold);font:950 18px/1 ui-monospace,Consolas,monospace;white-space:nowrap} .live-team-board.compact{margin:10px auto 16px}.live-team-board.compact .live-team-score{padding:10px 12px}.live-team-board.compact .live-team-signal{height:28px}.live-team-board.compact .live-team-score strong{font-size:14px} .live-team-rosters{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:1040px;margin:16px auto} .live-team-roster{min-width:0;padding:12px;border:1px solid var(--line);border-radius:17px;background:var(--bg2);text-align:left} .live-team-roster.blue{border-top:4px solid #2d6297}.live-team-roster.violet{border-top:4px solid #8e35b1} .live-team-roster.amber{border-top:4px solid #d99b22}.live-team-roster.green{border-top:4px solid #29a86b}.live-team-roster.rose{border-top:4px solid #d94e76}.live-team-roster.teal{border-top:4px solid #27aaa4}.live-team-roster.indigo{border-top:4px solid #626ad8}.live-team-roster.orange{border-top:4px solid #e77f2d} .live-team-roster>.live-player-cloud{justify-content:flex-start;margin:9px 0 0;min-height:34px;max-height:180px;overflow:auto} .live-team-roster.blue .live-player-chip::before{color:#41b7d5}.live-team-roster.violet .live-player-chip::before{color:#cf93e7} .live-team-roster.amber .live-player-chip::before{color:#f0b93d}.live-team-roster.green .live-player-chip::before{color:#43ca87}.live-team-roster.rose .live-player-chip::before{color:#ed7395}.live-team-roster.teal .live-player-chip::before{color:#45d0ca}.live-team-roster.indigo .live-player-chip::before{color:#8b91ff}.live-team-roster.orange .live-player-chip::before{color:#f39a56} .live-your-team{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;background:rgba(45,98,151,.18);color:#8ddbf0;font-size:12px;font-weight:900} .live-your-team.violet{background:rgba(109,69,196,.18);color:#e1b7ef}.live-wait .live-your-team{margin:10px auto} .live-your-team.amber{background:rgba(180,122,20,.18);color:#f4c45d}.live-your-team.green{background:rgba(24,126,78,.18);color:#72dda4}.live-your-team.rose{background:rgba(170,45,82,.18);color:#f193ae}.live-your-team.teal{background:rgba(20,126,121,.18);color:#75dfda}.live-your-team.indigo{background:rgba(67,65,175,.18);color:#aeb2ff}.live-your-team.orange{background:rgba(181,83,16,.18);color:#f7b278} .live-game-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:16px} .live-round,.live-score{font:900 13px/1.2 ui-monospace,Consolas,monospace;color:var(--muted)} .live-timer{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden} .live-timer i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1b6a65,#4653c5,#ac2b6b);transition:width .25s linear} .live-question-card{padding:clamp(18px,4vw,34px);border-radius:22px;border:1px solid var(--line2);background:linear-gradient(170deg,var(--card2),var(--card));text-align:center} .live-question-meta{display:flex;justify-content:center;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px} .live-question-card h3{font-size:clamp(20px,4vw,32px);line-height:1.25;margin:6px auto 20px;max-width:760px} .live-answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px} .live-answer{appearance:none;min-height:92px;border:2px solid transparent;border-radius:17px;padding:16px;color:var(--paper);font:850 clamp(15px,2.7vw,20px)/1.3 inherit;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.2);transition:transform .12s,filter .15s,border-color .15s} .live-answer:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)}.live-answer:active:not(:disabled){transform:scale(.98)} .live-answer:nth-child(1){background:#8b2858}.live-answer:nth-child(2){background:#603aa5}.live-answer:nth-child(3){background:#265a91}.live-answer:nth-child(4){background:#17645f} .live-answer.correct{background:var(--good-bg);border-color:var(--good);color:var(--good-ink)} .live-answer.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad-ink)} .live-answer.chosen{border-color:var(--paper);box-shadow:0 0 0 3px rgba(255,255,255,.22)} .live-answer:disabled{cursor:default;opacity:.72}.live-answer.correct:disabled,.live-answer.wrong:disabled,.live-answer.chosen:disabled{opacity:1} .live-wait{display:grid;place-items:center;min-height:330px;text-align:center}.live-wait-mark{width:82px;height:82px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#ac2b6b,#4653c5,#1b6a65);font-size:36px;box-shadow:0 16px 34px rgba(0,0,0,.3);animation:live-float 1.8s ease-in-out infinite} @keyframes live-float{50%{transform:translateY(-8px) rotate(2deg)}} .live-result{margin:16px auto 0;max-width:720px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--card2);text-align:center;font-weight:800} .live-result.ok{border-color:var(--good);color:var(--good-ink);background:var(--good-bg)}.live-result.no{border-color:var(--bad);color:var(--bad-ink);background:var(--bad-bg)} .live-leaderboard{display:grid;gap:8px;max-width:720px;margin:18px auto} .live-rank{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card2);transition:transform .2s} .live-rank:nth-child(1){border-color:var(--gold);background:linear-gradient(90deg,rgba(252,211,77,.15),var(--card2))}.live-rank-num{font:900 19px/1 ui-monospace,Consolas,monospace;color:var(--sec)}.live-rank-name{font-weight:850;overflow:hidden;text-overflow:ellipsis}.live-rank-score{font:900 15px/1 ui-monospace,Consolas,monospace;color:var(--gold)} .live-rank-team{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:#2d6297}.live-rank-team.violet{background:#8e35b1} .live-rank-team.amber{background:#d99b22}.live-rank-team.green{background:#29a86b}.live-rank-team.rose{background:#d94e76}.live-rank-team.teal{background:#27aaa4}.live-rank-team.indigo{background:#626ad8}.live-rank-team.orange{background:#e77f2d} .live-host-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px} .live-solo-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(var(--sec-rgb),.13);color:var(--sec);font-size:11px;font-weight:900;letter-spacing:.05em} :root[data-theme="light"] .live-shell{box-shadow:0 30px 80px rgba(74,58,44,.25)} .live-tournament-toggle{display:flex!important;align-items:flex-start;gap:11px;padding:13px;border:1px solid rgba(252,211,77,.48);border-radius:16px;background:linear-gradient(115deg,rgba(252,211,77,.13),var(--card2));cursor:pointer} .live-tournament-toggle input{width:20px;height:20px;flex:0 0 20px;margin:2px 0 0;accent-color:var(--gold)} .live-tournament-toggle span{display:grid;gap:3px}.live-tournament-toggle b{color:var(--gold)}.live-tournament-toggle small{color:var(--muted);line-height:1.35} .live-tournament-badge{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 12px;padding:7px 11px;border:1px solid rgba(252,211,77,.52);border-radius:999px;background:rgba(252,211,77,.12);color:var(--gold);font:950 11px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.07em} .live-captain-panel,.live-captain-controls{max-width:760px;margin:14px auto;padding:14px;border:1px solid var(--line2);border-radius:17px;background:linear-gradient(125deg,rgba(var(--sec-rgb),.12),var(--card2));text-align:left} .live-captain-panel>p{margin:8px 0;color:var(--muted)}.live-captain-panel em{font-style:normal;color:var(--warn)} .live-captain-council{max-width:1040px;margin:16px auto;padding:16px;border:1px solid rgba(252,211,77,.38);border-radius:20px;background:linear-gradient(135deg,rgba(252,211,77,.1),var(--card2));text-align:left}.live-council-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.live-council-head b{font-size:17px}.live-council-head strong{color:var(--gold)}.live-council-status{margin:8px 0;color:var(--muted);font-weight:800}.live-council-status.ok{color:var(--good)}.live-council-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.live-council-feed{display:grid;gap:6px;max-height:150px;overflow:auto;padding-top:10px;border-top:1px solid var(--line)}.live-council-feed p{margin:0;padding:8px 10px;border-radius:12px;background:var(--bg2)} .live-candidate-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.live-candidate-list button{display:grid;gap:2px;text-align:left}.live-candidate-list small{color:var(--muted)} .live-captain-badge{display:inline-flex;align-items:center;gap:6px;margin:9px auto;padding:7px 10px;border-radius:999px;background:rgba(252,211,77,.12);color:var(--gold);font-weight:900} .live-swap-panel{max-width:720px;margin:12px auto;text-align:left}.live-swap-panel summary{cursor:pointer;color:var(--sec);font-weight:900}.live-swap-panel>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} .live-swap-toast{position:sticky;top:8px;z-index:4;max-width:720px;margin:10px auto;padding:13px 15px;border:2px solid var(--sec);border-radius:17px;background:var(--card);box-shadow:0 14px 34px rgba(0,0,0,.3);text-align:left}.live-swap-toast div{display:flex;gap:8px;margin-top:9px} .live-captain-top{display:grid;gap:4px;max-width:720px;margin:0 auto 14px;padding:11px 14px;border-left:4px solid var(--sec);border-radius:6px 15px 15px 6px;background:linear-gradient(90deg,rgba(var(--sec-rgb),.18),var(--card2));text-align:left}.live-captain-top b{color:var(--sec);font:950 11px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.07em}.live-captain-top span{color:var(--text);font-weight:750}.live-preview-result{max-width:720px;margin:12px auto 0;padding:11px 13px;border:1px solid rgba(85,183,132,.45);border-radius:14px;background:rgba(85,183,132,.12);color:var(--text);font-weight:800;text-align:left} .live-pause-banner{position:sticky;top:8px;z-index:5;max-width:760px;margin:0 auto 12px;padding:12px 16px;border:1px solid var(--gold);border-radius:15px;background:var(--card);color:var(--gold);font-weight:950;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.28)} .live-captain-controls{display:grid;gap:11px}.live-captain-controls>div{display:flex;gap:8px;flex-wrap:wrap}.live-captain-controls label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.live-captain-controls label span{grid-column:1/-1;color:var(--muted);font-size:12px;font-weight:800} .live-reward-won{display:inline-block;margin:7px auto 14px;padding:10px 14px;border-radius:14px;background:linear-gradient(110deg,rgba(252,211,77,.2),rgba(var(--sec-rgb),.15));color:var(--gold);font-size:18px;font-weight:950} .btn.warn{border-color:var(--gold);color:var(--gold);background:rgba(252,211,77,.1)} @media(max-width:520px){.live-captain-controls label{grid-template-columns:1fr}.live-captain-controls label span{grid-column:auto}.live-swap-toast div{display:grid}.live-swap-toast .btn{width:100%}} @media(prefers-reduced-motion:reduce){.live-swap-toast,.live-pause-banner{scroll-behavior:auto}} :root[data-theme="light"] .live-code-input{background:#fffdf9;color:#241a15;border-color:#b9aa94;color-scheme:light} :root[data-theme="light"] .live-your-team.blue{color:#174b73}:root[data-theme="light"] .live-your-team.violet{color:#63317f} @media(max-width:700px){.live-overlay{padding:0}.live-shell{width:100%;height:100%;max-height:none;border-radius:0;border:0}.live-head{padding:15px 16px 11px}.live-stage{padding:16px}.live-entry-grid{grid-template-columns:1fr}.live-answer{min-height:78px}.live-game-top{grid-template-columns:auto 1fr}.live-score{grid-column:1/-1;text-align:right}.live-editor-meta{grid-template-columns:1fr 1fr}.live-editor-meta label:nth-child(-n+2){grid-column:1/-1}} @media(max-width:430px){.live-answer-grid{grid-template-columns:1fr}.live-answer{min-height:62px}.live-form-grid{grid-template-columns:1fr}.live-form-grid .wide{grid-column:auto}.live-team-fields,.live-team-board,.live-team-rosters{grid-template-columns:1fr}.live-team-fields{grid-column:auto}.live-team-fields>p{grid-column:auto}.live-team-score{padding:11px}.live-team-roster>.live-player-cloud{max-height:120px}.live-room-code{gap:4px}.live-room-code b{width:42px;height:54px;border-radius:11px}.live-rank{grid-template-columns:34px minmax(0,1fr) auto}.live-custom-banner{grid-template-columns:42px minmax(0,1fr);padding:12px}.live-custom-mark{width:40px;height:40px}.live-custom-arrow{display:none}.live-editor-meta,.live-option-list{grid-template-columns:1fr}.live-editor-meta label{grid-column:auto!important}.live-editor-team-fields{grid-column:auto}.live-question-editor{padding:13px}.live-question-top{display:grid;grid-template-columns:34px 1fr;align-items:center}.live-question-top label{grid-column:1/-1;padding-right:0}.live-question-remove{position:absolute;right:10px;top:10px}.live-editor-actions .btn{flex:1 1 100%}} @media(prefers-reduced-motion:reduce){.live-wait-mark{animation:none}.live-answer,.live-rank,.live-timer i{transition:none}} /* Knockout bracket — one clear stadium road from 8 teams to one champion. */ .live-knockout{max-width:1120px;margin:20px auto;padding:18px;border:1px solid rgba(252,211,77,.38);border-radius:24px;background:radial-gradient(circle at 50% 0,rgba(252,211,77,.13),transparent 32%),linear-gradient(145deg,var(--card2),var(--bg2));text-align:left;overflow:hidden} .live-knockout>header{display:flex;align-items:center;gap:11px;margin-bottom:16px}.live-knockout>header>span{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:rgba(252,211,77,.15);font-size:22px}.live-knockout>header div{display:grid;gap:2px}.live-knockout>header b{font-size:18px}.live-knockout>header small{color:var(--gold);font:900 11px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.1em} .live-bracket-track{position:relative;display:grid;grid-template-columns:minmax(230px,1fr) minmax(230px,1fr) minmax(230px,1fr);gap:34px;min-width:760px}.live-bracket-track::before{content:"";position:absolute;left:10%;right:10%;top:51%;height:2px;background:linear-gradient(90deg,transparent,rgba(252,211,77,.7),transparent);z-index:0} .live-bracket-round{position:relative;z-index:1;display:grid;align-content:space-around;gap:12px}.live-bracket-round h3{margin:0 0 3px;color:var(--gold);font:950 12px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.09em;text-align:center}.live-bracket-round.round-2{padding-block:46px}.live-bracket-round.round-3{padding-block:128px} .live-bracket-match{display:grid;border:1px solid var(--line2);border-radius:15px;background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden}.live-bracket-match.is-decided{border-color:rgba(252,211,77,.38)} .live-bracket-team{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:39px;padding:8px 10px;font-size:12px;font-weight:850}.live-bracket-team+.live-bracket-team{border-top:1px solid var(--line)}.live-bracket-team strong{color:var(--gold);font:900 12px/1 ui-monospace,Consolas,monospace}.live-bracket-team>b{color:var(--good)}.live-bracket-team.is-winner{background:var(--good-bg);color:var(--good-ink)}.live-bracket-team.is-loser{opacity:.47;text-decoration:line-through}.live-bracket-team.is-empty{display:flex;color:var(--muted);background:var(--bg2)} .live-bracket-champion{display:grid;gap:3px;max-width:360px;margin:17px auto 0;padding:14px;border:1px solid var(--gold);border-radius:17px;background:linear-gradient(120deg,rgba(252,211,77,.2),var(--card));text-align:center}.live-bracket-champion span{color:var(--gold);font:950 11px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.1em}.live-bracket-champion b{font-size:21px} .live-team-score.is-eliminated{opacity:.42;filter:grayscale(.75)}.live-team-score.is-eliminated::after{content:"×";color:var(--bad);font-size:22px;font-weight:950}.live-team-score.is-eliminated strong{display:none} .live-stage-break>h2{font-size:clamp(25px,5vw,40px);margin:5px 0}.live-eliminated-note{max-width:820px;margin:0 auto 14px;padding:12px 15px;border:1px solid var(--bad);border-radius:15px;background:var(--bad-bg);color:var(--bad-ink);font-weight:850;text-align:center} .live-captain-removal{max-width:760px;margin:16px auto;padding:15px;border:1px solid rgba(239,99,132,.38);border-radius:18px;background:linear-gradient(125deg,rgba(239,99,132,.09),var(--card2));text-align:left}.live-captain-removal>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center}.live-captain-removal>div:first-child b{font-size:16px}.live-captain-removal>div:first-child span,.live-captain-removal>p,.live-captain-removal>small{color:var(--muted);font-size:12px;font-weight:750}.live-captain-removal>p{line-height:1.5}.live-removal-list{display:grid;gap:7px}.live-removal-list article{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:13px;background:var(--bg2)}.live-removal-list article>span{font-weight:850}.live-removal-list .btn:disabled{opacity:.42} @media(max-width:820px){.live-knockout{overflow-x:auto}.live-bracket-track{min-width:720px}.live-bracket-round.round-2{padding-block:42px}.live-bracket-round.round-3{padding-block:120px}} @media(max-width:520px){.live-knockout{margin-inline:-5px;padding:13px}.live-captain-removal>div:first-child{align-items:flex-start;flex-direction:column}.live-removal-list article{align-items:center}.live-removal-list .btn{min-height:40px}} @media(prefers-reduced-motion:reduce){.live-knockout{scroll-behavior:auto}} /* Bilingo Community — a compact classroom roster, not a generic social feed. */ .messages-tab{position:relative;width:auto;min-width:42px;padding:0 12px;gap:7px} .messages-label{font-size:12px;font-weight:900;letter-spacing:-.01em} .messages-badge{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--header-bg);border-radius:999px;display:grid;place-items:center;background:#ef4444;color:#fff;font:900 10px/1 ui-monospace,Consolas,monospace} .messages-badge[hidden]{display:none} .live-people-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px}.live-head>.az-chat-close{margin-left:0} .status-dot{display:inline-block;width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.14)} .status-dot.online{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)} .status-dot.duel{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16)} .status-dot.offline{background:#94a3b8} .community-overlay{z-index:770;padding:18px;align-items:center;justify-content:center;background:rgba(6,10,20,.86);backdrop-filter:blur(12px)} .community-shell{width:min(900px,100%);height:min(760px,calc(100vh - 36px));display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;border:1px solid var(--line2);border-radius:28px;background:linear-gradient(155deg,var(--card),var(--bg2));box-shadow:0 30px 90px rgba(0,0,0,.55)} .community-head{display:flex;align-items:center;gap:14px;padding:20px 24px 14px}.community-head>div:first-child{min-width:0}.community-head h2{margin:2px 0 0;font-size:clamp(22px,4vw,32px)}.community-head>.az-chat-close{margin-left:auto} .community-tabs{display:flex;gap:7px;padding:0 24px 13px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}.community-tabs::-webkit-scrollbar{display:none} .community-tab{appearance:none;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:var(--card2);color:var(--muted);font:850 12px/1.2 inherit;cursor:pointer} .community-tab.active{border-color:var(--sec);background:rgba(var(--sec-rgb),.15);color:var(--sec)} .community-tab.support-tab{border-color:rgba(56,189,248,.45)} .community-stage{min-height:0;overflow:auto;padding:20px 24px 24px;overscroll-behavior:contain} .community-loading,.community-empty{min-height:260px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;color:var(--muted)} .community-loading i{width:34px;height:34px;border:4px solid var(--line2);border-top-color:var(--sec);border-radius:50%;animation:community-spin .8s linear infinite}.community-empty small{display:block;color:var(--muted)}.community-empty .btn{margin-top:8px} @keyframes community-spin{to{transform:rotate(360deg)}} .community-roster-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px;margin-bottom:14px;padding:3px 2px}.community-roster-head h3{font-size:21px}.community-roster-head p{max-width:630px;margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.45} .community-legend{max-width:230px;color:var(--muted);font-size:11px;line-height:1.35;text-align:right} .community-people,.community-conversations,.community-invitations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:82px} .community-person{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:linear-gradient(160deg,var(--card2),var(--card));transition:border-color .16s,transform .16s}.community-person:hover{border-color:var(--line2);transform:translateY(-1px)}.community-person.open{border-color:var(--sec)} .community-person-main{appearance:none;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:12px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer} .community-avatar{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(var(--sec-rgb),.35);border-radius:14px;background:linear-gradient(145deg,rgba(var(--sec-rgb),.2),var(--card3));color:var(--sec);font-weight:950;text-transform:uppercase} .community-person-copy{min-width:0}.community-person-copy b{display:block;overflow:hidden;text-overflow:ellipsis}.community-person-copy small{display:flex;align-items:center;gap:7px;margin-top:3px;color:var(--muted);font-size:11px}.community-person-copy .status-dot{width:8px;height:8px;flex-basis:8px} .community-unread{min-width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:#ef4444;color:#fff;font:900 11px/1 ui-monospace,Consolas,monospace}.community-chevron{color:var(--muted);font-size:24px;transition:transform .16s}.community-person.open .community-chevron{transform:rotate(90deg)} .community-person-actions{display:none;grid-template-columns:1fr 1.5fr;gap:8px;padding:0 12px 12px}.community-person.open .community-person-actions{display:grid} .community-invite-bar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-70px;padding:12px 14px;border:1px solid var(--line2);border-radius:17px;background:var(--header-bg);backdrop-filter:blur(16px);box-shadow:0 -10px 30px rgba(0,0,0,.18)}.community-invite-bar b{font-size:13px} .community-conversations{grid-template-columns:1fr;padding-bottom:0}.community-conversation{appearance:none;position:relative;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px;border:1px solid var(--line);border-radius:16px;padding:11px 13px;background:var(--card2);color:var(--ink);text-align:left;cursor:pointer}.community-conversation:hover{border-color:var(--sec)} .community-conversation>span:nth-child(2){min-width:0}.community-conversation b,.community-conversation small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.community-conversation small{margin-top:3px;color:var(--muted);font-size:12px}.community-conversation time{align-self:start;color:var(--muted);font-size:10px}.community-conversation>i{position:absolute;right:12px;bottom:10px;min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:#ef4444;color:#fff;font:900 10px/1 ui-monospace,Consolas,monospace} .community-chat-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.community-chat-head h3{font-size:19px}.community-chat-head small{color:var(--muted)}.community-safety-pill{margin-left:auto;white-space:nowrap;padding:7px 10px;border:1px solid rgba(34,197,94,.4);border-radius:999px;background:rgba(34,197,94,.12);color:#86efac;font-size:10px;font-weight:900} .community-message-list{height:clamp(290px,52vh,480px);overflow:auto;display:flex;flex-direction:column;gap:9px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--bg2)} .community-message{max-width:min(78%,620px);padding:10px 13px;border:1px solid var(--line);border-radius:16px 16px 16px 5px;background:var(--card2);color:var(--ink)}.community-message.mine{align-self:flex-end;border-color:rgba(var(--sec-rgb),.48);border-radius:16px 16px 5px 16px;background:linear-gradient(145deg,rgba(var(--sec-rgb),.22),var(--card3))}.community-message.theirs{align-self:flex-start}.community-message b{display:block;margin-bottom:3px;color:var(--sec);font-size:11px}.community-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}.community-message time{display:block;margin-top:5px;color:var(--muted);font-size:9px;text-align:right} .community-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:10px}.community-compose .txt{min-width:0} .community-support-card{display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;margin-bottom:12px;padding:14px 16px;border:1px solid rgba(56,189,248,.45);border-radius:18px;background:linear-gradient(125deg,rgba(56,189,248,.18),rgba(var(--sec-rgb),.08),var(--card2));box-shadow:inset 3px 0 #38bdf8}.community-support-card h3{margin:0;font-size:18px}.community-support-card p{margin:3px 0 0;color:var(--muted);font-size:12px}.community-support-shield{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#38bdf8,#2563eb);color:#fff;font-size:23px;font-weight:950;box-shadow:0 10px 24px rgba(37,99,235,.28)} .community-message.admin-message{border-color:rgba(56,189,248,.38);background:linear-gradient(145deg,rgba(56,189,248,.13),var(--card2))}.community-message.admin-message b{color:#38bdf8} .support-compose{grid-template-columns:auto minmax(0,1fr) auto}.support-attach{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(56,189,248,.48);border-radius:12px;padding:0 13px;background:rgba(56,189,248,.12);color:var(--ink);font-weight:850;cursor:pointer}.support-file-status{min-height:18px;margin:5px 2px 0;color:#7dd3fc;font-size:11px}.support-image-load{display:block;margin-top:7px;border:1px solid rgba(56,189,248,.4);border-radius:11px;padding:8px 10px;background:rgba(56,189,248,.1);color:#7dd3fc;cursor:pointer}.support-image{display:block;width:min(100%,420px);max-height:320px;object-fit:contain;margin-top:8px;border:1px solid var(--line2);border-radius:12px;background:var(--bg)} .community-moderation-warning{display:block;margin:8px 0 0;padding:11px 13px;border:1px solid rgba(251,191,36,.5);border-radius:14px;background:rgba(251,191,36,.12);color:#fde68a;font-weight:800;line-height:1.4} :root[data-theme="light"] .community-safety-pill{color:#166534}:root[data-theme="light"] .community-moderation-warning{color:#7c2d12;background:#fff7d6} .community-invitations{grid-template-columns:1fr;padding-bottom:0}.community-invitation{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line2);border-radius:17px;background:linear-gradient(100deg,rgba(var(--sec-rgb),.12),var(--card2))}.community-invitation b,.community-invitation small{display:block}.community-invitation small{margin-top:4px;color:var(--muted);font-size:11px}.community-invitation>div:last-child{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} .community-invite-toast{position:fixed;z-index:790;right:18px;top:84px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--sec);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:850}.community-invite-toast[hidden]{display:none}.community-invite-toast button{border:0;border-radius:999px;padding:7px 10px;background:var(--sec);color:var(--bg);font-weight:900;cursor:pointer} :root[data-theme="light"] .community-shell{box-shadow:0 30px 80px rgba(74,58,44,.25)} @media(max-width:700px){.community-overlay{padding:0}.community-shell{width:100%;height:100%;border:0;border-radius:0}.community-head{padding:15px 16px 11px}.community-tabs{padding:0 16px 11px}.community-stage{padding:15px 16px 18px}.community-roster-head{grid-template-columns:1fr}.community-legend{text-align:left;max-width:none}.community-people{grid-template-columns:1fr}.community-invite-toast{left:10px;right:10px;top:72px;justify-content:space-between}.community-safety-pill{display:none}.support-compose{grid-template-columns:1fr auto}.support-attach{min-height:44px}.support-compose .txt{grid-column:1/-1;grid-row:1}} @media(max-width:430px){.top-in{padding:9px 8px;gap:6px}.top-in .wordmark{font-size:20px}.stats{gap:5px}.utility-tab,.account-chip{width:34px;min-width:34px;height:34px;min-height:34px}.messages-tab{width:auto;min-width:62px;padding:0 6px;gap:4px}.messages-tab svg{width:17px}.messages-label{font-size:10px}.messages-badge{right:-3px;top:-5px}.live-head{gap:8px}.live-people-btn{padding:7px 9px;font-size:11px}.community-person-main{grid-template-columns:40px minmax(0,1fr) auto auto;padding:10px}.community-avatar{width:38px;height:38px}.community-person-actions{grid-template-columns:1fr}.community-invite-bar{align-items:stretch;flex-direction:column}.community-invite-bar .btn{width:100%}.community-message{max-width:90%}.community-compose{grid-template-columns:1fr}.community-compose .btn{width:100%}.community-invitation{grid-template-columns:40px minmax(0,1fr)}.community-invitation>div:last-child{grid-column:1/-1;justify-content:stretch}.community-invitation>div:last-child .btn{flex:1}} @media(prefers-reduced-motion:reduce){.community-loading i{animation:none}.community-person,.community-chevron{transition:none}}