@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap";:root{color:#f4f7fb;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#38bdf81f,#0000 30%),linear-gradient(#08111f 0%,#030712 60%,#02040a 100%);font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%;min-height:100%;overflow:hidden}body{background:radial-gradient(circle at top,#38bdf824,#0000 26%),radial-gradient(circle at 88% 16%,#34d3991a,#0000 18%),linear-gradient(#08111f 0%,#030712 60%,#02040a 100%);margin:0}button,input,textarea,select{font:inherit}button{border:0}.app-shell{width:100%;height:100dvh;padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));position:relative;overflow:hidden}.ambient{pointer-events:none;filter:blur(24px);opacity:.5;border-radius:999px;position:absolute}.ambient-left{background:radial-gradient(circle,#38bdf83d,#0000 70%);width:180px;height:180px;top:-60px;left:-90px}.ambient-right{background:radial-gradient(circle,#34d39938,#0000 72%);width:170px;height:170px;bottom:120px;right:-70px}.game-frame{z-index:1;background:linear-gradient(#080f1cf0,#050a14eb),linear-gradient(135deg,#ffffff0f,#0000 32%);border:1px solid #94a3b824;border-radius:24px;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:6px;width:min(100%,460px);height:100%;margin:0 auto;padding:8px;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 48px #02061780,inset 0 1px #ffffff0d}.topbar,.status-strip,.level-ribbon,.board-stage,.rule-panel,.controls-panel,.tutorial-modal{background:linear-gradient(#0f172abd,#080f1ce6);border:1px solid #94a3b81f;box-shadow:inset 0 1px #ffffff0a}.topbar{border-radius:18px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;display:grid}.brand-kicker,.level-chip span,.ghost-button,.control-hint,.panel-kicker,.points-pill span,.gravity-pill span,.tutorial-kicker,.primary-action small{text-transform:uppercase;letter-spacing:.08em}.brand-kicker{color:#7dd3fc;margin-bottom:2px;font-size:.62rem;font-weight:700;display:block}.brand-block h1{letter-spacing:-.04em;margin:0;font-family:Space Grotesk,Inter,system-ui,sans-serif;font-size:1.02rem;line-height:1.02}.topbar-actions{align-items:center;gap:5px;display:flex}.level-chip{text-align:center;background:#ffffff0a;border:1px solid #94a3b829;border-radius:12px;min-width:62px;padding:5px 7px}.level-chip span{color:#94a3b8db;font-size:.5rem;display:block}.level-chip strong{margin-top:2px;font-size:.7rem;font-weight:700;display:block}.level-chip.is-win{border-color:#4ade8052}.level-chip.is-fail{border-color:#fb718557}.ghost-button,.secondary-action{color:#cbd5e1;cursor:pointer;background:#ffffff0d;border-radius:12px;padding:7px 9px}.ghost-button{font-size:.54rem;font-weight:700}.secondary-action{font-size:.68rem;font-weight:700}.status-strip{border-radius:16px;align-items:center;gap:8px;min-height:34px;padding:7px 9px;display:flex}.status-strip p{color:#e2e8f0db;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.7rem;line-height:1.2;overflow:hidden}.status-dot{background:#7dd3fc;border-radius:999px;flex:none;width:8px;height:8px;box-shadow:0 0 0 6px #7dd3fc1a}.tone-gravity .status-dot,.tone-accent .status-dot{background:#c084fc;box-shadow:0 0 0 6px #c084fc1a}.tone-win .status-dot,.tone-success .status-dot{background:#4ade80;box-shadow:0 0 0 6px #4ade801a}.tone-blocked .status-dot{background:#fb7185;box-shadow:0 0 0 6px #fb71851a}.tone-fail .status-dot{background:#f97316;box-shadow:0 0 0 6px #f973161f}.level-ribbon{border-radius:16px;gap:6px;padding:8px;display:grid}.level-copy{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.level-name{font-family:Space Grotesk,Inter,system-ui,sans-serif;font-size:.88rem;font-weight:700}.level-copy small{color:#94a3b8d1;font-size:.58rem}.level-tabs{grid-template-columns:repeat(15,minmax(0,1fr));gap:4px;display:grid}.level-tab{color:#cbd5e1c7;background:#ffffff0a;border-radius:8px;min-width:0;height:24px;font-size:.56rem;font-weight:700}.level-tab.is-active{color:#f8fafc;background:linear-gradient(135deg,#67e8f94d,#34d39940);box-shadow:0 0 16px #38bdf829}.level-tab.is-locked{opacity:.35}.board-stage{background:radial-gradient(circle at top,#38bdf814,#0000 44%),linear-gradient(#040912cc,#080f1cf0);border-radius:20px;place-items:center;min-height:0;padding:6px;display:grid}.grid-shell{touch-action:none;-webkit-user-select:none;user-select:none;justify-items:center;gap:8px;width:100%;display:grid}.grid-board{--board-size:min(84vw, 45vh, 360px);--cell-gap:clamp(5px, 1.4vw, 8px);gap:var(--cell-gap);width:var(--board-size);height:var(--board-size);background:linear-gradient(#0a1322eb,#050a14f5),linear-gradient(135deg,#ffffff0a,#0000 28%);border-radius:22px;place-items:stretch stretch;padding:4px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff0a,0 14px 32px #02061742}.grid-board.tone-blocked{animation:.32s board-shake}.grid-board.tone-gravity .board-flash{animation:.42s flash-gravity}.grid-board.tone-win .board-flash{animation:.56s flash-win}.board-flash{pointer-events:none;border-radius:22px;position:absolute;inset:4px}.grid-tile{aspect-ratio:1;opacity:0;border:1px solid #ffffff0d;border-radius:clamp(14px,4vw,22px);width:100%;min-width:0;height:100%;min-height:0;animation:.42s cubic-bezier(.16,1,.3,1) forwards tile-enter;position:relative;overflow:hidden;transform:translateY(6px)scale(.98)}.grid-tile:before{content:"";background:linear-gradient(#ffffff14,#0000 48%);position:absolute;inset:0}.tile-floor{background:radial-gradient(circle at 28% 22%,#38bdf81a,#0000 42%),linear-gradient(#142034f5,#09101cfa)}.tile-wall{background:linear-gradient(#3d485bfa,#111827fa),linear-gradient(135deg,#ffffff14,#0000 56%)}.tile-goal{background:radial-gradient(circle,#22c55e38,#0000 60%),linear-gradient(#0d554ce0,#054032f5);border-color:#4ade8057;box-shadow:0 0 24px #22c55e2e}.tile-gate-up{background:radial-gradient(circle,#c084fc2e,#0000 58%),linear-gradient(#492075e6,#20123afa);border-color:#c084fc52}.tile-gate-down{background:radial-gradient(circle,#38bdf829,#0000 58%),linear-gradient(#0f4968e6,#0b1f3afa);border-color:#38bdf84d}.tile-trap{background:radial-gradient(circle,#fb71852e,#0000 58%),linear-gradient(#721c38f0,#3a121ffa);border-color:#fb71854d}.tile-door{background:radial-gradient(circle,#facc151f,#0000 58%),linear-gradient(#5f4312f0,#33240cfa);border-color:#facc154d}.tile-switch{background:radial-gradient(circle,#22c55e29,#0000 58%),linear-gradient(#125136f0,#0a2e1ffa);border-color:#22c55e4d}.tile-teleport{background:radial-gradient(circle,#f472b629,#0000 58%),linear-gradient(#641e4cf0,#351129fa);border-color:#f472b64d}.tile-one-way{background:radial-gradient(circle,#94a3b81f,#0000 58%),linear-gradient(#263246f0,#141c2afa);border-color:#94a3b84d}.tile-reachable{box-shadow:0 0 0 1px #67e8f938,0 0 18px #38bdf81f}.tile-inner{place-items:center;width:100%;height:100%;display:grid;position:relative}.tile-has-player{z-index:1}.tile-coordinate{color:#cbd5e180;font-size:.5rem;font-weight:700;position:absolute;top:5px;left:6px}.goal-icon{color:#dcfce7f5;filter:drop-shadow(0 0 10px #4ade8059);width:46%;height:46%;animation:2.4s ease-in-out infinite goal-pulse}.goal-icon.is-occupied{opacity:.85;filter:none;width:22%;height:22%;animation:none;position:absolute;top:6px;right:6px}.gate-mark{letter-spacing:.08em;border-radius:14px;place-items:center;width:54%;height:54%;font-size:.66rem;font-weight:800;display:grid;box-shadow:inset 0 1px #ffffff14}.gate-up{color:#f5d0fe;background:#d8b4fe33}.gate-down{color:#dff7ff;background:#7dd3fc29}.trap-mark,.door-mark,.switch-mark,.teleport-mark,.one-way-mark{letter-spacing:.08em;border-radius:14px;place-items:center;min-width:54%;height:54%;padding:0 6px;font-size:.66rem;font-weight:800;display:grid;box-shadow:inset 0 1px #ffffff14}.trap-mark{color:#fecdd3;background:#fb718533}.door-mark{color:#fde68a;background:#facc1529}.switch-mark{color:#bbf7d0;background:#22c55e2e}.teleport-mark{color:#fbcfe8;background:#f472b62e}.one-way-mark{color:#e2e8f0;background:#94a3b82e}.gate-mark.is-occupied,.trap-mark.is-occupied,.door-mark.is-occupied,.switch-mark.is-occupied,.teleport-mark.is-occupied,.one-way-mark.is-occupied{opacity:.9;border-radius:9px;width:auto;min-width:28%;height:24%;min-height:24%;padding:0 4px;font-size:.42rem;line-height:1;position:absolute;top:6px;right:6px}.tile-wall-mark{background:linear-gradient(135deg,#ffffff1f,#0000),repeating-linear-gradient(135deg,#94a3b829 0 5px,#0000 5px 10px);border:1px solid #ffffff14;border-radius:16px;width:66%;height:66%}.player-core{z-index:2;background:radial-gradient(circle at top,#0ea5e94d,#0000 56%),linear-gradient(#12566cf0,#08223afa);border:1px solid #7dd3fc75;border-radius:clamp(14px,4vw,22px);place-items:center;width:68%;height:68%;transition:transform .18s;display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 1px #38bdf81a,0 0 24px #38bdf857}.player-core.is-moving{transform:scale(1.04)}.grid-board.is-won .player-core{animation:.7s player-win}.player-core span{background:radial-gradient(circle,#e0f2fef5,#7dd3fce0);border-radius:999px;width:40%;height:40%}.player-core small{color:#dff7ff;letter-spacing:.08em;font-size:.56rem;font-weight:800;position:absolute;bottom:4px}.grid-hint{color:#94a3b8cc;text-transform:uppercase;letter-spacing:.08em;text-align:center;margin:0;font-size:.52rem}.bottom-dock{grid-template-columns:132px minmax(0,1fr);align-items:stretch;gap:6px;display:grid}.rule-panel,.controls-panel{border-radius:18px;padding:8px}.rule-panel{gap:6px;display:grid}.rule-header{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.panel-kicker{color:#7dd3fc;margin-bottom:3px;font-size:.5rem;font-weight:700;display:block}.rule-header h2{margin:0;font-family:Space Grotesk,Inter,system-ui,sans-serif;font-size:.82rem;line-height:1.05}.rule-state-chip{text-transform:uppercase;letter-spacing:.08em;color:#e2e8f0e0;background:#ffffff0a;border:1px solid #94a3b824;border-radius:10px;padding:6px 8px;font-size:.54rem;font-weight:700}.rule-state-chip.is-win{color:#bbf7d0;border-color:#4ade8052}.rule-state-chip.is-fail{color:#fdba74;border-color:#f9731657}.rule-summary{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.constraint-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.constraint-card{background:#ffffff0a;border:1px solid #94a3b81f;border-radius:12px;padding:7px 8px}.constraint-card span{color:#94a3b8d6;text-transform:uppercase;letter-spacing:.08em;font-size:.48rem;display:block}.constraint-card strong{margin-top:2px;font-size:.72rem;line-height:1.1;display:block}.gravity-pill,.points-pill{background:#ffffff0a;border:1px solid #94a3b81f;border-radius:14px;align-items:center;gap:6px;min-width:0;padding:7px 8px;display:flex}.gravity-icon{text-align:center;border-radius:12px;flex:none;place-items:center;width:28px;height:28px;padding-left:1px;font-size:.62rem;font-weight:800;line-height:1;display:grid}.gravity-up .gravity-icon{color:#e9d5ff;background:#c084fc2e}.gravity-down .gravity-icon{color:#bae6fd;background:#38bdf829}.gravity-pill span,.points-pill span{color:#94a3b8d6;font-size:.48rem;display:block}.gravity-pill strong,.points-pill strong{margin-top:1px;font-size:.72rem;line-height:1.05;display:block}.points-pill{text-align:center;justify-content:center;min-width:58px}.point-meter{gap:6px;display:flex}.meter-dot{background:#334155e6;border-radius:999px;flex:1;height:6px}.meter-dot.active{background:linear-gradient(90deg,#38bdf8,#34d399);box-shadow:0 0 14px #34d3993d}.rule-actions{grid-template-columns:minmax(0,1fr) auto auto;gap:6px;display:grid}.primary-action{cursor:pointer;color:#04111f;background:linear-gradient(135deg,#67e8f9,#34d399);border-radius:14px;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:38px;padding:8px 10px;display:flex;box-shadow:0 14px 24px #0ea5e92e,0 0 24px #34d39924}.primary-action:disabled{opacity:.52;cursor:not-allowed;box-shadow:none}.primary-action span{font-family:Space Grotesk,Inter,system-ui,sans-serif;font-size:.8rem;font-weight:700}.primary-action small{color:#080f1cb8;font-size:.48rem}.controls-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.controls-header span{font-family:Space Grotesk,Inter,system-ui,sans-serif;font-size:.8rem;font-weight:700}.controls-header small{color:#94a3b8d1;text-transform:uppercase;letter-spacing:.08em;font-size:.52rem}.dpad-shell{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:".up.""left core right"".down.";gap:6px;display:grid}.control-button{cursor:pointer;color:#e2e8f0;touch-action:manipulation;background:linear-gradient(#ffffff14,#ffffff05),linear-gradient(#0f172ad6,#080f1cf0);border:1px solid #94a3b829;border-radius:14px;place-items:center;gap:3px;min-width:0;min-height:42px;padding:6px 2px;display:grid;box-shadow:0 10px 20px #0206173d,inset 0 1px #ffffff0a}.control-up{grid-area:up}.control-right{grid-area:right}.control-down{grid-area:down}.control-left{grid-area:left}.control-icon,.dpad-core{background:#38bdf81f;border-radius:11px;place-items:center;width:24px;height:24px;margin:0 auto;display:grid}.arrow-icon{width:14px;height:14px}.control-hint{color:#94a3b8d1;text-align:center;font-size:.46rem}.dpad-core{background:radial-gradient(circle,#38bdf814,#0000 70%),#070e1be6;border:1px solid #22d3ee24;border-radius:14px;grid-area:core;width:auto;height:auto;min-height:42px}.dpad-core span{background:#bae6fde6;border-radius:999px;width:8px;height:8px;box-shadow:0 0 10px #7dd3fc6b}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#020617c2;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.tutorial-modal{border-radius:24px;gap:14px;width:min(100%,420px);padding:18px;display:grid}.tutorial-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.tutorial-kicker{color:#7dd3fc;margin-bottom:4px;font-size:.62rem;font-weight:700;display:block}.tutorial-header h2{margin:0;font-family:Space Grotesk,Inter,system-ui,sans-serif;font-size:1.1rem;line-height:1.05}.tutorial-steps{gap:10px;display:grid}.tutorial-card{background:#ffffff0a;border-radius:18px;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:12px;display:grid}.tutorial-index{color:#dff7ff;background:#38bdf824;border-radius:12px;place-items:center;width:34px;height:34px;font-size:.72rem;font-weight:800;display:grid}.tutorial-card strong{font-size:.86rem;display:block}.tutorial-card p{color:#cbd5e1d1;margin:4px 0 0;font-size:.74rem;line-height:1.4}.tutorial-action{width:100%}@keyframes tile-enter{0%{opacity:0;transform:translateY(6px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes goal-pulse{0%,to{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes board-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes flash-gravity{0%{opacity:.9;background:#c084fc3d}to{opacity:0;background:0 0}}@keyframes flash-win{0%{opacity:.92;background:#4ade803d}to{opacity:0;background:0 0}}@keyframes player-win{0%,to{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(1.04)}}@media (width>=700px){.app-shell{padding:16px}.game-frame{grid-template:"top top""status status""ribbon ribbon""board dock"minmax(0,1fr)/minmax(0,1.1fr) 270px;gap:10px;width:min(100%,980px)}.topbar{grid-area:top}.status-strip{grid-area:status}.level-ribbon{grid-area:ribbon}.board-stage{grid-area:board}.bottom-dock{grid-area:dock;grid-template-rows:auto auto;grid-template-columns:1fr;align-self:stretch}.grid-board{--board-size:min(50vh, 60vw, 430px)}}@media (width<=380px){.game-frame{gap:6px;padding:8px}.grid-board{--board-size:min(86vw, 42vh, 310px)}.level-tabs{gap:3px}.level-tab{height:24px;font-size:.54rem}.bottom-dock{grid-template-columns:120px minmax(0,1fr)}.tile-coordinate{font-size:.42rem}.gate-mark,.trap-mark,.door-mark,.switch-mark,.teleport-mark,.one-way-mark{font-size:.56rem}}@media (height<=760px){.grid-board{--board-size:min(82vw, 38vh, 320px)}.status-strip{min-height:32px}.tutorial-modal{padding:14px}.level-ribbon{gap:5px}.rule-panel,.controls-panel{padding:7px}}