/* =====================================================================
   AMİRAL BATTI — online web client styles.

   REBUILT to the sibling site structure (dama / pişti / çak): a full-viewport,
   responsive, centered CONTENT COLUMN (mobile-first, reads great on desktop) —
   NO phone bezel. Each screen is a top-level <section class="screen"> that fills
   the viewport height; rooms/winners + game dialogs are bottom-sheets/modals.

   The SONAR identity is retained but recalibrated for a real page: navy/teal
   phosphor + signal-amber tokens, stencil (uppercase + letter-spacing) labels,
   the sonar sweep in lobby/waiting, and chart-style battle grids.

   INVARIANT: the in-game board internals (.grid gap/padding/border, .cell,
   .ship-sprite, .ship-layer, .marker, .board-frame, .grid-stack) carry a PIXEL
   CONTRACT with app.js's gridMetrics()/placeSprite() (cell = (w-22)/10, step =
   cell+2, off = 3 → derived from gap:2 pad:2 border:1). The SPACING values are
   kept verbatim — do not change them. Ships + shot markers are now crisp inline
   SVG / CSS vectors (was muddy AI PNG sprites), positioned in the same px rects.
   ===================================================================== */
:root {
  /* ---- Derin donanma paleti (assetlerin navy/teal dünyasıyla uyumlu) ---- */
  --bg-0:#040d19; --bg-1:#0a1a30; --bg-2:#0f2340; --bg-3:#173157;
  --line:#1f3c67; --ink:#eaf1ff; --ink-dim:#8ea6c8; --ink-soft:#c3d4ee;
  /* ---- İmza: sonar fosfor teal ---- */
  --sonar:#35e7cf; --sonar-dim:#5f9fa0; --sonar-glow:rgba(53,231,207,.55);
  --grid-line:rgba(90,205,210,.14);
  /* ---- Sinyal amberi (aksiyon / senin sıran / ateş) ---- */
  --amber:#f5a524; --amber-2:#f9bb52; --amber-d:#c67e12;
  /* ---- Hasar / oyuncu renkleri ---- */
  --red:#ff5442; --teal:#17baa6; --good:#4fd39a;
  --sea-0:#123a4e; --sea-1:#0a2033; --sea-line:rgba(90,205,210,.11);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  /* ---- Yükseltme sistemi (tutarlı gölge/kenar) ---- */
  --elev-1:0 4px 14px -6px rgba(0,0,0,.55);
  --elev-2:0 12px 30px -12px rgba(0,0,0,.68);
  --elev-3:0 20px 44px -16px rgba(0,0,0,.82);
  --hair:inset 0 0 0 1px rgba(120,200,210,.07);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --nums:ui-monospace,"SF Mono","Segoe UI",system-ui,-apple-system,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --maxw:480px;               /* content column cap (sibling menu-first feel) */
}
* { box-sizing:border-box; }
html, body {
  margin:0; padding:0; min-height:100%;
  background:radial-gradient(130% 90% at 50% 0%, #123055 0%, var(--bg-1) 52%, #03080f 100%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
button { font-family:inherit; }

/* ---------- Screen router: full-viewport centered content column ---------- */
.screen {
  display:none; flex-direction:column;
  width:100%; max-width:var(--maxw); margin:0 auto;
  /* svh (small viewport) is STABLE across an address-bar show/hide — using dvh
     here made the flex .board grow/shrink live, drifting the vertically-centered
     battle group (and, via the board-frame calc below, resizing the enemy board
     ~78px) mid-game: the "tur geçişinde ekran kayması". svh keeps it fixed. */
  min-height:100vh; min-height:100svh;
  padding:calc(var(--safe-t) + 12px)
          calc(var(--safe-r) + 18px)
          calc(var(--safe-b) + 14px)
          calc(var(--safe-l) + 18px);
}
.screen.show { display:flex; }

/* ================= İMZA: SONAR TARAYICI =================
   Donanma göstergesi tipografisi: webfont yok — karakter ağırlık + harf
   aralığı + BÜYÜK HARF + tabular ile (stencil hissi başlık/etiketlerde).
   Tek motif; tüm "sistem dinliyor/tarıyor" anlarında görünür:
   lobi (rakip taranıyor) · savaş girişi (filo yerleşiyor) · savaş sırası (canlı ping). */
.sonar {
  --scope:168px;
  position:relative; width:var(--scope); height:var(--scope);
  border-radius:50%; margin:0 auto; overflow:hidden;
  background:radial-gradient(circle at 50% 50%, rgba(53,231,207,.09) 0%, rgba(4,13,25,0) 68%), var(--bg-0);
  box-shadow:
    inset 0 0 0 1px rgba(53,231,207,.28),
    inset 0 0 30px rgba(53,231,207,.10),
    0 18px 40px -18px rgba(0,0,0,.85);
}
/* menzil halkaları + kerteriz artıçizgisi (graticule) */
.sonar::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(var(--scope)/8 - 1px), rgba(53,231,207,.16) calc(var(--scope)/8 - 1px) calc(var(--scope)/8)),
    linear-gradient(rgba(53,231,207,.18),rgba(53,231,207,.18)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(53,231,207,.18),rgba(53,231,207,.18)) 0 50%/100% 1px no-repeat;
}
/* dönen tarama huzmesi */
.sonar::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg,
    var(--sonar-glow) 0deg, rgba(53,231,207,.16) 20deg,
    transparent 62deg, transparent 360deg);
  mix-blend-mode:screen;
  animation:sweep 2.9s linear infinite;
  transform-origin:50% 50%;
}
@keyframes sweep { to { transform:rotate(360deg); } }
.sonar-core {
  position:absolute; left:50%; top:50%; width:9px; height:9px; z-index:3;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--sonar); box-shadow:0 0 10px 2px var(--sonar-glow);
}
.sonar .blip {
  position:absolute; width:9px; height:9px; border-radius:50%; z-index:2;
  background:var(--sonar); box-shadow:0 0 9px 2px var(--sonar-glow);
  animation:ping 2.9s ease-in-out infinite;
}
@keyframes ping { 0%,58%,100%{ opacity:.15; transform:scale(.7); } 66%{ opacity:1; transform:scale(1.25); } 82%{ opacity:.6; } }

