.board{--cell-size: 38px;display:inline-flex;flex-direction:column;gap:2px;padding:4px 3px 3px;background:var(--border);border-radius:8px;box-shadow:0 8px 32px #0006}.board-row{display:flex;gap:2px}.board-cell{width:var(--cell-size);height:var(--cell-size);position:relative;background:var(--cell-empty);border-radius:4px;transform:translate(1px,1px);transition:all .15s cubic-bezier(.4,0,.2,1)}.board-cell.box-0-1,.board-cell.box-1-0,.board-cell.box-1-2,.board-cell.box-2-1{background:#1f1f1f}.board-cell.filled{background:var(--accent);box-shadow:inset 0 0 8px #0000004d}.board-cell.highlighted{background:var(--accent-dim);box-shadow:inset 0 0 0 2px var(--highlight)}.board-cell.will-clear{background:#ff1b6e33;box-shadow:inset 0 0 0 2px #ff80b4a6}.board-cell.box-0-0,.board-cell.box-0-1,.board-cell.box-1-0,.board-cell.box-1-1{border-right:1px solid var(--border)}.board-cell.box-0-0,.board-cell.box-0-1,.board-cell.box-0-2,.board-cell.box-1-0,.board-cell.box-1-1,.board-cell.box-1-2{border-bottom:1px solid var(--border)}.board-row .board-cell:nth-child(3n){border-right:2px solid var(--border)}.board-row:nth-child(3n) .board-cell{border-bottom:2px solid var(--border)}@media (max-width: 500px){.board{--cell-size: clamp(28px, calc((100vw - 56px) / 9), 38px);gap:1px;padding:2px}}.combo-cinematic{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:40;overflow:visible}.combo-cinematic__burst{position:absolute;left:var(--combo-x, 50%);top:var(--combo-y, 50%);width:var(--combo-size, 260px);height:var(--combo-size, 260px);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.combo-cinematic__rings{position:absolute;top:0;right:0;bottom:0;left:0}.combo-cinematic__rings span{position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid rgba(255,255,255,.75);border-radius:50%;animation:combo-ring 1.4s ease-out forwards}.combo-cinematic__rings span:nth-child(2){opacity:.6;animation-delay:.08s}.combo-cinematic__rings span:nth-child(3){opacity:.35;animation-delay:.16s}.combo-cinematic__flare{position:absolute;top:-18%;right:-18%;bottom:-18%;left:-18%;border-radius:50%;background:radial-gradient(circle,#ff3b6c59,#ff3b6c00);mix-blend-mode:screen;filter:blur(8px);animation:combo-flare 1.2s ease-out forwards}.combo-cinematic__label{position:absolute;top:0;left:50%;transform:translate(-50%,-120%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#141423b3;border:1px solid rgba(255,255,255,.3);border-radius:999px;box-shadow:0 0 32px #ff3b6c73;font-size:12px;animation:combo-label 1.4s ease-out forwards;z-index:2}.combo-cinematic__label strong{font-size:22px;letter-spacing:.02em;color:#ffd7f0}.combo-cinematic.combo-mega .combo-cinematic__label{background:#140a28c7;border-color:#9961ff99;box-shadow:0 0 38px #9961ff80}.combo-cinematic.combo-ultra .combo-cinematic__label{background:#0a1e3cc7;border-color:#5ae1ffb3;box-shadow:0 0 42px #5ae1ff99}@keyframes combo-ring{0%{transform:scale(.35);opacity:0}25%{opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes combo-flare{0%{transform:scale(.7);opacity:.8}to{transform:scale(1.3);opacity:0}}@keyframes combo-label{0%{transform:translate(-50%,-120%) scale(.7);opacity:0}25%{transform:translate(-50%,-120%) scale(1);opacity:1}80%{opacity:1}to{transform:translate(-50%,-120%) scale(.9);opacity:0}}.replay-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:24px;background:#05050fd1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.replay-panel{width:min(90vw,960px);max-height:90vh;padding:32px;background:var(--bg-card);border-radius:20px;box-shadow:0 24px 80px #0000008c;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.replay-header{display:flex;justify-content:space-between;align-items:flex-start}.replay-subtitle{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}.replay-header h3{margin:4px 0 0;font-size:32px;letter-spacing:-.02em}.replay-close{width:40px;height:40px;border-radius:50%;background:var(--bg-dark);border:1px solid var(--border);font-size:24px;line-height:1;transition:background-color .2s ease,transform .2s ease}.replay-close:hover{background:var(--accent-dim);transform:scale(1.05)}.replay-board{position:relative;align-self:center;overflow:visible}.replay-board .board{--cell-size: 34px}.replay-meta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.replay-meta-label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}.replay-meta-value{font-size:24px;font-weight:700;color:var(--accent)}.replay-note{text-align:center;color:var(--text-secondary);margin:-4px 0 8px}.replay-speed{display:flex;flex-direction:column;gap:6px;width:100%;max-width:360px;margin:8px auto 4px}.replay-speed label{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary)}.replay-speed input{width:100%}.replay-controls{display:flex;gap:12px;justify-content:center}.replay-controls button{min-width:72px;padding:12px 16px;border-radius:10px;background:var(--bg-dark);border:1px solid var(--border);font-weight:600;transition:background-color .2s ease,border-color .2s ease}.replay-controls button:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent)}.replay-controls button:disabled{opacity:.5;cursor:not-allowed}.replay-empty{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}.replay-empty button{padding:12px 20px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600}@media (max-width: 640px){.replay-panel{padding:20px}.replay-header h3{font-size:26px}.replay-meta{flex-direction:column;align-items:center}.replay-board .board{--cell-size: clamp(24px, calc((100vw - 96px) / 9), 32px)}}.score-popup{position:fixed;z-index:999;font-size:32px;font-weight:700;color:#ffd7f0;text-shadow:0 2px 15px rgba(246,53,133,.9);pointer-events:none;animation:scorePopup 1.5s cubic-bezier(.4,0,.2,1) forwards}@keyframes scorePopup{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,-120%) scale(1)}}.shape-piece{display:flex;align-items:center;padding:10px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform .2s cubic-bezier(.4,0,.2,1)}.shape-piece:hover:not(.disabled):not(.dragging){transform:scale(1.02)}.shape-piece:active:not(.disabled){cursor:grabbing}.shape-piece.dragging{opacity:.9;cursor:grabbing}.shape-piece.disabled{opacity:.3;cursor:not-allowed}.shape-cell{fill:var(--accent);transition:fill .2s ease}.shape-piece.disabled .shape-cell{fill:var(--text-secondary)}.new-piece .shape-piece{animation:pieceFadeIn .35s ease}@keyframes pieceFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 500px){.shape-piece{padding:5px}}.shape-selector{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px;margin-top:5px}.shape-container{display:flex;align-items:center;justify-content:center;width:120px;height:120px;padding:6px;background:var(--bg-card);border-radius:8px;transition:all .2s ease}.shape-container:has(.shape-piece:hover:not(.disabled):not(.dragging)){box-shadow:0 4px 16px #ff1b6e26}@media (max-width: 500px){.shape-selector{flex-wrap:wrap;gap:8px;padding:6px 6px 4px;margin-top:0}.shape-container{flex:1 1 48%;width:108px;height:108px;padding:4px}}.game{display:flex;flex-direction:column;align-items:center;min-height:75vh;padding:16px;position:relative}.game-header{width:100%;max-width:900px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"title score" "actions best";column-gap:16px;row-gap:12px;align-items:start;margin-bottom:24px}.game-title{display:flex;align-items:center;gap:10px;grid-area:title}.game-title h1{font-size:48px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),var(--accent-dim));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.game-actions{display:flex;gap:12px;grid-area:actions}.game-stats{display:contents}.stat{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.stat-score{grid-area:score;align-items:flex-end;justify-content:flex-end}.stat-best{grid-area:best;align-items:flex-end;justify-content:flex-end}.stat-label{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.stat-value{font-size:32px;font-weight:700;line-height:1;color:var(--accent)}.sound-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:20px;color:var(--text-primary);background:var(--bg-card);border-radius:8px;transition:background-color .2s ease,transform .2s ease}.sound-toggle svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;display:block;margin:0}.sound-toggle:hover{background:var(--accent-dim);transform:scale(1.05)}.game-board{position:relative;overflow:visible}.shape-selector{margin-top:4px}.game.resetting .game-board,.game.resetting .shape-selector{animation:resetFade .45s ease}@keyframes resetFade{0%{opacity:1;transform:scale(1)}30%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1000;background:#0a0a0fd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease}.game-over-modal{max-width:400px;padding:48px;text-align:center;background:var(--bg-card);border-radius:16px;box-shadow:0 16px 64px #0009;animation:slideUp .4s cubic-bezier(.4,0,.2,1)}.game-over-modal h2{font-size:36px;font-weight:700;margin-bottom:24px}.game-over-message{margin:-8px 0 16px;color:var(--text-secondary)}.final-score{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.final-score-label{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.final-score-value{font-size:56px;font-weight:700;line-height:1;color:var(--accent)}.new-high-score{font-size:16px;font-weight:600;margin-bottom:24px;color:var(--accent);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.restart-button{width:100%;padding:16px 32px;font-size:16px;font-weight:600;color:#fff;background:var(--accent);border-radius:8px;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}.restart-button:hover{background:#e01560;transform:scale(1.02);box-shadow:0 8px 24px #ff1b6e66}.restart-button:active{transform:translateY(0)}.restart-button.secondary{margin-top:12px;background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}.restart-button.secondary:hover{background:#ff3b6c1f;color:#fff;transform:scale(1.01)}@media (max-width: 500px){.game{padding:20px 12px 32px}.game-header{column-gap:10px;row-gap:8px}.game-title{gap:8px;justify-content:flex-start}.game-title h1{font-size:36px}.game-actions{display:flex;gap:10px;justify-content:flex-start}.sound-toggle{width:36px;height:36px;font-size:18px}.stat-value{font-size:26px}.game-board{width:100%;display:flex;justify-content:center;padding-bottom:0}.game-over-modal{padding:32px 28px;width:calc(100% - 48px)}.game-over-modal h2{font-size:28px}.final-score-value{font-size:42px}.restart-button{padding:14px}}.solver{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:16px}.solver-header{width:100%;max-width:900px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"title score" "subtitle moves";column-gap:16px;row-gap:12px;align-items:start;margin-bottom:32px}.solver-title{display:flex;flex-direction:column;grid-area:title}.solver-title h1{font-size:48px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),var(--accent-dim));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.solver-title-row{display:flex;align-items:center;gap:10px}.solver-subtitle{display:inline-block;grid-area:subtitle;margin-top:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}.solver-stats{display:contents}.stat-score{display:flex;flex-direction:column;gap:4px;grid-area:score;align-items:flex-end}.stat-moves{display:flex;flex-direction:column;gap:4px;grid-area:moves;align-items:flex-end}.solver-board{position:relative;display:inline-block;margin-bottom:32px;overflow:visible}.solver-shapes{display:flex;gap:24px;margin-bottom:32px}.solver-shape{display:flex;flex-direction:column;align-items:center;gap:8px}.shape-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.shape-preview{display:flex;align-items:center;justify-content:center;width:96px;height:96px;padding:8px;background:var(--bg-card);border-radius:8px}.solver-drag-ghost{opacity:.8}@keyframes solverdrag{0%{transform:translate(0)}to{transform:translate(var(--end-x),var(--end-y))}}.solver-controls{display:flex;flex-direction:column;gap:20px;width:100%;max-width:500px;padding:24px;margin-bottom:100px;background:var(--bg-card);border-radius:12px}.control-group{display:flex;flex-direction:column;gap:8px}.control-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.control-group label{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.sound-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;font-size:20px;color:var(--text-primary);background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;transition:background-color .2s ease,transform .2s ease,border-color .2s ease}.sound-toggle svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;display:block}.sound-toggle .mute-icon .mute-line{stroke:#ff2b2b;scale:1.75;transform:translate(-6px,-5px)}.sound-toggle:hover{background:var(--accent-dim);border-color:var(--accent);transform:scale(1.03)}.custom-select{position:relative;width:100%}.custom-select-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;font-size:14px;font-weight:500;color:var(--text-primary);background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.custom-select-toggle:hover{background:var(--bg-card)}.custom-select.open .custom-select-toggle,.custom-select-toggle:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #ff3b6c26}.select-arrow{display:inline-block;width:10px;height:10px;border:2px solid var(--text-secondary);border-left:0;border-top:0;transform:rotate(45deg) translateY(-3px);transition:transform .25s ease,border-color .2s ease}.custom-select.open .select-arrow{transform:rotate(225deg) translateY(-3px);border-color:var(--accent)}.custom-select-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;display:flex;flex-direction:column;gap:4px;width:100%;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 40px #00000059}.custom-select-option{width:100%;padding:10px 12px;text-align:left;color:var(--text-primary);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.custom-select-option:hover{background:var(--bg-dark)}.custom-select-option.selected{color:var(--accent);background:#ff3b6c1a}.control-group input[type=range]{width:100%;height:6px;background:var(--bg-dark);border-radius:3px;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{width:20px;height:20px;background:var(--accent);border:none;border-radius:50%;box-shadow:0 2px 8px #00000040;cursor:pointer;-webkit-appearance:none;transition:transform .2s ease,box-shadow .2s ease}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-group input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--accent);border:none;border-radius:50%;cursor:pointer;transition:transform .2s ease}.control-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.control-buttons{display:flex;gap:12px}.control-buttons button{flex:1;padding:14px 24px;font-size:14px;font-weight:600;background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;transition:background-color .2s ease,border-color .2s ease}.control-buttons button:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent)}.control-buttons button:disabled{opacity:.4;cursor:not-allowed}.solver-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:24px;background:#0a0a0fd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.solver-modal{display:flex;flex-direction:column;gap:18px;width:min(90vw,440px);max-width:420px;padding:40px;text-align:center;background:var(--bg-card);border-radius:16px;box-shadow:0 18px 60px #00000073;animation:slideUp .35s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}.solver-modal h3{margin:0;font-size:28px;font-weight:700}.solver-modal-body{margin:0;line-height:1.6;color:var(--text-secondary)}.solver-modal-actions{display:flex;justify-content:center;gap:12px}.solver-modal-primary,.solver-modal-secondary{min-width:120px;padding:14px 16px;font-weight:700;color:var(--text-primary);background:var(--bg-dark);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:transform .15s ease,background-color .2s ease,border-color .2s ease}.solver-modal-primary{color:#0b0b0b;background:var(--accent);border-color:var(--accent)}.solver-modal-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}.solver-modal-secondary:hover{background:var(--bg-card);transform:translateY(-1px)}@media (max-width: 500px){.solver{padding:20px 12px 32px}.solver-header{column-gap:12px;row-gap:10px}.solver-title-row{display:flex;align-items:center;gap:8px}.solver-title h1{font-size:36px}.solver-subtitle{font-size:12px}.solver-shapes{flex-wrap:wrap;justify-content:center;gap:16px}.shape-preview{width:88px;height:88px}.solver-board{display:flex;justify-content:center;width:100%;padding:0 8px 12px;overflow:visible}.solver-board .board{transform:none}.solver-controls{padding:20px;max-width:100%}.control-buttons{flex-direction:column}.control-buttons button{width:100%}}:root{--bg-dark: #0e0e0e;--bg-card: #161616;--bg-board: #1c1c1f;--accent: #ff1b6e;--accent-soft: #fe9ac4;--accent-dim: #ff1b6e40;--accent-dimmer: rgba(255, 27, 110, .159);--text-primary: #ededf2;--text-secondary: #9a9aa3;--border: #363636;--cell-empty: #252525;--cell-filled: #383838;--highlight: #ff1b6e}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select{font-family:inherit;color:inherit}#root,.app{min-height:100vh;display:flex;flex-direction:column}.nav{position:sticky;top:0;z-index:100;display:flex;justify-content:center;gap:4px;padding:16px;background:var(--bg-card);border-bottom:1px solid var(--border)}.nav-link{padding:12px 32px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-radius:8px;transition:color .2s ease,background-color .2s ease}.nav-link:hover{color:var(--text-primary);background:var(--bg-dark)}.nav-link.active{color:var(--accent);background:var(--accent-dim)}.main{flex:1}.logo-icon{width:44px;height:44px;display:block}@media (max-width: 500px){.nav{padding:10px;gap:6px}.nav-link{padding:10px 18px;font-size:13px;letter-spacing:.04em}.logo-icon{width:38px;height:38px}}
