:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.main-menu{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.menu-container{background:#fff;border-radius:20px;width:100%;max-width:500px;padding:40px;box-shadow:0 20px 60px #0000004d}.game-title{text-align:center;color:#667eea;text-shadow:2px 2px 4px #0000001a;margin:0 0 40px;font-size:3rem}.menu-section{margin-bottom:30px}.menu-section label{color:#333;margin-bottom:10px;font-weight:600;display:block}.menu-section input{box-sizing:border-box;border:2px solid #ddd;border-radius:8px;width:100%;padding:12px;font-size:16px;transition:border-color .3s}.menu-section input:focus{border-color:#667eea;outline:none}.menu-section h2{color:#333;margin:0 0 15px;font-size:1.2rem}.mode-buttons{grid-template-columns:1fr 1fr;gap:15px;display:grid}.mode-button{cursor:pointer;text-align:center;background:#fff;border:3px solid #ddd;border-radius:12px;padding:20px;transition:all .3s}.mode-button:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.mode-button.selected{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}.mode-icon{margin-bottom:10px;font-size:2.5rem}.mode-title{margin-bottom:5px;font-size:1.1rem;font-weight:700}.mode-desc{opacity:.8;font-size:.85rem}.start-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:10px;width:100%;padding:15px;font-size:1.2rem;font-weight:700;transition:all .3s}.start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.start-button:disabled{opacity:.5;cursor:not-allowed}.grid-container{background:#f5f5f5;border-radius:8px;padding:10px;display:inline-block}.grid-labels{grid-template-columns:30px repeat(10,40px);gap:2px;margin-bottom:2px;display:grid}.corner-label{width:30px;height:30px}.col-label{color:#555;justify-content:center;align-items:center;height:30px;font-weight:600;display:flex}.grid-content{grid-template-columns:30px auto;gap:2px;display:grid}.row-labels{grid-template-rows:repeat(10,40px);gap:2px;display:grid}.row-label{color:#555;justify-content:center;align-items:center;width:30px;font-weight:600;display:flex}.grid{grid-template-rows:repeat(10,40px);gap:2px;display:grid}.grid-row{grid-template-columns:repeat(10,40px);gap:2px;display:grid}.cell{-webkit-user-select:none;user-select:none;background:#e0f2fe;border:2px solid #0ea5e9;border-radius:4px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;transition:all .2s;display:flex}.cell.clickable{cursor:pointer}.cell.clickable:hover{z-index:10;border-color:#0284c7;transform:scale(1.1);box-shadow:0 2px 8px #0ea5e94d}.cell.empty{background:#e0f2fe}.cell.ship{background:#94a3b8;border-color:#475569}.cell.hit{background:#fca5a5;border-color:#dc2626;animation:.5s hit-flash}.cell.miss{color:#3b82f6;background:#bfdbfe;border-color:#3b82f6}.cell.highlighted{background:#fef08a;border-color:#eab308;animation:1s infinite pulse}@keyframes hit-flash{0%,to{background:#fca5a5}50%{background:#ef4444}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.ship-placement{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}.ship-placement h2{text-align:center;color:#fff;text-shadow:2px 2px 4px #0003;margin-bottom:30px;font-size:2.5rem}.placement-helper{text-align:center;color:#fff;max-width:720px;margin:-10px auto 20px;font-size:1rem;font-weight:600}.placement-container{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:30px;display:flex}.placement-grid{background:#fff;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0003}.placement-controls{background:#fff;border-radius:12px;min-width:300px;max-width:350px;padding:30px;box-shadow:0 10px 30px #0003}.ship-list h3{color:#333;margin:0 0 15px;font-size:1.2rem}.ship-button{cursor:pointer;background:#fff;border:2px solid #ddd;border-radius:8px;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px;padding:15px;font-size:1rem;transition:all .2s;display:flex}.ship-button:hover:not(:disabled){border-color:#667eea;transform:translate(5px)}.ship-button.selected{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}.ship-button.placed{opacity:.7;cursor:not-allowed;background:#e7f5e9;border-color:#22c55e}.ship-button:disabled{cursor:not-allowed}.ship-name{text-transform:capitalize;font-weight:600}.ship-length{opacity:.8;font-size:.9rem}.check-mark{color:#22c55e;font-size:1.5rem;font-weight:700}.orientation-control{margin:25px 0}.orientation-button{color:#667eea;cursor:pointer;background:#fff;border:2px solid #667eea;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;padding:15px;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex}.orientation-button:hover:not(:disabled){color:#fff;background:#667eea}.orientation-button:disabled{opacity:.5;cursor:not-allowed}.orientation-icon{font-size:2rem}.error-message{color:#dc2626;text-align:center;background:#fee;border:2px solid #dc2626;border-radius:8px;margin:15px 0;padding:12px;font-weight:600;animation:.5s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.confirm-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);border:none;border-radius:8px;width:100%;margin-top:20px;padding:15px;font-size:1.2rem;font-weight:700;transition:all .2s}.confirm-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #22c55e66}.confirm-button:disabled{opacity:.5;cursor:not-allowed;background:#94a3b8}.menu-button{background:linear-gradient(135deg,#1f2937 0%,#475569 100%);margin-top:12px}.game-id-banner{background:#fff;border-radius:12px;max-width:600px;margin:0 auto 20px;padding:20px;box-shadow:0 4px 12px #00000026}.game-id-content{flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;display:flex}.game-id-label{color:#333;font-size:1.1rem;font-weight:700}.game-id-value{color:#667eea;letter-spacing:2px;background:#f3f4f6;border-radius:6px;padding:8px 16px;font-family:Courier New,monospace;font-size:1.3rem;font-weight:700}.copy-id-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;min-width:70px;padding:8px 20px;font-weight:600;transition:all .2s}.copy-id-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.player-status-banner{background:#fff;border-radius:12px;justify-content:space-around;gap:20px;max-width:600px;margin:0 auto 20px;padding:20px;display:flex;box-shadow:0 4px 12px #00000026}.player-status{flex-direction:column;align-items:center;gap:8px;display:flex}.status-label{color:#333;font-size:1rem;font-weight:700}.status-indicator{border-radius:20px;padding:6px 14px;font-size:1.1rem;font-weight:600;transition:all .3s}.status-indicator.ready{color:#22c55e;background:#e7f5e9;border:2px solid #22c55e}.status-indicator.waiting{color:#f59e0b;background:#fef3c7;border:2px solid #f59e0b}.battle-phase{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}.battle-header{text-align:center;margin-bottom:20px}.battle-header h2{color:#fff;text-shadow:2px 2px 4px #0003;margin:0 0 15px;font-size:2.5rem}.leave-button{color:#1f2937;cursor:pointer;background:#ffffffeb;border:none;border-radius:999px;margin-top:14px;padding:10px 16px;font-weight:700}.auto-finish-button{color:#fff;background:linear-gradient(135deg,#0f766e 0%,#0f172a 100%);margin-left:12px}.auto-finish-button:disabled{cursor:wait;opacity:.7}.turn-indicator{border-radius:25px;padding:12px 30px;font-size:1.3rem;font-weight:700;animation:2s infinite pulse-border;display:inline-block}.turn-indicator.my-turn{color:#fff;background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);box-shadow:0 4px 15px #22c55e66}.turn-indicator.opponent-turn{color:#fff;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);box-shadow:0 4px 15px #f59e0b66}@keyframes pulse-border{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.battle-message{text-align:center;border-radius:10px;max-width:760px;margin:0 auto 20px;padding:15px 30px;font-size:1.3rem;font-weight:700;animation:.3s slideDown}.battle-message.success{color:#fff;background:#22c55e}.battle-message.error{color:#fff;background:#ef4444}.battle-message.info{color:#fff;background:#3b82f6}.recent-shots{min-height:188px}.recent-shots-list{text-align:left;max-height:108px;margin-top:12px;padding-right:6px;overflow-y:auto}.recent-shot-row+.recent-shot-row{margin-top:8px}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.battle-grids{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:40px;margin-bottom:30px;display:flex}.grid-section{background:#fff;border-radius:12px;padding:25px;box-shadow:0 10px 30px #0003}.grid-section h3{text-align:center;color:#333;border-bottom:3px solid #667eea;margin:0 0 15px;padding-bottom:10px;font-size:1.5rem}.grid-stats{color:#555;background:#f5f5f5;border-radius:8px;justify-content:space-around;margin-top:15px;padding:10px;font-weight:600;display:flex}.grid-stats .danger{color:#dc2626;animation:1s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.battle-instructions{text-align:center;color:#333;background:#ffffffe6;border-radius:10px;max-width:500px;margin:0 auto;padding:15px 30px;font-size:1.1rem;font-weight:600}.battle-instructions p{margin:0}.game-end{background:radial-gradient(circle at 0 0,#fbbf2438,#0000 28%),radial-gradient(circle at 100% 0,#38bdf82e,#0000 24%),linear-gradient(145deg,#07111f 0%,#10253d 50%,#123d63 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex;position:relative;overflow:hidden}.end-container{z-index:2;background:#f7fafcf5;border-radius:28px;width:min(1180px,100%);padding:42px;position:relative;overflow:hidden;box-shadow:0 28px 80px #03071261}.ambient-glow{filter:blur(18px);opacity:.65;pointer-events:none;border-radius:50%;width:280px;height:280px;position:absolute;inset:-120px auto auto -80px}.ambient-glow.winner{background:radial-gradient(circle,#fbbf246b,#0000 70%)}.ambient-glow.loser{background:radial-gradient(circle,#94a3b857,#0000 70%)}.trophy-icon{z-index:2;margin-bottom:16px;font-size:4.75rem;line-height:1;animation:1s infinite bounce;position:relative}.trophy-icon.winner{filter:drop-shadow(0 8px 18px #fbbf2473)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}.end-title{z-index:2;margin:0 0 16px;font-size:clamp(2.8rem,8vw,4.2rem);font-weight:900;line-height:.95;position:relative}.end-title.winner{background:linear-gradient(135deg,#f59e0b 0%,#facc15 52%,#fb7185 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.end-title.loser{color:#94a3b8}.winner-announcement{z-index:2;margin:24px 0 8px;position:relative}.winner-text{color:#0f172a;margin:0 0 10px;font-size:1.9rem;font-weight:800}.subtext{color:#526174;margin:0;font-size:1.05rem}.end-actions{z-index:2;justify-content:center;gap:16px;margin-top:36px;margin-bottom:30px;display:flex;position:relative}.action-button{cursor:pointer;border:none;border-radius:14px;align-items:center;gap:10px;padding:15px 28px;font-size:1.08rem;font-weight:800;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 10px 26px #0f172a29}.action-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px #0f172a38}.action-button.rematch{color:#fff;background:linear-gradient(135deg,#0f766e 0%,#14b8a6 100%)}.action-button.menu{color:#fff;background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%)}.button-icon{font-size:1.4rem}.spike-actions{z-index:2;justify-content:center;gap:12px;margin:4px 0 8px;display:flex;position:relative}.spike-button{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:999px;padding:11px 18px;font-weight:800;transition:all .2s}.spike-button:hover{transform:translateY(-1px)}.spike-button.active{color:#fff;background:linear-gradient(135deg,#0f172a 0%,#0f766e 100%);border-color:#0000}.spike-button.ghost{background:#ffffffc7}.spike-button:disabled{cursor:not-allowed;opacity:.55;transform:none}.insight-panel{text-align:left;z-index:2;background:linear-gradient(#fffffffa,#eff6ffeb),#f8fafc;border:1px solid #94a3b838;border-radius:22px;margin-top:28px;padding:24px;position:relative}.panel-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.panel-header h2,.panel-header h3{color:#0f172a;margin:0}.panel-kicker{letter-spacing:.12em;text-transform:uppercase;color:#0f766e;margin:0 0 8px;font-size:.8rem;font-weight:800}.panel-chip{color:#334155;white-space:nowrap;background:#e2e8f0;border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:700}.analytics-panel .insight-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.insight-card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 10px 24px #0f172a14}.insight-label{color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-size:.82rem;display:block}.insight-card strong{color:#0f172a;font-size:1.7rem;line-height:1.1;display:block}.insight-copy{color:#64748b;margin:10px 0 0;font-size:.9rem}.insight-meter{background:#e2e8f0;border-radius:999px;height:10px;margin-top:12px;overflow:hidden}.insight-meter-fill{border-radius:inherit;background:linear-gradient(135deg,#0f766e 0%,#2dd4bf 100%);height:100%}.insight-meter-fill.accent{background:linear-gradient(135deg,#f97316 0%,#fb7185 100%)}.insight-list{flex-direction:column;gap:12px;margin-top:18px;display:flex}.insight-list h3{color:#0f172a;margin:0 0 4px}.insight-row{color:#334155;background:#fff;border-radius:14px;justify-content:space-between;gap:18px;padding:14px 16px;display:flex;box-shadow:0 8px 20px #0f172a0f}.insight-row strong{margin-bottom:4px;display:block}.insight-row p{color:#64748b;margin:0}.replay-hero{color:#fff;background:linear-gradient(135deg,#0f172a 0%,#0f766e 100%);border-radius:18px;justify-content:space-between;gap:24px;padding:18px 20px;display:flex}.replay-turn{letter-spacing:.04em;text-transform:uppercase;background:#ffffff24;border-radius:999px;margin-bottom:10px;padding:6px 10px;font-size:.8rem;font-weight:800;display:inline-block}.replay-hero h3{margin:0 0 8px;font-size:1.5rem}.replay-hero p{color:#ffffffd1;margin:0}.replay-controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.replay-speed-control{color:#fff;background:#ffffff1f;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:.88rem;font-weight:700;display:flex}.replay-speed-control select{color:#fff;background:#0f172a85;border:1px solid #ffffff2e;border-radius:999px;padding:6px 10px}.replay-progress{margin-top:18px}.replay-progress input{width:100%}.replay-progress-copy{color:#64748b;justify-content:space-between;margin-top:8px;font-size:.88rem;display:flex}.replay-grids{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px;display:grid}.replay-grid-card{background:#fff;border-radius:18px;padding:18px;box-shadow:0 10px 24px #0f172a14}.replay-grid-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.replay-grid-header h3{color:#0f172a;margin:0;font-size:1rem}.replay-grid-header span{color:#64748b;font-size:.84rem}.timeline-strip{scrollbar-width:thin;gap:10px;margin-top:18px;padding-bottom:4px;display:flex;overflow-x:auto}.timeline-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-top:18px;display:flex}.timeline-header h3{color:#0f172a;margin:0}.timeline-header p{color:#64748b;margin:6px 0 0;font-size:.9rem}.timeline-jump-buttons{gap:10px;display:flex}.timeline-step{color:#334155;cursor:pointer;text-align:left;background:#fff;border:1px solid #dbe4f0;border-radius:14px;flex:0 0 88px;padding:12px 10px}.timeline-step span{color:#64748b;margin-bottom:6px;font-size:.78rem;display:block}.timeline-step strong{text-transform:uppercase}.spike-button.compact{padding:9px 14px}.timeline-step.active{color:#fff;background:linear-gradient(135deg,#1d4ed8 0%,#0f766e 100%);border-color:#0000}.timeline-step.active span{color:#ffffffd6}.fireworks-container{pointer-events:none;z-index:1;position:fixed;inset:0}.firework{background:#fbbf24;border-radius:50%;width:5px;height:5px;animation:2s infinite firework;position:absolute}.firework:first-child{animation-delay:0s;top:20%;left:20%}.firework:nth-child(2){animation-delay:.5s;top:30%;left:70%}.firework:nth-child(3){animation-delay:1s;top:60%;left:50%}@keyframes firework{0%{opacity:1;transform:scale(1);box-shadow:0 0 20px 10px #fbbf24,0 0 40px 20px #f59e0b,0 0 60px 30px #f97316}to{opacity:0;transform:scale(30)}}@media (width<=960px){.end-container{padding:28px 20px}.replay-hero,.panel-header,.replay-grid-header,.timeline-header{flex-direction:column;align-items:flex-start}.replay-controls{justify-content:flex-start}.timeline-jump-buttons{width:100%}.replay-grids,.analytics-panel .insight-grid{grid-template-columns:1fr}}@media (width<=640px){.end-actions,.spike-actions{flex-direction:column}.action-button,.spike-button{justify-content:center;width:100%}.insight-row{flex-direction:column}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.app{width:100%;min-height:100vh}.app-invite-banner{color:#1f2937;word-break:break-all;background:#ffffffeb;border-radius:14px;justify-content:space-between;align-items:center;gap:16px;width:min(900px,100% - 32px);margin:0 auto 24px;padding:16px 20px;display:flex;box-shadow:0 10px 30px #00000026}.app-invite-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0f766e 0%,#0f172a 100%);border:none;border-radius:999px;flex-shrink:0;padding:10px 16px;font-weight:700}.app-loading{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.spinner{border:6px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:60px;height:60px;margin-bottom:20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-loading p{font-size:1.5rem;font-weight:600}@media (width<=640px){.app-invite-banner{flex-direction:column;align-items:flex-start}}