/* mini ping — savaş sıra çubuğunun ortasında (canlı tarama işareti) */
.sonar-ping {
  position:relative; width:24px; height:24px; flex:0 0 auto; border-radius:50%;
  overflow:hidden; background:var(--bg-0);
  box-shadow:inset 0 0 0 1px rgba(53,231,207,.3), inset 0 0 8px rgba(53,231,207,.14);
}
.sonar-ping::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg, var(--sonar-glow) 0deg, transparent 70deg, transparent 360deg);
  mix-blend-mode:screen; animation:sweep 2.4s linear infinite;
}
.sonar-ping::before {
  content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; z-index:2;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--sonar); box-shadow:0 0 6px 1px var(--sonar-glow);
}

/* ---------------- BUTTONS ---------------- */
.btn {
  width:100%; min-height:56px; border:none; border-radius:var(--r-md);
  font:800 14px inherit; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; display:flex; align-items:center;
  justify-content:center; gap:9px; box-shadow:0 8px 20px rgba(0,0,0,.38);
  cursor:pointer; transition:filter .12s, transform .1s;
}
.btn:active { transform:translateY(2px) scale(.99); filter:brightness(1.08); }
.btn:focus-visible { outline:2px solid var(--sonar); outline-offset:3px; }
.btn-primary {
  background:linear-gradient(165deg,var(--amber-2),var(--amber-d)); color:#241400;
  box-shadow:0 10px 24px -8px rgba(245,165,36,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-ghost {
  background:rgba(53,231,207,.05); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(53,231,207,.24);
}
.btn-danger {
  background:linear-gradient(165deg,#ff6a58,#b8291a); color:#fff;
  box-shadow:0 10px 24px -8px rgba(255,84,66,.5);
}
.btn-sm { min-height:46px; font-size:13px; }
.btn:disabled { opacity:.4; box-shadow:none; filter:saturate(.5); cursor:default; }
/* inline-SVG UI icons — inherit button color (incl. disabled/hover) via
   currentColor; labels carry the text, SVGs are aria-hidden. */
.btn .i { width:18px; height:18px; flex:0 0 auto; display:block; }
.btn-sm .i { width:16px; height:16px; }
.tile-ic svg { width:21px; height:21px; display:block; }

/* ghost icon button (lobby back etc.) */
.ghost-btn {
  border:1px solid var(--line); background:rgba(53,231,207,.05);
  color:var(--ink); border-radius:var(--r-pill); padding:8px 14px;
  font:800 12px inherit; letter-spacing:.06em; cursor:pointer;
  min-width:52px; min-height:40px;
}
.ghost-btn:active { filter:brightness(1.18); }
.ghost-btn:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
.head-spacer { width:52px; flex:0 0 auto; }

/* ================= PAGE HEADERS (sibling pattern) ================= */
.page-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.page-head--sub { justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand.center { flex:1; justify-content:center; text-align:center; gap:2px; flex-direction:column; }
.brand-logo {
  width:58px; height:58px; flex:0 0 auto; border-radius:16px; display:block;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(53,231,207,.22);
}
.brand-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.eyebrow {
  font:800 10px inherit; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sonar-dim); margin:0;
}
.page-title { font:800 27px/1 inherit; letter-spacing:.05em; margin:0; }
.sub-title { font:800 18px inherit; letter-spacing:.08em; text-transform:uppercase; margin:0; }
.hub-back {
  margin-left:auto; align-self:flex-start; flex:0 0 auto;
  color:var(--sonar-dim); text-decoration:none;
  font:800 10px inherit; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 12px;
}
.hub-back:active { filter:brightness(1.2); }
.hub-back:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }

.home-tag {
  font:600 13.5px inherit; color:var(--ink-dim); line-height:1.55;
  margin:12px 2px 18px;
}

/* ================= HOME (menü öncelikli) ================= */
/* home-body OWNS the space above the footer and vertically CENTERS the menu
   group in it (dama composition): leftover height becomes symmetric top/bottom
   margin instead of dead space pinned under the header. `justify-content:center`
   balances the group; the bottom-pinned .footer-mark below gives it the slight
   optical upward bias. min-height:0 lets it shrink (never clip) on short phones;
   the group is short enough (~430px) to stay fully visible at 700px height. */
.home-body {
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
}

.quick-actions { display:flex; flex-direction:column; gap:11px; }

.join-row { display:flex; gap:8px; margin:16px 0 4px; }
.code-input {
  flex:1; text-transform:uppercase; letter-spacing:.16em; text-align:center;
  font:800 17px inherit; min-height:52px; padding:0 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-2); color:var(--sonar);
}
.code-input:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
.join-go { width:auto; padding:0 22px; }
.home-err {
  text-align:center; color:var(--red); font:700 12.5px inherit;
  min-height:16px; margin:6px 0 0;
}

/* ---- HOME konsol kutucukları (Odalar / Seyir Defteri → panel açar) ---- */
.console-tiles { display:flex; gap:10px; margin-top:14px; }
.tile {
  flex:1; min-width:0; display:flex; align-items:center; gap:11px;
  padding:14px 13px; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--elev-1), var(--hair); color:var(--ink);
  transition:transform .14s, border-color .2s;
}
.tile:active { transform:scale(.98); border-color:var(--sonar-dim); }
.tile:focus-visible { outline:2px solid var(--sonar); outline-offset:3px; }
.tile-ic {
  width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  font-size:19px; background:var(--bg-3); box-shadow:inset 0 0 0 1px rgba(53,231,207,.2);
}
.tile-tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.tile-tx b { font:800 13px inherit; letter-spacing:.05em; }
.tile-tx span { font:800 8.5px/1.3 inherit; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sonar-dim); white-space:normal; }

