/* Night sea, signal-flag yellow for actions, flame for hits. Russo One carries the game voice (titles, numbers,
   the turn), Rubik everything else. Phone first: one column, thumb-sized controls, the sea as wide as the screen. */
:root {
  --abyss: #0d2540;
  --deep: #123459;
  --panel: #163d66;
  --line: rgba(234, 243, 250, 0.12);
  --foam: #eaf3fa;
  --mist: #9fb3c8;
  --signal: #ffb31f;
  --signal-edge: #b97800;
  --signal-ink: #2a1a00;
  --hullc: #1d4b78;
  --hull-edge: #0a2238;
  --flame: #ff5a2b;
  --blue: #2f9bff;
  --red: #ff5a4e;
  --display: 'Russo One', 'Rubik', system-ui, sans-serif;
  --text: 'Rubik', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% -10%, #1b4f80 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(234, 243, 250, 0.035) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(234, 243, 250, 0.035) 39px 40px),
    var(--abyss);
  color: var(--foam);
  font: 400 16px/1.45 var(--text);
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
[hidden] { display: none !important; }

.screen {
  width: 100%;
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.screen--center { align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.center { text-align: center; }
.hint { margin: 0; color: var(--mist); font-size: 14px; }
.empty { margin: 0; padding: 18px 4px; color: var(--mist); }
.dock { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 6px; }

/* ── icons & buttons ───────────────────────────────────────────── */

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.15s;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--signal { background: var(--signal); color: var(--signal-ink); box-shadow: 0 4px 0 var(--signal-edge); }
.btn--hull { background: var(--hullc); color: var(--foam); box-shadow: 0 4px 0 var(--hull-edge); }
.btn--danger { background: var(--flame); color: #2b0b00; box-shadow: 0 4px 0 #a12f0f; }
.btn--signal:active:not(:disabled), .btn--hull:active:not(:disabled), .btn--danger:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--hull-edge); }
.btn--ghost { background: transparent; color: var(--foam); box-shadow: inset 0 0 0 2px var(--line); }
.btn--text { background: none; color: var(--mist); min-height: 44px; font-weight: 500; }
.btn--quiet { align-self: center; font-size: 14px; }
.btn--small { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn--big { min-height: 58px; font-size: 18px; font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; }
.btn--hero {
  justify-content: flex-start;
  gap: 14px;
  min-height: 76px;
  padding: 12px 18px;
  text-align: left;
}
.btn--hero .icon { width: 30px; height: 30px; }
.btn--hero span { display: flex; flex-direction: column; }
.btn--hero b { font: 400 21px/1.15 var(--display); }
.btn--hero small { font-size: 14px; font-weight: 500; opacity: 0.75; }
.btn--fire { font-size: 22px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(234, 243, 250, 0.08);
  color: var(--foam);
  cursor: pointer;
}
.icon-btn[aria-pressed='true'] { background: var(--signal); color: var(--signal-ink); }
.icon-btn--small { width: 34px; height: 34px; background: transparent; color: var(--mist); }

.field {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: rgba(7, 24, 43, 0.6);
  font-size: 17px;
}
.field::placeholder { color: var(--mist); opacity: 0.8; }
.field:focus { border-color: var(--signal); outline: none; }
.field--code { font: 400 22px var(--display); letter-spacing: 0.2em; text-align: center; }
.field--code::placeholder { font: 500 17px var(--text); letter-spacing: 0; }
.join { display: flex; gap: 10px; }
.join .field { flex: 1; min-width: 0; }
.lang { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--deep); }

/* ── brand ─────────────────────────────────────────────────────── */

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 26px; line-height: 1; }
.brand__mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--signal); color: var(--signal-ink); }
.brand__mark .icon { width: 24px; height: 24px; stroke-width: 2.4; }
.brand--big { flex-direction: column; gap: 14px; font-size: clamp(46px, 15vw, 76px); text-align: center; text-shadow: 0 5px 0 #06172a; }
.brand--big .brand__mark { width: 64px; height: 64px; border-radius: 18px; }
.brand--big .brand__mark .icon { width: 40px; height: 40px; }

/* ── welcome ───────────────────────────────────────────────────── */

.welcome { justify-content: center; text-align: center; gap: 22px; position: relative; overflow: hidden; }
.welcome__tag { margin: -8px 0 0; color: var(--mist); font-size: 17px; }
.welcome__form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.welcome__foot { display: flex; justify-content: center; align-items: center; gap: 8px; }
.welcome__sea {
  position: absolute;
  inset: auto -20% 0;
  height: 26dvh;
  z-index: -1;
  background:
    radial-gradient(60% 40% at 50% 0, rgba(255, 179, 31, 0.12), transparent 70%),
    repeating-radial-gradient(circle at 50% -40%, transparent 0 18px, rgba(234, 243, 250, 0.06) 18px 20px);
  mask: linear-gradient(transparent, #000 40%);
  animation: swell 9s ease-in-out infinite alternate;
}
@keyframes swell { to { transform: translateY(-14px) scaleX(1.04); } }

/* ── lobby ─────────────────────────────────────────────────────── */

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top__actions { display: flex; gap: 8px; }
.me { display: flex; flex-direction: column; min-width: 0; }
.me__name { font: 400 19px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me__stats { display: flex; gap: 14px; margin-top: 4px; }
.stat { display: flex; flex-direction: column; line-height: 1.1; }
.stat b { color: var(--foam); font: 400 18px var(--display); }
.stat small { color: var(--mist); font-size: 12px; }
.lobby > .brand { display: none; }
.actions { display: flex; flex-direction: column; gap: 12px; }
.section { display: flex; flex-direction: column; gap: 8px; }
.section__title { margin: 8px 0 0; font: 400 18px var(--display); }
.rooms { display: flex; flex-direction: column; gap: 8px; }
.room-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'host go' 'flags go' 'meta go';
  gap: 2px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--deep);
  text-align: left;
  cursor: pointer;
}
.room-row__host { grid-area: host; font-weight: 600; }
.room-row__flags { grid-area: flags; display: flex; gap: 4px; flex-wrap: wrap; padding: 3px 0; }
.room-row__meta { grid-area: meta; color: var(--mist); font-size: 13px; }
.room-row__go { grid-area: go; padding: 10px 14px; border-radius: 10px; background: var(--signal); color: var(--signal-ink); font-weight: 600; }

.flag {
  display: inline-block;
  width: 16px;
  height: 13px;
  flex: none;
  background: var(--c, var(--mist));
  clip-path: polygon(0 0, 100% 18%, 72% 50%, 100% 82%, 0 100%);
}
.flag--ready { box-shadow: none; filter: drop-shadow(0 0 3px var(--c)); }
.ready-row__flags .flag:not(.flag--ready) { opacity: 0.3; }

/* ── waiting room ──────────────────────────────────────────────── */

.room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-head__code { display: flex; flex-direction: column; gap: 2px; }
.room-head__code b { font: 400 44px/1 var(--display); letter-spacing: 0.12em; }
.badge { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: rgba(234, 243, 250, 0.1); color: var(--mist); font-size: 12px; font-weight: 600; }
.badge--lock { background: rgba(255, 179, 31, 0.15); color: var(--signal); }

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 14px; background: rgba(7, 24, 43, 0.55); }
.mode {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mist);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.mode:disabled { opacity: 0.35; cursor: default; }
.mode--on { background: var(--signal); color: var(--signal-ink); opacity: 1 !important; }

