/* Moonlight Toybox — visual layer. Canvas remains full viewport for input coordinates. */
:root{color-scheme:light;--ink:#285657;--muted:#66827b;--cream:#fff8e9;--teal:#287f80;--coral:#e77c62}
html,body{background:#214c56;color:var(--ink)}
.screen{background:radial-gradient(ellipse at 25% 0,#fffdf4 0,#fff7e7 52%,#e6efdf 100%);gap:12px;padding:72px 24px 32px;justify-content:flex-start;color:var(--ink)}
.screen>*{flex-shrink:0;max-width:100%}.screen.hidden{display:none}
.toy-hero{display:block;width:min(100%,390px);height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:36px;border:7px solid #fffdf4;box-shadow:0 8px 0 #d7e0cd,0 22px 55px #2b635127;margin:0 0 12px}
.sub{font-size:10px;color:#56837c;letter-spacing:.18em}.ttl{font-size:clamp(36px,9vw,58px);background:none;color:#2b6668;filter:none;text-shadow:0 3px 0 #fff;font-weight:950;letter-spacing:.04em}.ttl br{display:none}
.lead{color:#52706a;font-weight:700;font-size:14px;line-height:1.8}.lead em{color:#c9684f}.rules{background:#fffdf5;border:1px solid #e6d9bf;border-radius:22px;color:#526e67;padding:15px 20px;box-shadow:0 5px 0 #e8dcc6;font-size:13px;line-height:1.8}.rules b{color:#216b6f}.rules li::before{color:#dda654;content:'✦';font-size:10px;top:2px}
.btn{background:linear-gradient(160deg,#ffb795,#f08769 70%,#e47760);color:#fffdf2;border:1px solid #ffccb0;box-shadow:0 6px 0 #b96651,0 13px 24px #b9654229;border-radius:20px;font-size:19px;letter-spacing:.04em;padding:16px 32px;max-width:100%;min-height:52px;white-space:normal}.btn:active{box-shadow:0 2px 0 #b96651;transform:translateY(4px)}.btn.ghost{background:#fffdf7;color:#397675;border:1px solid #d4dfd2;box-shadow:0 3px 0 #ceddce;border-radius:15px;min-height:46px}
.beststat,.notehint{color:#708879;font-size:11px;line-height:1.7}.beststat b,.notehint b{color:#2a7476}
.corner,.plaza{background:linear-gradient(#fffef5,#f5e8cd);color:#3e6b65;border:1px solid #e0d8bf;box-shadow:0 3px 0 #bdbca0;border-radius:13px;min-height:42px;top:14px}.plaza{position:absolute;left:16px;top:14px;letter-spacing:0;font-size:12px}.corner{font-size:12px}.corner#mute{right:16px;width:42px}.corner#noteBtn{right:66px}.corner#quitBtn{right:142px}.corner#mute.off{color:#8b978a}
.toy-moon{height:110px;width:110px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff9d8,#f7ce75 55%,#e8a858);color:#fffef5;font-size:95px;box-shadow:inset 0 4px 5px #fff9,0 8px 0 #b9945130,0 14px 28px #d9b66535;margin:12px 0}.rttl{color:#28696b;text-shadow:none}.rscore{color:#ce7550;text-shadow:0 3px 0 #fff}.rscore small{color:#6e8779}.rgrade{color:#2e7979}.rstats{gap:9px}.rstats>div{background:#fffdf6;border:1px solid #e7d9ba;box-shadow:0 4px 0 #e5d8bd;border-radius:20px;min-width:94px;padding:12px}.rstats b{color:#287d7d}.rstats span{color:#728471}.breakdown,.newdeeds,#note .list{background:#fffdf6;border:1px solid #dfd7bf;box-shadow:0 5px 0 #e3d9c1;color:#51736b;border-radius:22px}.breakdown b,.breakdown .row b,.newdeeds b{color:#c97550}#note .list{padding:20px 24px}#note .list .done{color:#277977}#note .list .done::before{color:#d29842}#note .list .todo::before{color:#a7afa0}#note .sub{font-size:19px;letter-spacing:.1em;margin:24px 0}
#toyHud{position:absolute;left:16px;top:72px;z-index:5;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none;max-width:calc(100% - 32px)}#toyHud[hidden]{display:none}#toyHud>div{background:linear-gradient(#fffdf3,#f3e8ce);border:1px solid #fff9;border-radius:18px;padding:9px 14px;box-shadow:0 4px 0 #1a4e5a40;display:flex;align-items:baseline;gap:5px}#toyHud span{color:#66847a;font-size:10px;font-weight:800}#toyHud b{color:#276c71;font-size:24px;font-variant-numeric:tabular-nums}#toyHud small{font-size:10px;color:#6a8277}#toyHud p{flex-basis:100%;margin:3px 0;color:#fff6da;font-size:11px;letter-spacing:.025em;text-shadow:0 1px 4px #153c4e}#toyHud.urgent #toyTime{color:#cd654d}
@media(min-width:850px) and (min-height:640px){#title{display:grid;grid-template-columns:minmax(300px,460px) minmax(300px,440px);grid-template-rows:auto auto auto auto auto auto;align-content:center;gap:10px 42px}#title.hidden{display:none}#title .toy-hero{grid-column:1;grid-row:1/7;width:100%;max-width:none;aspect-ratio:4/5;object-position:48% center;align-self:center;margin:0}#title .sub{grid-column:2;grid-row:1}#title .ttl{grid-column:2;grid-row:2}#title .lead{grid-column:2;grid-row:3}#dieBtn{grid-column:2;grid-row:4;margin:10px 0}#title .rules{grid-column:2;grid-row:5}#tbest{grid-column:2;grid-row:6}.screen:not(#title){justify-content:center}}
@media(max-width:480px){.screen{padding:68px 18px 30px;gap:10px}.toy-hero{width:290px;max-height:195px;border-width:5px;border-radius:28px}.ttl{font-size:39px}.rules{font-size:12px;padding:12px 16px}.lead{font-size:12px}.btn{font-size:17px;padding:15px 24px}.rstats>div{min-width:86px;padding:10px}.rstats span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.screen{animation:none}}