/* quiet identity line — current nick + edit affordance (always one tap away) */
.nick-chip {
  margin-top:14px; width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px; padding:4px;
  color:var(--sonar-dim); font:700 12px inherit;
}
.nick-chip .i { width:15px; height:15px; flex:0 0 auto; opacity:.85; }
.nick-name { color:var(--ink-soft); font-weight:800; letter-spacing:.02em;
  max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nick-edit { color:var(--sonar-dim); letter-spacing:.04em; }
.nick-chip:active { filter:brightness(1.2); }
.nick-chip:focus-visible { outline:2px solid var(--sonar); outline-offset:3px; border-radius:var(--r-sm); }

.how-link {
  margin-top:10px; background:none; border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--sonar-dim); font:800 11px inherit; letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center;
  gap:8px; width:100%; padding:14px; cursor:pointer;
}
.how-link:active { background:rgba(53,231,207,.05); }
.how-link:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
.footer-mark {
  text-align:center; color:var(--ink-dim);
  font:700 10px inherit; letter-spacing:.14em; text-transform:uppercase;
  margin:24px 0 4px; margin-top:auto; opacity:.6;
}

/* ---- Odalar ---- */
.room-list { display:flex; flex-direction:column; gap:8px; }
.room-card {
  display:flex; align-items:center; gap:12px; padding:11px 12px 11px 13px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--elev-1), var(--hair);
  transition:transform .15s, border-color .2s;
}
.room-card:active { transform:scale(.995); border-color:var(--sonar-dim); }
.room-card.full { opacity:.6; }
.room-av { width:42px; height:42px; flex:0 0 auto; border-radius:12px;
  display:grid; place-items:center; font-size:22px; background:var(--bg-3);
  box-shadow:inset 0 0 0 1px rgba(53,231,207,.16); }
.room-meta { flex:1; min-width:0; }
.room-name { font:700 15px inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-info { display:flex; align-items:center; gap:8px; margin-top:4px;
  font:700 10.5px inherit; letter-spacing:.05em; color:var(--ink-dim); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.room-info .sep { opacity:.35; }
.room-count { font-variant-numeric:tabular-nums; letter-spacing:.06em;
  text-transform:uppercase; }
.room-count.full { color:var(--red); }
.room-code-line { margin-top:5px; }
.room-code-tag { display:inline-block; color:var(--sonar); font:800 10.5px inherit; letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  background:rgba(53,231,207,.08); border:1px solid rgba(53,231,207,.22);
  border-radius:var(--r-pill); padding:2px 9px; }
.room-join {
  flex:0 0 auto; min-height:38px; padding:0 17px; border:none; border-radius:var(--r-pill);
  font:800 11px inherit; letter-spacing:.1em; text-transform:uppercase; color:#241400; cursor:pointer;
  background:linear-gradient(160deg,var(--amber-2),var(--amber-d));
  box-shadow:0 6px 16px -7px rgba(245,165,36,.7);
  transition:transform .12s, filter .12s;
}
.room-join:active { transform:translateY(1px) scale(.97); filter:brightness(1.09); }
.room-join:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
.room-join:disabled { background:var(--bg-3); color:var(--ink-dim); box-shadow:none; cursor:default; }

/* liste boş / yükleniyor / hata durumu */
.list-empty {
  text-align:center; color:var(--ink-dim); font:700 12px inherit; letter-spacing:.04em;
  padding:22px 8px; line-height:1.5;
}
.list-empty.hide { display:none; }

/* ---- Odalar / Seyir Defteri — ortalanmış kart (batak browse/recent yüzeyi) ----
   Home görsel ailesinden BOYUTU SINIRLI, dikey ORTALANMIŞ bir kart (tam-sayfa
   üst-nav alt-ekran DEĞİL): kart-içi başlık (etiket + yenile), tag, KENDİ
   kaydırılan liste bölgesi (kaç oda/galip gelirse gelsin kart görünümü aşmaz),
   sonra eylem + Geri düğmeleri. batak'ın browse/recent yüzeyinin amiralbatti
   sonar/stencil derisiyle eşi. Kart, .screen padding'i içinde ortalanır. */
#rooms.show, #winners.show { justify-content:center; align-items:center; }
.list-card {
  width:100%; max-width:440px; margin:auto;
  display:flex; flex-direction:column; gap:12px;
  padding:20px 18px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line); box-shadow:var(--elev-2), var(--hair);
  /* kart görünüm alanını hiç aşmaz — taşan liste kendi içinde kaydırır */
  max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 28px);
  animation:screenIn .18s cubic-bezier(.2,.9,.3,1.05) both;
}
/* Kart yükselerek girer (uygulamanın sheetIn/toastIn hareketiyle uyumlu),
   GPU-only (opacity/transform) → layout shift yok. prefers-reduced-motion
   (alttaki global blok) anında geçişe indirir. */
@keyframes screenIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
.list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.list-title { font:800 15px inherit; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); margin:0; }
.list-tag { font:600 12.5px inherit; color:var(--ink-dim); line-height:1.5; margin:0; text-align:center; }
/* liste bölgesi taşmayı ÜSTLENİR: kart gövdesi kaydırır, sayfa değil */
.list-scroll {
  min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:2px; margin:-2px;
}
.list-scroll::-webkit-scrollbar { display:none; }

