/* Námořní bitva: námořní mapa. Sloupce (→) mají oranžovou, řádky (↓) tyrkysovou, stejně na mapě, v rozkazu i na číselníku.
   Jako ostatní hry jeden svět bez tmavé varianty. */
:root {
  --sea: #d9ebf2; --paper: #f3f9fb; --grid: #a6c9d7; --ink: #0f2c44; --muted: #4b6a7f;
  --col: #cf5a22; --row: #127f76; --hit: #c3352a; --ship: #2c4e6a; --on-ship: #ffffff; --splash: #6fa6be;
  --font: "Nunito", ui-rounded, system-ui, sans-serif; --display: "Baloo 2", "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--sea); color: var(--ink); font: 500 17px/1.5 var(--font);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
input { user-select: text; -webkit-user-select: text; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 800; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(28px, 6vw, 40px); }
h2 { font-size: 1.5rem; }
h2.big { font-size: clamp(2rem, 7vw, 3rem); }
p { max-width: 60ch; }
.muted { color: var(--muted); }
.lede { font-size: 1.1rem; }

.top, .wrap { max-width: 64rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top { display: flex; align-items: center; gap: 14px; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
.home { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; font-size: 26px;
  text-decoration: none; background: var(--paper); box-shadow: 0 3px 0 var(--grid); }
/* Zvuk vpravo v hlavičce; vypnutý je bledý a bez vlnek */
.zvuk { display: grid; place-items: center; width: 52px; height: 52px; flex: none; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--grid); }
.zvuk svg { width: 26px; height: 26px; }
.zvuk[aria-pressed="false"] { color: var(--muted); opacity: .6; }
.zvuk[aria-pressed="false"] .waves { display: none; }
.wrap { display: grid; gap: 1.25rem; padding-block: 1rem max(2.5rem, env(safe-area-inset-bottom, 0px)); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.play { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) { .play { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.stack { display: grid; gap: .9rem; min-width: 0; }

/* Tlačítka */
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--col); outline-offset: 2px; }
.btn { font-weight: 800; font-size: 1.05rem; padding: .65rem 1.2rem; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.btn.main { background: var(--ink); color: var(--sea); }
.btn:disabled { opacity: .35; cursor: default; }
.seg button { font-weight: 700; padding: .45rem .9rem; border-radius: 999px; border: 2px solid var(--grid); background: var(--paper); }
.seg button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--sea); }
label { display: grid; gap: .25rem; font-weight: 700; }
/* 16 px a víc, jinak iPhone při psaní stránku přiblíží */
input { font: inherit; font-size: 17px; padding: .5rem .7rem; border-radius: 10px; border: 2px solid var(--grid);
  background: var(--paper); color: var(--ink); width: 12rem; max-width: 100%; }

/* Mapa: první řádek čísla sloupců (→), první sloupec čísla řádků (↓) */
.board { display: grid; grid-template-columns: 1.6rem repeat(var(--n), minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 28rem; }
.board.small { max-width: 13rem; gap: 2px; font-size: .7rem; }
.hd { display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.1em; }
.hd.c { color: var(--col); } .hd.r { color: var(--row); }
.cell { aspect-ratio: 1; position: relative; display: grid; place-items: center; padding: 0;
  background: var(--paper); border: 1px solid var(--grid); border-radius: 6px; font-size: 1.3em; font-weight: 800; }
button.cell:hover { border-color: var(--ink); }
.hl-c { background: color-mix(in srgb, var(--col) 22%, var(--paper)); }
.hl-r { background: color-mix(in srgb, var(--row) 22%, var(--paper)); }
.hl-c.hl-r { outline: 3px solid var(--ink); outline-offset: -3px; z-index: 1; }
.hl-c.hl-r::before { content: "⌖"; color: var(--ink); }
.cell.ship { background: var(--ship); border-color: var(--ship); color: var(--on-ship); }
.cell.pick { outline: 3px solid var(--col); outline-offset: -3px; }
/* značky střel jen na políčkách (třídy hit/miss/sunk má i hláška o výsledku) */
.cell.miss::after { content: ""; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--splash); }
.cell.hit::after { content: "✕"; color: var(--hit); }
.cell.ship.hit::after, .cell.sunk::after { color: var(--on-ship); }
.cell.sunk { background: var(--hit); border-color: var(--hit); }
.last { animation: boom .7s ease-out; z-index: 2; }
@keyframes boom { 0% { transform: scale(1.5); box-shadow: 0 0 0 6px var(--col); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .last { animation: none; } }

/* Rozkaz: náhodné číslo ± hráčovo číslo = cíl */
.tag { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eq { font-family: var(--display); font-weight: 800; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.eq.inline { font-size: 1em; }
.eq.c { color: var(--col); } .eq.r { color: var(--row); }
.eq.big { font-size: 2rem; white-space: nowrap; }
.eq b { font-weight: 800; display: inline-block; min-width: 1.3em; text-align: center; border-bottom: 3px solid currentColor; }
.pad { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: .5rem; }
.pad button { font-family: var(--display); font-weight: 800; font-size: 1.6rem; padding: .3rem 0; border-radius: 12px;
  border: 2px solid currentColor; background: var(--paper); }
.pad.c { color: var(--col); } .pad.r { color: var(--row); }
.pad.signs { grid-template-columns: repeat(2, minmax(0, 6rem)); }
.pad button[aria-pressed="true"] { background: currentColor; }
.pad button[aria-pressed="true"] span { color: var(--paper); }
.panel { background: var(--paper); border: 1px solid var(--grid); border-radius: 14px; padding: 1rem; display: grid; gap: .8rem; min-width: 0; }
.verdict { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.15; }
.verdict.hit, .verdict.sunk { color: var(--hit); }
.ok { color: var(--row); font-weight: 800; } .bad { color: var(--hit); font-weight: 800; }
.log { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.log li { display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: baseline; padding-bottom: .5rem; border-bottom: 1px solid var(--grid); }

/* Rozmisťování: loďky k položení */
.fleet { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { display: flex; gap: 3px; padding: .45rem; border-radius: 10px; border: 2px solid var(--grid); background: var(--paper); }
.chip i { width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--ship); }
.chip[aria-pressed="true"] { border-color: var(--col); }
.chip.done { opacity: .35; }

.curtain { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.stats dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; font-variant-numeric: tabular-nums; }
.stats dd { margin: 0; font-weight: 800; text-align: right; }