:root{--paper: url(../img/texture.png);--noise: url(../img/grain.png);--ui-font: "Trebuchet MS", "Arial Rounded MT Bold", "Segoe UI", Verdana, sans-serif;--yellow: #ffe36a;--orange: #ff8f6b;--blue: #75c7ff;--green: #9ddf78;--pink: #ffb5d4;--bg: #f7f2e8;--ink: #1a1a1a;--ink-soft: rgba(0, 0, 0, .85);--white-t: rgba(255, 255, 255, .45)}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;color:var(--ink);font-family:var(--ui-font);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.45;background:var(--bg);position:relative;min-height:100dvh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;inset:0;background-image:var(--paper);background-size:cover;opacity:.42;pointer-events:none;mix-blend-mode:multiply;z-index:9998;filter:url(#crayon)}body:after{content:"";position:fixed;inset:0;background-image:var(--noise);background-size:240px 240px;opacity:.24;pointer-events:none;mix-blend-mode:overlay;z-index:9999}#root{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column}.crayon-card{background:var(--yellow);border-radius:22px 18px 26px 16px;padding:20px;box-shadow:0 2px #00000040,0 8px 20px #0000001f;position:relative;isolation:isolate}.crayon-card:before{content:"";position:absolute;inset:-4px;border:4px solid var(--ink-soft);border-radius:26px 22px 30px 20px;transform:rotate(-.6deg);pointer-events:none;filter:url(#crayon) drop-shadow(0 2px 0 rgba(0,0,0,.25));opacity:.9}.crayon-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.14;background-image:radial-gradient(circle at 18% 22%,rgba(255,255,255,.28),transparent 33%),radial-gradient(circle at 78% 70%,rgba(0,0,0,.1),transparent 38%),var(--noise);background-size:100% 100%,100% 100%,260px 260px;mix-blend-mode:multiply;filter:url(#crayon)}.crayon-card>*{position:relative;z-index:1}.crayon-title{font-weight:900;letter-spacing:.5px;text-shadow:2px 2px 0 rgba(0,0,0,.85),4px 4px 0 rgba(0,0,0,.15);margin:0;line-height:1;color:#fff}.edgefx{position:relative;isolation:isolate}.edgefx:before{content:"";position:absolute;inset:0;border:3px solid var(--ink-soft);border-radius:inherit;pointer-events:none;z-index:3;filter:url(#crayon)}.crayon-btn{border:3px solid transparent;border-radius:14px;background:var(--yellow);padding:10px 20px;font-weight:900;font-size:1rem;font-family:inherit;cursor:pointer;transform:rotate(-.4deg);position:relative;isolation:isolate;transition:transform .1s;color:var(--ink)}.crayon-btn:hover{transform:rotate(-.4deg) scale(1.04)}.crayon-btn:active{transform:rotate(-.4deg) scale(.97)}.crayon-btn.primary{background:var(--orange);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3)}.crayon-btn.alt{background:var(--pink)}.crayon-btn.green{background:var(--green)}.crayon-btn.blue{background:var(--blue)}.crayon-input{width:100%;border:0;border-radius:10px;padding:12px 14px;font-size:1.1rem;font-weight:700;background:#ffffffd9;font-family:inherit;color:var(--ink)}.crayon-input:focus{outline:3px solid var(--orange);outline-offset:2px}.input-frame{border:3px solid transparent;border-radius:14px;background:#ffffffb3;padding:3px}.progress-track{height:18px;border-radius:999px;background:var(--white-t);overflow:visible;position:relative;border:3px solid transparent}.progress-fill{height:100%;border-radius:999px;transition:width .3s ease;background:var(--orange)}.progress-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;border:2px solid var(--ink-soft);transition:left .3s ease}.label{margin:0 0 8px;font-weight:900;text-transform:uppercase;font-size:1.05rem;letter-spacing:.05em}.stage-prompt{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;text-align:center;margin:0 0 16px}.crayon-ink{filter:url(#crayon)}.text-center{text-align:center}.page{width:min(780px,100%);margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:18px}.flex-col{display:flex;flex-direction:column;align-items:center}.gap-md{gap:16px}.game-layout{position:relative}.stage-scoreboard{position:fixed;right:0;top:0;width:260px;max-height:100dvh;overflow-y:auto;padding:16px 12px;z-index:50}.stage-scoreboard-title{font-weight:900;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;opacity:.7}.stage-scoreboard-list{display:flex;flex-direction:column;gap:10px}.stage-scoreboard-stage{background:var(--yellow);border-radius:16px 12px 18px 10px;padding:8px;position:relative;isolation:isolate;box-shadow:0 2px #0003,0 4px 10px #00000014}.stage-scoreboard-stage:before{content:"";position:absolute;inset:-2px;border:3px solid var(--ink-soft);border-radius:18px 14px 20px 12px;transform:rotate(-.4deg);pointer-events:none;filter:url(#crayon);opacity:.85}.stage-scoreboard-stage-header{font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;opacity:.6;margin-bottom:4px;padding:0 4px;position:relative;z-index:1}.stage-scoreboard-entry{display:flex;align-items:center;gap:6px;border-radius:10px 8px 12px 7px;padding:3px 6px;font-size:.8rem;font-weight:700;position:relative;z-index:1}.stage-scoreboard-entry.gold{background:var(--orange);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.2)}.stage-scoreboard-entry.silver{background:var(--blue)}.stage-scoreboard-entry.bronze{background:var(--green)}.stage-scoreboard-entry.me{font-style:italic}.stage-scoreboard-rank{min-width:24px;text-align:center;font-size:.75rem;opacity:.7}.stage-scoreboard-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-scoreboard-time{font-variant-numeric:tabular-nums;white-space:nowrap}.stage-scoreboard-pts{font-size:.7rem;font-weight:900;color:var(--ink);opacity:.55;white-space:nowrap}@media(max-width:900px){.stage-scoreboard{position:static;width:100%;max-height:none;padding:0 16px 24px}}.countdown-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0006}.countdown-number{font-size:clamp(6rem,20vw,12rem);font-weight:900;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.85),6px 6px 0 rgba(0,0,0,.2);animation:countdown-pop .5s ease-out}@keyframes countdown-pop{0%{transform:scale(2);opacity:0}50%{opacity:1}to{transform:scale(1)}}.difficulty-text{font-size:clamp(4rem,14vw,8rem);font-weight:900;color:#f44;text-transform:uppercase;text-align:center;text-shadow:3px 3px 0 rgba(0,0,0,.85),6px 6px 0 rgba(0,0,0,.2);animation:difficulty-pop 2s ease-out forwards}@keyframes difficulty-pop{0%{transform:scale(2);opacity:0}15%{transform:scale(1);opacity:1}70%{transform:scale(1);opacity:1}to{transform:scale(1);opacity:0}}.feedback-text{font-size:clamp(4rem,14vw,8rem);font-weight:900;text-transform:uppercase;text-align:center;text-shadow:3px 3px 0 rgba(0,0,0,.85),6px 6px 0 rgba(0,0,0,.2)}.feedback-time{font-size:clamp(1.2rem,4vw,2rem);text-transform:none;letter-spacing:.05em;margin-top:8px;text-shadow:2px 2px 0 rgba(0,0,0,.85),3px 3px 0 rgba(0,0,0,.15)}.feedback-correct{color:var(--green);animation:feedback-correct .9s ease-out forwards}.feedback-incorrect{color:var(--orange);animation:feedback-incorrect .7s ease-out forwards}@keyframes feedback-correct{0%{opacity:1;transform:scale(1.8)}12%{opacity:1;transform:scale(1)}25%{opacity:0}40%{opacity:1}55%{opacity:0}70%{opacity:1}to{opacity:0}}@keyframes feedback-incorrect{0%{opacity:1;transform:scale(1.8)}15%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0}}.player-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.player-item{display:flex;align-items:center;justify-content:space-between;background:#ffffff80;border-radius:12px;padding:10px 14px;font-weight:700}.player-item .ready-dot{width:14px;height:14px;border-radius:50%;background:#ccc;border:2px solid var(--ink-soft)}.player-item .ready-dot.is-ready{background:var(--green)}.banner-frame{width:min(480px,100%);margin:0 auto 14px;border:4px solid transparent;border-radius:14px;background:#ffffff59;padding:6px}.banner-img{display:block;width:100%;border-radius:10px}.rank-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.rank-item{display:flex;align-items:center;gap:12px;background:#ffffff80;border-radius:14px;padding:12px 16px;font-weight:700;font-size:1.1rem}.rank-item:first-child{background:var(--yellow);font-size:1.3rem}.rank-position{font-size:1.5em;min-width:40px;text-align:center}.rank-name{flex:1}.rank-score{font-weight:900}.volume-fab{position:fixed;bottom:16px;right:16px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.volume-btn{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);font-size:1.3rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center}.volume-btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.volume-popup{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:10px 14px;box-shadow:3px 3px 0 var(--ink)}.volume-range{width:120px;accent-color:var(--orange)}