/* ===== Lokálne fonty — Cinzel (titles) + Cormorant Garamond (body) =====
   Stiahnuté z Google Fonts (v26 / v21) ako woff2. Iba latin + latin-ext subsety
   (Slovenčina). Variable font files zdieľané naprieč weightmi — browser číta
   unicode-range pre subset selection a font-weight pre rendering interpoláciu.
   font-display: swap = systémový fallback kým sa font loadne (no FOIT). */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data/fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data/fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('data/fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('data/fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('data/fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('data/fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('data/fonts/cormorant-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('data/fonts/cormorant-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('data/fonts/cormorant-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('data/fonts/cormorant-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* ===== Z-index tier scheme — canonical hierarchy =====
   Pridanie nového UI elementu: vyber tier z tabuľky nižšie, použi var(--z-*).
   Tiers narastajú zhora dolu (nižšie = pod, vyššie = nad).

   Tier                  | Variable          | Range usable | Použitie
   ----------------------|-------------------|--------------|----------
   Background tints      | --z-bg            | 0..4         | Combat night tint, menu backdrop blur
   Map elements          | --z-map           | 5..49        | Minimap markers, items, paths, fog (Y-sort 10-99 inline)
   Board cards / units   | --z-cards         | 60..69       | board-card, hero-card, items-bar
   Hand zone             | --z-hand          | 70..149      | hand-zone + hand-card hover
   UI base               | --z-ui-base       | 150..199     | top-panel, map-dayphase, daynight-overlay
   In-combat banners     | --z-banners       | 200..349     | attack-mode-banner, spell-target-banner, tooltip-hint
   Activated abilities   | --z-abilities     | 350..399     | cast-popup, has-popup hover
   Tooltips / previews   | --z-tooltips      | 400..499     | card-preview-floating
   Event banners         | --z-event-banners | 500..599     | terrain-change, symbiosis-reveal, vycerpanie, trap-snap
   Animations (canvas)   | --z-animations    | 600..699     | #anim-layer (slash, smoke, sigil, particles)
   Modals                | --z-modals        | 700..799     | dialog, deck-editor, game-over, hero-select
   Stingers (toasts)     | --z-stingers      | 800..899     | aggressive-trigger, item-pickup
   Top-most overlays     | --z-top           | 900..999     | tooltip-floating, card-preview, kritické notifikácie

   Princíp: Modaly sú NAD animáciami (game-over zakryje slash/smoke). Animácie
   sú NAD event banner-mi. Event banner-y sú NAD tooltip-mi a abilities.

   Inline arrow-stuck (z 9000 inside #anim-layer) je relatívny k anim-layer
   stacking kontextu, takže v body stacking je effectively pri --z-animations. */
:root {
  --z-bg:             0;
  --z-map:            5;
  --z-cards:          60;
  --z-hand:           70;
  --z-ui-base:        150;
  --z-banners:        200;
  --z-abilities:      350;
  --z-tooltips:       400;
  --z-event-banners:  500;
  --z-animations:     600;
  --z-modals:         700;
  --z-stingers:       800;
  --z-top:            900;
}

body {
  font-family: 'Cormorant Garamond', 'Segoe UI', system-ui, serif;
  font-size: 18px;          /* Cormorant body je užší než sans-serif → kompenzuj */
  font-weight: 500;
  color: #f0e8d0;
  background-color: #2a1f15;
  background-image: url('data/art/bg/meadow.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Hra nieje text-document — double-click nech neoznačuje texty (card names,
     tooltipy, banners). Per-element opt-in `user-select: text` ak by sme niečo
     skopírovateľné chceli (input fieldy <input>/<textarea> majú default už auto). */
  user-select: none;
  -webkit-user-select: none;
}

/* Cinzel pre headings/titles — carved roman serif sedí na drevený frame štýl.
   Použité všade kde má text "monumentálny" charakter (boj/menu titulky, hero
   mená v dialógu, dôležité tlačidlá). Body text používa Cormorant Garamond. */
h1, h2, h3,
.reward-title,
.game-over-title,
.discovery-title,
.discovery-name,
.dialog-bubble-speaker,
.cast-popup-card .name-badge,
.hero-switch-title,
.hsc-name,
.deck-editor-header h2,
.trade-title,
.card-pick-modal-title,
.top-menu-btn,
.menu-btn,
.restart-btn,
.discard-modal-title,
.opponent-turn-banner,
.aggressive-trigger-banner,
.trap-snap-banner,
.vycerpanie-banner,
.name-badge,
.tt-name {
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

/* Číselné/stat elementy — Cormorant Garamond je príliš tenký v malých rozmeroch,
   na badges + top-bar info to bolo nečitateľné. Sans-serif (Segoe UI / system)
   drží proporcie aj pri 11-14 px. */
.cost-badge,
.attack-badge,
.hp-badge,
.venom-badge,
.attack-badge .bv,
.hp-badge .bv,
.venom-badge .bv,
.stat-token,
.stat-token .bv {
  font-family: 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0;
}

/* Custom cursor — drevený šíp s listami pre celú hru (forest theme). 48px sweet
   spot — Chrome cap je 128, ale väčšie kurzory pôsobia neohrabane. Hotspot (12,6)
   = pixel-coord skutočnej špičky šípu (vyhľadané v alpha channel — `(0,0)` bolo
   v transparentnej zóne nad arrow tipom a klik sa registroval nesprávne).
   `!important` pretláča per-element `cursor: pointer` v ostatných pravidlách
   (.hand-card, .menu-btn, .map-hotspot, ...) — pretože užívateľ chce jednotný
   kurzor "všade", nie default + hover variant. */
* {
  cursor: url('data/art/icons/cursor1-48.png') 12 6, auto !important;
}

#game-root {
  width: 100vw;
  height: 100vh;
  padding: 12px;
}
/* Combat view layout */
#game-root:has(.enemy-board) {
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  gap: 8px;
}
/* Map view fills full okno — žiadny padding ani rounded corners, aby cez okraje
   neprerážalo body background (sc3-all-preview pre boj). */
#game-root:has(.map-view) {
  padding: 0;
}

/* Počas combat stage-u nech meadow body-bg nepresvitá — zastavíme image a
   nastavíme tmavú backup farbu pre prípady kde blurry vrstva nepokryje okraje. */
body:has(#game-root.combat-stage) {
  background-image: none;
  background-color: #000;
}

/* Blurry letterbox vrstva — JS-vložený div pred #game-root. Klasický
   „pillar/letterbox" efekt: ten istý combat_bg ale rozmazaný a stmavený, takže
   v okrajových pásoch okolo sharp scény nie sú nudné čierne bary.
   (Pseudo-element ::before na body je nespoľahlivý cez body background
   propagation rules — preto reálny DOM element.) */
.combat-bg-blur {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(28px) brightness(0.45) saturate(0.85);
  /* Mierne zoom-nuté aby blur nevyšiel zo screen-u (tmavé okraje od blur halo). */
  transform: scale(1.08);
  transform-origin: center;
  pointer-events: none;
}

/* === Combat stage (fixed reference resolution + transform scale) ===
   #game-root.combat-stage je "designovaný" na referenčných 1600 × aspect_ratio
   pixeloch. JS recomputne --combat-scale = min(vw/1600, vh/refH) pri resize.
   Bg ide priamo na stage (background-size: 100% 100%) — bg aj slot pozície
   škálujú spolu cez transform → slot zostane na rovnakom mieste na bojisku
   pri akejkoľvek veľkosti okna. Aspect-ratio per encounter (default 16/9). */
#game-root.combat-stage {
  width: 1600px;
  height: auto;
  aspect-ratio: var(--combat-aspect, 16/9);
  /* Absolute center v okne */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--combat-scale, 1));
  transform-origin: center center;
  /* Bg vypĺňa celý stage (100% 100% — bez cover-cropu, autorský art nech je
     v správnom aspect-e). */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  /* Pozn: NESETUJ `overflow: hidden` — CSS transform na ancestoroch robí stage
     containing block pre position:fixed potomkov (banners, modals). Hidden overflow
     by ich orezalo pri scale < 1. */
}

/* ===== Main menu ===== */
.menu-screen {
  position: fixed;            /* vyskočí z #game-root padding-u → no meadow leak */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  border-radius: 0;
  z-index: 1;
}
/* Edge filler — rozmazaná cover-stretched verzia main-menu.png za stage-om.
   Vyplní letterbox čokoľvek v mimo-16:9 viewporte (umiestené aj cez padding).
   TV-style backdrop: sharp art v strede cez .menu-stage, soft blur na okraje. */
.menu-screen::before {
  content: '';
  position: absolute;
  inset: -3%;                 /* mierne oversize aby blur edges neboli vidno */
  background: url('data/art/bg/main-menu.webp') center/cover no-repeat;
  filter: blur(28px) brightness(0.55);
  z-index: 0;
}
/* Stage = aspect-ratio constrained box ktorý drží main-menu.png art + panel s
   tlačidlami. Letterboxes na viewport mimo 16:9 — letterbox vyplní .menu-screen::before
   blurred copy main-menu.png. Panel je pozicovaný ako %-tá stage-u, takže button blok
   ostáva v rámci nakresleného tmavého poľa nezávisle od velikosti viewportu. */
.menu-stage {
  position: relative;
  z-index: 1;                  /* nad ::before blur backdrop-om */
  /* Stage drží 16:9 aspect, vyplní menší rozmer viewportu. min() trick:
     width = menší z (100vw / viewport scaled by AR). */
  width: min(100vw, calc(100vh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  background: url('data/art/bg/main-menu.webp') center/contain no-repeat;
  container-type: inline-size;
}
.menu-stage > .menu-panel {
  position: absolute;
  /* Súradnice tmavého poľa v main-menu.png (1672×941). */
  left: 38.5%;
  top: 21%;
  width: 22.5%;
  height: 47%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 2% 3%;
  gap: 1.5%;
}
.menu-title {
  font-size: 3cqw;        /* container-query unit — scaluje s width stage-u */
  font-weight: 800;
  color: #f0e8d0;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9), 0 0 20px rgba(210, 162, 76, 0.6);
  letter-spacing: 1px;
  margin: 0 0 12% 0;
  text-align: center;
  line-height: 1.1;
}
.menu-hint {
  font-size: 0.95cqw;
  color: #aaa;
  font-style: italic;
}
/* Verzia hry — diskrétne v pravom dolnom rohu stage-u. */
.menu-version {
  position: absolute;
  right: 1.2%;
  bottom: 1%;
  font-size: 0.85cqw;
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
  letter-spacing: 0.05em;
  pointer-events: none;
}
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Lobby list — used v _renderLobbyList(). Sedí v rovnakom menu-panel kontaineri. */
.lobby-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 12cqw;
  max-height: 20cqw;
  overflow-y: auto;
  padding: 4px 0;
  margin: 8px 0;
}
.lobby-empty {
  font-size: 0.9cqw;
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 2cqw 0;
}
.lobby-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.lobby-row:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
}
.lobby-name {
  font-size: 0.95cqw;
  color: #ddd;
}
.lobby-meta {
  font-size: 0.85cqw;
  color: #999;
}

/* Lobby room — host + joiner slots, used v _renderLobbyRoom. */
.lobby-room-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.lobby-slot {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 1cqw;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.15);
}
.lobby-slot.filled {
  background: rgba(80, 140, 80, 0.2);
  color: #d8e8d0;
  border-color: rgba(120, 180, 120, 0.35);
}
.lobby-slot.empty {
  background: rgba(40, 40, 40, 0.4);
  color: #888;
  font-style: italic;
  border-style: dashed;
}
.lobby-slot.me {
  border-color: rgba(180, 200, 100, 0.6);
  box-shadow: 0 0 8px rgba(180, 200, 100, 0.2);
}
.lobby-me-tag {
  color: #b4c864;
  font-size: 0.8em;
  margin-left: 4px;
}

