*{margin:0;padding:0;box-sizing:border-box}body{font-family:Quicksand,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#0a192f,#1d3557);color:#fff;min-height:100vh;overflow-x:hidden}.container{max-width:1400px;margin:0 auto;padding:20px}.title{font-family:Fascinate,cursive;font-size:clamp(1.5rem,5vw,3rem);text-align:center;margin:10px 0;text-shadow:0 0 20px rgba(77,208,225,.5)}.btn,.title{color:#4dd0e1}.btn{padding:12px 24px;font-size:1rem;font-weight:600;border-radius:10px;border:2px solid rgba(77,208,225,.3);background:rgba(29,53,87,.8);cursor:pointer;transition:all .3s ease;font-family:Quicksand,sans-serif}.btn:hover{background:rgba(77,208,225,.2);border-color:#4dd0e1;transform:translateY(-2px)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#26a69a,#4dd0e1);border-color:#4dd0e1;color:#0a192f}.btn-primary:hover{transform:translateY(-2px) scale(1.05)}.btn-danger{background:rgba(200,50,50,.7);border-color:hsla(0,100%,70%,.6);color:#fff}.btn-danger:hover{background:rgba(220,60,60,.9);border-color:#ff6b6b;transform:translateY(-2px)}.board-container{background:#112240;padding:10px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(77,208,225,.15);border:2px solid rgba(77,208,225,.3);max-width:min(560px,100%);width:100%;margin:6px auto}.game-board{display:grid;grid-template-columns:repeat(9,1fr);grid-gap:4px;gap:4px;padding:12px;background:#081428;border-radius:16px}.cell{aspect-ratio:1;background:#264166;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:clamp(.9rem,3.8vw,1.7em);color:#fff;-webkit-text-fill-color:unset;cursor:pointer;transition:all .25s ease;border:2px solid rgba(77,208,225,.1)}.cell:hover:not(:disabled){background:rgba(77,208,225,.25);border-color:#4dd0e1;transform:scale(1.05)}.cell.valid-move{border-color:#4dd0e1;box-shadow:0 0 12px rgba(77,208,225,.5);animation:pulse 1.5s ease-in-out infinite}.cell:disabled{cursor:not-allowed;color:#fff;-webkit-text-fill-color:unset;opacity:1}@keyframes pulse{0%,to{box-shadow:0 0 10px rgba(77,208,225,.3)}50%{box-shadow:0 0 20px rgba(77,208,225,.6)}}.player-info{display:flex;justify-content:space-around;margin:6px 0;gap:6px}.player-status{background:rgba(17,34,64,.7);padding:8px 10px;border-radius:10px;border:2px solid rgba(77,208,225,.2);display:flex;align-items:center;gap:6px;transition:all .3s ease;flex:1 1;min-width:0;overflow:hidden}.player-status.active{border-color:#4dd0e1;box-shadow:0 0 20px rgba(77,208,225,.5);transform:scale(1.05)}.player-emoji{font-size:clamp(1.2rem,3.5vw,2em);flex-shrink:0}.bubble{position:fixed;bottom:-100px;background:radial-gradient(circle,rgba(77,208,225,.3),rgba(77,208,225,.1));border-radius:50%;pointer-events:none;animation:rise 15s ease-in infinite}@keyframes rise{to{bottom:110%;opacity:0}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:linear-gradient(135deg,#1d3557,#0a192f);padding:40px;border-radius:20px;border:2px solid #4dd0e1;max-width:500px;width:90%;text-align:center}.room-code{font-size:2rem;font-weight:700;letter-spacing:.2em;color:#4dd0e1;margin:20px 0;padding:15px;background:rgba(77,208,225,.1);border-radius:10px}.color-selector{display:flex;gap:6px;flex-wrap:wrap}.color-option{font-size:1.8em;padding:4px 6px;border-radius:10px;border:2px solid transparent;background:none;cursor:pointer;opacity:.45;filter:grayscale(60%);transition:all .2s ease;line-height:1}.color-option:hover:not(.disabled):not(:disabled){opacity:.8;transform:scale(1.15)}.color-option.selected{opacity:1;filter:grayscale(0);border-color:#4dd0e1;background:rgba(77,208,225,.25);box-shadow:0 0 12px rgba(77,208,225,.5)}.color-option.disabled,.color-option:disabled{opacity:.15;cursor:not-allowed;filter:grayscale(100%)}.player-config-row{display:flex;align-items:flex-start;gap:12px;background:rgba(29,53,87,.5);padding:12px 14px;border-radius:14px;border:2px solid rgba(77,208,225,.15)}.player-config-label{font-weight:700;color:#4dd0e1;font-size:.9rem;min-width:140px;padding-top:6px}.ai-select{padding:8px 12px;border-radius:10px;border:2px solid rgba(77,208,225,.3);background:rgba(10,25,47,.8);color:#e0f7fa;font-family:Quicksand,sans-serif;font-size:.95em;cursor:pointer;transition:all .2s ease;width:100%}.ai-select:focus,.ai-select:hover{border-color:#4dd0e1;outline:none;box-shadow:0 0 8px rgba(77,208,225,.3)}.input{width:100%;padding:12px;font-size:1rem;border-radius:10px;border:2px solid rgba(77,208,225,.3);background:rgba(29,53,87,.8);color:#fff;font-family:Quicksand,sans-serif}.input:focus{outline:none;border-color:#4dd0e1;box-shadow:0 0 10px rgba(77,208,225,.3)}.game-layout{display:flex;gap:16px;align-items:flex-start;max-width:1100px;margin:0 auto}.game-main{flex:1 1;min-width:0}.spectator-list-section{padding:10px 12px;border-bottom:1px solid rgba(255,193,7,.2);background:rgba(255,193,7,.05);border-radius:14px 14px 0 0}.spectator-list-header{color:#ffc107;font-weight:700;font-size:.82rem;margin-bottom:6px}.spectator-list-names{display:flex;flex-wrap:wrap;gap:4px}.spectator-list-name{background:rgba(255,193,7,.15);border:1px solid rgba(255,193,7,.3);color:#ffe082;border-radius:12px;padding:2px 8px;font-size:.78rem}.chat-sidebar{width:240px;flex-shrink:0;background:rgba(17,34,64,.85);border:2px solid rgba(77,208,225,.25);border-radius:16px;display:flex;flex-direction:column;max-height:calc(100vh - 140px);min-height:260px}.chat-header{padding:12px 16px;font-weight:700;color:#4dd0e1;border-bottom:1px solid rgba(77,208,225,.2);font-size:.95rem}.chat-messages{flex:1 1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-thumb{background:rgba(77,208,225,.3);border-radius:4px}.chat-empty{color:rgba(77,208,225,.5);font-size:.85rem;text-align:center;margin-top:20px}.chat-message{background:rgba(29,53,87,.6);border-radius:10px;padding:8px 10px;font-size:.85rem;border:1px solid rgba(77,208,225,.1)}.chat-message.mine{background:rgba(77,208,225,.15);border-color:rgba(77,208,225,.3)}.chat-sender{color:#4dd0e1;font-weight:700;font-size:.8rem;margin-bottom:3px;display:flex;align-items:center;gap:6px}.chat-spectator-badge{background:rgba(255,193,7,.25);color:#ffc107;border:1px solid rgba(255,193,7,.4);border-radius:4px;padding:0 5px;font-size:.7rem;font-weight:600}.chat-text{color:#e0f7fa;word-break:break-word;line-height:1.4}.chat-input-row{display:flex;gap:6px;padding:10px 12px;border-top:1px solid rgba(77,208,225,.2)}.chat-input{flex:1 1;padding:8px 10px;font-size:.9rem;border-radius:8px;border:2px solid rgba(77,208,225,.25);background:rgba(10,25,47,.8);color:#fff;font-family:Quicksand,sans-serif;min-width:0}.chat-input:focus{outline:none;border-color:#4dd0e1}.chat-send-btn{padding:8px 12px;font-size:.85rem;flex-shrink:0}.chat-quick-row{display:flex;gap:4px;padding:5px 10px 0;flex-wrap:wrap}.chat-quick-btn{background:rgba(29,53,87,.7);border:1px solid rgba(77,208,225,.22);color:#e0f7fa;border-radius:8px;padding:4px 8px;font-size:.82rem;cursor:pointer;transition:all .15s ease;font-family:Quicksand,sans-serif;flex:1 1;white-space:nowrap;min-width:0}.chat-quick-btn:hover{background:rgba(77,208,225,.18);border-color:rgba(77,208,225,.5)}@media (max-width:768px){.game-layout{flex-direction:column}.chat-sidebar{width:100%;max-height:280px;min-height:200px}.lobby-layout{flex-direction:column}.lobby-main{min-width:0}}@media (max-width:480px){.container{padding:8px}.player-status.active{transform:none}}.lobby-layout{display:flex;gap:16px;align-items:flex-start;max-width:1100px;margin:0 auto}.lobby-main{flex:1 1;min-width:0}.slot-card{background:rgba(17,34,64,.8);border:2px solid rgba(77,208,225,.2);border-radius:16px;overflow:hidden;transition:border-color .2s ease}.slot-card.human{border-color:rgba(77,208,225,.5);box-shadow:0 0 14px rgba(77,208,225,.15)}.slot-card.mine{border-color:#4dd0e1;box-shadow:0 0 20px rgba(77,208,225,.3)}.slot-card-header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:rgba(29,53,87,.6);border-bottom:1px solid rgba(77,208,225,.15)}.slot-label{font-weight:700;color:#4dd0e1;font-size:.9rem}.slot-type-badge{font-size:.85rem;font-weight:600;padding:3px 10px;border-radius:20px}.slot-type-badge.cpu{background:rgba(255,193,7,.15);color:#ffc107;border:1px solid rgba(255,193,7,.4)}.slot-type-badge.human{background:rgba(77,208,225,.15);color:#4dd0e1;border:1px solid rgba(77,208,225,.4)}.slot-card-body{padding:10px 12px}.slot-icon-picker{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}.mute-btn{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:2px solid rgba(77,208,225,.4);background:rgba(17,34,64,.9);color:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:9999;transition:all .2s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.mute-btn:hover{border-color:#4dd0e1;background:rgba(77,208,225,.2);transform:scale(1.1)}.home-layout{max-width:860px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px;align-items:start}.home-main{min-width:0}@media (max-width:640px){.home-layout{grid-template-columns:1fr}}.game-layout-3col{display:grid;grid-template-columns:220px 1fr 240px;grid-gap:12px;gap:12px;align-items:start;max-width:1200px;margin:0 auto}.game-left-panel{display:flex;flex-direction:column;gap:8px}.game-left-panel .player-info{flex-direction:column;justify-content:flex-start}.game-left-panel .player-emoji{font-size:1.4rem}.game-center-panel{min-width:0;display:flex;justify-content:center;align-items:flex-start}@media (max-width:900px){.game-layout-3col{grid-template-columns:1fr}.game-left-panel{align-items:center}.game-left-panel,.game-left-panel .player-info{flex-direction:row;flex-wrap:wrap;justify-content:center}}