*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a1a;--surface: #12122a;--border: #2a2a4a;--text: #c0c0e0;--text-dim: #6a6a8a;--accent: #00f0f0}html,body,#root{height:100%;width:100%;overflow:hidden}@media (max-width: 640px){html,body,#root{overflow:auto;-webkit-overflow-scrolling:touch}}body{background:var(--bg);color:var(--text);font-family:"Press Start 2P",monospace;font-size:10px;line-height:1.6}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;padding:10px}header h1{font-size:18px;letter-spacing:4px;color:var(--text-dim)}header .accent{color:var(--accent)}.game-container{display:flex;gap:16px;align-items:flex-start}.side-panel{display:flex;flex-direction:column;gap:12px;width:120px}.panel{background:var(--surface);border:2px solid var(--border);border-radius:4px;padding:8px}.panel h3{font-size:8px;color:var(--text-dim);text-align:center;margin-bottom:6px;letter-spacing:2px}.board-wrapper{position:relative}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a1af2;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer;border:2px solid var(--border);border-radius:4px}.start-text{text-align:center}.start-title{font-size:24px;color:var(--accent);margin-bottom:20px;letter-spacing:6px}.start-prompt{font-size:10px;color:var(--text-dim);margin-bottom:24px;animation:blink 1.2s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.controls-info{font-size:7px;color:var(--text-dim);line-height:2.4}.controls-info kbd{background:var(--border);padding:1px 4px;border-radius:2px;font-family:"Press Start 2P",monospace;font-size:6px;color:var(--text);margin-right:4px}.score-panel{display:flex;flex-direction:column;gap:8px}.score-item{display:flex;flex-direction:column;gap:2px}.score-item .label{font-size:7px;color:var(--text-dim);letter-spacing:1px}.score-item .value{font-size:11px;color:var(--text)}.high-scores{font-size:7px}.scores-table-wrapper{max-height:200px;overflow-y:auto}.scores-table{width:100%;border-collapse:collapse;font-size:6px}.scores-table th{color:var(--text-dim);text-align:left;padding:3px 2px;border-bottom:1px solid var(--border);font-size:6px}.scores-table td{padding:3px 2px;color:var(--text);font-size:6px}.scores-table .name-cell{max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scores-table .empty{text-align:center;color:var(--text-dim);padding:12px}.scores-table .highlight{background:#00f0f01a}.submit-score{margin-top:8px;display:flex;gap:4px}.submit-score input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--accent);padding:4px 6px;border-radius:3px;font-family:"Press Start 2P",monospace;font-size:7px;outline:none;min-width:0}.submit-score input:focus{border-color:var(--accent)}.submit-score input::placeholder{color:var(--text-dim)}.submit-score button{background:var(--accent);border:none;color:var(--bg);padding:4px 8px;border-radius:3px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:7px;white-space:nowrap}.submit-score button:hover{background:#0ff}.submit-score button:disabled{opacity:.4;cursor:default}.scores-table-wrapper::-webkit-scrollbar{width:4px}.scores-table-wrapper::-webkit-scrollbar-track{background:var(--bg)}.scores-table-wrapper::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.password-gate{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg)}.gate-box{background:var(--surface);border:2px solid var(--border);border-radius:4px;padding:32px 24px;text-align:center;width:340px}.gate-box h1{font-size:18px;color:var(--text-dim);margin-bottom:8px;letter-spacing:4px}.gate-box .accent{color:var(--accent)}.gate-box p{font-size:7px;color:var(--text-dim);margin-bottom:20px}.gate-box input{width:100%;background:var(--bg);border:2px solid var(--border);color:var(--accent);padding:10px;border-radius:3px;font-family:"Press Start 2P",monospace;font-size:9px;text-align:center;outline:none}.gate-box input:focus{border-color:var(--accent)}.gate-box input::placeholder{color:var(--text-dim);font-size:7px}.gate-box button{width:100%;margin-top:12px;background:var(--accent);border:none;color:var(--bg);padding:10px;border-radius:3px;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:9px}.gate-box button:hover{background:#0ff}.gate-box button:disabled{opacity:.4;cursor:default}.gate-error{color:#f44;font-size:7px;margin-top:12px}.mobile-only,.mobile-top-bar,.mobile-scores-section,.touch-controls{display:none}@media (max-width: 640px){.desktop-only,.desktop-only-flex{display:none!important}.mobile-only{display:block}.mobile-top-bar{display:flex}.mobile-scores-section{display:block}.touch-controls{display:flex}}@media (max-width: 640px){.app{padding:4px;gap:4px;justify-content:flex-start}.app .game-container{flex-direction:column;gap:4px;align-items:center;width:100%}.app .board-wrapper canvas{max-width:100%;max-height:55vh;height:auto;width:auto}}.mobile-top-bar{gap:6px;align-items:stretch;width:100%;max-width:300px;justify-content:center}.mobile-top-bar .panel{flex:1;padding:4px;min-width:0}.mobile-top-bar .panel h3{font-size:6px;margin-bottom:3px}.mobile-top-bar .score-panel{gap:4px}.mobile-top-bar .score-item .label{font-size:5px}.mobile-top-bar .score-item .value{font-size:8px}.touch-controls{justify-content:space-between;align-items:center;width:100%;max-width:360px;padding:4px 8px;gap:8px;touch-action:manipulation;user-select:none;-webkit-user-select:none}.touch-controls-hidden{visibility:hidden;height:0;padding:0;overflow:hidden}.dpad{display:grid;grid-template-areas:". up ." "left center right" ". down .";grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:2px}.dpad-up{grid-area:up}.dpad-left{grid-area:left}.dpad-center{grid-area:center}.dpad-right{grid-area:right}.dpad-down{grid-area:down}.action-buttons{display:flex;flex-direction:column;gap:6px}.touch-btn{width:48px;height:48px;border:2px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .1s}.touch-btn:active{background:var(--border)}.touch-btn:disabled{opacity:.2;background:transparent}.dpad-center:disabled{cursor:default}.action-btn{width:56px;height:56px;font-size:22px}.hard-drop-btn{border-color:var(--accent);color:var(--accent)}.hold-btn{border-color:#f0a000;color:#f0a000;font-size:16px;font-weight:700}.scores-toggle{width:100%;max-width:300px;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);padding:6px;border-radius:4px;font-family:"Press Start 2P",monospace;font-size:7px;cursor:pointer;text-align:center}.scores-toggle:hover{color:var(--text);border-color:var(--accent)}.mobile-scores{width:100%;max-width:300px}.mobile-scores .panel{max-height:180px;overflow-y:auto}@media (max-width: 640px) and (max-height: 500px){.app{flex-direction:row;gap:6px;padding:4px}.app .game-container{flex-direction:row;align-items:flex-start;gap:4px}.app .board-wrapper canvas{max-height:95vh;width:auto}.mobile-top-bar{flex-direction:column;width:auto;max-width:none;gap:2px}.mobile-top-bar .panel{padding:2px 4px}.touch-controls{flex-direction:column;gap:4px;max-width:none;width:auto;padding:2px}.action-buttons{flex-direction:row;gap:4px}.action-btn{width:40px;height:40px;font-size:16px}.dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px)}.touch-btn{width:36px;height:36px;font-size:14px}.mobile-scores-section{display:none!important}}