.people { display: flex; flex-direction: column; gap: 6px; }
.people--many { display: grid; grid-template-columns: 1fr 1fr; }
.people--many .person { min-height: 42px; padding-left: 10px; font-size: 15px; }
.person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  background: var(--deep);
  box-shadow: inset 4px 0 0 var(--c);
}
.person__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.person__name small { color: var(--mist); font-weight: 400; }
.person__host { color: var(--signal); display: inline-flex; }
.person__host .icon { width: 18px; height: 18px; }

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; border-radius: 14px; background: rgba(7, 24, 43, 0.5); }
.side h3 { margin: 0 4px 2px; font: 400 18px var(--display); }
.side--blue h3 { color: var(--blue); }
.side--red h3 { color: var(--red); }
.side .person { min-height: 42px; padding-left: 10px; font-size: 15px; }
.seat {
  min-height: 42px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--mist);
  font-weight: 600;
  cursor: pointer;
}
.side--blue .seat:not(:disabled) { border-color: rgba(47, 155, 255, 0.55); color: var(--blue); }
.side--red .seat:not(:disabled) { border-color: rgba(255, 90, 78, 0.55); color: var(--red); }
.seat:disabled { opacity: 0.4; cursor: default; }
.bench { display: flex; flex-direction: column; gap: 6px; opacity: 0.85; }

