/* FLAF.cz — Lodě (námořní bitva), herní CSS.
 * Glass styl „ala Sčítátko" (projektový kánon), sourozenec Člobrda a Piškvorek:
 *  - tmavé kosmické pozadí (gradienty + bloby + hvězdy), desky = glass panely s odlesky a glow,
 *  - vlastní lodě zlaté, zásah ohnivý, minutí vlnky; menu = fullscreen glass overlay, pulsující CTA.
 * Layoutová logika (fázová emfáze desek, souřadnicový rám, brána tahů) převzatá z ChciHry lode.css.
 * Vše SCOPED pod .lode-shell. Barvy trupů (šedé potopené + zlaté vlastní v návrhu) na :root —
 * SVG gradienty #hullGrad(V)/#hullGradOwn(V) v markupu stránky čtou proměnné přes style, defs jsou mimo shell scope! */

/* Barvy trupů na :root (čte je SVG <defs> v markupu stránky): hull = šedý potopený,
 * ship = zlatý trup vlastní flotily v režimu návrhu (stejné stopy jako čtvereček .cell.ship) */
:root {
  --lode-hull-a: #a4afbb;
  --lode-hull-b: #7c8a99;
  --lode-hull-c: #454d57;
  --lode-ship-a: #FFD75E;
  --lode-ship-b: #E8A03A;
  --lode-ship-c: #C8821C;
}

.lode-shell {
  --ld-gold: #FFD700;
  --ld-accent: #7FFFD4;
  --ld-accent-hover: #5fffc4;
  --ld-fire: #ff7a3c;
  --ld-fire-deep: #c9302c;
  /* pozadí je vždy tmavé kosmické (styl Sčítátka) → prvky stylované pro tmavé, ne theme-aware */
  --ld-panel-a: #232a58;
  --ld-panel-b: #2e3a74;
  /* glass tokeny převzaté ze Sčítátka (game-core.css) */
  --ld-glass-1: rgba(255, 255, 255, .07);
  --ld-glass-2: rgba(255, 255, 255, .12);
  --ld-glass-3: rgba(255, 255, 255, .17);
  --ld-glass-edge: rgba(255, 255, 255, .28);
  --ld-glass-inner: rgba(255, 255, 255, .5);
  --ld-shadow-deep: 0 30px 60px -20px rgba(0, 0, 0, .6), inset 0 1px 0 var(--ld-glass-inner), inset 0 -1px 0 rgba(0, 0, 0, .25);
  /* moře / buňky */
  --ld-line: rgba(127, 255, 212, .16);          /* linky mřížky (prosvítají mezerami) */
  --ld-fog: #1c1a4d;  --ld-fog2: #121035;        /* neznámé pole robota (radarová mlha) */
  --ld-water: #17406b; --ld-water2: #0e2a4c;     /* vlastní voda */
  --ld-steel: #8a98a7; --ld-steel-dark: #4a5563; /* zasažená paluba */
  --ld-ghost-ok: rgba(92, 214, 92, .6);
  --ld-ghost-bad: rgba(255, 92, 92, .6);
  /* velikosti desek (portrait výchozí; topbar webu ukusuje ~9svh) */
  --board-primary: min(100vw - 1.6rem, 48svh);
  --board-secondary: min(40vw, 18svh, 170px);
  --lbl: clamp(0.7rem, 2.8vw, 1.05rem);
  --board: var(--board-primary);

  /* fullscreen shell (jako .piskvorky-shell) — self-contained */
  position: relative; z-index: 0;
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem .75rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  font-family: var(--font-body, sans-serif);
}
@media (max-height: 640px) { .lode-shell { padding: .35rem .5rem .5rem; } }

