:root{--bg-deep:#0e1320;--bg-mid:#141a2a;--bg-raised:#1c2438;--line:#2a3550;--ink:#eef2fa;--ink-dim:#93a1bd;--brand:#4a9df8;--brand-hi:#7cc0ff;--gold:#ffd43b;--danger:#ff6b6b;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--fs-xs:12px;--fs-sm:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:22px;--fs-2xl:28px;--fs-logo:46px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-tube:22px;--ease-pop:cubic-bezier(.2, 1.1, .35, 1);--ease-drop:cubic-bezier(.3, .85, .35, 1);--t-fast:.14s;--t-med:.26s;--t-slow:.34s;--seg-h:52px;--tube-w:62px}*{box-sizing:border-box}html,body{background:var(--bg-deep);height:100%;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;margin:0;overflow-x:hidden}#app{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(120% 90% at 50% -10%, #232c44 0%, var(--bg-deep) 60%);flex-direction:column;display:flex}.bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bubble{width:26px;height:26px;animation:rise calc(14s + var(--i) * 1.7s) linear infinite;animation-delay:calc(var(--i) * -2.3s);transform:scale(calc(.5 + var(--i) * .12));opacity:.5;background:radial-gradient(circle at 35% 30%,#96beff2e,#78a0ff0a);border-radius:50%;position:absolute;bottom:-40px}@keyframes rise{0%{opacity:0;transform:translateY(0)scale(.6)}10%{opacity:.5}90%{opacity:.4}to{opacity:0;transform:translateY(-105vh)scale(1.1)}}@media (prefers-reduced-motion:reduce){.bubble{animation:none;display:none}}.hud,.board{z-index:1;position:relative}button{font-family:var(--font);cursor:pointer;transition:transform var(--t-fast) var(--ease-pop), filter var(--t-fast) ease}button:active{transform:scale(.96)}.hud{justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-4) 18px;font-size:var(--fs-md);flex-wrap:wrap;display:flex}.hud-level{font-weight:700}.hud-moves{color:var(--ink-dim)}.hud-actions{gap:var(--sp-2);display:flex}.hud button{background:var(--bg-mid);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-2) 14px;font-size:var(--fs-sm)}.hud-back{font-size:22px;line-height:1;padding:var(--sp-1) var(--sp-3)!important}.board{padding:var(--sp-5) 18px 48px;flex-wrap:wrap;flex:1;place-content:center;gap:18px 22px;display:flex}.tube{transition:transform var(--t-fast) ease;background:0 0;border:0;padding:0;transform:translateY(0)}.tube:active{transform:scale(1)}.tube.selected{transform:translateY(-16px)}.glass{width:var(--tube-w);height:calc(var(--capacity) * var(--seg-h));border-radius:6px 6px var(--r-tube) var(--r-tube);background:#ffffff08;border:2px solid #46536a;border-top:0;flex-direction:column-reverse;display:flex;overflow:hidden;box-shadow:0 6px 16px #00000059}.tube.selected .glass{border-color:#cfe0ff;box-shadow:0 0 0 3px #78aaff59,0 10px 24px #0006}.seg{width:100%;height:var(--seg-h);flex:0 0 var(--seg-h)}.seg.dropping{animation:drop var(--t-med) var(--ease-drop)}@keyframes drop{0%{transform:translateY(-220px)}70%{transform:translateY(0)}85%{transform:translateY(-6px)}to{transform:translateY(0)}}.tube.illegal{animation:.24s shake}.tube.illegal .glass{border-color:var(--danger)}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}[data-variant=decorated] .seg{background-image:linear-gradient(95deg,#ffffff80 0%,#ffffff14 20%,#fff0 45%,#0000002e 78%,#0006 100%),linear-gradient(#ffffff52,#00000047);box-shadow:inset 0 3px 7px #ffffff73,inset 0 -7px 11px #00000061}.win{z-index:100;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadein var(--t-med) ease;background:#080b12b8;place-items:center;display:grid;position:fixed;inset:0}@keyframes fadein{0%{opacity:0}to{opacity:1}}.win.hidden{display:none}.win-card{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-lg);text-align:center;animation:pop var(--t-slow) var(--ease-pop);padding:28px 32px;box-shadow:0 20px 60px #00000080}@keyframes pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.win,.win-card,.star.on{animation:none}}.win-title{font-size:var(--fs-xl);font-weight:800}.win-sub{color:var(--ink-dim);margin:6px 0 4px}.win-time{color:var(--ink-dim);font-size:var(--fs-xs);min-height:14px;margin:0 0 18px}.win-card button{background:var(--brand);color:#fff;border-radius:var(--r-md);padding:var(--sp-3) 22px;border:0;font-size:16px;font-weight:700}.win-card button.secondary{width:100%;margin-top:var(--sp-2);background:var(--bg-mid);color:var(--ink);border:1px solid var(--line);display:block}.win-card button.ghost{width:100%;margin-top:var(--sp-2);color:var(--ink-dim);font-weight:500;font-size:var(--fs-xs);padding:var(--sp-2);background:0 0;display:block}.win-card button.ghost.hidden{display:none}.win-card button.primary{width:100%;display:block}.stars{justify-content:center;gap:6px;margin:4px 0 10px;display:flex}.star{color:#38424f;font-size:34px;line-height:1;transform:scale(.85)}.star.on{color:var(--gold);text-shadow:0 0 12px #ffd43b80;animation:star-in .42s var(--ease-pop) backwards}.stars .star.on:first-child{animation-delay:60ms}.stars .star.on:nth-child(2){animation-delay:.22s}.stars .star.on:nth-child(3){animation-delay:.38s}@keyframes star-in{0%{opacity:0;transform:scale(0)rotate(-40deg)}70%{opacity:1;transform:scale(1.25)rotate(6deg)}to{transform:scale(1)rotate(0)}}.home-card{max-width:min(90vw,380px)}.home-logo{font-size:var(--fs-logo);letter-spacing:1px;background:linear-gradient(180deg, var(--brand-hi), var(--brand));color:#0000;margin-bottom:var(--sp-1);-webkit-background-clip:text;background-clip:text;font-weight:900}.home-tag{color:var(--ink-dim);margin:0 0 var(--sp-4);font-size:var(--fs-md);line-height:1.4}.home-progress{font-size:var(--fs-md);min-height:18px;margin-bottom:14px;font-weight:700}.home-how{color:var(--ink-dim);font-size:var(--fs-xs);margin:var(--sp-4) 0 0;line-height:1.4}.map-card{max-width:min(92vw,420px);max-height:84dvh;padding:20px;overflow-y:auto}.map-head{justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);display:flex}.map-head .hud-back{background:var(--bg-mid);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm)}.map-total{font-size:var(--fs-sm);color:var(--ink-dim);font-weight:700}.map-grid{gap:var(--sp-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.map-cell{background:var(--brand);border-radius:var(--r-md);width:100%;min-width:0;padding:var(--sp-3) var(--sp-1) var(--sp-2);border:0;flex-direction:column;align-items:center;gap:2px;min-height:62px;display:flex;box-shadow:0 3px #00000040}.map-cell:not(.locked):active{box-shadow:none;transform:translateY(2px)scale(.98)}.map-cell.locked{background:var(--bg-mid);border:1px solid var(--line);box-shadow:none;opacity:.6;cursor:default}.map-num{font-size:var(--fs-lg);color:#fff;font-weight:800}.map-cell.locked .map-num{color:var(--ink-dim)}.map-stars{font-size:var(--fs-xs);color:var(--gold);letter-spacing:1px;min-height:14px}.intro-card{text-align:left;max-width:min(90vw,380px)}.intro-card .win-title{text-align:center;margin-bottom:var(--sp-3)}.intro-text{margin:var(--sp-2) 0;font-size:var(--fs-md);color:var(--ink);line-height:1.45}.intro-note{margin:var(--sp-4) 0 var(--sp-1);font-size:var(--fs-xs);color:var(--ink-dim)}.intro-card button{width:100%;margin-top:var(--sp-3);display:block}.qual-q{font-size:var(--fs-md);max-width:min(88vw,360px);margin:6px 0 18px;line-height:1.45}.qual-actions{gap:var(--sp-2);flex-direction:column;display:flex}.qual-actions button{background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);font-weight:600}.export-panel{z-index:10001;border:1px solid var(--line);border-radius:var(--r-md);background:#0f141b;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:min(92vw,520px);padding:14px 16px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #0009}.export-summary{text-align:center;width:100%;color:var(--ink-dim);font-size:13px}.export-panel button{color:#05130a;border-radius:var(--r-sm);font-size:var(--fs-sm);background:#22c55e;border:0;padding:10px 16px;font-weight:700}.export-panel button:last-child{background:var(--bg-mid);color:var(--ink);border:1px solid var(--line)}