:root{--bg: #ffffff;--ink: #14182f;--muted: #9094a7;--card: #ffffff;--line: #eef0f6;--lavender: #e9e9f8;--lavender-deep: #dcdcf3;--lavender-ink: #4b4a73;--accent: #6d5ef5;--danger: #f43f5e;--shadow: 0 10px 30px rgba(40, 40, 90, .08)}*{box-sizing:border-box}html,body,#root{min-height:100vh;min-height:100dvh}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}.page{width:min(100%,560px);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 14px 0}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 7px;border-bottom:none}.bar-group{display:flex;gap:8px}.icon-btn{width:30px;height:30px;border-radius:50%;border:none;background:#f0f1f8;color:var(--lavender-ink);display:grid;place-items:center;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .15s ease,color .15s ease}.icon-btn:hover:not(:disabled){background:var(--lavender);color:var(--accent)}.icon-btn:active{transform:scale(.92);background:var(--lavender-deep)}.icon-btn:disabled{opacity:.45;cursor:not-allowed}.skip-btn{color:var(--lavender-ink)}.skip-btn:hover:not(:disabled){color:var(--accent);background:var(--lavender)}.skip-pill-btn{padding:10px 18px;color:var(--lavender-ink);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease,background .15s ease,color .15s ease}.skip-pill-btn:hover:not(:disabled){color:var(--accent);background:#fff;box-shadow:0 4px 16px #6d5ef526;transform:translateY(-1px) scale(1.03)}.bouncing{animation:buttonBounce .42s cubic-bezier(.34,1.56,.64,1) both!important}.bouncing svg{animation:skipIconHop .42s cubic-bezier(.34,1.56,.64,1) both}@keyframes buttonBounce{0%{transform:scale(1)}24%{transform:scale(.82) rotate(-3deg)}52%{transform:scale(1.22) rotate(3deg)}74%{transform:scale(.94) rotate(-1deg)}88%{transform:scale(1.06) rotate(.5deg)}to{transform:scale(1) rotate(0)}}@keyframes skipIconHop{0%{transform:translate(0)}24%{transform:translate(-1.5px) scale(.88)}52%{transform:translate(3.5px) scale(1.18)}74%{transform:translate(-.5px) scale(.96)}to{transform:translate(0) scale(1)}}.hearts{display:flex;gap:6px}.game-level{display:grid;place-items:center;line-height:1.05;color:#4f5470;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.game-level.golden{color:#b45309}.game-level .golden-tag{margin-top:3px;font-size:8px;font-weight:800;letter-spacing:.08em;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:1px 6px;border-radius:999px;box-shadow:0 1px 4px #d9770659;animation:pulseGold 2.4s infinite ease-in-out}@keyframes pulseGold{0%,to{transform:scale(1);box-shadow:0 1px 4px #d9770659}50%{transform:scale(1.05);box-shadow:0 2px 8px #f59e0b8c}}.game-level small{margin-top:3px;color:#9ba0b4;font-size:9px;font-weight:700;letter-spacing:.08em}.heart{color:var(--danger);display:grid;place-items:center;transition:transform .2s ease,color .2s ease}.heart.lost{color:#f43f5e38;transform:scale(.85)}.avatar{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2f2f7,#c9c9da);box-shadow:inset 0 0 0 1px #0000000a}.level-progress{height:3px;margin:0 3px 8px;overflow:hidden;border-radius:99px;background:#f0f1f5}.level-progress span{display:block;height:100%;border-radius:inherit;background:#c7cad6;transition:width .35s ease}.tutorial-coach{display:flex;align-items:center;gap:12px;margin:0 3px 10px;padding:10px 12px;border-radius:12px;background:#f4f5ff;color:#333958;box-shadow:0 4px 16px #3b407414;animation:coachIn .28s ease both}.tutorial-coach strong{display:block;font-size:13px}.tutorial-coach p{margin:2px 0 0;color:#737a98;font-size:12px;line-height:1.35}.tutorial-skip{flex:0 0 auto;border:0;border-radius:999px;padding:7px 10px;background:#fff;color:#646b8b;font:700 12px inherit;cursor:pointer}@keyframes coachIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.board-wrap{flex:1;display:grid;align-items:stretch;padding:2px 0 10px}.board-card{position:relative;width:100%;border-radius:0;background:var(--card);border:none;box-shadow:none;overflow:hidden;animation:cardIn .3s ease both}@keyframes cardIn{0%{transform:scale(.985);opacity:0}to{transform:scale(1);opacity:1}}.board-stage{position:relative;width:100%;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}.board-viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.board-motif{fill:#c7cad8;opacity:.3;pointer-events:none}.moon-motif path{fill:none;stroke:#c7cad8;stroke-width:1.2;stroke-dasharray:1 3}.board-svg{width:100%;height:100%;display:block;touch-action:none;cursor:pointer}.board-svg.dragging{cursor:grabbing}.arrow-fly{animation:flyOut .5s cubic-bezier(.5,0,.8,.4) both}@keyframes flyOut{0%{transform:translate(0);opacity:1}to{transform:translate(var(--fx),var(--fy));opacity:0}}.arrow-shake{animation:shake .34s ease both}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-1.2px)}40%{transform:translate(1.2px)}60%{transform:translate(-.9px)}80%{transform:translate(.7px)}}.arrow-hint line,.arrow-hint polyline,.arrow-hint polygon{filter:drop-shadow(0 0 3px rgba(47,107,255,.8));animation:hintPulse .85s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:1}50%{opacity:.45}}.tap-ripple{transform-box:fill-box;transform-origin:center;animation:ripple .5s ease-out both}@keyframes ripple{0%{transform:scale(.25);opacity:1}to{transform:scale(1.7);opacity:0}}.zoom-controls{position:absolute;right:12px;bottom:12px;z-index:15;display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:999px;background:#fffffff0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 18px #28285a1f,0 1px 4px #28285a14;border:1px solid rgba(215,220,240,.9);user-select:none;-webkit-user-select:none;animation:pillFadeIn .25s ease both}.zoom-ctrl-btn{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--lavender-ink);display:grid;place-items:center;cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease}.zoom-ctrl-btn:hover:not(:disabled){background:var(--lavender);color:var(--accent)}.zoom-ctrl-btn:active:not(:disabled){transform:scale(.9)}.zoom-ctrl-btn:disabled{opacity:.32;cursor:not-allowed}.zoom-level-pill{padding:4px 10px;height:28px;border-radius:999px;border:none;background:#f0f1f8;color:var(--lavender-ink);font-size:11px;font-weight:700;font-family:inherit;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease}.zoom-level-pill:hover{background:var(--lavender);color:var(--accent)}.zoom-level-pill:active{transform:scale(.95)}.zoom-level-pill.active{background:var(--accent);color:#fff}.zoom-level-pill.active small{background:#ffffff42;color:#fff;padding:1px 5px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}@keyframes pillFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.footer-band{margin:0 -14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#f7f8fc;border-top:1px solid #f0f1f5;display:flex;align-items:center;justify-content:space-between;gap:12px}.pill-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:10px 16px;background:#fff;color:var(--lavender-ink);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 3px 12px #28285a1a;transition:transform .08s ease,opacity .15s ease}.pill-btn:active{transform:scale(.96)}.pill-btn:disabled{opacity:.45;cursor:not-allowed}.pill-btn .badge{background:var(--accent);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px}.left-count{color:var(--lavender-ink);font-size:14px;font-weight:600;opacity:.85}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#fafafdb8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .22s ease both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-card{position:relative;width:min(86%,320px);background:#fff;color:var(--ink);border-radius:22px;padding:26px 22px 22px;text-align:center;box-shadow:0 18px 50px #28285a2e;animation:popIn .32s cubic-bezier(.2,.9,.3,1.35) both;overflow:hidden}@keyframes popIn{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.overlay-card h2{margin:0 0 6px;font-size:22px}.overlay-card p{margin:0 0 18px;color:var(--muted);font-size:14px}.overlay-actions{display:grid;gap:10px}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;opacity:0;animation:confettiFall 1.6s ease-in both}.confetti i:nth-child(2n){width:7px;height:7px;border-radius:50%}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(380px) rotate(300deg);opacity:0}}.btn{border:none;border-radius:14px;padding:13px 20px;font-size:15px;font-weight:800;color:#fff;background:var(--accent);cursor:pointer;transition:transform .08s ease,filter .15s ease}.btn:active{transform:scale(.97);filter:brightness(1.05)}.btn.secondary{background:var(--lavender);color:var(--lavender-ink)}.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.home-logo{width:120px;height:120px;border-radius:34px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow);animation:floaty 3.2s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.home h1{font-size:34px;margin:18px 0 4px;letter-spacing:.01em;color:var(--ink)}.tagline{color:var(--muted);margin:0 0 26px;font-size:15px}.home-actions{display:grid;gap:12px;width:min(100%,280px)}.page-title{font-size:22px;font-weight:800;margin:14px 0 2px}.page-sub{color:var(--muted);font-size:13px;margin:0}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}.level-tile{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;font-weight:800;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:transform .08s ease,background .15s ease}.board-svg line,.board-svg polyline{shape-rendering:geometricPrecision}.level-tile:active{transform:scale(.94)}.level-tile .tick{font-size:12px;color:#0ea5a3}.level-tile.done{background:#e8faf6;border-color:#9fe8dc}.level-tile.skipped{background:#f8f7fe;border-color:#d6d3f8}.level-tile .skip-mark{font-size:13px;font-weight:800;line-height:1;color:var(--accent)}.level-tile.locked{opacity:.4;cursor:not-allowed}.level-tile.golden{background:linear-gradient(135deg,#fffbeb,#fef3c7,#fde68a);border:1.5px solid #f59e0b;color:#92400e;box-shadow:0 0 14px #f59e0b59;position:relative}.level-tile.golden.done{background:linear-gradient(135deg,#fef3c7,#d1fae5);border-color:#10b981}.level-tile .golden-star{position:absolute;top:-4px;right:-4px;background:#f59e0b;color:#fff;font-size:9px;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #0003}.reset-row{margin-top:auto;padding:26px 0 calc(16px + env(safe-area-inset-bottom));text-align:center}.link-btn{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:13px;font-family:inherit;cursor:pointer}.home-sound-bar{display:flex;gap:10px;justify-content:flex-end;padding:4px 0}.sound-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--lavender-ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s ease,background .15s ease,color .15s ease}.sound-toggle:active{transform:scale(.92)}.sound-toggle:not(.on){background:var(--lavender);color:var(--muted)}.sound-toggle.on{color:var(--accent)}@media (max-width: 400px){.icon-btn,.avatar{width:34px;height:34px}.heart svg,.heart{transform-origin:center}.pill-btn{padding:9px 13px;font-size:13px}.level-grid{gap:9px}}@media (min-width: 700px){.page{max-width:640px}.board-svg{cursor:pointer}body{font-size:16px}.level-grid{max-width:520px;margin-left:0;margin-right:0}}@media (min-width: 1100px){.page{max-width:680px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes arrowBuildDrop{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.arrow-anim-fast{animation:arrowBuildDrop .25s cubic-bezier(.16,1,.3,1) both}.arrow-anim-slow{animation:arrowBuildDrop .5s cubic-bezier(.16,1,.3,1) both}