/* ── clock ─────────────────────────────────────────────────────── */

.clock { display: flex; align-items: center; gap: 10px; }
.clock__track { flex: 1; height: 10px; border-radius: 6px; background: rgba(7, 24, 43, 0.7); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.clock__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--signal), #ffd36b); transform-origin: left; }
.clock__secs { min-width: 2.6ch; font: 400 22px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.clock--low .clock__fill { background: var(--flame); }
.clock--low .clock__secs { color: var(--flame); animation: tick 1s steps(2) infinite; }
@keyframes tick { 50% { opacity: 0.45; } }

/* ── placement & battle ────────────────────────────────────────── */

.title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.title-row--tight { min-height: 0; margin-bottom: -8px; }
.title { margin: 0; font: 400 24px/1.1 var(--display); }
.ready-row { display: flex; align-items: center; gap: 10px; color: var(--mist); font-size: 14px; }
.ready-row__flags { display: flex; gap: 4px; flex-wrap: wrap; }

.sea { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.sea--zoom { overflow: auto; max-height: 72dvh; overscroll-behavior: contain; border-radius: 10px; }
.sea--zoom .board { width: calc(var(--n, 20) * 28px); max-width: none; }
.sea--small { opacity: 0.95; }
.sea--small .board { width: 62%; align-self: center; }
.sea-label { color: var(--mist); font-size: 14px; font-weight: 600; }

.turn { min-height: 34px; font: 400 26px/1.2 var(--display); color: var(--c, var(--mist)); text-align: center; }
.turn--mine { color: var(--signal); text-shadow: 0 0 18px rgba(255, 179, 31, 0.45); animation: call 0.5s ease-out; }
@keyframes call { from { transform: scale(1.15); } }

.strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -4px -2px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  max-width: 46vw;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--deep);
  font-size: 14px;
}
.chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip__n { font: 400 15px var(--display); color: var(--mist); }
.chip--turn { box-shadow: inset 0 0 0 2px var(--signal); }
.chip--out { opacity: 0.4; }
.chip--out .chip__name { text-decoration: line-through; }
.chip--blue { background: rgba(47, 155, 255, 0.22); box-shadow: inset 0 -3px 0 var(--blue); }
.chip--red { background: rgba(255, 90, 78, 0.22); box-shadow: inset 0 -3px 0 var(--red); }
.chip--turn.chip--blue, .chip--turn.chip--red { box-shadow: inset 0 0 0 2px var(--signal); }

/* ── the sea (SVG) ─────────────────────────────────────────────── */