/* PvP deck editor modal — full-overlay, dva panely (pool vľavo, deck vpravo). */
.pvp-deck-editor-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pvp-deck-editor-box {
  background: rgba(20, 18, 14, 0.96);
  border: 2px solid #5a4a3a;
  border-radius: 12px;
  width: min(92vw, 1400px);
  height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  color: #eee;
  box-shadow: 0 0 32px rgba(0,0,0,0.7);
}
.pvp-deck-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #5a4a3a;
}
.pvp-deck-editor-header h2 {
  margin: 0;
  font-size: 1.2rem;
}
.pvp-deck-editor-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  padding: 16px;
  flex: 1;
  overflow: hidden;
}
.pvp-deck-editor-pool, .pvp-deck-editor-selected {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
}
.pvp-section-label {
  font-size: 0.9rem;
  color: #b4a070;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.pvp-pool-grid, .pvp-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding-right: 6px;
}
.pvp-pool-card, .pvp-deck-card {
  position: relative;
  aspect-ratio: 5 / 7;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  border: 1px solid #444;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  overflow: hidden;
}
.pvp-pool-card:hover, .pvp-deck-card:hover {
  transform: scale(1.05);
  border-color: #b4a070;
}
.pvp-pool-card.maxed {
  opacity: 0.4;
  cursor: not-allowed;
}
.pvp-pool-card.maxed:hover {
  transform: none;
}
.pvp-pool-card .badge, .pvp-deck-card .badge {
  position: absolute;
  font-size: 0.65rem;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border-radius: 3px;
  padding: 1px 4px;
  z-index: 2;
}
.pvp-pool-card .cost-badge, .pvp-deck-card .cost-badge {
  top: 2px;
  left: 2px;
  background: rgba(60, 70, 130, 0.95);
}
.pvp-pool-card .name-badge, .pvp-deck-card .name-badge {
  bottom: 2px;
  left: 2px;
  right: 2px;
  text-align: center;
  font-size: 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvp-pool-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(180, 160, 100, 0.9);
  color: #000;
  font-size: 0.6rem;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 4px;
  z-index: 2;
}
.pvp-empty-hint {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* Disconnect toast — auto-fade z PvP host-disconnect detection. */
.disconnect-toast-overlay {
  animation: disconnect-fade 3.5s ease-out forwards;
  pointer-events: none;
}
@keyframes disconnect-fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Lobby-room rozšírený panel — hero picker + ready row potrebujú viac priestoru. */
.lobby-room-panel {
  max-height: 80vh;
  overflow-y: auto;
}

/* PvP hero picker — 4 karty v gride pod lobby slotmi. */
.pvp-hero-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.pvp-hero-card {
  background: rgba(20, 20, 20, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pvp-hero-card:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.pvp-hero-card.selected {
  border-color: var(--hero-glow, #c0c0c0);
  box-shadow: 0 0 12px var(--hero-glow, #c0c0c0);
}
.pvp-hero-card.locked {
  cursor: not-allowed;
  opacity: 0.85;
}
.pvp-hero-card .phc-art {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  position: relative;
}
.pvp-hero-card .phc-name {
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  font-size: 0.7cqw;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
  text-align: center;
}
.pvp-hero-card .phc-meta {
  display: flex;
  justify-content: space-around;
  font-size: 0.7cqw;
  color: #ccc;
  padding: 2px 0;
}
.pvp-hero-card .phc-stat.hp { color: #ff8a8a; }
.pvp-hero-card .phc-stat.atk { color: #ffd54a; }

/* Ready row — button + opponent status side by side. */
.pvp-ready-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.pvp-ready-btn {
  flex: 1;
}
.pvp-ready-btn.unready {
  background: rgba(100, 60, 60, 0.4);
}
.pvp-opp-status {
  font-size: 0.9cqw;
  padding: 6px 12px;
  border-radius: 4px;
  flex: 1;
  text-align: center;
}
.pvp-opp-status.waiting { color: #888; font-style: italic; }
.pvp-opp-status.not-ready { color: #b88; background: rgba(80, 40, 40, 0.2); }
.pvp-opp-status.ready { color: #b4c864; background: rgba(60, 80, 40, 0.3); }

.pvp-countdown {
  text-align: center;
  font-size: 1.4cqw;
  color: #ffd54a;
  font-weight: bold;
  margin: 8px 0;
  text-shadow: 0 0 8px rgba(255, 213, 74, 0.5);
}

/* Audio settings panel v main menu — pod buttonmi. Dve slidery (sfx, music). */
.menu-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 8px;
  padding: 10px 14px;
  background: rgba(20, 15, 10, 0.85);
  border: 1px solid #4a3a20;
  border-radius: 6px;
  min-width: 240px;
}
.settings-row {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  align-items: center;
  gap: 10px;
  color: #d2c8a0;
  font-size: 13px;
}
.settings-label {
  font-weight: 600;
  letter-spacing: 0.3px;
}
.settings-slider {
  width: 100%;
  accent-color: #d2a24c;
  cursor: pointer;
}
.settings-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #c9b878;
}
.menu-btn {
  padding: 12px 32px;
  background: rgba(20, 15, 10, 0.92);
  color: #f0e8d0;
  border: 2px solid #5a4a30;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  min-width: 240px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
/* V kontexte main-menu stage tlačidlá scalujú s veľkosťou panela. Container query
   unit (cqw) reaguje na width stage-u, takže labels ostávajú čitateľné v panel
   poli bez ohľadu na viewport size. */
.menu-stage .menu-btn {
  padding: 0.9cqw 0.8cqw;
  font-size: 1.1cqw;
  min-width: 0;
  width: 100%;
  border-width: 0.15cqw;
  border-radius: 0.4cqw;
}
.menu-btn:hover:not(.disabled):not(:disabled) {
  background: rgba(40, 28, 16, 0.95);
  border-color: #d2a24c;
  transform: translateY(-2px);
}
.menu-btn.primary { border-color: #d2a24c; color: #ffd54a; }
.menu-btn.primary:hover:not(.disabled):not(:disabled) { background: #d2a24c; color: #1a0f08; }
.menu-btn.disabled, .menu-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-btn.small { padding: 6px 14px; font-size: 12px; min-width: 0; }

/* ===== Map view — viewport + scrollable canvas ===== */
.map-view {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
}
.map-canvas {
  position: absolute;
  top: 0; left: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  will-change: transform;
}
/* Initial-enter fade-in — aplikované raz pri prvom rendere po menu/combat→map prechode
   (showMap() flag _mapJustEntered v ui.js). 250ms opacity transition vyhladí
   inak instantný DOM swap. Subsequent renders (walk, state changes) class nemajú. */
@keyframes map-canvas-fade-in-anim {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.map-canvas--just-entered { animation: map-canvas-fade-in-anim 250ms ease-out; }
/* Dev mask overlay — toggle cez ui.toggleMaskOverlay() v console. Mask je
   stretched 100% × 100% rovnako ako map bg, takže ak je out-of-sync, vidno to. */
.dev-mask-overlay {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
  z-index: 50;
}
/* Drevený "explorer's dashboard" — vertikálny panel pri ľavom okraji mapy.
   Bg PNG (main-panel-cropped.png, 352×1024 ratio ≈ 0.344). Decorative wood
   s painted slotmi: minimap window navrchu, MENU button pod ním, veľký
   sundial pre daylight, dva drevené sudky pre resources.
   Slot pozície (% image space) — CSS percent positioning sedí pri akejkoľvek
   veľkosti panelu (`background-size: 100% 100%` stretchne image proporcionálne). */
.top-panel {
  position: absolute;
  left: -45px;             /* bleed cez ľavý okraj — wood ostáva mimo viewportu */
  height: 100vh;
  max-height: 950px;
  aspect-ratio: 352 / 1024;
  background-image: url('data/art/ui/main-panel-cropped.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: var(--z-ui-base);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}
.top-panel > * { pointer-events: auto; }

/* Resources — 2 drevené sudky bok pri boku, pod sundial-om. */
.top-panel .resources-bar {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.top-panel .resource-pill {
  position: absolute;
  top: 51.8%;
  width: 19.9%;
  height: 9.8%;
  background: none;
  border: none;
  padding: 0;
  pointer-events: auto;
}
.top-panel .resource-pill[data-slot="0"] { left: 23.4%; }
.top-panel .resource-pill[data-slot="1"] { left: 24%; top: 66%; }
/* Slot 1 (plast) má vlastnú image veľkosť/offset — väčšia ikona honeycomb. */
.top-panel .resource-pill[data-slot="1"] .resource-img {
  width: 166%;
  top: 38%;
  left: 42%;
}
.top-panel .resource-pill .resource-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
/* Count number sa renderuje napravo v drevenom label-i (presné pozície ladia
   per-slot v `[data-slot=N] .resource-count` overrides nižšie). */
.top-panel .resource-pill .resource-count {
  position: absolute;
  left: 169%;
  top: 44%;
  transform: translateY(-50%);
  font-size: 37px;
  font-weight: 800;
  color: #f0e8d0;
  text-shadow: 0 2px 3px #000, 0 0 6px rgba(0, 0, 0, 0.9);
  line-height: 1;
  letter-spacing: 1px;
}

/* Hero portrait — kruh v sundial slote. Click → hero selector (ak >1 odomknutý).
   --hero-glow je per-hero farba (HEROES[id].glow_color). */
.top-panel .map-hero-badge {
  position: absolute;
  left: 18.7%;
  top: 24%;
  width: 62.5%;
  height: 21.5%;
  border-radius: 50%;
  border: 3px solid var(--hero-glow, #c0c0c0);
  background-color: #1a1208;
  background-size: 180% auto;            /* zoom na tvár — portréty majú hlavu hore */
  background-position: center 12%;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.7),
    0 0 12px var(--hero-glow, #c0c0c0),
    0 4px 10px rgba(0, 0, 0, 0.6);
  padding: 0;
  cursor: default;
  transition: filter 0.15s, transform 0.1s, box-shadow 0.2s;
}
.top-panel .map-hero-badge.clickable { cursor: pointer; }
.top-panel .map-hero-badge.clickable:hover {
  filter: brightness(1.18);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.7),
    0 0 22px var(--hero-glow, #c0c0c0),
    0 0 40px var(--hero-glow, #c0c0c0),
    0 4px 12px rgba(0, 0, 0, 0.6);
}
.top-panel .map-hero-badge.clickable:active { transform: scale(0.96); }

/* Inventár ikona — kruhová, visí na bottom-left rohu hero badge. Vizuálne
   indikuje že tento konkrétny hrdina má svoj per-hero inventár. */
.top-panel .map-inventory-btn {
  position: absolute;
  /* Hero badge: left 18.7%, top 24%, width 62.5%, height 21.5%.
     Visí na bottom-right rohu badge — indikuje per-hero inventár. */
  left: 67%;
  top: 43%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 65%;
  border: 2px solid #5a4a30;
  background-color: #1a1208;
  background-size: 95% auto;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 0;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.7);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.2s, filter 0.15s;
}
.top-panel .map-inventory-btn:hover {
  border-color: #d2a24c;
  box-shadow:
    inset 0 0 18px rgba(255, 213, 120, 0.75),
    inset 0 0 6px rgba(255, 230, 160, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.7);
}
/* Stlačenie — vnútorný obrázok sa zmrští, kruhový rám zostáva. */
.top-panel .map-inventory-btn:active {
  background-size: 80% auto;
  box-shadow:
    inset 0 0 22px rgba(255, 213, 120, 0.85),
    inset 0 0 8px rgba(255, 230, 160, 0.6),
    0 2px 5px rgba(0, 0, 0, 0.7);
}
/* Unseen = pulzujúci glow vo farbe hrdinu, ťahá oko k inventáru. Outer + inner pulse. */
.top-panel .map-inventory-btn.unseen {
  border-color: var(--hero-glow, #d2a24c);
  animation: inv-unseen-pulse 1.8s ease-in-out infinite;
}
.top-panel .map-inventory-btn.unseen:hover {
  animation: none;
  border-color: #ffe28a;
  box-shadow:
    inset 0 0 22px var(--hero-glow, rgba(255, 213, 120, 0.9)),
    inset 0 0 8px rgba(255, 230, 160, 0.7),
    0 0 22px var(--hero-glow, rgba(255, 213, 120, 0.9)),
    0 3px 8px rgba(0, 0, 0, 0.7);
}
@keyframes inv-unseen-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 8px rgba(0, 0, 0, 0.5),
      0 0 6px var(--hero-glow, rgba(255, 213, 120, 0.4)),
      0 3px 8px rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow:
      inset 0 0 14px var(--hero-glow, rgba(255, 213, 120, 0.55)),
      inset 0 0 6px rgba(0, 0, 0, 0.4),
      0 0 18px var(--hero-glow, rgba(255, 213, 120, 0.85)),
      0 3px 10px rgba(0, 0, 0, 0.7);
  }
}

/* Mini card v "nové karty v inventári" modale — art tile + meno pod ním. */
.reward-card-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 130px;
}
.reward-card-mini .rcm-art {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  border: 2px solid #6a4a28;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
.reward-card-mini .rcm-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #f4ecd4;
  text-align: center;
  text-shadow: 0 2px 3px #000;
  letter-spacing: 0.5px;
}

/* Mini resource v reward modale (plast / bylinka). Parita s .reward-card-mini. */
.reward-resources {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 40px 0 18px;
}
.reward-resource-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 110px;
  padding: 12px 8px;
  background: linear-gradient(160deg, #2a1f10 0%, #1a1208 100%);
  border: 2px solid #6a4a28;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
.reward-resource-mini .rrm-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reward-resource-mini .rrm-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.reward-resource-mini .rrm-icon-emoji {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.reward-resource-mini .rrm-amount {
  font-size: 28px;
  font-weight: 800;
  color: #ffd54a;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  font-family: 'Cinzel', serif;
}
.reward-resource-mini .rrm-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #f4ecd4;
  text-align: center;
  text-shadow: 0 2px 3px #000;
  letter-spacing: 0.5px;
}

/* Text indikátor časti dňa — top-center mapy. Bez ikon, len phase name. */
.map-dayphase {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  pointer-events: none;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f4ecd4;
  text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 0, 0, 0.85);
  user-select: none;
}

/* Menu button — wooden tablet hneď pod minimap-om. Hnedý solid background prepíše
   "MENU" placeholder text v PNG bg. */
.top-menu-btn {
  position: absolute;
  left: 16.5%;
  top: 18.6%;
  width: 22.2%;
  height: 3.1%;
  background: #4a2d18;
  border: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #f0e8d0;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.85);
  cursor: pointer;
  transition: transform 0.1s, color 0.15s, background 0.15s;
  text-transform: uppercase;
}
.top-menu-btn:hover { color: #ffd54a; background: #5c3a1f; transform: scale(1.05); }
.top-menu-btn:active { transform: scale(0.95); }

/* Permanentná mini-mapa — sedí v rectangular slote navrchu vertical panel-u
   (drevený lip + green map mock v PNG, naša minimap canvas overlay pretláča). */
.top-panel .minimap {
  position: absolute;
  top: 1.9%;
  left: 17.7%;
  width: 57.5%;
  height: 15.7%;
  background: #1a1208;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.minimap-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.minimap-hotspot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #d2a24c;            /* default zlatý — actionable (trade / dialog / ? / recruit) */
  border: 1px solid #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
.minimap-hotspot.done       { background: #6a6a6a; }   /* sivý — visited/done, žiadna ďalšia akcia */
.minimap-hotspot.aggressive { background: #cc4444; animation: minimap-hotspot-pulse 1.2s ease-in-out infinite; }
.minimap-hotspot.boss {
  background: #ffd54a;
  width: 10px;
  height: 10px;
  border-color: #6b4423;
  animation: minimap-boss-pulse 1.6s ease-in-out infinite;
}
@keyframes minimap-hotspot-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(204, 68, 68, 0.6); }
  50%      { box-shadow: 0 0 10px rgba(255, 80, 80, 1); }
}
@keyframes minimap-boss-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 213, 74, 0.7); }
  50%      { box-shadow: 0 0 14px rgba(255, 230, 130, 1); }
}
.minimap-avatar {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--mm-marker-color, #c0c0c0);
  border: 1.5px solid #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 6px var(--mm-marker-color, #c0c0c0), 0 0 12px var(--mm-marker-color, #c0c0c0);
}
.map-overlay-header > * { pointer-events: auto; }
.map-overlay-header h2 {
  color: #ffd54a;
  font-size: 22px;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 1), 0 0 12px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 14px;
  border-radius: 4px;
}

/* Resources bar — pilulky (plast + bylinka). Default kompaktné s pozadím
   (používané napr. v trade header). Map header override nižšie — transparent + 2×. */
.resources-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid #5a4a30;
  border-radius: 18px;
  padding: 4px 12px 4px 8px;
  color: #f0e8d0;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  cursor: help;
}
.resource-icon {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* PNG variant — `_renderResourceIcon` použije .resource-img keď je `art` field set. */
.resource-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  vertical-align: middle;
}
.resource-img.price-icon { width: 22px; height: 22px; }
.resource-img.reward-icon-img { width: 64px; height: 64px; }

/* Map header override — žiadne pozadie, ~2× velkosť ikon/textu. */
.map-overlay-header .resources-bar { gap: 22px; }
.map-overlay-header .resource-pill {
  background: transparent;
  border: none;
  padding: 0;
  gap: 10px;
  font-size: 28px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 0.85);
}
.map-overlay-header .resource-icon {
  font-size: 40px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}
.map-overlay-header .resource-img {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}
.resource-count {
  min-width: 18px;
  text-align: right;
  color: #ffd54a;
}

/* Hotspot — mini-karta na mape pre encounter. */
.map-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /* z-index dynamic inline = Y-sort vs occluder sprites.
     Aggressive hotspots pohybuje cez RAF (per-frame), žiadne CSS transition. */
}
/* Fade-in / fade-out — appear / disappear animácie. Hotspot pribudne keď
   vyjde z fog-of-war, alebo rotating NPC (pavúčica) sa zjaví v inom denom okne,
   alebo quest step advance odomkne nový pin. Hotspot zmizne pri vanishes_on_win
   alebo keď chapter/quest gate prestane platiť. */
.map-hotspot.hotspot-fade-in {
  animation: hotspotFadeIn 600ms ease-out forwards;
}
.map-hotspot.hotspot-fade-out {
  animation: hotspotFadeOut 600ms ease-in forwards;
  pointer-events: none;   /* žiadny klik počas fade-out aby sa neviedol na unstable state */
}
@keyframes hotspotFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hotspotFadeOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}
/* Card flip — mystery "?" pin sa otočí a odhalí real art pri discovery.
   Dve fázy: scaleX 1→0 (collapse, 150ms ease-in) → JS swap DOM → scaleX 0→1
   (expand, 150ms ease-out). Translate -50% -50% pre center anchor sa zachová
   cez celý animation. forwards fill drží scaleX(0) cez frame swap-u, inak by
   pin "blikol" pri full scale medzi koncom collapse a začiatkom expand. */
.map-hotspot.hotspot-flip-collapse {
  animation: hotspotFlipCollapse 150ms ease-in forwards;
}
.map-hotspot.hotspot-flip-expand {
  animation: hotspotFlipExpand 150ms ease-out;
}
@keyframes hotspotFlipCollapse {
  from { transform: translate(-50%, -50%) scaleX(1); }
  to   { transform: translate(-50%, -50%) scaleX(0); }
}
@keyframes hotspotFlipExpand {
  from { transform: translate(-50%, -50%) scaleX(0); }
  to   { transform: translate(-50%, -50%) scaleX(1); }
}
/* Aggressive hotspot — červený glow okolo pin-u, naznačuje že prenasleduje. */
.map-hotspot.aggressive .hotspot-pin {
  animation: aggressive-pulse 1.2s ease-in-out infinite;
}
@keyframes aggressive-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(220, 60, 60, 0.7), 0 0 28px rgba(220, 60, 60, 0.4); }
  50%      { box-shadow: 0 0 28px rgba(255, 80, 80, 1),   0 0 48px rgba(255, 80, 80, 0.7); }
}
/* Triggered windup — 1s pred chase. Silný červený border + glow + shake. Override-uje
   idle aggressive-pulse animáciu (priority cez !important nepotrebné — táto trieda
   sa pridáva atomically v _triggerAggressive a odoberá v _chaseTriggered/_catch/_stop). */
.map-hotspot.triggered-windup .hotspot-pin {
  border-color: #ff3030;
  border-width: 3px;
  box-shadow:
    0 0 18px rgba(255, 50, 50, 1),
    0 0 36px rgba(255, 50, 50, 0.75),
    inset 0 0 12px rgba(255, 80, 80, 0.6);
  animation: hotspot-windup-shake 0.32s ease-in-out infinite;
}
@keyframes hotspot-windup-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2px, 1px); }
  50%      { transform: translate(2px, -1px); }
  75%      { transform: translate(-1px, 2px); }
}
.hotspot-pin {
  width: 64px;
  height: 90px;
  border-radius: 6px;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  border: 2px solid #5a4a30;
  position: relative;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.hotspot-art {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}
.hotspot-icon {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: rgba(20, 15, 10, 0.95);
  border: 2px solid #d2a24c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffd54a;
}
/* Quest marker — aktívny quest step ukazuje na tento hotspot ("tu pokračuj").
   Zlatý glow + pulse. Auto-derived z _getActiveQuestMarkerIndices. Paralelne
   môže byť aktívnych viac questov → viac hotspotov s touto triedou naraz. */
.map-hotspot.quest-marker .hotspot-pin {
  border-color: #d2a24c;
  box-shadow: 0 0 24px rgba(210, 162, 76, 0.85), 0 0 40px rgba(210, 162, 76, 0.4);
  animation: hotspot-pulse 1.6s ease-in-out infinite;
}
.map-hotspot.quest-marker:hover .hotspot-pin {
  transform: scale(1.12);
  box-shadow: 0 0 36px rgba(210, 162, 76, 1);
}
@keyframes hotspot-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(210, 162, 76, 0.7), 0 0 32px rgba(210, 162, 76, 0.35); }
  50%      { box-shadow: 0 0 32px rgba(255, 213, 74, 1), 0 0 52px rgba(255, 213, 74, 0.55); }
}
/* Map bubble — passive in-world chatter nad hotspotom. Lightweight alternatíva
   k full dialog overlay-u (laň hovorí "Pomoc!", signpost text, atmospheric whisper).
   Sedí cez pin, drobne plynie (subtle bob), žiadny pointer-event (neblokuje click). */
.hotspot-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: rgba(28, 24, 18, 0.88);
  border: 1px solid rgba(210, 162, 76, 0.6);
  border-radius: 10px;
  padding: 6px 12px;
  color: #f0e3c2;
  font-style: italic;
  font-size: 13px;
  line-height: 1.3;
  max-width: 220px;
  white-space: pre-wrap;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  animation: hotspot-bubble-bob 4s ease-in-out infinite;
}
.hotspot-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgba(28, 24, 18, 0.88);
  border-right: 1px solid rgba(210, 162, 76, 0.6);
  border-bottom: 1px solid rgba(210, 162, 76, 0.6);
}
@keyframes hotspot-bubble-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.map-hotspot.done .hotspot-pin {
  border-color: #3a8030;
  filter: grayscale(0.6) brightness(0.7);
  cursor: default;
}
.map-hotspot.done .hotspot-icon { color: #88dd6e; border-color: #3a8030; }

/* Transformed = po porazení sa zmenil na inú interakciu (dialog, trade, ...).
   Stále plne vizibilný a clickable, s teplou žiarou pre rozlíšenie od current/done. */
.map-hotspot.transformed .hotspot-pin {
  border-color: #c89045;
  box-shadow: 0 0 18px rgba(200, 144, 69, 0.7), 0 0 32px rgba(200, 144, 69, 0.35);
  cursor: pointer;
}
.map-hotspot.transformed:hover .hotspot-pin {
  transform: scale(1.1);
  box-shadow: 0 0 28px rgba(230, 175, 90, 1);
}
.map-hotspot.transformed .hotspot-icon { color: #ffe0a0; border-color: #c89045; }
.map-hotspot.locked .hotspot-pin {
  filter: grayscale(0.8) brightness(0.45);
  cursor: not-allowed;
}
.map-hotspot.locked .hotspot-icon { color: #999; border-color: #555; }

/* Hover feedback — "hra vidí, že ukazuješ na hotspot". Subtle warm-white glow + scale
   pre plain hotspoty bez vlastného variant-specific hover-u. Vylúčené:
     - .locked (cursor not-allowed, nedostupné)
     - .done bez .transformed (inert, cursor default)
     - .current / .transformed (majú vlastnú farbu glow-u — gold / amber)
   Aggressive / in-danger / triggered-windup ostávajú prebíjané pulse animáciou;
   na hover ich box-shadow zamrzne na hover style — silnejší tell než idle pulse. */
.map-hotspot:hover:not(.locked):not(.done):not(.current):not(.transformed) .hotspot-pin {
  transform: scale(1.08);
  box-shadow:
    0 0 22px rgba(255, 240, 200, 0.7),
    0 0 40px rgba(255, 240, 200, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.6);
}

/* In-danger — pre-combat tell pre hotspot, párovaný s .map-avatar.in-danger.
   3s pulzujúci červený glow tesne pred startom combatu (po dialogu / po chase).
   Musí byť ZA všetkými variant štýlmi (.current, .transformed, .done, .locked)
   aby v source-order cascade vyhral (rovnaká špecificita, posledný blok vyhráva).
   `border-color: #ff3030 !important` lebo niektoré variant rules už set-li
   border-color v skoršom bloku — !important garantuje override bez ďalšieho
   bumpovania špecificity. */
.map-hotspot.in-danger .hotspot-pin {
  border-color: #ff3030 !important;
  animation: hotspot-danger-pulse 1.0s ease-in-out infinite;
}
@keyframes hotspot-danger-pulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(255, 50, 50, 0.7),
      0 0 36px rgba(255, 50, 50, 0.4),
      inset 0 0 8px rgba(255, 80, 80, 0.4);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 50, 50, 1),
      0 0 60px rgba(255, 50, 50, 0.8),
      inset 0 0 16px rgba(255, 80, 80, 0.7);
  }
}

/* Mystery icon — väčší otáznik ako badge (legacy, pre hotspoty čo majú aj art).
   Nemení border-color hotspotu, len enlarges ikonu. */
.hotspot-icon.mystery {
  width: 32px;
  height: 32px;
  font-size: 22px;
  color: #ffd54a;
  border-color: #d2a24c;
  bottom: -10px;
  right: -10px;
}

/* Mystery pin — žiadny art, len veľký centered "?". Pin pozadie tmavé, aby otáznik
   vystúpil. Hráč nevie čo ho čaká, ide len explorácia. */
.hotspot-pin.mystery-pin {
  background: linear-gradient(160deg, #2a1f10 0%, #14080a 100%);
}
.hotspot-mystery {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 56px;
  font-weight: 800;
  color: #d2a24c;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8);
  letter-spacing: -2px;
  animation: mystery-glow 2.4s ease-in-out infinite;
}
@keyframes mystery-glow {
  0%, 100% { color: #d2a24c; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8); }
  50%      { color: #ffd54a; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 24px rgba(255, 213, 74, 0.6); }
}

/* Trap snap effect — pri klike na lišiakov hotspot. Hotspot shake + full-screen
   red flash + textový banner. */
.map-hotspot.trap-snap-shake {
  animation: trap-snap-shake 600ms ease-in-out 2;
}
@keyframes trap-snap-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  20% { transform: translate(calc(-50% + 5px), calc(-50% - 3px)) rotate(-3deg); }
  40% { transform: translate(calc(-50% - 5px), calc(-50% + 3px)) rotate(3deg); }
  60% { transform: translate(calc(-50% + 4px), calc(-50% - 2px)) rotate(-2deg); }
  80% { transform: translate(calc(-50% - 4px), calc(-50% + 2px)) rotate(2deg); }
}
.trap-snap-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(180, 30, 30, 0.6) 0%, rgba(80, 10, 10, 0.3) 50%, transparent 80%);
  pointer-events: none;
  z-index: var(--z-event-banners);
  animation: trap-snap-flash 1100ms ease-out forwards;
}
@keyframes trap-snap-flash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}
.trap-snap-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: 800;
  color: #ff6e6e;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.95), 0 0 24px rgba(255, 60, 60, 0.7);
  letter-spacing: 2px;
  pointer-events: none;
  z-index: calc(var(--z-event-banners) + 1);   /* nad trap-snap-flash o 1 */
  animation: trap-snap-banner 1100ms ease-out forwards;
}
@keyframes trap-snap-banner {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

/* Reinforcement arrival — banner "📯 Prichádza X" + companion card slide-in.
   Banner fade+slide from top center, card glow+scale on board slot. */
.reinforcement-banner {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-30px);
  background: linear-gradient(135deg, rgba(60, 40, 18, 0.95), rgba(90, 60, 26, 0.95));
  border: 2px solid #d4a857;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 28px;
  font-weight: 600;
  color: #f5e1a0;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 24px rgba(212, 168, 87, 0.6), 0 4px 16px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: var(--z-event-banners);
  opacity: 0;
  transition: opacity 350ms ease-out, transform 350ms ease-out;
  display: flex;
  align-items: center;
  gap: 14px;
}
.reinforcement-banner--in {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
.reinforcement-icon {
  font-size: 36px;
  filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.8));
}

