/* Bubble Toybox — a soft iridescent sheet on a warm craft table. */
:root{color-scheme:light;--ink:#4d7164;--teal:#2c8a7f;--cream:#fff7e4;--coral:#e38d6a}
html,body{background:#e8d1a8;color:var(--ink)}.screen{background:radial-gradient(ellipse at 75% 0,#e8f2dd,#fff8e7 52%,#f4e4c9);color:var(--ink);padding:70px 22px 34px;gap:17px;justify-content:flex-start}.screen>*{max-width:100%;flex-shrink:0}.toy-hero{width:min(450px,100%);height:auto;aspect-ratio:3/2;object-fit:cover;border:7px solid #fffaf0;border-radius:37px;box-shadow:0 7px 0 #d9c9a7,0 20px 45px #90724526;margin:0 0 6px}.sub{color:#749179;font-size:10px;letter-spacing:.18em}.ttl{color:#39847b;background:none;filter:none;text-shadow:0 3px 0 #fff;font-size:clamp(46px,12vw,70px);letter-spacing:.08em}.rules{background:#fffdf1;color:#68806e;border:1px solid #e2d6b8;border-radius:23px;box-shadow:0 5px 0 #e0d4b5;padding:18px 22px;font-size:14px;line-height:1.95}.rules li::before{content:'◦';color:#d0a45c;font-weight:900}.rules b{color:#398277}.btn{background:linear-gradient(155deg,#8bcbb4,#4a9a89 75%,#368574);color:#fffef0;border:1px solid #b7e0c6;border-radius:21px;padding:17px 35px;box-shadow:0 6px 0 #326f62,0 14px 25px #7c997e2b;font-size:19px;letter-spacing:.05em;min-height:52px;max-width:100%;white-space:normal}.btn:active{box-shadow:0 2px 0 #326f62;transform:translateY(4px)}.btn.ghost{background:#fffcf0;color:#6e8369;border:1px solid #d5d7b9;box-shadow:0 3px 0 #cbd0b1;border-radius:15px;min-height:45px}.beststat{color:#8a967b;font-size:12px;line-height:1.7}
.corner,.plaza{background:linear-gradient(#fffdf2,#f4e7cb);color:#5a7d6d;border:1px solid #e3d5b7;box-shadow:0 3px 0 #c2b58e77;border-radius:12px;min-height:40px;top:12px}.plaza{position:absolute;left:14px;top:12px;font-size:12px;letter-spacing:0}.corner#mute{right:12px;width:40px}.corner#quitBtn{right:60px;top:12px;width:48px;padding:0 7px;font-size:11px}.corner.off{color:#a3ab90}
#hud{left:12px;right:119px;top:10px;gap:5px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:480px}.stat{background:linear-gradient(#fffdf1,#f2e5c7);border:1px solid #fff9;box-shadow:0 3px 0 #afa57a33;border-radius:12px;padding:6px 5px 5px;text-align:center;min-width:0}.stat .lbl{font-size:8px;color:#879177;letter-spacing:.025em}.stat .val{font-size:15px;color:#367f71;letter-spacing:-.04em}.stat:first-child .val{color:#c67b55}
.rttl{color:#428679;font-size:clamp(27px,8vw,44px);letter-spacing:.025em}.rstats{gap:10px;flex-wrap:wrap;justify-content:center}.rstats div{background:#fffdf1;border:1px solid #dddbbd;box-shadow:0 5px 0 #d9cfab;border-radius:23px;padding:16px 20px;min-width:100px}.rstats b{font-size:32px;color:#438a78}.rstats span{color:#8a9478;font-size:10px}.bubble-medal{width:135px;height:135px;border-radius:50%;display:grid;place-items:center;margin:30px 0 12px;background:radial-gradient(circle at 30% 24%,#fffdf3 0,#fae9b4 27%,#ddedce 55%,#86bbb2 83%,#f3f6da 95%);border:2px solid #fffdf1;box-shadow:inset 2px 3px 6px #fff,0 9px 0 #9bbca450,0 20px 30px #79996b25;position:relative}.bubble-medal::before{content:'';position:absolute;left:24px;top:20px;width:50px;height:14px;background:#fff9;transform:rotate(-32deg);border-radius:50%}.bubble-medal span{font-size:60px;color:#fffaf1;text-shadow:0 3px 0 #b6ad75,0 4px 14px #e4b775;transform:rotate(10deg)}
.rw-back{background:#fffdf2!important;color:#3b7968!important;border-color:#c6d2b7!important;box-shadow:0 4px 0 #cad1b7;border-radius:16px!important}#title[data-rw-lock="1"]>div:last-of-type{color:#687d68!important}#rw-lock>div{background:linear-gradient(#fffdf3,#f4e8cc)!important;border:1px solid #decea9!important;color:#3c715f!important;border-radius:27px!important}#rw-lock>div>div,#rw-lock button{color:#6c816b!important}#rw-lock a{color:#4e735f!important}#oj-gate{background:radial-gradient(#fffdf2,#f2e4c6)!important;color:#426e5e!important}#oj-gate>div>div{color:#426e5e!important}
@media(min-width:850px) and (min-height:600px){#title{display:grid;grid-template-columns:minmax(330px,490px) minmax(300px,430px);grid-template-rows:repeat(5,auto);gap:16px 44px;align-content:center}#title .toy-hero{grid-column:1;grid-row:1/6;aspect-ratio:1;max-width:none;width:100%;margin:0}#title .sub{grid-column:2;grid-row:1}#title .ttl{grid-column:2;grid-row:2}#title .rules{grid-column:2;grid-row:3}#startBtn{grid-column:2;grid-row:4;justify-self:stretch}#tbest{grid-column:2;grid-row:5}.screen:not(#title){justify-content:center}.stat .lbl{font-size:9px}.stat .val{font-size:17px}}
@media(max-width:480px){.screen{gap:13px;padding:70px 19px 28px}.toy-hero{width:335px;border-width:5px;border-radius:29px}.rules{font-size:12px;padding:15px 17px}.btn{font-size:18px}.rstats{gap:8px}.rstats div{min-width:90px;padding:13px}.rstats b{font-size:29px}}
@media(prefers-reduced-motion:reduce){.screen{animation:none}}
#quitBtn{padding:0 6px;white-space:nowrap}