/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --bg:          #050f1e;
  --surface:     #0a1626;
  --surface2:    #10203a;
  --border:      #1e3050;
  --accent:      #38bdf8;              /* cyan-blå for kompass/navigasjon */
  --accent-dim:  rgba(56,189,248,.18);
  --text:        #e8eaf0;
  --muted:       #6b7a99;

  --me:          #fbbf24;              /* gyllen for treff */
  --me-dim:      rgba(251,191,36,.15);
  --opp:         #f87171;              /* rødt for eksplosjoner */

  --water:       #0e3a5c;              /* dyphavsblå */
  --water-lite:  #1a4e78;              /* lysere havflate */
  --ship:        #64748b;              /* stål-grå skip */
  --ship-hit:    #dc2626;              /* skip som er truffet */
  --ship-sunk:   #475569;              /* senket skip: mørk grå */
  --miss:        #94a3b8;              /* bom-markør */

  --cell:        min(34px, calc((100vw - 80px) / 10 - 2px));
  --cell-gap:    2px;

  --radius:      12px;
  --radius-sm:   8px;
  --font:        system-ui, -apple-system, sans-serif;
  --font-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --brand:       #a78bfa;              /* Kippi-lilla (forsidens merkevare) */
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: radial-gradient(circle at 50% -20%, #0a1e38 0%, var(--bg) 60%);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Screens ───────────────────────────────────────────────────── */
.screen {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px env(safe-area-inset-bottom, 8px);
}
.screen[hidden] { display: none; }
.screen--place { gap: 12px; }
.screen--game { gap: 10px; padding: 12px 12px env(safe-area-inset-bottom, 8px); }
.screen--result { justify-content: center; gap: 20px; overflow-y: auto; }

/* ── Knapper ───────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-small {
  font-family: inherit; cursor: pointer; border: none;
  transition: background .15s, color .15s, transform .1s;
}
.btn-primary {
  background: var(--accent); color: #001a2b;
  padding: 14px 20px; font-size: 1rem; font-weight: 800;
  border-radius: var(--radius-sm); width: 100%;
}
.btn-primary:hover { background: #0ea5e9; }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { background: var(--surface2); color: var(--muted); cursor: default; }

.btn-secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  padding: 14px 20px; font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-sm); width: 100%;
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-ghost {
  background: transparent; color: var(--muted);
  padding: 10px 16px; font-size: .9rem; font-weight: 600;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { color: var(--text); }

.btn-small {
  background: var(--surface2); color: var(--text);
  padding: 8px 14px; font-size: .82rem; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.btn-small:hover { border-color: var(--accent); }
.btn-small.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.btn-del { background: transparent; }

.btn-icon-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: 4px 8px;
}
.btn-icon-close:hover { color: var(--text); }

/* ── Info-modal ────────────────────────────────────────────────── */
.info-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 8, 20, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.info-overlay[hidden] { display: none; }
.info-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px 24px;
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 16px;
}
.info-top { display: flex; align-items: center; justify-content: space-between; }
.info-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.info-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; }
.info-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.4; }
.info-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* ── Info-trigger ──────────────────────────────────────────────── */
.btn-info-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border); background: none;
  color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-info-trigger:hover { color: var(--text); border-color: var(--accent); }
.top-bar .btn-info-trigger { margin-top: 10px; }

/* ── Merkevare-ordmerke (matcher forsidens site-header-logo) ───── */
.brand-home {
  position: absolute; top: 14px; left: 16px;
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
  transition: opacity .15s;
}
.brand-home:hover { opacity: .8; }
.brand-home__mark { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-right: 8px; }
.brand-home__suffix { color: var(--brand); }

