:root{--bg-primary: #1a1a1f;--bg-surface: #242429;--bg-elevated: #2d2d33;--text-primary: #f5f5f7;--text-secondary: #a1a1a6;--text-muted: #6e6e73;--accent: #cc785c;--accent-hover: #d9866a;--success: #34c759;--warning: #ff9f0a;--error: #ff453a;--border-color: rgba(255, 255, 255, .08);--border-color-strong: rgba(255, 255, 255, .15);--control-key-bg: #3a3a40;--modal-overlay: rgba(0, 0, 0, .6);--modal-bg: rgba(36, 36, 41, .85);--game-over-bg: rgba(26, 26, 31, .92);--gamepad-key-bg: #2d3d2d;--gamepad-key-color: #6bc26b;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5)}[data-theme=light]{--bg-primary: #f5f5f7;--bg-surface: #ffffff;--bg-elevated: #ffffff;--text-primary: #1d1d1f;--text-secondary: #6e6e73;--text-muted: #a1a1a6;--accent: #b8654a;--accent-hover: #a55840;--success: #34c759;--warning: #ff9f0a;--error: #ff3b30;--border-color: rgba(0, 0, 0, .06);--border-color-strong: rgba(0, 0, 0, .12);--control-key-bg: #e8e8ed;--modal-overlay: rgba(0, 0, 0, .3);--modal-bg: rgba(255, 255, 255, .92);--game-over-bg: rgba(255, 255, 255, .95);--gamepad-key-bg: #d8ecd8;--gamepad-key-color: #2d7a2d;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .16)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;line-height:1.5;-webkit-font-smoothing:antialiased}#app{text-align:center;padding:24px}#home,#waiting-room,#game-view{animation:screenFadeIn .3s ease-out}@keyframes screenFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){#home,#waiting-room,#game-view,.modal,#game-over,.garbage-notification,#countdown,button,.theme-toggle{animation:none!important;transition:none!important}}h1{font-size:24px;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}h2{font-size:20px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.theme-toggle{background:var(--bg-surface);border:1px solid var(--border-color-strong);border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease}.theme-toggle:hover{background:var(--bg-elevated);transform:scale(1.05)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#home{position:relative;max-width:480px;margin:0 auto;padding:24px 0}.home-bg{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.home-hero{position:relative;z-index:1;text-align:center;margin-bottom:24px}.home-title{font-size:clamp(1.5rem,5vw,2.25rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px;background:linear-gradient(135deg,#5bb4c4,#9c7bb8 35%,#e6c547 65%,#d99c5b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-subtitle{font-size:14px;color:var(--text-secondary);line-height:1.5}.home-theme-toggle{position:absolute;top:0;right:0;z-index:2}.home-card{position:relative;z-index:1}.home-pills{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.home-pill{font-size:12px;font-weight:500;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:20px;padding:6px 14px;white-space:nowrap}.lobby-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:20px;padding:28px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.lobby-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#5bb4c4,#9c7bb8,#e6c547,#d99c5b)}.lobby-section{display:flex;flex-direction:column;gap:10px}.lobby-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);text-align:left}.lobby-divider{height:1px;background:var(--border-color);margin:20px 0}.lobby-input{width:100%;padding:14px 16px;font-size:15px;font-family:inherit;border:1px solid var(--border-color-strong);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);transition:border-color .15s ease,box-shadow .15s ease}.lobby-input::placeholder{color:var(--text-muted)}.lobby-input:focus{outline:none;border-color:#5bb4c4;box-shadow:0 0 0 3px #5bb4c426}.lobby-input-code{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:18px;font-weight:600;letter-spacing:.15em;text-align:center}.lobby-join-row{display:flex;gap:10px;align-items:stretch}.lobby-join-row .lobby-input{flex:1}.room-code-display{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:32px;font-weight:700;letter-spacing:.15em;background:linear-gradient(135deg,#5bb4c4,#9c7bb8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.input-group{margin-bottom:16px}input{padding:12px 16px;font-size:14px;font-family:inherit;border:1px solid var(--border-color-strong);border-radius:8px;background:var(--bg-surface);color:var(--text-primary);width:200px;transition:border-color .15s ease,box-shadow .15s ease}input::placeholder{color:var(--text-muted)}input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #cc785c33}button{padding:10px 20px;font-size:14px;font-family:inherit;font-weight:500;border:none;border-radius:8px;cursor:pointer;margin:4px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-gradient{padding:14px 28px;font-size:15px;font-weight:600;border:none;border-radius:12px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#5bb4c4,#9c7bb8);box-shadow:0 0 16px #5bb4c433,var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;width:100%}.btn-gradient:hover{transform:translateY(-2px);box-shadow:0 0 24px #5bb4c44d,var(--shadow-md)}.btn-gradient:active{transform:translateY(0)}.btn-gradient-secondary{background:linear-gradient(135deg,#9c7bb8,#d99c5b);box-shadow:0 0 16px #9c7bb833,var(--shadow-sm);width:auto;flex-shrink:0}.btn-gradient-secondary:hover{box-shadow:0 0 24px #9c7bb84d,var(--shadow-md)}.btn-gradient-success{background:linear-gradient(135deg,#34c759,#5bb4c4);box-shadow:0 0 16px #34c75933,var(--shadow-sm)}.btn-gradient-success:hover{box-shadow:0 0 24px #34c7594d,var(--shadow-md)}.btn-ghost{padding:10px 20px;font-size:13px;font-weight:500;border:none;border-radius:10px;cursor:pointer;color:var(--text-secondary);background:transparent;transition:color .15s ease,background .15s ease;margin-top:12px}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-elevated);transform:none;box-shadow:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-color-strong)}.btn-secondary:hover{background:var(--bg-elevated)}.btn-start{background:var(--success);color:#fff}.btn-start:hover{background:#2db350}.room-list{margin:8px 0;text-align:left}.room-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.room-item:hover{border-color:#5bb4c4;box-shadow:0 0 12px #5bb4c41a;background:var(--bg-elevated)}.room-code{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:16px;font-weight:600;background:linear-gradient(135deg,#5bb4c4,#9c7bb8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.room-players{font-size:13px;color:var(--text-secondary)}#waiting-room{max-width:440px;margin:0 auto}#waiting-room h2{margin-bottom:8px}.player-list{margin:8px 0;text-align:left}.player-item{padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;transition:border-color .15s ease}.player-item.host{border-color:#5bb4c4;border-width:2px}.player-item.host .player-name:after{content:"Host";margin-left:8px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:#5bb4c4;background:#5bb4c426;padding:2px 6px;border-radius:4px}.player-name{font-weight:500}.ready-status{font-size:12px;font-weight:500;padding:4px 10px;border-radius:12px}.ready-status.ready{background:#34c75926;color:var(--success)}.ready-status.not-ready{background:var(--bg-elevated);color:var(--text-muted)}.room-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}.room-actions .btn-gradient{width:auto;flex:1}.room-actions .btn-ghost{margin-top:0}.btn-ready{background:var(--success);color:#fff}.btn-ready:hover{background:#2db350}.btn-not-ready{background:linear-gradient(135deg,#ff9f0a,#d99c5b);box-shadow:0 0 16px #ff9f0a33,var(--shadow-sm)}.btn-not-ready:hover{box-shadow:0 0 24px #ff9f0a4d,var(--shadow-md)}#start-game-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(.5)}#start-game-btn:disabled:hover{transform:none;box-shadow:0 0 16px #34c75933,var(--shadow-sm)}#game-view{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}.game-container{display:flex;gap:16px}.main-board{position:relative}.main-board canvas{border-radius:12px;box-shadow:var(--shadow-lg)}.side-panel{display:flex;flex-direction:column;gap:12px}.info-box{background:var(--bg-surface);padding:12px 16px;border-radius:12px;border:1px solid var(--border-color);text-align:left}.info-box h3{color:var(--text-secondary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.info-box .value{font-size:24px;font-weight:700;letter-spacing:-.02em}.info-box canvas{border-radius:8px;border:1px solid var(--border-color)}canvas{border:1px solid var(--border-color);border-radius:8px}.opponents{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:400px}.opponent{text-align:center;padding:8px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px}.opponent-name{font-size:11px;font-weight:500;margin-bottom:6px;max-width:80px;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}.opponent.dead{opacity:.4}.opponent canvas{border-radius:4px}#countdown{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:96px;font-weight:700;background:linear-gradient(135deg,#5bb4c4,#9c7bb8,#e6c547);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;z-index:100;animation:countdownPulse 1s ease-in-out infinite;filter:drop-shadow(0 0 32px rgba(91,180,196,.4))}@keyframes countdownPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.8}}#game-over{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--game-over-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:32px 40px;border-radius:20px;border:1px solid var(--border-color);z-index:100;min-width:280px;animation:modalFadeIn .3s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}#game-over h2{font-size:24px;margin-bottom:8px;background:linear-gradient(135deg,#5bb4c4,#9c7bb8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#game-over>p{color:var(--text-secondary);margin-bottom:16px}#game-over #winner{color:#e6c547;font-weight:600}#game-over .btn-gradient{margin-top:8px}.rankings{text-align:left;margin:20px 0;padding-left:0;list-style:none}.rankings li{padding:8px 12px;margin-bottom:4px;background:var(--bg-surface);border-radius:8px;font-size:14px}.rankings li:first-child{background:#5bb4c41f;color:#5bb4c4;font-weight:600}.controls{background:var(--bg-surface);padding:12px 16px;border-radius:12px;border:1px solid var(--border-color);text-align:left;font-size:12px}.controls h3{color:var(--text-secondary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}.control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.control-key{background:var(--control-key-bg);padding:2px 8px;border-radius:4px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:11px;color:var(--text-primary)}.control-action{color:var(--text-secondary);font-size:12px}.controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.controls-header h3{margin:0}.btn-small{padding:4px 10px;font-size:11px;font-weight:500;background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease}.btn-small:hover{background:var(--control-key-bg);color:var(--text-primary);transform:none;box-shadow:none}.control-keys{display:flex;gap:4px;flex-wrap:wrap}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--modal-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:200;animation:overlayFadeIn .2s ease-out}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--modal-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:24px 28px;border-radius:20px;border:1px solid var(--border-color);max-width:450px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{font-size:20px;margin-bottom:8px}.modal-hint{color:var(--text-secondary);font-size:13px;margin-bottom:20px}.controls-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border-color)}.tab-btn{padding:10px 20px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease}.tab-btn:hover{color:var(--text-primary);transform:none;box-shadow:none}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.gamepad-notice{color:var(--text-secondary);text-align:center;padding:40px 20px;font-size:14px}.control-key-config.gamepad{background:var(--gamepad-key-bg);color:var(--gamepad-key-color)}.modal-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:24px;padding-top:16px;border-top:1px solid var(--border-color)}.controls-config{display:flex;flex-direction:column;gap:8px}.control-config-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;transition:border-color .15s ease}.control-config-row.rebinding{border-color:var(--accent);border-width:2px}.control-keys-config{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.control-key-config{background:var(--control-key-bg);padding:4px 8px;border-radius:6px;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:12px;color:var(--text-primary);display:flex;align-items:center;gap:6px}.remove-key-btn{background:none;border:none;color:var(--error);cursor:pointer;padding:0 2px;font-size:14px;line-height:1;opacity:.7;transition:opacity .15s ease}.remove-key-btn:hover{opacity:1;transform:none;box-shadow:none}.add-key-btn{background:transparent;border:1px dashed var(--border-color-strong);color:var(--text-secondary);padding:4px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:border-color .15s ease,color .15s ease}.add-key-btn:hover{border-color:var(--accent);color:var(--accent);transform:none;box-shadow:none}.control-config-row.rebinding .add-key-btn{background:var(--accent);color:#fff;border:none}.garbage-notification{position:fixed;bottom:24px;right:24px;background:var(--error);color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);animation:garbageSlideIn 2s forwards}@keyframes garbageSlideIn{0%{opacity:0;transform:translate(20px)}10%{opacity:1;transform:translate(0)}80%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}.live-dot{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--success);vertical-align:middle}.live-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);animation:livePulse 2s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.live-dot:before{animation:none}}.hidden{display:none!important}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(100px);padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;z-index:10000;opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none;max-width:400px;text-align:center}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.toast-error{background:var(--error);color:#fff}.toast-info{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-color-strong)}.tetro-shape{position:absolute;width:30px;height:30px;border-radius:4px;opacity:.08}[data-theme=light] .tetro-shape{opacity:.12}.tetro-i{background:#5bb4c4;top:-40px;left:10%;animation:tetroFall 12s linear infinite;animation-delay:0s;width:120px;height:30px}.tetro-o{background:#e6c547;top:-40px;left:25%;animation:tetroFall 15s linear infinite;animation-delay:2s;width:60px;height:60px}.tetro-t{background:#9c7bb8;top:-40px;left:40%;animation:tetroFall 11s linear infinite;animation-delay:4s}.tetro-s{background:#6bc26b;top:-40px;left:55%;animation:tetroFall 14s linear infinite;animation-delay:1s;width:60px;height:30px}.tetro-z{background:#d96b6b;top:-40px;left:70%;animation:tetroFall 13s linear infinite;animation-delay:3s;width:60px;height:30px}.tetro-j{background:#5b7fc4;top:-40px;left:85%;animation:tetroFall 16s linear infinite;animation-delay:5s}.tetro-l{background:#d99c5b;top:-40px;left:5%;animation:tetroFall 10s linear infinite;animation-delay:7s;width:90px;height:30px}.tetro-i2{background:#5bb4c4;top:-40px;left:60%;animation:tetroFall 17s linear infinite;animation-delay:6s;width:120px;height:30px}.tetro-t2{background:#9c7bb8;top:-40px;left:35%;animation:tetroFall 13s linear infinite;animation-delay:8s}.tetro-z2{background:#d96b6b;top:-40px;left:78%;animation:tetroFall 15s linear infinite;animation-delay:10s;width:60px;height:30px}@keyframes tetroFall{0%{transform:translateY(-60px) rotate(0);opacity:0}5%{opacity:.08}95%{opacity:.08}to{transform:translateY(110vh) rotate(45deg);opacity:0}}@media(prefers-reduced-motion:reduce){.tetro-shape{animation:none!important}}html{scroll-behavior:smooth}.lobby-input-code{text-transform:uppercase}.lobby-room-code-row{display:flex;align-items:center;gap:12px}.btn-compact{padding:8px 16px;font-size:13px;width:auto}.empty-state{color:var(--text-muted)}