:root{font-family:ui-sans-serif,system-ui,sans-serif;color:#f5f7fb;background:#10151d;font-synthesis:none;text-rendering:optimizeLegibility;font-optical-sizing:auto;font-weight:500}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% -25%,#213346,#10151d 62%)}.shell{width:min(100% - 40px,980px);margin:0 auto;padding:26px 0 28px;min-height:100svh;display:flex;flex-direction:column}.top{display:flex;align-items:center;justify-content:space-between}.brand{font-size:20px;font-weight:800;letter-spacing:.12em}.brand span{color:#61e5c2}.progress{display:flex;align-items:center;gap:7px;font:500 11px ui-monospace,monospace;letter-spacing:.08em;color:#9caab9}.progress b{color:#f3f6fa;font-size:15px}.progress i{font-style:normal;color:#667789}.progress-track{width:95px;height:4px;background:#263342;border-radius:5px;margin-left:7px;overflow:hidden}.progress-track div{height:100%;background:#61e5c2;border-radius:5px;transition:width .25s}.intro{display:flex;align-items:center;justify-content:space-between;padding:35px 2px 23px}.eyebrow,.result-stat span,.compare-label{font:500 10px ui-monospace,monospace;letter-spacing:.16em;color:#61e5c2}.intro h1,.final h1{font-size:clamp(27px,5vw,40px);letter-spacing:-.045em;line-height:1.08;margin:8px 0 7px;font-weight:700}.muted{color:#98a7b8;font-size:14px;margin:0}.board-wrap{position:relative;width:100%;overflow:hidden;border:1px solid #2d3b4b;border-radius:16px;background:#151d28;box-shadow:0 18px 55px #05090f55;touch-action:none}.board{display:block;width:100%;aspect-ratio:10/7;touch-action:none;cursor:crosshair}.board-hint{position:absolute;left:17px;bottom:15px;color:#728397;font:10px ui-monospace,monospace;letter-spacing:.12em;pointer-events:none}.is-drawing{border-color:#ca885c;box-shadow:0 0 0 1px #ca885c22,0 18px 55px #05090f55}.bottom{display:flex;align-items:center;justify-content:space-between;padding-top:19px}.level-dots{display:flex;gap:6px}.level-dots i{width:6px;height:6px;background:#354353;border-radius:50%}.level-dots i.done{background:#61e5c2}.level-dots i.current{width:19px;border-radius:4px;background:#61e5c2}button{font:700 13px ui-sans-serif,system-ui,sans-serif;border:0;border-radius:10px;padding:13px 18px;cursor:pointer;transition:transform .15s,background .15s}button:active{transform:scale(.98)}button:disabled{opacity:.55;cursor:default}.primary{background:#61e5c2;color:#0a211d}.primary:hover{background:#7cf1d1}.primary span{padding-left:12px}.secondary{background:#273544;color:#dce4ed}.draw-actions{display:flex;gap:9px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:13px}.compare-card{border:1px solid #2d3b4b;border-radius:13px;background:#151d28;overflow:hidden}.compare-label{padding:12px 14px 0;color:#a8b5c4}.compare-canvas{display:block;width:100%;aspect-ratio:10/7}.result-stat{text-align:right;display:grid;gap:3px}.result-stat b,.big-score{font:500 31px ui-monospace,monospace;color:#61e5c2}.result-stat span{color:#9ab}.card{background:#151d28;border:1px solid #2d3b4b;border-radius:18px}.final{margin:auto;width:min(100%,680px);padding:clamp(25px,6vw,52px);text-align:center}.final .eyebrow{margin-bottom:13px}.final h1{margin-bottom:10px}.big-score{font-size:76px;margin:9px 0}.big-score small{font-size:32px}.score-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:26px 0}.score-strip div{display:grid;gap:5px;padding:10px 12px;background:#202c39;border-radius:9px;min-width:54px}.score-strip span{font:10px ui-monospace,monospace;color:#98a7b8}.score-strip b{font:12px ui-monospace,monospace}.actions{display:flex;justify-content:center;gap:10px}.share-status{min-height:19px;color:#98a7b8;font-size:12px;padding-top:9px}.share-copy{display:block;width:100%;margin-top:8px;padding:9px;border:1px solid #354353;border-radius:8px;background:#151d28;color:#dce4ed;font:12px ui-monospace,monospace;resize:vertical}@media(max-width:560px){.shell{width:calc(100% - 28px);padding:18px 0 max(18px,env(safe-area-inset-bottom))}.brand{font-size:17px}.progress-track{width:48px}.intro{padding:29px 0 19px}.intro h1{font-size:29px}.muted{font-size:12px}.board-wrap{border-radius:12px}.board-hint{font-size:8px;left:11px;bottom:10px}.bottom{padding-top:15px}.comparison{gap:8px}.compare-label{font-size:8px;padding:10px 9px 0}.result-stat b{font-size:25px}button{padding:13px 14px}.level-dots{gap:4px}.level-dots i{width:5px;height:5px}}.header-actions{display:flex;align-items:center;gap:10px}.share-game{padding:6px 0;background:transparent;color:#9caab9;font:500 10px ui-monospace,monospace;white-space:nowrap}.share-game:hover{color:#61e5c2}.game-share-status:empty{display:none}.share-status:empty{min-height:0;padding-top:0}.board-wrap{container-type:inline-size}.distraction-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:2;pointer-events:none;contain:strict}.distractor{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);display:block;opacity:0;pointer-events:none;will-change:transform,opacity;animation-name:distraction-pop;animation-duration:var(--duration);animation-delay:var(--delay);animation-timing-function:cubic-bezier(.2,.7,.25,1);animation-fill-mode:both;animation-play-state:paused;color:var(--tone)}.distraction-layer.is-running .distractor{animation-play-state:running}.distractor:before,.distractor:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.kind-spark-burst,.kind-firework-burst,.kind-fountain-sparks,.kind-star-pop,.kind-confetti-flick,.kind-ember-float,.kind-rising-mote{border-radius:50%;background:radial-gradient(circle,#fff 0 9%,var(--tone) 17% 28%,transparent 68%);box-shadow:0 0 12px color-mix(in srgb,var(--tone),transparent 22%)}.kind-spark-burst:before,.kind-firework-burst:before,.kind-fountain-sparks:before,.kind-star-pop:before,.kind-confetti-flick:before,.kind-ember-float:before,.kind-rising-mote:before{top:28%;right:28%;bottom:28%;left:28%;border-radius:50%;background:var(--tone);box-shadow:-13px -7px 0 -2px var(--tone),13px 4px 0 -3px #fff,-5px 15px 0 -3px var(--tone),10px -14px 0 -4px #fff,-17px 13px 0 -4px var(--tone);transform:scale(var(--particle-scale))}.kind-spark-burst:after,.kind-firework-burst:after,.kind-fountain-sparks:after,.kind-star-pop:after,.kind-confetti-flick:after,.kind-ember-float:after,.kind-rising-mote:after{top:36%;right:36%;bottom:36%;left:36%;border-radius:50%;background:#fff;box-shadow:15px -8px 0 -2px var(--tone),-15px 7px 0 -3px #fff;transform:scale(var(--particle-scale-small))}.kind-star-pop:before{transform:rotate(45deg) scale(var(--particle-scale))}.kind-confetti-flick:before{border-radius:1px;transform:rotate(28deg) scale(var(--particle-scale))}.kind-ember-float,.kind-rising-mote{animation-name:distraction-float}.kind-ember-float{filter:drop-shadow(0 0 5px var(--tone))}.kind-bubble-drift,.kind-bouncing-orb,.kind-orbit-glow{border:1px solid color-mix(in srgb,var(--tone),white 35%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffffaa,transparent 29%),color-mix(in srgb,var(--tone),transparent 80%);box-shadow:0 0 12px color-mix(in srgb,var(--tone),transparent 40%)}.kind-bubble-drift{animation-name:distraction-float}.kind-bouncing-orb{animation-name:distraction-cross}.kind-orbit-glow{animation-name:distraction-orbit}.kind-falling-shard{animation-name:distraction-float}.kind-comet-cross,.kind-sliding-bar,.kind-swoop{width:calc(var(--size)*2.2);height:max(2px,calc(var(--size)*.22));border-radius:50%;background:linear-gradient(90deg,transparent,var(--tone),#fff);box-shadow:0 0 10px var(--tone);animation-name:distraction-cross}.kind-falling-shard,.kind-spinner,.kind-rotating-triangle{clip-path:polygon(50% 0,100% 100%,0 78%);background:linear-gradient(135deg,#fff,var(--tone) 45%,transparent);filter:drop-shadow(0 0 5px var(--tone));animation-name:distraction-spin}.kind-morphing-polygon{clip-path:polygon(50% 0,100% 37%,82% 100%,18% 100%,0 37%);background:linear-gradient(135deg,#fff,var(--tone) 45%,transparent);animation-name:distraction-morph}.kind-zigzag-dot{border-radius:50%;background:radial-gradient(circle,#fff 0 15%,var(--tone) 24% 56%,transparent 70%);animation-name:distraction-zigzag}.kind-wandering-blob{border-radius:42% 58% 61% 39%;background:color-mix(in srgb,var(--tone),transparent 45%);box-shadow:0 0 15px color-mix(in srgb,var(--tone),transparent 35%);animation-name:distraction-orbit}.kind-expanding-ring,.kind-shrinking-ring,.kind-edge-ripple,.kind-corner-ripple,.kind-rotating-arc{border:2px solid var(--tone);border-radius:50%;box-shadow:0 0 9px color-mix(in srgb,var(--tone),transparent 35%);background:transparent;animation-name:distraction-pulse}.kind-rotating-arc{border-right-color:transparent;border-bottom-color:transparent;animation-name:distraction-spin}.kind-pulse-square{border:2px solid var(--tone);border-radius:5px;box-shadow:0 0 8px color-mix(in srgb,var(--tone),transparent 40%);animation-name:distraction-pulse}.kind-corner-flash,.kind-lightning-glimmer{width:clamp(42px,12cqw,100px);height:clamp(42px,12cqw,100px);background:radial-gradient(circle at var(--origin-x,0) var(--origin-y,0),color-mix(in srgb,var(--tone),transparent 48%),transparent 72%);animation-name:distraction-flash}.kind-edge-shimmer{width:clamp(54px,17cqw,140px);height:5px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--tone),#fff,transparent);box-shadow:0 0 10px var(--tone);animation-name:distraction-flash}.kind-vignette-breathe{top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse,transparent 44%,color-mix(in srgb,var(--tone),transparent 92%));animation-name:distraction-wash}.kind-color-wash{top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:color-mix(in srgb,var(--tone),transparent 96%);animation-name:distraction-wash}.kind-spotlight-sweep{width:clamp(90px,24cqw,210px);height:clamp(90px,24cqw,210px);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tone),transparent 84%),transparent 70%);animation-name:distraction-cross}.kind-border-glow{top:3px;right:3px;bottom:3px;left:3px;width:auto;height:auto;border:1px solid color-mix(in srgb,var(--tone),transparent 42%);border-radius:12px;box-shadow:inset 0 0 12px color-mix(in srgb,var(--tone),transparent 80%);animation-name:distraction-pulse}.kind-tiny-decoy,.kind-fake-squiggle,.kind-quick-arc{width:calc(var(--size)*2.6);height:calc(var(--size)*.8);border-top:2px dashed var(--tone);border-radius:50%;filter:drop-shadow(0 0 4px var(--tone));animation-name:distraction-decoy}.kind-fake-squiggle{border-radius:40% 60% 25% 75%;transform:rotate(-28deg)}.kind-quick-arc{border-top-style:solid;border-right:2px solid var(--tone)}@keyframes distraction-pop{0%,to{opacity:0;transform:translateZ(0) scale(.28) rotate(0)}18%{opacity:var(--alpha);transform:translateZ(0) scale(1) rotate(var(--rotation))}72%{opacity:calc(var(--alpha)*.8);transform:translateZ(0) scale(.82) rotate(var(--rotation-end))}}@keyframes distraction-float{0%,to{opacity:0;transform:translateZ(0) scale(.7)}16%,78%{opacity:var(--alpha)}to{transform:translate3d(var(--travel-x),calc(var(--travel-y) - 3.5cqw),0) scale(1.08)}}@keyframes distraction-cross{0%,to{opacity:0;transform:translateZ(0) rotate(var(--rotation)) scale(.72)}15%,78%{opacity:var(--alpha)}to{transform:translate3d(var(--travel-x),var(--travel-y),0) rotate(calc(var(--rotation) + 38deg)) scale(1)}}@keyframes distraction-spin{0%,to{opacity:0;transform:translateZ(0) rotate(0) scale(.6)}18%,78%{opacity:var(--alpha)}to{transform:translate3d(var(--travel-x),var(--travel-y),0) rotate(var(--spin-turn)) scale(1)}}@keyframes distraction-orbit{0%,to{opacity:0;transform:translateZ(0) rotate(0) scale(.8)}18%,78%{opacity:var(--alpha)}to{transform:translate3d(var(--travel-x),var(--travel-y),0) rotate(var(--orbit-turn)) scale(1.08)}}@keyframes distraction-zigzag{0%,to{opacity:0;transform:translateZ(0)}20%{opacity:var(--alpha);transform:translate3d(var(--zig-x),var(--zig-up-y),0)}40%{transform:translate3d(var(--zig-neg-x),var(--zig-y),0)}60%{transform:translate3d(var(--zig-wide-x),var(--zig-small-up-y),0)}80%{opacity:var(--alpha);transform:translate3d(var(--zig-small-neg-x),var(--zig-y),0)}}@keyframes distraction-morph{0%,to{opacity:0;transform:rotate(0) scale(.7);clip-path:polygon(50% 0,100% 37%,82% 100%,18% 100%,0 37%)}20%,75%{opacity:var(--alpha)}50%{transform:rotate(160deg) scale(1.05);clip-path:polygon(50% 0,100% 50%,72% 100%,28% 100%,0 50%)}}@keyframes distraction-pulse{0%,to{opacity:0;transform:scale(.42) rotate(0)}22%{opacity:var(--alpha);transform:scale(1) rotate(18deg)}58%{opacity:calc(var(--alpha)*.68);transform:scale(.76) rotate(0)}}@keyframes distraction-flash{0%,to{opacity:0;transform:scale(.8)}24%{opacity:var(--alpha);transform:scale(1)}66%{opacity:calc(var(--alpha)*.68);transform:scale(1)}}@keyframes distraction-wash{0%,to{opacity:0}20%{opacity:.055}55%{opacity:.035}78%{opacity:0}}@keyframes distraction-decoy{0%,to{opacity:0;transform:translateZ(0) scaleX(.15) rotate(var(--rotation))}20%,72%{opacity:calc(var(--alpha)*.78);transform:translateZ(0) scaleX(1) rotate(var(--rotation))}}@media(prefers-reduced-motion:reduce){.distraction-layer{display:none!important}.distractor{animation:none!important}}