/* Kuģīši — 1940s naval war room: riveted steel, brass, paper, a live sea and a CRT radar. */
:root {
  --bg: #12150e;
  --steel: #444d33;
  --steel-2: #323a25;
  --steel-dark: #1b2014;
  --steel-hi: rgba(255, 250, 220, .14);
  --brass: #d4ad55;
  --brass-2: #a07d2f;
  --brass-ink: #2b1f07;
  --paper: #e6dbbd;
  --paper-2: #d7c79f;
  --ink: #2a2318;
  --stamp: #a3271c;
  --sea: #1c4652;
  --phosphor: #7dff8a;
  --phosphor-dim: rgba(125, 255, 138, .22);
  --crt: #04170a;
  --hit: #ff6a1a;
  --good: #7dff8a;
  --bad: #ff5a46;
  --text: #ece5cc;
  --muted: #b4ad8e;
  --accent: var(--brass);
  --accent-ink: var(--brass-ink);
  --hull: #6f786d;
  --hull-edge: #252a24;
  --sup: #9aa197;
  --gun: #3c423a;
  --shadow: 0 10px 26px rgba(0, 0, 0, .55);
  --radius: 6px;
  --stencil: "Black Ops One", Impact, "Arial Black", sans-serif;
  --type: "Special Elite", "Courier New", monospace;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sea-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125 .05' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.22 0 0 0 .02 .34 0 0 0 .14 .36 0 0 0 .2 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background:
    var(--noise),
    radial-gradient(1200px 700px at 50% -10%, #2c3321, var(--bg) 70%) fixed,
    var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--type);
  -webkit-tap-highlight-color: transparent;
}
/* Film grain and vignette over everything, like an old reel. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background: var(--noise), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55));
  opacity: .5; mix-blend-mode: multiply;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; font-family: var(--stencil); font-weight: 400; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
kbd { font-family: var(--mono); font-size: .8em; padding: 1px 6px; border: 1px solid currentColor; border-radius: 3px; }

/* Riveted steel panel */
.card {
  position: relative;
  background: var(--noise), linear-gradient(180deg, var(--steel), var(--steel-2));
  border: 2px solid var(--steel-dark); border-radius: var(--radius); padding: 22px;
  box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 -3px 0 rgba(0, 0, 0, .35), var(--shadow);
}
.card::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    radial-gradient(circle at 4px 4px, #8b8f78 0 2px, #2a2d22 2.6px, transparent 3.2px) top left / 8px 8px no-repeat,
    radial-gradient(circle at 4px 4px, #8b8f78 0 2px, #2a2d22 2.6px, transparent 3.2px) top right / 8px 8px no-repeat,
    radial-gradient(circle at 4px 4px, #8b8f78 0 2px, #2a2d22 2.6px, transparent 3.2px) bottom left / 8px 8px no-repeat,
    radial-gradient(circle at 4px 4px, #8b8f78 0 2px, #2a2d22 2.6px, transparent 3.2px) bottom right / 8px 8px no-repeat;
}
.card > * { position: relative; }

/* Aged paper documents */
.paper {
  background:
    var(--noise),
    radial-gradient(circle at 85% 15%, rgba(120, 80, 20, .18), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(120, 80, 20, .14), transparent 35%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink); border: 0; border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 28px rgba(0, 0, 0, .55);
}
.paper::before { display: none; }
.paper .muted { color: #5d533d; }
.paper h2 { color: var(--ink); text-shadow: none; }
.stamp {
  position: absolute; right: 18px; top: 14px; transform: rotate(8deg);
  font: 1rem var(--stencil); letter-spacing: .15em; color: var(--stamp);
  border: 3px double var(--stamp); padding: 2px 10px; opacity: .75; mix-blend-mode: multiply;
}

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; max-width: 1080px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 8px; font: 1.35rem var(--stencil); color: var(--brass); text-decoration: none; letter-spacing: .08em; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.brand svg { width: 32px; height: 32px; color: var(--brass); }
.top-right { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  appearance: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: grid; place-items: center;
  border: 2px solid var(--steel-dark); color: var(--text);
  background: radial-gradient(circle at 35% 30%, #69734e, var(--steel-2));
  box-shadow: inset 0 1px 0 var(--steel-hi), 0 3px 6px rgba(0, 0, 0, .5);
}
/* Brass dog tag */
.profile-chip {
  appearance: none; display: flex; align-items: center; gap: 8px; cursor: pointer; max-width: 46vw;
  padding: 5px 6px 5px 14px; border-radius: 20px; border: 1px solid var(--brass-2);
  background: linear-gradient(180deg, #e7c776, var(--brass) 50%, var(--brass-2));
  color: var(--brass-ink); font: 1rem var(--type); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 8px rgba(0, 0, 0, .5);
}
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-rating { font: 700 .85rem var(--mono); padding: 2px 8px; border-radius: 12px; background: var(--brass-ink); color: var(--brass); }
.conn { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.conn .dot { width: 10px; height: 10px; border-radius: 50%; background: #555; box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .5); }
.conn.ok .dot { background: var(--good); box-shadow: 0 0 8px var(--good), inset 0 -2px 2px rgba(0, 0, 0, .3); }
.conn.bad .dot { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
@media (max-width: 560px) {
  .conn #connText { display: none; }
  .brand span { display: none; }
}

main { max-width: 1080px; margin: 0 auto; padding: 8px 16px 96px; } /* room for the radio button */
.screen { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; }
.row.wrap { flex-wrap: wrap; justify-content: flex-start; }

/* Buttons: steel plates and brass */
.btn {
  appearance: none; cursor: pointer; color: var(--text);
  font: .95rem var(--stencil); letter-spacing: .06em; padding: 10px 16px; border-radius: 4px;
  border: 2px solid var(--steel-dark);
  background: var(--noise), linear-gradient(180deg, #5c6744, #3a4329);
  box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 3px 0 #13170e, 0 5px 10px rgba(0, 0, 0, .4);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  transition: transform .05s, filter .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 #13170e; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  color: var(--brass-ink); border-color: #5c4513; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  background: var(--noise), linear-gradient(180deg, #f0d48a, var(--brass) 45%, var(--brass-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 3px 0 #4a370e, 0 6px 14px rgba(0, 0, 0, .45);
}
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.big { width: 100%; padding: 13px 18px; font-size: 1.08rem; }
.small-btn { font-size: .85rem; }
.btn:focus-visible, input:focus-visible, .cell:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.pill { font: .85rem var(--type); padding: 3px 12px; border-radius: 3px; border: 1px solid rgba(236, 229, 204, .35); color: var(--muted); background: rgba(0, 0, 0, .25); }
.pill.good { color: var(--good); border-color: var(--good); }

/* Recessed dark inputs with phosphor text */
.text-input, .code-input {
  font: 1.15rem var(--mono); padding: 11px 14px; border-radius: 4px; width: 100%;
  border: 2px solid var(--steel-dark); background: var(--crt); color: var(--phosphor);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7); text-shadow: 0 0 6px rgba(125, 255, 138, .5);
}
.text-input::placeholder, .code-input::placeholder { color: rgba(125, 255, 138, .35); }
.code-input { letter-spacing: .3em; text-transform: uppercase; text-align: center; font-weight: 700; }

/* Nickname */
.nick-card { max-width: 460px; margin: 32px auto; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.nick-card h1 { font-size: 2rem; color: var(--brass); margin: 0; }
.nick-card p { margin: 0; }
.nick-card .text-input { text-align: center; font-size: 1.3rem; }

/* Home */
.hero { text-align: center; padding: 24px 0 20px; }
.hero h1 { font-size: clamp(2.6rem, 9vw, 4.4rem); letter-spacing: .1em; color: var(--brass); text-shadow: 0 3px 0 #3a2a08, 0 0 30px rgba(212, 173, 85, .25); margin: 0; }
.hero-ship { width: min(340px, 72vw); height: auto; display: block; margin: 0 auto 8px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.hero-ship.small { width: min(220px, 55vw); }
.lead { color: var(--muted); max-width: 540px; margin: 6px auto 0; font-size: 1.1rem; }

.play-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: 0 auto; }
.play-grid .card { display: flex; flex-direction: column; gap: 12px; }
.play-grid .card p, .play-grid .card h2 { margin: 0; }
.play-grid .card > .btn { margin-top: auto; }
.ranked-card { grid-column: 1 / -1; border-color: #5c4513; box-shadow: inset 0 0 0 2px rgba(212, 173, 85, .35), inset 0 1px 0 var(--steel-hi), var(--shadow); }
.ranked-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.my-rating { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; }
.my-rating strong {
  font: 700 2.4rem/1 var(--mono); color: var(--phosphor); background: var(--crt); padding: 4px 12px; border-radius: 4px;
  border: 2px solid var(--steel-dark); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7); text-shadow: 0 0 10px rgba(125, 255, 138, .6);
}
.ranked-card .btn.big { font-size: 1.25rem; padding: 16px; }
.join-row { display: flex; gap: 8px; }
.join-row .code-input { font-size: 1.05rem; letter-spacing: .2em; padding: 9px; min-width: 0; flex: 1; }
.join-row .text-input { min-width: 0; flex: 1; font-size: 1rem; padding: 9px 12px; }
@media (max-width: 640px) {
  .play-grid { grid-template-columns: 1fr; }
  .ranked-top { flex-direction: column; gap: 8px; }
  .my-rating { flex-direction: row; align-items: center; gap: 8px; text-align: left; }
}

/* Leaderboard: typed roster on paper */
.leaderboard { max-width: 920px; margin: 24px auto 0; }
.lb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-right: 110px; }
.lb-head h2 { font-size: 1.3rem; }
.lb-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.lb-list li, .lb-me {
  display: grid; grid-template-columns: 40px 1fr auto 64px; gap: 10px; align-items: center;
  padding: 7px 10px; border-bottom: 1px dashed rgba(42, 35, 24, .3);
}
.lb-list li.is-me, .lb-me { background: rgba(212, 173, 85, .35); }
.lb-me { margin-bottom: 8px; border: 1px dashed rgba(42, 35, 24, .5); }
.lb-list li.lb-empty { display: block; text-align: center; padding: 16px; }
.lb-rank { font: 700 .95rem var(--mono); text-align: center; }
.lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-wl { font: .85rem var(--mono); }
.lb-rating { font: 700 1.05rem var(--mono); text-align: right; }

/* Rules: briefing document */
.rules { max-width: 920px; margin: 24px auto 0; }
.rules h2 { font-size: 1.3rem; }
.rules ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.rules li { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px dashed rgba(42, 35, 24, .4); }
.rules .step { font: 1rem var(--stencil); color: var(--stamp); letter-spacing: .1em; }
.rules strong { font-size: 1.02rem; }
.rules .muted { font-size: .92rem; }
.rules .fleet-row { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.rules .fleet-row span { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #5d533d; }
.rules .fleet-row svg { height: 14px; }
.rules .ability-list { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(42, 35, 24, .4); }

/* Waiting / searching */
.waiting, .search-card { max-width: 460px; margin: 32px auto; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.search-card h2 { margin: 0; }
.big-code {
  font: 700 clamp(2.2rem, 10vw, 3.2rem)/1 var(--mono); letter-spacing: .18em; color: var(--phosphor);
  background: var(--crt); padding: 10px 18px; border-radius: 4px; border: 2px solid var(--steel-dark);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .8); text-shadow: 0 0 12px rgba(125, 255, 138, .6);
}
.search-time { font: 700 2.2rem/1 var(--mono); color: var(--phosphor); text-shadow: 0 0 10px rgba(125, 255, 138, .5); }
.sonar { position: relative; width: 80px; height: 80px; margin: 18px; }
.sonar span { position: absolute; inset: 0; border: 2px solid var(--phosphor); border-radius: 50%; opacity: 0; animation: ping 2.4s infinite; }
.sonar span:nth-child(2) { animation-delay: .8s; }
.sonar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes ping { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.2); opacity: 0; } }
.radar {
  position: relative; width: 190px; height: 190px; border-radius: 50%; margin: 8px 0 12px; overflow: hidden;
  background:
    repeating-radial-gradient(circle, transparent 0 30px, var(--phosphor-dim) 30px 31px),
    linear-gradient(transparent 49.6%, var(--phosphor-dim) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(90deg, transparent 49.6%, var(--phosphor-dim) 49.6% 50.4%, transparent 50.4%),
    radial-gradient(circle, #0b2b14, var(--crt));
  border: 8px solid #2a2e20; outline: 3px solid var(--brass-2);
  box-shadow: 0 0 30px rgba(125, 255, 138, .2), inset 0 0 30px rgba(0, 0, 0, .7);
}
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(125, 255, 138, .65), transparent 70deg); animation: sweep 2.4s linear infinite; }
.radar .blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 10px var(--phosphor); opacity: 0; animation: blip 2.4s infinite; }
.radar .b1 { left: 64%; top: 26%; animation-delay: .3s; }
.radar .b2 { left: 28%; top: 62%; animation-delay: 1.3s; }
.radar .b3 { left: 72%; top: 70%; animation-delay: 1.9s; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 60% { opacity: 0; } }

/* Room setup */
.setup-card { max-width: 560px; margin: 16px auto; display: flex; flex-direction: column; gap: 14px; }
.setup-card h2 { margin: 0; color: var(--brass); }
.setting-label { font: .95rem var(--stencil); letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; display: block; }
.seg { display: flex; gap: 0; border: 2px solid var(--steel-dark); border-radius: 4px; overflow: hidden; background: var(--steel-dark); }
.seg button {
  flex: 1; appearance: none; border: 0; cursor: pointer; padding: 10px 6px; font: .95rem var(--type); color: var(--muted);
  background: linear-gradient(180deg, #3d4630, #2c3322); border-right: 1px solid var(--steel-dark); line-height: 1.2;
}
.seg button:last-child { border-right: 0; }
.seg button small { display: block; font-size: .72rem; opacity: .8; }
.seg button.on { color: var(--brass-ink); background: linear-gradient(180deg, #f0d48a, var(--brass) 50%, var(--brass-2)); font-weight: 700; }
/* Toggle as a cockpit lever switch */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.lever {
  position: relative; flex-shrink: 0; width: 54px; height: 28px; border-radius: 14px; background: var(--crt);
  border: 2px solid var(--steel-dark); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .8);
}
.lever::after {
  content: ""; position: absolute; top: 2px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c4, var(--brass) 45%, var(--brass-2));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6); transition: transform .15s;
}
.switch input:checked + .lever { background: #0f3d1b; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .6), 0 0 8px rgba(125, 255, 138, .35); }
.switch input:checked + .lever::after { transform: translateX(25px); }
.switch input:focus-visible + .lever { outline: 2px solid var(--brass); outline-offset: 2px; }
.switch-text small { display: block; color: var(--muted); font-size: .8rem; }
.setup-fleet { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 22px; }
.setup-fleet svg { height: 14px; }

.rule-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.rule-chips span { font: .78rem var(--type); padding: 2px 8px; border: 1px solid rgba(236, 229, 204, .3); border-radius: 3px; color: var(--muted); background: rgba(0, 0, 0, .25); }

/* ---------- Boards ---------- */
.board {
  --cols: 11;
  --cell: clamp(16px, calc((100vw - 70px - 2px * var(--cols)) / var(--cols)), 38px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--cols), var(--cell));
  gap: 2px; user-select: none; touch-action: manipulation; width: max-content;
  padding: 8px; border-radius: 4px;
  border: 3px solid #1a1d14;
  box-shadow: 0 0 0 3px var(--brass-2), 0 0 0 6px #23271b, var(--shadow);
}
.label { display: grid; place-items: center; font: 700 .72rem var(--mono); color: #d8ebe9; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }

/* Own waters: a live sea chart */
.board:not(.target) { background: var(--sea); }
.board:not(.target)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 2px;
  background: var(--sea-tex) 0 0 / 240px 240px, linear-gradient(160deg, #24606d, #133a45);
  animation: waves 26s linear infinite;
}
@keyframes waves { to { background-position: 240px 120px, 0 0; } }
.cell {
  position: relative; border: 0; padding: 0; border-radius: 1px; background: transparent;
  box-shadow: inset 0 0 0 1px rgba(210, 240, 245, .14); transition: background .12s; cursor: default;
}

/* Enemy waters: CRT radar screen */
.board.target {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 45%, #0e3a1a, var(--crt) 75%);
}
/* The beam turns its gradient, not the box, and covers only the cells, so it pivots on the grid centre and stays inside the frame. */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.board.target::before {
  content: ""; position: absolute; inset: calc(10px + var(--cell)) 8px 8px calc(10px + var(--cell)); z-index: 4; pointer-events: none;
  background: conic-gradient(from var(--beam) at 50% 50%, rgba(125, 255, 138, .16), transparent 50deg);
  animation: beam 6s linear infinite; mix-blend-mode: screen;
}
@keyframes beam { to { --beam: 360deg; } }
.board.target::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .55)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}
.board.target .label { color: var(--phosphor); text-shadow: 0 0 6px rgba(125, 255, 138, .6); }
.board.target .cell { box-shadow: inset 0 0 0 1px var(--phosphor-dim); }
.board.target.active .cell:not(.shot) { cursor: crosshair; }
.board.target.active .cell:not(.shot):hover { background: rgba(125, 255, 138, .14); box-shadow: inset 0 0 0 2px var(--phosphor); }
.board.target.active .cell:not(.shot):hover::before {
  content: ""; position: absolute; inset: 16%; z-index: 3; border-radius: 50%; border: 2px solid var(--phosphor);
  background: linear-gradient(var(--phosphor), var(--phosphor)) center / 2px 100% no-repeat, linear-gradient(var(--phosphor), var(--phosphor)) center / 100% 2px no-repeat;
  filter: drop-shadow(0 0 3px var(--phosphor));
}

/* Miss: ripples on the sea, a phosphor ring on radar */
.cell.miss::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; border-radius: 50%; z-index: 2;
  border: 2px solid rgba(225, 245, 250, .75); background: radial-gradient(circle, rgba(225, 245, 250, .8) 25%, transparent 30%);
  transform: translate(-50%, -50%);
}
.board.target .cell.miss::after { border-color: rgba(125, 255, 138, .6); background: radial-gradient(circle, rgba(125, 255, 138, .7) 22%, transparent 28%); box-shadow: 0 0 6px rgba(125, 255, 138, .4); }
/* Hit: burning */
.cell.hit { background: radial-gradient(circle, rgba(255, 106, 26, .4), transparent 72%); }
.cell.hit::after {
  content: ""; position: absolute; inset: 4%; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2c2 6 10 9 10 18a10 10 0 0 1-20 0c0-5 3-8 4-12 1 3 3 5 3 5s-1-7 3-11z' fill='%23ff5a14'/%3E%3Cpath d='M16 13c1 3 6 5 6 10a6 6 0 0 1-12 0c0-3 2-5 2-7 1 2 2 3 2 3s0-4 2-6z' fill='%23ffc93c'/%3E%3Cpath d='M16 21c1 1 3 2 3 4a3 3 0 0 1-6 0c0-1 1-2 1-3 1 1 1 1 1 1s0-1 1-2z' fill='%23fff3b0'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 110, 20, .8));
  transform-origin: 50% 90%; animation: flicker .5s ease-in-out infinite alternate;
}
.cell.sunk { background: radial-gradient(circle, rgba(40, 20, 10, .55), transparent 80%); }
.cell.sunk::after { opacity: .55; filter: grayscale(.5) drop-shadow(0 -4px 4px rgba(40, 40, 40, .8)); animation-duration: 1.2s; }
@keyframes flicker { from { transform: scale(.92, .96) rotate(-2deg); } to { transform: scale(1.04, 1.06) rotate(2deg); } }
.cell.last { animation: pulse 1s ease 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--brass); } }

.cell.preview-ok { background: rgba(125, 255, 138, .3); }
.cell.preview-bad { background: rgba(255, 90, 70, .4); }
#placeBoard .cell { cursor: pointer; }

/* Aiming an ability */
.cell.aim { background: rgba(255, 196, 80, .28) !important; box-shadow: inset 0 0 0 2px var(--brass) !important; }
.cell.aim-center { background: rgba(255, 90, 70, .45) !important; }

/* Sonar contact readouts */
.ping {
  position: relative; z-index: 3; pointer-events: none; border: 2px dashed var(--phosphor); border-radius: 3px;
  display: grid; place-items: center; box-shadow: 0 0 10px rgba(125, 255, 138, .3) inset;
}
.ping b {
  font: 700 calc(var(--cell) * .55) var(--mono); color: var(--crt); background: var(--phosphor);
  padding: 0 6px; border-radius: 3px; box-shadow: 0 0 10px var(--phosphor);
}

/* Ship sprites — span their cells on top of the water */
.sprite { position: relative; z-index: 1; pointer-events: none; padding: 1px; }
.sprite svg { display: block; width: 100%; height: 100%; filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .55)); }
.sprite.ghost { opacity: .5; }
.sprite.ghost.bad { opacity: .35; filter: sepia(1) hue-rotate(-40deg) saturate(4); }
.sprite.sunk { filter: grayscale(.8) brightness(.4) sepia(.5); }
.sprite.sunk svg { transform: rotate(-3deg) scale(.95); }
.sprite.revealed { opacity: .6; filter: drop-shadow(0 0 4px rgba(125, 255, 138, .6)); }
.hull { fill: url(#hullG); stroke: var(--hull-edge); stroke-width: 2.5; }
.deck { fill: url(#deckG); }
.planks { stroke: rgba(60, 40, 20, .35); stroke-width: 1.2; }
.sup { fill: url(#supG); stroke: var(--hull-edge); stroke-width: 2; }
.gun, .gun *, .funnel { fill: url(#gunG); stroke: #1a1d18; stroke-width: 1.5; }
.funnel-top { fill: #111; }
.flight { fill: #3d423c; stroke: #1a1d18; stroke-width: 2; }
.flight-line { stroke: #e8e2c8; stroke-width: 3; stroke-dasharray: 14 10; }
.plane { fill: #8e978a; }

/* Effects */
.fx { position: relative; z-index: 5; pointer-events: none; }
/* Each part's animation starts after --d, so a sinking ship can explode cell by cell. */
.fx > * { position: absolute; left: 50%; top: 50%; opacity: 0; }
.fx .ring { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #e2fbff; animation: ring .8s ease-out var(--d, 0ms) both; }
.fx .ring.r2 { animation: ring 1.1s ease-out calc(var(--d, 0ms) + 150ms) both; }
.fx .plume {
  width: 46%; height: 120%; border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 80%, #fff, #c6f1ff 45%, rgba(150, 230, 255, 0) 72%);
  transform-origin: 50% 100%; animation: plume .7s ease-out var(--d, 0ms) both;
}
.fx.splash i { width: 6px; height: 6px; border-radius: 50%; background: #d4f5ff; animation: drop .75s ease-out var(--d, 0ms) both; }
.fx .flash { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #fff, #fff6b0 40%, rgba(255, 220, 120, 0) 70%); animation: flash .3s ease-out var(--d, 0ms) both; }
.fx .ball {
  width: 140%; height: 140%; border-radius: 50%;
  background: radial-gradient(circle, #fff7c2 0%, #ffc23a 28%, #ff6a1a 52%, rgba(200, 40, 10, .6) 66%, rgba(0, 0, 0, 0) 72%);
  animation: ball .75s ease-out var(--d, 0ms) both;
}
.fx .smoke { width: 150%; height: 150%; border-radius: 50%; background: radial-gradient(circle, rgba(50, 48, 44, .8), rgba(40, 40, 38, 0) 68%); animation: smoke 1.4s ease-out calc(var(--d, 0ms) + 200ms) both; }
.fx.boom i { width: 5px; height: 5px; border-radius: 1px; background: #ffb43a; box-shadow: 0 0 6px #ff6a1a; animation: debris .8s ease-out var(--d, 0ms) both; }
.fx.boom.big .ball { width: 200%; height: 200%; }
/* Rocket streaking in from above */
.fx .missile {
  width: calc(var(--cell) * .28); height: calc(var(--cell) * 2.4); border-radius: 50% 50% 20% 20%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 220, 140, .7) 50%, #fff 88%, #ffb43a);
  filter: drop-shadow(0 0 6px #ffb43a); animation: missile .38s ease-in var(--d, 0ms) both;
}
/* Torpedo wake along a row */
.fx.wake {
  align-self: center; height: 30%; z-index: 4;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(230, 250, 255, .85) 85%, #fff);
  border-radius: 999px; transform-origin: left center; animation: wake var(--t, .8s) linear both;
}
/* Sonar sweep over a 3×3 area */
.fx.sonar-fx { border-radius: 50%; }
.fx.sonar-fx > b { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--phosphor); box-shadow: 0 0 12px var(--phosphor); animation: ring 1.2s ease-out var(--d, 0ms) both; }
@keyframes ring { from { opacity: .9; transform: translate(-50%, -50%) scale(.15); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } }
@keyframes plume {
  0% { opacity: .95; transform: translate(-50%, -100%) scaleY(.1); }
  45% { opacity: .9; transform: translate(-50%, -100%) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -100%) scaleY(.3); }
}
@keyframes drop {
  from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--cell) * -.85 * var(--r))) scale(.4); }
}
@keyframes flash { from { opacity: 1; transform: translate(-50%, -50%) scale(.2); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
@keyframes ball { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.15); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
@keyframes smoke { from { opacity: .85; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -95%) scale(1.7); } }
@keyframes debris {
  from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--cell) * -1.3 * var(--r))) rotate(200deg); }
}
@keyframes missile {
  from { opacity: 1; transform: translate(-50%, -100%) translateY(calc(var(--cell) * -5)); }
  90% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -100%) translateY(calc(var(--cell) * .4)); }
}
@keyframes wake { from { opacity: 1; transform: scaleX(0); } 85% { opacity: 1; } to { opacity: 0; transform: scaleX(1); } }
.board.shake { animation: shake .45s ease; }
@keyframes shake {
  20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 1px); }
}

/* Placing */
.status-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.status-bar h2 { margin: 0; }
.placing { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.dock { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
.dock p { margin: 0; }
.dock-ships { display: flex; flex-wrap: wrap; gap: 8px; }
.dock-ship {
  display: flex; align-items: center; padding: 6px 8px; border-radius: 3px; cursor: pointer;
  border: 2px solid var(--steel-dark); background: linear-gradient(160deg, #24606d, #133a45);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.dock-ship svg { height: 22px; }
.dock-ship.selected { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(212, 173, 85, .45), inset 0 2px 6px rgba(0, 0, 0, .5); }
.dock-ship.placed { opacity: .25; cursor: default; }
.timer-pill { font-family: var(--mono); font-weight: 700; color: var(--text); }
.timer-pill.urgent { color: var(--bad); border-color: var(--bad); animation: pulse-text 1s infinite; }
@keyframes pulse-text { 50% { opacity: .55; } }
.placing-board, .dock-ships { touch-action: none; }
.placing-board.locked { touch-action: auto; }
.dock-ship { touch-action: none; -webkit-user-select: none; user-select: none; }
.dock-ship:not(.placed):not(:disabled) { cursor: grab; }
body.dragging { overflow: hidden; overscroll-behavior: none; cursor: grabbing; }
body.dragging * { cursor: grabbing !important; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; will-change: transform; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); opacity: .95; }
.drag-ghost svg { display: block; width: 100%; height: 100%; }
.drag-ghost.bad { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)) sepia(1) hue-rotate(-40deg) saturate(4); }

/* Game */
.versus { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.vs-player {
  flex: 1; max-width: 300px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; min-width: 0;
  border-radius: 3px; background: linear-gradient(180deg, #e7c776, var(--brass) 50%, var(--brass-2)); color: var(--brass-ink);
  border: 1px solid #5c4513; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 8px rgba(0, 0, 0, .5);
}
.vs-player.opp { flex-direction: row-reverse; text-align: right; }
.vs-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.vs-rating { font: 700 .85rem var(--mono); }
.vs-badge { font: .85rem var(--stencil); letter-spacing: .1em; color: var(--muted); }
.vs-badge.ranked { color: #fff; background: var(--stamp); padding: 3px 8px; border-radius: 2px; transform: rotate(-4deg); }
.turn-banner {
  position: relative; overflow: hidden; text-align: center; font: clamp(1.2rem, 4vw, 1.7rem) var(--stencil); letter-spacing: .06em;
  padding: 10px 16px; margin-bottom: 18px; border-radius: 4px; color: var(--phosphor);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px), var(--crt);
  border: 3px solid #1a1d14; box-shadow: 0 0 0 2px var(--brass-2), inset 0 0 20px rgba(0, 0, 0, .8);
  text-shadow: 0 0 10px rgba(125, 255, 138, .6);
}
.turn-banner.mine { color: #fff3c4; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .15) 0 1px, transparent 1px 3px), radial-gradient(circle, #3a5b1b, #142a0b); text-shadow: 0 0 12px #ffd76a; animation: lamp 1.6s ease-in-out infinite; }
@keyframes lamp { 50% { box-shadow: 0 0 0 2px var(--brass), inset 0 0 26px rgba(255, 215, 106, .25), 0 0 18px rgba(255, 215, 106, .25); } }
.turn-banner.won { color: #fff; background: radial-gradient(circle, #2f7a3a, #133d19); }
.turn-banner.lost { color: #fff; background: radial-gradient(circle, #8a2a1c, #3b0f09); text-shadow: none; }
.turn-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, .35); }
.turn-timer span { display: block; height: 100%; background: currentColor; opacity: .75; transition: width .25s linear; }
.turn-timer.urgent span { background: var(--bad); opacity: 1; }
.boards { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; }
.board-col h3 { text-align: center; color: var(--muted); font-size: 1rem; letter-spacing: .1em; }
.board-col { transition: opacity .2s; }
.boards.my-turn .board-col:first-child, .boards.their-turn .board-col:last-child { opacity: .62; }
.fleet-left { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mini-fleet { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 440px; }
.mini-ship svg { height: 14px; display: block; }
.mini-ship.dead { filter: grayscale(1) brightness(.45); opacity: .5; }
.game-footer { display: flex; justify-content: center; margin-top: 14px; }

/* Ability panel: armed switches */
.abilities { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.ability {
  appearance: none; cursor: pointer; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 7px 12px 7px 8px; border-radius: 4px; color: var(--text); font: .85rem var(--type); min-width: 140px;
  border: 2px solid var(--steel-dark); background: var(--noise), linear-gradient(180deg, #4b5536, #2f3623);
  box-shadow: inset 0 1px 0 var(--steel-hi), 0 3px 0 #13170e;
}
.ability .ab-icon {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #5b1d14, #2a0b07); border: 2px solid #120604; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
}
.ability.ready .ab-icon { background: radial-gradient(circle at 35% 30%, #ff8a5c, #c8301a 60%, #5b1009); box-shadow: 0 0 10px rgba(255, 90, 50, .6), inset 0 -2px 3px rgba(0, 0, 0, .4); }
.ability strong { display: block; font: .9rem var(--stencil); letter-spacing: .04em; }
.ability small { color: var(--muted); }
.ability:disabled { cursor: not-allowed; opacity: .55; }
.ability.armed { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 0 16px rgba(212, 173, 85, .5); animation: lamp 1s ease-in-out infinite; }
.ability.used { opacity: .3; }
/* Never wider than the board and always two lines tall, so arming an ability doesn't shift the layout. */
.aim-hint { width: 0; min-width: 100%; text-align: center; color: var(--brass); margin-top: 8px; font-size: .9rem; line-height: 1.3; min-height: 2.6em; text-wrap: balance; }
.abilities[hidden] + .aim-hint { display: none; }

/* End of game */
.end-panel { max-width: 460px; margin: 24px auto 0; text-align: center; }
.elo-change { font-size: 1.4rem; margin: 4px 0 14px; font-family: var(--mono); }
.elo-change strong { font-size: 2.1rem; }
.elo-change.up strong { color: var(--good); text-shadow: 0 0 10px rgba(125, 255, 138, .5); }
.elo-change.down strong { color: var(--bad); }
.end-actions { display: flex; flex-direction: column; gap: 8px; }

/* Profile dialog */
.dialog { width: min(440px, calc(100vw - 32px)); color: var(--text); padding: 22px; }
.dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px); }
.dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { margin: 0; color: var(--brass); overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stats div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 3px; background: var(--crt); border: 2px solid var(--steel-dark); }
.stats strong { font: 700 1.2rem var(--mono); color: var(--phosphor); text-shadow: 0 0 6px rgba(125, 255, 138, .5); }
.stats span { font-size: .75rem; color: var(--muted); }

/* Toast: telegram strip */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px) rotate(-1deg); opacity: 0; pointer-events: none; z-index: 150;
  background: var(--noise), linear-gradient(180deg, #f1e7c9, #ddd0aa); color: var(--ink); font: 1rem var(--type);
  padding: 10px 20px; border-radius: 1px; max-width: calc(100vw - 32px); box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
.toast.error { color: var(--stamp); border-left: 6px solid var(--stamp); }

@media (min-width: 900px) {
  .boards .board { --cell: min(38px, calc((min(100vw, 1080px) - 170px) / 2 / var(--cols) - 2px)); }
  .placing-board { --cell: min(38px, calc((min(100vw, 1080px) - 460px) / var(--cols) - 2px)); }
}
@media (max-width: 720px) {
  .boards { gap: 22px; }
  .board-col:last-child { order: -1; } /* enemy waters first on phones */
  .aim-hint { min-height: 3.9em; }
  .placing { justify-content: center; }
  .board-wrap { width: 100%; display: flex; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.version { padding: 12px 16px 16px; text-align: center; font-size: .75rem; color: var(--muted); }

/* ---------- Team battles ---------- */
:root { --team-0: #7fb6ff; --team-1: #ff8a66; }
.team-card { grid-column: 1 / -1; box-shadow: inset 0 0 0 2px rgba(127, 182, 255, .25), inset 0 1px 0 var(--steel-hi), var(--shadow); }
.lobby-card { max-width: 820px; margin: 12px auto; display: flex; flex-direction: column; gap: 16px; }
.lobby-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.lobby-head h2 { color: var(--brass); }
.lobby-code { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lobby-code .big-code { font-size: 1.9rem; padding: 6px 14px; }
.rule-chips.left { justify-content: flex-start; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.team-vs { align-self: center; font: 1.4rem var(--stencil); color: var(--muted); }
.team-col { padding: 14px; border-radius: 3px; background: rgba(0, 0, 0, .25); border: 2px solid var(--steel-dark); border-top: 4px solid var(--team-color); }
.team-col.team-0 { --team-color: var(--team-0); }
.team-col.team-1 { --team-color: var(--team-1); }
.team-col.mine { box-shadow: 0 0 0 2px var(--team-color), 0 0 16px color-mix(in srgb, var(--team-color) 30%, transparent); }
.team-col h3 { color: var(--team-color); margin-bottom: 10px; }
.team-col ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.team-col li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 3px; background: rgba(255, 255, 255, .05); }
.team-col li.you { background: rgba(212, 173, 85, .2); }
.team-col li.empty { justify-content: center; color: var(--muted); font-style: italic; background: none; border: 1px dashed rgba(236, 229, 204, .2); }
.crew-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-name em { color: var(--muted); font-style: normal; }
.crew-tags b { font: 700 .8rem var(--mono); color: var(--phosphor); }
.lobby-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .teams { grid-template-columns: 1fr; }
  .team-vs { text-align: center; }
}
.turn-order { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: -8px 0 14px; font-size: .85rem; }
.turn-order span { padding: 2px 9px; border-radius: 3px; border: 1px solid; opacity: .6; }
.turn-order span.team-0 { color: var(--team-0); }
.turn-order span.team-1 { color: var(--team-1); }
.turn-order span.now { opacity: 1; background: rgba(255, 255, 255, .08); box-shadow: 0 0 10px currentColor; }
.turn-order span.away { text-decoration: line-through; }
.turn-order i { color: var(--muted); font-style: normal; }
/* Teammates' ships while placing: yours to fit around, not to move */
.sprite.mate { opacity: .75; filter: sepia(.6) hue-rotate(170deg) saturate(1.6) drop-shadow(0 0 3px var(--team-0)); }

/* ---------- Field radio: chat and voice ---------- */
.comms { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.comms-toggle {
  position: relative; order: 2; width: 58px; height: 58px; border-radius: 50%; cursor: pointer; font-size: 1.6rem;
  border: 3px solid #1a1d14; background: radial-gradient(circle at 35% 30%, #6d7a4c, var(--steel-2));
  box-shadow: 0 0 0 2px var(--brass-2), 0 8px 18px rgba(0, 0, 0, .6);
}
.comms.open .comms-toggle { box-shadow: 0 0 0 2px var(--brass), 0 0 18px rgba(212, 173, 85, .5); }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--stamp); color: #fff; font: 700 .75rem/22px var(--mono); box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.comms-panel {
  width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 6px; border: 2px solid var(--steel-dark);
  background: var(--noise), linear-gradient(180deg, var(--steel), var(--steel-2));
  box-shadow: inset 0 1px 0 var(--steel-hi), 0 14px 30px rgba(0, 0, 0, .65);
}
.comms-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--stencil); letter-spacing: .05em; }
.icon-btn.small { width: 30px; height: 30px; font-size: .85rem; }
.voice-box { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 4px; background: rgba(0, 0, 0, .25); border: 1px solid var(--steel-dark); }
.voice-box .row { justify-content: flex-start; flex-wrap: wrap; }
.voice-list { display: flex; flex-wrap: wrap; gap: 6px; }
.vchip { font-size: .82rem; padding: 2px 9px; border-radius: 12px; color: var(--muted); border: 1px solid rgba(236, 229, 204, .2); transition: box-shadow .1s, color .1s; }
.vchip.on { color: var(--text); border-color: var(--phosphor-dim); }
.vchip.speaking { color: var(--crt); background: var(--phosphor); box-shadow: 0 0 12px var(--phosphor); }
/* Teletype log on paper tape */
.chat-log {
  list-style: none; margin: 0; padding: 10px; flex: 1; min-height: 140px; overflow-y: auto; border-radius: 2px;
  background: var(--noise), linear-gradient(180deg, #efe5c6, #ddd0a8); color: var(--ink); font: .92rem/1.35 var(--type);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}
.chat-log li { padding: 3px 0; border-bottom: 1px dashed rgba(42, 35, 24, .15); overflow-wrap: anywhere; }
.chat-log li.empty { color: #6b5f45; text-align: center; border: 0; padding-top: 30px; }
.chat-log .who { font-weight: 700; }
.chat-log li.team .who { color: #1d4f8a; }
.chat-log li.foe .who { color: var(--stamp); }
.chat-log li.mine .who { color: #3d5a1c; }
.chat-form { display: flex; flex-direction: column; gap: 8px; }
.chat-channel button { padding: 6px; }
@media (max-width: 560px) {
  .comms { right: 12px; bottom: 12px; }
  .comms-panel { width: calc(100vw - 24px); max-height: calc(100vh - 100px); }
}
.mate-note { display: block; margin-top: 6px; color: var(--team-0); }