/* Card slide-in z off-screen (opponent = hore obrazovky). 3 phases:
   - 0-50%: slide from -220% → 0 + golden glow ramp + scale 0.85→1.1
   - 50-80%: hold at slot, peak glow
   - 80-100%: settle to final scale, glow fades
   ease-out cubic-bezier dráma — fast initial drop, slow arrival. */
@keyframes reinforcement-spawn-in-anim {
  0%   {
    opacity: 0;
    transform: translateY(-220%) scale(0.85);
    filter: drop-shadow(0 0 0 transparent);
  }
  20%  {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(255, 210, 100, 0.8));
  }
  55%  {
    opacity: 1;
    transform: translateY(0) scale(1.12);
    filter: drop-shadow(0 0 22px rgba(255, 210, 100, 1.0));
  }
  75%  {
    transform: translateY(0) scale(1.12);
    filter: drop-shadow(0 0 22px rgba(255, 210, 100, 1.0));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
}
.board-card.reinforcement-spawn-in {
  animation: reinforcement-spawn-in-anim 3000ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;   /* nad ostatné cards počas slide-in aby neostal za occluderom */
}

/* ===== Generic tooltip (tooltip.js) ===== */
/* Singleton floating tooltip — mount raz na document.body, JSON API cez data-tt
   atribút. Pozícia + visibility riadi tooltip.js. Wood/gold lore look. */
:root {
  --tt-max-width: 320px;
}
.tooltip-floating {
  position: fixed;
  max-width: var(--tt-max-width);
  background: rgba(10, 8, 5, 0.97);
  border: 1px solid #5a4a30;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  color: #ddd;
  line-height: 1.4;
  z-index: var(--z-top);
  pointer-events: none;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
  animation: card-preview-fade 0.12s ease-out;
}
.tooltip-floating .tt-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #d2a24c;
  font-size: 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tooltip-floating .tt-desc {
  font-size: 14px;
  color: #c8c0a8;
  line-height: 1.4;
}
.tooltip-floating .tt-cost {
  font-size: 12px;
  font-weight: 700;
  color: #ffd54a;
  background: linear-gradient(180deg, #3a5fae, #1a2a5a);
  border: 1px solid #0f1a3a;
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}
.tooltip-floating .tt-wearables {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(210, 162, 76, 0.4);
}
.tooltip-floating .tt-wearable {
  font-size: 13px;
  color: #c8b890;
  margin-top: 4px;
  line-height: 1.3;
}
.tooltip-floating .tt-wearable-slot {
  display: inline-block;
  min-width: 48px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a7a55;
  margin-right: 4px;
}
.tooltip-floating .tt-wearable-name {
  font-weight: 700;
  color: #d2a24c;
}
/* Large variant — pre hotspot pin tooltipy (mapa). Bohatý vizuál, vysoký
   čitateľný font, gold border na zvýraznenie. */
.tooltip-floating.size-large {
  max-width: 600px;
  padding: 18px 24px;
  border-color: #d2a24c;
}
.tooltip-floating.size-large .tt-name { font-size: 32px; color: #ffd54a; margin-bottom: 8px; }
.tooltip-floating.size-large .tt-desc { font-size: 26px; color: #ccc; line-height: 1.4; }

/* Discovery popup — banner pri prvom objavení hotspotu. */
.discovery-popup {
  position: fixed;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 8, 5, 0.95);
  border: 2px solid #d2a24c;
  border-radius: 10px;
  padding: 16px 28px;
  text-align: center;
  z-index: var(--z-event-banners);
  pointer-events: none;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), 0 0 24px rgba(210, 162, 76, 0.5);
  animation: discovery-popup-anim 2800ms ease-out forwards;
}
.discovery-popup .discovery-title {
  font-size: 28px;
  font-weight: 700;
  color: #d2a24c;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.discovery-popup .discovery-name {
  font-size: 52px;
  font-weight: 800;
  color: #ffd54a;
  margin-bottom: 18px;
}
.discovery-popup .discovery-desc {
  font-size: 30px;
  color: #ccc;
  line-height: 1.4;
}
@keyframes discovery-popup-anim {
  0%   { opacity: 0; transform: translate(-50%, -65%) scale(0.85); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -45%) scale(1.02); }
}

/* Destination marker — pulsing + rotating zlatý prerušovaný kruh kde hrdina ide.
   Zmizne pri arrival. Spawnúť LEN ak je cieľ priechodný (hotspoty bypass-ujú mask). */
/* Destination marker — SVG elipsa (~2:1) v izometrickej perspektíve (ploché kruhové
   políčko na zemi). Pulse scale na celom svg + flow dashes po obvode elipsy.
   Trojvrstvový rendering pre čitateľnosť na komplexnom map_art:
     1. dark backdrop stroke (širší, plný) — kontrast voči svetlému pozadiu
     2. bright dashed stroke (užší, tečúce čiarky) — primárny indikátor
     3. drop-shadow halo (3× layer) — glow okolo všetkého */
.dest-marker {
  position: absolute;
  pointer-events: none;
  z-index: 8;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 8px var(--marker-color, #c0c0c0))
          drop-shadow(0 0 18px var(--marker-color, #c0c0c0));
  animation: dest-marker-pulse 1.2s ease-in-out infinite;
  overflow: visible;
}
.dest-marker-shadow {
  fill: none;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 5;
  stroke-linecap: round;
}
.dest-marker-ellipse {
  fill: none;
  stroke: var(--marker-color, #c0c0c0);
  stroke-width: 3;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  animation: dest-marker-flow 1.6s linear infinite;
}
@keyframes dest-marker-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
  50%      { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
}
@keyframes dest-marker-flow {
  to { stroke-dashoffset: -32; }   /* obvod ~71 px, -32 = ~4 dash periody (3+5=8) */
}

/* Hrdina avatar — mini-karta hrdinu, smooth walking cez CSS transition.
   z-index sa nastavuje dynamicky inline = 10 + floor(y/32) → Y-sort vs occluders. */
.map-avatar {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 84px;
  border-radius: 6px;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--hero-glow, #c0c0c0);
  box-shadow:
    0 0 16px var(--hero-glow, #c0c0c0),
    0 4px 12px rgba(0, 0, 0, 0.75);
  z-index: 9;  /* fallback ak inline nie je nastavený; reálny render má inline z 10-99 */
  cursor: pointer;
  transition: left 800ms ease-in-out, top 800ms ease-in-out;
}
.map-avatar:hover {
  filter: brightness(1.12) drop-shadow(0 0 14px var(--hero-glow, #c0c0c0));
}
/* In-danger — pre-combat tell pred aggressive encounter-om. Iba pulzujúci
   červený glow, žiadny shake (centrovací transform: translate(-50%, -50%)
   ostáva nedotknutý — pulz beží na box-shadow, nie na transforme). */
.map-avatar.in-danger {
  border-color: #ff3030;
  animation: avatar-danger-pulse 1.0s ease-in-out infinite;
}
@keyframes avatar-danger-pulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(255, 50, 50, 0.7),
      0 0 36px rgba(255, 50, 50, 0.4),
      inset 0 0 8px rgba(255, 80, 80, 0.4);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 50, 50, 1),
      0 0 60px rgba(255, 50, 50, 0.8),
      inset 0 0 16px rgba(255, 80, 80, 0.7);
  }
}

/* Occluder = strip / sprite ktorý môže prekrývať avatara podľa y-sortu.
   Inline left/top/width/height + z-index = 10 + floor(anchor_y/32). */
.map-occluder {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Day/Night tint overlay nad celým map-canvas (z=100 — nad occluder/avatar dynamickými
   z=10-99, pod header z=100 outside .map-canvas).
   `mix-blend-mode: multiply` tintuje vrstvy pod ním podľa farby (white = no-op,
   tmavá modrá v noci stmaví scénu). Background-color sa nastavuje inline z JS. */
.daynight-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: background-color 0.6s linear;
}

/* Fire glow — radial gradient na pozícii ohňa. Z-index 105 = nad daynight tintom,
   takže v noci "presvietime" cez tmu. mix-blend-mode: screen aditívne brightne
   čo je pod ním. Opacity škálovaná cez --fire-glow-opacity (0 cez deň, ~1 v noci).
   Jemná flicker animácia cez scale + brightness. */
.map-fire-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  /* Mäkký glow — nízka peak alpha + zrýchlený exp-style falloff + blur na okrajoch.
     Cieľ: kruh sa "rozpustí" do pozadia, žiadny viditeľný rim. */
  background: radial-gradient(circle at center,
    rgba(255, 210, 130, 0.55) 0%,
    rgba(255, 170,  70, 0.40) 15%,
    rgba(255, 130,  40, 0.22) 35%,
    rgba(240, 100,  25, 0.10) 55%,
    rgba(220,  80,  15, 0.03) 78%,
    transparent               100%);
  mix-blend-mode: screen;
  opacity: calc(var(--fire-glow-opacity, 0) * 1);
  z-index: 105;
  transition: opacity 0.6s linear;
  /* Blur + flicker je v keyframes (filter sa nedá splittovať na 2 properties) */
  animation: fire-glow-flicker 2.6s ease-in-out infinite alternate;
  will-change: transform, filter;
}
@keyframes fire-glow-flicker {
  /* Kontinuálny pulz — jasne viditeľný, ale stále mäkký. Brightness 0.78-1.18,
     scale 0.93-1.07, blur sa mierne mení aby pulz pôsobil "živo". */
  0%   { transform: scale(0.93); filter: blur(13px) brightness(0.78); }
  35%  { transform: scale(1.05); filter: blur(15px) brightness(1.18); }
  62%  { transform: scale(0.98); filter: blur(14px) brightness(0.90); }
  100% { transform: scale(1.04); filter: blur(16px) brightness(1.10); }
}
/* Terrain zone overlay — radial-gradient kruh na mape (Močiar, Víchor...). Z-index
   je medzi map background a occluders (occluders sú z-indexované cez yToZ a sú vyššie).
   pointer-events: none — neblokuje hotspot/avatar clicky. Subtle pulse animácia
   pre vetcie zóny dáva pocit živého prostredia. */
.terrain-zone {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: multiply;
  z-index: 3;
  animation: terrain-zone-pulse 5.5s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes terrain-zone-pulse {
  0%   { opacity: 0.85; transform: scale(0.97); }
  100% { opacity: 1.0;  transform: scale(1.03); }
}
/* Víchor — svetlejší overlay potrebuje aditívne miešanie aby zostal viditeľný cez tmavú mapu.
   Plus animovaný "wind sweep" cez ::before pseudo — diagonálne striebristé streakové
   čiary plynúce cez celú zónu (mask radial → ostávajú vnútri kruhu).
   ::after = drobné particle drift (rýchlejšie, opačný smer) pre extra dynamiku. */
.terrain-zone[data-terrain="vichor"] {
  mix-blend-mode: screen;
}
.terrain-zone[data-terrain="vichor"]::before,
.terrain-zone[data-terrain="vichor"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, #fff 55%, transparent 80%);
          mask-image: radial-gradient(circle, #fff 55%, transparent 80%);
}
.terrain-zone[data-terrain="vichor"]::before {
  background-image: repeating-linear-gradient(115deg,
    transparent 0px,
    transparent 24px,
    rgba(220, 235, 255, 0.18) 26px,
    rgba(255, 255, 255, 0.34) 29px,
    rgba(220, 235, 255, 0.18) 32px,
    transparent 34px,
    transparent 70px);
  background-size: 260px 260px;
  animation: vichor-sweep 2.4s linear infinite;
}
.terrain-zone[data-terrain="vichor"]::after {
  background-image: repeating-linear-gradient(105deg,
    transparent 0px,
    transparent 60px,
    rgba(255, 255, 255, 0.22) 62px,
    rgba(255, 255, 255, 0.42) 64px,
    transparent 66px,
    transparent 130px);
  background-size: 420px 420px;
  animation: vichor-drift 1.4s linear infinite;
  opacity: 0.7;
}
@keyframes vichor-sweep {
  0%   { background-position: 0px 0px; }
  100% { background-position: 260px -150px; }
}
@keyframes vichor-drift {
  0%   { background-position: 0px 0px; }
  100% { background-position: 420px -200px; }
}

/* Combat tint cez body::before — paint MEDZI body bg image a body child elements.
   Multiply blend tintuje iba bg image; game-root (top-bar, board, hand) paint
   nad tint vrstvu normálne → karty zostávajú jasné aj v noci.
   z-index: -1 → CSS stacking layer 2 (positioned-negative), čo je medzi
   layer 1 (body bg) a layer 3 (static descendants ako game-root).
   --daynight-tint nastavuje JS v _renderDayNightOverlay (combat = current phase color,
   map = removed → default white = no-op). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: var(--daynight-tint, rgb(255, 255, 255));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
  transition: background-color 0.6s linear;
}

/* Terrain badge — environment efekt aktívny v boji (Močiar, Víchor...). Sedí
   štýlom s .daynight-tracker — kompaktný chip v top-bar. Tooltip = description.
   Map overlay (radial-gradient) má samostatné styly nižšie (.terrain-zone). */
.terrain-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(40, 35, 20, 0.88);
  border: 1px solid #7a6a40;
  border-radius: 6px;
  padding: 5px 10px;
  pointer-events: auto;
  color: #e6d8a0;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  cursor: help;
}
.terrain-badge-icon { font-size: 16px; line-height: 1; }
.terrain-badge-name { letter-spacing: 0.3px; }

/* Lišiakov "Bystrý zrak" — pasívna mapová schopnosť keď je Lišiak active hero.
   Tenký výrazný červený kruh okolo aggressive non-done hotspotov, polomer = engine
   aggro_range. Žiadny fill (čistý radar look). Pomalý opacity pulse (3.6s) +
   slight box-shadow glow pre viditeľnosť cez fog/dark phases. */
.fox-fov-ring {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid #e23030;
  box-shadow: 0 0 6px rgba(226, 48, 48, 0.55),
              inset 0 0 4px rgba(226, 48, 48, 0.35);
  z-index: 4;  /* nad terrain-zone (3), pod occluders/hotspots */
  animation: fox-fov-pulse 3.6s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes fox-fov-pulse {
  0%   { opacity: 0.55; transform: scale(0.985); }
  100% { opacity: 1.00; transform: scale(1.015); }
}

/* ===== Map ambient particle FX (ui-map-fx.js) =====
   Layer = absolutný container vo vnútri .map-canvas; particles sú malé divy
   s inline left/top/transform/opacity/z-index. Layer sa nemiesi do hotspot/avatar
   click flow (pointer-events:none). Z-index per particle určuje JS (smoke/bubble
   na _yToZ emitter+1, leaves z=99 pre over-tree feel). */
.map-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* No own z-index — particles ho prepisujú inline. */
}
.map-fx-particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}
.map-fx-smoke {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(245, 240, 230, 0.85) 0%,
    rgba(220, 215, 205, 0.55) 35%,
    rgba(180, 175, 165, 0.20) 70%,
    transparent 100%);
  filter: blur(3px);
  mix-blend-mode: screen;
}
.map-fx-bubble {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(170, 130, 80, 0.70) 0%,
    rgba(115, 80, 45, 0.50) 55%,
    rgba(65, 40, 20, 0.25) 100%);
  box-shadow: inset 0 0 4px rgba(220, 190, 140, 0.30);
}
/* Gas — väčší a tmavší než smoke, tmavošedý cloud. Source-over blend (default,
   sit-on-top) — multiply na green forest pozadí mizivý kontrast. Filter:blur
   zmäkčuje hrany, vznikne "rolling smoke" feel. Inline transform: scale(...)
   škáluje cez lifetime z `_renderGas`. */
.map-fx-gas {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(195, 200, 200, 0.90) 0%,
    rgba(170, 175, 175, 0.70) 40%,
    rgba(140, 145, 145, 0.35) 75%,
    transparent 100%);
  filter: blur(10px);
}
.map-fx-leaf {
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
}
/* Cloud — biele puffy clouds drift-ujúce horizontálne. Veľký radial gradient
   + silnejší blur než gas pre soft cloud feel. Scale a opacity sú v inline
   transform/opacity z _renderCloud (lifetime envelope). */
.map-fx-cloud {
  width: 240px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(245, 245, 250, 0.75) 35%,
    rgba(220, 225, 235, 0.40) 65%,
    transparent 100%);
  filter: blur(14px);
}

/* Firefly — biely hot 1px core + 4-vrstvový zelený glow halo cez box-shadow.
   White center pôsobí ako svetelný bod (bioluminescent), zelená je bloom okolo.
   DOM box 2px (perceived 1px na retina). Pulse opacity v JS na celý element. */
.map-fx-firefly {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 1px 0 rgba(220, 255, 200, 0.98),
    0 0 3px 1px rgba(120, 255, 120, 0.85),
    0 0 7px 2px rgba(60, 220, 60, 0.45),
    0 0 14px 4px rgba(30, 180, 30, 0.18);
}

/* Viewport-locked FX layer — leaves padajú "cez kameru", nie cez svet.
   `position: fixed` + attached na document.body (mimo #game-root) — prežije
   _renderMap rebuild root.innerHTML, takže listy v lete sa nezresetujú pri
   ľubovoľnom re-render-i (discovery modal, dialog open, atď). */
.viewport-fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;        /* nad map-canvas (default 0), pod top-panel (--z-ui-base 150) */
}

/* Mud vignette — viewport overlay aktívny v močiari. Hnedý radial gradient
   pokrýva ~1/3 z každej strany (closest-side stop @ 33% = transition začne na
   1/3 vzdialenosti od stredu k najbližšej hrane → mid 1/3 viewportu clear, vonkajšie
   1/3 hnedá s rastúcou intenzitou). Opacity controlled per-tick (smooth ease).
   `position: fixed` na body z rovnakého dôvodu ako viewport-fx-layer. */
.mud-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;         /* tesne pod viewport-fx-layer — listy padajú nad mudom */
  opacity: 0;
  background: radial-gradient(
    ellipse closest-side at center,
    transparent 0%,
    transparent 33%,
    rgba(45, 28, 12, 0.65) 75%,
    rgba(20, 12, 5, 0.92) 100%
  );
}

/* Fog vignette — paralela k .mud-vignette ale sivá (hmla okolo ruín hradu).
   Rovnaký radial-gradient pattern, len neutral gray colors namiesto hnedých.
   Aktivuje sa keď hrdina je v 'hmla' terrain zóne (riadené z MapFX). */
.fog-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 94;         /* tesne pod mud-vignette (95) — len jedna je naraz active */
  opacity: 0;
  background: radial-gradient(
    ellipse closest-side at center,
    transparent 0%,
    transparent 33%,
    rgba(110, 110, 120, 0.55) 75%,
    rgba(55, 55, 65, 0.88) 100%
  );
}

/* Pre-combat terrain preview — banner v hornej časti dialog overlay. Plný popis
   inline (žiadny tooltip-only) — hráč vie čo ho čaká pred prvým klikom. */