/* ---------- tmavé kosmické pozadí (styl Sčítátka), vždy — nezávislé na light/dark ---------- */
body.game-lode {
  background:
    radial-gradient(at 15% 10%, #2a2a78 0, transparent 55%),
    radial-gradient(at 85% 15%, #14508c 0, transparent 55%),
    radial-gradient(at 75% 90%, #4b2a9c 0, transparent 55%),
    radial-gradient(at 10% 85%, #1a5da5 0, transparent 55%),
    #0e0d2b;
}
.lode-shell .ld-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lode-shell .ld-blob { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .38; animation: ldFloat 22s ease-in-out infinite; }
.lode-shell .ld-blob--1 { width: 46vw; height: 46vw; background: #4f3fff; top: -14vw; left: -10vw; }
.lode-shell .ld-blob--2 { width: 52vw; height: 52vw; background: #00b4d8; bottom: -16vw; right: -12vw; animation-delay: -7s; }
.lode-shell .ld-blob--3 { width: 40vw; height: 40vw; background: #7f5fd6; top: 40%; right: -12vw; animation-delay: -14s; }
@keyframes ldFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, -5vw) scale(1.1); } }
.lode-shell .ld-stars {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 32% 68%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 56% 34%, #fff, transparent),
    radial-gradient(1px 1px at 82% 78%, #fff, transparent),
    radial-gradient(1px 1px at 91% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 22% 48%, #fff, transparent),
    radial-gradient(1px 1px at 66% 60%, #fff, transparent),
    radial-gradient(1px 1px at 46% 88%, #fff, transparent);
  animation: ldTwinkle 4s ease-in-out infinite;
}
@keyframes ldTwinkle { 50% { opacity: .28; } }

.lode-shell__game { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 0; flex: 1 1 auto; }
.lode-shell button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.lode-shell svg { display: block; }
.lode-shell .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout (grid s fázovou emfází, převzato z ChciHry) ---------- */
.lode-shell .app {
  position: relative; z-index: 1;
  display: grid; justify-items: center;
  gap: clamp(0.4rem, 1.4dvh, 0.9rem);
  max-width: 1500px; margin: 0 auto; width: 100%;
  -webkit-user-select: none; user-select: none;
}
.lode-shell .hd { grid-area: head; text-align: center; min-width: 0; }
.lode-shell .enemy-zone { grid-area: enemy; }
.lode-shell .mine-zone { grid-area: mine; }
.lode-shell .dock { grid-area: dock; }
.lode-shell .panel { grid-area: panel; }

/* fázová emfáze (portrait výchozí) */
.lode-shell .phase-setup { grid-template-areas: "head" "mine" "dock"; }
/* bitva: deska pod palbou (.primary) je velká, deska střelce (.secondary) malá; prohazují se dle tahu */
.lode-shell .phase-battle { grid-template-areas: "head" "primary" "secondary" "panel"; }
.lode-shell .phase-setup .enemy-zone, .lode-shell .phase-setup .panel { display: none; }
.lode-shell .phase-battle .dock { display: none; }

.lode-shell .phase-battle .board-zone.primary { grid-area: primary; --board: var(--board-primary); }
.lode-shell .phase-battle .board-zone.secondary { grid-area: secondary; --board: var(--board-secondary); }
.lode-shell .phase-setup .mine-zone { --board: var(--board-primary); }

/* ---------- status (velký barevný, glow — styl Člobrda) ---------- */
.lode-shell .status {
  margin: 0; min-height: 1.3em;
  font-family: var(--font-heading, sans-serif); font-weight: 800;
  font-size: clamp(1.05rem, 4.6vw, 1.5rem); letter-spacing: .01em;
  color: #d6d0f5; text-align: center; line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.lode-shell .status.turn { text-shadow: 0 0 16px currentColor, 0 2px 5px rgba(0, 0, 0, .6); }
.lode-shell .status.turn.me { color: #FFE9A0; }
.lode-shell .status.turn.ai { color: #9BF0E2; }
.lode-shell .status.hit { color: #ffb066; text-shadow: 0 0 14px rgba(255, 122, 60, .8), 0 2px 5px rgba(0, 0, 0, .6); }
.lode-shell .status.miss { color: #b9d4ee; }
.lode-shell .status.over { color: var(--ld-gold); text-shadow: 0 0 16px rgba(255, 215, 0, .7), 0 2px 5px rgba(0, 0, 0, .6); }

/* ---------- desky + souřadnicový rám ---------- */
.lode-shell .board-zone { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.lode-shell .board-head {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
  width: var(--board); max-width: 100%;
}
.lode-shell .board-name {
  font-family: var(--font-heading, sans-serif); font-weight: 800;
  font-size: clamp(0.8rem, 2.4vw, 1rem); color: #cfc9f0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.lode-shell .board-frame {
  width: var(--board);
  display: grid;
  grid-template-columns: var(--lbl) calc(var(--board) - var(--lbl));
  grid-template-rows: var(--lbl) calc(var(--board) - var(--lbl));
}
.lode-shell .corner { grid-column: 1; grid-row: 1; }
.lode-shell .col-hdr { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(10, 1fr); column-gap: 2px; }
.lode-shell .row-hdr { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(10, 1fr); row-gap: 2px; }
.lode-shell .col-hdr span, .lode-shell .row-hdr span {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: clamp(0.5rem, 1.7vw, 0.75rem); line-height: 1; font-weight: 700; color: rgba(214, 208, 245, .65);
}
/* minimapa (sekundární deska) souřadnice nepotřebuje — bez nich je čistší a větší */
.lode-shell .board-zone.secondary { --lbl: 0px; }
.lode-shell .board-zone.secondary .corner,
.lode-shell .board-zone.secondary .col-hdr,
.lode-shell .board-zone.secondary .row-hdr { display: none; }
/* deska = glass panel (blur, edge, hluboký stín + glow) */
.lode-shell .board {
  grid-column: 2; grid-row: 2; position: relative;
  display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
  gap: 2px; width: 100%; height: 100%;
  padding: 2px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--ld-glass-edge);
  background:
    linear-gradient(160deg, var(--ld-glass-2) 0%, var(--ld-glass-1) 42%, transparent 100%),
    var(--ld-line);
  box-shadow:
    var(--ld-shadow-deep),
    0 0 42px rgba(127, 255, 212, .13),
    inset 0 0 0 1px rgba(255, 215, 0, .14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}

/* ---------- buňky ---------- */
.lode-shell .cell { position: relative; border-radius: 3px; overflow: hidden; }
.lode-shell .cell:focus { outline: none; }
.lode-shell .cell:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: -2px; z-index: 4; }

.lode-shell .enemy-zone .cell {
  background: radial-gradient(circle at 50% 40%, var(--ld-fog), var(--ld-fog2));
  cursor: crosshair;
}
.lode-shell .mine-zone .cell {
  background: linear-gradient(135deg, var(--ld-water), var(--ld-water2));
}
.lode-shell .phase-battle .mine-zone .cell { cursor: default; }
/* rozmístění drag & drop: tažení prstem bez scrollu, kurzory grab/grabbing */
.lode-shell .phase-setup .mine-zone .board { touch-action: none; }
.lode-shell .phase-setup .mine-zone .cell.ship { cursor: grab; }
.lode-shell .phase-setup .mine-zone .board.grabbing,
.lode-shell .phase-setup .mine-zone .board.grabbing .cell { cursor: grabbing; }

/* minutí = usazené soustředné vlnky po žbluňknutí projektilu do vody (statické, žádná smyčka) */
.lode-shell .cell.miss::after {
  content: ''; position: absolute; inset: 6%; border-radius: 50%; opacity: 0.26;
  background:
    radial-gradient(circle closest-side, rgba(186, 236, 247, 0.95) 0 9%, transparent 12%),
    radial-gradient(circle closest-side, transparent 39%, rgba(156, 218, 236, 0.9) 43% 47%, transparent 51%),
    radial-gradient(circle closest-side, transparent 74%, rgba(124, 194, 220, 0.85) 78% 82%, transparent 86%);
}
/* zásah = poškozená šedá (oheň je jen krátká animace .boom při dopadu) */
.lode-shell .cell.hit {
  background: linear-gradient(135deg, var(--ld-steel) 0%, var(--ld-steel-dark) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.lode-shell .cell.hit::after { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: #25282e; }
/* potopená loď: buňky zůstávají VODA dané desky; jednolitý trup kreslí .ship-hull přes footprint */
.lode-shell .cell.sunk { box-shadow: none; }
.lode-shell .cell.sunk::after { content: none; }
.lode-shell .hull-layer { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 2px; pointer-events: none; z-index: 2; }
.lode-shell .ship-hull { align-self: stretch; justify-self: stretch; animation: ldHullReveal 0.45s ease-out; }
.lode-shell .ship-hull svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55)); }
@keyframes ldHullReveal { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
/* vlastní lodě = FLAF zlatá s odleskem (jen vlastní deska; zasažené části zešednou přes .hit) */
.lode-shell .cell.ship {
  background: linear-gradient(135deg, #FFD75E 0%, #E8A03A 52%, #C8821C 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), inset 0 2px 4px rgba(255, 255, 255, 0.34), 0 0 6px rgba(255, 215, 0, .25);
}
/* režim návrhu: loď kreslí zlatý trup (.ship-hull--own) — čtvereček pod ním zůstává voda,
 * jinak by prosvítal po obvodu trupu (beam trupu je jen ~88 % políčka).
 * Třída .ship na buňkách zůstává kvůli kurzoru grab a ARIA. */
.lode-shell .phase-setup .mine-zone .cell.ship:not(.ghost-ok):not(.ghost-bad) {
  background: linear-gradient(135deg, var(--ld-water), var(--ld-water2));
  box-shadow: none;
}
/* trup vlastní lodi v návrhu: bez reveal animace (překresluje se při každém přesunu/otočení
 * celé flotily) + zlatý glow jako u čtverečku */
.lode-shell .ship-hull--own { animation: none; }
.lode-shell .ship-hull--own svg {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.25));
}
/* bitva — minimapa (vlastní deska .secondary, střílí hráč): nepotopené lodě jako zlaté trupy.
 * Čtvereček pod trupem = voda (prosvítal by kolem trupu); zásah nad trup (z-index 3 > hull-layer 2),
 * ať je poškození lodi vidět i na minimapě. Deska pod palbou (.primary) zůstává po čtverečcích. */
.lode-shell .phase-battle .mine-zone.secondary .cell.ship {
  background: linear-gradient(135deg, var(--ld-water), var(--ld-water2));
  box-shadow: none;
}
.lode-shell .phase-battle .mine-zone.secondary .cell.hit { z-index: 3; }
/* zaměřovač (jen jedna buňka při náhledu — levná animace) */
.lode-shell .cell.aim::before {
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  border: 2px solid var(--ld-gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.65);
  animation: ldAimPulse 1.1s ease-in-out infinite;
}
.lode-shell .cell.aim::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--ld-gold), var(--ld-gold)) center / 2px 60% no-repeat,
    linear-gradient(var(--ld-gold), var(--ld-gold)) center / 60% 2px no-repeat;
  opacity: 0.7;
}
/* náhled rozmístění — z-index 3 = nad trupy flotily (.hull-layer má 2), ať je ghost vidět celý */
.lode-shell .cell.ghost-ok { z-index: 3; box-shadow: inset 0 0 0 2px var(--ld-ghost-ok); background: linear-gradient(135deg, rgba(92, 214, 92, 0.5), rgba(92, 214, 92, 0.3)); }
.lode-shell .cell.ghost-bad { z-index: 3; box-shadow: inset 0 0 0 2px var(--ld-ghost-bad); background: linear-gradient(135deg, rgba(255, 92, 92, 0.5), rgba(255, 92, 92, 0.3)); }
/* potopení — krátký otřes desky */
.lode-shell .board.shake { animation: ldShake 0.4s ease-out; }

/* dopad do vody — soustředné vlnky rozestupující se v rámci políčka (jako kámen do vody) */
.lode-shell .ripple { position: absolute; inset: 0; pointer-events: none; }
.lode-shell .ripple i {
  position: absolute; top: 50%; left: 50%; width: 24%; height: 24%; margin: -12% 0 0 -12%;
  border-radius: 50%; border: 2px solid rgba(155, 240, 226, 0.9);
  transform: scale(0.3); opacity: 0; animation: ldRippleExpand 0.9s ease-out forwards;
}
.lode-shell .ripple i:nth-child(2) { animation-delay: 0.15s; }
.lode-shell .ripple i:nth-child(3) { animation-delay: 0.3s; }
/* dopad na loď — záblesk výbuchu v rámci políčka */
.lode-shell .boom { position: absolute; inset: 0; pointer-events: none; }
.lode-shell .boom i {
  position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, #fff6d5 0%, var(--ld-fire) 45%, rgba(201, 48, 44, 0) 72%);
  transform: scale(0.2); opacity: 0; animation: ldBoomFlash 0.5s ease-out forwards;
}

@keyframes ldRippleExpand { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes ldBoomFlash { 0% { transform: scale(0.2); opacity: 1; } 55% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ldAimPulse { 0%, 100% { opacity: 0.6; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes ldShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- brána konce tahu (ruční přepnutí) — glass pill s pulzem ---------- */
.lode-shell .turn-gate {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 85;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9rem 1.7rem; min-height: 56px;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1rem, 3.2vw, 1.35rem); font-weight: 800; letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(160deg, var(--ld-glass-3), var(--ld-glass-1)), rgba(14, 13, 43, .55);
  border: 2px solid var(--ld-accent); border-radius: 9999px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4), 0 0 24px rgba(127, 255, 212, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
  cursor: pointer; animation: ldGatePulse 1.7s ease-in-out infinite;
}
.lode-shell .turn-gate[hidden] { display: none; }
.lode-shell .turn-gate.to-ai { border-color: var(--ld-fire); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 122, 60, 0.35); }
.lode-shell .turn-gate:hover { transform: translate(-50%, -50%) scale(1.04); }
.lode-shell .turn-gate:focus-visible { outline: 3px solid var(--ld-accent); outline-offset: 3px; }
@keyframes ldGatePulse {
  0%, 100% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(127, 255, 212, 0.28); }
  50% { box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6), 0 0 40px rgba(127, 255, 212, 0.5); }
}

/* ---------- fleet pips (zbývající lodě) ---------- */
.lode-shell .fleet-pips { display: inline-flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.lode-shell .pip { display: inline-flex; gap: 1px; }
.lode-shell .pip i { width: 7px; height: 7px; border-radius: 1px; background: rgba(214, 224, 238, .8); display: block; }
.lode-shell .pip.sunk i { background: var(--ld-fire-deep); opacity: 0.6; }

/* ---------- potvrzovací lišta ---------- */
.lode-shell .confirm-bar { display: flex; gap: 0.5rem; }
.lode-shell .confirm-bar[hidden] { display: none; }

/* ---------- dock (rozmístění) ---------- */
.lode-shell .dock {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem;
  width: 100%; max-width: calc(var(--board-primary) + 1rem);
}
.lode-shell .dock-hint {
  margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, .85); text-align: center; line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.lode-shell .dock-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.5rem; align-items: center; }

/* ---------- panel (bitva): počítadla + radar ---------- */
.lode-shell .panel {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1rem;
  width: 100%; max-width: calc(var(--board-primary) + 1rem);
}
.lode-shell .counts {
  display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 0.9rem;
  color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* ---------- tlačítka (glass pill) ---------- */
.lode-shell .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0.5rem 1rem;
  font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 0.92rem;
  border: 2px solid rgba(255, 255, 255, .3); border-radius: 9999px;
  background: rgba(255, 255, 255, .1); color: #fff;
  cursor: pointer; transition: transform .12s ease, background .2s ease, border-color .2s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lode-shell .btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .16); }
.lode-shell .btn:active { transform: translateY(1px); }
.lode-shell .btn:focus-visible { outline: 3px solid var(--ld-accent); outline-offset: 2px; }
.lode-shell .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* CTA „Začít bitvu" — tyrkysové, 3D stín, pulsující */
.lode-shell .btn-cta {
  background: var(--ld-accent); color: #123; border-color: var(--ld-accent);
  font-weight: 800; font-size: 1.05rem; letter-spacing: .03em;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18), 0 8px 22px rgba(127, 255, 212, .35);
  animation: ldCtaPulse 2s infinite;
}
.lode-shell .btn-cta:hover { background: var(--ld-accent-hover); }
.lode-shell .btn-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
@keyframes ldCtaPulse {
  0%, 100% { box-shadow: 0 5px 0 rgba(0, 0, 0, .18), 0 0 0 0 rgba(127, 255, 212, .7), 0 8px 22px rgba(127, 255, 212, .35); }
  50% { box-shadow: 0 5px 0 rgba(0, 0, 0, .18), 0 0 0 14px rgba(127, 255, 212, 0), 0 8px 22px rgba(127, 255, 212, .35); }
}
/* 🎯 PAL! — ohnivé */
.lode-shell .btn-fire {
  background: linear-gradient(135deg, rgba(255, 122, 60, 0.5), rgba(201, 48, 44, 0.35));
  border-color: rgba(255, 150, 90, 0.8);
  box-shadow: 0 0 16px rgba(255, 122, 60, .35);
}
.lode-shell .btn-fire:hover { background: linear-gradient(135deg, rgba(255, 122, 60, 0.65), rgba(201, 48, 44, 0.45)); }

/* ---------- dialogy (styl Sčítátka: fullscreen glass, prvky plavou BEZ rámečků/karty) ---------- */
.lode-shell .dlg {
  margin: 0; padding: 0; max-width: none; max-height: none; width: 100%; height: 100%;
  background: none; border: 0; color: #fff; overflow-y: auto;
}
.lode-shell .dlg::backdrop {
  background:
    radial-gradient(at 20% 20%, rgba(107, 91, 149, .75) 0, transparent 55%),
    radial-gradient(at 80% 80%, rgba(72, 61, 139, .75) 0, transparent 55%),
    rgba(14, 13, 43, .82);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.lode-shell .dlg[open] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
  animation: ldDlgPop .35s cubic-bezier(.34, 1.56, .64, 1);
}
.lode-shell .dlg > * { width: min(420px, 100%); }
@keyframes ldDlgPop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.lode-shell .dlg h2 { font-family: var(--font-display, sans-serif); font-size: 1.7rem; color: #fff; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); margin: 0; }
.lode-shell .dlg fieldset { border: 0; margin: 0; padding: 0; }
.lode-shell .dlg legend { display: block; width: 100%; text-align: center; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .45); margin-bottom: .7rem; padding: 0; }
/* segment voleb — měkká glass tlačítka bez tvrdého rámečku (styl Sčítátka) */
.lode-shell .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .6rem; }
.lode-shell .seg label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: .5rem .4rem; border-radius: 18px; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 0;
  font-family: var(--font-heading, sans-serif); font-weight: 800; font-size: 1rem; color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.lode-shell .seg label:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.lode-shell .seg input { position: absolute; opacity: 0; pointer-events: none; }
.lode-shell .seg label:has(input:checked) { background: var(--ld-accent); color: #123; text-shadow: none; box-shadow: 0 0 18px rgba(127, 255, 212, .5); }
.lode-shell .seg label:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }

/* přepínač v menu (řádek s posuvným switchem — styl Člobrda) */
.lode-shell .toggle-row {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  min-height: 52px; padding: .6rem 1rem; border-radius: 18px;
  background: rgba(255, 255, 255, .08); color: #fff; text-align: left;
  font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: background .15s ease;
}
.lode-shell .toggle-row:hover { background: rgba(255, 255, 255, .14); }
.lode-shell .toggle-row + .toggle-row { margin-top: .6rem; }
.lode-shell .toggle-row:focus-visible { outline: 3px solid var(--ld-accent); outline-offset: 2px; }
.lode-shell .toggle-label { flex: 1 1 auto; }
.lode-shell .toggle-label small { display: block; font-weight: 400; font-size: .78em; opacity: .75; }
.lode-shell .toggle-switch {
  position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 9999px;
  background: rgba(120, 130, 145, 0.5); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease;
}
.lode-shell .toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #e8ecf0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.lode-shell .toggle-row[aria-pressed="true"] .toggle-switch { background: var(--ld-accent); box-shadow: 0 0 12px rgba(127, 255, 212, .45); }
.lode-shell .toggle-row[aria-pressed="true"] .toggle-switch::after { transform: translateX(20px); background: #fff; }

/* velké CTA HRÁT (styl Sčítátka menu-cta, pulsující) */
.lode-shell .dlg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 32px; min-height: 60px; width: min(420px, 100%);
  font-family: var(--font-heading, sans-serif); font-weight: 800; font-size: 1.5rem; letter-spacing: .04em;
  color: #123; background: var(--ld-accent); border: 0; border-radius: 9999px; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 10px 28px rgba(127, 255, 212, .35);
  animation: ldMenuPulse 2s infinite; transition: transform .12s ease, background .2s ease;
}
.lode-shell .dlg-cta:hover { background: var(--ld-accent-hover); transform: translateY(-2px); }
.lode-shell .dlg-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 4px 16px rgba(127, 255, 212, .3); }
@keyframes ldMenuPulse {
  0%, 100% { box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 0 0 rgba(127, 255, 212, .7), 0 10px 28px rgba(127, 255, 212, .35); }
  50% { box-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 0 18px rgba(127, 255, 212, 0), 0 10px 28px rgba(127, 255, 212, .35); }
}
/* sekundární tlačítko (NOVÁ HRA v menu rozehrané hry) — styl Sčítátka menu-secondary */
.lode-shell .dlg-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(420px, 100%); padding: 14px 28px; min-height: 52px;
  font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em;
  color: #fff; background: transparent; border: 3px solid rgba(255, 255, 255, .85); border-radius: 9999px; cursor: pointer;
  transition: transform .12s ease, background .2s ease;
}
.lode-shell .dlg-secondary:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.lode-shell .dlg-secondary:active { transform: translateY(2px); }
/* konec hry */
.lode-shell .dlg-text { color: rgba(255, 255, 255, .9); font-size: 1.05rem; line-height: 1.5; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); margin: 0; }
.lode-shell .stats-line { color: rgba(255, 255, 255, .75); font-size: .95rem; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); margin: 0; }
.lode-shell .result-emoji { display: block; text-align: center; font-size: 3.2rem; margin-bottom: .2rem; }
.lode-shell .dlg-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.lode-shell .dlg-actions .btn { flex: 1 1 auto; }
.lode-shell .dlg-actions .btn-primary { background: var(--ld-accent); color: #123; border-color: var(--ld-accent); }
.lode-shell .dlg-actions .btn-primary:hover { background: var(--ld-accent-hover); }

/* ---------- fx vrstvy (canvasy se přidávají do <body>, mimo shell) ---------- */
body.game-lode .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
body.game-lode .fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

/* ---------- responzivita ---------- */
/* tablet a výš: dvě desky vedle sebe + panel/dock vpravo */
@media (min-width: 900px) {
  .lode-shell { --board-primary: min(62svh, calc(100vw - 620px), 600px); --board-secondary: min(28svh, 300px); }
  .lode-shell .phase-setup .mine-zone { --board: min(62svh, calc(100vw - 400px), 600px); }

  .lode-shell .phase-battle {
    grid-template-areas: "head head head" "primary secondary panel";
    grid-template-columns: auto auto minmax(190px, 250px);
    align-items: start; justify-content: center; column-gap: 1.6rem;
  }
  .lode-shell .phase-setup {
    grid-template-areas: "head head" "mine dock";
    grid-template-columns: auto minmax(240px, 320px);
    align-items: start; justify-content: center; column-gap: 1.6rem;
  }
  .lode-shell .panel, .lode-shell .dock { max-width: none; align-self: start; }
  .lode-shell .panel { flex-direction: column; gap: .8rem; }
  .lode-shell .counts { flex-direction: column; gap: 0.3rem; font-size: 1rem; }
  .lode-shell .dock-btns { grid-template-columns: 1fr; }
  .lode-shell .board-head { width: auto; }
}

/* desktop širší */
@media (min-width: 1440px) {
  .lode-shell { --board-primary: min(66svh, 680px); --board-secondary: min(30svh, 330px); }
  .lode-shell .phase-setup .mine-zone { --board: min(66svh, 680px); }
}

/* mobil landscape: desky + panel vedle sebe, herní plocha bez scrollu */
@media (max-height: 540px) and (orientation: landscape) {
  .lode-shell .app { gap: 0.35rem; }
  .lode-shell { --board-primary: min(60svh, 36vw); --board-secondary: min(30svh, 18vw, 160px); }
  .lode-shell .phase-battle {
    grid-template-areas: "head head head" "primary secondary panel";
    grid-template-columns: auto auto minmax(118px, 200px);
    align-items: start; justify-content: center; column-gap: 0.7rem;
  }
  .lode-shell .phase-setup { grid-template-areas: "mine dock"; grid-template-columns: auto 1fr; column-gap: 0.8rem; align-items: start; }
  .lode-shell .phase-setup .mine-zone { --board: min(78svh, 42vw); }
  .lode-shell .phase-setup .hd { display: none; }
  .lode-shell .status { font-size: clamp(0.9rem, 3vw, 1.1rem); }
  .lode-shell .panel { max-width: none; flex-direction: column; gap: .5rem; }
  .lode-shell .counts { flex-direction: row; gap: 0.6rem; font-size: 0.78rem; }
  .lode-shell .btn { min-height: 38px; font-size: 0.75rem; padding: 0.35rem 0.6rem; }
  .lode-shell .dock-btns { grid-template-columns: 1fr; }
  .lode-shell .board-head { width: auto; }
}

/* 4K / ultrawide */
@media (min-width: 2560px) {
  .lode-shell { --board-primary: min(72svh, 860px); --board-secondary: min(34svh, 420px); }
  .lode-shell .phase-setup .mine-zone { --board: min(72svh, 860px); }
}

/* ---------- omezený pohyb: bez smyčkových animací (zvuk se NEvypíná) ---------- */
@media (prefers-reduced-motion: reduce) {
  .lode-shell .ld-blob, .lode-shell .ld-stars { animation: none; }
  .lode-shell .cell.aim::before { animation: none; }
  .lode-shell .turn-gate { animation: none; }
  .lode-shell .btn-cta, .lode-shell .dlg-cta { animation: none; }
  .lode-shell .dlg { animation: none; }
}