:root{--sky:#3a9ee0;--sky-mid:#2b86c5;--sky-deep:#1a5f8f;--scene:#1f6fa8;--ink:#1a2a3a;--ink-soft:#5d6d7e;--panel:#fff;--panel-line:#e8eef3;--accent:#27ae60;--danger:#e74c3c;--glass:#ffffff38;--glass-strong:#ffffff52;--glass-border:#ffffff61;--glass-ink:#fffffff2;--shadow:0 10px 28px #0a284647;--shadow-lg:0 22px 52px #08203a5c;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--font-display:"ZCOOL KuaiLe", "Nunito", system-ui, sans-serif;--font-ui:"Nunito", "PingFang SC", "Hiragino Sans GB", sans-serif;--radius-btn:14px;--radius-panel:22px;--radius-cell:12px}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:radial-gradient(ellipse 90% 60% at 50% -10%, #78c8ff59, transparent 55%), linear-gradient(168deg, var(--sky) 0%, var(--sky-mid) 42%, var(--sky-deep) 100%);height:100%;color:var(--ink);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;overflow:hidden}#app{height:100%;padding:calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l));grid-template-rows:auto 1fr auto auto;gap:10px;max-width:960px;margin:0 auto;display:grid}.top-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;display:flex}.brand{font-family:var(--font-display);letter-spacing:.05em;color:#fff;text-shadow:0 2px 12px #08284640;margin:0;font-size:clamp(1.45rem,4vw,2.05rem);font-weight:400}.hud{color:#ffffffe0;letter-spacing:.02em;font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-size:clamp(.82rem,2.2vw,.95rem);font-weight:700;display:flex}.hud-sep{opacity:.45;font-weight:600}.actions{flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto;display:flex}.btn{appearance:none;border:1px solid var(--glass-border);background:var(--glass);color:var(--glass-ink);font-family:var(--font-ui);border-radius:var(--radius-btn);-webkit-backdrop-filter:blur(12px);cursor:pointer;box-sizing:border-box;justify-content:center;align-items:center;gap:.4rem;min-height:44px;padding:.6rem .9rem;font-size:.9rem;font-weight:800;line-height:1.25;transition:transform .1s,background .12s,box-shadow .12s;display:inline-flex;box-shadow:0 4px 16px #0a28461f}.btn-icon{border-radius:14px;flex:none;width:46px;min-width:46px;height:46px;min-height:46px;padding:0}.btn-icon .icon{width:1.35rem;height:1.35rem}.icon{flex-shrink:0;width:1.15em;height:1.15em;display:block}.btn:active{background:var(--glass-strong);transform:scale(.94)}.btn:focus-visible,.pad:focus-visible{outline-offset:2px;outline:3px solid #f1c40f}.btn.primary{background:var(--accent);color:#fff;width:100%;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#0000;margin-top:4px;padding:.7rem 1rem}.btn.btn-ghost{border:1px solid var(--panel-line);color:var(--ink-soft);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;width:100%;padding:.65rem 1rem}.btn.btn-ghost:hover{color:var(--ink);background:#f4f7fa}.btn[aria-pressed=true]{color:#ffffff8c;background:#ffffff24;border-color:#ffffff38}.stage{flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;min-height:0;display:flex}.mechanic-hint{text-align:center;color:#ffffffeb;-webkit-backdrop-filter:blur(8px);background:#08284638;border:1px solid #ffffff2e;border-radius:999px;max-width:min(100%,650px);margin:0;padding:.4rem .85rem;font-size:.82rem;font-weight:600;line-height:1.4}#canvas-wrap{aspect-ratio:1;width:min(100%,650px,100dvh - 240px,68vh);height:auto;max-height:none;box-shadow:var(--shadow), inset 0 1px 0 #ffffff38, inset 0 -20px 40px #0828462e;background:var(--scene);border:1px solid #ffffff47;border-radius:20px;flex-shrink:1;place-items:center;display:grid;position:relative;overflow:hidden}#game-canvas{aspect-ratio:1;object-fit:contain;display:block;width:100%!important;height:100%!important}.controls{flex-direction:column;align-items:center;gap:6px;padding-bottom:2px;display:none}.pad-row{gap:8px;display:flex}.pad{border:1px solid var(--glass-border);background:var(--glass);width:62px;min-width:44px;height:54px;min-height:44px;color:var(--glass-ink);-webkit-backdrop-filter:blur(12px);cursor:pointer;border-radius:16px;font-size:1.1rem;font-weight:800;transition:transform .1s,background .12s;box-shadow:0 4px 16px #0a28461f}.pad:active{background:var(--glass-strong);transform:scale(.92)}.hint{text-align:center;color:#ffffffc7;margin:0;font-size:.82rem;font-weight:600}.status-toast{z-index:5;text-align:center;color:#1a5276;pointer-events:none;background:#fffffff0;border-radius:12px;width:min(92%,360px);margin:0;padding:.48rem .8rem;font-size:.88rem;font-weight:700;animation:.22s ease-out toast-in;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0a284638}.status-toast.status-fail{color:#922b21;background:#ffebeef5}.status-toast.status-win{color:#1e8449;background:#e8f8edf5;animation:.22s ease-out toast-in,.55s ease-out win-chip}.status-toast.status-info{color:#1a5276}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(-8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes win-chip{0%{box-shadow:0 0 #27ae6059}70%{box-shadow:0 0 0 8px #27ae6000}to{box-shadow:0 8px 24px #0a284638}}.mechanic-hint.hidden,.status-toast.hidden,.btn.hidden{display:none!important}.overlay{padding:max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0c243a8c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay.hidden,.panel.hidden{display:none}.panel{background:var(--panel);border-radius:var(--radius-panel);width:min(440px,100%);max-height:min(86vh,640px);box-shadow:var(--shadow-lg);flex-direction:column;display:flex;overflow:hidden}.panel-select{padding:0}.panel-head{border-bottom:1px solid var(--panel-line);text-align:center;flex-shrink:0;padding:18px 20px 12px}.panel-head h2{font-family:var(--font-display);color:var(--ink);letter-spacing:.02em;margin:0;font-size:1.55rem;font-weight:400}.select-progress{color:var(--ink-soft);margin:6px 0 0;font-size:.85rem;font-weight:700}.panel-foot{padding:12px 20px calc(14px + var(--safe-b));border-top:1px solid var(--panel-line);background:#fafcfd;flex-shrink:0}.panel-win{padding:24px 20px calc(18px + var(--safe-b));text-align:center;animation:.42s cubic-bezier(.22,1,.36,1) panel-enter}.panel-win h2{font-family:var(--font-display);margin:0 0 10px;font-size:1.7rem;font-weight:400}.panel-win p{color:var(--ink-soft);margin:0 0 16px;font-weight:600}@keyframes panel-enter{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:none}}.level-chapters{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:8px 16px 16px;overflow:auto}.level-chapter+.level-chapter{border-top:1px dashed var(--panel-line);margin-top:14px;padding-top:12px}.chapter-head{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;padding:0 2px;display:flex}.chapter-name{letter-spacing:.06em;text-transform:none;color:var(--ink);font-size:.8rem;font-weight:800}.chapter-range{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:700}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.level-cell{appearance:none;border-radius:var(--radius-cell);aspect-ratio:1;font-family:var(--font-ui);cursor:pointer;color:var(--ink);background:#eef2f5;border:2px solid #0000;place-items:center;padding:0;font-size:clamp(.85rem,2.8vw,1rem);font-weight:800;transition:transform .12s,box-shadow .12s,background .12s;display:grid;position:relative}.level-cell:focus-visible{outline-offset:2px;outline:3px solid #f1c40f}.level-num{font-variant-numeric:tabular-nums;line-height:1}.level-cell .icon-badge{width:.78rem;height:.78rem;position:absolute;bottom:3px;right:3px}.level-cell.cleared{color:#1e8449;background:#e3f8ec;border-color:#27ae6073}.level-cell.cleared .icon-badge{color:#1e8449}.level-cell.next{color:#fff;background:#2b86c5;box-shadow:0 0 0 3px #2b86c547}.level-cell.locked{color:#a0a8b0;cursor:not-allowed;background:#f0f2f4}.level-cell.locked .level-num{opacity:.55}.level-cell.locked .icon-badge{color:#8a949e;opacity:.9}.level-cell.current:not(.locked){outline-offset:1px;outline:3px solid #f1c40f}.level-cell:not(.locked):hover{transform:translateY(-1px)}.level-cell:not(.locked):active{transform:scale(.92)}@media (pointer:coarse),(width<=899px){.controls{gap:8px;display:flex}.hint-keys{display:none}.btn-icon{width:44px;min-width:44px;height:44px;min-height:44px}.pad-row{gap:8px}}@media (width<=380px){.brand{font-size:1.28rem}.hud{gap:6px;font-size:.78rem}.btn-icon{width:42px;min-width:42px;height:42px;min-height:42px}.btn-icon .icon{width:1.2rem;height:1.2rem}.actions{gap:5px}}@media (width>=900px) and (pointer:fine){#app{grid-template-rows:auto 1fr auto}}@media (prefers-reduced-motion:reduce){.btn,.pad,.level-cell,.status-toast,.panel-win{transition:none;animation:none}}