/* ── Top bar / Logo ────────────────────────────────────────────── */
.top-bar {
  width: 100%; max-width: 420px;
  text-align: center; padding: 24px 0 16px;
}
.logo { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.logo span { color: var(--accent); }
.tagline { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* ── Card ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 20px;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 14px;
}

.divider { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.error-text { color: #f87171; font-size: .85rem; text-align: center; min-height: 1.2em; }

/* ── Form ──────────────────────────────────────────────────────── */
.field-label {
  font-size: .78rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700;
}
.text-input {
  width: 100%; padding: 12px 14px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem;
  transition: border-color .15s;
}
.text-input:focus { outline: none; border-color: var(--accent); }
.text-input--code { text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }

/* ── Lobby ─────────────────────────────────────────────────────── */
.lobby-code-block { text-align: center; padding: 8px 0; }
.lobby-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.lobby-code {
  font-size: 2.4rem; font-weight: 900; letter-spacing: .25em;
  color: var(--accent); margin: 4px 0 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.players-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--surface2); border-radius: var(--radius-sm);
}
.player-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.player-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
}
.player-badge--host  { background: rgba(56,189,248,.2); color: var(--accent); }
.player-badge--guest { background: rgba(34,197,94,.15); color: #4ade80; }
.player-name { font-size: 1rem; font-weight: 700; text-align: center; word-break: break-word; }
.player-name--waiting { color: var(--muted); font-style: italic; font-weight: 400; }
.vs-label { font-size: 1.1rem; font-weight: 900; color: var(--accent); flex-shrink: 0; }
.waiting-text { font-size: .82rem; color: var(--muted); text-align: center; padding: 4px 0; }

/* ── Invite-seksjon ────────────────────────────────────────────── */
.invite-section { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--border); }
.invite-row { display: flex; gap: 8px; }
.invite-row .text-input { flex: 1; }
.invite-status { font-size: .82rem; min-height: 1.1em; padding-top: 2px; color: var(--muted); text-align: center; }
.invite-status--pending  { color: var(--accent); }
.invite-status--accepted { color: #4ade80; }
.invite-status--error    { color: #f87171; }

/* ── Game top bar ──────────────────────────────────────────────── */
.game-top-bar {
  width: 100%; max-width: 420px;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
}
/* Merkevare-ordmerke i spillskjermens topbar — samme design som forsiden
   (K-mark + kippi.no). Logo til venstre, kontroller (?/lyd) til høyre. */
.game-brand {
  display: inline-flex; align-items: center; margin-right: auto;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
  transition: opacity .15s;
}
.game-brand:hover { opacity: .8; }
.place-badge, .mode-badge {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 10px; border-radius: 99px;
  background: var(--accent-dim); color: var(--accent);
}
.btn-sound {
  background: transparent; border: none; font-size: 1.1rem;
  padding: 2px 4px; cursor: pointer; opacity: 0.55;
  transition: opacity .15s; line-height: 1;
}
.btn-sound:hover { opacity: 0.9; }
.btn-sound--muted { opacity: 0.30; }

/* ── Turn indicator ────────────────────────────────────────────── */
.turn-indicator {
  font-size: .95rem; font-weight: 700;
  padding: 8px 20px; border-radius: 99px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.turn-indicator::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.turn-indicator--mine { background: var(--accent-dim); color: var(--accent); }
.turn-indicator--mine::before {
  box-shadow: 0 0 8px rgba(56,189,248,.7);
  animation: turn-dot-pulse 1.2s ease-in-out infinite;
}
.turn-indicator--waiting { background: var(--surface); color: var(--muted); }
@keyframes turn-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.55; }
}

/* ── Brett ─────────────────────────────────────────────────────── */
.board-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 4px;
  align-items: center; justify-items: center;
}
.board-labels {
  display: flex;
  color: var(--muted); font-size: .68rem; font-weight: 700;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.board-labels--files {
  grid-column: 2; grid-row: 1;
  flex-direction: row; gap: var(--cell-gap);
}
.board-labels--files span { width: var(--cell); text-align: center; }
.board-labels--ranks {
  grid-column: 1; grid-row: 2;
  flex-direction: column; gap: var(--cell-gap);
}
.board-labels--ranks span { height: var(--cell); display: flex; align-items: center; }

.board {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows:    repeat(10, var(--cell));
  gap: var(--cell-gap);
  background: linear-gradient(180deg, #0a2440 0%, #051a30 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.35);
}

/* Rute (vann). Default = uklikket havflate.
   Subtil animert skimmer gir levende havflate — forsinkelse settes per
   celle (--wd) i JS så det ruller diagonalt som en bølge. */
.sq {
  background: linear-gradient(160deg, var(--water) 0%, #123f63 48%, var(--water) 100%);
  background-size: 220% 220%;
  border-radius: 3px;
  position: relative;
  transition: background-color .12s, transform .1s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  animation: water-shimmer 5.5s ease-in-out infinite;
  animation-delay: calc(var(--wd, 0) * -0.5s);
}
@keyframes water-shimmer {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* Skip-ruter (mitt eget brett) */
.sq--ship {
  background: var(--ship);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.15);
}
.sq--ship-preview {
  background: rgba(56,189,248,.35);
  box-shadow: inset 0 0 0 1.5px rgba(56,189,248,.7);
}
.sq--ship-invalid {
  background: rgba(248,113,113,.3);
  box-shadow: inset 0 0 0 1.5px rgba(248,113,113,.7);
}

/* Skudd — bruker fysisk peg-metafor slik som brettspillet.
   Bom = hvit peg (som en «vannsprut»-markør), treff = rød peg (glødende),
   senket = mørk rød peg + hele ruta i utbrent rødt med gyllen ring. */
.sq--miss   { background: var(--water-lite); }
.sq--miss::after {
  content: ''; position: absolute; inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f8fafc 0%, #cbd5e1 55%, #64748b 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.45),
    inset 0 -1px 1px rgba(0,0,0,.2);
}
.sq--hit    { background: #1a4e78; }
.sq--hit::after {
  content: ''; position: absolute; inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fca5a5 0%, #dc2626 55%, #7f1d1d 100%);
  box-shadow:
    0 0 10px rgba(220,38,38,.65),
    0 1px 2px rgba(0,0,0,.5),
    inset 0 -1px 1px rgba(0,0,0,.25);
}
.sq--sunk   {
  background: #6b1010;   /* dyp utbrent rød */
  box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.55);   /* gyllen ring rundt hele ruta */
}
.sq--sunk::after {
  content: ''; position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #b91c1c 0%, #7f1d1d 55%, #3f0f0f 100%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.4);
}

/* Klikkbare skudd-ruter (motstanders brett, min tur, ikke skutt før) */
.board--shoot .sq:not(.sq--miss):not(.sq--hit):not(.sq--sunk) {
  cursor: crosshair;
}
.board--shoot .sq:not(.sq--miss):not(.sq--hit):not(.sq--sunk):hover {
  background: rgba(56,189,248,.35);
  transform: scale(1.08);
}
.board--shoot.board--waiting .sq:hover { cursor: default; background: var(--water); transform: none; }

/* Ny treff-animasjon */
.sq--just-hit { animation: hit-flash .5s ease-out; }
@keyframes hit-flash {
  0%   { background: #fff; box-shadow: 0 0 20px #fff; }
  60%  { background: #fbbf24; }
  100% { background: var(--ship-hit); }
}

/* Blink på hele skipet i det det senkes */
.sq--sink-flash { animation: sink-flash .6s ease-out; }
@keyframes sink-flash {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0), inset 0 0 0 2px rgba(251,191,36,.9); filter: brightness(1.8); }
  100% { box-shadow: 0 0 14px 3px rgba(251,191,36,.5), inset 0 0 0 1.5px rgba(251,191,36,.55); filter: brightness(1); }
}

/* ── Impact-FX-lag (overlay som overlever brett-rerender) ──────────── */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 250; overflow: hidden; }
.fx { position: absolute; transform: translate(-50%, -50%); width: var(--sz, 28px); height: var(--sz, 28px); }

/* Bom — konsentriske vann-ringer */
.fx--miss::before, .fx--miss::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid rgba(160,205,255,.85);
  transform: translate(-50%, -50%) scale(.35);
  animation: fx-ripple .7s ease-out forwards;
}
.fx--miss::after { border-color: rgba(160,205,255,.4); animation-delay: .13s; }
@keyframes fx-ripple {
  0%   { transform: translate(-50%,-50%) scale(.35); opacity: .95; }
  100% { transform: translate(-50%,-50%) scale(3);   opacity: 0; }
}

/* Treff — eksplosjonsball + røyk-puff */
.fx--hit::before, .fx--sunk::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  transform: translate(-50%,-50%) scale(.3);
  background: radial-gradient(circle, #fff 0%, #fde047 22%, #f97316 52%, #dc2626 78%, transparent 84%);
  animation: fx-boom .55s cubic-bezier(.22,.61,.36,1) forwards;
}
.fx--hit::after, .fx--sunk::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  transform: translate(-50%,-60%) scale(.4);
  background: radial-gradient(circle, rgba(120,120,130,.55) 0%, rgba(90,90,100,.25) 55%, transparent 75%);
  animation: fx-smoke .85s ease-out forwards;
}
@keyframes fx-boom {
  0%   { transform: translate(-50%,-50%) scale(.3);  opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
@keyframes fx-smoke {
  0%   { transform: translate(-50%,-60%) scale(.4);  opacity: 0; }
  30%  { opacity: .8; }
  100% { transform: translate(-50%,-160%) scale(2.6); opacity: 0; }
}
/* Senket — større og kraftigere eksplosjon */
.fx--sunk::before { animation-duration: .7s; }
.fx--sunk::before { transform: translate(-50%,-50%) scale(.4); }
.fx--sunk { width: calc(var(--sz, 28px) * 1.7); height: calc(var(--sz, 28px) * 1.7); }

/* Skjelv i brettet ved senking */
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 3px); }
  30% { transform: translate(5px, -3px); }
  45% { transform: translate(-4px, -3px); }
  60% { transform: translate(4px, 2px); }
  75% { transform: translate(-2px, 2px); }
}
.screen--game.shake { animation: screen-shake .45s ease-in-out; }

