/* QuizFlick — portal styles on top of shell.css. CSP-safe: no url() to external hosts, no fonts. */
:root{--accent:#00c2a8;--accent2:#ffd166;--ok:#2ed573;--bad:#ff5e7a;--ink:#0b0c10}
.btn{color:var(--ink)}
.btn.ghost{color:var(--text)}
.sub-status.subscribed{background:#0f3d35;color:#5ef0d4}
/* language blocks for long prose: only the active language shows */
[dir=ltr] .l-ar,[dir=rtl] .l-en{display:none}
/* ---------- home ---------- */
.hero.quiz{padding:30px 22px 26px}
.hero .date{color:var(--accent2);font-weight:800;font-size:.9rem;margin-bottom:8px;letter-spacing:.02em}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
.hero .cta .btn{padding:13px 22px;font-size:1rem}
.streak-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,209,102,.14);border:1px solid rgba(255,209,102,.4);color:var(--accent2);font-weight:800;padding:8px 14px;border-radius:999px;font-size:.9rem}
.streak-badge.zero{background:var(--card);border-color:var(--line);color:var(--muted)}
.today-done{display:inline-flex;align-items:center;gap:8px;background:rgba(46,213,115,.12);border:1px solid rgba(46,213,115,.4);color:var(--ok);font-weight:800;padding:8px 14px;border-radius:999px;font-size:.9rem}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;text-align:center}
.stat b{display:block;font-size:1.5rem;line-height:1.1;color:var(--text)}.stat span{color:var(--muted);font-size:.75rem;font-weight:700}
@media(min-width:760px){.stats-row{grid-template-columns:repeat(6,1fr)}}
/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:600px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.cat-grid{grid-template-columns:repeat(5,1fr)}}
.cat{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px 14px;position:relative;transition:transform .15s,border-color .15s;min-height:124px}
.cat:hover{transform:translateY(-3px);border-color:#3a3e52}
.cat .ic{font-size:1.9rem;line-height:1;margin-bottom:10px;display:block}
.cat .nm{font-weight:800;font-size:.95rem;line-height:1.25;display:block;margin-bottom:4px;padding-inline-end:28px}
.cat .ct{color:var(--muted);font-size:.78rem}
.cat .lock{position:absolute;top:10px;inset-inline-end:10px;background:rgba(0,0,0,.55);color:var(--accent2);font-size:.68rem;font-weight:800;padding:4px 8px;border-radius:999px}
.is-subscribed .cat .lock{display:none}
.cat .fav{position:absolute;bottom:10px;inset-inline-end:10px;background:transparent;color:var(--muted);font-size:1.05rem;padding:4px;line-height:1;border-radius:8px}
.cat .fav.on{color:var(--bad)}
.cat.hard{background:linear-gradient(135deg,rgba(255,94,122,.18),var(--card));border-color:rgba(255,94,122,.4);grid-column:1/-1}
@media(min-width:1000px){.cat.hard{grid-column:span 2}}
.cat.hard .nm{font-size:1.05rem}
/* result lists */
.list{display:grid;gap:8px}
.row-r{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.row-r .ic{font-size:1.3rem;width:30px;text-align:center}
.row-r .main{flex:1;min-width:0}.row-r .main b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-r .main span{color:var(--muted);font-size:.78rem}
.row-r .sc{font-weight:800;color:var(--accent);font-size:1.05rem;white-space:nowrap}
.row-r .rank{width:26px;height:26px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-size:.75rem;font-weight:800;color:var(--muted)}
.row-r .rank.top{background:var(--accent2);color:var(--ink);border-color:var(--accent2)}
.two-col{display:grid;gap:26px}@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr}}
/* ---------- play ---------- */
.play-wrap{max-width:720px;margin:0 auto}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:24px;padding:22px 18px;margin:18px 0}
.panel h1{margin:0 0 6px;font-size:1.5rem}.panel .sub{color:var(--muted);margin:0 0 18px}
.panel .modepill{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:800;color:var(--accent);margin-bottom:12px}
.intro-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 20px}
.intro-rules .stat b{font-size:1.3rem}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.topbar .prog{flex:1;height:8px;background:var(--card);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.topbar .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;transition:width .3s}
[dir=rtl] .topbar .prog i{background:linear-gradient(270deg,var(--accent),var(--accent2))}
.topbar .qn{font-size:.8rem;font-weight:800;color:var(--muted);white-space:nowrap}
.topbar .score{font-weight:800;color:var(--accent2);white-space:nowrap;font-size:.9rem}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.qhead .catpill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:700;color:var(--muted)}
.qhead .diff{color:var(--accent2);font-size:.75rem;letter-spacing:.1em}
.timer{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-variant-numeric:tabular-nums;background:conic-gradient(var(--accent) 100%,var(--card) 0);flex:0 0 58px}
.timer::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg2)}
.timer span{position:relative;z-index:1;font-size:1.05rem;direction:ltr}
.timer.warn{background:conic-gradient(var(--bad) var(--p,100%),var(--card) 0)}
.timer.warn span{color:var(--bad);animation:pulse .5s infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.15)}}
.qtext{font-size:1.25rem;font-weight:800;line-height:1.4;margin:6px 0 18px;min-height:3.2em}
@media(min-width:760px){.qtext{font-size:1.45rem}}
.opts{display:grid;gap:10px}
@media(min-width:600px){.opts{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:14px 14px;text-align:start;color:var(--text);font-weight:700;font-size:1rem;transition:border-color .15s,transform .1s,background .2s;width:100%}
.opt:hover{border-color:#4a4f66}.opt:active{transform:scale(.98)}
.opt .k{width:28px;height:28px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem;color:var(--muted);flex:0 0 28px}
.opt .tx{flex:1}
.opt.ok{border-color:var(--ok);background:rgba(46,213,115,.12)}.opt.ok .k{background:var(--ok);color:var(--ink);border-color:var(--ok)}
.opt.bad{border-color:var(--bad);background:rgba(255,94,122,.12)}.opt.bad .k{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt.dim{opacity:.5}
.opt:disabled{cursor:default}
.verdict{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-height:52px}
.verdict .v{font-weight:800}.verdict .v.ok{color:var(--ok)}.verdict .v.bad{color:var(--bad)}
.verdict .gain{color:var(--accent2);font-weight:800;white-space:nowrap}
.explain{color:var(--muted);font-size:.92rem;margin:10px 2px 0;line-height:1.5}
.nextrow{display:flex;justify-content:flex-end;margin-top:16px}
/* results */
.results{text-align:center}
.results .big{font-size:3.2rem;font-weight:900;line-height:1;color:var(--accent);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.results .big small{font-size:1rem;color:var(--muted);font-weight:700;margin-inline-start:6px}
.results .msg{font-size:1.15rem;font-weight:800;margin:6px 0 2px}
.results .sub2{color:var(--muted);margin:0 0 14px}
.results .badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 16px}
.results .badge{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:800;font-size:.85rem}
.results .badge.gold{background:rgba(255,209,102,.16);border-color:rgba(255,209,102,.5);color:var(--accent2)}
.results .badge.green{background:rgba(46,213,115,.12);border-color:rgba(46,213,115,.4);color:var(--ok)}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.results .share-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px auto 14px;max-width:420px;text-align:start;font-size:.85rem;white-space:pre-line;color:var(--muted);direction:inherit}
.review{display:grid;gap:8px;margin-top:20px;text-align:start}
.review .rv{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.88rem}
.review .rv .m{flex:0 0 22px;font-weight:900}.review .rv .m.ok{color:var(--ok)}.review .rv .m.bad{color:var(--bad)}
.review .rv .q{flex:1}.review .rv .q small{display:block;color:var(--muted);margin-top:2px}
.locked-panel{text-align:center;padding:34px 18px}
.locked-panel .ic{font-size:3rem;margin-bottom:8px}
.locked-panel h2{margin:0 0 8px}.locked-panel p{color:var(--muted);margin:0 auto 18px;max-width:420px}
.sound-toggle{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:700}
.sound-toggle.on{color:var(--text)}
/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:55;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;opacity:.95;animation:fall 2.8s linear forwards}
@keyframes fall{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(110vh) rotate(720deg);opacity:.6}}
/* ---------- profile ---------- */
.prof-grid{display:grid;gap:18px}@media(min-width:900px){.prof-grid{grid-template-columns:1fr 1fr}}
.hist-table{width:100%;border-collapse:collapse;font-size:.88rem}
.hist-table th{color:var(--muted);text-align:start;font-weight:700;font-size:.75rem;padding:8px 6px;border-bottom:1px solid var(--line)}
.hist-table td{padding:9px 6px;border-bottom:1px solid var(--line)}
.hist-table td.sc{font-weight:800;color:var(--accent);white-space:nowrap}
.row-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
/* ---------- static pages ---------- */
.page{max-width:760px;margin:18px auto}
.page h1{font-size:1.7rem;margin:0 0 4px}.page .upd{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.page h2{font-size:1.15rem;margin:22px 0 6px}.page p,.page li{color:#d7d9e3;line-height:1.75}
.page ul{padding-inline-start:20px}
.ftr .brandline{font-weight:800;color:var(--text);margin-bottom:4px}
#profMsisdn,#profSince,.hist-table td.sc,.row-r .sc{direction:ltr;unicode-bidi:isolate}