:root{font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;color:#10233f;background:#f3f8ff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#f3f8ff,#eef6ff);min-height:100vh}
button,input,select{font:inherit}
button{touch-action:manipulation}
main{max-width:900px;margin:0 auto;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.eyebrow{font-weight:900;letter-spacing:.08em;font-size:.78rem;color:#0b5bd3}
.cloud{font-size:.82rem;color:#6b7280;margin-top:3px}
.bank{background:#fff;border:2px solid #cfe1ff;border-radius:22px;padding:12px 18px;text-align:right;min-width:180px}
.bank span,.bank small{display:block;color:#6b7280}
.bank strong{display:block;font-size:1.8rem;color:#15803d}
.cashout-header{margin-top:5px!important;color:#0b5bd3!important;font-weight:900}
.panel{background:#fff;border:1px solid #dce8f8;border-radius:28px;padding:24px;box-shadow:0 12px 34px rgba(15,75,150,.10)}
.setup{max-width:460px;margin:80px auto;text-align:center}
.setup input{width:100%;text-align:center;font-size:2rem;letter-spacing:.22em;margin:8px 0 14px}
.avatar{object-fit:cover;border-radius:50%;display:block;background:#e7f0ff}
.avatar-lg{width:128px;height:128px;margin:0 auto 14px;border:5px solid #dbeafe}
.avatar-splash{width:150px;height:150px;margin:0 auto 12px;border:6px solid #dbeafe}
.avatar-hero{width:108px;height:108px;border:5px solid #dbeafe;flex:0 0 auto}
.avatar-game{width:58px;height:58px;border:3px solid #dbeafe}
.avatar-results{width:130px;height:130px;margin:0 auto 8px;border:5px solid #dcfce7}
.avatar-payday{width:150px;height:150px;margin:0 auto 10px;border:6px solid #fef3c7}
.avatar-pop{animation:avatarPop .6s ease}
.avatar-wobble{animation:avatarWobble .65s ease}
@keyframes avatarPop{0%{transform:scale(1)}45%{transform:scale(1.12) rotate(-3deg)}100%{transform:scale(1)}}
@keyframes avatarWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}75%{transform:rotate(-4deg)}}
.hero{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero h1,.game h1,.results h1{font-size:2rem;margin:.1em 0}
.hero p,.game-head p{color:#6b7280;margin:.35em 0}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.stats-row>div,.parent-money>div{background:#f3f8ff;border-radius:18px;padding:14px}
.stats-row strong,.stats-row span,.parent-money span,.parent-money strong{display:block}
.stats-row span,.parent-money span{font-size:.82rem;color:#6b7280;margin-top:4px}
h2{font-size:1.1rem;margin:24px 0 12px}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.level-btn{border:0;border-radius:18px;padding:18px 10px;background:#e7f0ff;color:#0b3f91;font-weight:900;font-size:1.4rem;min-height:88px}
.level-btn small{display:block;font-size:.68rem;font-weight:700;margin-top:4px;line-height:1.25}
.level-btn.mastered{background:#dcfce7;color:#166534}
.level-btn.review-due{background:#fef3c7;color:#92400e}
.primary,.secondary,.danger{border:0;border-radius:16px;padding:14px 18px;min-height:48px;font-weight:900}
.primary{background:#0b5bd3;color:#fff}
.secondary{background:#e7f0ff;color:#0b3f91;margin-top:22px}
.secondary.compact,.primary.compact{margin-top:0;min-height:42px;padding:10px 14px}
.danger{background:#fee2e2;color:#991b1b}
.install-note{font-size:.86rem;color:#6b7280;margin-top:18px}
.mode-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;background:#f8fbff;border:1px solid #dce8f8;border-radius:16px}
.practice-switch{display:flex;align-items:center;gap:9px}
.practice-switch input{width:22px;height:22px}
.mode-hint{font-size:.84rem;color:#64748b;margin:8px 2px 0}
.game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.game-title-with-avatar{display:flex;align-items:center;gap:12px}
.text-button{border:0;background:transparent;color:#0b5bd3;font-weight:800;padding:10px}
.session-score{text-align:center;color:#6b7280;font-weight:800;margin:18px}
.question{text-align:center;font-size:clamp(3rem,11vw,5.2rem);font-weight:1000;letter-spacing:-.04em;margin:18px 0}
.answer{display:block;width:min(280px,100%);margin:0 auto 16px;text-align:center;font-size:2.4rem;font-weight:900;border:3px solid #b9d3ff;border-radius:18px;padding:12px;background:#fafafa}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:390px;margin:0 auto}
.keypad button{border:0;border-radius:16px;min-height:64px;background:#f3f4f6;font-size:1.5rem;font-weight:900;color:#123d7a}
.keypad .go{background:#22c55e;color:#fff}
.feedback{min-height:82px;text-align:center;font-weight:900;font-size:1.12rem;padding:18px 8px}
.feedback.good{color:#15803d}
.feedback.retry{color:#b45309}
.feedback.jacked{color:#b91c1c}
.results{text-align:center}
.big-score{font-size:2rem;font-weight:1000;color:#0b5bd3;margin:10px}
.results p{font-size:1.15rem;line-height:1.55}
.results .primary{margin-top:12px}
.parent-money{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.parent-money strong{font-size:1.35rem;margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label,label{font-weight:800;font-size:.88rem}
.form-grid input,.form-grid select,#parentPin,.setup input,.family-code-change input{display:block;border:2px solid #b9d3ff;border-radius:14px;padding:12px;width:100%;margin-top:6px;background:#fff}
.toggles{display:grid;gap:10px;margin:18px 0}
.toggles label{display:flex;align-items:center;gap:10px}
.toggles input{width:22px;height:22px}
.facts{list-style:none;padding:0;margin:0}
.facts li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #eee}
.facts span{color:#6b7280}
.error{color:#b91c1c;font-weight:800}
.save-message{margin-left:10px;color:#15803d;font-weight:800}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rules-intro{margin:0 0 14px;line-height:1.5;color:#334155}
.money-rules{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rule-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #dce8f8;border-radius:16px;padding:12px}
.rule-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:#e7f0ff;color:#0b5bd3;font-weight:1000}
.rule-item strong,.rule-item small{display:block}
.rule-item strong{color:#10233f}
.rule-item small{margin-top:3px;color:#64748b;line-height:1.35}
.cashout-rule{margin:14px 0 0;padding:13px 14px;border-radius:16px;background:#e7f0ff;color:#0b3f91;line-height:1.45}
.practice-section,.ledger-kid{margin-top:24px;padding-top:4px;border-top:1px solid #dce8f8}
.practice-heading,.section-heading{display:flex;justify-content:space-between;gap:16px;align-items:end}
.practice-heading h2,.section-heading h2{margin-bottom:4px}
.practice-heading p,.section-heading p{margin:0;color:#64748b;font-size:.9rem}
.practice-heading>strong{color:#0b5bd3;white-space:nowrap}
.practice-history{display:grid;gap:8px;margin-top:12px}
.practice-row{display:grid;grid-template-columns:1.45fr .65fr .9fr .9fr;gap:10px;align-items:center;padding:12px 14px;border:1px solid #dce8f8;border-radius:16px;background:#fbfdff}
.practice-row>div{min-width:0}
.practice-row strong,.practice-row span{display:block}
.practice-row strong{color:#10233f}
.practice-row span{margin-top:3px;font-size:.78rem;color:#64748b}
.practice-level strong{font-size:1.2rem;color:#0b5bd3}
.practice-score{text-align:right}
.practice-empty{padding:18px;border-radius:16px;background:#f3f8ff;color:#64748b;text-align:center}
.practice-duration{text-align:center}
.kid-ledger{display:grid;gap:8px;margin-top:12px}
.money-move{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 13px;border-radius:15px;background:#fbfdff;border:1px solid #dce8f8}
.money-move strong{font-size:1.05rem}
.money-move .plus{color:#15803d}
.money-move .minus{color:#b91c1c}
.money-move small{display:block;color:#64748b;margin-top:2px}
.parent-tool{margin-top:0}
.tool-status{display:block;margin-top:10px;color:#475569;font-weight:800}
.testing-box{border:2px solid #fecaca;background:#fff7f7;border-radius:18px;padding:14px 16px}
.testing-box p{margin:.25rem 0 .75rem;line-height:1.45;color:#475569}
.testing-box .danger{margin-top:4px}
.welcome-splash{text-align:center;padding:8px 0 2px}
.welcome-splash h1{font-size:2rem;margin:.25rem 0 .5rem;color:#0b3f91}
.welcome-splash .money-rules{text-align:left;margin-top:14px}
.splash-start{margin-top:18px;min-width:190px;font-size:1.05rem}
.family-access{border:1px solid #dce8f8;background:#f8fbff;border-radius:18px;padding:14px}
.family-code-display{display:flex;justify-content:space-between;align-items:center;gap:12px}
.family-code-display span{color:#64748b;font-size:.86rem}
.family-code-display strong{font-size:1.5rem;letter-spacing:.12em}
.family-code-change{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end;margin-top:14px}
.weekly-report{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.weekly-stat{padding:13px;border-radius:16px;background:#f3f8ff}
.weekly-stat strong,.weekly-stat span{display:block}
.weekly-stat strong{font-size:1.15rem;color:#0b3f91}
.weekly-stat span{font-size:.78rem;color:#64748b;margin-top:3px}
.weekly-note{grid-column:1/-1;padding:11px 13px;border-radius:14px;background:#eefbf3;color:#166534;font-weight:800}
.mastery-checks{display:grid;gap:8px}
.mastery-check-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border:1px solid #dce8f8;border-radius:15px}
.mastery-check-row span{color:#64748b;font-size:.84rem}
.celebration-overlay{position:fixed;inset:0;background:rgba(15,35,63,.55);display:grid;place-items:center;padding:18px;z-index:1000}
.celebration-overlay[hidden]{display:none}
.celebration-card{width:min(460px,100%);background:#fff;border-radius:28px;padding:28px;text-align:center;box-shadow:0 18px 55px rgba(0,0,0,.24)}
.celebration-card h2{font-size:2.1rem;color:#15803d;margin:8px 0}
.celebration-card p{font-size:1.15rem;line-height:1.5}
.confetti{font-size:1.8rem;letter-spacing:.15em;margin-bottom:8px;animation:confettiBounce .9s ease infinite alternate}
@keyframes confettiBounce{from{transform:translateY(0)}to{transform:translateY(-7px)}}

@media(max-width:650px){
  main{padding:12px}.panel{padding:18px;border-radius:22px}.topbar{align-items:stretch}
  .bank{min-width:145px;padding:10px 12px}.bank strong{font-size:1.45rem}
  .levels{grid-template-columns:repeat(3,1fr)}.stats-row,.form-grid,.parent-money,.weekly-report{grid-template-columns:1fr}
  .hero h1,.game h1,.results h1{font-size:1.65rem}.avatar-hero{width:82px;height:82px}.question{font-size:3.6rem}.setup{margin:35px auto}
  .money-rules{grid-template-columns:1fr}.practice-heading{display:block}.practice-heading>strong{display:block;margin-top:8px}
  .practice-row{grid-template-columns:1.25fr .55fr 1fr}.practice-score{grid-column:1/-1;text-align:left;padding-top:6px;border-top:1px solid #e5edf8}.practice-duration{text-align:right}
  .splash-start{width:100%}.welcome-splash h1{font-size:1.7rem}
  .family-code-change{grid-template-columns:1fr}.family-code-change button{width:100%}
  .mode-row{align-items:stretch}.mode-row .secondary{width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}