:root{--bg: #0e1116;--panel: #171c26;--panel-2: #212940;--cell-bg: #222b3d;--cell-line: #333d52;--slot-bg: #12161f;--slot-line: #3a465e;--text: #e8ecf4;--muted: #93a0b4;--ink: #0b0f16;--accent: #38bdf8;--accent-ink: #06283a;--good: #35a56b;--warn: #f59e0b;--bad: #e05252;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}.game{position:relative;height:100%;max-width:620px;margin-inline:auto;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}.chips{display:flex;gap:6px;min-width:0}.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding-inline:10px;border-radius:10px;background:var(--panel);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.chip .icon{width:17px;height:17px;flex:none}#level-chip .icon{color:var(--accent)}#score-chip .icon{color:var(--warn)}.actions{position:relative;z-index:6;display:flex;gap:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding-inline:14px;border:0;border-radius:12px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:700;cursor:pointer}.btn:disabled{opacity:.45;cursor:default}.btn:not(:disabled):active{transform:translateY(1px)}.btn-icon{padding-inline:0;font-size:19px;line-height:1}.btn-primary{background:var(--accent);color:var(--accent-ink)}.icon{width:20px;height:20px}.clock{display:flex;align-items:center;gap:8px;flex:none;padding:6px 10px;border-radius:10px;background:var(--panel);color:var(--muted)}.clock .icon{width:16px;height:16px;flex:none}.clock-track{flex:1;height:8px;min-width:0;border-radius:99px;background:#0d1119;overflow:hidden}.clock-track i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#2f8f5b,var(--good))}.clock-value{min-width:2.4ch;text-align:end;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}.clock.is-urgent .clock-track i{background:linear-gradient(90deg,#b23a3a,var(--bad))}.clock.is-urgent .clock-value{color:var(--bad);animation:pulse 1s ease-in-out infinite}.clock.is-gain{animation:flash-good .5s ease-out}.clock.is-loss{animation:flash-bad .5s ease-out}@keyframes pulse{50%{opacity:.5}}@keyframes flash-good{0%{box-shadow:inset 0 0 0 2px var(--good)}to{box-shadow:inset 0 0 0 2px transparent}}@keyframes flash-bad{0%{box-shadow:inset 0 0 0 2px var(--bad)}to{box-shadow:inset 0 0 0 2px transparent}}.stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.play{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--group-gap, 18px)}.play.is-side{flex-direction:row}.slots,.rack{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--gap, 6px);max-width:calc(var(--per-row, 7) * var(--cell, 48px) + (var(--per-row, 7) - 1) * var(--gap, 6px))}.cell:disabled{opacity:1}.cell{width:var(--cell, 48px);height:var(--cell, 48px);padding:0;border:0;border-radius:10px;font:inherit;font-size:calc(var(--cell, 48px) * .48);font-weight:800;line-height:1;color:var(--text);cursor:pointer;transition:background-color .12s ease,color .12s ease}.slot{background:var(--slot-bg);box-shadow:inset 0 0 0 2px var(--slot-line)}.slot.is-empty{cursor:default}.slot.is-filled{background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--cell-line);animation:drop .16s ease-out}.slot.is-locked{background:#2a3a2f;box-shadow:inset 0 0 0 2px var(--good);color:#cdeddb;cursor:default}.tile{background:var(--cell-bg);box-shadow:inset 0 0 0 2px var(--cell-line)}.tile.is-spent{background:transparent;box-shadow:inset 0 0 0 2px #232b3a;color:transparent;cursor:default}.slots.is-solved .slot{background:var(--good);box-shadow:inset 0 0 0 2px var(--good);color:#f2fff8}.slots.is-shake{animation:shake .34s ease-in-out}@keyframes drop{0%{transform:translateY(-14%) scale(.9)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}.toast,.float{position:absolute;inset-inline:0;margin:0;text-align:center;pointer-events:none}.toast{top:4px}.toast span{display:inline-block;max-width:94%;padding:5px 12px;border-radius:99px;background:var(--warn);color:var(--ink);font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.float{bottom:6px;font-size:20px;font-weight:800;color:var(--good)}.float.is-rise{animation:rise .9s ease-out forwards}@keyframes rise{0%{transform:translateY(6px);opacity:0}25%{transform:translateY(0);opacity:1}to{transform:translateY(-26px);opacity:0}}.controls{display:flex;gap:8px;flex:none;order:2}.how{flex:none;margin:0;padding-inline-end:56px;font-size:12.5px;line-height:1.35;color:var(--muted);text-align:center}.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:12px;background:#090c12c7;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.card{width:min(100%,340px);max-height:100%;overflow:auto;padding:16px;border-radius:16px;background:var(--panel);box-shadow:0 18px 44px #00000073;text-align:center}.card-title{margin:0 0 6px;font-size:22px;font-weight:800}.card-line{margin:0 0 2px;font-size:14px;color:var(--muted)}.card-badge{margin:8px 0 0;padding:5px 10px;border-radius:99px;display:inline-block;background:var(--warn);color:var(--ink);font-size:13px;font-weight:800}.stats{display:flex;justify-content:center;gap:10px;margin:12px 0}.stat{flex:1;padding:8px 4px;border-radius:12px;background:var(--panel-2)}.stat-value{margin:0;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.stat-label{margin-top:2px;font-size:11.5px;color:var(--muted)}.card .btn-primary{width:100%;position:sticky;bottom:0}@media(max-height:340px){.stage{flex-direction:row;gap:6px}.controls{order:-1;flex-direction:column;justify-content:center}.card{padding:10px}.card-title{margin-bottom:2px;font-size:18px}.card-line{font-size:12.5px}.card-badge{margin-top:4px;padding:3px 8px;font-size:11.5px}.stats{gap:8px;margin:8px 0}.stat{padding:4px}.stat-value{font-size:17px}.stat-label{font-size:10.5px}.game{gap:5px;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}.how{display:none}.chip{min-height:32px;font-size:13px}.btn{min-height:38px;min-width:38px}.controls{gap:6px}.clock{padding:2px 8px}.clock-track{height:6px}}@media(max-height:235px){.game{gap:4px}.chip{min-height:28px;padding-inline:7px;font-size:12px}.btn{min-height:32px;min-width:32px}.stage,.controls{gap:4px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}