:root,[data-theme=dark]{--bg: #0f1419;--bg-gradient-mid: #1e3a5f;--surface: #1a2332;--surface-elevated: #243044;--surface-hover: #243044;--border: #2d3a4d;--glass-border: rgba(255, 255, 255, .12);--text: #e8eef7;--muted: #8b9cb3;--accent: #3d8bfd;--accent-dim: #2563c4;--success: #22c55e;--danger: #ef4444;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);--radius: 12px;--radius-pill: 999px;--font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--title-weight: 650;--layer-shine: linear-gradient( 180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45% );--bottle-neck-shade: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .06), rgba(0, 0, 0, .15))}[data-theme=light]{--bg: #e8eef5;--bg-gradient-mid: #b8d4f0;--surface: #ffffff;--surface-elevated: #f4f7fb;--surface-hover: #e8eef5;--border: #c5d0e0;--glass-border: rgba(0, 0, 0, .08);--text: #1a2332;--muted: #5c6b80;--accent: #2563eb;--accent-dim: #1d4ed8;--success: #16a34a;--danger: #dc2626;--shadow-sm: 0 2px 8px rgba(15, 23, 42, .08);--shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);--layer-shine: linear-gradient( 180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 50% );--bottle-neck-shade: linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(255, 255, 255, .35), rgba(0, 0, 0, .1))}*,*:before,*:after{box-sizing:border-box}html{color-scheme:dark}html[data-theme=light]{color-scheme:light}html,body{margin:0;min-height:100%;font-family:var(--font);background:radial-gradient(ellipse 120% 80% at 50% -20%,var(--bg-gradient-mid) 0%,var(--bg) 55%);background-attachment:fixed;color:var(--text);-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{max-width:720px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:1rem 1rem 2rem;padding-bottom:calc(2rem + env(safe-area-inset-bottom))}h1{font-size:clamp(1.2rem,4vw,1.45rem);font-weight:var(--title-weight);margin:0;letter-spacing:-.02em}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:.55rem 1rem;border-radius:var(--radius);font-size:.95rem;cursor:pointer;transition:background .15s,border-color .15s,transform .12s}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:hover{border-color:var(--muted);background:var(--surface-hover)}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent);border-color:var(--accent-dim);color:#fff}.btn-primary:hover{filter:brightness(1.08)}.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}.btn-ghost:hover{color:var(--text);background:color-mix(in srgb,var(--surface) 60%,transparent)}.btn-small{padding:.35rem .65rem;font-size:.85rem}.btn-large{padding:.75rem 1.5rem;font-size:1.05rem}.btn-icon{width:2.25rem;height:2.25rem;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-size:1.1rem;line-height:1}.hidden{display:none!important}.home{text-align:center;padding:1.5rem 0 2rem;position:relative}.home-top{display:flex;justify-content:flex-end;align-items:center;gap:.35rem;margin-bottom:1rem}.home-title{font-size:clamp(1.65rem,5vw,2rem);font-weight:var(--title-weight);margin-bottom:.5rem;letter-spacing:-.03em}.home-sub{color:var(--muted);margin:0 auto 2rem;line-height:1.6;max-width:22rem;font-size:.95rem}.home-actions{display:flex;flex-direction:column;gap:.85rem;align-items:center}.app-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.app-header h1{flex:1;text-align:center;font-size:clamp(1.15rem,3.5vw,1.35rem)}.level-list{display:flex;flex-direction:column;gap:.85rem}.level-list a.level-card{text-decoration:none;color:inherit}.home-actions a.btn{display:inline-block;text-align:center;text-decoration:none}.level-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.75rem 1rem;text-align:left;width:100%;padding:1rem 1.15rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .15s,box-shadow .18s ease}.level-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.level-card-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.level-card-badge{display:flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .45rem;border-radius:10px;background:var(--surface-elevated);border:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--muted)}.level-card-random{border-style:dashed;border-width:2px;background:linear-gradient(135deg,var(--surface) 0%,color-mix(in srgb,var(--success) 12%,var(--surface)) 100%)}.level-card-random .level-card-badge{font-size:1.1rem;background:color-mix(in srgb,var(--success) 18%,var(--surface));border-color:color-mix(in srgb,var(--success) 45%,var(--border))}.level-card-random:hover{border-color:var(--success)}.level-card-title{font-weight:600;font-size:1.05rem}.level-card-meta{font-size:.85rem;color:var(--muted);margin-top:.2rem}.play-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:1.25rem;padding:.65rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.play-toolbar .back-btn{flex-shrink:0}.play-title{flex:1 1 140px;text-align:center;font-weight:600;font-size:clamp(.95rem,3vw,1.1rem);min-width:0}.play-stats{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.8rem;color:var(--muted);margin-left:auto}.stat-moves{white-space:nowrap;padding:.25rem .55rem;background:var(--surface-elevated);border-radius:var(--radius-pill);border:1px solid var(--border);color:var(--text);font-variant-numeric:tabular-nums}.play-actions{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;max-width:28rem;margin:1.5rem auto 0}.bottle-board{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;align-items:flex-end;padding:.75rem 0;min-height:220px}.bottle-board--pruning{pointer-events:none}.bottle-wrap--pruning-out{pointer-events:none;animation:bottle-prune-pop .42s ease-in forwards;transform-origin:50% 100%}@keyframes bottle-prune-pop{0%{transform:scale(1) translateY(0);opacity:1;filter:brightness(1)}35%{transform:scale(1.06) translateY(-4px);filter:brightness(1.25)}to{transform:scale(.35) translateY(-28px);opacity:0;filter:brightness(1.4)}}.bottle-wrap{--layer-h: 26px;cursor:pointer;padding:5px;border-radius:16px;transition:box-shadow .2s ease,transform .2s ease}.bottle-wrap:active{transform:scale(.97)}.bottle-selected{box-shadow:0 0 0 3px var(--accent),0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent);transform:scale(1.02)}.bottle-pour-flash .bottle-outline{animation:bottle-flash .22s ease-out}.bottle-figure{display:flex;flex-direction:column;align-items:center}.bottle-neck{width:22px;height:14px;background:var(--bottle-neck-shade);border-left:2px solid var(--glass-border);border-right:2px solid var(--glass-border);border-radius:0 0 4px 4px;box-shadow:inset 0 -2px 4px #00000026;flex-shrink:0}.bottle-shoulder{width:52px;height:9px;flex-shrink:0;clip-path:polygon(15px 0,37px 0,100% 100%,0 100%);background:linear-gradient(180deg,#ffffff14,#0000001f);border-bottom:2px solid var(--glass-border);box-shadow:inset 0 1px #ffffff1a}@keyframes bottle-flash{0%{filter:brightness(1.35);box-shadow:inset 0 0 12px #ffffff80}to{filter:brightness(1);box-shadow:none}}.bottle-shake{animation:bottle-shake .45s ease}@keyframes bottle-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.bottle-outline{width:52px;border:3px solid var(--glass-border);border-radius:0 0 14px 14px;border-top:none;background:linear-gradient(180deg,#ffffff0f,#0003);box-shadow:inset 0 2px 12px #ffffff0f,inset 0 -4px 12px #00000040;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}.bottle-layers{display:flex;flex-direction:column-reverse;justify-content:flex-start;flex:0 0 auto;height:calc(var(--capacity, 4) * var(--layer-h));min-height:0}.bottle-layer{flex:0 0 var(--layer-h);height:var(--layer-h);min-height:var(--layer-h);border-top:1px solid rgba(0,0,0,.18);position:relative;box-shadow:inset 0 1px #ffffff1f}.bottle-layer:after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:var(--layer-shine);pointer-events:none;opacity:.85}.bottle-layer--merge{border-top:none;box-shadow:none}.bottle-layer--merge:after{opacity:0}.bottle-pad{height:8px;flex-shrink:0;background:linear-gradient(180deg,#ffffff1a,#00000026);border-radius:0 0 10px 10px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}@supports not (backdrop-filter: blur(6px)){.modal-overlay{background:#000000a6}}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem 1.5rem 1.5rem;max-width:340px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}.modal-icon{font-size:2.5rem;line-height:1;margin-bottom:.35rem}.modal h2{margin:0 0 .35rem;font-size:1.4rem;font-weight:var(--title-weight);letter-spacing:-.02em}.modal-sub{margin:0 0 1.25rem;font-size:.95rem;color:var(--muted);line-height:1.45}.modal-actions{display:flex;flex-direction:column;gap:.5rem;justify-content:center;align-items:stretch}.modal-actions .btn{width:100%}.modal-actions .btn-primary{order:-1}.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}.onboarding-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;max-width:360px;width:100%;box-shadow:var(--shadow-lg)}.onboarding-card h2{margin:0 0 .75rem;font-size:1.2rem}.onboarding-steps{margin:0 0 1rem;padding-left:1.2rem;color:var(--muted);font-size:.92rem;line-height:1.65}.onboarding-steps li{margin-bottom:.35rem}.editor-error{background:color-mix(in srgb,var(--danger) 15%,transparent);border:1px solid var(--danger);color:var(--text);padding:.6rem .75rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}.editor-shell{padding-bottom:1rem}.editor-form{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1rem}.field{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:var(--muted)}.input,.select{padding:.45rem .6rem;border-radius:8px;border:1px solid var(--border);background:var(--surface-elevated);color:var(--text);font-size:1rem}.input:focus-visible,.select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.editor-tools,.editor-io{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.75rem}.editor-hint{font-size:.85rem;color:var(--muted);line-height:1.45;margin:0 0 1rem}.editor-bottles{display:flex;flex-direction:column;gap:1rem}.editor-bottle-card{border:1px solid var(--border);border-radius:var(--radius);padding:.85rem;background:var(--surface);box-shadow:var(--shadow-sm)}.editor-bottle-head{font-size:.85rem;color:var(--muted);margin-bottom:.5rem}.editor-stack-visual{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;min-height:28px;margin-bottom:.5rem}.editor-seg{width:36px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.2)}.editor-bottle-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.error-screen{text-align:center;padding:2rem}