.board { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(3, 12, 24, 0.45); touch-action: manipulation; user-select: none; }
.board__water-hi { stop-color: #2b70a8; }
.board__water-lo { stop-color: #123f6a; }
.board__grid { fill: none; stroke: rgba(234, 243, 250, 0.13); stroke-width: 0.45; }
.board--dense .board__grid { stroke-width: 0.6; stroke: rgba(234, 243, 250, 0.1); }
.board__frame { fill: none; stroke: rgba(234, 243, 250, 0.18); stroke-width: 0.8; pointer-events: none; }
.board--active { box-shadow: 0 0 0 3px var(--signal), 0 10px 30px rgba(3, 12, 24, 0.45); cursor: crosshair; }

.ship { cursor: pointer; }
.ship__hull { fill: #c3cfdb; stroke: #455a71; stroke-width: 0.5; }
.ship__bridge { fill: #7f92a7; }
.ship__gun { fill: #4f6279; }
.ship__flag { fill: var(--owner, var(--signal)); }
.ship--mate { opacity: 0.55; cursor: default; }
.ship--enemy .ship__hull { fill: #d7c3b2; stroke: #6d5442; }
.ship--selected .ship__hull { stroke: var(--signal); stroke-width: 1.3; filter: drop-shadow(0 0 2px rgba(255, 179, 31, 0.8)); }
.ship--bad .ship__hull { fill: var(--red); }
.ship--sunk { opacity: 1; cursor: default; }
.ship--sunk .ship__hull { fill: #3b2a24; stroke: #170f0c; }
.ship__crack { stroke: #ff7a3d; stroke-width: 0.6; opacity: 0.85; fill: none; }

.shot-cleared { fill: rgba(234, 243, 250, 0.32); }
.shot-miss__ring { fill: none; stroke: rgba(234, 243, 250, 0.4); stroke-width: 0.6; }
.shot-miss__hole { fill: #06182b; }
.shot-hit__glow { fill: rgba(255, 90, 43, 0.38); }
.shot-hit__flame { fill: var(--signal); stroke: var(--flame); stroke-width: 0.7; stroke-linejoin: round; }
.shot-hit__pip { stroke: #06182b; stroke-width: 0.35; }
.shot-miss.fresh .shot-miss__ring, .shot-hit.fresh .shot-hit__glow, .blast circle, .aim circle { transform-box: fill-box; transform-origin: center; }
.shot-miss.fresh .shot-miss__ring { animation: splash 0.7s ease-out; }
.shot-hit.fresh .shot-hit__glow { animation: burn 0.6s ease-out; }
.shot-hit.fresh .shot-hit__flame { animation: flare 0.4s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes splash { from { transform: scale(0.2); stroke-width: 2; } }
@keyframes burn { from { transform: scale(2.4); fill: rgba(255, 179, 31, 0.8); } }
@keyframes flare { from { transform: scale(0.2); } }
.blast { pointer-events: none; }
.blast__ring { fill: none; stroke: var(--signal); stroke-width: 1.4; animation: ring 0.9s ease-out forwards; }
.blast__core { fill: var(--flame); animation: core 0.7s ease-out forwards; }
@keyframes ring { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes core { from { transform: scale(0.4); opacity: 0.95; } to { transform: scale(1.4); opacity: 0; } }
.aim { pointer-events: none; fill: none; stroke: var(--signal); stroke-width: 0.9; stroke-linecap: round; }
.aim circle { animation: lock 1s ease-in-out infinite; }
@keyframes lock { 50% { transform: scale(0.82); } }

/* ── result ────────────────────────────────────────────────────── */

.verdict { padding: 18px 0 6px; text-align: center; }
.verdict h1 { margin: 0; font: 400 clamp(40px, 13vw, 64px)/1.05 var(--display); text-shadow: 0 5px 0 #06172a; }
.verdict p { margin: 6px 0 0; color: var(--mist); }
.verdict--win h1 { color: var(--signal); }
.verdict--loss h1 { color: var(--flame); }
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ranking li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--deep); box-shadow: inset 4px 0 0 var(--c); }
.ranking li b { display: inline-flex; align-items: center; gap: 6px; font: 400 18px var(--display); color: var(--mist); white-space: nowrap; }
.ranking__left .icon { width: 20px; height: 20px; }
.ranking--won { background: rgba(255, 179, 31, 0.14) !important; }
.ranking--won b { color: var(--signal) !important; }
.ranking__name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking__name small { color: var(--mist); font-weight: 400; }
.tag { padding: 2px 8px; border-radius: 6px; background: rgba(255, 90, 43, 0.2); color: #ffb39b; font-size: 12px; }
.over .sea--small .board { width: 100%; }

/* ── sheet, toast, offline ─────────────────────────────────────── */

.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 12, 24, 0.6); animation: fade 0.15s; }
.sheet__panel {
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  overflow: auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #113258;
  box-shadow: 0 -10px 40px rgba(3, 12, 24, 0.5);
  animation: rise 0.2s ease-out;
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet__head h2 { margin: 0; font: 400 22px var(--display); }
.sheet__body { display: flex; flex-direction: column; gap: 12px; }
.sheet__sub { margin: 10px 0 0; font: 400 17px var(--display); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rules p { margin: 0 0 10px; line-height: 1.55; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); } }

.toasts { position: fixed; z-index: 30; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 12px; background: #f2f6fa; color: #0d2540; font-weight: 600; box-shadow: 0 8px 24px rgba(3, 12, 24, 0.4); animation: drop 0.2s ease-out; transition: opacity 0.3s, transform 0.3s; }
.toast--bad { background: var(--flame); color: #2b0b00; }
.toast--out { opacity: 0; transform: translateY(-8px); }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }
.offline { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--flame); color: #2b0b00; font-weight: 600; text-align: center; }

.spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--signal); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 720px) {
  .lobby > .brand { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}