:root { --ink:#2B2350; --paper:#FFF8EC; --z:1; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--paper); color:var(--ink); -webkit-tap-highlight-color: transparent;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
button, input { font-family: inherit; color: var(--ink); touch-action: manipulation; }
button { cursor:pointer; -webkit-user-select:none; user-select:none; }
.wrap { max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:18px;
  padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(56px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
.little { --z:1.25; }

.card { border:4px solid var(--ink); border-radius:28px; padding:16px; background:#fff; }
.head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.avatar { width:104px; height:104px; border-radius:52px; background:#fff; border:4px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:66px; flex-shrink:0; }
.greet { flex:1; min-width:180px; }
.greet h1 { margin:0; font-size:calc(34px*var(--z)); line-height:1.1; font-weight:800; }
.greet p { margin:4px 0 0; font-size:20px; font-weight:600; }
.starpill { background:#FFD43B; border:4px solid var(--ink); border-radius:24px; padding:8px 18px; text-align:center; }
.starpill b { display:block; font-size:40px; line-height:1.1; font-weight:800; }
.starpill span { font-size:15px; font-weight:700; }

.topbar { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }
.btn { background:#fff; border:3px solid var(--ink); border-radius:18px; padding:10px 18px; font-size:20px; font-weight:700; min-height:56px; }
.btn.sm { font-size:16px; min-height:44px; padding:6px 14px; }
.btn.yellow { background:#FFD43B; } .btn.green { background:#69DB7C; } .btn.red { background:#FFC9C9; } .btn.gray { background:#F1F3F5; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn.del { min-height:48px; padding:4px 14px; background:#FFC9C9; }

.sec { border-width:3px; border-color:#7B7396; }
.sec.now { border-width:7px; border-color:var(--ink); box-shadow:0 6px 0 var(--ink); }
.sechead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sectitle { font-size:calc(30px*var(--z)); font-weight:800; flex:1; min-width:160px; }
.badge-now { background:var(--ink); color:#fff; border-radius:14px; padding:6px 12px; font-size:16px; font-weight:800; }
.count { background:#fff; border:3px solid var(--ink); border-radius:14px; padding:4px 12px; font-size:20px; font-weight:800; }
.bar { height:16px; background:rgba(43,35,80,.18); border-radius:8px; margin:12px 0; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:8px; }
.list { display:flex; flex-direction:column; gap:10px; }
h2 { margin:0; font-size:calc(28px*var(--z)); font-weight:800; }
.hint { font-size:18px; font-weight:600; margin:2px 0 0; }

.task { display:flex; align-items:center; gap:14px; text-align:left; width:100%; background:#fff; border:4px solid var(--ink); border-radius:24px; padding:10px 16px; min-height:calc(76px*var(--z)); }
.task.done { background:#C3FAD0; }
.task .em { font-size:calc(44px*var(--z)); line-height:1; }
.task .tx { font-size:calc(22px*var(--z)); font-weight:700; flex:1; }
.task .ck { width:calc(52px*var(--z)); height:calc(52px*var(--z)); border-radius:30px; border:4px solid var(--ink); background:#fff; display:flex; align-items:center; justify-content:center; font-size:calc(28px*var(--z)); flex-shrink:0; }
.task.done .ck { background:#FFD43B; }
.task.pop .ck { animation:pop .35s ease-out; }

.extra { background:#FFD8A8; }
.chore { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chore .task { flex:1 1 220px; width:auto; }
.chore .task .em { font-size:calc(40px*var(--z)); }
.chore .task .tx { font-size:calc(21px*var(--z)); }
.chore .plus { font-size:calc(20px*var(--z)); font-weight:800; background:#FFD43B; border:3px solid var(--ink); border-radius:16px; padding:4px 10px; }
.chore .n { min-width:56px; text-align:center; font-size:24px; font-weight:800; }
.chore .n.zero { visibility:hidden; }
.chore .btn.undo { min-height:56px; padding:4px 12px; font-size:16px; background:#FFC9C9; }

.reward-card { background:#FFF3BF; }
.reward { background:#fff; border:4px solid var(--ink); border-radius:24px; padding:10px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.reward .em { font-size:calc(42px*var(--z)); }
.reward .mid { flex:1; min-width:150px; }
.reward .rt { font-size:calc(21px*var(--z)); font-weight:700; }
.reward .rb { height:10px; background:rgba(43,35,80,.15); border-radius:6px; margin-top:6px; overflow:hidden; }
.reward .rb i { display:block; height:100%; background:#FFA61A; border-radius:6px; }
.reward .cost { font-size:22px; font-weight:800; }

.event { display:flex; align-items:center; gap:12px; margin-top:10px; background:#E7F5FF; border:3px solid var(--ink); border-radius:18px; padding:10px 14px; }
.event .tm { font-size:18px; font-weight:800; min-width:84px; }
.event .ee { font-size:34px; }
.event .et { font-size:calc(22px*var(--z)); font-weight:700; flex:1; }

.inp { font-size:18px; padding:10px 12px; border-radius:12px; border:2px solid var(--ink); background:#fff; min-width:0; }
.inp.emoji { width:64px; text-align:center; } .inp.grow { flex:1; min-width:140px; } .inp.num { width:84px; } .inp.time { width:130px; }
.editrow, .addrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.addrow { margin-top:10px; }
.pbox h3 { margin:0; font-size:22px; font-weight:800; }
.pbox p { margin:4px 0 0; font-size:16px; }
.pbox .sub { font-size:16px; font-weight:700; margin-top:12px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.row .btn.av { font-size:28px; min-height:56px; padding:4px 12px; }
.row .btn.sel { border-width:5px; }
.note { font-size:15px; margin-top:8px; background:#E7F5FF; border-radius:12px; padding:8px 12px; }
.hist { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:16px; font-weight:600; }

/* timer */
.timer { display:flex; flex-direction:column; align-items:center; gap:14px; }
.timer h2 { align-self:flex-start; }
.presets, .tbtns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.presets .btn { font-size:22px; min-width:84px; }
.presets .btn.on { border-width:5px; }
.dial { position:relative; width:min(300px,80%); }
.dial svg { display:block; width:100%; height:auto; }
.dial .arc { transition:none; }
.timer.running .dial .arc { transition:stroke-dashoffset 1s linear; }
.dial .mid { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; font-weight:800; }
.dial .time { font-size:46px; font-variant-numeric:tabular-nums; }
.dial .over { font-size:22px; text-align:center; }
.dial .over b { display:block; font-size:44px; }
.timer.over .dial { animation:wiggle .4s 4; }

/* home */
.home { text-align:center; padding-top:8px; }
.home h1 { font-size:42px; margin:0; font-weight:800; }
.home p { font-size:22px; font-weight:600; margin:6px 0 18px; }
.kidbtn { display:flex; align-items:center; gap:18px; width:100%; border:5px solid var(--ink); border-radius:32px; padding:16px 20px; margin-bottom:16px; min-height:120px; text-align:left; box-shadow:0 6px 0 var(--ink); }
.kidbtn .av { font-size:72px; line-height:1; }
.kidbtn .nm { font-size:38px; font-weight:800; flex:1; }
.kidbtn .st { font-size:26px; font-weight:800; background:#FFD43B; border:3px solid var(--ink); border-radius:18px; padding:4px 12px; }
.kidbtn:active { transform:translateY(3px); box-shadow:0 3px 0 var(--ink); }

/* overlays */
.confetti { position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; overflow:hidden; z-index:50; }
.confetti span { position:absolute; top:-50px; will-change:transform; animation:fall 3s ease-in forwards; }
.confetti .banner { position:absolute; top:28%; left:0; right:0; text-align:center; padding:0 12px; animation:none; }
.confetti .banner div { display:inline-block; background:#FFD43B; border:4px solid var(--ink); border-radius:28px; padding:18px 26px; font-size:30px; font-weight:800; animation:pop .6s ease-out; }
.modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(43,35,80,.55); z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; touch-action:none; }
.modal-box { background:#fff; border:5px solid var(--ink); border-radius:32px; padding:20px; width:min(340px,100%); text-align:center; }
.modal-box.shake { animation:wiggle .3s 2; }
.m-title { font-size:22px; font-weight:800; }
.dots { display:flex; gap:12px; justify-content:center; margin:14px 0; min-height:22px; }
.dots i { width:20px; height:20px; border-radius:10px; border:3px solid var(--ink); background:#fff; }
.dots i.f { background:var(--ink); }
.keys { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.key { font-size:30px; font-weight:800; min-height:64px; border-radius:20px; border:3px solid var(--ink); background:#FFF3BF; }
#toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#FFD43B; border:4px solid var(--ink); border-radius:22px; padding:12px 20px; font-size:20px; font-weight:800; z-index:200; max-width:92vw; text-align:center; opacity:0; pointer-events:none; transition:opacity .25s; }
#toast.show { opacity:1; }

@keyframes fall { from { transform:translateY(-10vh) rotate(0); } to { transform:translateY(115vh) rotate(720deg); } }
@keyframes pop { 0% { transform:scale(.3); opacity:0; } 70% { transform:scale(1.12); opacity:1; } 100% { transform:scale(1); } }
@keyframes wiggle { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .confetti span { animation-duration:.01s; } }