*{margin:0;padding:0;box-sizing:border-box}body{background:#08080f;color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden;width:100vw;height:100vh}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ffffff2e}#game-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}#ui-root{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}.ui-overlay{width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}.ui-overlay>*{pointer-events:auto}.main-menu{width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#08080f,#0a0a14,#08080f);animation:menu-fade-in .4s ease-out;position:relative;overflow:hidden}@keyframes menu-fade-in{0%{opacity:0}to{opacity:1}}.menu-bg-pieces{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.falling-piece{position:absolute;width:12px;height:12px;border-radius:2px;animation:piece-fall linear infinite;opacity:0}.falling-piece.p1{left:5%;width:12px;height:48px;background:#00f0f00a;animation-duration:18s;animation-delay:0s}.falling-piece.p2{left:15%;width:24px;height:12px;background:#a000f008;animation-duration:22s;animation-delay:2s}.falling-piece.p3{left:35%;width:12px;height:36px;background:#f0a00008;animation-duration:25s;animation-delay:4s}.falling-piece.p4{left:60%;width:24px;height:24px;background:#f0f00006;animation-duration:20s;animation-delay:1s}.falling-piece.p5{left:78%;width:12px;height:24px;background:#00f00008;animation-duration:23s;animation-delay:6s}.falling-piece.p6{left:92%;width:36px;height:12px;background:#f0000006;animation-duration:28s;animation-delay:3s}@keyframes piece-fall{0%{top:-60px;opacity:0}5%{opacity:1}90%{opacity:1}to{top:calc(100% + 60px);opacity:0}}.menu-brand{display:flex;align-items:center;gap:14px}.brand-blocks{display:flex;gap:2px}.brand-block{width:8px;height:8px;border-radius:2px;animation:deco-pulse 4s ease-in-out infinite}.brand-block.b1{background:#00f0f0;animation-delay:0s}.brand-block.b2{background:#a000f0;animation-delay:.4s}.brand-block.b3{background:#f00000;animation-delay:.8s}.brand-block.b4{background:#f0a000;animation-delay:1.2s}@keyframes deco-pulse{0%,to{opacity:.35;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}.brand-title{font-size:22px;font-weight:800;letter-spacing:6px;background:linear-gradient(135deg,#00f0f0,#a000f0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.menu-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;padding:20px 40px;gap:60px}.profile-card{width:260px;background:#ffffff04;border:1px solid rgba(255,255,255,.04);border-radius:14px;padding:28px 24px;flex-shrink:0}.profile-avatar{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#00f0f014,#a000f014);border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff6;margin-bottom:14px}.profile-name{font-size:18px;font-weight:700;color:#d0d0d0;margin-bottom:4px}.profile-subtitle{font-size:10px;color:#333;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;font-weight:600}.profile-stats{display:flex;flex-direction:column;gap:10px}.stat-row{display:flex;justify-content:space-between;align-items:center}.stat-row-label{font-size:12px;color:#444;font-weight:500}.stat-row-value{font-size:14px;font-weight:700;color:#999}.stat-row-value.highlight{color:#00f0f0}.profile-divider{height:1px;background:#ffffff08;margin:6px 0}.menu-sections{display:flex;flex-direction:column;gap:8px;width:420px}.menu-section{border-radius:12px;overflow:hidden;transition:all .2s ease}.menu-section.expanded{background:#ffffff03}.section-header{display:flex;align-items:center;gap:16px;padding:18px 22px;background:#ffffff04;border:1px solid rgba(255,255,255,.04);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;font-family:Inter,system-ui,sans-serif;width:100%;color:inherit}.menu-section.expanded .section-header{border-radius:12px 12px 0 0;border-bottom-color:#ffffff05}.section-header:hover{background:#ffffff09;border-color:#ffffff14}.section-header:active{background:#ffffff05}.section-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;flex-shrink:0}.section-header.multiplayer .section-icon{background:#00f0f00f;color:#00f0f0}.section-header.singleplayer .section-icon{background:#a000f00f;color:#a000f0}.section-header.settings .section-icon{background:#f0a0000f;color:#f0a000}.section-text{flex:1}.section-title{font-size:15px;font-weight:600;color:silver}.section-desc{font-size:11px;color:#3a3a3a;margin-top:2px;font-weight:400}.section-chevron{font-size:22px;color:#222;font-weight:300;transition:transform .2s ease,color .2s}.section-chevron.open{transform:rotate(90deg);color:#444}.section-header:hover .section-chevron{color:#444}.section-content{display:flex;flex-direction:column;gap:2px;padding:6px 8px 8px;border:1px solid rgba(255,255,255,.04);border-top:none;border-radius:0 0 12px 12px;background:#ffffff03;animation:section-expand .15s ease-out}@keyframes section-expand{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sub-btn{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#ffffff04;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .15s ease;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:500;color:#999;width:100%;text-align:left}.sub-btn:hover{background:#ffffff0a;border-color:#ffffff0f;color:#ccc}.sub-btn:active{background:#ffffff05}.sub-btn-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#ffffff08;font-size:16px;font-weight:700;color:#666;flex-shrink:0}.sub-btn-tag{margin-left:auto;font-size:10px;font-weight:600;color:#444;background:#ffffff08;padding:2px 8px;border-radius:4px;letter-spacing:1px;text-transform:uppercase}.menu-footer{position:relative;z-index:1;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.02)}.footer-version{font-size:10px;color:#1a1a1a;letter-spacing:2px}.difficulty-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#040408d9;z-index:20;animation:overlay-fade .2s ease-out}@keyframes overlay-fade{0%{opacity:0}to{opacity:1}}.difficulty-modal{background:#0a0a12fa;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:32px 36px 24px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);min-width:360px}.difficulty-modal h2{font-size:14px;margin-bottom:20px;color:#666;letter-spacing:3px;text-transform:uppercase;text-align:center;font-weight:600}.difficulty-cards{display:flex;gap:10px;margin-bottom:16px}.diff-card{flex:1;padding:20px 12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.04);background:#ffffff04;cursor:pointer;transition:all .2s ease;text-align:center;font-family:Inter,system-ui,sans-serif;color:inherit}.diff-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.diff-card:active{transform:translateY(-1px)}.diff-rank{font-size:24px;font-weight:900;margin-bottom:8px;letter-spacing:2px}.diff-label{font-size:14px;font-weight:700;margin-bottom:4px}.diff-desc{font-size:10px;opacity:.35;font-weight:400}.diff-card.easy{border-color:#00f00014}.diff-card.easy:hover{border-color:#00f00040;background:#00f00008;box-shadow:0 6px 20px #00f0000d}.diff-card.easy .diff-rank,.diff-card.easy .diff-label{color:#00f000}.diff-card.medium{border-color:#f0c80014}.diff-card.medium:hover{border-color:#f0c80040;background:#f0c80008;box-shadow:0 6px 20px #f0c8000d}.diff-card.medium .diff-rank,.diff-card.medium .diff-label{color:#f0c800}.diff-card.hard{border-color:#f0000014}.diff-card.hard:hover{border-color:#f0000040;background:#f0000008;box-shadow:0 6px 20px #f000000d}.diff-card.hard .diff-rank,.diff-card.hard .diff-label{color:#f04040}.menu-buttons{display:flex;flex-direction:column;gap:10px;min-width:260px;margin-top:16px}.menu-btn{padding:12px 28px;font-size:14px;font-weight:600;font-family:Inter,system-ui,sans-serif;border:1px solid rgba(255,255,255,.06);border-radius:8px;cursor:pointer;transition:all .2s ease;background:#ffffff05;color:#888}.menu-btn:hover:not(:disabled){background:#ffffff0d;transform:translateY(-1px)}.menu-btn:active:not(:disabled){transform:translateY(0)}.menu-btn:disabled{opacity:.3;cursor:not-allowed}.menu-btn.primary{background:#00f0f00f;border-color:#00f0f026;color:#00f0f0}.menu-btn.primary:hover:not(:disabled){background:#00f0f01f}.menu-btn.back{font-size:13px;color:#555;border-color:#ffffff0a}.join-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#040408d9;z-index:20;animation:overlay-fade .2s ease-out}.join-modal{background:#0a0a12fa;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:32px 36px 24px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);min-width:340px}.join-modal h2{font-size:14px;margin-bottom:20px;color:#666;letter-spacing:3px;text-transform:uppercase;text-align:center;font-weight:600}.room-code-input{width:100%;padding:12px 16px;font-size:18px;font-family:Inter,monospace;font-weight:600;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff;text-align:center;letter-spacing:4px;margin-bottom:16px;outline:none}.room-code-input:focus{border-color:#00f0f04d;background:#ffffff0d}.results-screen{text-align:center;background:#08080ff5;border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:40px 48px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-height:90vh;overflow-y:auto}.results-title{font-size:48px;font-weight:900;margin-bottom:24px}.results-title.win{color:#00f0f0;text-shadow:0 0 20px rgba(0,240,240,.35),0 0 40px rgba(0,240,240,.12)}.results-title.lose{color:#f04040;text-shadow:0 0 20px rgba(240,64,64,.35),0 0 40px rgba(240,64,64,.12)}.results-title.draw{color:#f0c800;text-shadow:0 0 20px rgba(240,200,0,.35),0 0 40px rgba(240,200,0,.12)}.stats-table{width:100%;border-collapse:collapse;margin-bottom:24px}.stats-table th{padding:8px 16px;font-size:11px;color:#555;text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid rgba(255,255,255,.05);font-weight:600}.stats-table td{padding:6px 16px;font-size:14px}.stat-label{text-align:left;color:#777}.stat-value{text-align:center;font-weight:600;color:#bbb}.results-buttons{display:flex;gap:12px;justify-content:center;margin-top:16px}.settings-screen{text-align:center;background:#08080ff7;border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:28px 36px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:440px;max-height:85vh;overflow-y:auto;scrollbar-gutter:stable}.settings-screen h2{font-size:20px;margin-bottom:18px;color:#d0d0d0;font-weight:700;letter-spacing:1px}.settings-tabs{display:flex;gap:2px;margin-bottom:20px;background:#ffffff05;border-radius:8px;padding:3px}.tab-btn{flex:1;padding:8px 10px;font-size:12px;font-weight:600;font-family:Inter,system-ui,sans-serif;background:transparent;border:none;border-radius:6px;color:#444;cursor:pointer;transition:all .15s ease}.tab-btn:hover{color:#777;background:#ffffff08}.tab-btn.active{color:#00f0f0;background:#00f0f00d}.settings-content{text-align:left;min-height:280px}.settings-content h3{font-size:12px;color:#555;margin-bottom:16px;text-transform:uppercase;letter-spacing:2px;font-weight:700}.keybind-list{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}.keybind-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:6px;background:#ffffff04}.keybind-row.conflict{background:#f03c3c0f;border:1px solid rgba(240,60,60,.15)}.keybind-label{font-size:13px;color:#999;font-weight:500}.keybind-key{padding:5px 14px;font-size:13px;font-family:Inter,monospace;font-weight:600;min-width:80px;text-align:center;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:4px;color:#ccc;cursor:pointer;transition:all .15s ease}.keybind-key:hover{background:#ffffff14;border-color:#00f0f040}.keybind-key.capturing{background:#00f0f014;border-color:#00f0f059;color:#00f0f0;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.settings-warning{padding:8px 12px;margin-bottom:12px;background:#f0c8000f;border:1px solid rgba(240,200,0,.15);border-radius:6px;color:#f0c800;font-size:12px;font-weight:500}.slider-row{margin-bottom:20px}.slider-label{display:flex;justify-content:space-between;font-size:13px;color:#999;margin-bottom:6px;font-weight:500}.slider-value{color:#00f0f0;font-weight:700}.settings-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff0f;border-radius:2px;outline:none;cursor:pointer}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#00f0f0;cursor:pointer}.settings-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#00f0f0;border:none;cursor:pointer}.slider-hint{font-size:10px;color:#333;display:block;margin-top:4px}.menu-btn.settings{margin-top:8px;border-color:#ffffff0f;color:#555;font-size:13px}.menu-btn.settings:hover{color:#888}.preset-selector{display:flex;gap:6px;align-items:center;margin-bottom:20px}.preset-label{font-size:13px;color:#777;margin-right:8px;font-weight:500}.preset-btn{padding:7px 14px;font-size:12px;font-weight:600;font-family:Inter,system-ui,sans-serif;background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:6px;color:#666;cursor:pointer;transition:all .15s ease}.preset-btn:hover{background:#ffffff0d;color:#bbb}.preset-btn.active{background:#00f0f00f;border-color:#00f0f033;color:#00f0f0}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.025)}.toggle-row label{font-size:13px;color:#999;font-weight:500}.toggle-btn{padding:5px 14px;font-size:11px;font-weight:600;font-family:Inter,system-ui,sans-serif;background:#ff3c3c0d;border:1px solid rgba(255,60,60,.15);border-radius:4px;color:#f06060;cursor:pointer;transition:all .15s ease}.toggle-btn.on{background:#00f0640d;border-color:#00f06426;color:#00f064}.fps-options{display:flex;gap:4px;margin-top:6px}.fps-btn{padding:5px 12px;font-size:11px;font-weight:600;font-family:Inter,system-ui,sans-serif;background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:4px;color:#666;cursor:pointer;transition:all .15s ease}.fps-btn:hover{background:#ffffff0d}.fps-btn.active{background:#00f0f00f;border-color:#00f0f033;color:#00f0f0}.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.bg-thumb{background:transparent;border:2px solid rgba(255,255,255,.04);border-radius:6px;padding:4px;cursor:pointer;transition:all .15s ease;text-align:center;font-family:Inter,system-ui,sans-serif;color:inherit}.bg-thumb:hover{border-color:#ffffff1f}.bg-thumb.active{border-color:#00f0f059}.bg-thumb-inner{width:100%;height:60px;object-fit:cover;border-radius:4px;display:block}.bg-thumb-inner.none{background:#08080f;display:flex;align-items:center;justify-content:center;font-size:11px;color:#333}.bg-thumb-label{font-size:10px;color:#444;margin-top:4px;display:block}.custom-upload{display:flex;align-items:center;gap:12px;margin-bottom:12px}.upload-btn{padding:7px 14px;font-size:12px;font-family:Inter,system-ui,sans-serif;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#999;cursor:pointer;transition:all .15s ease}.upload-btn:hover{background:#ffffff14}.upload-status{font-size:11px;color:#00f064}.color-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.color-row{display:flex;align-items:center;gap:12px;padding:6px 8px;background:#ffffff04;border-radius:6px}.piece-preview{display:flex;flex-direction:column;gap:1px}.piece-preview-row{display:flex;gap:1px}.piece-preview-cell{width:10px;height:10px;border-radius:1px}.piece-preview-cell.filled{border:1px solid rgba(255,255,255,.12)}.color-piece-label{font-size:13px;color:#999;flex:1;font-weight:500}.color-swatch-label{position:relative;cursor:pointer}.color-swatch{width:32px;height:32px;border-radius:4px;border:2px solid rgba(255,255,255,.08);cursor:pointer;transition:border-color .15s ease}.color-swatch:hover{border-color:#ffffff40}.countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none}.countdown-number{font-size:150px;font-weight:900;color:#00f0f0;text-shadow:0 0 30px rgba(0,240,240,.5),0 0 60px rgba(0,240,240,.2),0 0 120px rgba(0,240,240,.1);animation:countdown-pop .5s ease-out;position:relative}.countdown-number:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;border:2px solid rgba(0,240,240,.12);animation:countdown-ring .8s ease-out;pointer-events:none}@keyframes countdown-pop{0%{transform:scale(2.5);opacity:0}40%{transform:scale(.95);opacity:1}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes countdown-ring{0%{transform:translate(-50%,-50%) scale(.5);opacity:.6}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.countdown-number.go{color:#f0c800;text-shadow:0 0 30px rgba(240,200,0,.5),0 0 60px rgba(240,200,0,.2),0 0 120px rgba(240,200,0,.1)}.countdown-number.go:after{border-color:#f0c80026}.chat-overlay{position:fixed;bottom:16px;left:16px;width:300px;max-height:260px;background:#000000bf;border-radius:8px;display:flex;flex-direction:column;pointer-events:auto;z-index:50}.chat-messages-overlay{flex:1;overflow-y:auto;padding:10px 12px;max-height:200px;display:flex;flex-direction:column;gap:4px}.chat-msg{font-size:13px;color:#fff;line-height:1.4;word-break:break-word}.chat-sender{font-weight:700;color:#00f0f0}.chat-input{padding:8px 12px;font-size:13px;font-family:Inter,system-ui,sans-serif;background:#00000080;border:none;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 8px 8px;color:#fff;outline:none}.chat-input::placeholder{color:#666}.chat-input:focus{background:#000000b3}.lobby{text-align:center;background:#08080ff5;border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:32px 40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:400px}.lobby h2{font-size:20px;margin-bottom:20px;color:#d0d0d0;font-weight:700}.room-info{margin-bottom:20px}.room-code-display{display:flex;flex-direction:column;align-items:center;gap:4px}.room-code-display .label{font-size:10px;color:#444;text-transform:uppercase;letter-spacing:2px;font-weight:600}.room-code-display .code{font-size:22px;font-weight:800;color:#00f0f0;letter-spacing:4px;padding:8px 20px;background:#00f0f00a;border:1px solid rgba(0,240,240,.1);border-radius:8px}.copy-link-btn{margin-top:8px;padding:6px 16px;font-size:12px;font-weight:600;color:#00f0f0;background:#00f0f014;border:1px solid rgba(0,240,240,.2);border-radius:6px;cursor:pointer;transition:all .15s ease;font-family:inherit}.copy-link-btn:hover{background:#00f0f026}.copy-link-btn:active{transform:scale(.97)}.player-list{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}.player{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffff04;border-radius:8px}.player-icon{font-size:14px;color:#f0c800}.player-name{flex:1;font-size:14px;font-weight:600;color:#bbb;text-align:left}.player-badge{font-size:10px;color:#444;text-transform:uppercase;letter-spacing:1px;font-weight:600}.player.waiting .player-name{color:#333;font-style:italic}.lobby-chat{margin-bottom:16px;border:1px solid rgba(255,255,255,.03);border-radius:8px;overflow:hidden}.chat-messages{padding:10px 12px;max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;min-height:60px;background:#ffffff03}.chat-input-row{border-top:1px solid rgba(255,255,255,.03)}.chat-input-row .chat-input{width:100%;border-radius:0}.lobby-buttons{display:flex;flex-direction:column;gap:8px}.display-settings h3{font-size:12px;color:#555;margin-bottom:12px;text-transform:uppercase;letter-spacing:2px;font-weight:700}