:root{--cream: #f4ece1;--cream-deep: rgba(58, 46, 74, .1);--disc: #fff8ee;--band-a: #f3e4cd;--band-b: #fdf4e6;--wall: #4a3f5c;--ink: #3a2e4a;--ink-soft: #7c7089;--ball: #ffd166;--hole: #2b2434;--accent: #ef8a76;--mint: #6bcb9b;--gold: #d99b2c;--gold-soft: #f2c667;--blob-a: #efe0cc;--blob-b: #f8e6cd;--radius: 16px;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background:var(--cream);transition:background .9s ease;color:var(--ink);font-family:ui-rounded,SF Pro Rounded,Nunito,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}svg,img{-webkit-user-drag:none;user-select:none}.game ::selection{background:transparent}.game ::-moz-selection{background:transparent}.game{height:100%;max-width:620px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto 1fr auto;gap:8px;touch-action:none}.game.dragging .board{transform:scale(1.012)}.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(38px);opacity:.85;transition:background .9s ease}.blob-1{width:74vw;height:74vw;top:-16vw;left:-22vw;background:var(--blob-a);animation:drift-a 26s ease-in-out infinite}.blob-2{width:62vw;height:62vw;bottom:-14vw;right:-18vw;background:var(--blob-b);animation:drift-b 31s ease-in-out infinite}.blob-3{width:44vw;height:44vw;top:42%;left:-14vw;background:var(--blob-b);opacity:.55;animation:drift-a 37s ease-in-out infinite reverse}@keyframes drift-a{0%,to{transform:translate(0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.08)}}@keyframes drift-b{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-5vw,-5vh) scale(1.06)}}.hud-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.hud-side{display:flex;gap:6px}.hud-side-end{justify-content:flex-end}.wordmark{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--ink)}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:none;border-radius:12px;background:var(--cream-deep);color:var(--ink);fill:currentColor;cursor:pointer;transition:transform .12s ease,background .16s ease}.icon-btn:active{transform:scale(.92)}.stats{display:flex;justify-content:center;gap:18px;margin-top:6px;font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.stat b{color:var(--ink);font-weight:700}.stat i{font-style:normal;opacity:.65;margin-right:3px}.pips{display:flex;justify-content:center;gap:5px;margin-top:7px;height:6px}.pip{width:22px;height:6px;border-radius:999px;background:var(--cream-deep);transition:background .2s ease,transform .26s cubic-bezier(.2,1.6,.4,1)}.pip-on{background:var(--accent);transform:scaleY(1.35)}.key-pips{display:inline-flex;align-items:center;gap:3px;margin-left:8px}.key-pip{color:#c4b19b;transition:color .26s ease,transform .3s cubic-bezier(.2,1.6,.4,1)}.key-pip-on{color:var(--gold);transform:scale(1.22)}.key-pip-hint{animation:key-pip-hint .62s ease-out 2}@keyframes key-pip-hint{0%,to{color:#c4b19b;transform:scale(1)}25%{color:var(--gold);transform:scale(1.45)}55%{color:var(--gold);transform:scale(1.1)}}.stage{position:relative;display:grid;place-items:center;min-height:0}.board{width:min(100%,76vh);height:auto;max-height:100%;touch-action:none;cursor:grab;display:block;overflow:visible;transition:transform .18s cubic-bezier(.2,1,.3,1)}.board:active{cursor:grabbing}.disc{fill:var(--disc)}.stage:before{content:"";position:absolute;top:50%;left:50%;width:min(100%,76vh);aspect-ratio:1;transform:translate(-50%,-50%) scale(.95);border-radius:50%;box-shadow:0 12px 26px #3a2e4a26;pointer-events:none;transition:transform .18s cubic-bezier(.2,1,.3,1)}.game.dragging .stage:before{transform:translate(-50%,-50%) scale(.962)}.band-a{fill:var(--band-a)}.band-b{fill:var(--band-b)}.walls path{fill:none;stroke:var(--wall);stroke-linecap:round;stroke-linejoin:round}.hole{fill:var(--hole)}.gate{fill:none;stroke:var(--gold);stroke-linecap:round;stroke-linejoin:round;animation:gate-breathe 1.9s ease-in-out infinite;transition:opacity .42s ease,stroke-width .42s cubic-bezier(.3,0,.2,1)}@keyframes gate-breathe{0%,to{stroke:var(--gold)}50%{stroke:var(--gold-soft)}}.key-art{transition:transform .32s cubic-bezier(.3,1.5,.5,1),opacity .28s ease;transform-box:fill-box;transform-origin:50% 50%}.key-glow{fill:var(--gold-soft);opacity:.16;animation:key-pulse 2.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}.key-ring{fill:none;stroke:var(--gold-soft);stroke-width:.7;stroke-dasharray:3 4;opacity:.75;animation:key-spin 9s linear infinite;transform-box:fill-box;transform-origin:50% 50%}.key-orbit{animation:key-spin 3.6s linear infinite;transform-box:fill-box;transform-origin:50% 50%}.key-mote{fill:var(--gold-soft)}.key-body{animation:key-bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}.key-metal{fill:var(--gold)}.key-eye{fill:var(--band-b)}.key-shine{fill:#fff3d6;opacity:.75}.key-near-0 .key-0,.key-near-1 .key-1{transform:scale(1.28)}.key-near-0 .key-0 .key-glow,.key-near-1 .key-1 .key-glow{opacity:.42}.key-near-0 .key-0 .key-orbit,.key-near-1 .key-1 .key-orbit{animation-duration:1.1s}@keyframes key-pulse{0%,to{transform:scale(.88);opacity:.14}50%{transform:scale(1.1);opacity:.3}}@keyframes key-spin{to{transform:rotate(360deg)}}@keyframes key-bob{0%,to{transform:rotate(-7deg) scale(1)}50%{transform:rotate(7deg) scale(1.04)}}.gate-bump .gates{animation:gate-shove .34s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}.gate-bump .gate{stroke:var(--gold-soft)}@keyframes gate-shove{0%{transform:scale(1)}35%{transform:scale(1.022)}to{transform:scale(1)}}.key-flash{fill:none;stroke:var(--gold-soft);pointer-events:none}.key-fly{position:fixed;top:0;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;pointer-events:none;z-index:8;filter:drop-shadow(0 3px 6px rgba(217,155,44,.45))}.gate-open-0 .gate-0,.gate-open-1 .gate-1{opacity:0;stroke-width:.5!important}.key-got-0 .key-0,.key-got-1 .key-1{opacity:0;transform:scale(.2);transition:transform .15s ease-in,opacity .13s ease-in}.disc-plate{fill:var(--band-b);stroke:#3a2e4a21;stroke-width:1.2;filter:drop-shadow(0 2px 3px rgba(58,46,74,.16))}.hole-lip{fill:none;stroke:#fff;stroke-opacity:.14;stroke-width:1.4}.hole-halo{fill:none;stroke:var(--ball);stroke-width:2.4}.drag-arc{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round;pointer-events:none}.ring-flash{fill:none;stroke:var(--ball);pointer-events:none}.ball-eyes,.ball-eyes-blink,.mouth-calm,.mouth-woo{transform-box:fill-box;transform-origin:50% 50%}.ball-eyes-blink{animation:ball-blink 5.4s infinite}@keyframes ball-blink{0%,93.5%,to{transform:scaleY(1)}95.2%,96.2%{transform:scaleY(.08)}97.6%{transform:scaleY(1)}}.mouth-woo{opacity:0}.ball-woo .ball-eyes{transform:scale(1.16)}.ball-woo .mouth-calm{opacity:0}.ball-woo .mouth-woo{opacity:1}.ball-eyes,.mouth-calm,.mouth-woo{transition:opacity .11s ease,transform .14s ease}@media (prefers-reduced-motion: reduce){.ball-eyes-blink{animation:none}}.ball-body{fill:var(--ball);stroke:#e9b53f;stroke-width:.6}.ball-eye{fill:var(--ink)}.ball-smile{fill:none;stroke:var(--ink);stroke-linecap:round}.hint{position:absolute;bottom:-2%;white-space:nowrap;left:50%;transform:translate(-50%);padding:8px 14px;border-radius:999px;background:#3a2e4adb;color:#fff8ee;font-size:13px;font-weight:600;letter-spacing:.01em;pointer-events:none;animation:breathe 2.2s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.55;transform:translate(-50%) scale(.98)}50%{opacity:1;transform:translate(-50%) scale(1.02)}}.puck{position:fixed;top:0;left:0;width:0;height:0;margin:-27px 0 0 -27px;border:2.5px solid rgba(239,138,118,.9);border-radius:50%;opacity:0;pointer-events:none;z-index:5;transition:opacity .2s ease}.game.dragging .puck{width:54px;height:54px;background:#ffd16629}.controls{display:flex;gap:10px}.btn{flex:1;min-height:52px;border:none;border-radius:var(--radius);background:var(--cream-deep);color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:transform .12s ease,opacity .16s ease,background .16s ease}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:default}.btn-primary{background:var(--ink);color:var(--disc)}.btn-ghost{flex:0 0 34%;background:transparent;color:var(--ink-soft);box-shadow:inset 0 0 0 2px var(--cream-deep)}.btn-wide{width:100%;margin-top:4px}.celebrate{position:fixed;inset:0;z-index:10;display:grid;place-items:center;cursor:pointer}.celebrate-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#ffe9a8d9,#ffe9a800 62%);animation:flash .62s ease-out both;pointer-events:none}.celebrate-body{position:relative;text-align:center;transform:translateY(-4vh);pointer-events:none;padding:26px 30px 30px;max-width:100%;background:radial-gradient(closest-side,#fff8eef5,#fff8eedb 62%,#fff8ee00)}.praise{margin:0;font-size:clamp(36px,12.5vw,66px);font-weight:900;letter-spacing:-.03em;color:var(--ink);text-shadow:0 3px 0 rgba(255,255,255,.9),0 12px 26px rgba(58,46,74,.18);animation:praise-pop .52s cubic-bezier(.18,1.5,.4,1) both}.celebrate-time{margin:2px 0 0;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);text-shadow:0 0 9px rgba(255,248,238,.98),0 0 18px rgba(255,248,238,.95),0 0 30px rgba(255,248,238,.8);animation:rise .42s cubic-bezier(.2,1.1,.4,1) .11s both}.celebrate-time .unit{font-size:15px;font-weight:700;opacity:.66;margin-left:-2px}.streak{margin:8px 0 0;font-size:14px;font-weight:700;color:var(--ink);text-shadow:0 0 8px rgba(255,248,238,.98),0 0 16px rgba(255,248,238,.92);animation:rise .42s cubic-bezier(.2,1.1,.4,1) .2s both}.streak b{display:inline-block;min-width:26px;padding:2px 8px;margin-right:4px;border-radius:999px;background:var(--accent);color:#fff8ee;font-size:15px}.tag{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;background:var(--mint);color:#143d2a;font-size:11px;font-weight:800;vertical-align:middle;letter-spacing:.04em;text-transform:uppercase;animation:stamp .38s cubic-bezier(.2,1.6,.4,1) .22s both}.stage-won .board{animation:board-cheer .62s cubic-bezier(.25,1.2,.4,1) both}@keyframes flash{0%{opacity:.95}to{opacity:0}}@keyframes praise-pop{0%{opacity:0;transform:scale(.4) rotate(-7deg)}70%{opacity:1;transform:scale(1.06) rotate(1.5deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(-4deg)}}@keyframes board-cheer{0%{transform:scale(1)}35%{transform:scale(1.045)}to{transform:scale(1)}}@keyframes fade{0%{opacity:0}}.howto-wrap{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#f4ece1db;backdrop-filter:blur(4px);animation:fade .22s ease both}.howto{width:min(360px,100%);background:var(--disc);border-radius:26px;padding:20px 22px;text-align:center;box-shadow:0 18px 44px #3a2e4a2e;animation:pop .34s cubic-bezier(.2,1.3,.4,1) both}.howto h2{margin:10px 0 0;font-size:22px;letter-spacing:-.02em}.howto-art{width:132px;height:132px;display:block;margin:0 auto}.howto-disc{fill:var(--band-b)}.howto-hole{fill:var(--hole)}.howto-wall{fill:none;stroke:var(--wall);stroke-width:5;stroke-linecap:round}.howto-ball{fill:var(--ball);stroke:#e9b53f;stroke-width:1}.howto-carry,.howto-drop{transform-box:view-box;transform-origin:50% 50%}.howto-carry{animation:howto-carry 4.6s cubic-bezier(.5,0,.5,1) infinite}.howto-drop{animation:howto-drop 4.6s cubic-bezier(.4,0,.6,1) infinite}.howto-arrowline{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:150;animation:howto-trace 4.6s ease-in-out infinite}.howto-arrowhead{fill:var(--accent)}.howto-steps{margin:14px 0 18px;padding:0;list-style:none;text-align:left;counter-reset:step}.howto-steps li{position:relative;padding:0 0 0 32px;margin-bottom:11px;font-size:14.5px;line-height:1.42;color:var(--ink-soft);counter-increment:step}.howto-steps li b{color:var(--ink)}.howto-steps li:before{content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--band-a);color:var(--ink);font-size:12px;font-weight:800}@keyframes howto-carry{0%,8%{transform:rotate(0)}52%,to{transform:rotate(180deg)}}@keyframes howto-drop{0%,58%{transform:translateY(0);opacity:1}76%,86%{transform:translateY(-40px);opacity:1}94%,to{transform:translateY(-40px);opacity:0}}@keyframes howto-trace{0%,6%{stroke-dashoffset:150}50%,to{stroke-dashoffset:0}}.sheet-wrap{position:fixed;inset:0;z-index:20;display:grid;align-items:end;justify-items:center;background:#3a2e4a52;animation:fade .2s ease both}.sheet{width:min(560px,100%);background:var(--disc);border-radius:24px 24px 0 0;padding:18px 18px max(18px,env(safe-area-inset-bottom));animation:slideUp .26s cubic-bezier(.2,1,.3,1) both;max-height:82vh;overflow-y:auto}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.sheet-head h2{margin:0;font-size:18px}@keyframes slideUp{0%{transform:translateY(24px);opacity:0}}.map-wrap{align-items:stretch}.map-sheet{display:flex;flex-direction:column;height:100%;max-height:none;border-radius:0;padding:max(14px,env(safe-area-inset-top)) 18px 0;overflow:hidden}.map-head{flex:0 0 auto;padding-bottom:10px}.map-progress{display:flex;align-items:center;gap:10px}.map-bar{flex:1;height:8px;border-radius:999px;background:var(--cream-deep);overflow:hidden}.map-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .5s cubic-bezier(.2,1,.3,1)}.map-count{font-size:12px;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}.map-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -18px;padding:0 18px max(18px,env(safe-area-inset-bottom))}.map-inner{position:relative}.map-zone{position:absolute;left:-18px;right:-18px;opacity:.8}.map-zone-done{opacity:1}.map-zone-name{position:absolute;bottom:12px;left:22px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);opacity:.42;text-shadow:0 0 6px var(--bg),0 0 12px var(--bg)}.map-trail{position:absolute;inset:0;width:100%;height:100%}.map-trail-case,.map-trail-bed,.map-trail-done,.map-trail-dash{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.map-trail-case{stroke:#3a2e4a1a;stroke-width:22}.map-trail-bed{stroke:var(--disc);stroke-width:16}.map-trail-done{stroke:var(--mint);stroke-width:16;transition:stroke-dashoffset .7s cubic-bezier(.2,1,.3,1)}.map-trail-dash{stroke:#3a2e4a29;stroke-width:2;stroke-dasharray:5 11}.map-node{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px}.map-dot{width:56px;height:56px;border:none;border-radius:50%;background:var(--disc);color:var(--ink);font:inherit;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px #3a2e4a29;transition:transform .14s cubic-bezier(.2,1.6,.4,1)}.map-dot:active:not(:disabled){transform:scale(.92)}.map-n{font-size:19px;font-weight:800}.map-dot-done{background:var(--mint);color:#143d2a;box-shadow:0 3px #143d2a38}.map-dot-current{background:var(--accent);color:#fff8ee;width:64px;height:64px;box-shadow:0 4px #3a2e4a33,0 0 0 5px #ef8a763d;animation:map-beat 1.9s ease-in-out infinite}.map-dot-current .map-n{font-size:22px}.map-dot-locked{background:#fff8eed1;color:#a2917d;box-shadow:0 2px #3a2e4a12;cursor:default}.map-dot-endless{background:var(--ink);color:var(--disc)}.map-time{font-size:10px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}.map-you{position:absolute;top:-40px;display:grid;place-items:center;filter:drop-shadow(0 3px 4px rgba(58,46,74,.28));animation:map-hop 1.9s ease-in-out infinite;pointer-events:none}.map-prize{position:absolute;left:46px;top:-6px;display:grid;place-items:center;padding:4px;border-radius:50%;background:var(--disc);box-shadow:0 2px 8px #3a2e4a29;filter:grayscale(1);opacity:.45}.map-prize-won{filter:none;opacity:1;box-shadow:0 2px 10px #d99b2c73}.map-summit{position:absolute;left:0;right:0;text-align:center;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}@keyframes map-beat{0%,to{box-shadow:0 4px #3a2e4a33,0 0 0 5px #ef8a763d}50%{box-shadow:0 4px #3a2e4a33,0 0 0 13px #ef8a7612}}@keyframes map-hop{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.shop-count{font-size:12px;font-weight:800;color:var(--ink-soft);margin-left:4px}.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.shop-tile{position:relative;border:none;border-radius:18px;background:var(--band-b);color:var(--ink);font:inherit;padding:12px 6px 10px;cursor:pointer;display:grid;justify-items:center;gap:2px;transition:transform .14s cubic-bezier(.2,1.6,.4,1),background .2s ease}.shop-tile:active:not(:disabled){transform:scale(.94)}.shop-tile-on{background:var(--band-a);outline:2.5px solid var(--accent);outline-offset:-2.5px}.shop-tile-locked{cursor:default}.shop-tile-locked .shop-art{filter:grayscale(1);opacity:.32}.shop-name{font-size:12.5px;font-weight:800}.shop-tag{font-size:10.5px;color:var(--ink-soft)}.shop-lock{position:absolute;top:8px;right:8px;color:#b7a693}.unlock{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;padding:7px 14px 7px 8px;border-radius:999px;background:var(--gold);color:#fff8ee;animation:stamp .42s cubic-bezier(.2,1.6,.4,1) .26s both}.unlock-art{display:grid;place-items:center;animation:hop .7s cubic-bezier(.3,1.4,.4,1) .3s both}.unlock-text{font-size:13.5px;font-weight:700;letter-spacing:.01em}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}