:root{
--night-1:#12122e; --night-2:#1c1c46;
--card:#22224f; --card-2:#2a2a5e;
--line:rgba(255,255,255,.10);
--ink:#f6f2e7; --ink-dim:#b9b6d4;
--accent:#58c472; --accent-2:#ffd84d; --accent-soft:rgba(88,196,114,.16);
--radius:20px; --shadow:0 10px 30px rgba(0,0,0,.35);
font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
font-family:'Nunito',system-ui,sans-serif;color:var(--ink);
background:
radial-gradient(1200px 600px at 80% -10%, rgba(120,110,255,.18), transparent 60%),
radial-gradient(900px 500px at -10% 30%, var(--accent-soft), transparent 60%),
linear-gradient(180deg, var(--night-1), var(--night-2) 60%, #15153a);
padding-bottom:80px;
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.5;animation:tw 3s infinite alternate}
@keyframes tw{from{opacity:.15;transform:scale(.8)}to{opacity:.7;transform:scale(1.2)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.view{display:none;position:relative;z-index:1}
.view.active{display:block}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px}

header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand .moon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:var(--shadow)}
h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:.3px;line-height:1.1}
.sub{color:var(--ink-dim);font-size:.85rem;font-weight:600}
.section-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;margin:18px 0 10px}
.hint-line{color:var(--ink-dim);font-size:.85rem;font-weight:600;margin-bottom:12px}
.icon-btn{background:var(--card);border:1px solid var(--line);color:var(--ink);width:44px;height:44px;border-radius:14px;font-size:20px;cursor:pointer;flex:none}
.icon-btn:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}

/* auth */
.auth-card{max-width:400px;margin:8vh auto 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 24px;box-shadow:var(--shadow);text-align:center}
.auth-logo{font-size:3rem;margin-bottom:8px}
.auth-card h1{margin-bottom:6px}
.auth-sub{color:var(--ink-dim);font-weight:600;font-size:.9rem;margin-bottom:18px}
.tabs{display:flex;background:var(--card-2);border-radius:14px;padding:4px;margin-bottom:16px}
.tab{flex:1;border:none;background:transparent;color:var(--ink-dim);font:inherit;font-weight:800;padding:10px;border-radius:10px;cursor:pointer}
.tab.active{background:var(--accent);color:#0e2417}
/* profile page tabs (separate class so the auth-tab handler leaves them alone) */
.ptab{flex:1;border:none;background:transparent;color:var(--ink-dim);font:inherit;font-weight:800;padding:10px;border-radius:10px;cursor:pointer}
.ptab.active{background:var(--accent);color:#0e2417}
.prof-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.prof-card h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;margin-bottom:10px}
.prof-card .btn{margin-top:2px}
.prof-line{color:var(--ink-dim);font-weight:700;font-size:.92rem;line-height:1.5}
.auth-msg{min-height:20px;margin-top:12px;font-weight:700;font-size:.85rem;color:var(--accent-2)}
.link-btn{background:none;border:none;color:var(--ink-dim);font:inherit;font-weight:800;font-size:.8rem;cursor:pointer;margin-top:10px;text-decoration:underline}
.link-btn:hover{color:var(--ink)}

.field{margin-bottom:14px;text-align:left}
.field label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:7px}
.field input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card-2);color:var(--ink);font:inherit;font-weight:700}

.btn{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.3px;border:none;border-radius:16px;padding:14px 22px;cursor:pointer;width:100%;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000 10%));color:#0e2417;box-shadow:0 6px 0 rgba(0,0,0,.28);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.btn.gold{background:linear-gradient(145deg,var(--accent-2),#ffb02e);color:#402c00}
.btn.ghost{background:transparent;border:2px solid var(--line);color:var(--ink-dim);box-shadow:none;font-size:.9rem;padding:10px;margin-top:10px}
.btn:disabled{filter:grayscale(.7);opacity:.5;cursor:not-allowed}

