html,body,#root{width:100%;height:100%;overflow:hidden}body{color:#e8e8e8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a0a;font-family:Segoe UI,system-ui,sans-serif}#root{text-align:left;border:none;width:100%;max-width:none;min-height:100vh;margin:0;display:block}:root{--bg:#0a0a0a;--panel:#141414f2;--panel-border:#ffffff1a;--accent:#4ecdc4;--accent2:#c8553d;--text:#e8e8e8;--text-dim:#888}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);height:100vh;font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}#lobby{flex-direction:column;justify-content:center;align-items:center;gap:20px;height:100vh;display:flex}#lobby h1{letter-spacing:4px;background:linear-gradient(135deg, var(--accent), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:48px;font-weight:300}.game-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;width:90%;max-width:1200px;padding:20px;display:grid}.game-card{background:var(--panel);border:1px solid var(--panel-border);cursor:pointer;text-align:center;border-radius:16px;padding:24px;transition:all .3s}.game-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 32px #4ecdc426}.game-card .icon{margin-bottom:12px;font-size:48px}.game-card h3{margin-bottom:8px;font-size:20px}.game-card p{color:var(--text-dim);font-size:14px}.game-card .players{color:var(--accent);margin-top:12px;font-size:13px}#game-screen{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.game-header{z-index:100;background:#0006;border-bottom:1px solid #ffffff0d;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex}.game-header-left{align-items:center;gap:8px;display:flex}.game-header-center{flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.game-header-right{align-items:center;gap:8px;display:flex}.game-footer{z-index:100;background:#0006;border-top:1px solid #ffffff0d;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex}.footer-left{align-items:center;gap:8px;display:flex}#timer-mode-btn{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:#0009;border:1px solid #ffffff26;border-radius:8px;padding:5px 10px;font-size:12px}#timer-mode-btn:hover{border-color:var(--accent);color:var(--text)}.footer-center{align-items:center;gap:6px;display:flex}#pause-btn,#resign-btn,#draw-btn{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:#0009;border:1px solid #ffffff26;border-radius:8px;padding:5px 10px;font-size:12px}#pause-btn:hover,#resign-btn:hover,#draw-btn:hover{border-color:var(--accent);color:var(--text)}#resign-btn:hover{color:#ff6b6b;border-color:#e74c3c}.paused-overlay{z-index:200;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.paused-text{color:var(--accent);letter-spacing:4px;text-shadow:0 0 30px #4ecdc466;font-size:32px;font-weight:700}#canvas-wrap{background:radial-gradient(#141414 0%,#050505 100%);flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}canvas{image-rendering:pixelated;width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:0 0 60px #4ecdc40f}#back-btn{color:var(--text);cursor:pointer;white-space:nowrap;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:6px 12px;font-size:13px}#back-btn:hover{background:#fff3}#turn-indicator{align-items:center;gap:16px;display:flex}#turn-indicator .turn-divider{color:var(--text-dim);letter-spacing:2px;text-align:center;min-width:28px;font-size:13px;font-weight:700}.timer-box{text-align:center;background:#00000080;border:1px solid #ffffff1a;border-radius:10px;min-width:90px;padding:6px 14px;font-size:12px;transition:all .3s}.timer-box .player-info{justify-content:center;align-items:center;gap:4px;margin-bottom:2px;display:flex}.timer-box .player-color{font-size:10px}.timer-box .label{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:9px}.timer-box .time{color:var(--text);letter-spacing:1px;font-family:Courier New,monospace;font-size:18px;font-weight:600}.timer-box.active{border-color:var(--accent);background:#4ecdc41a;box-shadow:0 0 12px #4ecdc426}.timer-box.active .time{color:var(--accent)}#ai-toggle-btn{color:var(--text);cursor:pointer;white-space:nowrap;background:#0009;border:1px solid #fff3;border-radius:8px;padding:5px 10px;font-size:12px}#ai-toggle-btn.on{background:#64c8644d;border-color:#64c86466}#cloudy-toggle-btn{color:var(--text);cursor:pointer;white-space:nowrap;background:#0009;border:1px solid #fff3;border-radius:8px;padding:5px 10px;font-size:12px}#cloudy-toggle-btn.on{background:#c864c84d;border-color:#c864c866}#new-game-btn{background:var(--accent);color:#000;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600}#debug-toggle{color:var(--text-dim);cursor:pointer;background:#0009;border:1px solid #ffffff26;border-radius:8px;padding:5px 8px;font-size:11px}#debug-panel{z-index:100;color:var(--text-dim);background:#000c;border:1px solid #ffffff26;border-radius:10px;min-width:200px;padding:12px 16px;font-family:Courier New,monospace;font-size:12px;position:absolute;bottom:52px;right:16px}#debug-panel .debug-line{justify-content:space-between;gap:12px;margin:2px 0;display:flex}#debug-panel .debug-label{color:#666}#debug-panel .debug-value{color:var(--text)}#debug-panel .debug-value.connected{color:#2ecc71}#debug-panel .debug-value.disconnected{color:#e74c3c}#chat-toggle{z-index:100;color:var(--text-dim);cursor:pointer;background:#0009;border:1px solid #ffffff26;border-radius:8px;padding:6px 10px;font-size:12px;position:absolute;bottom:16px;right:120px}#chat-panel{z-index:100;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;flex-direction:column;width:280px;max-height:320px;display:flex;position:absolute;bottom:52px;right:16px;overflow:hidden}#chat-panel .chat-header{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:10px 14px;font-size:14px;font-weight:600;display:flex}#chat-panel .chat-header button{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:18px}#chat-panel .chat-messages{flex-direction:column;flex:1;gap:8px;max-height:200px;padding:10px 14px;display:flex;overflow-y:auto}.chat-msg{flex-direction:column;gap:2px;display:flex}.chat-msg.self{align-items:flex-end}.chat-msg .chat-from{color:var(--text-dim);font-size:11px}.chat-msg .chat-text{word-break:break-word;background:#ffffff0f;border-radius:8px;max-width:90%;padding:6px 10px;font-size:13px}.chat-msg.self .chat-text{background:#4ecdc426}#chat-panel .chat-input-row{border-top:1px solid #ffffff0f;gap:8px;padding:10px 14px;display:flex}#chat-panel .chat-input-row input{color:var(--text);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;outline:none;flex:1;padding:6px 10px;font-size:13px}#chat-panel .chat-input-row input:focus{border-color:var(--accent)}#chat-panel .chat-input-row button{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:600}@media (width<=600px){#lobby h1{letter-spacing:2px;font-size:32px}.game-grid{grid-template-columns:1fr;gap:12px;width:95%;padding:12px}.game-card{padding:16px}.game-card .icon{font-size:36px}.game-card h3{font-size:18px}.game-header{flex-wrap:wrap;gap:4px;padding:6px 8px}.game-header-left,.game-header-center,.game-header-right{flex:none}.game-header-center{order:3;justify-content:center;width:100%}#turn-indicator{gap:6px}#turn-indicator .turn-text{padding:3px 8px;font-size:11px}.timer-box{min-width:50px;padding:3px 6px}.timer-box .time{font-size:13px}.timer-box .label{font-size:8px}#back-btn{padding:4px 8px;font-size:11px}#ai-toggle-btn,#cloudy-toggle-btn{padding:4px 6px;font-size:10px}.game-footer{flex-wrap:wrap;justify-content:center;gap:3px;padding:4px 6px}.footer-left,.footer-center{gap:3px}#pause-btn,#resign-btn,#draw-btn,#timer-mode-btn,#debug-toggle,#new-game-btn{border-radius:6px;padding:3px 5px;font-size:9px}#chat-toggle{padding:4px 6px;font-size:10px}#chat-panel{width:calc(100vw - 32px);bottom:44px;right:8px}#debug-panel{min-width:140px;bottom:44px;right:8px}canvas{box-shadow:none}}