: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:#ffffffdb;-webkit-backdrop-filter:blur(8px);background:#08284629;border:1px solid #ffffff24;border-radius:999px;max-width:min(100%,650px);margin:0;padding:.38rem .85rem;font-size:.8rem;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}.visit-count{text-align:center;color:#ffffff85;letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:1;min-height:.9rem;margin:4px 0 0;font-size:.72rem;font-weight:700;line-height:1.25;transition:opacity .18s ease-out,transform .18s ease-out;transform:translateY(0)}.visit-count[hidden]{visibility:hidden;opacity:0;display:block;transform:translateY(2px)}.clear-fanfare{z-index:5;pointer-events:none;text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:14%;left:50%;transform:translate(-50%)}.clear-stars{gap:10px;display:flex}.clear-star{color:#ffffff47;filter:drop-shadow(0 4px 10px #08284673);opacity:0;width:38px;height:38px;animation:.34s cubic-bezier(.22,1,.36,1) forwards star-in;transform:scale(.85)}.clear-star:first-child{animation-delay:0s}.clear-star:nth-child(2){animation-delay:90ms}.clear-star:nth-child(3){animation-delay:.18s}.clear-star.lit{color:#f6d36b}.clear-caption{color:#fff;text-shadow:0 2px 14px #0828468c;margin:0;font-size:.95rem;font-weight:800}@keyframes star-in{to{opacity:1;transform:scale(1)}}.mechanic-hint.hidden,.clear-fanfare.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-stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;display:grid}.select-stat{text-align:left;border-radius:12px;align-items:center;gap:8px;min-width:0;margin:0;padding:9px 11px;display:flex}.select-stat--clear{color:var(--accent);background:#eef8f1}.select-stat--stars{color:#c9a227;background:#fbf6e8}.select-stat-icon{flex-shrink:0;width:22px;height:22px}.select-stat-meta{flex-direction:column;gap:1px;min-width:0;display:flex}.select-stat-label{letter-spacing:.04em;color:var(--ink-soft);font-size:.68rem;font-weight:800}.select-stat-nums{font-variant-numeric:tabular-nums;color:var(--ink);align-items:baseline;gap:4px;font-size:1rem;font-weight:800;line-height:1.15;display:flex}.select-stat-sep,.select-stat-cap{color:var(--ink-soft);font-size:.82em;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}.cell-stars{gap:2px;display:flex;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.cell-star{color:#1a2a3a2e;width:.62rem;height:.62rem}.cell-star.lit{color:#d4a017}.level-cell.next .cell-star,.level-cell.locked .cell-star{color:#ffffff59}.level-cell.next .cell-star.lit,.level-cell.cleared .cell-star.lit{color:#f1c40f}.level-cell.cleared .cell-star:not(.lit){color:#1e844947}.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,.clear-star,.panel-win{transition:none;animation:none}.clear-star{opacity:1;transform:none}}