/* dashboard */
.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.kid-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);position:relative}
.kid-age{font-size:.8rem;font-weight:700;color:var(--ink-dim);background:none;border:none;padding:0;font-family:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}.kid-age:hover{color:var(--ink)}
.kid-del{position:absolute;top:10px;right:10px;background:none;border:none;font-size:.95rem;opacity:.45;cursor:pointer;padding:6px;border-radius:10px}
.kid-del:hover{opacity:1;background:var(--card-2)}
.kid-card .top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.kid-card .avatar{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:var(--card-2)}
button.avatar{border:1px solid var(--line);cursor:pointer;padding:0;flex:none}
button.avatar:hover{border-color:var(--accent-2)}
.kid-card h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem}
.kid-card .meta{font-size:.78rem;color:var(--ink-dim);font-weight:700}
.trophy-count{font-size:.72rem;font-weight:800;color:var(--accent-2)}
.streak{font-size:.72rem;font-weight:800;color:#ff9d5c}
.progress{height:10px;border-radius:99px;background:var(--card-2);overflow:hidden;margin:10px 0}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}
.kid-card .btn{padding:11px;font-size:.92rem;margin-top:6px}
.add-card{border:2px dashed var(--line);border-radius:var(--radius);display:grid;place-items:center;min-height:170px;cursor:pointer;color:var(--ink-dim);font-weight:800;background:transparent;font:inherit}
.add-card span{font-size:2rem;display:block;text-align:center}
.badge{display:inline-block;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);margin-top:4px}