/* Respekter brukere som foretrekker mindre bevegelse */
@media (prefers-reduced-motion: reduce) {
  .sq { animation: none; }
  .fx, .fx-layer { display: none; }
  .screen--game.shake { animation: none; }
  .sq--sink-flash, .sq--just-hit { animation: none; }
}

/* ── Plasseringsfase — instruksjon og kontroller ───────────────── */
.place-instruction {
  color: var(--muted); font-size: .85rem;
  text-align: center; max-width: 420px;
}
.place-controls {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: 420px;
}

/* Klikkbare celler i place-brettet — hover viser preview */
.board--place .sq { cursor: pointer; }
.board--place.board--nosel .sq { cursor: default; }
.board--place.board--nosel .sq:hover { background: var(--water); }

/* ── Flåte-liste (place-skjerm) ────────────────────────────────── */
.fleet-list {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.fleet-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface2);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s, background .12s, opacity .12s;
}
.fleet-item.active { border-color: var(--accent); background: var(--accent-dim); }
.fleet-item.placed { opacity: .5; cursor: default; }
.fleet-item.placed:hover { border-color: transparent; }
.fleet-item.placed .fleet-status { color: #4ade80; font-weight: 700; }
.fleet-name { flex: 1; font-weight: 700; font-size: .9rem; }
.fleet-size { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.fleet-visual {
  display: flex; gap: 2px; margin-left: 4px;
}
.fleet-visual span {
  width: 12px; height: 12px; border-radius: 2px;
  background: var(--ship);
}
.fleet-status { font-size: .78rem; color: var(--muted); min-width: 60px; text-align: right; }

/* ── Spillskjermen — brett-seksjoner ───────────────────────────── */
.board-section {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; max-width: 420px;
}
.board-heading {
  display: flex; align-items: baseline; gap: 6px;
  font-size: .78rem;
}
.board-heading-label { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.board-heading-name { color: var(--text); font-weight: 700; }
.board-heading-status { margin-left: auto; color: var(--muted); font-size: .74rem; }

/* På spillskjermen: begge brett litt mindre for å få plass */
.screen--game { --cell: min(28px, calc((100vw - 60px) / 10 - 2px)); }

/* Mitt eget brett litt mindre enn motstanderens */
.screen--game .board-section--me { --cell: min(22px, calc((100vw - 80px) / 10 - 2px)); }

/* ── Leave button ──────────────────────────────────────────────── */
.btn-leave {
  font-size: .78rem; padding: 4px 8px;
  height: auto; width: auto; margin-top: auto;
}

/* ── Result-skjerm ─────────────────────────────────────────────── */
.result-header {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.result-emoji { font-size: 3.5rem; line-height: 1; }
.result-title { font-size: 1.8rem; font-weight: 900; }
.result-stats {
  width: 100%; max-width: 340px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .95rem;
}
.result-stats-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.result-stats-row--label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.result-actions {
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; gap: 10px;
}

.btn-share {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--muted); padding: 8px 0; transition: color .15s;
}
.btn-share:hover { color: var(--text); }
.btn-share svg { flex-shrink: 0; }
.btn-exit-home {
  display: block; margin-top: 4px;
  background: none; border: none; padding: 8px 0;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--muted); text-decoration: none; cursor: pointer;
  transition: color .15s;
}
.btn-exit-home:hover { color: var(--text); }

/* ── Konfetti ──────────────────────────────────────────────────── */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti-piece {
  position: absolute; width: 9px; height: 14px; border-radius: 2px;
  animation: confetti-burst 2s cubic-bezier(.28,.6,.38,1) forwards;
  animation-delay: var(--d, 0s); opacity: 0;
}
@keyframes confetti-burst {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  30%  { transform: translate(calc(var(--x, 0px) * .85), var(--y, -280px))
                    rotate(calc(var(--r, 720deg) * .35)); opacity: 1; }
  100% { transform: translate(var(--x, 0px), calc(var(--y, -280px) + 900px))
                    rotate(var(--r, 720deg)); opacity: 0; }
}

/* ── Net banner + toast ────────────────────────────────────────── */
.net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 8px 16px; text-align: center;
  font-size: .85rem; font-weight: 600;
  animation: bannerIn .3s ease-out;
}
.net-banner--offline { background: #7f1d1d; color: #fecaca; }
.net-banner--warn    { background: #78350f; color: #fed7aa; }
@keyframes bannerIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.game-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 110;
  padding: 10px 18px; border-radius: var(--radius-sm);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
  font-size: .88rem; font-weight: 600;
  animation: toastSlideIn .3s ease-out;
  max-width: 90vw; text-align: center;
}
.game-toast--warn { border-color: #78350f; color: #fed7aa; }
.game-toast--hit  { border-color: var(--ship-hit); color: #fecaca; }
.game-toast--sunk { border-color: var(--me); color: #fef3c7; font-weight: 800; }
@keyframes toastSlideIn { from { transform: translate(-50%, -100%); } to { transform: translate(-50%, 0); } }