:root{--background: #1a1a2e;--text: #ffffff;--accent: #e94560;--panel-bg: #16213e;--success: #00ff88}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,sans-serif;background-color:var(--background);color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:center}#app{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px}header h1{font-size:2.5rem;font-weight:700;letter-spacing:.5em;color:var(--text);text-shadow:0 0 20px var(--accent)}.header-score{display:none}main{position:relative;display:flex;gap:30px;align-items:flex-start}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;background:var(--panel-bg);border-radius:8px;min-width:400px;max-width:600px;width:100%}.footer-score{display:flex;align-items:center;gap:15px}.score-label{font-size:.875rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#ffffffb3}.score-value{font-size:2.5rem;font-weight:700;color:var(--accent)}.high-score-inline{font-size:.875rem;font-weight:500;color:#ffffff80;margin-left:15px;text-transform:uppercase;letter-spacing:.05em}.piece-sidebar{display:flex;flex-direction:column;gap:30px;min-width:150px}.preview-section,.score-section{background:var(--panel-bg);padding:15px;border-radius:8px;text-align:center}.preview-section h2{font-size:.875rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#ffffffb3;margin-bottom:10px}.current-piece{margin-bottom:20px}.preview-canvas.current{cursor:grab;border:2px solid rgba(0,255,136,.3);animation:pulse-glow 3s ease-in-out infinite}.preview-canvas.current.dragging{animation:none;border-color:#0f86;box-shadow:none}.preview-canvas.current:active{cursor:grabbing}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #00ff884d;border-color:#00ff884d}50%{box-shadow:0 0 20px #0f89;border-color:#0f89}}.preview-stack{display:flex;flex-direction:column;gap:10px;align-items:center}.preview-canvas{display:block;border-radius:4px}.preview-canvas.next{opacity:.7}@keyframes score-gulp{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.score-value.gulping{animation:score-gulp .12s ease-out}@keyframes electric-pulse{0%,to{filter:brightness(1.3) saturate(1.5);opacity:1}50%{filter:brightness(2) saturate(2);opacity:.85}}.game-board{position:relative}#main-canvas{display:block;border-radius:8px;cursor:pointer}.game-over-overlay{position:fixed;inset:0;background:#1a1a2ef2;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.game-over-overlay.visible{opacity:1;visibility:visible}.game-over-content{text-align:center;padding:30px}.game-over-content h2{font-size:2rem;font-weight:700;color:var(--accent);margin-bottom:15px;text-transform:uppercase;letter-spacing:.1em}.death-reason{font-size:1.1rem;color:#fffc;margin-bottom:20px}.final-score{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.final-score span:first-child{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffffb3}.final-score-value{font-size:3rem;font-weight:700;color:var(--success)}.high-score-display{display:flex;flex-direction:column;gap:5px;margin-bottom:25px}.high-score-display span:first-child{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffffb3}.high-score-value{font-size:1.5rem;font-weight:700;color:var(--accent)}.game-over-overlay.new-high-score .game-over-content{animation:celebrate .8s ease-out}.game-over-overlay.new-high-score .game-over-content h2:before{content:"🎉 "}.game-over-overlay.new-high-score .game-over-content h2:after{content:" 🎉"}.game-over-overlay.new-high-score .game-over-content h2{color:gold;text-shadow:0 0 20px rgba(255,215,0,.6)}@keyframes celebrate{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.game-over-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.restart-button,.reset-high-score-button{background:var(--accent);color:var(--text);border:none;padding:12px 30px;font-size:1rem;font-weight:600;border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;transition:transform .2s ease,box-shadow .2s ease}.reset-high-score-button{background:#ffffff1a;font-size:.875rem;padding:10px 20px}.restart-button:hover,.reset-high-score-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #e9456066}.restart-button:active,.reset-high-score-button:active{transform:translateY(0)}.how-to-play-backdrop{position:fixed;inset:0;background:#000000b3;display:none;justify-content:center;align-items:center;z-index:2000}.how-to-play-modal{background:var(--panel-bg);color:var(--text);border-radius:10px;padding:16px 18px;max-width:340px;width:92%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 6px 32px #00000052;font-size:.97rem}.modal-header{display:flex;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}.modal-header h2{font-size:1.08rem;font-weight:700;color:var(--text);margin:0;letter-spacing:.04em}.modal-body{line-height:1.45;font-size:.97rem}.modal-body h3{font-size:.98rem;font-weight:600;margin-top:10px;margin-bottom:7px;color:var(--accent)}.modal-body p{margin-bottom:8px;color:var(--text)}.modal-body ul{margin-left:16px;margin-bottom:10px}.modal-body li{margin-bottom:5px;color:var(--text);font-size:.95em}.modal-footer{margin-top:15px;text-align:center;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}.modal-got-it-button{background:var(--accent);color:#fff;border:none;padding:8px 28px;font-size:.98rem;font-weight:600;border-radius:6px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.modal-got-it-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #e9456066}.modal-got-it-button:active{transform:translateY(0)}.how-to-play-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--text);font-size:1.2rem;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.how-to-play-button:hover{background:#ffffff26;border-color:#ffffff4d;transform:scale(1.05)}.how-to-play-button:active{transform:scale(.95)}@media(min-width:900px){main{flex-direction:row;align-items:flex-start}.piece-sidebar{order:1;flex-direction:column;min-width:150px;height:400px}.game-board{order:2}.preview-section{background:var(--panel-bg);padding:15px;border-radius:8px;height:100%;display:flex;flex-direction:column;justify-content:space-between}.preview-stack{flex-direction:column;gap:12px}.preview-canvas.current{width:100px;height:100px}.preview-canvas.next{width:70px;height:70px}footer{display:flex}.header-score{display:none}}@media(min-width:600px)and (max-width:899px){main{flex-direction:column;align-items:center}.game-board{order:1}.piece-sidebar{order:2;flex-direction:row;width:100%;max-width:400px;gap:15px;justify-content:center}.preview-section{background:var(--panel-bg);padding:15px;border-radius:8px;width:100%;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:10px 20px;justify-content:center;align-items:start}.preview-section h2:nth-of-type(1){grid-column:1;grid-row:1;font-size:.75rem;margin-bottom:0;text-align:center}.current-piece{grid-column:1;grid-row:2;margin-bottom:0}.preview-section h2:nth-of-type(2){grid-column:2;grid-row:1;font-size:.75rem;margin-bottom:0;text-align:center}.preview-stack{grid-column:2;grid-row:2;display:flex;flex-direction:row;gap:10px;justify-content:center}.preview-canvas.current{width:100px;height:100px}.preview-canvas.next{width:70px;height:70px}footer{display:flex;width:100%;max-width:400px}.header-score{display:none}}@media(max-width:599px){#app{padding:10px}header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px}header h1{font-size:1.8rem;letter-spacing:.3em}.header-score{display:flex;align-items:center;gap:8px}.header-score .score-label{font-size:.75rem}.header-score .score-value{font-size:1.5rem}main{flex-direction:column;align-items:center;gap:15px}.game-board{order:1}.piece-sidebar{order:2;flex-direction:row;width:100%;max-width:400px;gap:10px;justify-content:center}.preview-section{background:var(--panel-bg);padding:10px;border-radius:8px;width:100%;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:8px 15px;justify-content:center;align-items:start}.preview-section h2:nth-of-type(1){grid-column:1;grid-row:1;font-size:.65rem;margin-bottom:0;text-align:center}.current-piece{grid-column:1;grid-row:2;margin-bottom:0}.preview-section h2:nth-of-type(2){grid-column:2;grid-row:1;font-size:.65rem;margin-bottom:0;text-align:center}.preview-stack{grid-column:2;grid-row:2;display:flex;flex-direction:row;gap:8px;justify-content:center}.preview-canvas.current{width:80px;height:80px}.preview-canvas.next{width:60px;height:60px}footer{display:none}#main-canvas{max-width:100%;height:auto}.how-to-play-modal{padding:20px;font-size:.95rem}.modal-header h2{font-size:1.3rem}.modal-body h3{font-size:1rem}}