.dialog-terrain-preview {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 80vw;
  padding: 8px 18px;
  background: rgba(30, 25, 15, 0.92);
  border: 1px solid #8a7a4a;
  border-radius: 8px;
  color: #f0e2b0;
  font-size: 14px;
  z-index: 20;
  pointer-events: auto;
  cursor: help;
}
.terrain-preview-label { font-weight: 700; color: #c9b878; }
.terrain-preview-name { font-weight: 700; color: #fff2c0; letter-spacing: 0.4px; }
.terrain-preview-desc { font-style: italic; opacity: 0.92; }

/* Day/Night tracker — kompaktný panel s emoji + názvom fázy + progress barom. */
.daynight-tracker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 15, 10, 0.85);
  border: 1px solid #5a4a30;
  border-radius: 6px;
  padding: 5px 10px;
  pointer-events: auto;
  color: #f0e8d0;
  font-size: 12px;
  font-weight: 600;
}
.dn-emoji { font-size: 16px; line-height: 1; }
.dn-name { min-width: 90px; }
.dn-bar {
  width: 90px;
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
}
.dn-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd54a, #d2a24c);
  transition: width 0.3s ease;
}

/* Map item — pickable consumable na mape (bylinka atď.). z=4 → pod fog
   (viditeľné len v revealed area). Pickup auto pri prejdení ~80px.
   Emoji variant = zelený kruh; sprite variant = priehľadný PNG bez ramčeka. */
.map-item {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 60, 30, 0.9);
  border: 2px solid #6abf4b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(106, 191, 75, 0.7),
              0 4px 10px rgba(0, 0, 0, 0.5);
  animation: map-item-pulse 2.4s ease-in-out infinite;
}
.map-item.map-item-sprite {
  /* Sprite varianta — bez ramčeka, len jemný glow zo sprite shadow. */
  width: 112px;
  height: 112px;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(106, 191, 75, 0.6))
          drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
  animation: map-item-sprite-pulse 2.4s ease-in-out infinite;
}
.map-item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
@keyframes map-item-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 14px rgba(106, 191, 75, 0.7), 0 4px 10px rgba(0, 0, 0, 0.5); }
  50%      { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 22px rgba(106, 191, 75, 1),   0 4px 14px rgba(0, 0, 0, 0.5); }
}
@keyframes map-item-sprite-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}

/* Aggressive trigger banner — keď hráč vstúpi do aggro range hotspotu. */
.aggressive-trigger-banner {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(80, 20, 20, 0.95);
  border: 2px solid #d04848;
  border-radius: 8px;
  padding: 10px 22px;
  color: #ffd4d4;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
  z-index: var(--z-stingers);
  animation: aggro-pulse 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aggro-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7); }
  50%      { transform: translateX(-50%) scale(1.04); box-shadow: 0 6px 32px rgba(208, 72, 72, 0.8); }
}

/* Item pickup popup — toast na vrchu obrazovky pri zozbieraní. */
.item-pickup-popup {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 50, 25, 0.95);
  border: 2px solid #6abf4b;
  border-radius: 10px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d8f5c4;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  z-index: var(--z-stingers);
  animation: item-pickup-pop 2.2s ease-out forwards;
}
.item-pickup-icon {
  font-size: 28px;
  display: flex;
  align-items: center;
}
.item-pickup-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
@keyframes item-pickup-pop {
  0%   { opacity: 0; transform: translate(-50%, -20px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* Combat items bar — vertikálny stĺpec na ľavej strane obrazovky. */
.items-bar {
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}
.item-slot {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20, 50, 25, 0.9);
  border: 2px solid #6abf4b;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.item-slot:hover:not(:disabled) {
  border-color: #a8e08c;
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(106, 191, 75, 0.8), 0 4px 12px rgba(0, 0, 0, 0.6);
}
.item-slot:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.item-slot-icon {
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-slot-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.item-slot-count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: #0a0604;
  border: 1px solid #6abf4b;
  color: #d8f5c4;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Walking path overlay — SVG dashed čiara s animovaným dash-flow.
   z=8 (nad fog z=7, pod avatar/occluder 10+). Body sa per-frame trimujú v RAF. */
.path-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}
.path-line {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 14;
  opacity: 0.95;
  animation: path-flow 0.9s linear infinite;
  /* stroke + filter sa nastavujú inline z hero glow_color v _injectActivePath. */
}
@keyframes path-flow {
  to { stroke-dashoffset: -20; }
}


/* Deck editor — full-screen modal s panelom. Backdrop má vysoký z-index aby
   prekryl mapu + UI header. */
.deck-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: var(--z-modals);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deck-editor-panel {
  width: min(90%, 880px);
  max-height: 88%;
  display: flex;
  flex-direction: column;
}
.deck-editor-header {
  position: relative;
  padding: 14px 18px;
  text-align: center;
}
.deck-editor-header h2 {
  margin: 0;
  font-size: 18px;
  color: #ffd54a;
}
/* Wooden close button — modal-close.png ako bg, press effect cez :active scale. */
.modal-close-btn {
  background: url('data/art/ui/modal-close.webp') center / contain no-repeat;
  border: none;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 0.08s ease-out, filter 0.12s ease-out;
}
.modal-close-btn:hover {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) brightness(1.12);
}
.modal-close-btn:active {
  transform: scale(0.86);
}
/* Pozičná varianta — top-right rohu padding-box modalu (vnútri dark area). */
.modal-close-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

/* Legacy alias pre už existujúce close button v deck-editor headeri.
   Kompozícia: .modal-close-btn dáva vizuál, override pre vertical center v headeri. */
.deck-editor-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: url('data/art/ui/modal-close.webp') center / contain no-repeat;
  border: none;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 0.08s ease-out, filter 0.12s ease-out;
}
.deck-editor-close:hover {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) brightness(1.12);
}
.deck-editor-close:active {
  transform: translateY(-50%) scale(0.86);
}
.deck-editor-empty {
  text-align: center;
  padding: 40px;
  color: #888;
  grid-column: 1 / -1;
}

/* Inventory = grid kariet (full-art tiles). Drag-source.
   In-deck tile = stmavená + nedraggable. */
/* Pager wrapper — arrowy po stranách + inventár v strede.
   Fixed 3 riadky, žiadny scroll; ďalšie karty cez page navigation. */
.deck-editor-pager {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px 4px;
}
.deck-editor-arrow {
  width: 40px;
  flex-shrink: 0;
  background: rgba(40, 28, 16, 0.6);
  border: 1px solid #5a4a30;
  color: #ffd54a;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.deck-editor-arrow:hover:not(:disabled) {
  border-color: #d2a24c;
  background: rgba(60, 44, 24, 0.75);
}
.deck-editor-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.deck-editor-page-indicator {
  text-align: center;
  font-size: 12px;
  color: #c8b890;
  padding: 4px 0 8px;
  letter-spacing: 1px;
}
.deck-editor-inventory {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
/* Placeholder cell — drží grid pozíciu (aspect-ratio) bez vizuálu. */
.deck-inv-placeholder {
  aspect-ratio: 9 / 13;
  pointer-events: none;
}
.deck-editor-inventory.drop-hover {
  background: rgba(40, 28, 16, 0.45);
}
.deck-inv-tile, .deck-slot-card {
  position: relative;
  aspect-ratio: 9 / 13;
  background-size: cover;
  background-position: center;
  background-color: #0a0604;
  border: 1px solid #5a4a30;
  border-radius: 4px;
  cursor: grab;
  user-select: none;
  overflow: hidden;
}
.deck-inv-tile:hover, .deck-slot-card:hover {
  border-color: #d2a24c;
  box-shadow: 0 0 10px rgba(210, 162, 76, 0.5);
}
.deck-inv-tile.in-deck {
  filter: brightness(0.3) saturate(0.3);
  cursor: not-allowed;
  /* pointer-events ostávajú aby fungoval hover preview;
     drag je zablokovaný cez `draggable="false"` na elemente. */
}
.deck-inv-tile.dragging, .deck-slot-card.dragging {
  opacity: 0.5;
}
.deck-tile-cost {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a0604;
  color: #ffd54a;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5a4a30;
}
.deck-tile-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 4px;
  font-size: 9px;
  font-weight: 600;
  color: #f0e8d0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Deck label nad slotmi. */
.deck-editor-deck-label {
  padding: 8px 14px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #d2a24c;
  text-align: center;
}

/* Pre-combat slot = prvá bunka deck gridu, podsvietená farbou hrdinu (--hero-glow
   inline style z renderera). Hero-specific auto-apply pred bojom — netvorí súčasť
   draw decku. Drop accept-uje len karty matching hero.precombat_slot_type. */
.deck-slot-precombat {
  border: 2px solid var(--hero-glow, #88c8ff);
  box-shadow:
    0 0 8px var(--hero-glow, rgba(136, 200, 255, 0.5)) inset,
    0 0 12px var(--hero-glow, rgba(136, 200, 255, 0.4));
}
.deck-slot-precombat.drop-hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 12px var(--hero-glow, rgba(136, 200, 255, 0.7)) inset,
    0 0 18px var(--hero-glow, rgba(136, 200, 255, 0.6));
}
.deck-slot-precombat.deck-slot-disabled {
  border-style: dashed;
  border-color: #5a4a30;
  box-shadow: none;
  opacity: 0.4;
}
.deck-slot-precombat-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hero-glow, #88c8ff);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  opacity: 0.75;
  pointer-events: none;
}
/* Inventory tiles ktoré sú v precombat slote — visually dimnuté ako in-deck. */
.deck-inv-tile.in-precombat {
  opacity: 0.35;
  filter: saturate(0.4);
  cursor: not-allowed;
}

/* Podpisová karta hrdinu — inner glow farbou hrdinu (--hero-glow inline).
   Aplikuje sa na inventory tile, deck slot card, hand card. Kombinácia inset +
   outer shadow zvýrazňuje kartu bez prebíjania artu. Z-index ostáva pôvodný. */
.card-signature {
  box-shadow:
    0 0 10px var(--hero-glow, #88c8ff) inset,
    0 0 8px var(--hero-glow, #88c8ff);
  border-color: var(--hero-glow, #88c8ff) !important;
}

/* Jednorazový "celebration" pulse pri pridaní karty do signature slotu.
   Glow vzplanie do intense, jemne zaprská a vráti sa na base. Trigger v
   _triggerSignaturePulse() — class sa pridá po renderi, setTimeout odstráni. */
@keyframes signature-pulse {
  0% {
    box-shadow:
      0 0 10px var(--hero-glow, #88c8ff) inset,
      0 0 8px var(--hero-glow, #88c8ff);
  }
  35% {
    box-shadow:
      0 0 32px var(--hero-glow, #88c8ff) inset,
      0 0 44px var(--hero-glow, #88c8ff),
      0 0 60px var(--hero-glow, #88c8ff);
  }
  100% {
    box-shadow:
      0 0 10px var(--hero-glow, #88c8ff) inset,
      0 0 8px var(--hero-glow, #88c8ff);
  }
}
.deck-slot-precombat.signature-pulse {
  animation: signature-pulse 1s ease-out;
}

/* Deck = fixný 10×2 grid slotov. Drop-target. */
.deck-editor-deck {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 6px;
  padding: 8px 14px 16px;
}
.deck-slot {
  aspect-ratio: 9 / 13;
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed #5a4a30;
  border-radius: 4px;
  position: relative;
}
.deck-slot.drop-hover {
  border-color: #ffd54a;
  border-style: solid;
  background: rgba(60, 44, 24, 0.7);
}
.deck-slot .deck-slot-card {
  position: absolute;
  inset: 0;
  border: 1px solid #5a4a30;
}

/* Floating card preview — zobrazí sa pri hover nad tile v deck editore.
   Pozícia sa nastavuje inline z JS (mimo modal stacking, document.body child).
   Wrapper sám o sebe nemá visuál — vnútri sedí .hand-card s rovnakými badges
   ako v boji. Tooltip pre kartu v preview NIE — preview už je detailná view. */
.card-preview-floating {
  position: fixed;
  z-index: var(--z-top);
  pointer-events: none;
  animation: card-preview-fade 0.12s ease-out;
}
@keyframes card-preview-fade {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== Encounter dialog overlay =====
   Stmavená scéna, sprite vlka vľavo, oponenta vpravo, speech bubble pri speakerovi. */
.dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  z-index: var(--z-modals);
  cursor: pointer;
  overflow: hidden;
  animation: dialog-fade-in 0.4s ease-out;
}
@keyframes dialog-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Pri _advanceDialog sa robí full re-render → DOM elementy sa pre-vytvoria a
   animácie by sa znova spustili (overlay fade + bubble pop = "preblikávanie").
   Prvý render dialógu má no class, ďalšie majú .no-anim. */
.dialog-overlay.no-anim,
.dialog-bubble.no-anim { animation: none; }

/* Fade-out pri odkliknutí posledného framu — overlay + bubble + sprites zmiznú
   spolu cez 350ms. `_advanceDialog` drží `fadingOut: true` na state-e, render
   pridá `fading-out` triedu, po timeoute uprací dialog state. `forwards` drží
   final opacity 0 aby flash medzi anim koncom a real cleanup-om nebol. */
.dialog-overlay.fading-out,
.dialog-overlay.fading-out .dialog-bubble,
.dialog-overlay.fading-out .dialog-sprite {
  animation: dialog-fade-out 350ms ease-in forwards;
}
@keyframes dialog-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ===== Choice prompt modal =====
   Blocking modal pre quest step choices. Otázka + zoznam buttonov (yes/no alebo
   viac možností). Backdrop blokuje klik, iba option button konzumuje voľbu.
   Renderovaný z _renderChoicePrompt; trigger zo _questStep keď step má choice_prompt. */
.choice-prompt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: var(--z-modals);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  animation: dialog-fade-in 0.3s ease-out;
}
.choice-prompt-modal {
  background: linear-gradient(180deg, #2a2418, #1c1812);
  border: 2px solid #d2a24c;
  border-radius: 8px;
  padding: 28px 32px;
  max-width: 520px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(210, 162, 76, 0.25);
}
.choice-prompt-question {
  color: #f0e3c2;
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
  margin-bottom: 22px;
  font-weight: 600;
}
.choice-prompt-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice-prompt-btn {
  background: #3a2f1c;
  border: 1px solid #6a5a3a;
  color: #ffd54a;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.choice-prompt-btn:hover {
  background: #4a3d24;
  border-color: #d2a24c;
}
.choice-prompt-btn:active { transform: scale(0.98); }

/* ===== Fullscreen cutscene =====
   Single-image dramatic overlay (alternatíva k book-flip). Image + dismiss button.
   Bridge crossing, exit cat_tower, dummy cinematic moments pred finálnym artom. */
.fullscreen-cutscene-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: var(--z-modals);
  cursor: pointer;
}
/* Obrázok vyplní celý overlay (max impact). `contain` zachová kompozíciu artu
   (letterbox namiesto cropu). Fade-in per frame cez fresh DOM node (data-frame). */
.fullscreen-cutscene-image {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: fc-image-in 0.5s ease-out;
}
@keyframes fc-image-in { from { opacity: 0; } to { opacity: 1; } }
.fullscreen-cutscene-image.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1812;
  color: #6a5a3a;
  font-style: italic;
  font-size: 22px;
  border: 2px dashed #4a3d24;
  margin: 80px;
}
/* Spodný bar — caption + dots + button, plávajúce nad obrázkom cez gradient. */
.fullscreen-cutscene-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 20px 32px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}
.fullscreen-cutscene-caption {
  color: #f0e3c2;
  font-size: 18px;
  font-style: italic;
  max-width: 720px;
  text-align: center;
  line-height: 1.5;
  padding: 0 20px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.fullscreen-cutscene-dots {
  display: flex;
  gap: 8px;
}
.fullscreen-cutscene-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.2s;
}
.fullscreen-cutscene-dots span.active { background: #ffd54a; }
.fullscreen-cutscene-dismiss {
  background: #3a2f1c;
  border: 2px solid #d2a24c;
  color: #ffd54a;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.fullscreen-cutscene-dismiss:hover {
  background: #4a3d24;
  box-shadow: 0 0 16px rgba(210, 162, 76, 0.4);
}
.fullscreen-cutscene-dismiss:active { transform: scale(0.97); }

.dialog-sprite {
  position: absolute;
  bottom: 0;
  width: 38%;
  height: 78%;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  transition: filter 0.3s ease, transform 0.3s ease;
}
.dialog-sprite-left  { left: 2%; }
.dialog-sprite-right { right: 2%; transform: scaleX(-1); }  /* spätné zrkadlenie aby sa "pozeral" na hrdinu */
.dialog-sprite-right.no-flip { transform: none; }           /* dialog_sprites.right je už orientovaný doľava — bez flipu */
.dialog-sprite.active {
  filter: drop-shadow(0 0 24px var(--sprite-glow, #ffd54a))
          drop-shadow(0 0 48px var(--sprite-glow, #ffd54a));
}
.dialog-sprite.dimmed {
  filter: brightness(0.35) saturate(0.4) drop-shadow(0 0 12px rgba(0, 0, 0, 0.8));
}

.dialog-bubble {
  position: absolute;
  top: 16%;
  max-width: 38%;
  background: #f4ecd4;
  color: #1a1208;
  border: 3px solid #d2a24c;
  border-radius: 16px;
  padding: 22px 28px;
  font-size: 34px;            /* 2× pôvodné 17 — čitateľné aj pre deti */
  line-height: 1.4;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  animation: dialog-bubble-pop 0.25s ease-out;
}
@keyframes dialog-bubble-pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.dialog-bubble-left  { left: 32%; }
.dialog-bubble-right { right: 32%; }

/* Tail (chvostík) ukazuje smerom k aktívnemu speakerovi.
   Layered: vonkajší (border colour) väčší, vnútorný (fill colour) menší ofsetnutý. */
.dialog-bubble-left::before,
.dialog-bubble-left::after,
.dialog-bubble-right::before,
.dialog-bubble-right::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}
.dialog-bubble-left::before {
  left: -24px;
  margin-top: -18px;
  border-right: 24px solid #d2a24c;
}
.dialog-bubble-left::after {
  left: -19px;
  margin-top: -14px;
  border-top-width: 14px;
  border-bottom-width: 14px;
  border-right: 20px solid #f4ecd4;
}
.dialog-bubble-right::before {
  right: -24px;
  margin-top: -18px;
  border-left: 24px solid #d2a24c;
}
.dialog-bubble-right::after {
  right: -19px;
  margin-top: -14px;
  border-top-width: 14px;
  border-bottom-width: 14px;
  border-left: 20px solid #f4ecd4;
}

.dialog-bubble-speaker {
  font-size: 22px;            /* 2× pôvodné 13 (Cinzel, decorative header) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8a6024;
  margin-bottom: 10px;
}
.dialog-bubble-text {
  font-weight: 500;
}
.dialog-bubble-hint {
  margin-top: 18px;
  font-size: 18px;            /* 2× pôvodné 11 */
  color: #8a6024;
  font-style: italic;
  text-align: right;
}


/* ===== Combat status corner — floating top-right štvorcové ikony =====
   Mimo grid flow (position: absolute) → neujedá vertikálny priestor a sedí
   v rohu nezávisle od layout-u. Dve dlaždice: terrain (conditional) + day phase. */
.combat-status-corner {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: var(--z-ui-base);
  pointer-events: auto;
}

/* Combat menu modal — overlay nad combatom. Otvára sa cez ESC v combat view
   (zatiaľ žiaden visible button, TBD pekný menu button). Reuse
   `.game-over-overlay` / `.game-over-box` štruktúry + .menu-settings/.menu-btn
   štýlov z hlavného menu. */
.combat-menu-overlay { z-index: var(--z-modals); }
.combat-menu-box {
  min-width: 380px;
  max-width: 480px;
  text-align: center;
}
.combat-menu-box .menu-settings {
  margin: 24px 0 28px;
}
.combat-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.combat-menu-actions .menu-btn {
  width: 100%;
}

/* PWA "nová verzia" banner — fixný vpravo dole, nad všetkým (mimo render cyklu). */
#pwa-update-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-stingers);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #2a1c0e 0%, #1a1208 100%);
  border: 1px solid #6a4a28;
  border-radius: 8px;
  color: #f0e8d0;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  animation: pwa-banner-in 0.3s ease-out;
}
#pwa-update-banner button {
  padding: 6px 14px;
  background: #b8860b;
  border: none;
  border-radius: 5px;
  color: #1a1208;
  font-weight: 700;
  cursor: pointer;
}
#pwa-update-banner button:hover { background: #d2a24c; }
@keyframes pwa-banner-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Menu modaly (uložené hry / nastavenia) — overlay nad hlavným menu.
   Reuse .game-over-overlay/.game-over-box + .combat-menu-box. */
.menu-modal-overlay { z-index: var(--z-modals); }
.settings-section-title {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #d2c8a0;
  text-transform: uppercase;
}
.res-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.res-list .res-btn {
  width: 100%;
  font-size: 14px;
  padding: 8px 6px;
}
.res-list .res-btn.res-active {
  border-color: #ffd54a;
  background: rgba(120, 90, 30, 0.6);
  color: #ffe9a8;
}
/* Fullscreen checkbox row — label vľavo, checkbox vpravo. */
.fullscreen-row {
  grid-template-columns: 1fr auto;
  cursor: pointer;
}
.settings-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #ffd54a;
  cursor: pointer;
}
.cs-tile {
  position: relative;
  width: 56px;
  height: 56px;
  border: 2px solid #7a6a40;
  border-radius: 8px;
  background: rgba(20, 15, 10, 0.85);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 160, 0.18);
  cursor: help;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-phase-emoji {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
/* cs-tile tooltip — riadi generic tooltip.js cez data-tt atribút. */

/* ===== Combat frames — opponent (top-left) a player (bottom-right) panely =====
   Bg art: opponent_frame1.png (1536×1024, avatar vľavo + 3 sloty vpravo) a
   player_frame1.png (mirror). Sloty pozicované v % image-coords. */
.combat-frame {
  position: absolute;
  width: 380px;
  aspect-ratio: 1536 / 1024;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  /* combat-frame nad hand-zone (z-hand=70) a hero-card (z-cards=60) — End Turn
     button musí byť klikateľný aj keď leží pod fan layoutom hand-zóny. */
  z-index: calc(var(--z-hand) + 10);
  /* Pozn: `filter: drop-shadow(...)` tu nepoužívame — pri hover-i deskendentov
     (filter/box-shadow zmeny na buttone) by parent filter musel re-rasterizovať
     celý frame, čo spôsobí sub-pixel jitter wood textúry. */
}
.combat-frame.opponent {
  top: -45px;
  left: -40px;
  background-image: url('data/art/ui/opponent_frame1.webp');
}
.combat-frame.player {
  bottom: -42px;
  right: -37px;
  background-image: url('data/art/ui/player_frame1.webp');
}

/* Avatar slot — veľký štvorcový dark window. Opponent má vľavo, player vpravo. */
.cf-avatar {
  position: absolute;
  top: 20%;
  width: 27.5%;
  height: 54%;
  background-size: 130% auto;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 4px;
  pointer-events: auto;     /* parent .combat-frame má none kvôli art-bg */
}
.combat-frame.opponent .cf-avatar {
  left: 16.5%;
  top: 24%;
  width: 29%;
  height: 51.5%;
}
.combat-frame.player .cf-avatar { right: 17%; }

/* Player turn: cf-avatar slot je nahradený big "Ukončiť ťah" button-om. */
/* End Turn button — ladený vo farbe hrdinu (`--btn-glow` inline var z hero.glow_color).
   Pulzujúci glow neustále upútava pozornosť ako primary action. Disabled = no pulse.
   Pozn: `var(--btn-glow)` v box-shadow ide priamo (bez alpha mixovania) — intenzita
   sa riadi blur radius-om, full-color glow je výraznejší než color-mix transparent. */
button.cf-avatar.cf-end-turn-btn {
  /* Fallback gold ak --btn-glow nie je nastavený. */
  --btn-glow: #d2a24c;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--btn-glow) 75%, #fff 12%) 0%,
      color-mix(in srgb, var(--btn-glow) 65%, #000 18%) 100%);
  border: 2px solid var(--btn-glow);
  border-radius: 8px;
  /* Standardne "vysvietené" — text v pale variant hero farby (Vlk strieborný,
     Lisiak bledooranžový, Medveď bledohnedý, Mačka bledofialový) + glow border. */
  color: color-mix(in srgb, var(--btn-glow) 30%, #fff 70%);
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.8px;
  cursor: pointer;
  padding: 0;
  text-align: center;
  text-shadow:
    0 0 10px var(--btn-glow),
    0 0 18px color-mix(in srgb, var(--btn-glow) 60%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.75);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.55),
    0 0 8px var(--btn-glow, #d2a24c),
    0 0 14px var(--btn-glow-soft, #d2a24c55),
    inset 0 0 10px var(--btn-glow-soft, #d2a24c55);
  transition: filter 0.15s, box-shadow 0.15s;
}
button.cf-avatar.cf-end-turn-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}
button.cf-avatar.cf-end-turn-btn:active:not(:disabled) {
  filter: brightness(0.95);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 4px rgba(0, 0, 0, 0.25);
}
button.cf-avatar.cf-end-turn-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.55);
}

/* Fade-in animation pre swap medzi avatar / button / opponent-msg pri turn flipe.
   Class `.cf-avatar-fade-in` sa pridáva iba na prvý render po zmene `is_opponent_turn`
   (UI tracker), takže ďalšie state-changes počas tej istej side's turn neflickerujú.

   `animation` property nemôže byť kombinovaná naprieč rules — musíme deklarovať obe
   animácie (fade-in + pulse) v jednom selektore so vyššou specificity než base rule. */
@keyframes cf-avatar-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.cf-avatar.cf-avatar-fade-in {
  animation: cf-avatar-fade-in 0.45s ease-out both;
}
button.cf-avatar.cf-end-turn-btn.cf-avatar-fade-in {
  animation: cf-avatar-fade-in 0.45s ease-out both;
}
.cf-avatar.cf-opponent-turn-msg.cf-avatar-fade-in {
  animation:
    cf-avatar-fade-in 0.45s ease-out both,
    opp-turn-pulse 1800ms ease-in-out infinite;
}

/* Opponent turn: opponent's cf-avatar slot je nahradený "Oponent na ťahu" textom. */
.cf-avatar.cf-opponent-turn-msg {
  background: linear-gradient(180deg, rgba(60, 20, 20, 0.92), rgba(30, 8, 8, 0.92));
  border: 2px solid #cc4444;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffd0c0;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 80, 80, 0.6), 0 1px 3px rgba(0, 0, 0, 0.9);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), inset 0 0 16px rgba(204, 68, 68, 0.35);
  animation: opp-turn-pulse 1800ms ease-in-out infinite;
}
@keyframes opp-turn-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), inset 0 0 16px rgba(204, 68, 68, 0.35); }
  50%      { box-shadow: 0 3px 16px rgba(0, 0, 0, 0.65), inset 0 0 28px rgba(255, 100, 100, 0.6),
                          0 0 22px rgba(204, 68, 68, 0.4); }
}

/* Tri horizontálne sloty — mana progressbar, hand count, away count.
   Opponent: sloty vpravo (left 42%); Player: vľavo (left 8%). */
.cf-slot {
  position: absolute;
  width: 34.8%;
  height: 13%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0e8d0;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: auto;
}
.combat-frame.opponent .cf-slot { left: 51.5%; }
.combat-frame.player .cf-slot { left: 14%; }
.cf-mana { top: 21%; }
.cf-hand { top: 40%; }
.cf-away { top: 60%; }

/* Opponent frame má sloty v image-e o ~3% nižšie než player mirror — override Y. */
.combat-frame.opponent .cf-mana { top: 25%; }
.combat-frame.opponent .cf-hand { top: 45%; }
.combat-frame.opponent .cf-away { top: 63%; }

/* Mana progressbar — fill rastie zľava cez celý slot, číslo current/total na vrchu. */
.cf-mana {
  overflow: hidden;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  position: absolute;
}
.cf-mana-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(180deg, rgba(91, 220, 110, 0.65), rgba(42, 138, 64, 0.65));
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.25);
  transition: width 0.3s ease-out, background 0.3s ease-out, box-shadow 0.3s ease-out;
}
/* Overflow indikátor — current mana > max (burst spelly: Manový kameň, Magické skúsenosti).
   Purple gradient + subtle glow vyznačí dočasný over-max stav. */
.cf-mana.overflow .cf-mana-fill {
  background: linear-gradient(180deg, rgba(180, 110, 240, 0.78), rgba(110, 50, 180, 0.78));
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.25), 0 0 8px rgba(180, 110, 240, 0.55);
}
.cf-mana.overflow .cf-mana-label {
  text-shadow: 0 0 6px rgba(220, 160, 255, 0.85);
}
.cf-mana-label {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}
.cf-mana-sep {
  margin: 0 2px;
  color: #c8b890;
  font-weight: 500;
}

/* Hand / Away stat sloty — emoji ikona + číslo. */
.cf-slot-icon {
  margin-right: 8px;
  font-size: 18px;
}
.cf-slot-val {
  font-size: 18px;
  font-weight: 700;
  color: #d2a24c;
}


/* Vyčerpanie aktivácia banner. */
.vycerpanie-banner {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(60, 25, 5, 0.95);
  border: 2px solid #ff8a3a;
  border-radius: 10px;
  padding: 18px 32px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: #ffd54a;
  letter-spacing: 0.5px;
  z-index: var(--z-event-banners);
  pointer-events: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 170, 58, 0.55);
  animation: vycerpanie-banner-anim 2400ms ease-out forwards;
}
.vycerpanie-banner .sub {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f0e8d0;
  letter-spacing: 0;
}
@keyframes vycerpanie-banner-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
}

/* Symbióza discovery banner — zlatý "wow" moment keď hráč prvýkrát aktivuje
   skryté bonus s daným environment/hrdinom/companionom. Žiadna persistencia,
   banner sa fíruje každé jedno triggernutie (re-discover každý raz). */
.symbiosis-reveal-banner {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(60, 40, 12, 0.96), rgba(110, 70, 18, 0.96));
  border: 2px solid #ffd54a;
  border-radius: 10px;
  padding: 16px 32px;
  text-align: center;
  z-index: var(--z-event-banners);
  pointer-events: none;
  box-shadow:
    0 0 32px rgba(255, 213, 74, 0.7),
    0 0 64px rgba(255, 213, 74, 0.35),
    0 10px 40px rgba(0, 0, 0, 0.85);
  animation: symbiosis-reveal-anim 1800ms ease-out forwards;
}
.symbiosis-reveal-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffd54a;
  text-shadow: 0 0 12px rgba(255, 213, 74, 0.6);
  margin-bottom: 6px;
}
.symbiosis-reveal-text {
  font-style: italic;
  font-size: 14px;
  color: #f0e8d0;
  letter-spacing: 0;
}
@keyframes symbiosis-reveal-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  82%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.04); }
}

