:root{--sky:#38abf0;--sky-mid:#248fd9;--sky-deep:#126bb8;--scene:#2f8fd0;--ink:#17395d;--ink-soft:#58718b;--panel:#f9fcff;--panel-line:#d9e8f4;--accent:#32c990;--danger:#e74c3c;--control:#77c3f5eb;--control-strong:#97d7fffa;--control-border:#dcf4ffb8;--glass-ink:#fffffff2;--shadow:0 12px 26px #053f7047;--shadow-lg:0 24px 56px #07365e57;--safe-t:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--safe-b:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--safe-l:var(--safe-area-inset-left,env(safe-area-inset-left,0px));--safe-r:var(--safe-area-inset-right,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:16px;--radius-panel:24px;--radius-cell:13px}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--ink);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-touch-callout:none;margin:0;overflow:hidden}html{background:var(--sky-deep)}body{isolation:isolate;background:linear-gradient(180deg, var(--sky), var(--sky-deep));position:relative}body:before{z-index:0;content:"";pointer-events:none;will-change:transform;background:linear-gradient(#1c89d20f,#105ba638),url(/assets/sky-clouds-desktop-C4IWUf9M.jpg) 50%/cover no-repeat;animation:46s ease-in-out infinite alternate sky-drift;position:fixed;inset:-4%;transform:translate(-1.1%,-.35%)scale(1.045)}@keyframes sky-drift{to{transform:translate(1.1%,.45%)scale(1.045)}}#app{z-index:1;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:9px;max-width:900px;margin:0 auto;display:grid;position:relative}.xhs-mini-tool #app{padding-top:calc(54px + var(--safe-t))}.top-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;padding:2px;display:flex}.brand{font-family:var(--font-display);letter-spacing:.035em;color:#fff;-webkit-text-stroke:.45px #ffffff57;text-shadow:0 3px #0d68a461,0 7px 18px #063d6c57;margin:0;font-size:clamp(1.6rem,4.5vw,2.35rem);font-weight:800}.hud{color:#fffffff0;letter-spacing:.02em;font-variant-numeric:tabular-nums;background:#08539133;border-radius:999px;align-items:center;gap:8px;padding:.38rem .68rem;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(--control-border);background:linear-gradient(180deg, var(--control-strong), var(--control));color:var(--glass-ink);font-family:var(--font-ui);border-radius:var(--radius-btn);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,filter .12s,box-shadow .12s;display:inline-flex;box-shadow:0 7px 16px #05437640}.btn-icon{border-radius:16px;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{filter:brightness(.96);transform:translateY(2px)scale(.96);box-shadow:0 3px 9px #0543763d}.btn:focus-visible,.pad:focus-visible{outline-offset:2px;outline:3px solid #ffd45a}.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:#ffffffad;background:#2074aeb8;border-color:#d2f0ff57;box-shadow:inset 0 2px 5px #06375e33}.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:#fff;background:#08569757;border-radius:999px;max-width:min(100%,650px);margin:0;padding:.38rem .85rem;font-size:.8rem;font-weight:600;line-height:1.4;box-shadow:0 5px 14px #05427124}#canvas-wrap{aspect-ratio:1;background:var(--scene);border-radius:26px;flex-shrink:1;place-items:center;width:min(100%,700px,100dvh - 160px,78vh);height:auto;max-height:none;transition:border-radius .36s cubic-bezier(.16,1,.3,1),background-color .36s cubic-bezier(.16,1,.3,1),box-shadow .36s cubic-bezier(.16,1,.3,1);display:grid;position:relative;overflow:hidden;box-shadow:0 18px 38px #053e6d4d,inset 0 2px #e2f7ff85,inset 0 -16px 30px #054a8033}.high-altitude #canvas-wrap{box-shadow:none;background:0 0;border-radius:0;overflow:visible}#game-canvas{z-index:1;aspect-ratio:1;object-fit:contain;display:block;position:relative;width:100%!important;height:100%!important}.high-altitude #game-canvas{max-width:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%!important;height:150%!important}.cloud-field{pointer-events:none;opacity:0;transition:opacity .22s;position:absolute;inset:-45%;overflow:visible}.cloud-field--far{z-index:0}.cloud-field--foreground{z-index:4}.high-altitude.cloud-challenge .cloud-field{opacity:1}.cloud-sprite{opacity:0;transform-origin:50%;will-change:transform, opacity;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;position:absolute;top:0;left:0}@keyframes lock-shake{0%,to{transform:translate(0)}33%{transform:translate(-4px)}66%{transform:translate(4px)}}.level-cell.lock-shake{animation:.2s lock-shake}.top-bar,.controls,.hint{z-index:6;position:relative}.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(--control-border);background:linear-gradient(180deg, var(--control-strong), var(--control));width:62px;min-width:44px;height:54px;min-height:44px;color:var(--glass-ink);cursor:pointer;border-radius:17px;font-size:1.1rem;font-weight:800;transition:transform .1s,filter .12s,box-shadow .12s;box-shadow:0 7px 15px #05427440}.pad:active{filter:brightness(.96);transform:translateY(2px)scale(.95);box-shadow:0 3px 8px #0542743d}.pad-icon{width:1.7rem;height:1.7rem}.hint{text-align:center;color:#ffffffe0;margin:0;font-size:.82rem;font-weight:600}.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:#ffd45a}.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:#072b4a94;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), inset 0 2px 0 #fff;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:#e8f9f2}.select-stat--stars{color:#c9a227;background:#fff8df}.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:#f0f7fc;flex-shrink:0;gap:12px;display:grid}.scene-settings{gap:4px;display:grid}.scene-settings h3{color:var(--ink-soft);letter-spacing:.08em;margin:0 0 3px;font-size:.72rem;font-weight:800}.scene-toggle{cursor:pointer;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:6px 2px;display:grid;position:relative}.scene-toggle+.scene-toggle{border-top:1px solid #17395d14}.scene-toggle-copy{gap:2px;min-width:0;display:grid}.scene-toggle-copy strong{color:var(--ink);font-size:.9rem;line-height:1.25}.scene-toggle-copy small{color:var(--ink-soft);font-size:.72rem;font-weight:600;line-height:1.35}.scene-toggle input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.toggle-track{background:#dce7ee;border:1px solid #b8cbd9;border-radius:999px;width:48px;height:28px;transition:background-color .18s,border-color .18s;position:relative;box-shadow:inset 0 2px 4px #17395d21}.toggle-track span{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .22s cubic-bezier(.16,1,.3,1);position:absolute;top:3px;left:3px;box-shadow:0 2px 5px #17395d3d}.scene-toggle input:checked+.toggle-track{background:var(--accent);border-color:#16a978}.scene-toggle input:checked+.toggle-track span{transform:translate(20px)}.scene-toggle input:focus-visible+.toggle-track{outline-offset:2px;outline:3px solid #ffd45a}.scene-toggle.is-disabled{cursor:not-allowed;opacity:.48}.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:#eaf3f9;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:#e1f8ef;border-color:#27ae6073}.level-cell.cleared .icon-badge{color:#1e8449}.level-cell.next{color:#fff;background:#218fd9;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}#canvas-wrap{width:min(100%,650px,100dvh - 240px,70vh)}}@media (width<=640px){body{background:linear-gradient(180deg, var(--sky), var(--sky-deep))}body:before{background:linear-gradient(#1c89d20a,#105ba633),url(/assets/sky-clouds-mobile-B5pgnfOX.jpg) 50%/cover no-repeat}#app{padding-left:calc(10px + var(--safe-l));padding-right:calc(10px + var(--safe-r))}.top-bar{grid-template-columns:auto 1fr;gap:7px 10px;display:grid}.hud{justify-self:end}.actions{grid-column:1/-1;justify-self:end}#canvas-wrap{border-radius:22px}}@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,#canvas-wrap,.toggle-track,.toggle-track span,.cloud-field{transition:none;animation:none}.clear-star{opacity:1;transform:none}body:before{animation:none;transform:scale(1.045)}}
