*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f5f3ef;--ink:#1a1a1a;--muted:#666;--line:rgba(0,0,0,.08);--card:#fff;--green:#16a34a;--green2:#4ade80;--amber:#d97706;--amber2:#fbbf24;--red:#dc2626;--purple:#7c3aed;--purple2:#a78bfa;--blue:#2563eb;--blue2:#60a5fa;--teal:#0f766e}
body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);min-height:100vh}
.app{max-width:720px;margin:0 auto;padding:1rem 1rem 2rem}
.screen{display:none}.screen.active{display:block}
h1{font-size:28px;line-height:1.15}h2{font-size:20px;line-height:1.2}h3{font-size:16px;line-height:1.25}
p{font-size:15px;color:#555;line-height:1.6}.muted{font-size:13px;color:#888}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1rem;box-shadow:0 1px 6px rgba(0,0,0,.06)}.card+.card{margin-top:.875rem}
.btn{display:block;width:100%;padding:1rem 1.1rem;border:none;border-radius:14px;background:#111827;color:#fff;font-weight:800;font-size:16px;min-height:52px;cursor:pointer}
.btn:active{transform:scale(.98)}.btn+.btn{margin-top:.625rem}
.btn-green{background:var(--green)}.btn-amber{background:var(--amber)}.btn-blue{background:var(--blue)}.btn-purple{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff}.btn-red{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.btn-outline{background:#fff;color:#111;border:1px solid rgba(0,0,0,.12)}
.btn-sm{width:auto;display:inline-block;min-height:40px;font-size:14px;padding:.6rem .95rem;border-radius:12px}
.back-btn{background:#fff;color:#555;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:.55rem .85rem;font-size:14px;min-height:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}
.header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;padding-bottom:.9rem;border-bottom:1px solid rgba(0,0,0,.07)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px}
.chip-gold{background:#fef3c7;color:#92400e}.chip-green{background:#dcfce7;color:#166534}.chip-purple{background:#f3e8ff;color:#6b21a8}.chip-blue{background:#dbeafe;color:#1e40af}.chip-pink{background:#fce7f3;color:#9d174d}.chip-teal{background:#ccfbf1;color:#134e4a}
.profile-card{text-align:center;cursor:pointer;padding:1.25rem .9rem}.profile-card:active{transform:scale(.97)}
.avatar{width:78px;height:78px;border-radius:50%;margin:0 auto .75rem;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.14);overflow:hidden}
.avatar img,.small-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.av-m1{background:linear-gradient(135deg,#ec4899,#f472b6)}.av-m2{background:linear-gradient(135deg,#14b8a6,#2dd4bf)}.av-m3{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.av-dad{background:linear-gradient(135deg,#334155,#0f172a)}
.prog-bar{height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden}.prog-fill{height:100%;border-radius:999px;transition:width .45s ease}.pf-green{background:linear-gradient(90deg,var(--green),var(--green2))}.pf-amber{background:linear-gradient(90deg,var(--amber),var(--amber2))}.pf-purple{background:linear-gradient(90deg,var(--purple),var(--purple2))}.pf-blue{background:linear-gradient(90deg,var(--blue),var(--blue2))}
.map-wrap{position:relative;width:100%;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#dbeafe 0,#bbf7d0 40%,#fef9c3 72%,#fde68a 100%);padding:1rem}
.map-stop{display:flex;align-items:center;gap:.85rem;position:relative;padding:.55rem 0}.map-stop .stop-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.14);z-index:2}.map-stop .done{background:var(--green);color:#fff}.map-stop .current{background:var(--amber);color:#fff;animation:pulse 1.5s infinite}.map-stop .locked{background:#d1d5db;color:#6b7280}.map-stop .stop-line{position:absolute;left:23px;top:48px;width:2px;height:34px;background:#d1d5db}.map-stop .stop-line.done{background:var(--green)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.45)}50%{box-shadow:0 0 0 10px rgba(217,119,6,0)}}
.race-track{background:linear-gradient(135deg,#1e3a5f,#0f2744);border-radius:18px;padding:1rem;color:#fff}.racer-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.racer-name{font-size:12px;font-weight:800;color:#fff;min-width:72px}.racer-track-bg{flex:1;height:10px;background:rgba(255,255,255,.16);border-radius:999px;overflow:hidden}.racer-fill{height:100%;border-radius:999px;transition:width .8s cubic-bezier(.4,0,.2,1)}.racer-pts{font-size:11px;color:rgba(255,255,255,.76);min-width:52px;text-align:right}
.subject-card{cursor:pointer}.subject-card.done{opacity:.55;cursor:not-allowed}
.question-card{background:#fff;border-radius:18px;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.q-text{font-size:20px;font-weight:800;text-align:center;margin:.75rem 0 1.1rem;line-height:1.42}.ans-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.ans-btn{padding:1rem .75rem;border:2px solid rgba(0,0,0,.08);border-radius:14px;background:#f9fafb;font-size:15px;min-height:56px;font-weight:700;cursor:pointer}.ans-btn.correct{background:#dcfce7;border-color:#16a34a;color:#14532d}.ans-btn.wrong{background:#fef2f2;border-color:#dc2626;color:#7f1d1d}.ans-btn:disabled{cursor:default}
.timer-num{font-size:42px;font-weight:900;text-align:center}.timer-num.urgent{color:var(--red)}
.fb{padding:.875rem 1rem;border-radius:12px;margin-top:.875rem;font-size:14px;line-height:1.55;font-weight:600}.fb-ok{background:#dcfce7;color:#14532d;border:1px solid #86efac}.fb-no{background:#fef2f2;color:#7f1d1d;border:1px solid #fca5a5}
.perfect-banner{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:16px;padding:1.35rem;text-align:center;margin-bottom:1rem;animation:pop .4s ease}.badge-card{text-align:center;padding:.875rem .5rem;border-radius:12px;border:1px solid rgba(0,0,0,.08)}.badge-card.locked{opacity:.25;background:#f9fafb}.badge-card.new-b{border:2px solid #d97706}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;border-bottom:1px solid rgba(0,0,0,.06)}.stat-row:last-child{border-bottom:none}
.lb-row{display:flex;align-items:center;gap:.875rem;padding:.875rem;border-radius:14px;border:1px solid rgba(0,0,0,.07);background:#fff;margin-bottom:.625rem}
.small-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex-shrink:0;overflow:hidden}
.rank-overlay,.dday-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:1.25rem;z-index:1000;backdrop-filter:blur(4px)}
.rank-popup,.dday-popup{background:#fff;border-radius:22px;padding:1.5rem;text-align:center;max-width:390px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s ease}.dday-popup{background:linear-gradient(135deg,#fff5e0,#fff);border:3px solid #f59e0b}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}
.pm-pill{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0;border-radius:10px;padding:4px 10px;font-size:12px;font-weight:800;white-space:nowrap}
.install-banner{background:#ecfdf5;border:1px solid #86efac;border-radius:12px;padding:.875rem 1rem;margin-bottom:1rem;font-size:13px;color:#166534;display:flex;align-items:center;gap:.75rem}
.confirm-box{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:1rem;margin-top:.75rem;display:none}
input[type=password],input[type=number],input[type=text],input[type=date],select{padding:10px 12px;border:1.5px solid rgba(0,0,0,.12);border-radius:12px;background:#fff;font-size:15px;font-family:inherit;min-height:44px}input[type=password],input[type=text]{width:100%}input[type=number]{width:90px}
.tab-bar{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.tab-btn{padding:.5rem .9rem;border-radius:999px;border:1.5px solid rgba(0,0,0,.1);background:#fff;font-size:13px;font-weight:700;cursor:pointer}.tab-btn.active{background:#111827;color:#fff;border-color:#111827}
.invite-row{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid rgba(0,0,0,.06);gap:.5rem;flex-wrap:wrap}
.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:14px;font-weight:700;margin-bottom:.35rem;color:#333}
@media(max-width:420px){.grid2,.ans-grid{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}.app{padding:.9rem .9rem 2rem}}
.cloud-chip{position:fixed;top:8px;right:10px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;z-index:500;pointer-events:none}
.cloud-ok{background:#dcfce7;color:#166534;border:1px solid #86efac}
.cloud-err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.cloud-sync{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}
.pm-pulse{animation:pmPulse .6s ease}
@keyframes pmPulse{0%{transform:scale(1);background:#ecfdf5}40%{transform:scale(1.22);background:#bbf7d0;box-shadow:0 0 0 8px rgba(34,197,94,.15)}100%{transform:scale(1);background:#ecfdf5}}
.money-gained{display:inline-block;margin-left:6px;color:#166534;font-weight:900;font-size:13px;animation:floatUp 1.1s ease forwards;opacity:0}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
.coin-chip{display:inline-flex;align-items:center;gap:4px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;padding:.3rem .7rem;border-radius:20px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.coin-pulse{animation:coinPulse .6s ease}
@keyframes coinPulse{0%{transform:scale(1);background:#fef3c7}40%{transform:scale(1.22);background:#fde68a;box-shadow:0 0 0 8px rgba(245,158,11,.18)}100%{transform:scale(1);background:#fef3c7}}
.shop-item{padding:.75rem;border-radius:12px;background:#fff;margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem;border:1px solid #e5e7eb}
.btn-5050{position:absolute;top:.5rem;right:.5rem;background:#fbbf24;color:#412402;border:none;padding:.4rem .7rem;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer}
.btn-5050:disabled{opacity:.4;cursor:default}
.sf-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:.75rem 1.25rem;border-radius:10px;font-weight:700;z-index:100;animation:sfToast 3s ease-out forwards}
@keyframes sfToast{0%{opacity:0;transform:translate(-50%,20px)}10%{opacity:1;transform:translate(-50%,0)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
.quest-row{display:flex;align-items:center;padding:.6rem .25rem;border-bottom:1px solid rgba(0,0,0,.06)}
.quest-row:last-child{border-bottom:none}
.quest-row.complete{background:linear-gradient(90deg,#fef3c7,#fff7d6);border-radius:10px;border-bottom:none;animation:questPulse 1.6s ease-in-out infinite}
.quest-row.claimed{opacity:.6}
@keyframes questPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.3)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.quest-mini-bar{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:4px}
.quest-mini-fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);border-radius:999px;transition:width .4s ease}
.opt-btn{font-size:18px;min-height:64px;font-weight:800}

/* Phase 3a: Weekly League */
.tier-chip{display:inline-flex;align-items:center;gap:4px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.league-row{display:flex;align-items:center;gap:.4rem;padding:.5rem .25rem;border-bottom:1px solid rgba(0,0,0,.06)}
.league-row:last-child{border-bottom:none}
.league-row.you{background:linear-gradient(90deg,rgba(251,191,36,.12),transparent);border-radius:8px;padding:.5rem .5rem}
.champ-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:1.25rem;z-index:1100;backdrop-filter:blur(4px)}
.champ-popup{background:linear-gradient(135deg,#fff5e0,#fff);border:3px solid #f59e0b;border-radius:22px;padding:1.5rem;text-align:center;max-width:390px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s ease}
#league-card-home{background:linear-gradient(135deg,#fff5e0,#fff)}

/* Phase 7: invite generation row */
.invite-gen-row{display:flex;gap:.5rem;margin-bottom:.6rem;align-items:flex-end;flex-wrap:wrap}
.invite-gen-row label{display:block;font-size:11px;font-weight:700;color:#555;margin-bottom:3px}
.invite-gen-row input[type=number]{width:70px}
.invite-gen-row input[type=text]{width:100%}