:root{--bg-primary:#0f0f23;--bg-secondary:#1a1a2e;--bg-tertiary:#16213e;--text-primary:#fff;--text-secondary:#a0a0a0;--accent:#4a90d9;--accent-hover:#357abd;--danger:#e74c3c;--success:#2ecc71;--border:#2a2a4a;--turn-color:#4a90d9;--turn-color-rgb:74, 144, 217}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow-x:hidden}.app{flex-direction:column;min-height:100dvh;transition:background .6s;display:flex}.app.turn-red{background:linear-gradient(180deg, #e74c3c1f 0%, var(--bg-primary) 40%)}.app.turn-blue{background:linear-gradient(180deg, #3498db1f 0%, var(--bg-primary) 40%)}.app.turn-green{background:linear-gradient(180deg, #2ecc711f 0%, var(--bg-primary) 40%)}.app.turn-yellow{background:linear-gradient(180deg, #f1c40f1f 0%, var(--bg-primary) 40%)}.app.turn-red .app-header{border-bottom-color:#e74c3c66}.app.turn-blue .app-header{border-bottom-color:#3498db66}.app.turn-green .app-header{border-bottom-color:#2ecc7166}.app.turn-yellow .app-header{border-bottom-color:#f1c40f66}.app-header{background:var(--bg-secondary);border-bottom:2px solid var(--border);z-index:100;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;transition:border-bottom-color .6s;display:flex;position:sticky;top:0}.app-header h1{background:linear-gradient(135deg,#e74c3c,#3498db,#2ecc71,#f1c40f);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:700}.connection-status{border-radius:20px;padding:.35rem .75rem;font-size:.75rem;font-weight:500}.connection-status.connected{color:var(--success);background:#2ecc7133}.connection-status.disconnected{color:var(--danger);background:#e74c3c33}.app-main{flex:1;justify-content:center;align-items:flex-start;padding:1rem;display:flex}.error-message{background:var(--danger);color:#fff;z-index:1000;border-radius:8px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;animation:.3s slideDown;position:fixed;top:70px;left:50%;transform:translate(-50%);box-shadow:0 4px 15px #e74c3c66}@keyframes slideDown{0%{opacity:0;transform:translate(-50%)translateY(-15px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.lobby{width:100%;max-width:400px}.lobby-container{background:var(--bg-secondary);border:1px solid var(--border);text-align:center;border-radius:16px;padding:2rem 1.5rem}.lobby-container h2{margin-bottom:.5rem;font-size:1.5rem}.lobby-subtitle{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.85rem;line-height:1.5}.lobby-menu,.lobby-form{flex-direction:column;gap:1rem;display:flex}.input-group{text-align:left;flex-direction:column;gap:.4rem;display:flex}.input-group label{color:var(--text-secondary);font-size:.8rem}.input-group input{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);border-radius:8px;outline:none;padding:.7rem 1rem;font-size:1rem;transition:border-color .2s}.input-group input:focus{border-color:var(--accent)}.input-group input::placeholder{color:var(--text-secondary)}.btn{cursor:pointer;border:none;border-radius:8px;padding:.7rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-secondary:active:not(:disabled){transform:scale(.97)}.btn-back{color:var(--text-secondary);background:0 0}.btn-back:hover{color:var(--text-primary)}.btn-leave{color:var(--text-secondary);background:0 0;padding:.4rem .75rem;font-size:.8rem}.btn-leave:hover{color:var(--danger)}.form-description,.connection-warning{color:var(--text-secondary);font-size:.85rem}.game{flex-direction:column;gap:.75rem;width:100%;max-width:800px;display:flex}.game-header{justify-content:space-between;align-items:center;display:flex}.room-code{color:var(--accent);letter-spacing:2px;font-family:SF Mono,Fira Code,monospace;font-size:1.1rem;font-weight:600}.game-content{align-items:flex-start;gap:1rem;display:flex}.game-sidebar{flex-direction:column;gap:.75rem;width:180px;min-width:180px;display:flex}.player-list{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:.75rem}.player-list h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem;font-size:.7rem}.player-item{background:var(--bg-primary);opacity:.4;border:2px solid #0000;border-radius:8px;align-items:center;gap:.6rem;margin-bottom:.35rem;padding:.5rem;transition:all .3s;display:flex}.player-item.alive{opacity:.7}.player-item.active{opacity:1;transform:scale(1.02)}.player-item.me{opacity:1}.player-item.me.active{border-color:var(--turn-color);box-shadow:0 0 12px rgba(var(--turn-color-rgb), .25)}.player-item.eliminated{opacity:.3}.player-item.eliminated .player-name{text-decoration:line-through}.player-color{border-radius:50%;flex-shrink:0;width:20px;height:20px;transition:box-shadow .3s}.player-item.active .player-color{box-shadow:0 0 8px}.player-info{flex-direction:column;flex:1;min-width:0;display:flex}.player-name{white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:500;overflow:hidden}.player-cells{color:var(--text-secondary);font-size:.65rem}.turn-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:.15rem .4rem;font-size:.6rem;font-weight:700}.out-badge{text-transform:uppercase;color:var(--danger);background:#e74c3c33;border-radius:4px;padding:.15rem .4rem;font-size:.6rem;font-weight:700}.game-status{background:var(--bg-secondary);border:1px solid var(--border);text-align:center;border-radius:10px;padding:.75rem;transition:border-color .4s,box-shadow .4s}.game-status.my-turn{border-color:var(--turn-color);box-shadow:0 0 20px rgba(var(--turn-color-rgb), .15)}.status-message{margin-bottom:.3rem;font-size:.9rem;font-weight:600}.game-status.my-turn .status-message{color:var(--turn-color)}.turn-count{color:var(--text-secondary);font-size:.75rem}.turn-indicator-bar{background:var(--bg-primary);border-radius:2px;height:3px;margin-top:.5rem;overflow:hidden}.indicator{background:var(--turn-color);width:0%;height:100%;transition:width .3s,background .3s}.indicator.active{width:100%;animation:1.5s ease-in-out infinite pulseGlow}@keyframes pulseGlow{0%,to{opacity:1}50%{opacity:.7}}.game-status.waiting .status-message{color:var(--text-secondary)}.game-status.finished .status-message{color:var(--accent);font-size:1.1rem}.game-board{flex:1;justify-content:center;display:flex}.grid-container{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:.6rem;transition:border-color .4s,box-shadow .4s}.app.turn-red .grid-container{border-color:#e74c3c33;box-shadow:0 0 30px #e74c3c0f}.app.turn-blue .grid-container{border-color:#3498db33;box-shadow:0 0 30px #3498db0f}.app.turn-green .grid-container{border-color:#2ecc7133;box-shadow:0 0 30px #2ecc710f}.app.turn-yellow .grid-container{border-color:#f1c40f33;box-shadow:0 0 30px #f1c40f0f}.grid{gap:3px;width:min(460px,100vw - 220px);height:min(460px,100vw - 220px);display:grid}.cell{cursor:pointer;border:2px solid #0000;border-radius:6px;justify-content:center;align-items:center;transition:transform .12s,box-shadow .15s,opacity .2s;display:flex;position:relative}.cell-empty{background:var(--bg-primary)!important;border-color:var(--border)!important}.cell-owned{opacity:.9}.cell-owned:hover{opacity:1}.cell-clickable{cursor:pointer}.cell-clickable:hover{box-shadow:0 0 12px rgba(var(--turn-color-rgb), .5);z-index:2;transform:scale(1.08)}.cell-clickable:active{transform:scale(.95)}.dots-container{width:100%;height:100%;position:relative}.dot{background-color:#fff;border-radius:50%;width:9px;height:9px;animation:.2s cubic-bezier(.34,1.56,.64,1) dotPop;position:absolute;box-shadow:0 0 4px #0000004d}@keyframes dotPop{0%{transform:scale(0)}to{transform:scale(1)}}.dot-center{top:50%;left:50%;transform:translate(-50%,-50%)}.dot-top{top:15%;left:50%;transform:translate(-50%)}.dot-bottom{bottom:15%;left:50%;transform:translate(-50%)}.dot-left{top:50%;left:15%;transform:translateY(-50%)}.dot-right{top:50%;right:15%;transform:translateY(-50%)}.dot-top-left{top:15%;left:15%}.dot-top-right{top:15%;right:15%}.dot-bottom-left{bottom:15%;left:15%}.dot-bottom-right{bottom:15%;right:15%}@keyframes explode{0%{transform:scale(1)}30%{filter:brightness(2);transform:scale(1.4)}60%{transform:scale(.8)}to{filter:brightness();transform:scale(1)}}@keyframes explodeFlash{0%{box-shadow:0 0 #fffc}50%{box-shadow:0 0 30px 10px #fff9}to{box-shadow:0 0 #fff0}}@keyframes ripple{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(2.5)}}.cell.exploding{z-index:10;animation:.5s cubic-bezier(.34,1.56,.64,1) explode}.cell.exploding:after{content:"";pointer-events:none;border-radius:12px;animation:.5s ease-out explodeFlash;position:absolute;inset:-8px}.cell.captured{animation:.4s cubic-bezier(.34,1.56,.64,1) cellCapture}@keyframes cellCapture{0%{filter:brightness(2.5);transform:scale(.7)}50%{transform:scale(1.15)}to{filter:brightness();transform:scale(1)}}.cell.dot-added{animation:.25s dotAdded}@keyframes dotAdded{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}.cell.cell-pulse{animation:.4s cellPulse}@keyframes cellPulse{0%{filter:brightness();transform:scale(1)}30%{filter:brightness(1.3);transform:scale(1.08)}to{filter:brightness();transform:scale(1)}}.cell-cursors{z-index:20;pointer-events:none;gap:2px;display:flex;position:absolute;top:2px;right:2px}.cell-cursor{border:1.5px solid #ffffffe6;border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite cursorPulse;position:relative;box-shadow:0 0 4px #0006}.cell-cursor-name{color:#fff;white-space:nowrap;pointer-events:none;background:#000000b3;border-radius:3px;padding:1px 4px;font-size:9px;font-weight:700;position:absolute;top:-18px;left:50%;transform:translate(-50%)}@keyframes cursorPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}}.winner-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:500;background:#000000bf;justify-content:center;align-items:center;padding:1rem;animation:.4s overlayFadeIn;display:flex;position:fixed;inset:0}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.winner-card{background:var(--bg-secondary);border:1px solid var(--border);text-align:center;border-radius:20px;width:100%;max-width:360px;padding:2.5rem 3rem;animation:.5s cubic-bezier(.34,1.56,.64,1) winnerSlideUp;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000080}@keyframes winnerSlideUp{0%{opacity:0;transform:translateY(40px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}.winner-card:before{content:"";height:3px;position:absolute;top:0;left:0;right:0}.winner-card.turn-red:before{background:#e74c3c}.winner-card.turn-blue:before{background:#3498db}.winner-card.turn-green:before{background:#2ecc71}.winner-card.turn-yellow:before{background:#f1c40f}.winner-crown{margin-bottom:.5rem;font-size:3.5rem;animation:.6s cubic-bezier(.34,1.56,.64,1) .3s both crownBounce}@keyframes crownBounce{0%{transform:scale(0)rotate(-20deg)}to{transform:scale(1)rotate(0)}}.winner-title{color:var(--text-primary);margin-bottom:.75rem;font-size:1.75rem;font-weight:800}.winner-color-bar{border-radius:2px;width:60px;height:4px;margin:0 auto 1rem;animation:.4s .4s both barGrow}@keyframes barGrow{0%{width:0}to{width:60px}}.winner-name{margin-bottom:.25rem;font-size:1.5rem;font-weight:700}.winner-subtitle{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.9rem}.winner-btn{padding:.75rem 2rem;font-size:1rem}.winner-card.turn-red{border-color:#e74c3c4d}.winner-card.turn-blue{border-color:#3498db4d}.winner-card.turn-green{border-color:#2ecc714d}.winner-card.turn-yellow{border-color:#f1c40f4d}@media (width<=850px){.grid{width:min(400px,100vw - 200px);height:min(400px,100vw - 200px)}}@media (width<=650px){.app-main{padding:.5rem}.game{gap:.5rem}.game-header{padding:0}.room-code{font-size:.9rem}.game-content{flex-direction:column-reverse;gap:.5rem}.game-sidebar{min-width:unset;flex-direction:row;gap:.5rem;width:100%}.player-list,.game-status{flex:1}.grid-container{width:100%;padding:.4rem}.grid{aspect-ratio:1;width:100%;max-width:none;height:0;padding-bottom:100%}.player-item{gap:.4rem;padding:.35rem}.player-color{width:16px;height:16px}.player-name{font-size:.7rem}.player-cells{font-size:.6rem}.status-message{font-size:.8rem}.turn-count{font-size:.65rem}.cell{border-radius:4px}.dot{width:7px;height:7px}.cell-clickable:active{transform:scale(1.15)}.winner-card{border-radius:16px;padding:2rem 1.5rem}.winner-crown{font-size:2.5rem}.winner-title{font-size:1.4rem}.winner-name{font-size:1.25rem}}@media (width<=400px){.app-header{padding:.5rem .75rem}.app-header h1{font-size:1rem}.connection-status{padding:.25rem .5rem;font-size:.65rem}.lobby-container{padding:1.25rem 1rem}.lobby-container h2{font-size:1.25rem}.grid{gap:2px}.dot{width:5px;height:5px}}@media (height<=500px) and (orientation:landscape){.app-header{padding:.3rem 1rem}.game-content{flex-direction:row}.game-sidebar{flex-direction:column;width:150px;min-width:150px}.grid{width:min(350px,100vh - 120px);height:min(350px,100vh - 120px)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}