:root{--bg: #070d18;--bg-glow: #12325c;--surface: #101a2c;--surface-2: #16233a;--line: #223350;--line-soft: #1a2942;--text: #e8eefb;--muted: #90a4c4;--accent: #35d6d0;--accent-strong: #6ff0ea;--accent-ink: #04211f;--warn: #f5b74e;--danger: #ff5f6d;--danger-deep: #8f2230;--win: #4ade80;--cell: 34px;--gap: 3px;--radius: 14px;--radius-sm: 7px;--shadow: 0 18px 40px rgb(2 8 20 / 55%);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body,#root{min-height:100%}body{background:radial-gradient(120vw 80vh at 50% -20vh,var(--bg-glow) 0%,transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,h3{line-height:1.15;font-weight:650;letter-spacing:-.01em}ul{list-style:none;padding:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app{min-height:100vh;display:flex;flex-direction:column;padding:clamp(16px,3vw,40px)}.app__bar{display:flex;justify-content:flex-end;width:100%;max-width:1120px;margin:0 auto 12px}.app__main{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:1120px;margin:0 auto}.card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,3vw,32px)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font-weight:550;transition:background .15s ease,border-color .15s ease,transform .05s ease}.button:hover:not(:disabled){background:#1d2c47;border-color:#33507c}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.45}.button--primary{background:linear-gradient(180deg,var(--accent-strong),var(--accent));border-color:transparent;color:var(--accent-ink);font-weight:650}.button--primary:hover:not(:disabled){background:var(--accent-strong);border-color:transparent}.button--big{width:100%;padding:14px 20px;font-size:1.05rem}.button--ghost{background:transparent;border-color:transparent;color:var(--muted);padding:8px 12px}.button--ghost:hover:not(:disabled){background:transparent;color:var(--text);border-color:transparent}.label{display:block;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0c1626;transition:border-color .15s ease}.input:focus{border-color:var(--accent);outline:none}.input--code{font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace;font-size:1.35rem;letter-spacing:.35em;text-align:center;text-transform:uppercase}.home{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;max-width:460px;text-align:center}.home__title{font-size:clamp(2.2rem,7vw,3.2rem);letter-spacing:-.03em}.home__title span{background:linear-gradient(90deg,var(--accent-strong),#7aa2ff);-webkit-background-clip:text;background-clip:text;color:transparent}.home__lead{color:var(--muted);margin-top:10px}.home__panel{width:100%;display:flex;flex-direction:column;gap:18px}.home__divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.85rem}.home__divider:before,.home__divider:after{content:"";flex:1;height:1px;background:var(--line-soft)}.home__join{text-align:left}.home__join-row{display:flex;gap:10px}.home__join-row .button{white-space:nowrap}.home__settings-toggle{align-self:center;font-size:.88rem}.home__join-hint{color:var(--muted);font-size:.8rem;margin-top:8px}.settings{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--radius);border:1px solid var(--line-soft);background:#0c1626b3;text-align:left}.settings__variants{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.settings__variant{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0e1a2d;text-align:left;transition:border-color .15s ease,background .15s ease}.settings__variant:hover{border-color:#33507c}.settings__variant--active{border-color:var(--accent);background:#35d6d01f}.settings__variant-name{font-weight:600}.settings__variant-detail{color:var(--muted);font-size:.78rem}.settings__switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.9rem}.settings__switch input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);flex:none}.settings__switch em,.settings__hint{display:block;color:var(--muted);font-size:.78rem;font-style:normal}.settings__field{display:flex;flex-direction:column}.settings__field .label{margin-bottom:6px}.settings__select{padding:9px 12px;cursor:pointer}.settings__select option{background:var(--surface);color:var(--text)}.settings__hint{margin-top:6px}.lobby__settings{color:var(--muted);font-size:.85rem;text-align:center}.lobby{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}.lobby__hint{color:var(--muted);margin-top:-8px}.lobby__code{display:flex;gap:8px}.lobby__code span{width:48px;height:60px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#0c1626;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:1.9rem;font-weight:700;color:var(--accent-strong)}.lobby__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.lobby__waiting{display:flex;align-items:center;gap:10px;color:var(--muted)}.board{display:flex;flex-direction:column;gap:10px}.board__header{min-height:44px}.board__title{font-size:1.05rem}.board__subtitle{color:var(--muted);font-size:.85rem}.grid{display:flex;flex-direction:column;gap:var(--gap);padding:10px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,#0d1729,#0a1322);box-shadow:var(--shadow);width:max-content}.grid__row{display:flex;gap:var(--gap)}.grid__label{width:var(--cell);height:var(--cell);display:grid;place-items:center;font-size:.75rem;color:var(--muted)}.cell{width:var(--cell);height:var(--cell);padding:0;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:#12213a;position:relative;transition:background .12s ease,border-color .12s ease,transform .08s ease}.cell:disabled{cursor:default}.grid--interactive .cell:not(:disabled):hover{background:#1c3255;border-color:var(--accent)}.cell--unknown{background:#0f1c31}.cell--ship{background:linear-gradient(180deg,#62789c,#46597a);border-color:#7189b0}.cell--miss:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:8px;height:8px;border-radius:50%;background:#55719c}.cell--hit{background:linear-gradient(180deg,#ff7a72,var(--danger));border-color:#ff9a94;animation:pop .25s ease}.cell--hit:after,.cell--sunk:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:60%;height:2px;background:#ffffffd9;box-shadow:0 0 0 0 transparent;transform:rotate(45deg)}.cell--hit:before,.cell--sunk:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:60%;height:2px;background:#ffffffd9;transform:rotate(-45deg)}.cell--sunk{background:linear-gradient(180deg,#a02a38,var(--danger-deep));border-color:#c34252}.cell--preview{background:#35d6d059;border-color:var(--accent)}.cell--preview-bad{background:#ff5f6d52;border-color:var(--danger)}.cell--last{box-shadow:0 0 0 2px var(--accent-strong),0 0 16px #6ff0ea73}@keyframes pop{0%{transform:scale(.72)}to{transform:scale(1)}}.placement{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:center;width:100%}.placement__side{flex:1 1 280px;max-width:360px;display:flex;flex-direction:column;gap:16px}.placement__heading{font-size:1.1rem}.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.tray__ship{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0e1a2d;transition:border-color .15s ease,background .15s ease,opacity .15s ease}.tray__ship:hover:not(:disabled){border-color:#33507c}.tray__ship--active{border-color:var(--accent);background:#35d6d01f}.tray__ship--placed{opacity:.5}.tray__ship--placed.tray__ship--active{opacity:1}.tray__name{font-size:.95rem}.tray__cells{display:flex;gap:3px}.tray__cells i,.fleet-status__pips i{width:12px;height:12px;border-radius:3px;background:#55699010;border:1px solid #55698f}.placement__buttons{display:flex;flex-wrap:wrap;gap:8px}.placement__buttons .button{flex:1 1 auto;padding:9px 12px;font-size:.9rem}.placement__note{color:var(--warn);font-size:.85rem}.placement__rule{color:var(--muted);font-size:.82rem}.placement__status{color:var(--muted);font-size:.88rem;text-align:center}.battle,.gameover{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}.battle__boards{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;width:100%}.battle__status{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;width:100%}.banner{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:var(--surface);text-align:center}.banner--active{border-color:var(--accent);box-shadow:0 0 24px #35d6d038}.banner--warn{border-color:var(--warn);color:var(--warn)}.banner--result{border-radius:var(--radius);padding:18px 32px}.banner--win{border-color:var(--win);box-shadow:0 0 30px #4ade8038}.banner--lose{border-color:var(--danger)}.banner strong{font-size:1.05rem}.banner--result strong{font-size:1.6rem}.banner__detail{color:var(--muted);font-size:.88rem}.banner__score{margin-top:6px;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.banner__score b{color:var(--text);font-size:.95rem}.shot-log{width:100%;max-width:856px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line-soft);background:#101a2cb3}.shot-log__label{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.shot-log__label em{font-style:normal;opacity:.7}.shot-log__empty{display:flex;align-items:center;height:156px;color:var(--muted);font-size:.85rem}.shot-log__list{display:flex;flex-direction:column;gap:2px;height:156px;overflow-y:auto;padding:0;margin:0;list-style:none}.shot-log__entry{display:grid;flex:0 0 auto;grid-template-columns:56px 44px 1fr;align-items:baseline;gap:8px;padding:3px 6px;border-radius:var(--radius-sm);font-size:.85rem}.shot-log__entry:nth-child(odd){background:#2233504d}.shot-log__who{color:var(--muted)}.shot-log__cell{font-variant-numeric:tabular-nums;letter-spacing:.04em}.shot-log__entry--hit .shot-log__result{color:var(--warn)}.shot-log__entry--sunk .shot-log__result{color:var(--danger);font-weight:600}.shot-log__entry--miss .shot-log__result{color:var(--muted)}.fleet-status{flex:1 1 280px;max-width:420px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line-soft);background:#101a2cb3}.fleet-status__label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.fleet-status__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px}.fleet-status__item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;font-size:.9rem}.fleet-status__name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fleet-status__pips{display:flex;flex:0 0 auto;gap:3px}.fleet-status__item--sunk{color:var(--muted);text-decoration:line-through}.fleet-status__item--sunk .fleet-status__pips i{background:var(--danger-deep);border-color:var(--danger)}.gameover__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:420px}.gameover__hint{color:var(--accent);font-size:.9rem}.sound{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line-soft);background:#101a2cb3}.sound__toggle{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--accent);transition:color .15s ease,background .15s ease}.sound__toggle:hover{background:#35d6d01f}.sound__toggle--muted{color:var(--muted)}.sound__slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:96px;height:4px;border-radius:999px;background:var(--line);cursor:pointer}.sound__slider:disabled{cursor:not-allowed;opacity:.4}.sound__slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:none}.sound__slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);box-shadow:var(--shadow);max-width:min(92vw,460px)}.toast--error{border-color:var(--danger);bottom:84px}.toast--muted{color:var(--muted)}.toast__close{border:none;background:none;color:var(--muted);font-size:1.2rem;line-height:1;padding:0 2px}.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){:root{--cell: min(30px, 7.4vw)}}@media(max-width:560px){:root{--cell: min(28px, 7.6vw);--gap: 2px}.grid{padding:6px}.battle__boards{gap:20px}}