.list-refresh {
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:rgba(53,231,207,.05); color:var(--sonar); font-size:16px;
  display:grid; place-items:center; cursor:pointer;
}
.list-refresh:active { filter:brightness(1.18); }
.list-refresh:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
.list-refresh.spinning { animation:spin .7s linear infinite; }

/* ---- Son Kazananlar — leaderboard (compact ranked rows, sonar/stencil) ----
   rank roundel · name · quiet meta. Hairline dividers, no cards, no emoji chrome.
   Top 3 numerals wear amber/silver/bronze tints; 4+ are quiet. Latest (row 0)
   carries a subtle amber left-accent + tint. */
.winner-strip { display:flex; flex-direction:column; }
.wrow {
  display:flex; align-items:center; gap:13px; padding:11px 6px 11px 11px;
  border-bottom:1px solid rgba(120,200,210,.09); position:relative;
}
.wrow:last-child { border-bottom:none; }
.wrank {
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font:800 13px inherit; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--ink-dim);
  background:rgba(120,200,210,.05); box-shadow:inset 0 0 0 1px var(--line);
}
.wrow.rank-1 .wrank { color:#3a2a06; background:linear-gradient(160deg,var(--amber-2),var(--amber-d));
  box-shadow:0 3px 10px -4px rgba(245,165,36,.6), inset 0 0 0 1px rgba(255,220,150,.5); }
.wrow.rank-2 .wrank { color:#20303a; background:linear-gradient(160deg,#e6eef5,#9fb2c2);
  box-shadow:inset 0 0 0 1px rgba(220,235,245,.6); }
.wrow.rank-3 .wrank { color:#2a1608; background:linear-gradient(160deg,#e0a367,#a9702f);
  box-shadow:inset 0 0 0 1px rgba(240,200,150,.4); }
.wmeta { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.wname { font:700 15px inherit; letter-spacing:.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsub { font:700 10.5px inherit; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sonar-dim); font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* latest match — gentle amber accent */
.wrow.latest { background:linear-gradient(90deg, rgba(245,165,36,.07), transparent 70%);
  border-radius:var(--r-sm); }
.wrow.latest::before { content:""; position:absolute; left:2px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:linear-gradient(var(--amber-2),var(--amber-d)); }

/* ================= LOBBY ================= */
/* margin-top:auto here + margin-bottom:auto on .lobby-actions balances the whole
   lobby group (code-card → sonar → status → seats → action) into the space below
   the sub-header, so it reads as ONE centered composition instead of top-pinned
   content with a giant empty band above a bottom-pinned button (home parity). */
.code-card {
  display:flex; align-items:center; gap:12px; margin:auto 0 6px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--elev-1), var(--hair); padding:12px 14px;
}
.cc-meta { flex:1; min-width:0; }
.cc-label { display:block; font:800 9px inherit; letter-spacing:.2em; text-transform:uppercase; color:var(--sonar-dim); }
.cc-code { display:block; font:800 24px inherit; letter-spacing:.16em; color:var(--sonar);
  font-variant-numeric:tabular-nums; margin-top:3px; }
.cc-share { width:auto; min-height:44px; padding:0 16px; font-size:11px; }

/* imza sonar tarayıcı — lobide ambient (rakip taranıyor) */
.lobby-scope { margin:18px auto 6px; }
.lobby-scope .sonar { --scope:184px; }
.lobby-hint {
  text-align:center; color:var(--ink-dim);
  font:800 10px inherit; letter-spacing:.16em; text-transform:uppercase;
  margin:16px 0 14px;
}
.lobby-slots { display:flex; flex-direction:column; gap:11px; }
.slot {
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  opacity:.4; transition:opacity .4s, transform .4s, background .4s;
  transform:translateY(6px);
}
.slot.joined { opacity:1; transform:none; background:var(--bg-3); }
.slot.me { opacity:1; transform:none; border-color:var(--amber-d); }
.slot .av {
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-size:22px; background:var(--bg-1); flex:0 0 auto;
  box-shadow:inset 0 0 0 1px var(--line);
}
.slot .nm { font:700 16px inherit; }
.slot .st { font-size:12px; color:var(--ink-dim); margin-top:2px; }
.slot.joined .st { color:var(--good); }
.slot .spin { margin-left:auto; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--amber-2);
  animation:spin .8s linear infinite; }
.slot .host-badge { margin-left:auto; font:800 9px inherit; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber-2); }
@keyframes spin { to { transform:rotate(360deg); } }
.lobby-actions { display:flex; flex-direction:column; gap:8px; margin:18px 0 auto; }