/* Zlatá pulse flash na unit-e ktorý discovery triggernul. */
.board-card.symbiosis-flash,
.hand-card.symbiosis-flash {
  animation: symbiosis-flash-pulse 1200ms ease-in-out;
}
@keyframes symbiosis-flash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; filter: brightness(1.0); }
  40%      { box-shadow: 0 0 26px #ffd54a, 0 0 52px rgba(255, 213, 74, 0.6); filter: brightness(1.35); }
  70%      { box-shadow: 0 0 18px rgba(255, 213, 74, 0.7); filter: brightness(1.15); }
}

/* Mana Overflow banner — purple "self-damage from unspent mana" event.
   Fíruje pri turn-start ak current > max (skip bonus alebo carryover burst).
   Banner v strede 1.5s, potom flash na hera. */
.mana-overflow-banner {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Len text — žiadne pozadie, border, box-shadow. */
  text-align: center;
  z-index: var(--z-event-banners);
  pointer-events: none;
  animation: mana-overflow-banner-anim 1500ms ease-out forwards;
}
.mana-overflow-title {
  font-family: 'Cinzel', serif;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #fff;
  /* Multi-stack glow: biely inner pop + 5 vrstiev fialovej s rastúcim radius. */
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 16px rgba(180, 110, 240, 1),
    0 0 32px rgba(180, 110, 240, 0.95),
    0 0 56px rgba(180, 110, 240, 0.75),
    0 0 88px rgba(180, 110, 240, 0.5),
    0 0 130px rgba(180, 110, 240, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.8);
}
.mana-overflow-sub {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(180, 110, 240, 1),
    0 0 24px rgba(180, 110, 240, 0.85),
    0 0 44px rgba(180, 110, 240, 0.55),
    0 0 72px rgba(180, 110, 240, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.7);
  letter-spacing: 1px;
}
/* Floating damage number — biele číslo s mohutným fialovým glow (sync s overflow mana bar). */
.floating-damage.mana-overflow {
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 1),
    0 0 14px rgba(180, 110, 240, 1),
    0 0 30px rgba(180, 110, 240, 0.95),
    0 0 56px rgba(180, 110, 240, 0.75),
    0 0 90px rgba(180, 110, 240, 0.5),
    0 0 130px rgba(180, 110, 240, 0.3);
}
@keyframes mana-overflow-banner-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  82%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.04); }
}
/* Purple flash na hera (akejkoľvek strany) ktorej side prijal overflow dmg. */
.board-card.mana-overflow-flash,
.hero-card.mana-overflow-flash {
  animation: mana-overflow-flash-pulse 700ms ease-out;
}
@keyframes mana-overflow-flash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; filter: brightness(1.0); }
  50%      { box-shadow: 0 0 36px #c084ff, 0 0 72px rgba(192, 132, 255, 0.6); filter: brightness(1.4); }
}

/* Terrain change banner — Mačkina ability mení prostredie mid-combat. Sky-blue
   / storm-grey schéma — odlíšiť od symbiosis (gold) a vycerpanie (red). */
.terrain-change-banner {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(25, 35, 60, 0.96), rgba(45, 65, 100, 0.96));
  border: 2px solid #7fb3d5;
  border-radius: 10px;
  padding: 14px 28px;
  text-align: center;
  z-index: var(--z-event-banners);
  pointer-events: none;
  box-shadow:
    0 0 28px rgba(127, 179, 213, 0.55),
    0 0 56px rgba(127, 179, 213, 0.28),
    0 10px 40px rgba(0, 0, 0, 0.85);
  animation: terrain-change-anim 1500ms ease-out forwards;
  max-width: 480px;
}
.terrain-change-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #cfe3f5;
  text-shadow: 0 0 10px rgba(127, 179, 213, 0.6);
  margin-bottom: 4px;
}
.terrain-change-subtitle {
  font-style: italic;
  font-size: 13px;
  color: #d8e4ef;
  letter-spacing: 0;
}
@keyframes terrain-change-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  82%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.03); }
}

/* Reveal flash — keď Zvierací čuch odhalí karty. */
@keyframes reveal-flash-anim {
  0%, 100% { box-shadow: 0 0 0 transparent; background-color: transparent; }
  40%      {
    box-shadow: 0 0 24px rgba(210, 162, 76, 0.7);
    background-color: rgba(210, 162, 76, 0.15);
  }
}
.enemy-hand.reveal-flash {
  animation: reveal-flash-anim 700ms ease-out;
  border-radius: 8px;
}

.enemy-board, .player-board {
  display: grid;
  grid-template-columns: repeat(7, 110px);
  grid-template-rows: 1fr;
  justify-content: center;
  gap: 24px;
  padding: 8px;
  min-height: 0;
}
/* Push boards smerom k vlastnej ruke — uvoľní stred pre cast animáciu. */
.enemy-board { align-items: start; }
.player-board { align-items: end; }

.player-board > .board-card,
.player-board > .hero-card,
.enemy-board > .board-card,
.enemy-board > .hero-card,
.player-board > .slot-placeholder,
.enemy-board > .slot-placeholder { grid-row: 1; }

/* Slot placeholder — dashed outline pre voľný dostupný slot.
   Aspect ratio match s board cards (9:13). Pointer-events: none aby kliky šli pozadie. */
