:root{--py-blue: #3776AB;--py-yellow: #FFD43B;--bg: #0d1117;--surface: #131920;--surface2: #1a2332;--border: rgba(55, 118, 171, .25);--text: #e6edf3;--muted: rgba(139, 180, 220, .5);--hit: #e74c3c;--hit-glow: rgba(231, 76, 60, .5);--green: #2ecc71;--cell: 38px;--radius: 6px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(55,118,171,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(55,118,171,.04) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;z-index:0}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.6) 100%);pointer-events:none;z-index:0}#root{position:relative;z-index:1}@keyframes gradient-pan{0%{background-position:0% center}to{background-position:200% center}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-border{0%,to{box-shadow:0 0 #3776ab66,0 0 12px #3776ab33}50%{box-shadow:0 0 0 4px #3776ab1a,0 0 24px #3776ab59}}@keyframes hit-explode{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.25)}to{transform:scale(1);opacity:1}}@keyframes miss-drop{0%{transform:scale(0) rotate(-30deg);opacity:0}70%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes ship-placed{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes fadein{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes trophy-bounce{0%,to{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(2deg)}}@keyframes scanlines{0%{background-position:0 0}to{background-position:0 4px}}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;animation:fadein .35s ease-out}.loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1rem;gap:.75rem}.loading:before{content:"⚓";font-size:1.4rem;animation:float 1.8s ease-in-out infinite}.menu{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}.menu-logo{font-size:5rem;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(55,118,171,.5))}.menu h1{font-size:3rem;letter-spacing:-.03em;background:linear-gradient(90deg,#3776ab,#7ec8f7,#ffd43b,#7ec8f7,#3776ab);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradient-pan 5s linear infinite}.menu-sub{color:var(--muted);font-size:.9rem}.username{color:var(--py-yellow);font-weight:700;text-shadow:0 0 12px rgba(255,212,59,.4)}.menu-divider{width:1px;height:40px;background:var(--border)}.btn-primary{position:relative;overflow:hidden;background:linear-gradient(135deg,#2d6699,var(--py-blue),#4a90d9);color:#fff;border:none;padding:.65rem 1.75rem;font-family:inherit;font-size:.95rem;cursor:pointer;border-radius:var(--radius);box-shadow:0 0 16px #3776ab59,inset 0 1px #ffffff1a;transition:transform .15s,box-shadow .15s}.btn-primary:after{content:"";position:absolute;top:-50%;left:-65%;width:35%;height:200%;background:#ffffff2e;transform:skew(-18deg);transition:left .45s ease}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 28px #3776ab8c,inset 0 1px #ffffff26}.btn-primary:hover:after{left:130%}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{background:#222;color:#444;box-shadow:none;cursor:not-allowed;transform:none}.btn-primary.btn-large{padding:.9rem 2.75rem;font-size:1.05rem;letter-spacing:.02em}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:.55rem 1.25rem;font-family:inherit;font-size:.88rem;cursor:pointer;border-radius:var(--radius);transition:background .15s,border-color .15s,transform .15s}.btn-secondary:hover{background:#253347;border-color:#3776ab80;transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0)}.btn-ghost{background:transparent;color:var(--muted);border:none;font-family:inherit;font-size:.88rem;cursor:pointer;transition:color .15s;letter-spacing:.01em}.btn-ghost:hover{color:var(--text)}.error-banner{background:#e74c3c1f;border:1px solid rgba(231,76,60,.35);color:#e74c3c;padding:.55rem 1.25rem;border-radius:var(--radius);font-size:.88rem;box-shadow:0 0 12px #e74c3c1a}.board-grid{display:grid;grid-template-columns:22px repeat(10,var(--cell));grid-template-rows:22px repeat(10,var(--cell));gap:2px;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 4px 24px rgba(0,0,0,.4))}.board-label{display:flex;align-items:center;justify-content:center;font-size:.68rem;color:var(--muted);letter-spacing:.04em}.cell{width:var(--cell);height:var(--cell);border:1px solid var(--border);position:relative;transition:background .12s,box-shadow .12s;border-radius:2px}.cell-water{background:linear-gradient(135deg,#141e2b,var(--surface2))}.cell-ship{background:linear-gradient(135deg,#2a6496,var(--py-blue),#4a90d9);border-color:#4a90d980;box-shadow:inset 0 1px #ffffff1a;animation:ship-placed .2s ease-out}.cell-ship-hit{background:linear-gradient(135deg,#c0392b,var(--hit));border-color:#e74c3c99;box-shadow:0 0 12px var(--hit-glow);animation:hit-explode .35s cubic-bezier(.2,.8,.4,1)}.cell-ship-hit:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffffffe6;font-size:1rem;text-shadow:0 0 6px rgba(0,0,0,.5);line-height:1}.cell-water-miss{background:linear-gradient(135deg,#141e2b,var(--surface2))}.cell-water-miss:after{content:"·";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#8bb4dc66;font-size:1.6rem;line-height:1;animation:miss-drop .3s ease-out}.cell-unknown{background:linear-gradient(135deg,#0e1825,#111c28);cursor:crosshair}.cell-unknown:hover,.cell-target{background:linear-gradient(135deg,#3776ab33,#3776ab59);border-color:#3776ab80;box-shadow:inset 0 0 8px #3776ab33;cursor:crosshair}.cell-hit{background:linear-gradient(135deg,#c0392b,var(--hit));border-color:#e74c3c99;box-shadow:0 0 14px var(--hit-glow);cursor:default;animation:hit-explode .35s cubic-bezier(.2,.8,.4,1)}.cell-hit:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffffffe6;font-size:1rem;text-shadow:0 0 6px rgba(0,0,0,.5);line-height:1}.cell-miss{background:linear-gradient(135deg,#0e1825,#111c28);cursor:default}.cell-miss:after{content:"○";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#8bb4dc73;font-size:.95rem;line-height:1;animation:miss-drop .3s ease-out}.cell-preview-valid{background:linear-gradient(135deg,#3776ab80,#4a90d9a6)!important;border-color:#4a90d9b3!important;box-shadow:inset 0 1px #ffffff1a!important}.cell-preview-invalid{background:#e74c3c4d!important;border-color:#e74c3c80!important}@keyframes sunk-settle{0%{transform:scale(1.2);box-shadow:0 0 28px #e74c3ce6}60%{transform:scale(.95)}to{transform:scale(1);box-shadow:0 0 10px #a01e1e66}}.cell-sunk{background:linear-gradient(135deg,#1c0808,#3a1010);border-color:#a02828b3;box-shadow:0 0 10px #a01e1e66;animation:sunk-settle .55s cubic-bezier(.2,.8,.3,1)}.cell-sunk:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#dc5a5ad9;font-size:.9rem;line-height:1}.cell-attack-sunk{background:linear-gradient(135deg,#1c0808,#3a1010);border-color:#a0282899;box-shadow:0 0 8px #a01e1e4d;cursor:default;animation:sunk-settle .55s cubic-bezier(.2,.8,.3,1)}.cell-attack-sunk:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#dc5a5acc;font-size:.9rem;line-height:1}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-16px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes toast-out{0%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-8px)}}.toast{position:fixed;top:1.5rem;left:50%;transform:translate(-50%);padding:.85rem 2rem;border-radius:8px;font-size:1.05rem;font-weight:700;z-index:200;white-space:nowrap;animation:toast-in .3s ease-out,toast-out .4s ease-in 3.1s forwards;pointer-events:none}.notif-success{background:#1e5a28f2;border:1px solid rgba(46,204,113,.5);color:#aff5c0;box-shadow:0 0 30px #2ecc714d,0 4px 20px #00000080}.notif-danger{background:#5a1414f2;border:1px solid rgba(231,76,60,.5);color:#ffb0a8;box-shadow:0 0 30px #e74c3c4d,0 4px 20px #00000080}.play-main{display:flex;align-items:flex-start;gap:1.5rem}.fleet-status{display:flex;flex-direction:column;gap:.35rem;min-width:155px;background:#131920b3;border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.fleet-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:.2rem}.fleet-ship{display:flex;flex-direction:column;gap:.2rem;padding:.25rem 0;transition:opacity .3s}.fleet-ship.fleet-sunk{opacity:.45}.fleet-ship-name{font-size:.72rem;color:var(--muted)}.fleet-ship.fleet-sunk .fleet-ship-name{text-decoration:line-through;color:#c8505099}.fleet-ship-cells{display:flex;gap:2px}.fleet-cell{width:10px;height:10px;border-radius:2px;background:var(--py-blue);transition:background .3s}.fleet-cell.sunk{background:#a0282899}.fleet-mine .fleet-cell{background:#3776abb3}.fleet-enemy .fleet-cell{background:#50505080}.fleet-enemy .fleet-cell.sunk{background:#a0282899}.placement-screen{gap:1.25rem}.placement-screen h2{font-size:1.5rem;color:var(--py-yellow);text-shadow:0 0 20px rgba(255,212,59,.3);letter-spacing:-.01em}.placement-hint{color:var(--muted);font-size:.83rem}kbd{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:.1em .45em;font-family:inherit;font-size:.78rem;color:var(--text);box-shadow:0 2px #0000004d}.placement-layout{display:flex;gap:2.5rem;align-items:flex-start}.placement-sidebar{display:flex;flex-direction:column;gap:1.25rem;min-width:220px;background:#131920b3;border:1px solid var(--border);border-radius:10px;padding:1.25rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 32px #0000004d}.sidebar-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:.6rem}.ships-list{display:flex;flex-direction:column;gap:.35rem}.ship-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .7rem;background:var(--surface);border:1px solid transparent;border-radius:5px;font-size:.8rem;opacity:.45;transition:all .2s}.ship-item.current{opacity:1;border-color:var(--py-blue);background:#3776ab1f;animation:pulse-border 2s ease-in-out infinite}.ship-item.placed{opacity:.35}.ship-name{flex:1}.ship-cells{color:var(--py-blue);letter-spacing:2px;font-size:.6rem;text-shadow:0 0 6px rgba(55,118,171,.5)}.ship-check{color:var(--green);margin-left:auto;text-shadow:0 0 8px rgba(46,204,113,.5)}.placement-controls{display:flex;flex-direction:column;gap:.5rem}.play-screen{gap:1rem}.play-screen h2{font-size:1.5rem;color:var(--py-yellow);text-shadow:0 0 20px rgba(255,212,59,.3);letter-spacing:-.01em}.play-hint{color:var(--muted);font-size:.83rem}.play-boards{display:flex;gap:2.5rem;align-items:flex-start}.board-section{display:flex;flex-direction:column;align-items:center}.board-section h3{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.65rem;text-align:center}.board-section.attack h3{color:#e74c3cb3}.play-divider{width:1px;align-self:stretch;background:linear-gradient(to bottom,transparent,var(--border) 20%,var(--border) 80%,transparent);margin:0 .5rem}.pass-screen{text-align:center;background:radial-gradient(ellipse at 50% 30%,rgba(55,118,171,.08) 0%,transparent 70%)}.pass-card{background:#131920d9;border:1px solid var(--border);border-radius:14px;padding:3rem 3.5rem;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:1.25rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 0 1px #3776ab1a,0 8px 48px #00000080,0 0 60px #3776ab0f}.pass-icon{font-size:3.5rem;animation:float 2.5s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(55,118,171,.4))}.pass-card h2{font-size:1.5rem;color:var(--py-yellow);text-shadow:0 0 20px rgba(255,212,59,.35)}.pass-card p{color:var(--muted);font-size:.93rem;line-height:1.6}.pass-warning{font-size:.8rem;color:#ffd43b8c;border-top:1px solid var(--border);padding-top:.75rem;width:100%;text-align:center}.pass-card.result-hit h2{color:var(--hit);text-shadow:0 0 20px var(--hit-glow)}.pass-card.result-hit .pass-icon{filter:drop-shadow(0 0 16px var(--hit-glow))}.pass-card.result-miss h2{color:var(--muted)}.gameover-screen{text-align:center;background:radial-gradient(ellipse at 50% 40%,rgba(255,212,59,.06) 0%,transparent 65%)}.gameover-card{background:#131920d9;border:1px solid rgba(255,212,59,.2);border-radius:14px;padding:3.5rem 4rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 0 1px #ffd43b14,0 8px 64px #0009,0 0 80px #ffd43b0f}.gameover-trophy{font-size:5.5rem;animation:trophy-bounce 1.8s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(255,212,59,.5))}.gameover-card h1{font-size:2.75rem;letter-spacing:-.03em;background:linear-gradient(90deg,#f39c12,var(--py-yellow),#f1c40f);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradient-pan 3s linear infinite}.gameover-card h2{font-size:1.05rem;color:var(--muted);font-weight:400;line-height:1.5}.gameover-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}.lobby-buttons{display:flex;flex-direction:column;gap:.85rem;width:300px}.btn-secondary.btn-large{padding:.85rem 2rem;font-size:1rem}.join-form{display:flex;flex-direction:column;align-items:center;gap:1rem;animation:fadein .25s ease-out}.join-label{color:var(--muted);font-size:.9rem}.code-input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:2rem;font-weight:700;letter-spacing:.4em;text-align:center;padding:.6rem 1.5rem;width:260px;transition:border-color .15s,box-shadow .15s;text-transform:uppercase}.code-input:focus{outline:none;border-color:var(--py-blue);box-shadow:0 0 0 3px #3776ab26}.join-actions{display:flex;flex-direction:column;align-items:center;gap:.6rem}.waiting-card{background:#131920d9;border:1px solid var(--border);border-radius:14px;padding:3rem 3.5rem;max-width:460px;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 0 1px #3776ab14,0 8px 48px #00000080;text-align:center;animation:fadein .35s ease-out}.waiting-card h2{font-size:1.5rem;color:var(--py-yellow)}.waiting-card p{color:var(--muted)}.waiting-card strong{color:var(--text)}.error-card{border-color:#e74c3c4d;box-shadow:0 0 0 1px #e74c3c1a,0 8px 48px #00000080}.error-card h2{color:var(--hit)}.waiting-icon{font-size:3.5rem;animation:float 2.5s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(55,118,171,.4))}.code-display{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--py-blue);border-radius:8px;padding:.75rem 1.25rem;box-shadow:0 0 20px #3776ab26}.game-code{font-size:2.2rem;font-weight:700;letter-spacing:.35em;color:var(--py-yellow);text-shadow:0 0 16px rgba(255,212,59,.4);padding-left:.1em}.btn-copy{background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--muted);cursor:pointer;font-size:1.1rem;padding:.3rem .5rem;transition:color .15s,background .15s}.btn-copy:hover{color:var(--text);background:#253347}.waiting-sub{color:var(--muted);font-size:.85rem}.waiting-dots{display:flex;gap:.5rem;align-items:center}.waiting-dots span{width:8px;height:8px;border-radius:50%;background:var(--py-blue);animation:dot-pulse 1.4s ease-in-out infinite}.waiting-dots span:nth-child(2){animation-delay:.2s}.waiting-dots span:nth-child(3){animation-delay:.4s}@keyframes dot-pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}.placement-hint-small{color:var(--muted);font-size:.78rem;margin-top:-.5rem}.play-header{display:flex;flex-direction:column;align-items:center;gap:.6rem}.players-bar{display:flex;align-items:center;gap:1.25rem;font-size:.95rem}.pname{display:flex;align-items:center;gap:.4rem;padding:.3rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:.88rem}.pname.me{border-color:#3776ab80;color:var(--py-blue)}.pname.opp{border-color:#e74c3c59;color:#e74c3ccc}.pname-icon{font-size:1rem}.vs-badge{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.turn-indicator{font-size:.88rem;padding:.4rem 1.25rem;border-radius:20px;background:var(--surface);border:1px solid var(--border);transition:all .3s;letter-spacing:.01em}.turn-indicator.turn-mine{background:#3776ab1f;border-color:#3776ab80;color:var(--text);box-shadow:0 0 12px #3776ab26}.turn-indicator.turn-theirs{color:var(--muted)}.board-wrapper{position:relative}.board-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0d11178c;border-radius:2px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.overlay-pulse{color:var(--muted);font-size:.9rem;animation:dot-pulse 1.4s ease-in-out infinite;letter-spacing:.05em}.board-waiting .cell-unknown{cursor:not-allowed}.board-waiting .cell-unknown:hover{background:linear-gradient(135deg,#0e1825,#111c28);border-color:var(--border);box-shadow:none}