/* history */
.hist-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);margin-bottom:12px}
.hist-card .row1{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.hist-card h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem}
.hist-status{font-size:.75rem;font-weight:800;padding:4px 12px;border-radius:99px;background:var(--card-2);color:var(--ink-dim)}
.hist-status.win{background:var(--accent-soft);color:var(--accent-2)}
.hist-empty{text-align:center;color:var(--ink-dim);font-weight:700;padding:40px 0}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(6,6,20,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:9}
.scrim.open{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);width:min(380px,92vw);background:linear-gradient(180deg,#1a1a40,#14142f);border:1px solid var(--line);border-radius:22px;padding:22px;z-index:10;opacity:0;pointer-events:none;transition:.2s}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal h2{font-family:'Fredoka',sans-serif;font-weight:600;margin-bottom:14px}
.avatar-row{display:flex;gap:8px;flex-wrap:wrap}
.avatar-row button{width:48px;height:48px;border-radius:14px;font-size:24px;background:var(--card-2);border:2px solid var(--line);cursor:pointer}
.avatar-row button.active{border-color:var(--accent-2)}

/* ===== exercise modal + animated coach =====
The coach figure has jointed limbs (shoulders, elbows, hips, knees) plus an
optional ball prop. Each exercise gets its own choreography (COACH_MOVES in
content.js), played via the Web Animations API (playCoach in app.js). */
.ex-modal{text-align:center}
.ex-modal h2{margin-bottom:4px}
.ex-sub{color:var(--ink-dim);font-weight:700;font-size:.85rem;margin-bottom:16px}
.ex-stage{display:grid;place-items:center;background:radial-gradient(circle at 50% 80%, var(--accent-soft), transparent 70%), var(--card-2);border-radius:18px;padding:10px;margin-bottom:14px}
.fig{width:168px;height:208px;overflow:visible}
.fig line{stroke:#fffdf5;stroke-width:6.5;stroke-linecap:round}
.fig .head{fill:var(--accent-2)}
.fig .ground{stroke:rgba(255,255,255,.16);stroke-width:3}
.fig .ballc{fill:#fffdf5;stroke:#14142f;stroke-width:2.5}
.fig g,.fig .p-ball{transform-box:view-box}
.fig .p-armL,.fig .p-armR{transform-origin:60px 48px}
.fig .p-foreL{transform-origin:46px 66px}
.fig .p-foreR{transform-origin:74px 66px}
.fig .p-legL,.fig .p-legR,.fig .p-upper,.fig .p-body{transform-origin:60px 88px}
.fig .p-shinL{transform-origin:52px 112px}
.fig .p-shinR{transform-origin:68px 112px}
.fig .p-ball{transform-origin:74px 133px}

/* journey wizard */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.theme-card{border:2px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;padding:12px;text-align:left;color:var(--ink);font:inherit;transition:border-color .2s,transform .1s}
.theme-card:hover{transform:translateY(-2px)}
.theme-card.active{border-color:var(--theme-a)}
.theme-card .swatch{display:flex;gap:5px;margin-bottom:8px}
.theme-card .swatch i{width:14px;height:14px;border-radius:50%}
.theme-card .emoji{font-size:1.4rem}
.theme-card b{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;margin-top:2px}
.theme-card small{color:var(--ink-dim);font-weight:700;font-size:.72rem}
.values{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.value-card{border:2px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;padding:12px;text-align:left;color:var(--ink);font:inherit;transition:border-color .2s,transform .1s}
.value-card:hover{transform:translateY(-2px)}
.value-card.active{border-color:var(--accent-2);background:var(--card-2)}
.value-card .emoji{font-size:1.3rem}
.value-card b{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.92rem;margin-top:2px}
.value-card small{color:var(--ink-dim);font-weight:700;font-size:.7rem;line-height:1.3;display:block;margin-top:2px}

/* game */
.focus-pill{font-size:.72rem;font-weight:800;padding:6px 12px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 10px;text-align:center}
.stat b{font-family:'Fredoka',sans-serif;font-size:1.7rem;font-weight:600;display:block;color:var(--accent-2)}
.stat span{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.board-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
.board-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.board-head h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem}
.board-head small{color:var(--ink-dim);font-weight:700}
.path{display:flex;flex-direction:column;gap:6px}
.path-row{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.cell{aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line);font-size:.55rem;font-weight:800;color:var(--ink-dim);position:relative;transition:background .3s,border-color .3s}
.cell.done{background:var(--accent);border-color:var(--accent);color:#0e2417}
.cell.milestone{border:2px dashed var(--accent-2)}
.cell.milestone.done{border-style:solid}
.cell.trophy{background:linear-gradient(145deg,var(--accent-2),#ffb02e);border:none;font-size:.9rem}
/* the beast perches on the cell's corner so the space's own icon stays visible */
.cell .token{position:absolute;top:-14px;right:-10px;display:block;font-size:1.05rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:bounce 1.6s ease-in-out infinite;z-index:1}
.cell.here{box-shadow:0 0 0 2.5px var(--accent-2);border-color:var(--accent-2)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow);transition:opacity .3s}
.step.locked{opacity:.45;pointer-events:none}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.step-num{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent);font-family:'Fredoka',sans-serif;font-weight:700}
.step.complete .step-num{background:var(--accent);color:#0e2417}
.step-head h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem}
.step-head p{font-size:.8rem;color:var(--ink-dim);font-weight:600}
.dice-zone{display:flex;align-items:center;gap:18px;margin:6px 0 14px}
.die{width:74px;height:74px;border-radius:18px;background:#fffdf5;color:#1c1c46;flex:none;display:grid;place-items:center;font-size:2.2rem;font-family:'Fredoka',sans-serif;font-weight:700;box-shadow:inset 0 -6px 0 rgba(0,0,0,.12), var(--shadow)}
.die.rolling{animation:shake .5s}
@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.08)}50%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}100%{transform:rotate(0)}}
.dice-msg{font-size:.95rem;font-weight:700;color:var(--ink-dim)}
.dice-msg b{color:var(--accent-2)}
.tonight{display:none;margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.tonight.show{display:block}
.script{background:var(--card-2);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.script label{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);display:block;margin-bottom:4px}
.script p{font-size:.92rem;line-height:1.5}
.wheel-zone{display:flex;flex-direction:column;align-items:center;gap:14px;margin:4px 0 14px}
.wheel-wrap{position:relative;width:250px;height:250px}
.wheel-wrap .pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:2;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid var(--accent-2);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
#wheel,#wheelDiff{width:100%;height:100%;transition:transform 3.2s cubic-bezier(.15,.9,.25,1)}
.wheel-result{min-height:28px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;color:var(--accent-2);text-align:center}
.done-banner{display:none;text-align:center;padding:10px 0 8px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem;color:var(--accent)}
.done-banner.show{display:block}
.done-banner.tomorrow{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;color:var(--accent-2);box-shadow:var(--shadow)}
.confetti{position:fixed;top:-10px;z-index:20;font-size:1.3rem;animation:fall 2.6s linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.2}}
/* exercise modal: category pill, sets x reps, how-to description */
.ex-level{display:inline-block;background:rgba(255,216,77,.13);color:var(--accent-2);border:1px solid rgba(255,216,77,.35);border-radius:99px;padding:4px 12px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.78rem;margin-bottom:8px}
.ex-sets{color:var(--accent-2);font-weight:800;font-size:.95rem;margin:2px 0 4px}
.ex-desc{color:var(--ink);font-size:.85rem;font-weight:600;line-height:1.55;text-align:left;background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:8px 0 10px}
.star-note{display:block;margin-top:6px;color:var(--accent-2);font-weight:800}
/* journey options + danger confirm */
.head-right{display:flex;align-items:center;gap:8px;flex:none}
.btn.danger{background:linear-gradient(145deg,#e0605c,#b73a52);color:#fff}
.danger-text{color:var(--ink-dim);font-size:.9rem;font-weight:600;line-height:1.5;text-align:left;margin:6px 0 12px}
#closeModal{text-align:center}
.close-text{font-size:1rem;font-weight:600;line-height:1.65;margin:8px 0 16px}
/* settings dropdown */
.menu-wrap{position:relative;flex:none}
.menu{position:absolute;right:0;top:52px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);min-width:220px;padding:6px;display:none;z-index:30}
.menu.open{display:block}
.menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--ink);font:inherit;font-weight:800;font-size:.9rem;padding:10px 12px;border-radius:10px;cursor:pointer;text-align:left}
.menu button:hover{background:var(--card-2)}
.menu hr{border:none;border-top:1px solid var(--line);margin:6px 4px}
/* family dashboard strip + tonight chips */
.stats.fam{margin:2px 0 16px}
.stats.fam .stat b{font-size:1.45rem}
.chip{display:inline-block;font-size:.72rem;font-weight:800;padding:4px 11px;border-radius:99px;margin:2px 0 8px}
.chip.done{background:var(--accent-soft);color:var(--accent)}
.chip.ready{background:rgba(255,216,77,.13);color:var(--accent-2);border:1px solid rgba(255,216,77,.3)}
/* coach's pick + prize */
.coach-pick{display:block;font-size:.62rem;font-weight:800;color:var(--accent-2);margin-top:4px}
.prize-line{margin-top:12px;font-size:.85rem;font-weight:800;color:var(--accent-2);text-align:center;background:rgba(255,216,77,.08);border:1px dashed rgba(255,216,77,.35);border-radius:12px;padding:9px 12px}
/* themed board spaces */
.zone-label{font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:4px 2px -2px}
.cell{font-size:.72rem}
.space-card{background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.space-chip{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.06em;background:var(--accent-soft);color:var(--accent-2);border-radius:99px;padding:4px 11px;margin-bottom:8px}
.space-card h4{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;margin:2px 0 6px}
.space-card p{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.55;margin-bottom:8px}
.space-card .space-prompt{color:var(--accent-2);font-weight:800}
.space-card .space-milestone{color:var(--accent-2);font-weight:800;font-size:1rem}
.space-video{display:grid;place-items:center;margin:6px 0 10px}
.space-video iframe{width:min(250px,100%);aspect-ratio:9/16;border:0;border-radius:14px;background:#000}
.space-yt{display:inline-block;font-size:.75rem;font-weight:800;color:var(--ink-dim);text-decoration:underline}
/* prize idea chips */
.prize-ideas{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 8px}
.prize-ideas button{background:var(--card-2);border:1px solid var(--line);color:var(--ink-dim);font:inherit;font-weight:800;font-size:.75rem;padding:7px 12px;border-radius:99px;cursor:pointer}
.prize-ideas button:hover{color:var(--ink);border-color:var(--accent-2)}
.prize-ideas button.active{background:rgba(255,216,77,.13);border-color:var(--accent-2);color:var(--accent-2)}