.slot-placeholder {
  aspect-ratio: 9 / 13;
  width: 100%;
  border: 2px dashed rgba(210, 162, 76, 0.35);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.slot-placeholder.side-opponent {
  border-color: rgba(200, 90, 90, 0.3);
}

.enemy-board .hint { color: #777; font-style: italic; font-size: 12px; }

.end-turn-btn {
  padding: 8px 24px;
  background: none;
  color: #1a0f08;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.1s ease-out, text-shadow 0.15s, color 0.15s;
}
/* Pressed-look hover — text vysvieti zlatým glow, button sa "stlačí" o 1-2 px
   nadol. Žiadny bg highlight, wood texture ostane viditeľná. */
.end-turn-btn:hover:not(:disabled) {
  color: #ffe4a8;
  text-shadow:
    0 0 8px rgba(255, 220, 140, 0.85),
    0 0 16px rgba(255, 200, 100, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.8);
  transform: translateY(1px);
}
.end-turn-btn:active:not(:disabled) {
  transform: translateY(2px);
  text-shadow:
    0 0 6px rgba(255, 220, 140, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.9);
}

.hand-zone {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 0 20px;
  min-height: 180px;
  perspective: 800px;
  position: relative;
  z-index: var(--z-hand);  /* tier: --z-hand (70), nad hero-card (60) */
}
.hand-zone .hand-card {
  margin: 0 -20px;       /* overlap pre vejár (o 10px menej overlap = karty ďalej) */
  transform-origin: center bottom;
  transform: rotate(var(--fan-rot, 0deg)) translateY(var(--fan-lift, 0px));
  transition: transform 0.15s, filter 0.15s;
}
/* Hover narovná kartu + zdvihne — override fan rotation. */
.hand-zone .hand-card.playable:hover {
  transform: translateY(-30px) scale(1.08) rotate(0deg);
  z-index: calc(var(--z-hand) + 30) !important;  /* nad ostatnými hand cards v hand tier */
}

/* ===== Opponent hand fan (card backs above enemy board) ===== */
.enemy-hand {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0 4px;
  min-height: 70px;
  perspective: 800px;
}
.enemy-card {
  width: 60px;
  height: 84px;
  margin: 0 -18px;
  border: 1px solid #000;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  position: relative;
  transform-origin: center top;
  transform: rotate(var(--fan-rot, 0deg)) translateY(calc(var(--fan-lift, 0px) * -1));
  flex-shrink: 0;
}
.enemy-card.face-down {
  background:
    linear-gradient(135deg, #2a1a4a 0%, #14082a 50%, #2a1a4a 100%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.enemy-card.face-down .card-back-emblem {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #d2a24c;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 0.85;
}
.enemy-card.revealed {
  background-color: #1a1208;
  box-shadow: 0 0 8px rgba(255, 220, 100, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.enemy-card .name-badge {
  font-size: 9px;
  top: 2px;
  max-width: 56px;
}
.enemy-card .cost-badge {
  width: 18px; height: 18px;
  font-size: 10px;
  top: -4px; right: -4px;
}
/* (Hand discard target sa už nerenderuje v enemy-hand zone — picker je v strede
   battlefieldu cez `.card-pick-modal-*`. Karty v enemy-hand ostávajú revealed
   ako face-up info pre hráča, ale výber sa robí v modáli.) */

/* ===== Cards — full-art, badges on top ===== */

.hand-card, .board-card {
  width: 110px;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 0;
  position: relative;
  user-select: none;
  flex-shrink: 0;
}

.board-card { height: 150px; cursor: default; }
.hand-card {
  height: 160px;
  cursor: pointer;
  transition: transform 0.15s;
}

.hand-card.unplayable { filter: brightness(0.45); cursor: not-allowed; }

.hero-card {
  cursor: pointer;
  transform: scale(1.1);
  z-index: var(--z-cards);  /* tier: --z-cards (60), nad companion hover (50) */
}

/* Mud sunken — non-air jednotky v Močiari "trčia" v bahne. mud.png overlay
   presahuje kartu zo spodu (kvapky padajú pod hranu) + bočné cákance.
   Karta: 110×150. Sprite: width 150 (≈18px presah na každú stranu),
   bottom: -28px (kvapky pod kartou). Subtle ripple animácia. */
/* Karta zaborená v bahne — translateY downward, vizuálne "klesne" do swamp.
   Companion stoji nižšie ako normálne; mud overlay sprite ::after sa kreslí
   pod ňou (bottom: -109px). Spolu efekt = karta zatlačená do bahna. */
.board-card.mud-sunken {
  transform: translateY(12px);
}

.board-card.mud-sunken::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -109px;
  width: 150px;
  height: 250px;
  transform: translateX(-50%);
  background: url('data/art/icons/mud.png') no-repeat center bottom / 100% 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  z-index: 3;
  animation: mud-sink-ripple 4.5s ease-in-out infinite alternate;
}
@keyframes mud-sink-ripple {
  0%   { transform: translateX(-50%) translateY(0px) scaleY(1); filter: brightness(0.95) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
  100% { transform: translateX(-50%) translateY(2px) scaleY(1.03); filter: brightness(1.08) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.55)); }
}

.defending-overlay {
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Wearable badges — strip equipnutých wearables v rohu unit card-y.
   Zobrazujú sa iba occupied sloty (žiadne empty placeholders). */
.wearable-strip {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: flex;
  gap: 2px;
  z-index: 4;
  pointer-events: none;
}
.wearable-badge {
  width: 20px;
  height: 20px;
  background-size: cover;
  background-position: center;
  border: 1px solid #d2a24c;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

/* Slot type label na wearable card v ruke — krátky text "Zbraň" / "Hlava" atď. */
.wearable-slot-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1208;
  background: #d2a24c;
  padding: 1px 8px;
  border-radius: 8px;
  border: 1px solid #1a1208;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: none;
}

/* ===== Attack mode visuals ===== */

.board-card.can-attack {
  box-shadow: 0 0 0 2px rgba(255, 200, 50, 0.6);
  cursor: pointer;
}

.board-card.attacker-selected {
  box-shadow: 0 0 0 3px #ffd54a, 0 0 16px rgba(255, 213, 74, 0.7);
  transform: translateY(-6px);
}
.hero-card.attacker-selected {
  transform: scale(1.1) translateY(-6px);
}

.board-card.targetable {
  box-shadow: 0 0 0 3px #cc4444, 0 0 14px rgba(204, 68, 68, 0.6);
  cursor: crosshair;
  animation: target-pulse 1.2s ease-in-out infinite;
}
@keyframes target-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #cc4444, 0 0 14px rgba(204, 68, 68, 0.55); }
  50%      { box-shadow: 0 0 0 3px #ff6e6e, 0 0 20px rgba(255, 110, 110, 0.85); }
}

.board-card.exhausted {
  filter: grayscale(0.7) brightness(0.65);
}

.board-card.is-down {
  filter: grayscale(0.95) brightness(0.45);
}
.board-card.is-down .badge { opacity: 0.55; }
/* down_art aktívny — alternatívny avatar (napr. zapálená sviečka): bez grayscale,
   plný jas, žiadny × overlay. */
.board-card.is-down.down-art { filter: none; }
.board-card.is-down.down-art .badge { opacity: 1; }

/* combat_dark_reveal — čierny veil nad combat pozadím (z-index 30 = nad bg, pod
   kartami --z-cards 60 a hand --z-hand 70, takže karty/UI ostanú viditeľné, sčernie
   len scéna). Pri výhre .revealing odfejduje opacity → 0 (scéna sa rozsvieti). */
.combat-dark-veil {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 30;
  pointer-events: none;
  opacity: 1;
}
.combat-dark-veil.revealing {
  opacity: 0;
  transition: opacity 1400ms ease-out;
}
.down-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: 700;
  color: rgba(255, 60, 60, 0.85);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
  pointer-events: none;
}

.attack-mode-banner,
.spell-target-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  z-index: var(--z-banners);
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.attack-mode-banner { background: rgba(204, 68, 68, 0.92); }
.attack-mode-banner.ability-mode-banner { background: rgba(80, 130, 200, 0.92); }
.attack-mode-banner.rock-mode-banner { background: rgba(120, 92, 62, 0.94); }
.spell-target-banner { background: rgba(120, 80, 200, 0.92); }

/* ===== Environmentálny kameň (Medveď) ===== */
/* Klikateľné rock sprity na bojisku. Layer je full-bleed, sám neklikateľný;
   klikateľné sú len jednotlivé kamene. */
.combat-rocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 65;            /* tesne nad --z-cards (60), pod bannermi */
}
.combat-rock {
  position: absolute;
  width: 84px;
  height: 84px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.55));
  transition: filter 0.15s ease, translate 0.12s ease;
}
.combat-rock:hover {
  filter: drop-shadow(0 0 8px rgba(255, 220, 140, 0.9)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) brightness(1.12);
  translate: 0 -4px;
}
/* rock-armed = rockMode aktívny: kameň pulzuje aby bolo jasné že čaká na cieľ. */
.combat-rock.rock-armed {
  filter: drop-shadow(0 0 10px rgba(255, 200, 120, 0.95)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
  animation: rock-armed-pulse 0.9s ease-in-out infinite;
}
@keyframes rock-armed-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 200, 120, 0.7)) drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255, 225, 150, 1)) drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
}
/* rock-spent = už hodené tento ťah: sivé, neklikateľné. */
.combat-rock.rock-spent {
  filter: grayscale(0.85) brightness(0.55) drop-shadow(0 3px 4px rgba(0,0,0,.5));
  cursor: default;
  pointer-events: none;
}
/* rock-target — stone-tinted variant targetable highlightu pre rock mode. */
.board-card.rock-target,
.hero-card.rock-target {
  box-shadow: 0 0 0 3px #c9a16a, 0 0 16px rgba(201, 161, 106, 0.7) !important;
  animation: rock-target-pulse 1.1s ease-in-out infinite !important;
  cursor: crosshair;
}
@keyframes rock-target-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #c9a16a, 0 0 14px rgba(201, 161, 106, 0.55); }
  50%      { box-shadow: 0 0 0 3px #e8c489, 0 0 22px rgba(232, 196, 137, 0.9); }
}

.board-card.spell-target {
  box-shadow: 0 0 0 3px #b76eff, 0 0 14px rgba(183, 110, 255, 0.65);
  cursor: pointer;
  animation: spell-target-pulse 1.2s ease-in-out infinite;
}
@keyframes spell-target-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #b76eff, 0 0 14px rgba(183, 110, 255, 0.55); }
  50%      { box-shadow: 0 0 0 3px #d8a8ff, 0 0 20px rgba(216, 168, 255, 0.85); }
}

.hand-card.being-cast {
  outline: 2px solid #b76eff;
  outline-offset: 2px;
  transform: translateY(-10px);
}

/* ===== Game over modal ===== */

.game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modals);
  backdrop-filter: blur(3px);
}

/* ===== Drevený rám pre modaly =====
   Klíčové: `overflow: hidden` na modali — vytvára BFC ktorý izoluje rendering
   border-image transparency a content nepretláča cez border gaps. Identická
   konfigurácia ako deck-editor kde to dlho funguje.
   Caveat: overflow hidden clipuje absolute-pos descendants. Generic tooltip
   používa fixed pos v document.body, takže ho overflow neclipuje. */
.deck-editor-panel,
.game-over-box,
.reward-box,
.trade-box {
  position: relative;     /* kotvenie pre .modal-close-corner */
  background: linear-gradient(180deg, #1a1208 0%, #100a04 100%);
  background-clip: padding-box;
  border: 35px solid transparent;
  border-bottom-width: 71px;
  border-image: url('data/art/ui/modal-border2.webp') 200 / 100px stretch;
  border-radius: 24px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.75));
  overflow: hidden;
  color: #f0e8d0;
}

.game-over-box {
  padding: 32px 48px;
  text-align: center;
  min-width: 320px;
}

/* Loading stav po kliku na game-over akciu (retry/restart). Spam-klik guard
   v _onClick disable-ne buttony + pridá .loading na box → spinner + wait cursor,
   nech hráč vidí že sa načítava a neklikne button viackrát. */
.game-over-box.loading,
.reward-overlay.loading { cursor: wait; }
.game-over-box.loading::after,
.reward-overlay.loading::after {
  content: "";
  display: block;
  width: 28px; height: 28px;
  margin: 18px auto 0;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffd54a;
  border-radius: 50%;
  animation: go-spin 0.7s linear infinite;
}
@keyframes go-spin { to { transform: rotate(360deg); } }

