:root{
  --bg:#f6f7fc;--surface:#ffffff;--ink:#121b36;--muted:#7f8799;--line:#e4e7f0;
  --primary:#5355ea;--primary2:#7066f2;--primary-soft:#efefff;--navy:#0d1740;
  --green:#51bf7b;--green-soft:#e9f8ef;--yellow:#f1c341;--gray:#b9beca;
  --blue-soft:#eaf4ff;--orange:#f49b34;--shadow:0 12px 34px rgba(30,42,78,.08);
  --shadow-sm:0 5px 18px rgba(30,42,78,.07);--r-xl:26px;--r-lg:21px;--r-md:15px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Roboto,"Noto Sans","Segoe UI",system-ui,-apple-system,sans-serif;font-size:16px}
button{font:inherit;color:inherit}button:focus-visible{outline:3px solid rgba(83,85,234,.28);outline-offset:2px}
.app{min-height:100vh;padding:0 0 calc(78px + env(safe-area-inset-bottom));overflow-x:hidden}
.content{padding:18px 16px 30px}.top{padding:18px 18px 4px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:29px;line-height:1;font-weight:900;letter-spacing:-1px}.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#e6e2ff,#cfd5ff);display:grid;place-items:center;font-weight:900;color:#514bd2;border:1px solid #d9d5ff}
.week{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 2px 16px}.week-main{display:flex;align-items:center;gap:10px}.cal-icon{width:42px;height:42px;border-radius:13px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary)}
.week strong{display:block;font-size:18px;letter-spacing:-.3px}.week small{display:block;margin-top:2px;color:var(--muted);font-size:12px}.week-badge{padding:8px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-weight:750;font-size:11px;white-space:nowrap}
.hero{position:relative;overflow:hidden;background:linear-gradient(130deg,#4a50e4 0%,#6057ec 48%,#263ea8 100%);color:#fff;border-radius:25px;padding:20px 19px;box-shadow:0 14px 28px rgba(70,72,202,.20);display:grid;grid-template-columns:1fr 1.08fr;min-height:154px}
.hero::after{content:"";position:absolute;width:190px;height:190px;right:-70px;top:-85px;border-radius:50%;background:rgba(255,255,255,.06)}.hero-cell{position:relative;z-index:1}.hero-cell+ .hero-cell{border-left:1px solid rgba(255,255,255,.27);padding-left:18px}.eyebrow{font-size:11px;letter-spacing:.9px;font-weight:800;opacity:.84}.big{font-size:34px;line-height:1.05;font-weight:900;margin-top:7px;letter-spacing:-1px}.sub{font-size:12px;opacity:.84;margin-top:6px}.hero-trophy{position:absolute;right:4px;bottom:-7px;width:92px;height:92px;opacity:.96;z-index:0}.hero-week-score{padding-right:66px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:23px 1px 11px}.section-title h2{margin:0;font-size:20px;font-weight:900;letter-spacing:-.5px}.section-link{border:0;background:transparent;color:var(--primary);font-weight:750;font-size:12px;padding:8px 0}
.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.game-card{background:var(--surface);border:1px solid var(--line);border-radius:21px;padding:11px 9px 10px;box-shadow:var(--shadow-sm);text-align:center;min-width:0}.game-icon{width:58px;height:58px;margin:0 auto 8px;border-radius:18px;display:grid;place-items:center}.game-icon.word{background:var(--green-soft)}.game-icon.quiz{background:#f0eaff}.game-icon.math{background:var(--blue-soft)}.game-card h3{font-size:14px;line-height:1.15;margin:0;font-weight:900;letter-spacing:-.2px}.game-card p{font-size:10.5px;color:var(--muted);margin:4px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-pill{display:inline-block;padding:5px 9px;border-radius:999px;font-size:9.5px;font-weight:750;margin-bottom:8px;background:#f1efff;color:#655ee4}.status-pill.word{background:#eaf9f1;color:#2b9863}.status-pill.math{background:#eaf4ff;color:#3e78c8}.play{width:100%;border:0;background:linear-gradient(135deg,var(--primary),#6656ec);color:#fff;border-radius:13px;min-height:39px;font-weight:900;font-size:12px;box-shadow:0 6px 12px rgba(83,85,234,.18)}
.leader-card{margin-top:17px;background:var(--surface);border:1px solid var(--line);border-radius:23px;padding:15px 14px 12px;box-shadow:var(--shadow-sm)}.leader-heading{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.leader-heading h2{font-size:20px;margin:0;font-weight:900}.leader-heading small{font-size:10px;color:var(--muted)}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:0 0 8px}.chip{min-width:0;border:1px solid var(--line);background:#fff;padding:8px 4px;border-radius:999px;color:#687083;font-weight:750;font-size:10px;white-space:nowrap}.chip.on{background:linear-gradient(135deg,var(--primary),#6257ea);color:#fff;border-color:transparent}.rank{display:grid;grid-template-columns:32px 31px minmax(0,1fr) auto;gap:7px;align-items:center;padding:8px 2px;border-top:1px solid #eff0f5;font-size:12.5px}.rank:first-of-type{border-top:0}.rank-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-score{font-weight:900}.medal{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;border:1px solid #e4e6ed;background:#f6f7fb}.medal.gold{background:#ffc62f;border-color:#e8a700}.medal.silver{background:#d9dce2;border-color:#b5b9c2}.medal.bronze{background:#d89a67;border-color:#b97947;color:#fff}.face{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;background:linear-gradient(145deg,#f1efff,#d9e0ff);color:#5157c8}.me{background:#f0edff;border-radius:13px;border-top-color:transparent;padding-left:5px;padding-right:5px}.past-card{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:13px 14px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}.past-icon{font-size:27px}.past-card strong{display:block;font-size:14px}.past-card small{color:var(--muted);font-size:10.5px}.chev{margin-left:auto;color:#7c8394;font-size:24px}
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.97);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:7px 5px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -5px 16px rgba(20,30,60,.04)}.nav{border:0;background:transparent;color:#878e9d;font-size:9.5px;font-weight:750;padding:4px 0;min-height:54px}.nav svg{width:24px;height:24px;display:block;margin:0 auto 3px;stroke:currentColor}.nav.on{color:var(--primary)}
.screen-head{padding:16px 16px 8px;display:flex;align-items:center;gap:12px}.back{width:43px;height:43px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 3px 9px rgba(30,42,78,.03)}.screen-head h1{margin:0;font-size:24px;font-weight:900;letter-spacing:-.7px}.score-badge{margin-left:auto;border:1px solid var(--line);border-radius:15px;background:#fff;padding:8px 10px;box-shadow:var(--shadow-sm);font-size:10px;color:var(--muted);text-align:center}.score-badge strong{display:block;color:var(--ink);font-size:14px}.screen-body{padding:10px 16px 105px}.panel{background:#fff;border:1px solid var(--line);border-radius:23px;padding:16px;box-shadow:var(--shadow)}.muted{color:var(--muted);font-size:11.5px}
/* Petica */
.word-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.word-intro strong{font-size:12px}.word-grid{width:100%;max-width:380px;margin:10px auto 12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.tile{aspect-ratio:1;border:1.7px solid #d9dde6;border-radius:8px;display:grid;place-items:center;font-size:24px;font-weight:900;text-transform:uppercase;background:#fff}.tile.g{background:#61c47f;border-color:#61c47f;color:#fff}.tile.y{background:#f2c542;border-color:#f2c542;color:#151c30}.tile.x{background:#b9bec9;border-color:#b9bec9;color:#fff}.legend{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;color:#6f7788;font-size:9.5px}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:13px;height:13px;border-radius:3px;display:inline-block}.word-result{margin:12px 0 0;border:1px solid var(--line);border-radius:18px;background:#fff;padding:12px 13px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-sm)}.result-round{width:38px;height:38px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;color:#37aa6a}.word-result strong{font-size:12.5px}.word-result small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.keyboard{margin-top:13px;display:grid;gap:5px}.keyrow{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.key{height:40px;padding:0;border:0;border-radius:7px;background:#eceef3;color:#273047;font-weight:850;font-size:12px;min-width:0}.key.g{background:var(--green);color:#fff}.key.y{background:var(--yellow);color:#1d2435}.key.x{background:var(--gray);color:#fff}.key.enter{font-size:9px;background:linear-gradient(135deg,var(--primary),#6656ec);color:#fff}
/* Quiz */
.quiz-status{background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px 15px;box-shadow:var(--shadow-sm)}.quiz-top{display:flex;justify-content:space-between;align-items:center}.quiz-count small{display:block;color:var(--muted);font-size:10px}.quiz-count strong{font-size:25px}.timer{font-size:21px;font-weight:900;color:var(--ink);display:flex;align-items:center;gap:6px}.timer svg{stroke:var(--primary)}.progress{height:7px;background:#e9eaf1;border-radius:99px;overflow:hidden;margin-top:12px}.progress div{height:100%;width:30%;background:linear-gradient(90deg,var(--primary),#4d71f2);border-radius:99px}.quiz-pills{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 8px}.pill{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;background:var(--primary-soft);color:#4f55d7;padding:9px 10px;font-size:11px;font-weight:800}.pill.hardness{background:#fff0dd;color:#dc7a13}.question-card{background:#fff;border:1px solid var(--line);border-radius:23px;padding:17px 15px;box-shadow:var(--shadow)}.question{font-size:21px;font-weight:900;line-height:1.28;margin:0 0 17px;letter-spacing:-.45px}.option{width:100%;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;text-align:left;border:1.3px solid var(--line);background:#fff;border-radius:15px;padding:10px 11px;margin:8px 0;font-size:13px;font-weight:650;min-height:57px}.option-letter{width:34px;height:34px;border:1px solid #dce0e9;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#50586b}.option.sel{border:2px solid var(--primary);background:#f2f0ff}.option.sel .option-letter{background:var(--primary);border-color:var(--primary);color:#fff}.quiz-footer{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:19px;padding:11px 13px;box-shadow:var(--shadow-sm)}.quiz-lock{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;color:#687083}.primary{width:100%;border:0;background:linear-gradient(135deg,#4f55ee,#6356e9);color:#fff;border-radius:15px;padding:14px;font-size:14px;font-weight:900;margin-top:12px;box-shadow:0 7px 16px rgba(83,85,234,.19)}
/* Math */
.math-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.math-meta strong{font-size:12px}.math-time{background:var(--primary-soft);border-radius:999px;padding:8px 11px;color:var(--primary);font-weight:900;font-size:12px}.math-target{position:relative;overflow:hidden;background:linear-gradient(135deg,#3f49d9,#4c54e8 57%,#2940a5);color:#fff;border-radius:24px;padding:17px 19px;min-height:140px;box-shadow:0 12px 24px rgba(62,73,213,.2)}.math-target small{font-weight:700;opacity:.84}.math-target strong{display:block;font-size:52px;line-height:1;font-weight:900;margin:8px 0 4px;letter-spacing:-2px}.math-target span{font-size:10.5px;opacity:.9}.target-art{position:absolute;right:15px;top:20px;width:100px;height:100px}.subhead{font-size:14px;font-weight:900;margin:17px 0 8px}.nums{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.num{height:55px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:19px;font-weight:900;box-shadow:0 3px 10px rgba(30,42,78,.04)}.num:disabled{opacity:.3}.ops{display:flex;justify-content:center;gap:14px;margin:8px 0 13px}.op{width:49px;height:49px;border-radius:50%;border:1px solid #dadbff;background:#f2f1ff;color:#4b51dc;font-size:23px;font-weight:900}.expression-wrap{display:flex;align-items:end;justify-content:space-between;margin-top:4px}.expression-wrap strong{font-size:13px}.expression{min-height:77px;background:#fff;border:1.5px dashed #c9ceda;border-radius:17px;padding:14px;margin:7px 0 11px;font-size:21px;font-weight:900;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-word}.score-guide{background:#fff;border:1px solid #d9d7ff;border-radius:18px;padding:12px;box-shadow:var(--shadow-sm)}.score-guide-title{font-size:12px;font-weight:900;margin-bottom:8px}.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.score-cell{border:1px solid var(--line);border-radius:12px;padding:8px 3px;text-align:center;font-size:8.5px}.score-cell strong{display:block;font-size:16px;margin-top:2px}.score-cell.best{background:#edfbf3;border-color:#b7edce;color:#138c52}.score-more{margin-top:6px;text-align:center;color:var(--muted);font-size:8.5px}.actions{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:7px;margin-top:11px}.secondary{border:1px solid var(--primary);color:var(--primary);background:#fff;border-radius:14px;padding:12px 4px;font-weight:850;font-size:11px}.actions .primary{margin:0;padding:12px 5px}
/* Leaderboard / winners / profile */
.full-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:13px}.rank-list{background:#fff;border:1px solid var(--line);border-radius:23px;padding:7px 13px;box-shadow:var(--shadow-sm)}.rank-list .rank{font-size:14px;padding:11px 2px}.rank-list .rank-score{font-size:14px}.rank-list .face{width:33px;height:33px}.rank-list .medal{width:27px;height:27px}.winner-week{background:#fff;border:1px solid var(--line);border-radius:22px;padding:15px;margin-bottom:12px;box-shadow:var(--shadow-sm)}.winner-week h3{margin:0 0 10px;font-size:17px}.winner-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #f0f1f5;font-size:12px}.winner-row:first-of-type{border-top:0}.winner-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft)}.profile-hero{text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}.profile-hero .avatar{margin:auto;width:72px;height:72px;font-size:24px}.profile-hero h2{margin:9px 0 2px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:12px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:12px;box-shadow:var(--shadow-sm)}.stat-card small{color:var(--muted);font-size:9.5px}.stat-card strong{display:block;font-size:20px;margin-top:3px}.trophies{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;box-shadow:var(--shadow-sm)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);background:#172033;color:#fff;padding:10px 14px;border-radius:12px;font-size:11px;z-index:50;opacity:0;transition:.2s;pointer-events:none;max-width:80%;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:345px){.content,.screen-body{padding-left:12px;padding-right:12px}.game-card{padding-left:6px;padding-right:6px}.game-icon{width:51px;height:51px}.game-card h3{font-size:12.5px}.game-card p{font-size:9px}.big{font-size:30px}.key{font-size:11px}.word-grid{gap:5px}}
@media(max-height:760px){.tile{font-size:21px}.word-grid{gap:5px;max-width:330px}.key{height:36px}.keyboard{gap:4px}.screen-body{padding-top:5px}.question{font-size:19px}.option{min-height:52px;padding-top:8px;padding-bottom:8px}}

/* Math UX v0.7 — clear first-time flow */
.math-screen{padding-top:6px}.math-topline{display:flex;align-items:center;justify-content:space-between;margin:1px 0 10px}.math-game-label{display:flex;align-items:center;gap:9px}.math-game-label>span:last-child{display:flex;flex-direction:column}.math-game-label strong{font-size:12px}.math-game-label small{font-size:9.5px;color:var(--muted);margin-top:2px}.math-dot{width:30px;height:30px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:12px;font-weight:900}.math-time{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:var(--primary);font-weight:900;font-size:12px;box-shadow:0 3px 10px rgba(30,42,78,.04)}
.math-goal-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:linear-gradient(135deg,#4850e0,#6657eb);color:#fff;border-radius:22px;padding:15px 16px;box-shadow:0 10px 23px rgba(70,72,202,.18)}.math-goal-copy{min-width:0}.goal-kicker{display:block;font-size:9px;letter-spacing:1px;font-weight:900;opacity:.8;margin-bottom:4px}.math-goal-copy strong{display:block;font-size:15px;line-height:1.25}.math-goal-copy small{display:block;font-size:9.5px;line-height:1.35;opacity:.82;margin-top:5px}.goal-number{min-width:86px;border-radius:17px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:9px 10px;text-align:center}.goal-number span{display:block;font-size:8px;font-weight:850;letter-spacing:1px;opacity:.8}.goal-number b{display:block;font-size:34px;line-height:1.05;letter-spacing:-1px;margin-top:2px}
.math-flow{display:flex;align-items:center;justify-content:center;gap:5px;margin:13px 0 11px;overflow:hidden}.flow-step{display:flex;align-items:center;gap:4px;border-radius:999px;background:#eceef4;color:#9197a6;padding:6px 7px;font-size:8.5px;font-weight:850;white-space:nowrap}.flow-step i{font-style:normal;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#dfe2ea;font-size:8px}.flow-step.active{background:var(--primary-soft);color:var(--primary)}.flow-step.active i{background:var(--primary);color:#fff}.flow-step.done{background:#eaf8ef;color:#2c9461}.flow-step.done i{background:var(--green);color:#fff}.flow-arrow{color:#b2b6c0;font-size:17px;font-weight:900}
.expression-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px 13px 10px;box-shadow:var(--shadow-sm);margin-bottom:12px}.expression-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.expression-head strong{font-size:12px}.expression-head span{font-size:9.5px;color:var(--primary);font-weight:800;text-align:right}.expression{min-height:66px;margin:7px 0 0;border:2px solid #d7d9ff;background:#fafaff;border-radius:15px;padding:11px;font-size:23px;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-word}.expression.math-empty{display:none}.expression-placeholder{min-height:66px;margin:7px 0 0;border:2px dashed #d8dbe7;background:#fafbfe;border-radius:15px;padding:12px 18px;display:flex;align-items:center;justify-content:center;text-align:center;color:#858c9d;font-size:10.5px;line-height:1.45}.expr-tools{display:flex;justify-content:flex-end;gap:13px;margin-top:7px}.text-action{border:0;background:transparent;color:var(--primary);font-size:10px;font-weight:850;padding:6px 3px}.text-action:disabled{opacity:.25}.danger-lite{color:#a36a72}
.picker-block{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:12px;margin-top:9px;box-shadow:0 4px 15px rgba(30,42,78,.04);transition:border .15s,box-shadow .15s,background .15s}.picker-block.picker-active{border-color:#b9bcff;box-shadow:0 7px 18px rgba(83,85,234,.09);background:#fdfdff}.picker-title{display:flex;align-items:center;gap:9px;margin-bottom:9px}.picker-badge{width:28px;height:28px;border-radius:9px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:900;font-size:11px}.muted-badge{background:#e8eaf0;color:#89909f}.picker-block.picker-active .muted-badge{background:var(--primary);color:#fff}.picker-title>div{display:flex;flex-direction:column}.picker-title strong{font-size:12px}.picker-title small{font-size:9.5px;color:var(--muted);margin-top:2px}.math-nums{grid-template-columns:repeat(3,1fr);gap:8px}.math-nums .num{height:58px;border:1.5px solid #dfe2ea;border-radius:14px;background:#fff;font-size:21px;font-weight:900;box-shadow:0 3px 9px rgba(30,42,78,.04)}.math-nums .num:not(:disabled):active{transform:scale(.98);background:var(--primary-soft);border-color:#b9bcff}.math-nums .num:disabled{opacity:.28;box-shadow:none}.math-nums .num.used{opacity:.18;text-decoration:line-through}.operator-block{margin-top:9px}.math-ops{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}.math-ops .op{width:auto;height:52px;border-radius:14px;border:1.5px solid #d8d9ff;background:#f3f2ff;color:#4c51dd;font-size:24px;font-weight:900}.math-ops .op:disabled{background:#f2f3f6;color:#b7bbc5;border-color:#e6e8ee;opacity:.75}.math-ops .op:not(:disabled):active{transform:scale(.97);background:#e7e5ff}
.math-rule{display:flex;gap:9px;align-items:flex-start;margin:11px 2px 8px;color:#6e7688}.math-rule>span{width:25px;height:25px;border-radius:50%;background:#eef0f6;display:grid;place-items:center;font-weight:900;font-size:11px;flex:0 0 auto}.math-rule>div{display:flex;flex-direction:column}.math-rule strong{font-size:10.5px;color:#596176}.math-rule small{font-size:9px;line-height:1.4;margin-top:2px}.math-submit{width:100%;border:0;border-radius:16px;background:linear-gradient(135deg,#4f55ee,#6356e9);color:#fff;min-height:58px;padding:9px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 17px rgba(83,85,234,.22);margin-top:7px}.math-submit span{font-size:14px;font-weight:950;letter-spacing:.25px}.math-submit small{font-size:9px;opacity:.84;margin-top:2px}.math-submit:disabled{background:#d8dbe5;box-shadow:none;color:#9399a8}.score-details{margin:8px 0 0;border:0;text-align:center}.score-details summary{list-style:none;color:var(--primary);font-size:10px;font-weight:800;padding:6px;cursor:pointer}.score-details summary::-webkit-details-marker{display:none}.score-detail-body{background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px 10px;color:#737b8c;font-size:9.5px;line-height:1.5;text-align:left}
.result-overlay{position:fixed;inset:0;z-index:100;background:rgba(15,22,48,.54);display:flex;align-items:flex-end;justify-content:center;padding:18px}.result-modal{width:min(100%,430px);background:#fff;border-radius:26px;padding:21px 18px 18px;text-align:center;box-shadow:0 24px 60px rgba(12,20,45,.26)}.result-icon{width:52px;height:52px;border-radius:17px;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 9px;font-size:25px}.result-kicker{font-size:9px;font-weight:900;letter-spacing:1px;color:var(--green)}.result-modal h2{margin:4px 0 7px;font-size:22px}.result-expression{font-size:12px;color:var(--muted);margin-bottom:3px}.result-number{font-size:43px;font-weight:950;letter-spacing:-1.5px}.result-vs{font-size:10.5px;color:var(--muted)}.result-points{font-size:24px;font-weight:950;color:var(--primary);margin:10px 0 3px}.result-points span{font-size:11px;color:var(--muted);font-weight:700}
@media(max-width:370px){.flow-step{font-size:7.8px;padding-left:5px;padding-right:5px}.flow-step i{width:15px;height:15px}.goal-number{min-width:76px}.goal-number b{font-size:30px}.math-goal-copy strong{font-size:13px}.math-nums .num{height:54px}.math-ops .op{height:49px}}
@supports(padding:max(0px)){.top,.screen-head{padding-top:max(16px,env(safe-area-inset-top))}.app{padding-bottom:calc(78px + env(safe-area-inset-bottom))}}

/* Math UX v0.8 — one-screen compact flow */
.math-compact{padding-top:4px;padding-bottom:88px}
.math-compact .math-topline,.math-compact .math-flow,.math-compact .picker-title,.math-compact .math-rule{display:none}
.math-compact-goal{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#4b51e4,#6559eb);color:#fff;border-radius:18px;padding:10px 13px;box-shadow:0 8px 18px rgba(70,72,202,.16)}
.math-compact-goal>div:first-child{display:flex;align-items:baseline;gap:10px}.math-compact-goal span{font-size:9px;font-weight:900;letter-spacing:.8px;opacity:.82}.math-compact-goal strong{font-size:30px;line-height:1;font-weight:950;letter-spacing:-1px}.math-compact-timer{font-size:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);padding:7px 9px;border-radius:999px}.math-compact-timer b{font-size:12px}
.math-instruction{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 2px 6px;font-size:10px}.math-instruction b{font-size:11px}.math-instruction span{color:var(--primary);font-weight:850}
.math-expression-card{padding:9px 10px 7px;border-radius:16px;margin-bottom:7px}.math-expression-card .expression-head strong{font-size:11px}.math-expression-card .expression-head span{font-size:9px}.math-expression-card .expression{min-height:46px;margin-top:5px;border-radius:12px;padding:7px 9px;font-size:19px}.math-expression-card .expression-placeholder{min-height:46px;margin-top:5px;border-radius:12px;padding:8px 12px;font-size:10px}.math-expression-card .expr-tools{margin-top:3px;gap:10px}.math-expression-card .text-action{font-size:9.5px;padding:4px 2px}
.math-picker-row{background:#fff;border:1px solid var(--line);border-radius:15px;padding:8px 9px;margin-top:6px;box-shadow:0 3px 11px rgba(30,42,78,.035)}.compact-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}.compact-label strong{font-size:11px}.compact-label small{font-size:8.8px;color:var(--muted)}
.compact-nums{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.compact-nums .num{height:42px;min-width:0;border-radius:11px;font-size:16px;padding:0;box-shadow:none}.compact-nums .num:disabled{opacity:.24}
.compact-ops{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0}.compact-ops .op{height:42px;border-radius:11px;font-size:20px;box-shadow:none}
.math-priority{text-align:center;color:#747c8e;font-size:9px;margin:7px 0 5px}
.compact-submit{min-height:50px;border-radius:14px;margin-top:0;padding:7px 12px}.compact-submit span{font-size:13px}.compact-submit small{font-size:8.5px;margin-top:1px}
.compact-details{margin-top:4px}.compact-details summary{font-size:9px;padding:4px}
@media(max-height:760px){.math-compact{padding-top:1px}.math-compact-goal{padding:8px 11px}.math-compact-goal strong{font-size:27px}.math-instruction{margin-top:6px;margin-bottom:4px}.math-expression-card{margin-bottom:5px}.math-picker-row{padding:6px 8px;margin-top:5px}.compact-nums .num,.compact-ops .op{height:38px}.math-priority{margin:5px 0 4px}.compact-submit{min-height:46px}.compact-details{margin-top:2px}}
@media(max-width:370px){.compact-nums{gap:4px}.compact-nums .num{height:39px;font-size:15px}.compact-ops .op{height:39px;font-size:19px}.math-compact-goal strong{font-size:27px}}

/* v0.9 — Petica and quiz one-screen mobile UX */
.word-screen{padding-top:3px;padding-bottom:82px;overflow:hidden}
.word-screen .word-intro{margin-bottom:2px}
.word-screen .word-grid{max-width:260px;margin:4px auto 6px;gap:5px;grid-auto-rows:clamp(37px,5.45vh,44px)}
.word-screen .tile{aspect-ratio:auto;height:auto;border-radius:7px;font-size:20px}
.word-screen .legend{gap:7px;font-size:8.1px;line-height:1.15;flex-wrap:nowrap;white-space:nowrap}
.word-screen .legend i{width:10px;height:10px;border-radius:2px}
.word-screen .word-result{margin-top:6px;padding:6px 9px;border-radius:13px;gap:7px;min-height:40px}
.word-screen .result-round{width:29px;height:29px;font-size:13px;flex:0 0 auto}
.word-screen .word-result strong{font-size:10.5px}.word-screen .word-result small{font-size:8.5px;margin-top:1px}
.word-screen .keyboard{margin-top:7px;gap:5px}
.word-screen .keyrow{gap:4px}
.word-screen .key{height:42px;border-radius:8px;font-size:15px;font-weight:900}
.word-screen .key.enter{font-size:16px}

.quiz-screen{padding-top:3px;padding-bottom:82px;overflow:hidden}
.quiz-screen .quiz-status{border-radius:16px;padding:8px 11px}
.quiz-screen .quiz-count small{font-size:8.5px}.quiz-screen .quiz-count strong{font-size:20px}
.quiz-screen .timer{font-size:17px;gap:4px}.quiz-screen .timer svg{width:21px;height:21px}
.quiz-screen .progress{height:5px;margin-top:6px}
.quiz-screen .quiz-pills{gap:6px;margin:7px 5px}
.quiz-screen .pill{padding:6px 7px;font-size:9.2px}
.quiz-screen .question-card{border-radius:17px;padding:10px 11px}
.quiz-screen .question{font-size:16px;line-height:1.22;margin-bottom:7px;letter-spacing:-.25px}
.quiz-screen .option{grid-template-columns:30px 1fr;gap:8px;border-radius:12px;padding:6px 8px;margin:5px 0;font-size:11.5px;min-height:43px}
.quiz-screen .option-letter{width:27px;height:27px;font-size:11px}
.quiz-screen .option:disabled{opacity:1}
.quiz-screen .option.correct{border:2px solid #48b977;background:#eaf9f0;color:#176a41}
.quiz-screen .option.correct .option-letter{background:#48b977;border-color:#48b977;color:#fff}
.quiz-screen .option.wrong{border:2px solid #e66d72;background:#fff0f1;color:#9d3439}
.quiz-screen .option.wrong .option-letter{background:#e66d72;border-color:#e66d72;color:#fff}
.quiz-screen .option.answered{opacity:.58}
.quiz-screen .quiz-footer{margin-top:7px;border-radius:15px;padding:7px 9px}
.quiz-feedback{min-height:27px;display:flex;align-items:center;justify-content:center;gap:6px;color:#687083;font-size:9.3px;line-height:1.2;text-align:left}
.quiz-feedback .feedback-dot{width:19px;height:19px;border-radius:50%;background:#eef0f6;display:grid;place-items:center;font-size:9px;font-weight:900;flex:0 0 auto}
.quiz-feedback.good{color:#25734b}.quiz-feedback.good .feedback-dot{background:#e4f7ec;color:#26935c}
.quiz-feedback.bad{color:#9a4348}.quiz-feedback.bad .feedback-dot{background:#ffeaec;color:#c34b52}
.quiz-screen .primary{margin-top:6px;padding:10px;border-radius:12px;font-size:12px;min-height:40px}

@media(max-height:720px){
  .word-screen .word-grid{max-width:235px;grid-auto-rows:36px;gap:4px}
  .word-screen .tile{font-size:18px}.word-screen .legend{font-size:7.4px}.word-screen .word-result{min-height:36px;padding:5px 8px}.word-screen .key{height:38px;font-size:14px}
  .quiz-screen .quiz-pills{margin:5px 4px}.quiz-screen .question{font-size:15px}.quiz-screen .option{min-height:39px;margin:4px 0;padding:5px 7px}.quiz-screen .quiz-footer{margin-top:5px;padding:6px 8px}
}

/* Gameplay Final additions */
.hello{font-size:11px;color:var(--muted);margin-top:4px;font-weight:650}.complete-banner{margin:10px 0 0;border:1px solid #d8efdf;background:#effaf3;color:#2d744b;border-radius:15px;padding:9px 12px;font-size:11px;display:flex;justify-content:space-between;gap:8px}.status-pill.done{background:#e8f8ef!important;color:#278457!important}.rank-name small{display:block;color:var(--muted);font-size:8.5px;font-weight:650;margin-top:1px}.eyebrow-dark{font-size:10px;font-weight:900;letter-spacing:1.2px;color:var(--primary)}

/* Onboarding */
.onboarding{min-height:100vh;padding:calc(56px + env(safe-area-inset-top)) 22px 32px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 80% 10%,#ecebff 0,transparent 34%),var(--bg)}.onboarding-mark{width:92px;height:92px;border-radius:28px;background:linear-gradient(135deg,#4e54eb,#6557ea);display:grid;place-items:center;box-shadow:0 18px 40px rgba(74,78,215,.22);margin-bottom:24px}.onboarding-mark svg{width:70px;height:70px}.onboarding-copy h1{font-size:38px;letter-spacing:-1.6px;margin:5px 0 4px;font-weight:950}.onboarding-copy p{margin:0 0 23px;color:var(--muted);font-size:14px}.onboarding-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}.onboarding-card label,.settings-card label{display:block;font-weight:850;font-size:12px;margin-bottom:8px}.onboarding-card input,.settings-card input{width:100%;height:52px;border:1.5px solid #dfe2eb;border-radius:15px;padding:0 14px;font-size:16px;background:#fbfcff;outline:none}.onboarding-card input:focus,.settings-card input:focus{border-color:#9ca0ff;box-shadow:0 0 0 3px rgba(83,85,234,.09)}.onboarding-btn{margin-top:12px}.onboarding-card small{display:block;text-align:center;color:var(--muted);font-size:9.5px;line-height:1.4;margin-top:10px}

/* Generic controls */
.primary{width:100%;border:0;background:linear-gradient(135deg,var(--primary),#6656ec);color:#fff;border-radius:14px;min-height:48px;font-weight:900;font-size:12px;box-shadow:0 7px 16px rgba(83,85,234,.17)}.primary:disabled{background:#d9dce5;color:#9399a8;box-shadow:none}.secondary{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;min-height:46px;font-weight:800;font-size:11px;margin-top:8px}.compact-home{margin-top:6px;min-height:40px}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,15px);background:#19223a;color:#fff;padding:9px 13px;border-radius:999px;font-size:10px;font-weight:750;opacity:0;pointer-events:none;transition:.18s;z-index:200;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translate(-50%,0)}

/* Home how-to */
.how-modal{text-align:left}.how-modal>h2{text-align:center}.how-row{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center;padding:9px 0;border-top:1px solid #eef0f5;font-size:11px;line-height:1.45}.how-row b:first-child{width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.how-row:last-of-type{margin-bottom:8px}

/* Petica gameplay */
.word-tip{margin:6px auto 0;text-align:center;color:var(--muted);font-size:9px;font-weight:700}.word-result.solved{border-color:#d8efdf;background:#fbfffc}.disabled-kb{opacity:.52}.tile.reveal{animation:tileFlip .52s ease both}@keyframes tileFlip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}

/* Quiz start/result/review */
.quiz-start-card,.final-result-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px 17px;box-shadow:var(--shadow);text-align:center}.quiz-start-icon{width:72px;height:72px;border-radius:22px;background:#f0eaff;display:grid;place-items:center;margin:0 auto 11px}.quiz-start-card h2,.final-result-card h2{font-size:23px;letter-spacing:-.7px;margin:5px 0 7px}.quiz-start-card>p{font-size:12px;line-height:1.5;color:#657086;margin:0 auto 14px;max-width:300px}.rule-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:11px 0}.rule-list>div{background:#f8f9fc;border:1px solid #e9ebf2;border-radius:15px;padding:10px 4px}.rule-list span{display:block;font-size:18px;font-weight:950;color:var(--primary)}.rule-list p{margin:2px 0 0;font-size:8.5px;color:var(--muted)}.quiz-lock-note{background:#f5f4ff;border:1px solid #e6e3ff;color:#5d6380;border-radius:13px;padding:9px 10px;font-size:9.5px;line-height:1.4;margin:11px 0}.quiz-start-btn{margin-top:3px}.pill.hardness.hard{background:#fff0eb;color:#c36332}.final-score{font-size:46px;font-weight:950;letter-spacing:-1.5px;color:var(--primary);margin:8px 0}.final-score span{font-size:13px;color:var(--muted);letter-spacing:0}.result-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:13px 0 15px}.result-meta span{background:#f8f9fc;border:1px solid #eaecf3;border-radius:13px;padding:9px 4px;color:var(--muted);font-size:8.5px}.result-meta b{display:block;color:var(--ink);font-size:11px;margin-top:2px}.review-list{display:grid;gap:9px}.review-card{background:#fff;border:1px solid var(--line);border-left:4px solid #d4d7e1;border-radius:16px;padding:11px 12px;box-shadow:0 3px 10px rgba(30,42,78,.035)}.review-card.ok{border-left-color:var(--green)}.review-card.bad{border-left-color:#e66d72}.review-top{display:flex;justify-content:space-between;color:#6b7385;font-size:9px;font-weight:850}.review-top small{font-size:8.5px}.review-card h3{font-size:12px;line-height:1.35;margin:6px 0 7px}.review-answer,.review-correct{font-size:9.5px;margin:3px 0}.review-correct{color:#2c8457}.review-card p{font-size:9px;line-height:1.4;color:var(--muted);margin:7px 0 0}

/* Math result */
.big-expr{font-size:15px!important;color:var(--ink)!important;font-weight:800;margin-top:8px}.math-final{color:var(--ink);margin-bottom:0}.final-score.points{font-size:30px;margin-top:9px}.final-result-card .result-icon{margin-top:1px}

/* Leaderboards */
.leader-week-card{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#4e54e8,#6158ea);color:#fff;border-radius:17px;padding:12px 14px;margin-bottom:10px}.leader-week-card span{font-size:15px;font-weight:900}.leader-week-card strong{font-size:9.5px;opacity:.86}.leader-subtitle{text-align:center;color:var(--muted);font-size:9.5px;margin:9px 0 4px}.rank-list{background:#fff;border:1px solid var(--line);border-radius:19px;padding:8px 10px;box-shadow:var(--shadow-sm)}.full-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.rank-name small{line-height:1.1}

/* Winners */
.history-intro{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:19px;padding:12px 13px;margin-bottom:10px}.history-intro strong{display:block;font-size:13px}.history-intro small{display:block;color:var(--muted);font-size:9px;line-height:1.4;margin-top:2px}.winner-week-head{display:flex;align-items:center;justify-content:space-between}.winner-week-head span{font-size:8.5px;color:#2b9560;background:#e9f8ef;border-radius:999px;padding:4px 7px}.winner-more{width:100%;border:0;border-top:1px solid #eef0f5;background:transparent;color:var(--primary);font-size:9.5px;font-weight:850;padding:9px 0 2px;margin-top:4px}

/* Profile/settings */
.profile-avatar{width:68px;height:68px;font-size:24px;margin:0 auto}.profile-settings{margin-top:11px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font-size:9.5px;font-weight:800;display:inline-flex;align-items:center;gap:6px}.profile-settings svg{stroke:currentColor}.trophy-strip{display:flex;gap:9px;font-size:25px;margin:10px 0}.trophies small{display:block;color:var(--muted);font-size:9px;line-height:1.4}.build-note{margin-top:12px;border:1px dashed #ccd0dc;border-radius:15px;padding:10px 11px;color:#6c7487;background:#fafbfe}.build-note b{display:block;font-size:10px;color:#50586c}.build-note span{display:block;font-size:8.8px;line-height:1.4;margin-top:2px}.settings-card{background:#fff;border:1px solid var(--line);border-radius:19px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow-sm)}.settings-card .primary{margin-top:10px}.settings-card.test-only{display:flex;align-items:center;justify-content:space-between;gap:10px}.settings-card.test-only strong{display:block;font-size:11px}.settings-card.test-only small{display:block;color:var(--muted);font-size:8.5px;line-height:1.35;margin-top:2px}.danger-btn{border:1px solid #f0c9cc;background:#fff5f5;color:#b64b53;border-radius:12px;padding:9px 10px;font-size:9px;font-weight:850;white-space:nowrap}

@media(max-height:720px){.onboarding{padding-top:34px}.onboarding-mark{width:72px;height:72px;margin-bottom:15px}.onboarding-mark svg{width:56px;height:56px}.onboarding-copy h1{font-size:32px}.quiz-start-card{padding-top:14px}.quiz-start-icon{width:58px;height:58px}.quiz-start-icon svg{width:44px;height:44px}.rule-list>div{padding:7px 3px}.final-result-card{padding-top:14px}}

/* Keyboard readability fix */
.word-screen .key{min-width:0;touch-action:manipulation}
@media(max-width:390px){.word-screen .key{height:40px;font-size:14px}.word-screen .key.enter{font-size:15px}.word-screen .keyrow{gap:3px}}
@media(max-height:720px){.word-screen .key{height:38px!important;font-size:13.5px!important}.word-screen .key.enter{font-size:14px!important}.word-screen .keyboard{gap:4px}.word-screen .keyrow{gap:3px}}
.week-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.cloud-badge{font-size:10px;font-weight:800;letter-spacing:.04em;color:#2f7d57;background:#e8f7ef;border:1px solid #c9ecda;border-radius:999px;padding:4px 8px}.cloud-badge.offline{color:#9a6b1a;background:#fff5dd;border-color:#f1dda9}.cloud-connect-note,.settings-cloud-status{display:block;margin-top:12px;color:#6d7390;font-size:12px;font-weight:700}

.empty-history{margin-top:18px;padding:34px 22px;border:1px solid var(--border);border-radius:24px;background:#fff;text-align:center}.empty-history-icon{font-size:42px;margin-bottom:10px}.empty-history h3{margin:0 0 8px;font-size:20px}.empty-history p{margin:0;color:var(--muted);line-height:1.45}.rank-list:empty,.leader-card #homeLeaderRows:empty{padding:18px;color:var(--muted);text-align:center}


/* Cloud gameplay v1 */
.leader-empty{padding:16px 10px;text-align:center;color:var(--muted);font-size:10px;font-weight:700}
.secondary-wide{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;min-height:44px;font-weight:800;font-size:11px;margin-top:8px}
.quiz-play{padding-top:5px}
.quiz-progress{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px 12px;box-shadow:var(--shadow-sm)}
.quiz-progress>div:first-child small,.quiz-clock small{display:block;color:var(--muted);font-size:8px;font-weight:700}.quiz-progress>div:first-child strong,.quiz-clock strong{display:block;font-size:17px;margin-top:1px}.quiz-clock{text-align:right}.progress-track{height:6px;background:#e9eaf1;border-radius:999px;overflow:hidden}.progress-track i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#5076f2);border-radius:999px}.quiz-tags{display:flex;gap:7px;margin:9px 3px}.quiz-tags .pill{padding:6px 10px;font-size:9px}.question-card h2{font-size:18px;line-height:1.28;margin:0;letter-spacing:-.35px}.quiz-options{display:grid;gap:7px;margin-top:10px}.quiz-option{width:100%;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;text-align:left;border:1.3px solid var(--line);background:#fff;border-radius:14px;padding:9px 10px;min-height:50px;color:var(--ink)}.quiz-option span{width:30px;height:30px;border:1px solid #dce0e9;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#50586b}.quiz-option b{font-size:12px;line-height:1.25}.quiz-option.selected{border:2px solid var(--primary);background:#f2f0ff}.quiz-option.selected span{background:var(--primary);border-color:var(--primary);color:#fff}
@media(max-height:720px){.quiz-progress{padding:7px 9px}.quiz-progress>div:first-child strong,.quiz-clock strong{font-size:15px}.quiz-tags{margin:6px 3px}.question-card h2{font-size:16px}.quiz-options{gap:5px;margin-top:7px}.quiz-option{min-height:42px;padding:6px 8px}.quiz-lock-note{margin:7px 0;padding:7px 9px}}

/* FINAL RELEASE: larger Petica letters + keyboard */
.word-screen .word-grid{
  max-width:292px;
  grid-auto-rows:clamp(41px,5.9vh,49px);
  gap:6px;
}
.word-screen .tile{
  font-size:25px;
  font-weight:950;
  border-radius:8px;
}
.word-screen .keyboard{
  margin-top:9px;
  gap:6px;
}
.word-screen .keyrow{gap:4px}
.word-screen .key{
  height:49px;
  border-radius:9px;
  font-size:17px;
  font-weight:950;
}
.word-screen .key.enter{font-size:18px}
@media(max-width:390px){
  .word-screen .word-grid{max-width:275px;grid-auto-rows:43px}
  .word-screen .tile{font-size:23px}
  .word-screen .key{height:47px;font-size:16.5px}
  .word-screen .key.enter{font-size:17px}
}
@media(max-height:720px){
  .word-screen .word-grid{max-width:255px;grid-auto-rows:38px;gap:4px}
  .word-screen .tile{font-size:21px}
  .word-screen .key{height:43px!important;font-size:15.5px!important}
  .word-screen .key.enter{font-size:16px!important}
}


/* =========================================================
   PWA v2 — responsive layout
   Mobile keeps the native-app layout. Desktop gets a wider
   dashboard and a left navigation rail.
   ========================================================= */
@media (min-width: 900px){
  html,body{min-height:100%;}
  body{
    background:
      radial-gradient(circle at 10% 0%,rgba(83,85,234,.08),transparent 34%),
      radial-gradient(circle at 100% 18%,rgba(48,149,228,.07),transparent 30%),
      var(--bg);
  }
  .app{padding:0 0 34px 106px;min-height:100vh;}
  .top,.content,.screen-head,.screen-body{
    width:calc(100% - 56px);
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
  }
  .top{padding:30px 0 8px;}
  .brand{font-size:34px;}
  .avatar{width:52px;height:52px;}

  .bottom{
    left:24px;right:auto;top:24px;bottom:24px;
    width:82px;
    display:flex;flex-direction:column;justify-content:center;gap:8px;
    padding:12px 8px;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:0 18px 44px rgba(30,42,78,.10);
    background:rgba(255,255,255,.96);
  }
  .nav{
    width:100%;min-height:74px;padding:10px 3px;border-radius:17px;
    font-size:10px;transition:background .18s ease,color .18s ease,transform .18s ease;
  }
  .nav:hover{background:#f4f4ff;transform:translateY(-1px)}
  .nav.on{background:var(--primary-soft);color:var(--primary)}
  .nav svg{width:25px;height:25px;margin-bottom:5px}

  .home-content{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
    column-gap:22px;
    row-gap:16px;
    align-items:start;
    padding:18px 0 24px;
  }
  .home-content>.week{grid-column:1/-1;margin-bottom:0;}
  .home-content>.hero{grid-column:1;grid-row:2;min-height:188px;padding:26px 24px;}
  .home-content>.complete-banner{grid-column:1;}
  .home-content>.section-title{grid-column:1;margin-top:4px;margin-bottom:-3px;}
  .home-content>.games{grid-column:1;}
  .home-content>.leader-card{grid-column:2;grid-row:2 / span 4;margin-top:0;padding:20px 18px 15px;}
  .home-content>.past-card{grid-column:2;margin-top:0;}
  .hero .big{font-size:42px;}
  .hero .eyebrow{font-size:12px;}
  .hero .sub{font-size:13px;}
  .games{gap:14px;}
  .game-card{padding:18px 13px 15px;border-radius:24px;}
  .game-icon{width:66px;height:66px;border-radius:20px;margin-bottom:10px;}
  .game-card h3{font-size:16px;}
  .game-card p{font-size:11.5px;}
  .play{min-height:44px;font-size:13px;}
  .leader-heading h2{font-size:23px;}
  .rank{font-size:13px;padding:10px 3px;}

  .screen-head{padding:30px 0 12px;}
  .screen-body{max-width:780px;padding-left:0;padding-right:0;}
  .screen-body .rank-list,.screen-body .leader-week-card,.screen-body .full-tabs,.screen-body .leader-subtitle{max-width:880px;margin-left:auto;margin-right:auto;}
  .onboarding{max-width:520px;margin:0 auto;min-height:100vh;justify-content:center;}
  .word-screen,.quiz-play,.math-play{max-width:720px;margin-left:auto;margin-right:auto;}
  .toast{left:calc(50% + 53px);}
}

@media (min-width: 1280px){
  .top,.content,.screen-head,.screen-body{max-width:1200px;}
  .home-content{grid-template-columns:minmax(0,1.3fr) minmax(390px,.7fr);column-gap:28px;}
  .home-content>.hero{min-height:204px;}
}

/* Small phones / Safari safe-area refinements */
@media (max-width: 430px){
  .content{padding-left:14px;padding-right:14px;}
  .top{padding-left:16px;padding-right:16px;}
  .week-badge{font-size:9.5px;padding:7px 8px;}
  .hero{border-radius:22px;}
  .games{gap:7px;}
  .game-card{padding-left:7px;padding-right:7px;}
}

/* ===== Dnevna liga v1.1: KODA + per-game help ===== */
.games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.game-card{padding:12px 10px 11px}
.game-icon.code{background:#fff4dc}
.status-pill.code{background:#fff4dc;color:#b87913}
.new-game-badge{display:inline-block;vertical-align:2px;margin-left:3px;padding:2px 5px;border-radius:999px;background:var(--primary);color:#fff;font-size:7px;letter-spacing:.4px;font-weight:900}

.screen-head-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.screen-head-actions .score-badge{margin-left:0}
.game-help-btn{width:36px;height:36px;border-radius:50%;border:1px solid #dfe2ec;background:#fff;color:var(--primary);font-weight:950;font-size:17px;display:grid;place-items:center;box-shadow:var(--shadow-sm);padding:0;flex:0 0 auto}

.game-help-modal{text-align:left;max-height:88vh;overflow:auto}
.game-help-modal>h2{text-align:center;margin-bottom:5px}
.game-help-intro{text-align:center;color:var(--muted);font-size:11.5px;line-height:1.45;margin:0 2px 12px}
.game-help-rules{border-top:1px solid #eef0f5}
.game-help-rule{display:grid;grid-template-columns:29px 1fr;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid #eef0f5;font-size:10.5px;line-height:1.35}
.game-help-rule>b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:10px}
.game-help-score{margin:11px 0 10px;padding:10px 11px;border-radius:13px;background:#f6f5ff;color:#4b4f77;font-size:10px;line-height:1.4;font-weight:700}
.dont-show-row{display:flex;align-items:center;gap:9px;padding:8px 2px 13px;font-size:10.5px;color:#525a70;text-transform:none!important;letter-spacing:0!important;font-weight:700!important;margin:0!important}
.dont-show-row input{width:18px;height:18px;margin:0;accent-color:var(--primary)}

.code-screen{padding-top:5px}
.code-intro{text-align:center;margin:0 0 5px}
.code-grid{width:100%;max-width:255px;margin:5px auto 7px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:41px;gap:5px}
.code-tile{border:1.7px solid #d9dde6;border-radius:8px;display:grid;place-items:center;font-size:21px;font-weight:950;background:#fff}
.code-tile.g{background:var(--green);border-color:var(--green);color:#fff}
.code-tile.y{background:var(--yellow);border-color:var(--yellow);color:#151c30}
.code-tile.x{background:var(--gray);border-color:var(--gray);color:#fff}
.code-keypad{margin:10px auto 0;max-width:340px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.code-key{height:44px;border:0;border-radius:10px;background:#eceef3;color:#273047;font-weight:950;font-size:17px}
.code-key:disabled{opacity:.38}
.code-key.g{background:var(--green);color:#fff;opacity:1}
.code-key.y{background:var(--yellow);color:#1d2435;opacity:1}
.code-key.x{background:var(--gray);color:#fff;opacity:.55}
.code-back{grid-column:1/3;background:#f1f2f6;color:#4d5569;font-size:18px}
.code-confirm{grid-column:3/6;height:44px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--primary),#6656ec);color:#fff;font-weight:950;font-size:12px;letter-spacing:.35px}
.code-confirm:disabled{opacity:.4}

.home-tabs,.full-tabs{display:flex;overflow-x:auto;gap:5px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.home-tabs::-webkit-scrollbar,.full-tabs::-webkit-scrollbar{display:none}
.home-tabs .chip,.full-tabs .chip{flex:0 0 auto;min-width:72px}

@media(max-width:345px){
 .games{gap:8px}
 .game-card{padding-left:8px;padding-right:8px}
 .screen-head{gap:8px}.screen-head h1{font-size:21px}
 .game-help-btn{width:33px;height:33px}
 .score-badge{padding:6px 8px;font-size:8.5px}.score-badge strong{font-size:12px}
 .code-grid{max-width:235px;grid-auto-rows:37px;gap:4px}.code-tile{font-size:19px}
 .code-key{height:40px;font-size:15px}.code-confirm{height:40px}
}