@layer base,game;@layer game{.game-root{--bg-a: #0d1117;--bg-b: #161b22;--board-fill: #1c2333;--board-border: #30363d;--hole-empty: #0d1117;--hole-ring: #21262d;--peg: #c9954c;--peg-shine: #e8b86d;--peg-shadow: #7a5a28;--peg-selected: #f5c842;--peg-sel-glow: rgba(245, 200, 66, .6);--peg-valid: rgba(74, 222, 128, .18);--peg-valid-ring: rgba(74, 222, 128, .55);--hole-invalid: #0d1117;--text: #e6edf3;--text-dim: rgba(230, 237, 243, .45);--accent: #388bfd;--panel: rgba(255, 255, 255, .04);--panel-border: rgba(255, 255, 255, .08);--gold: #fbbf24;--gold-glow: rgba(251, 191, 36, .4);--win: #4ade80;--lose: #f87171;--charged: #22d3ee;--charged-shine: #a5f3fc;--charged-shadow: #0e7490;--charged-glow: rgba(34, 211, 238, .55);--spawn-glow: rgba(34, 211, 238, .35);--drain: #f87171;--drain-shine: #fca5a5;--drain-shadow: #991b1b;--drain-glow: rgba(248, 113, 113, .55);--frozen: #93c5fd;--frozen-shine: #dbeafe;--frozen-shadow: #1e40af;--frozen-glow: rgba(147, 197, 253, .5);#hud{display:flex;gap:8px}.stat{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:10px 20px;text-align:center;min-width:80px}.stat-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:3px}.stat-value{font-size:1.3rem;color:var(--accent);display:block;line-height:1}#board{display:grid;grid-template-columns:repeat(7,45px);grid-template-rows:repeat(7,45px);gap:6px;background:var(--board-fill);padding:16px;border-radius:20px;border:1px solid var(--board-border);box-shadow:0 24px 48px #0009,0 0 0 1px #ffffff0a,inset 0 1px #ffffff0d;position:relative}#board-wrap{position:relative;width:max-content}#win-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;background:#0d1117eb;backdrop-filter:blur(2px);border-radius:20px;border:1px solid rgba(255,255,255,.08);text-align:center;opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .18s ease,transform .18s ease}#win-overlay.visible{opacity:1;pointer-events:auto;transform:scale(1)}.win-title{font-size:1.8rem;font-weight:800;color:var(--gold);text-shadow:0 0 14px var(--gold-glow)}.win-highscore{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--win);opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}.win-highscore.visible{opacity:1;transform:translateY(0)}.win-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.win-new-game{padding:10px 22px;background:#ffffff14;color:var(--text);font-size:.88rem;font-weight:700;letter-spacing:.04em;border:1px solid rgba(255,255,255,.14);border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,transform .08s}.win-new-game:hover{background:#ffffff1f;border-color:#fff3}.win-new-game:active{transform:scale(.97)}.cell{width:52px;height:52px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}.cell.invalid{visibility:hidden;pointer-events:none}.cell.empty{background:var(--hole-empty);box-shadow:inset 0 2px 6px #000c,0 0 0 1px var(--hole-ring);cursor:default}.cell.valid-target{background:var(--peg-valid);box-shadow:inset 0 2px 6px #0006,0 0 0 2px var(--peg-valid-ring),0 0 12px 3px #4ade8033;cursor:pointer;animation:target-pulse .9s ease-in-out infinite alternate}.cell.hover-target{background:#4ade8017;box-shadow:inset 0 2px 6px #0006,0 0 0 1.5px #4ade804d;transition:box-shadow .15s,background .15s}.peg{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--peg-shine) 0%,var(--peg) 50%,var(--peg-shadow) 100%);box-shadow:0 3px 0 var(--peg-shadow),0 4px 8px #00000080,inset 0 1px #fff3;cursor:pointer;transition:transform .1s,box-shadow .1s;position:relative;z-index:1}.peg:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 5px 0 var(--peg-shadow),0 8px 16px #00000080,inset 0 1px #ffffff40}.peg.selected{background:radial-gradient(circle at 38% 32%,#fff4b0 0%,var(--peg-selected) 50%,#a07800 100%);box-shadow:0 3px #7a5800,0 0 0 3px var(--peg-selected),0 0 20px 6px var(--peg-sel-glow),0 4px 12px #00000080;transform:translateY(-3px) scale(1.1);animation:peg-selected-breathe .8s ease-in-out infinite alternate}.peg.jumping{animation:peg-jump .22s ease-out forwards}.peg.removing{animation:peg-remove .2s ease-in forwards;pointer-events:none}.peg.charged{background:radial-gradient(circle at 38% 32%,var(--charged-shine) 0%,var(--charged) 50%,var(--charged-shadow) 100%);box-shadow:0 3px 0 var(--charged-shadow),0 4px 8px #00000080,0 0 0 2px var(--charged),0 0 14px 4px var(--charged-glow),inset 0 1px #ffffff4d;animation:charged-pulse 1s ease-in-out infinite alternate}.peg.charged.selected{background:radial-gradient(circle at 38% 32%,#fff 0%,var(--charged-shine) 40%,var(--charged) 100%);box-shadow:0 3px 0 var(--charged-shadow),0 0 0 3px var(--charged),0 0 28px 10px var(--charged-glow),0 4px 12px #00000080}.peg.drain{background:radial-gradient(circle at 38% 32%,var(--drain-shine) 0%,var(--drain) 50%,var(--drain-shadow) 100%);box-shadow:0 3px 0 var(--drain-shadow),0 4px 8px #00000080,0 0 0 2px var(--drain),0 0 14px 4px var(--drain-glow),inset 0 1px #ffffff4d;animation:drain-pulse 1s ease-in-out infinite alternate}.peg.drain.selected{background:radial-gradient(circle at 38% 32%,#fff 0%,var(--drain-shine) 40%,var(--drain) 100%);box-shadow:0 3px 0 var(--drain-shadow),0 0 0 3px var(--drain),0 0 28px 10px var(--drain-glow),0 4px 12px #00000080;animation:none}.peg.draining{animation:drain-burst .35s ease-in forwards;pointer-events:none}.peg.frozen{background:radial-gradient(circle at 38% 32%,var(--frozen-shine) 0%,var(--frozen) 55%,var(--frozen-shadow) 100%);box-shadow:0 3px 0 var(--frozen-shadow),0 4px 8px #00000080,0 0 0 2px var(--frozen),0 0 12px 3px var(--frozen-glow),inset 0 1px #fff6;cursor:not-allowed;animation:frozen-shimmer 2.5s ease-in-out infinite alternate}.frozen-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#fff;text-shadow:0 0 6px var(--frozen-shadow),0 1px 2px rgba(0,0,0,.8);pointer-events:none;z-index:2}.peg.thawing{animation:peg-thaw .45s ease-out forwards}.peg.spawning{animation:spawn-burst .4s cubic-bezier(.34,1.56,.64,1) forwards}#shift-notice{font-size:.82rem;font-weight:600;color:var(--text);letter-spacing:.04em;min-height:1.2em;text-align:center;opacity:0;transition:opacity .3s}#shift-notice.visible{opacity:1}#shift-notice.shift-charged{color:var(--charged);filter:drop-shadow(0 0 5px var(--charged-glow))}#shift-notice.shift-drain{color:var(--drain);filter:drop-shadow(0 0 5px var(--drain-glow))}#shift-notice.shift-chain{color:var(--gold);filter:drop-shadow(0 0 5px var(--gold-glow))}.cell.chain-target{background:#fbbf2426;box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf24b3,0 0 14px 4px #fbbf2440;cursor:pointer;animation:chain-target-pulse .75s ease-in-out infinite alternate}#btn-stop-chain{display:none;border-color:#fbbf2466!important;color:var(--gold)!important}#btn-stop-chain:hover{background:#fbbf2414!important}#btn-stop-chain.visible{display:inline-flex}#btn-free-pin{position:relative}#btn-free-pin .pin-count{display:inline-block;margin-left:6px;background:var(--gold);color:#0d1117;font-size:.7rem;font-weight:700;border-radius:999px;padding:1px 6px;line-height:1.4;vertical-align:middle}#btn-free-pin:disabled .pin-count{background:var(--panel-border);color:var(--text-dim)}#btn-free-pin.active{background:#fbbf241f!important;border-color:#fbbf2499!important;color:var(--gold)!important}.cell.free-pin-target{background:#fbbf2421;box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf248c,0 0 14px 4px #fbbf2433;cursor:cell;animation:free-pin-pulse .85s ease-in-out infinite alternate}#chain-notice{font-size:1.1rem;font-weight:700;letter-spacing:.06em;color:var(--gold);min-height:1.4em;text-align:center;filter:drop-shadow(0 0 8px var(--gold-glow));opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}#chain-notice.visible{opacity:1;transform:translateY(0)}#free-pin-banner{font-size:.85rem;font-weight:600;color:var(--gold);letter-spacing:.04em;text-align:center;min-height:1.2em;filter:drop-shadow(0 0 6px var(--gold-glow));opacity:0;transition:opacity .25s}#free-pin-banner.visible{opacity:1}.free-pin-pip{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 5px var(--gold-glow);margin:0 2px;vertical-align:middle;transition:background .3s,box-shadow .3s,opacity .3s}.free-pin-pip.unearned{background:var(--panel-border);box-shadow:none;opacity:.3}.free-pin-pip.spent{background:#4ade80;box-shadow:0 0 4px #4ade8066;opacity:.7}.cell.chain-target{background:#fbbf241f;box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf2499,0 0 14px 4px #fbbf2433;cursor:pointer;animation:chain-target-pulse .75s ease-in-out infinite alternate}button.ctrl#btn-stop-chain{border-color:#fbbf2459;color:var(--gold);display:none}button.ctrl#btn-stop-chain.visible{display:inline-block}button.ctrl#btn-stop-chain:hover{background:#fbbf2414;border-color:#fbbf2499}button.ctrl#btn-free-pin{border-color:#fbbf244d;color:var(--gold)}button.ctrl#btn-free-pin:hover:not(:disabled){background:#fbbf2414;border-color:#fbbf248c}button.ctrl#btn-free-pin.active{background:#fbbf2426;border-color:var(--gold);box-shadow:0 0 10px 2px var(--gold-glow)}.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}button.ctrl{padding:10px 22px;background:var(--panel);color:var(--text);font-size:.88rem;font-weight:600;letter-spacing:.04em;border:1px solid var(--panel-border);border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,transform .08s}button.ctrl:hover{background:#ffffff17;border-color:#ffffff29}button.ctrl:active{transform:scale(.96)}button.ctrl:disabled{opacity:.35;cursor:default}button.ctrl#btn-undo{border-color:#388bfd4d;color:var(--accent)}button.ctrl#btn-undo:hover{background:#388bfd14}#status{font-size:1.1rem;font-weight:700;min-height:1.4em;letter-spacing:.04em;text-align:center;transition:opacity .3s}#status.win{color:var(--win);filter:drop-shadow(0 0 8px rgba(74,222,128,.5))}#status.lose{color:var(--lose);filter:drop-shadow(0 0 8px rgba(248,113,113,.4))}#status.win,#status.lose{animation:status-pop .4s cubic-bezier(.34,1.56,.64,1)}#hud{margin-bottom:4px}#board{margin-bottom:0}#console{width:100%;max-width:420px;height:2.8em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#00000040;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:4px 14px;overflow:hidden}#console-line1{font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--text);text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}#console-line2{font-size:.72rem;font-weight:400;letter-spacing:.02em;color:var(--text-dim);text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}#console-line1.win{color:var(--win)}#console-line1.lose{color:var(--lose)}#console-line1.charged{color:var(--charged)}#console-line1.drain{color:var(--drain)}#console-line1.gold{color:var(--gold)}.controls{margin-top:4px}.cell:focus{outline:none}.cell:focus-visible,kbd{font-size:.72em;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:1px 5px;color:var(--text-dim)}.cell.kb-focus{outline:2px solid #7dd3fc;outline-offset:2px;border-radius:50%;z-index:2}.cell.chain-target.kb-focus,.cell.valid-target.kb-focus{outline-color:#fff;outline-width:3px}}@keyframes target-pulse{0%{box-shadow:inset 0 2px 6px #0006,0 0 0 2px var(--peg-valid-ring),0 0 8px 2px #4ade8026}to{box-shadow:inset 0 2px 6px #0006,0 0 0 2px var(--peg-valid-ring),0 0 18px 6px #4ade8059}}@keyframes peg-selected-breathe{0%{box-shadow:0 3px #7a5800,0 0 0 3px var(--peg-selected),0 0 14px 4px var(--peg-sel-glow),0 4px 12px #00000080}to{box-shadow:0 3px #7a5800,0 0 0 3px var(--peg-selected),0 0 28px 10px var(--peg-sel-glow),0 4px 12px #00000080}}@keyframes peg-jump{0%{transform:scale(1) translateY(0)}40%{transform:scale(1.15) translateY(-8px)}to{transform:scale(1) translateY(0)}}@keyframes peg-remove{0%{transform:scale(1);opacity:1}60%{transform:scale(1.3);opacity:.5}to{transform:scale(0);opacity:0}}@keyframes charged-pulse{0%{box-shadow:0 3px 0 var(--charged-shadow),0 4px 8px #00000080,0 0 0 2px var(--charged),0 0 10px 3px var(--charged-glow),inset 0 1px #ffffff4d}to{box-shadow:0 3px 0 var(--charged-shadow),0 4px 8px #00000080,0 0 0 2px var(--charged),0 0 22px 8px var(--charged-glow),inset 0 1px #ffffff4d}}@keyframes drain-pulse{0%{box-shadow:0 3px 0 var(--drain-shadow),0 4px 8px #00000080,0 0 0 2px var(--drain),0 0 10px 3px var(--drain-glow),inset 0 1px #ffffff4d}to{box-shadow:0 3px 0 var(--drain-shadow),0 4px 8px #00000080,0 0 0 2px var(--drain),0 0 22px 8px var(--drain-glow),inset 0 1px #ffffff4d}}@keyframes drain-burst{0%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 var(--drain-glow)}40%{transform:scale(1.3);opacity:.8;box-shadow:0 0 0 10px var(--drain-glow)}to{transform:scale(0);opacity:0}}@keyframes frozen-shimmer{0%{box-shadow:0 3px 0 var(--frozen-shadow),0 4px 8px #00000080,0 0 0 2px var(--frozen),0 0 8px 2px var(--frozen-glow),inset 0 1px #fff6}to{box-shadow:0 3px 0 var(--frozen-shadow),0 4px 8px #00000080,0 0 0 2px var(--frozen),0 0 18px 6px var(--frozen-glow),inset 0 1px #fff9}}@keyframes peg-thaw{0%{transform:scale(1.1);filter:brightness(1.6) saturate(.3)}50%{transform:scale(.95);filter:brightness(1.2) saturate(.6)}to{transform:scale(1);filter:brightness(1) saturate(1)}}@keyframes spawn-burst{0%{transform:scale(0);opacity:1;box-shadow:0 0 0 0 var(--spawn-glow)}40%{transform:scale(1.4);opacity:.9;box-shadow:0 0 0 8px var(--spawn-glow)}to{transform:scale(1);opacity:1;box-shadow:0 3px 0 var(--peg-shadow),0 4px 8px #00000080,inset 0 1px #fff3}}@keyframes chain-target-pulse{0%{box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf2480,0 0 8px 2px #fbbf2426}to{box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf24e6,0 0 20px 7px #fbbf2466}}@keyframes free-pin-pulse{0%{box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf2466,0 0 8px 2px #fbbf2426}to{box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf24cc,0 0 20px 6px #fbbf2459}}@keyframes chain-target-pulse{0%{box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf2473,0 0 8px 2px #fbbf241f}to{box-shadow:inset 0 2px 6px #0006,0 0 0 2px #fbbf24d9,0 0 20px 6px #fbbf2452}}@keyframes status-pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}}@media(width>=728px){#board{grid-template-columns:repeat(7,52px);grid-template-rows:repeat(7,52px)}}