.game-over-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.game-over-title.win  { color: #ffd54a; }
.game-over-title.loss { color: #cc4444; }

.game-over-msg {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 24px;
}

.restart-btn {
  padding: 10px 24px;
  background: #d2a24c;
  color: #1a0f08;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.restart-btn:hover:not(:disabled) { background: #e6b562; }
.restart-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.restart-btn.secondary {
  background: #5a4030;
  color: #f0e8d0;
}
.restart-btn.secondary:hover:not(:disabled) { background: #6e5040; }

.game-over-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.game-over-buttons .restart-btn { min-width: 220px; }

/* ===== Reward picker — výber 1 karty po výhre ===== */
.reward-overlay {
  /* extend game-over-overlay; rovnaký dark backdrop */
}
.reward-box {
  padding: 28px 36px;
  text-align: center;
  width: min(94%, 780px);
  animation: reward-box-pop 0.35s ease-out;
}
@keyframes reward-box-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.reward-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffd54a;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 12px rgba(255, 213, 74, 0.4);
}
.reward-subtitle {
  font-size: 14px;
  color: #c8b890;
  margin-top: 6px;
  margin-bottom: 24px;
}
.reward-cards {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 60px 0 18px;     /* nech je miesto nad kartou pre tooltip popup */
}
/* Wrapper okolo .reward-cards + navigačné šípky (pagination pri >4 kartách).
   Margin presunutý na wrap; scoped override zruší margin vnútornému .reward-cards
   (aby šípky boli vertikálne zarovnané s kartami). Nedotýka sa iných reward modalov. */
.reward-cards-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 60px 0 6px;      /* nech je miesto nad kartou pre tooltip popup */
}
.reward-cards-wrap .reward-cards {
  margin: 0;
  min-height: 150px;       /* drží výšku konštantnú naprieč stránkami (1-4 karty) */
  align-items: center;
}
.reward-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #6a4a28;
  background: #2a1c0e;
  color: #f4ecd4;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s, opacity 0.12s;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}
.reward-arrow:hover:not(:disabled) { background: #3c2a16; transform: scale(1.1); }
.reward-arrow:disabled { opacity: 0.3; cursor: default; }
.reward-page-indicator {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #c8b890;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
/* ×N badge na reward card art (zoskupené duplikáty). */
.reward-card-mini .rcm-art { position: relative; }
.reward-card-mini .rcm-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  background: #b8860b;
  border: 2px solid #2a1c0e;
  color: #1a1208;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
/* Reward card = click wrapper okolo hand-card. Sám o sebe žiadny visual —
   všetko prichádza z vnoreného .hand-card s badges + tooltipom. */
.reward-card {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s;
}
.reward-card:hover {
  transform: translateY(-6px);
}

/* Resource reward tile — alternatíva ku kartovému tile (rovnaké rozmery). */
.reward-resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(160deg, #2a1f10 0%, #1a1208 100%);
  border: 2px solid #d2a24c;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  color: #f0e8d0;
  text-align: center;
}
.reward-resource-amount {
  font-size: 32px;
  font-weight: 800;
  color: #ffd54a;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.reward-resource-icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
.reward-resource-name {
  font-size: 14px;
  font-weight: 600;
  color: #c8b890;
  padding: 0 8px;
}
/* Tooltip popup (description) sa default ukáže iba pri hand-card :hover;
   v reward pickeri to dostatočne reaguje pri hovere nad kartou. */

/* ===== Card-pick modal — generický "vyber jednu kartu" picker =====
   Použité pre Zvierací čuch (vyber kartu z oponentovej ruky), neskôr aj pre
   away-pick a podobné mechaniky. Cards = hand-card markup s červeným glow. */
.card-pick-modal-overlay {
  /* extends game-over-overlay backdrop */
}
.card-pick-modal-box {
  padding: 28px 36px;
  text-align: center;
  width: min(94%, 900px);
  animation: reward-box-pop 0.35s ease-out;
}
.card-pick-modal-title {
  font-size: 28px;
  font-weight: 700;
  color: #ff6e6e;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 12px rgba(255, 110, 110, 0.45);
}
.card-pick-modal-subtitle {
  font-size: 14px;
  color: #c8b890;
  margin-top: 6px;
  margin-bottom: 24px;
}
.card-pick-modal-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 56px 0 14px;
}
/* Karta v pickeri — `.hand-card` rozmery + červený glow + hover lift.
   Override fan rotation (modal cards ostávajú flat, neradí sa do vejára). */
.card-pick-modal-card {
  cursor: pointer;
  transform: none;
  border-color: #cc4444;
  box-shadow: 0 0 0 2px #cc4444, 0 0 14px rgba(204, 68, 68, 0.55);
  animation: target-pulse 1.2s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card-pick-modal-card:hover {
  transform: translateY(-18px) scale(1.06);
  animation: none;
  box-shadow: 0 0 0 3px #ff6e6e, 0 0 24px rgba(255, 110, 110, 0.9);
  z-index: 100;
}

/* ===== Mulligan modal — pre-combat ruka review + redraw ===== */
.mulligan-modal-overlay {
  /* extends .game-over-overlay backdrop. Backdrop má pointer-events: auto cez
     parent, takže kliky pod modalom (na end-turn / hand cards) sa zachytávajú
     na overlay → UI prejde do mulligan-only handlera. */
}
.mulligan-modal-box {
  padding: 28px 36px;
  text-align: center;
  width: min(94%, 900px);
  animation: reward-box-pop 0.35s ease-out;
}
.mulligan-modal-box .card-pick-modal-title {
  color: #ffd54a;          /* zlatá namiesto červenej — toto nie je hrozba, ale výber */
}
.mulligan-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.mulligan-actions .menu-btn {
  min-width: 180px;
}

/* ===== Trade panel (Veverica) — modal s ponukou denného sortimentu ===== */
.trade-overlay {
  /* extend game-over-overlay backdrop */
}
.trade-box {
  padding: 22px 32px 24px;
  width: min(94%, 820px);
  animation: reward-box-pop 0.35s ease-out;
}
/* Po prvom otvorení panela: re-rendery (po kúpe) by inak replayovali pop animation
   a blinkali. UI prepne na .no-anim po prvom render-e. */
.trade-box.no-anim {
  animation: none;
}
.trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}
.trade-title {
  font-size: 26px;
  font-weight: 700;
  color: #ffd54a;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(255, 213, 74, 0.3);
}
.trade-resources {
  display: flex;
  gap: 10px;
  /* 100px gap od pravého okraja aby close button (44px top:8 right:8) neprekrýval pills. */
  margin-right: 100px;
}
.trade-subtitle {
  font-size: 13px;
  color: #c8b890;
  text-align: center;
  margin-bottom: 16px;
}
.trade-offers {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex: 1;
  min-height: 230px;
}
/* Stránkovaný pager — ľavá šípka | offers | pravá šípka. 1 ponuka per stránka. */
.trade-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 50px 0 8px;       /* miesto nad kartou pre tooltip popup */
}
.trade-page-arrow {
  flex: 0 0 auto;
  width: 64px;
  height: 96px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #5a4a30;
  border-radius: 10px;
  color: #ffd54a;
  cursor: pointer;
  user-select: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.trade-page-arrow:hover:not(.disabled):not(:disabled) {
  background: rgba(40, 25, 5, 0.85);
  border-color: #d2a24c;
  transform: scale(1.05);
}
.trade-page-arrow:active:not(.disabled):not(:disabled) {
  transform: scale(0.96);
}
.trade-page-arrow.disabled,
.trade-page-arrow[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
/* Placeholder keď je iba 1 ponuka (žiadne šípky) — zachová grid alignment offer-u v strede. */
.trade-page-arrow-spacer {
  flex: 0 0 64px;
}
.trade-page-indicator {
  text-align: center;
  font-size: 12px;
  color: #c8b890;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.trade-empty {
  align-self: center;
  font-style: italic;
  color: #c8b890;
  padding: 40px;
}
.trade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.trade-card:hover:not(:disabled) {
  transform: translateY(-6px);
}
.trade-card.unaffordable {
  cursor: not-allowed;
  opacity: 0.55;
}
.trade-card.unaffordable .hand-card {
  filter: grayscale(0.6) brightness(0.7);
}
/* Predané — výrazne stmavené, "PREDANÉ" pásik diagonálne cez kartu. */
.trade-card.sold {
  cursor: not-allowed;
  opacity: 0.85;
}
.trade-card.sold:hover { transform: none; }
.trade-card.sold .hand-card {
  filter: grayscale(0.9) brightness(0.35) contrast(1.1);
}
.trade-sold-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffd54a;
  background: rgba(80, 20, 20, 0.85);
  border: 2px solid #ffd54a;
  padding: 4px 14px;
  border-radius: 4px;
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  z-index: 5;
  display: none;            /* always in DOM, ukáže sa cez .sold parent class */
}
.trade-card.sold .trade-sold-overlay { display: block; }
.trade-price {
  font-size: 18px;
  font-weight: 700;
  color: #ffd54a;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #5a4a30;
  border-radius: 16px;
  padding: 4px 14px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trade-price.unaffordable {
  color: #c66464;
  border-color: #5a3030;
}
.trade-price-part {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.trade-price-plus {
  color: #8a7a50;
  font-weight: 400;
  margin: 0 2px;
}
/* Mini card thumb v barter price — proporcie ako preview-card ale ~3.5× menšie. */
.trade-price-card-mini {
  display: inline-block;
  width: 32px;
  height: 46px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  vertical-align: middle;
}
.trade-close {
  display: block;
  margin: 0 auto;
  background: transparent;
  border: 1px solid #5a4a30;
  color: #c8b890;
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.trade-close:hover {
  border-color: #d2a24c;
  color: #ffd54a;
}
.reward-skip {
  background: transparent;
  border: 1px solid #5a4a30;
  color: #c8b890;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.reward-skip:hover { border-color: #d2a24c; color: #f0e8d0; }

/* Hero switch card — recyklujeme reward grid layout. Aktívny hero má farebné lemovanie. */
.hero-switch-card {
  background: rgba(20, 14, 8, 0.95);
  border: 2px solid #5a4a30;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  color: #f0e8d0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-align: left;
}
.hero-switch-card:hover {
  transform: translateY(-4px);
  border-color: var(--hero-glow, #ffd54a);
  box-shadow: 0 8px 22px var(--hero-glow, rgba(210, 162, 76, 0.45));
}
.hero-switch-card.active {
  border-color: var(--hero-glow, #ffd54a);
  box-shadow: 0 0 18px var(--hero-glow, rgba(255, 213, 74, 0.6));
}
.hero-switch-card .hsc-art {
  position: relative;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: #0a0604;
}
.hero-switch-card .hsc-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  font-size: 17px;
  font-weight: 700;
  color: #f0e8d0;
  background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0));
  text-align: center;
}
.hero-switch-card .hsc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(40, 28, 16, 0.5);
  font-size: 13px;
}
.hero-switch-card .hsc-stat.atk { color: #6aa8e0; }
.hero-switch-card .hsc-stat.hp  { color: #e07070; }
.hero-switch-card .hsc-active-tag {
  margin-left: auto;
  color: var(--hero-glow, #ffd54a);
  font-style: italic;
  font-size: 12px;
}

/* ===== Hero popup attack entry ===== */

.attack-entry .ability-cost {
  background: #b04030;
  font-size: 14px;
}

/* ===== Inline block selection (nahrádza modal) ===== */

.block-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 15, 10, 0.95);
  border: 1px solid #cc4444;
  color: #f0e8d0;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 12px;
  z-index: var(--z-banners);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  max-width: 90vw;
  text-align: center;
}
.block-banner strong { color: #ff8a8a; }

.board-card.incoming-attacker {
  box-shadow: 0 0 0 3px #cc4444, 0 0 16px rgba(204, 68, 68, 0.7);
  animation: incoming-pulse 1.2s ease-in-out infinite;
}
@keyframes incoming-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #cc4444, 0 0 14px rgba(204, 68, 68, 0.55); }
  50%      { box-shadow: 0 0 0 3px #ff6e6e, 0 0 22px rgba(255, 110, 110, 0.85); }
}

.board-card.attack-target {
  box-shadow: 0 0 0 3px #ffaa3a, 0 0 14px rgba(255, 170, 58, 0.7);
  cursor: pointer;
  animation: target-warn-pulse 1.2s ease-in-out infinite;
}
@keyframes target-warn-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #ffaa3a, 0 0 14px rgba(255, 170, 58, 0.6); }
  50%      { box-shadow: 0 0 0 3px #ffd54a, 0 0 22px rgba(255, 213, 74, 0.9); }
}

.board-card.possible-blocker {
  box-shadow: 0 0 0 3px #4aa8ff, 0 0 14px rgba(74, 168, 255, 0.7);
  cursor: pointer;
  animation: blocker-pulse 1.2s ease-in-out infinite;
}
/* Ak je blocker exhausted (útočil tento ťah), exhausted filter potlačí glow.
   V block móde override-neme filter aby bol blue highlight jasne viditeľný. */
.board-card.exhausted.possible-blocker,
.board-card.exhausted.attack-target,
.board-card.exhausted.incoming-attacker {
  filter: none;
}
@keyframes blocker-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #4aa8ff, 0 0 14px rgba(74, 168, 255, 0.6); }
  50%      { box-shadow: 0 0 0 3px #7bc4ff, 0 0 22px rgba(123, 196, 255, 0.9); }
}

.board-card.possible-blocker:hover,
.board-card.attack-target:hover {
  transform: scale(1.08);
  filter: brightness(1.18);
  z-index: 50;
  transition: transform 0.12s, filter 0.12s;
}
.hero-card.attack-target:hover {
  transform: scale(1.18);
}

/* ===== Attack animations ===== */

@keyframes attack-flash-anim {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50%      { filter: brightness(1.45) drop-shadow(0 0 14px rgba(255, 220, 100, 0.95)); }
}
.attack-flash { animation: attack-flash-anim 400ms ease-out; }

@keyframes hit-flash-anim {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 transparent; }
  50%      {
    box-shadow:
      inset 0 0 28px 6px rgba(255, 60, 60, 0.75),
      0 0 14px rgba(255, 60, 60, 0.7);
  }
}
.hit-flash { animation: hit-flash-anim 400ms ease-out; }

/* Death (shatter) — default smrť animácia. Karta sa pulse-uje, scale-down, rotate, fade.
   Hero má samostatnú variantu, lebo má základný transform: scale(1.1). */
@keyframes shatter-anim {
  0%   { transform: scale(1) rotate(0deg);    opacity: 1; filter: brightness(1); }
  18%  { transform: scale(1.18) rotate(-5deg); opacity: 1; filter: brightness(1.7) drop-shadow(0 0 14px #fff); }
  100% { transform: scale(0.35) rotate(22deg); opacity: 0; filter: brightness(0.4) blur(2px); }
}
.board-card.shatter { animation: shatter-anim 600ms ease-in forwards; }

@keyframes shatter-hero-anim {
  0%   { transform: scale(1.1) rotate(0deg);    opacity: 1; filter: brightness(1); }
  18%  { transform: scale(1.28) rotate(-5deg);  opacity: 1; filter: brightness(1.7) drop-shadow(0 0 16px #fff); }
  100% { transform: scale(0.4) rotate(22deg);   opacity: 0; filter: brightness(0.4) blur(2px); }
}
.hero-card.shatter { animation: shatter-hero-anim 600ms ease-in forwards; }

/* Heal flash — zelený pulse pri liečení. */
@keyframes heal-flash-anim {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50%      {
    box-shadow:
      inset 0 0 28px 6px rgba(100, 220, 120, 0.75),
      0 0 14px rgba(100, 220, 120, 0.7);
  }
}
.heal-flash { animation: heal-flash-anim 600ms ease-out; }

/* Venom flash — zelenožltý pulse pri Bee Sting buff. */
@keyframes venom-flash-anim {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50%      {
    box-shadow:
      inset 0 0 28px 6px rgba(160, 220, 60, 0.75),
      0 0 14px rgba(160, 220, 60, 0.7);
  }
}
.venom-flash { animation: venom-flash-anim 600ms ease-out; }

/* Venom tick shake — fialový pulse + zatrasenie karty. Hero variant zachová scale(1.1). */
@keyframes venom-shake-anim {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-5px) rotate(-1deg); }
  30%      { transform: translateX(5px) rotate(1deg); }
  45%      { transform: translateX(-4px) rotate(-0.6deg); }
  60%      { transform: translateX(4px) rotate(0.6deg); }
  75%      { transform: translateX(-2px); }
}
.board-card.venom-shake {
  animation: venom-shake-anim 500ms ease-out;
  box-shadow: 0 0 16px rgba(183, 110, 255, 0.7), inset 0 0 18px rgba(183, 110, 255, 0.4);
}
@keyframes venom-shake-anim-hero {
  0%, 100% { transform: scale(1.1) translateX(0); }
  15%      { transform: scale(1.1) translateX(-5px) rotate(-1deg); }
  30%      { transform: scale(1.1) translateX(5px) rotate(1deg); }
  45%      { transform: scale(1.1) translateX(-4px) rotate(-0.6deg); }
  60%      { transform: scale(1.1) translateX(4px) rotate(0.6deg); }
  75%      { transform: scale(1.1) translateX(-2px); }
}
.hero-card.venom-shake {
  animation: venom-shake-anim-hero 500ms ease-out;
  box-shadow: 0 0 16px rgba(183, 110, 255, 0.7), inset 0 0 18px rgba(183, 110, 255, 0.4);
}

/* Punch shake — rapid horizontal oscilácia s tmavým inset shadow (preliačina feel).
   Rýchlejšia než venom-shake (~260ms, 5 cyklov), bez rotácie — punch je priamy
   impact, nie chvenie. Hero variant zachová scale(1.1). */
@keyframes punch-shake-anim {
  0%, 100% { transform: translateX(0); }
  12%      { transform: translateX(-6px); }
  28%      { transform: translateX(5px); }
  44%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  78%      { transform: translateX(-2px); }
}
.board-card.punch-shake {
  animation: punch-shake-anim 260ms ease-out;
  box-shadow: inset 0 0 22px rgba(20, 10, 5, 0.55), 0 0 8px rgba(40, 20, 10, 0.5);
}
@keyframes punch-shake-anim-hero {
  0%, 100% { transform: scale(1.1) translateX(0); }
  12%      { transform: scale(1.1) translateX(-6px); }
  28%      { transform: scale(1.1) translateX(5px); }
  44%      { transform: scale(1.1) translateX(-4px); }
  60%      { transform: scale(1.1) translateX(3px); }
  78%      { transform: scale(1.1) translateX(-2px); }
}
.hero-card.punch-shake {
  animation: punch-shake-anim-hero 260ms ease-out;
  box-shadow: inset 0 0 22px rgba(20, 10, 5, 0.55), 0 0 8px rgba(40, 20, 10, 0.5);
}

/* Pack-hunt overlay — Vlkov "Lov v svorke" ability. Fullscreen image
   fade-in / hold / fade-out. Trvanie timing-ov sa nastavuje inline cez
   CSS variables (`--fade-in`, `--hold`, `--fade-out`) v ui-anim.js. */
.pack-hunt-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: var(--z-stingers);
  animation: pack-hunt-anim
    calc(var(--fade-in, 200ms) + var(--hold, 400ms) + var(--fade-out, 600ms))
    ease-out forwards;
}
.pack-hunt-overlay img {
  max-width: 60%;
  max-height: 70%;
  filter: drop-shadow(0 0 24px rgba(255, 220, 140, 0.55));
}
@keyframes pack-hunt-anim {
  0%   { opacity: 0; transform: scale(0.85); }
  16%  { opacity: 1; transform: scale(1.0); }   /* po fade-in (200ms / 1200ms = 0.167) */
  50%  { opacity: 1; transform: scale(1.02); }  /* hold (do 600ms / 1200ms = 0.5) */
  100% { opacity: 0; transform: scale(1.05); }
}

/* Buff flash — zlatý pulse pri pozitívnom buff. */
@keyframes buff-flash-anim {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50%      {
    box-shadow:
      inset 0 0 28px 6px rgba(255, 213, 74, 0.75),
      0 0 14px rgba(255, 213, 74, 0.7);
  }
}
.buff-flash { animation: buff-flash-anim 500ms ease-out; }

/* Zúrivosť (Fury) — persistent červený glow + subtle pulsing kým má card
   zurivost_stacks. Engine decrementuje stacks na end-of-turn → glow drží
   celé trvanie buffu. Box-shadow layered (inset + outer) pre rage feel. */
@keyframes fury-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 18px 4px rgba(229, 53, 53, 0.55),
      0 0 10px 2px rgba(229, 53, 53, 0.5);
  }
  50% {
    box-shadow:
      inset 0 0 26px 6px rgba(255, 80, 80, 0.75),
      0 0 18px 4px rgba(255, 80, 80, 0.75);
  }
}
.board-card.fury {
  animation: fury-pulse 1100ms ease-in-out infinite;
}

/* ===== Cast popup — opponent's spell reveal v strede obrazovky ===== */

.cast-popup {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-abilities);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  animation: cast-popup-anim 4000ms ease-out forwards;
}
@keyframes cast-popup-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  6%   { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  92%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
.cast-popup-card {
  width: 220px;
  height: 308px;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid #d2a24c;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.85), 0 0 36px rgba(210, 162, 76, 0.5);
}
.cast-popup-card .name-badge {
  top: 8px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 10px;
  border-radius: 4px;
  max-width: 200px;
}
.cast-popup-card .cost-badge {
  width: 32px;
  height: 32px;
  font-size: 18px;
  top: -10px;
  right: -10px;
}
/* Secret trap cast popup — face-down art, "Pasca" generic name, tier badge.
   Žiadny popis, žiadna identifikácia. */
.cast-popup-card.face-down {
  background-image: url('data/art/cards/face-down-trap.webp');
}
.cast-popup-card .trap-tier-badge {
  /* zachovaj base style z .trap-tier-badge, ale väčšie pre cast popup. */
  width: 32px;
  height: 32px;
  top: -10px;
  left: -10px;
}
.cast-popup-card .trap-tier-badge .gear-icon {
  width: 22px;
  height: 22px;
}
.cast-popup-desc {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #5a4a30;
  border-radius: 6px;
  padding: 12px 16px;
  width: 320px;
  font-size: 18px;
  color: #ddd;
  text-align: center;
  line-height: 1.4;
}

/* Block glow — kým blocker vstupuje do dráhy útoku. */
@keyframes block-glow-anim {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50%      { box-shadow: 0 0 24px 6px rgba(120, 200, 255, 0.85), inset 0 0 14px rgba(120, 200, 255, 0.4); }
}
.block-glow { animation: block-glow-anim 500ms ease-out; }

/* Directional bump — útočník alebo blocker sa krátko posunie smerom k druhej karte.
   --bump-x / --bump-y nastavuje JS pri spustení animácie. */
@keyframes bump-anim {
  0%, 100% { transform: translate(0, 0); }
  40%      { transform: translate(var(--bump-x, 0), var(--bump-y, 0)); }
}
.board-card.bump { animation: bump-anim 400ms ease-out; }

/* Hero má základný transform: scale(1.1) — bump musí zachovať scale. */
@keyframes bump-hero-anim {
  0%, 100% { transform: scale(1.1) translate(0, 0); }
  40%      { transform: scale(1.1) translate(var(--bump-x, 0), var(--bump-y, 0)); }
}
.hero-card.bump { animation: bump-hero-anim 400ms ease-out; }

/* ===== Hover na klikateľné karty (grid layout = ostatné karty sa nehýbu) ===== */

.board-card.can-attack:hover,
.board-card.targetable:hover,
.board-card.spell-target:hover,
.board-card.attacker-selected:hover {
  transform: scale(1.08);
  filter: brightness(1.18) drop-shadow(0 0 12px rgba(255, 220, 100, 0.7));
  z-index: 50;
  transition: transform 0.12s, filter 0.12s;
}

.hero-card:not(.is-down):hover {
  transform: scale(1.18);
  filter: brightness(1.15) drop-shadow(0 0 16px rgba(255, 220, 100, 0.6));
  z-index: 50;
  transition: transform 0.12s, filter 0.12s;
}

/* Override hover z-indexes pre karty s otvoreným fan-om — hover nasimuluje
   downgrade na z=50 (`.hero-card:hover`, `.can-attack:hover`), čo by skryl fan
   pod opponent-om. Re-assert 9500 explicit :hover selektor-mi, po hover rule
   v source order aby ich pri rovnakej specificity prebili. */
.hero-card.has-popup,
.hero-card.has-popup:hover,
.board-card.has-popup,
.board-card.has-popup:hover {
  z-index: var(--z-abilities);   /* karta tej istej tier ako popup, popup vyšší v DOM order */
}

.hand-card.playable:hover {
  transform: translateY(-14px) scale(1.06);
  filter: brightness(1.12) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  z-index: 50;
  transition: transform 0.15s, filter 0.15s;
}

#anim-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-animations);
}

.floating-damage {
  position: fixed;
  transform: translate(-50%, 0);
  font-size: 48px;
  font-weight: 900;
  color: #ff4444;
  /* z-index 420: nad fx-canvas (380) + cast-flight (400) — damage text musí
     byť čitateľný cez lightning bolt aj flying spell card. */
  z-index: 420;
  font-family: 'Cinzel', serif;
  text-shadow:
    0 0 2px #000,
    0 3px 6px #000,
    0 0 14px rgba(255, 50, 50, 0.7),
    0 0 24px rgba(255, 50, 50, 0.45);
  pointer-events: none;
  animation: damage-float 1800ms cubic-bezier(0.18, 0.65, 0.25, 1) forwards;
  letter-spacing: 1px;
}
.floating-damage.trap { color: #66cc88; }
.floating-damage.heal { color: #66ff88; }
.floating-damage.buff { color: #ffd54a; }
/* Stat-buff float (floatStatBuff) — badge(s) majú fixnú veľkosť nezávislú od 48px
   parent font-size, inak by em-based stat-token bol obrovský. */
.floating-damage .stat-token { font-size: 30px; }
.floating-damage.block {
  color: #6ec3ff;
  font-size: 38px;
  text-shadow: 0 2px 4px #000, 0 0 14px rgba(110, 195, 255, 0.85), 0 0 4px #000;
}
.floating-damage.venom {
  color: #c280ff;
  font-size: 38px;
  text-shadow:
    0 0 2px #000,
    0 3px 6px #000,
    0 0 14px rgba(183, 110, 255, 0.85),
    0 0 24px rgba(183, 110, 255, 0.45);
}
.floating-damage.heal {
  color: #66ff88;
  font-size: 42px;
  text-shadow:
    0 0 2px #000,
    0 3px 6px #000,
    0 0 14px rgba(102, 255, 136, 0.7),
    0 0 24px rgba(102, 255, 136, 0.4);
}
.floating-damage.pacified {
  color: #b4f078;
  font-size: 32px;
  text-shadow: 0 2px 5px #000, 0 0 12px rgba(120, 220, 80, 0.7), 0 0 4px #000;
}

@keyframes damage-float {
  0%   { transform: translate(-50%, 14px) scale(0.4); opacity: 0; }
  10%  { transform: translate(-50%, -8px) scale(1.35); opacity: 1; }
  18%  { transform: translate(-50%, -14px) scale(1.05); opacity: 1; }
  70%  { transform: translate(-50%, -60px) scale(1.0); opacity: 0.95; }
  100% { transform: translate(-50%, -90px) scale(0.85); opacity: 0; }
}

/* ===== Trap trigger — Prašivka fog overlay ===== */
.trap-fog-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 30% 40%, rgba(200, 220, 200, 0.55), transparent 60%),
    radial-gradient(ellipse 70% 50% at 70% 55%, rgba(190, 200, 180, 0.55), transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 30%, rgba(210, 220, 210, 0.45), transparent 60%),
    linear-gradient(180deg, rgba(180, 195, 175, 0.35), rgba(150, 165, 145, 0.45));
  filter: blur(3px);
  opacity: 0;
  animation: trap-fog 1800ms ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes trap-fog {
  0%   { opacity: 0; transform: scale(1.15); }
  25%  { opacity: 0.95; transform: scale(1); }
  70%  { opacity: 0.85; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(0.95); }
}
.trap-trigger-flash {
  animation: trap-trigger-flash 500ms ease-out;
}
@keyframes trap-trigger-flash {
  0%   { box-shadow: 0 0 0 0 rgba(180, 220, 180, 0); filter: brightness(1); }
  30%  { box-shadow: 0 0 24px 8px rgba(180, 220, 180, 0.85); filter: brightness(1.4); }
  100% { box-shadow: 0 0 0 0 rgba(180, 220, 180, 0); filter: brightness(1); }
}

/* Cast flight clone — replika hand-card-y ktorá letí z ruky do stredu, pauzuje
   a pokračuje na cieľovú pozíciu na boarde. Položená cez animLayer (fixed),
   takže `left/top` v pixel coords zo screen rect. */
.cast-flight {
  position: fixed;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #000;
  border-radius: 8px;
  pointer-events: none;
  z-index: var(--z-tooltips);   /* cast-flight transient overlay, nad ostatným UI */
  transform-origin: center center;
  transform: scale(1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75), 0 0 18px rgba(255, 213, 74, 0.25);
  filter: drop-shadow(0 0 6px rgba(255, 213, 74, 0.4));
}

/* Source-pulse — generický "TÁTO karta spôsobila efekt" indikátor. Zlatý glow
   ring + krátky scale bump priťahuje oko k zdroju pred/počas tým, ako sa
   prejaví efekt na cieli (damage float, death, atď). Aplikuje sa cez `flashCard`. */
.source-pulse {
  animation: source-pulse-anim 700ms cubic-bezier(0.3, 0.8, 0.4, 1);
  z-index: 60;
  position: relative;
}
@keyframes source-pulse-anim {
  0%   { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0); transform: scale(1); }
  25%  { box-shadow: 0 0 28px 8px rgba(255, 213, 74, 0.9), 0 0 48px 16px rgba(255, 213, 74, 0.4);
         transform: scale(1.08); }
  60%  { box-shadow: 0 0 20px 4px rgba(255, 213, 74, 0.6); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0); transform: scale(1); }
}

/* Board card face-down — regulérny 3D flipper. Dva face-y (back + front), parent
   sa rotuje 0→180deg. `backface-visibility: hidden` skryje "zadnú stranu" každého
   face-u, takže front (rotated 180) je v základe skrytý a back (rotated 0) viditeľný.
   Po flip animácii sa parent zastaví v rotateY(180) — front sa stane viditeľným,
   back skrytý. Najbližší render dá regular trap card (žiadne flipper), seamless. */
.board-card.face-down {
  background: transparent;
  border: none;
  position: relative;
  transform-style: preserve-3d;
  cursor: help;
}
.board-card.face-down .card-face {
  position: absolute;
  inset: 0;
  border: 1px solid #000;
  border-radius: 8px;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.board-card.face-down .card-back {
  background-image: url('data/art/cards/face-down-trap.webp');
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}
.board-card.face-down .card-front {
  transform: rotateY(180deg);
}

/* Flip anim — parent sa rotuje, forwards drží final state (rotateY 180) kým render
   nezamení DOM na regular kartu. `perspective` v transform-e (nie na grandparent-e)
   aby sme nezasahovali do okolitého layoutu. */
.board-card.face-down.flipping {
  animation: card-flip 700ms cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
@keyframes card-flip {
  from { transform: perspective(800px) rotateY(0deg); }
  to   { transform: perspective(800px) rotateY(180deg); }
}

/* ===== Opponent turn banner ===== */

.opponent-turn-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(40, 30, 20, 0.92);
  color: #d2a24c;
  padding: 6px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  z-index: 150;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.end-turn-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== Badges ===== */

.badge {
  position: absolute;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  user-select: none;
}

.name-badge {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1.1;
  max-width: 108px;
  text-align: center;
  /* Wrap to max 2 lines + ellipsis ak text stále nesedí.
     overflow-wrap (nie word-break!) — preferuje break pri medzere ("Útočná Včela"
     → "Útočná\nVčela"), mid-word break iba ak slovo samé nesedí ("Magické skúsenosti"
     → "Magické\nskúsenosti" alebo "Magic-\nké skús..."). word-break: break-word by
     bol agresívnejší a lámal aj keď stačí break pri medzere. */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.9);
}
/* Long-name shrink — JS dáva `.name-long` class na .name-badge ak text.length > 14
   chars. Font klesne na 12px aby sa zmestili 2 riadky bez ellipsis truncation. */
.name-badge.name-long {
  font-size: 12px;
}
.name-badge.name-very-long {
  font-size: 11px;
  letter-spacing: 0.5px;
}

.cost-badge {
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  background: #1a1a1a;
  border: 2px solid #000;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Trap tier badge — top-left, kruh ako cost-badge ale "tier-coded". Gear ikona vždy biela.
   tier-basic = hnedý, tier-advanced = strieborný (silnejšie verzie ako Hlboká jama). */
.trap-tier-badge {
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  border: 2px solid #000;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 1;
}
.trap-tier-badge.tier-basic    { background: #6b4423; }   /* hnedá */
.trap-tier-badge.tier-advanced {
  background: linear-gradient(160deg, #d8d8e0 0%, #9a9aa6 100%);  /* leštená oceľ */
}
.trap-tier-badge .gear-icon {
  width: 16px;
  height: 16px;
  color: #fff;                /* SVG path má fill="currentColor" → vždy biela */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

.attack-badge, .hp-badge {
  position: absolute;
  left: -8px;
  width: 28px;
  height: 28px;
  border-radius: 7px;       /* "oblý štvorec" */
  border: 1px solid rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.7);
  z-index: 1;
  transform: translateZ(0);  /* GPU layer — anti-jitter pri parent scale */
  backface-visibility: hidden;
}
/* Pozadie pre veľkú tmavú ikonu za číslom — ::before pseudo. */
.attack-badge::before, .hp-badge::before {
  content: attr(data-icon);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  font-variant-emoji: text;
  z-index: 1;
  pointer-events: none;
}
.attack-badge .bv, .hp-badge .bv {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;  /* explicitne v grid centri */
}

.attack-badge        { top: 22px; background: #3d7ad6; }
.attack-badge::before { color: #143a72; }   /* tmavomodrý meč */

.hp-badge            { top: 56px; background: #d63d3d; }
.hp-badge::before    { color: #6e1414; }   /* tmavočervené srdce */

/* Venom counter — fialový badge pod hp-badge na ľavom stripe. SVG kvapka tmavá za
   bielym číslom (paralel s attack ⚔ a hp ❤). Badge sa zobrazí iba ak unit.venom > 0. */
.venom-badge {
  position: absolute;
  left: -8px;
  top: 90px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.7);
  background: #9b4dca;          /* fialová */
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.venom-badge .venom-drop {
  position: absolute;
  inset: 3px;
  width: auto;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.venom-drop-dark { fill: #3d1a5e; }       /* tmavá fialová kvapka pod číslom */
.venom-drop-light { fill: #fff; }         /* biela kvapka pre keyword badge */
.venom-badge .bv {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
}

/* Keyword badge stack — pravá strana karty, flex column, auto-stacking bez
   hardcoded top:Npx pozícií. `_renderKeywordBadgeStack(unit)` v ui.js generuje
   wrapper iba ak existuje aspoň jeden keyword. Každá variant trieda len background. */
.keyword-badge-stack {
  position: absolute;
  right: -8px;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
  pointer-events: auto;
}
.keyword-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  position: relative;   /* immunity-ranged-badge children sú absolute v rámci tohto */
}
.strelec-badge       { background: #4a7a3a; }   /* zelený — lesný lukostrelec */
/* Bow-and-arrow ikona — zdroj data/art/icons/bow-and-arrow.svg, inline cez
   _renderBowSvg(). Biele fill cez currentColor. Použité v strelec-badge +
   ako base v immunity-ranged-badge (s diagonal slash overlay). */
.bow-icon {
  width: 18px;
  height: 18px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
/* Venom keyword (inflicts_venom > 0) — fialový badge s bielou kvapkou, BEZ čísla.
   Pod strelec-badge na pravom stripe (top: 56px = level hp-badge na druhej strane). */
.venom-keyword-badge { background: #9b4dca; }
.venom-keyword-badge .venom-drop {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
/* Rýchly badge (keyword_rychly) — žltý blesk, MTG first-strike ekvivalent.
   Pravá strana, top: 90px (pod venom-keyword na 56). */
.rychly-badge { background: #c79b00; }
.rychly-icon {
  width: 18px;
  height: 18px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
/* Neúnavný badge (keyword_neunavny) — modrý štít s nekonečnom. Tank archetype. */
.neunavny-badge { background: #2e5fa3; }
.neunavny-icon {
  width: 20px;
  height: 20px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
/* Zlodej badge (keyword thief) — hnedý hooded figure. Pri hite na hera odhodí
   N náhodných kariet z jeho ruky (engine `_resolveAttack` thief block). */
.thief-badge { background: #5a3a1c; }
.thief-icon {
  width: 18px;
  height: 18px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
/* Odveta badge (keyword_odveta) — červený s thorn-star ikonou. Rebalance 2026-06-16:
   return damage je opt-in cez keyword_odveta. Tŕne canonical example. */
.odveta-badge { background: #a02828; }
.odveta-icon {
  width: 18px;
  height: 18px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
/* Air badge (keyword_air) — bledomodrý s butterfly silhouette ikonou (biela cez
   CSS mask). Flying — ignoruje terrain efekty (Močiar). Včely typically. */
.air-badge { background: #3d7eb8; }
.air-icon {
  width: 20px;
  height: 16px;
  background: #fff;
  -webkit-mask: url('data/art/icons/Abstract-Butterfly-Silhouette-2.svg') center / contain no-repeat;
          mask: url('data/art/icons/Abstract-Butterfly-Silhouette-2.svg') center / contain no-repeat;
  /* 8-directional white drop-shadows na 2.5px offset = solid outline ~2.5px hrubý
     okolo silhouette. Cardinal + diagonals pre uzavretú obálku bez gaps. Posledný
     tmavý shadow je depth pre separation od badge background. */
  filter:
    drop-shadow(4.5px 0 0 #fff)
    drop-shadow(-4.5px 0 0 #fff)
    drop-shadow(0 4.5px 0 #fff)
    drop-shadow(0 -4.5px 0 #fff)
    drop-shadow(3.2px 3.2px 0 #fff)
    drop-shadow(-3.2px 3.2px 0 #fff)
    drop-shadow(3.2px -3.2px 0 #fff)
    drop-shadow(-3.2px -3.2px 0 #fff)
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6));
}
/* Únava overlay — companion blocked_this_turn=true a nie neúnavný. Sivý "💢"
   znak (anger swirl). Iba info — pacified prekreslí svojím Z dôvodom (oba flagy
   teoreticky možné, pacified má prioritu lebo broader effect). */
.unava-overlay {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(20, 15, 10, 0.75);
  border-radius: 50%;
  border: 1px solid #5a4a30;
  pointer-events: auto;
}

/* Immunity badges — dopravná "zákaz" značka (červené kruhové prekríženie nad
   keyword ikonou). Pridať vždy nový variant pre každý ďalší immunity_X
   (immunity_magic, immunity_air, immunity_venom...). */
.immunity-ranged-badge { background: #1a1208; }
.immunity-ranged-badge .bow-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.immunity-slash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}

/* Card tooltip — riadi generic tooltip.js cez data-tt na hand-card / board-card.
   Štýly žijú v sekcii ".tooltip-floating .tt-*" vyššie. */

/* Stat tokens v description-och — rovnaký štýl ako card badges
   (oblý štvorec, ::before ikona v pozadí, biele číslo navrchu). */
.stat-token {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  border-radius: 0.35em;
  border: 1px solid rgba(0, 0, 0, 0.55);
  font-weight: 800;
  font-size: 0.95em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
  vertical-align: -0.18em;
  margin: 0 2px;
  cursor: help;
  overflow: hidden;
}
.stat-token::before {
  content: attr(data-icon);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.25em;
  font-variant-emoji: text;
  z-index: 1;
  pointer-events: none;
}
.stat-token .bv { position: relative; z-index: 2; }

.stat-token.stat-attack          { background: #3d7ad6; }
.stat-token.stat-attack::before  { color: #143a72; }
.stat-token.stat-hp              { background: #d63d3d; }
.stat-token.stat-hp::before      { color: #6e1414; }
/* Heal — zelený HP badge (liečenie), odlíšený od červeného HP-statu. */
.stat-token.stat-heal            { background: #3a9d5a; }
.stat-token.stat-heal::before    { color: #16431f; }
/* Damage — priame poškodenie (Iskra, Úder zhora). Tmavo-červený s "explózia" tónom. */
.stat-token.stat-damage          { background: #c43838; padding: 0 0.45em; }
/* Venom — fialová pre Jed tokens (Otravenie, Smrteľné uštipnutie). */
.stat-token.stat-venom           { background: #9b4dca; padding: 0 0.45em; }
.stat-token.stat-thief           { background: #5a3a1c; padding: 0 0.45em; }
/* Draw — modro-zelená pre kúzlo/karta tokens (Kúzelná palica). */
.stat-token.stat-draw            { background: #3a8f7a; padding: 0 0.45em; }

/* ===== Hero popup ===== */

/* ===== Radial ability fan — kruhový popup okolo jednotky ===== */
/* Kontainer sa nakreslí inside board-card-u (position: absolute relative to card).
   Stred je v strede karty (50% / 50%) a každá .fan-icon je posunutá inline cez
   `left/top` (px offset z JS — cos/sin polárne k stredu). Container má 0 size aby
   ikony "obkolesili" kartu namiesto byť stláčané do bounding boxu. */
.ability-fan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 200;
  pointer-events: none;
}
.fan-icon {
  position: absolute;
  width: 56px;
  height: 56px;
  /* left/top z JS — inline transform vystreduje na bod. */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5a4a30, #2a1f15 80%);
  /* --fan-border je inline-set na .ability-fan: hero glow_color alebo generic #5a4a30. */
  border: 2px solid var(--fan-border, #5a4a30);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 220, 160, 0.25);
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.12s ease-out, filter 0.12s, box-shadow 0.12s;
  animation: fan-icon-pop 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fan-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}
.fan-icon:hover:not(.disabled) {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.75), 0 0 18px rgba(255, 220, 140, 0.55), inset 0 1px 0 rgba(255, 240, 200, 0.4);
  filter: brightness(1.1);
}
.fan-icon.disabled {
  filter: grayscale(0.75) brightness(0.5);
  cursor: not-allowed;
  border-color: #5a4a30;
}
.fan-cost-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: linear-gradient(180deg, #3a5fae, #1a2a5a);
  border: 2px solid #0f1a3a;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
@keyframes fan-icon-pop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Fan icon tooltip — riadi generic tooltip.js cez data-tt na .fan-icon. */

/* ===== Dev panel (~ toggle) — pravý fixed sidebar pre debug tooling ===== */
#dev-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: rgba(15, 12, 8, 0.95);
  border-left: 2px solid #4a4030;
  color: #f0e8d0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 12px;
  z-index: var(--z-top);
  overflow-y: auto;
  padding: 10px 14px;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.7);
}
.dev-header {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffd54a;
  padding: 4px 0 10px;
  border-bottom: 1px solid #4a4030;
  margin-bottom: 10px;
}
.dev-section {
  padding: 8px 0;
  border-bottom: 1px solid #2a2418;
}
.dev-section h4 {
  font-size: 11px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-weight: 600;
}
.dev-section label {
  display: block;
  margin: 4px 0;
  font-size: 11px;
  color: #ccc;
}
.dev-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.dev-btn {
  background: #2a2418;
  color: #f0e8d0;
  border: 1px solid #5a4a30;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dev-btn:hover { background: #3a3020; border-color: #d2a24c; }
.dev-btn.small { padding: 2px 6px; font-size: 10px; }
.dev-btn.active { background: #d2a24c; color: #1a1208; border-color: #d2a24c; }
.dev-num, .dev-select {
  background: #1a1208;
  color: #f0e8d0;
  border: 1px solid #4a4030;
  padding: 3px 6px;
  font-size: 11px;
  margin-left: 4px;
  width: 70px;
  font-family: inherit;
}
.dev-select { width: 100%; margin-left: 0; }
.dev-slider { width: 100%; }
.dev-toggle { display: flex; align-items: center; gap: 6px; }
.dev-toggle input { margin: 0; }
.dev-enc-list {
  max-height: 240px;
  overflow-y: auto;
}
.dev-enc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 10px;
  border-bottom: 1px dotted #2a2418;
}
.dev-enc-row.done { opacity: 0.5; }
.dev-enc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.dev-unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 10px;
}
.dev-hint { font-size: 11px; color: #888; font-style: italic; }

/* ===== Intro book ===== */
/* Fullscreen overlay nad celou hrou. Klik = skip celého intra (fast-flip
   cez zvyšok). Layout: kniha v strede s viditeľným dreveným rámom, dvomi
   stranami a 3D page-flip cez stred (perspective parent). */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: radial-gradient(ellipse at center, #1a0f08 0%, #000 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 2000ms ease;
  cursor: pointer;
}
.intro-overlay--visible { opacity: 1; }
.intro-overlay--exiting { opacity: 0; }

.intro-book {
  position: relative;
  width: min(92vw, 1400px);
  height: min(82vh, 850px);
  perspective: 2400px;
  /* Drevený rám + pergamenové pozadie pod stranami */
  background:
    linear-gradient(180deg, #5a3a1c 0%, #3d2510 100%);
  border-radius: 6px;
  box-shadow:
    0 0 0 2px #2a1808,
    0 30px 80px rgba(0, 0, 0, 0.8),
    inset 0 0 0 14px #4a2f15,
    inset 0 0 0 16px #6b4520,
    inset 0 0 60px rgba(0, 0, 0, 0.6);
  padding: 22px;
}

/* Stredový chrbát knihy — tieň + jemná drážka */
.intro-book__frame {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 50%;
  width: 14px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.6) 45%,
      rgba(0,0,0,0.7) 50%,
      rgba(0,0,0,0.6) 55%,
      rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 5;
}

.intro-book__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Statické strany — vždy viditeľné pod flipperom. */
.intro-page {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  background: #c9a674;
  box-shadow: inset 0 0 80px rgba(60, 35, 15, 0.5);
}
.intro-page--left  { left: 0;  border-right: 1px solid rgba(0,0,0,0.25); }
.intro-page--right { left: 50%; border-left: 1px solid rgba(0,0,0,0.25); }

.intro-page__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Pergamen pre text-only stránky — teplé sépia s jemnou vinetou. */
.intro-page__paper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, #e0c189 0%, #b8975a 75%, #8d6e3c 100%);
}
.intro-page__paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(70, 40, 15, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(70, 40, 15, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.intro-page__text {
  position: absolute;
  left: 8%;
  right: 8%;
  display: flex;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  color: #3a2510;
  text-align: center;
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}
.intro-page__text--top    { top: 8%; }
.intro-page__text--center { top: 50%; transform: translateY(-50%); }
.intro-page__text--bottom { bottom: 8%; }

.intro-page__text--small  { font-size: clamp(14px, 1.4vw, 20px); }
.intro-page__text--normal { font-size: clamp(18px, 2vw, 28px); }
.intro-page__text--large  {
  font-size: clamp(28px, 3.6vw, 56px);
  font-family: 'Cinzel', serif;
  font-style: normal;
  letter-spacing: 2px;
  font-weight: 700;
}

.intro-page__title {
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 1.4em;
  margin-bottom: 8px;
  color: #2a1808;
}
.intro-page__body { font-style: italic; }

/* Text na obrázku — polopriesvitný parchment box s rovnakým tonom. */
.intro-page__text--overlay span {
  display: inline-block;
  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(224, 193, 137, 0.92), rgba(184, 151, 90, 0.92));
  border: 1px solid rgba(60, 35, 15, 0.5);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  max-width: 92%;
}

/* Flipper — overlay nad pravou polovicou, pivot na ľavej hrane (= stred knihy).
   Rotácia z 0 → -180deg "preklopí" stranu sprava doľava. */
.intro-flipper {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  display: none;
  z-index: 10;
  will-change: transform;
}
.intro-flipper__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #c9a674;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(60, 35, 15, 0.5);
}
/* Back face = rotated 180 cez Y, aby obsah čítal normálne keď flipper dorotuje. */
.intro-flipper__face--back {
  transform: rotateY(180deg);
  border-right: 1px solid rgba(0,0,0,0.25);
}
.intro-flipper__face--front {
  border-left: 1px solid rgba(0,0,0,0.25);
}

.intro-hint {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(240, 232, 208, 0.5);
  font-style: italic;
  letter-spacing: 1px;
  pointer-events: none;
}

/* Pacified — jednotka omráčená (Skunk smrad / Sieť). Desaturate + green tint + ZZZ overlay.
   Štýl analogický s is-down ale zelený namiesto sivého, a animovaný spi-effect. */
.board-card.pacified {
  filter: grayscale(0.55) brightness(0.7) hue-rotate(40deg);
}
.board-card.pacified .badge { opacity: 0.7; }
.pacified-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 800;
  color: rgba(180, 240, 120, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1), 0 0 12px rgba(120, 220, 80, 0.6);
  letter-spacing: 3px;
  pointer-events: none;
  animation: pacified-bob 1800ms ease-in-out infinite;
}
@keyframes pacified-bob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); opacity: 0.95; }
  50%      { transform: translate(-50%, -55%) translateY(-3px); opacity: 0.65; }
}

/* Silenced (Umlčujúca pieseň) — zakrýva si uši, nemôže kúzliť. Fialový tón. */
.silenced-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 1));
  animation: pacified-bob 1800ms ease-in-out infinite;
}

/* Pacified flash — krátky zelený puff pri aplikácii. */
@keyframes pacified-flash-anim {
  0%, 100% { box-shadow: 0 0 0 0 transparent; filter: brightness(1.0); }
  40%      { box-shadow: 0 0 24px rgba(160, 240, 110, 0.85), inset 0 0 20px rgba(120, 220, 80, 0.4); filter: brightness(1.25) hue-rotate(30deg); }
  70%      { box-shadow: 0 0 14px rgba(160, 240, 110, 0.55); filter: brightness(1.1); }
}
.board-card.pacified-flash,
.hero-card.pacified-flash {
  animation: pacified-flash-anim 700ms ease-out;
}

/* ===== Sleeping (keyword_sleeper v noci) =====
   Symetricky s pacified ale modrý tint — sleeper jednotka spí v noci
   (idx 6+ = Večer/Noc/Polnoc/Pred úsvitom). Nemôže útočiť, nevracia damage.
   Cez deň má +1 attack bonus. */
.board-card.sleeping {
  filter: grayscale(0.4) brightness(0.55) hue-rotate(-30deg) saturate(0.7);
}
.board-card.sleeping .badge { opacity: 0.7; }
.sleeping-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 38px;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(120, 160, 230, 0.7);
  animation: sleeping-bob 2200ms ease-in-out infinite;
}
@keyframes sleeping-bob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); opacity: 0.95; }
  50%      { transform: translate(-50%, -55%) translateY(-4px); opacity: 0.55; }
}

/* ===== Sentinel (rotujúca hliadka roja) =====
   Jediná zobudená sleeper jednotka per strana — derived z board state (prvý
   alive sleeper companion v slot order). Keď zomrie, ďalší v poradí ho
   implicitne nahradí pri ďalšom render. Vizuál: jemný červený glow
   + 👁 overlay (vigilance). Žiadny dim filter — sentinel je plne aktívna. */
.board-card.sentinel {
  box-shadow: 0 0 14px rgba(255, 110, 90, 0.55), inset 0 0 16px rgba(255, 100, 90, 0.18);
}
.sentinel-overlay {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 22px;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 120, 100, 0.8);
  animation: sentinel-pulse 1600ms ease-in-out infinite;
}
@keyframes sentinel-pulse {
  0%, 100% { opacity: 1.0; transform: scale(1.0); }
  50%      { opacity: 0.7; transform: scale(1.12); }
}

/* ===== Ranged hit — arrow stuck v cieli =====
   Šíp je position:fixed v anim-layer, tip pri impact bode na karte. Shaft +
   peria voľne prečnievajú nahor mimo kartu (žiadny clip). Random ±20deg náklon
   per hit pre variabilitu. Stays do konca combatu (cleanup v _startCombatForEncounter).
   Per [[todo_explicit_animations]] — keyword_ranged univerzálny visual. */
img.arrow-stuck {
  position: fixed;
  display: block;
  pointer-events: none;
  z-index: 9000;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
  transform-origin: center bottom;
  transition: opacity 600ms ease-out;
}
img.arrow-stuck.fade {
  opacity: 0;
}