/* ================= GAME ================= */
#game { padding-left:calc(var(--safe-l) + 12px); padding-right:calc(var(--safe-r) + 12px); }
.topbar {
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:2px 2px 8px;
}
.tb-code {
  font:800 12px inherit; letter-spacing:.14em; color:var(--sonar);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 12px; font-variant-numeric:tabular-nums;
}
/* battle turn pill — iki avatar arasında sıra göstergesi */
.turn-bar {
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:9px;
  margin:2px auto 8px; padding:5px 7px; border-radius:var(--r-pill);
  background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--elev-1);
  max-width:min(340px,92%);
}
.turn-av {
  display:flex; align-items:center; gap:6px; padding:4px 12px 4px 5px;
  border-radius:var(--r-pill); transition:background .25s, color .25s, box-shadow .25s;
  color:var(--ink-dim); font:800 11px inherit; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.turn-av .ta-em { width:24px; height:24px; border-radius:50%; display:grid;
  place-items:center; font-size:15px; background:var(--bg-1);
  box-shadow:inset 0 0 0 1px var(--line); }
.turn-av.active { color:#241400;
  background:linear-gradient(160deg,var(--amber-2),var(--amber-d));
  box-shadow:0 4px 12px -4px rgba(245,165,36,.7); }
.turn-av.active .ta-em { background:rgba(0,0,0,.16); box-shadow:none; }
.turn-timer {
  font:800 11px inherit; letter-spacing:.08em; color:var(--sonar-dim);
  font-variant-numeric:tabular-nums; margin-left:2px;
}
.turn-timer.is-hidden { visibility:hidden; }
.turn-timer.warn { color:var(--amber-2); }
.turn-timer.danger { color:var(--red); }
.tb-phase {
  font:800 10px inherit; letter-spacing:.14em; text-transform:uppercase; color:var(--sonar-dim);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 11px;
}
.tb-menu {
  margin-left:auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink); font-size:16px; display:grid;
  place-items:center; cursor:pointer;
}
.tb-menu:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
/* .board owns the space under the topbar and CENTERS the phase group in it, so
   there is never an asymmetric "pinned top / pinned bottom / floating middle"
   layout — leftover height becomes a symmetric, composed margin at any size. */
.board { flex:1; min-height:0; display:flex; flex-direction:column;
  justify-content:center; padding:2px 0 0; overflow:hidden; }

/* the phase is a natural-height, vertically-centered group with fluid gaps */
.phase-view { flex:0 1 auto; min-height:0; display:flex; flex-direction:column;
  justify-content:center; }
.phase-view[hidden] { display:none; }
#placeView { gap:clamp(6px, 2.2vh, 26px); }
#battleView { gap:clamp(4px, 1.4vh, 16px); }

.lead { text-align:center; font:600 13px inherit; color:var(--ink-dim);
  margin:2px 0 8px; min-height:18px; line-height:1.35; }
.lead b { color:var(--amber-2); }

/* ---- fleet dock (placement): framed strip + 5 balanced ship chips ---- */
.dock {
  flex:0 0 auto; padding:9px 10px 10px; border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(15,35,64,.55),rgba(10,26,48,.3));
  border:1px solid var(--line); box-shadow:var(--hair);
}
.dock-head { display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 8px; }
.dock-title { font:800 10px inherit; letter-spacing:.18em; text-transform:uppercase; color:var(--sonar-dim); }
.dock-count { font:800 10px inherit; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); font-variant-numeric:tabular-nums; transition:color .25s; }
.dock-count.done { color:var(--good); }

.chips { display:flex; gap:6px; }
.chip {
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px 8px; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--line); cursor:pointer;
  transition:transform .14s, border-color .2s, background .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.chip:active { transform:scale(.95); }
.chip:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
.chip.sel {
  border-color:var(--amber-2); background:var(--bg-3);
  box-shadow:0 0 0 1px var(--amber-2), 0 8px 18px -9px rgba(245,165,36,.75);
}
.chip-ship { width:100%; height:22px; display:block; }
.chip-ship .ship-svg { width:100%; height:100%; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
/* long labels (HÜCUMBOT / DENİZALTI) NEVER truncate: shrink with the viewport,
   and on the narrowest phones wrap to a reserved 2-line box (keeps "N kare"
   aligned across all five chips) rather than clipping with an ellipsis. */
.chip-nm { font-weight:800; font-size:clamp(8px, 2.1vw, 9.5px); line-height:1.05;
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink-soft);
  width:100%; text-align:center; overflow-wrap:anywhere; hyphens:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.1em; }
.chip-len { font:700 8.5px inherit; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.chip-badge {
  position:absolute; top:5px; right:5px; width:15px; height:15px; border-radius:50%;
  display:grid; place-items:center; font:800 10px inherit; line-height:1;
  opacity:0; transform:scale(.4); transition:opacity .2s, transform .2s;
}
/* placed = quiet, confident: green tint + a small check badge (no shouty caps row) */
.chip.placed { background:rgba(20,44,40,.5); border-color:rgba(79,211,154,.4); }
.chip.placed .chip-nm { color:var(--good); }
.chip.placed .chip-ship .ship-svg { filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); opacity:.92; }
.chip.placed .chip-badge { opacity:1; transform:scale(1);
  background:var(--good); color:#06210f; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.chip.placed.sel { border-color:var(--amber-2); box-shadow:0 0 0 1px var(--amber-2); }

/* ---- board frame + coord labels ----
   INVARIANT (pixel contract with app.js gridMetrics): .grid keeps gap:2px,
   padding:2px, border:1px; sprites are absolutely positioned in px against
   .grid-stack. Do not alter these spacing values. */
.board-wrap { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; }
.board-wrap .lead { margin:0 0 10px; }
/* Board scales with AVAILABLE HEIGHT (square grid → width follows height): it
   grows on tall/large viewports (a bigger enemy chart is genuinely useful) and
   shrinks to fit on short phones, so nothing overflows and nothing floats. */
.board-frame { flex:0 0 auto; width:100%; margin:0 auto; max-width:340px; }
#placeView .board-frame { max-width:min(100%, calc(100svh - 24rem)); }

/* ---- battle: two FIXED boards — enemy waters big on top, own fleet small below.
   No turn-swap/morph (owner: the transition was tiring); opponent activity is read
   ON the boards via the telegraph reticle + last-move outline instead. The slot
   sizes are constants so the layout never shifts. */
.battle-boards {
  --big: min(100%, calc(100svh - 32rem));
  --small: min(220px, 46vw);
  display:flex; flex-direction:column; align-items:center; width:100%;
  min-height:0; gap:clamp(6px, 1.6vh, 18px);
}
.bboard { display:flex; flex-direction:column; align-items:center; width:100%; }
.bboard.enemy .board-frame { max-width:var(--big); }
.bboard.own .board-frame   { max-width:var(--small); }
.col-head { display:grid; grid-template-columns:repeat(10,1fr);
  padding-left:18px; margin-bottom:4px; }
.col-head span { text-align:center; font:800 10px inherit; letter-spacing:.08em;
  color:var(--ink-soft); opacity:.95; }
.board-row { display:flex; align-items:stretch; }
.row-head { display:grid; grid-template-rows:repeat(10,1fr); width:18px; flex:0 0 18px; }
.row-head span { display:grid; place-items:center; font:800 10px inherit;
  font-variant-numeric:tabular-nums; color:var(--ink-soft); opacity:.95; }

/* grid + its ship-sprite overlay share the same box */
.grid-stack { position:relative; width:100%; flex:1; min-width:0; }
.grid {
  display:grid; grid-template-columns:repeat(10,1fr); gap:2px;
  background:var(--grid-line); border:1px solid rgba(53,231,207,.32); border-radius:10px;
  padding:2px; aspect-ratio:1/1; touch-action:none;
  box-shadow:inset 0 0 28px rgba(53,231,207,.07), 0 12px 32px -16px rgba(0,0,0,.82);
}
/* absolutely-positioned ship layer, pixel-aligned to the grid below.
   overflow:hidden CONTAINS every sprite/marker to its OWN board box — even a
   transient metrics mismatch during the turn-swap resize can never bleed a
   sprite onto the adjacent board (the enemy/own boards sit directly stacked). */
.ship-layer {
  position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden;
}
/* ships are now crisp inline-SVG silhouettes (div wrapper + .ship-svg) */
.ship-sprite {
  position:absolute; z-index:3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
  transition:filter .2s;
}
.ship-svg { width:100%; height:100%; display:block; overflow:visible; }
.ship-sprite.own { z-index:3; }
.ship-sprite.sel-ship { filter:drop-shadow(0 0 6px rgba(245,165,36,.95))
  drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.ship-sprite.sunk-reveal { filter:grayscale(.9) brightness(.5)
  drop-shadow(0 2px 3px rgba(0,0,0,.6)); opacity:.85; z-index:2; }
.ship-sprite.pop { animation:shipPop .28s cubic-bezier(.2,.9,.3,1.3); }
@keyframes shipPop { from{ transform:scale(.6); opacity:0; } }
.cell {
  background:linear-gradient(158deg,#164a64 0%,#0e3550 55%,#0a2740 100%);
  border-radius:3px; position:relative; display:grid; place-items:center;
  font-size:13px; line-height:1; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(130,205,215,.07), inset 0 0 0 1px var(--sea-line);
}
.grid.fire .cell { cursor:crosshair; }
.grid.fire .cell:not(.hit):not(.miss):not(.sunk):active {
  background:linear-gradient(158deg,#1d5675,#123a55); }
.cell.pv-ok { background:rgba(23,186,166,.55);
  box-shadow:inset 0 0 0 1px rgba(23,186,166,.9); }
.cell.pv-bad { background:rgba(239,68,68,.5);
  box-shadow:inset 0 0 0 1px rgba(239,68,68,.9); }
.cell.miss { background:linear-gradient(158deg,#173f56,#0e2b43); }
/* damaged = darkened cell + red glow */
.cell.hit { background:radial-gradient(circle at 50% 45%,#8a2a19,#3a100b);
  box-shadow:inset 0 0 0 1px rgba(255,120,80,.55), inset 0 0 10px rgba(255,90,50,.35); }
.cell.sunk { background:radial-gradient(circle at 50% 45%,#4e1712,#230a08);
  box-shadow:inset 0 0 0 1px rgba(239,68,68,.5); }
/* sunk-ship cells wear a crisp grid-X (paired with the greyed hull above) */
.cell.sunk::before {
  content:""; position:absolute; inset:22%;
  background:
    linear-gradient(45deg, transparent 43%, rgba(255,130,100,.9) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, rgba(255,130,100,.9) 43% 57%, transparent 57%);
}

/* ---- incoming-shot TELEGRAPH: a pulsing sonar-teal targeting reticle on MY cell
   for ~0.9s before the opponent's marker lands, so the reveal is legible. z-index
   keeps it above cell paint but below the landed marker. Reduced-motion keeps a
   static reticle (the comprehension pacing delay is preserved in JS). ---- */
.cell.telegraph::after {
  content:""; position:absolute; inset:14%; z-index:4; border-radius:50%;
  border:2px solid var(--sonar);
  box-shadow:0 0 10px var(--sonar-glow), inset 0 0 6px var(--sonar-glow);
  background:radial-gradient(circle, rgba(53,231,207,.28) 0 30%, transparent 60%);
  animation:telePulse .9s ease-in-out infinite;
}
/* crosshair ticks */
.cell.telegraph::before {
  content:""; position:absolute; inset:0; z-index:4;
  background:
    linear-gradient(var(--sonar),var(--sonar)) 50% 8%/2px 22% no-repeat,
    linear-gradient(var(--sonar),var(--sonar)) 50% 92%/2px 22% no-repeat,
    linear-gradient(var(--sonar),var(--sonar)) 8% 50%/22% 2px no-repeat,
    linear-gradient(var(--sonar),var(--sonar)) 92% 50%/22% 2px no-repeat;
  opacity:.7;
}
@keyframes telePulse { 0%,100%{ transform:scale(.82); opacity:.6; } 50%{ transform:scale(1.05); opacity:1; } }

/* ---- LAST-MOVE indicator: a quiet, persistent NEUTRAL ink-white outline on the
   most recent shot cell — one per board (my last shot on enemy waters, opponent's
   last on my fleet) — until the next shot replaces it. Deliberately NOT amber/red
   (would read as a hit) and NOT the teal miss-splash — a bright white edge just
   locates the cell without implying an outcome. A 1px dark inset backs the white
   so it stays crisp over the light-steel hull on the own board. ---- */
.cell.lastmove {
  box-shadow:
    inset 0 0 0 2px rgba(234,241,255,.92),  /* --ink white locator edge */
    inset 0 0 0 3px rgba(4,13,25,.5),        /* dark hairline for hull contrast */
    0 0 7px rgba(234,241,255,.32);           /* subtle white glow, quieter than markers */
}

/* ---- vector shot markers (overlay layer, above ship reveals) ---- */
.ship-layer .marker { position:absolute; z-index:5; pointer-events:none; border-radius:50%; }
/* MISS — su sıçraması: belirgin merkez damla + halka (patlamadan sakin ama net) */
.marker.miss {
  background:radial-gradient(circle at 50% 50%, #eaf8fc 0 20%, rgba(150,222,240,.32) 21% 36%, transparent 37%);
  box-shadow:inset 0 0 0 2.5px rgba(180,234,247,.95), 0 0 7px rgba(120,210,235,.55);
}
/* HIT — patlama: 8 uçlu yıldız, sıcak turuncu→kızıl gradyan */
.marker.hit {
  background:radial-gradient(circle at 50% 45%, #ffd863 0 13%, #ff8a2c 30%, #ea3a1c 60%, #a5140b 100%);
  clip-path:polygon(50% 0,61% 33%,98% 35%,68% 57%,79% 96%,50% 72%,21% 96%,32% 57%,2% 35%,39% 33%);
  filter:drop-shadow(0 0 5px rgba(255,120,40,.65)) drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.ship-layer .marker.pop { animation:boom .34s cubic-bezier(.2,.9,.3,1.4); }
@keyframes boom { 0%{ transform:scale(.35); opacity:.2; } 60%{ transform:scale(1.22); } 100%{ transform:scale(1); } }
.grid.shake { animation:shake .38s; }
@keyframes shake {
  0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); }
  40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); }
}

/* ---- placement action hierarchy: secondary row + full-width primary ---- */
.place-actions { flex:0 0 auto; display:flex; flex-direction:column; gap:9px;
  padding:0; }
.place-actions-row { display:flex; gap:9px; }
.place-actions-row .btn { min-height:48px; font-size:13px; }
.place-actions > .btn { min-height:58px; font-size:15px; }

/* ---- battle status + labels ----
   FIXED heights + single line (no wrap) so alternating turn text can never change
   their box height and shift the centered board group (no-shift invariant). */
.battle-status {
  text-align:center; font:800 12px inherit; letter-spacing:.08em; text-transform:uppercase;
  height:34px; display:flex; align-items:center; justify-content:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:0 8px; transition:color .25s;
}
.battle-status.you { color:var(--amber-2); }
.battle-status.foe { color:var(--sonar-dim); }
.grid-label {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font:800 10px inherit; color:var(--sonar-dim); letter-spacing:.16em; text-transform:uppercase;
  height:16px; margin:0 0 6px; white-space:nowrap; overflow:hidden;
}
.grid-label .dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.grid-label .dot.foe { background:var(--red); }
.grid-label .dot.me { background:var(--teal); }

/* ================= TOASTS ================= */
#toastWrap {
  position:fixed; left:0; right:0; top:40%; z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast {
  background:rgba(12,18,38,.94); border:1px solid var(--line);
  color:var(--ink); font:700 14px inherit; padding:11px 18px;
  border-radius:var(--r-pill); box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:toastIn .3s, toastOut .3s 1.5s forwards;
  max-width:88%; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.toast.sunk { border-color:var(--red); color:#ffd7cc;
  background:rgba(60,16,12,.95); }
.toast img { width:24px; height:24px; object-fit:contain; flex:0 0 auto; }
@keyframes toastIn { from{ transform:translateY(-14px) scale(.9); opacity:0;} }
@keyframes toastOut { to{ transform:translateY(-10px); opacity:0;} }

/* single-line status toast (bottom) — reconnect etc. */
#lineToast {
  position:fixed; left:50%; bottom:calc(var(--safe-b) + 26px);
  transform:translateX(-50%) translateY(12px); z-index:70;
  background:rgba(12,18,38,.96); border:1px solid var(--line); color:var(--ink);
  font:700 13px inherit; padding:10px 16px; border-radius:var(--r-pill);
  box-shadow:0 10px 30px rgba(0,0,0,.5); max-width:88%; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
#lineToast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ================= OVERLAY / MODALS (viewport-fixed) ================= */
#overlay, #howModal, #menuModal, #introModal, #resumeModal, #exitModal, #nameModal {
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(4,7,16,.78); backdrop-filter:blur(3px);
}
#overlay.show, #howModal.show, #menuModal.show, #introModal.show,
#resumeModal.show, #exitModal.show, #nameModal.show { display:flex; }
/* name prompt input */
.text-input {
  width:100%; padding:14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink);
  font:600 16px inherit; letter-spacing:.01em; margin-bottom:2px;
}
.text-input:focus-visible { outline:2px solid var(--sonar); outline-offset:2px; }
#nameModal .btn { margin-top:12px; }
.sheet {
  width:100%; max-width:360px; background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 20px;
  box-shadow:0 30px 70px rgba(0,0,0,.6); max-height:90%; overflow-y:auto;
  animation:sheetIn .3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes sheetIn { from{ transform:translateY(24px) scale(.96); opacity:0;} }
.sheet h2 { font:800 21px inherit; letter-spacing:.08em; text-transform:uppercase; margin:0 0 5px; text-align:center; }
.sheet .sub { text-align:center; color:var(--ink-dim); font-size:13px; margin:0 0 16px; line-height:1.45; }

.stat-row {
  display:flex; align-items:center; gap:12px; padding:12px 15px;
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:9px;
}
.stat-row .sic { font-size:22px; width:26px; text-align:center; }
.stat-row .snm { font:800 10px inherit; letter-spacing:.12em; text-transform:uppercase;
  flex:1; color:var(--ink-dim); }
.stat-row .sval { font:800 18px inherit; color:var(--amber-2);
  font-variant-numeric:tabular-nums; }

.how-list { display:flex; flex-direction:column; gap:14px; margin:4px 0 18px; }
.how-item { display:flex; gap:13px; align-items:flex-start; }
.how-badge {
  width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  display:grid; place-items:center;
  font:800 15px inherit; letter-spacing:.02em; color:var(--sonar);
  font-variant-numeric:tabular-nums;
  background:var(--bg-3); box-shadow:inset 0 0 0 1px rgba(53,231,207,.24);
}
.how-txt b { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.how-txt p { margin:5px 0 0; font-size:12.5px; color:var(--ink-dim); line-height:1.45; }

.menu-list { display:flex; flex-direction:column; gap:10px; }
/* imza sonar tarayıcı — savaş girişi modalinde (rakip filosu yerleşiyor) */
.intro-scope { margin:8px auto 14px; }
.intro-scope .sonar { --scope:128px; }

/* result overlay — hero / sunk mood banner (contained, capped-height cover) */
.result-hero {
  position:relative; height:120px; margin:-4px -20px 38px;
  border-radius:var(--r-md) var(--r-md) 0 0;
}
.result-hero > img { border-radius:var(--r-md) var(--r-md) 0 0; }
.result-hero img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.result-hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(11,18,38,.15), var(--bg-2)); }
.result-hero.lose img { filter:grayscale(.55) brightness(.7); }
.result-hero .rh-badge {
  position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-size:25px; line-height:1;
  background:linear-gradient(165deg,var(--bg-3),var(--bg-1));
  box-shadow:0 8px 18px -6px rgba(0,0,0,.7), inset 0 0 0 2px rgba(53,231,207,.35);
}
.result-hero.win .rh-badge { box-shadow:0 8px 18px -6px rgba(0,0,0,.7),
  inset 0 0 0 2px var(--amber-2), 0 0 16px rgba(245,165,36,.4); }
.result-hero.lose .rh-badge { box-shadow:0 8px 18px -6px rgba(0,0,0,.7),
  inset 0 0 0 2px rgba(255,84,66,.55); }

/* ================= CONNECTION BANNER (reconnect) ================= */
.conn-banner {
  position:fixed; top:0; left:0; right:0; display:none;
  align-items:center; justify-content:center; gap:10px;
  background:#b8291a; color:#fff; font:700 13px inherit; letter-spacing:.02em;
  padding:calc(var(--safe-t) + 8px) 12px 8px; z-index:300;
}
.conn-banner.show { display:flex; }
.conn-banner.ok { background:var(--good); color:#06210f; }
.conn-spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,0.4);
  border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }

/* ================= WIDE SCREENS (desktop polish) =================
   The column stays centered & capped; give the menu a touch more breathing
   room and a subtle framed feel so it doesn't read as a cramped phone strip. */
@media (min-width:720px) and (min-height:640px) {
  :root { --maxw:520px; }
  .page-title { font-size:30px; }
}
/* On tall + wide viewports let the GAME column (only) widen so the boards can
   scale up to fill the height, instead of leaving big empty bands. */
@media (min-width:720px) and (min-height:900px)  { #game { max-width:600px; } }
@media (min-width:720px) and (min-height:1200px) {
  #game { max-width:680px; }
  #placeView .board-frame  { max-width:min(100%, calc(100svh - 26rem)); }
  .battle-boards { --big:min(100%, calc(100svh - 34rem)); }
}

/* ---- reduced motion: kill non-essential animation ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .slot .spin { animation:none !important; border-top-color:var(--amber-2); }
  .ship-layer .marker.pop, .ship-sprite.pop, .grid.shake { animation:none !important; }
  /* sonar: süpürme donar ama gösterge okunur kalır (statik kerteriz) */
  .sonar::after { animation:none !important; transform:rotate(-42deg); opacity:.5; }
  .sonar-ping::after { animation:none !important; transform:rotate(-42deg); }
  .sonar .blip { animation:none !important; opacity:.85; }
}

/* ===== Google AdSense yerleşimleri — yalnızca boş kenar/üst/alt alanlar; oyun alanını asla itmez/örtmez.
   Üst/alt reyonlar ORTALANMIŞ .home-body grubunun DIŞINDA (kardeş) durur; home-body flex:1 kalan boşluğu
   yutmaya devam ettiği için menünün dikey ortalanmış kompozisyonu korunur. ===== */
.ad-slot { width: 100%; max-width: var(--maxw); margin: 0 auto; text-align: center; overflow: hidden; flex: 0 0 auto; }
.ad-slot--header { min-height: 90px; margin-bottom: 6px; }
.ad-slot--footer { min-height: 90px; margin-top: 10px; }
.ad-slot .adsbygoogle { display: block; width: 100%; }
.ad-rail { position: fixed; top: 50%; transform: translateY(-50%); width: 160px; height: 600px; max-height: calc(100vh - 40px); z-index: 90; display: none; overflow: hidden; }
.ad-rail--left { left: 12px; }
.ad-rail--right { right: 12px; }
.ad-rail .adsbygoogle { display: block; width: 160px; height: 600px; }
@media (min-width: 1100px) { .ad-rail { display: block; } }