:root { --tile-w: 260px; --tile-h: 185px; --gap: 10px; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #0e0f12; color: #fff; overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ========== Arena bg ========== */
.arena { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.arena .layer {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  pointer-events: none;
  image-rendering: pixelated; /* tvrdé pixely pri upscale namiesto rozmazania */
}
/* statický CRT overlay — jemné scanlines + tmavšie rohy; bez animácie (šetrí GPU/RDP) */
.arena::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 10; /* nad vrstvami arény (tie majú z-index 0–4 z JS), stále pod hracou plochou */
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0 2px,
      rgba(0,0,0,.09) 2px 3px),
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.28) 100%);
  pointer-events: none;
}

/* ========== HUD ========== */
.hud {
  position: fixed; z-index: 3; padding: 10px 14px; border-radius: 10px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  font-weight: 700; letter-spacing: .3px;
}
/* ROUND — čistý text, fighting-game vibe */
.hud-turn {
  position: fixed;
  top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 36px;
  font-weight: 400; /* pixel font má jedinú váhu — bold ho rozmazáva */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffb300;
  /* tvrdý pixel tieň namiesto mäkkej žiary */
  text-shadow:
    3px 3px 0 #7a1f00,
    6px 6px 0 rgba(0,0,0,.55);
}

/* indikácia ťahu pod ROUND textom — "čakám na súpera" / "súper čaká na teba"; pixel style */
.turn-status{
  position: fixed;
  top: 96px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  padding: 10px 18px;
  border-radius: 2px;
  background: rgba(12,14,18,.7);
  border: none;
  box-shadow: 0 0 0 2px #000;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  pointer-events: none;
  white-space: nowrap;
}
.turn-status.hidden{ display: none; }
.turn-status.waiting{
  color: #6fdc6f;
  border-color: rgba(110,220,110,.6);
  animation: lock-pulse 1.1s ease-out infinite; /* rovnaký zelený pulz ako pripravený LOCK IN */
}
.turn-status.your-move{
  color: #ffd54f;
  border-color: rgba(255,213,79,.65);
  animation: warn-pulse 1.1s ease-out infinite;
}
/* pulz drží aj tvrdý pixel obrys */
@keyframes warn-pulse {
  0%   { box-shadow: 0 0 0 2px #000, 0 0 0 0 rgba(255,213,79,.7); }
  70%  { box-shadow: 0 0 0 2px #000, 0 0 0 14px rgba(255,213,79,0); }
  100% { box-shadow: 0 0 0 2px #000, 0 0 0 0 rgba(255,213,79,0); }
}

/* ========== Stage & Board ========== */
.stage { position: relative; z-index: 1; display: grid; place-items: center; width: 100vw; height: 100vh; padding: 16px; }
.game  { display: grid; gap: 14px; }

.board {
  position: relative;
  /* fallback — skutočné rozmery nastavuje client.js podľa board zo servera */
  width: calc(4 * var(--tile-w) + 3 * var(--gap));
  height: calc(3 * var(--tile-h) + 2 * var(--gap));
  margin: 0 auto;
}

/* ========== Grid (bunky/efekty) ========== */
.grid {
  position: absolute; inset: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, var(--tile-w));
  grid-template-rows: repeat(3, var(--tile-h));
}

/* Bunky – jemné obrysy a priepustné okraje */
.cell {
  position: relative;
  overflow: visible; /* veľký projektil neorezať */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}

/* Animovaný projektil (canvas) v bunke */
.cell .charge-canvas,
.cell .special-canvas {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%); /* scaleX(-1) nastavuje JS */
  pointer-events: none;
  image-rendering: pixelated;
  /* nad vrstvou postáv (#actors) — inak projektil na obsadenej bunke (súper vedľa, vzdialenosť 1) skryje sprite */
  z-index: 5;
}

/* Plynulý projektil basic útoku — perzistentný canvas v #actors, kĺže po bunkách cez CSS transition
   (rovnako ako pohyb postavy), namiesto poskakovania/miznutia per-frame v bunke. */
#actors .projectile {
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 5; /* nad postavami, ako doterajší .charge-canvas */
  /* --charge-ms nastavuje client.js z CHARGE_STEP_MS; orientácia (rotate/scaleX) je v inline transform a NEtranzicuje sa */
  transition: left var(--charge-ms, 432ms) linear, top var(--charge-ms, 432ms) linear;
}

/* Efekty buniek */
@keyframes hit-blink { 0%,100%{background-color:transparent} 25%,75%{background-color:rgba(255,0,0,.35)} }
.cell.hit-blink { animation: hit-blink 300ms ease-in-out 1; }

/* Špeciálne políčka — pixel style: plochá výplň + tvrdý plný rámik bez glow */
.cell.tile-dmg {
  background: rgba(255,80,0,.14);
  box-shadow: inset 0 0 0 2px #cc5a1f;
}
.cell.tile-heal {
  background: rgba(40,200,90,.13);
  box-shadow: inset 0 0 0 2px #2e9e54;
}
.cell.tile-mana {
  background: rgba(40,130,255,.13);
  box-shadow: inset 0 0 0 2px #2b6fc2;
}
@keyframes ik-pulse { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.4); } }
.cell.tile-ik {
  background: rgba(140,0,190,.30);
  box-shadow: inset 0 0 0 3px #c428ff;
  animation: ik-pulse 1s ease-in-out infinite;
}
.tile-marker {
  position: absolute;
  top: 6px; left: 8px;
  width: 30px; height: 30px;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); /* tvrdý pixel tieň */
  z-index: 1;
}
.tile-marker svg { display: block; width: 100%; height: 100%; }

/* vyhodnocovanie tile — výrazný žltý blik celej bunky */
@keyframes tile-proc-blink {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,220,60,0);   background-color: rgba(255,220,60,0); }
  50%      { box-shadow: inset 0 0 0 5px rgba(255,220,60,.95), 0 0 24px rgba(255,200,0,.6); background-color: rgba(255,220,60,.3); }
}
.cell.tile-proc {
  animation: tile-proc-blink 300ms ease-in-out 2;
}
.cell.tile-proc .tile-marker {
  animation: tile-proc-blink 300ms ease-in-out 2;
  transform: scale(1.3);
  transition: transform .15s ease;
}

/* ========== Labyrint (Minotaurov special) ==========
   Prekliaty hráč vidí len vlastnú bunku + svoju Ariadninu niť + obrys na nití + špeciálne tiles;
   dáta o súperovi rediguje už server — toto je len vizuálna tma nad tým.
   Aréna sa stmavuje OBOM hráčom (labyrinth-mode), nech je labyrint očividný aj Minotaurovi. */
.cell.fogged {
  background: #08080c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.03);
}
body.labyrinth-mode #arena { filter: brightness(.22) saturate(.35); transition: filter .6s ease; }
#arena { transition: filter .6s ease; } /* plynulé stmievanie/rozsvietenie pri vstupe/úniku z labyrintu */
/* bunka s Ariadninou niťou — jemný zlatý nádych (čiaru kreslí .thread-svg cez stredy buniek) */
.cell.thread-cell { box-shadow: inset 0 0 0 2px rgba(232,178,60,.45); }
.thread-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
/* vlastná bunka prekliateho — „ožiarená fakľami" (teplý glow), aby ju videl ako mimo labyrintu.
   Za .thread-cell, nech na zdieľanej vlastnej+niťovej bunke vyhrá tento box-shadow. */
.cell.torch-lit {
  background: radial-gradient(circle at 50% 55%, rgba(255,184,74,.55), rgba(92,46,10,.14) 75%);
  box-shadow: inset 0 0 22px rgba(255,150,50,.6);
}
/* obrys súpera na nití — čierna silueta jeho idle pózy.
   ŽIADNE plynulé PRESUNY (left/top transition vypnutá — žiadne kĺzanie medzi bunkami), ale opacity/filter
   sa menia decentne: lovec na mojej bunke sa VYNORÍ z hmly (fade-in) a pri odchode sa STRATÍ v hmle
   (fade-out / stmavne na tieň). Preblik na prejdených niťových bunkách rieši transient .silh-flash-el. */
.sprite-silhouette { filter: brightness(0) opacity(.55); z-index: 2; pointer-events: none; transition: opacity .3s ease, filter .3s ease !important; }
/* preblik na prejdenej niťovej bunke — transient canvas (spawnSilhouetteFlash): zmizne→objaví sa, párkrát */
@keyframes silh-flash {
  0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 1; } 80% { opacity: 0; } 100% { opacity: 0; }
}
.silh-flash-el { animation: silh-flash .5s ease; }
/* lovec PRÁVE na mojej fakľami ožiarenej bunke → ukáž ho farebne (nie čierny tieň) */
.sprite-silhouette.lit { filter: none; opacity: 1; }
.sprite-silhouette.lit.alt-color { filter: saturate(.22) brightness(1.4); } /* p2 albino paleta pre nenatívne postavy */

/* Hover preview (special rozsah) */
@keyframes preview-blink {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,0,0,.0); background: rgba(255,0,0,.00); }
  50%      { box-shadow: inset 0 0 0 3px rgba(255,0,0,.65); background: rgba(255,0,0,.15); }
}
.cell.preview-red { animation: preview-blink 600ms linear infinite; border-radius: 10px; }
/* Escanor special výbuch — aktívne políčka intenzívne blikajú (žlto-oranžová, slnko) */
@keyframes esc-burst-blink {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,180,0,.35); background: rgba(255,140,0,.18); }
  50%      { box-shadow: inset 0 0 0 4px rgba(255,220,60,.95); background: rgba(255,190,30,.6); }
}
.cell.esc-burst-cell { animation: esc-burst-blink 220ms linear infinite; border-radius: 10px; }

/* ========== Actors (plynulý pohyb) ========== */
.actors { position: absolute; inset: 0; pointer-events: none; }
.sprite-actor {
  position: absolute; width: var(--tile-w); height: var(--tile-h);
  image-rendering: pixelated;
  /* --move-ms nastavuje client.js z MOVE_MS (sync s ANIM_SLOW) */
  transition: left var(--move-ms, 700ms) linear, top var(--move-ms, 700ms) linear, transform 150ms ease;
}
/* ghost — náhľad vlastnej pozície po naplánovaných movoch */
.sprite-ghost {
  opacity: .45;
  filter: grayscale(35%);
  pointer-events: none;
  transition: left 250ms ease, top 250ms ease;
}

/* ========== Controls – vodorovný toolbar ========== */
/* riadok: golden shield naľavo + panel akcií; fixná pozícia patrí riadku */
.controls-row{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) scale(1.2);
  transform-origin: bottom center;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
  max-width: calc(100vw - 24px);
}
/* pixel style — hranatý panel s tvrdým obrysom a bevel hranami, rovnako ako HUD widgety */
.controls{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 2px;
  background: #23262d;
  border: none;
  box-shadow:
    0 0 0 2px #000,
    inset 0 2px 0 rgba(255,255,255,.07),
    inset 0 -2px 0 rgba(0,0,0,.55);
  flex-wrap: nowrap;      /* všetko v jednom riadku */
  white-space: nowrap;
}
.actions, .meta{ display: flex; gap: 8px; align-items: center; }

/* skupina akcií — label + „zátvorka" ⌐‾‾¬ nad tlačidlami sekcie */
.act-group{
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 20px;
}
.act-group::after{
  content: attr(data-label);
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255,255,255,.65);
  pointer-events: none;
}
.act-group::before{
  content: "";
  position: absolute;
  top: 13px; left: 2px; right: 2px;
  height: 6px;
  border: 1px solid rgba(255,255,255,.28);
  border-bottom: none;
  border-radius: 0; /* hranatá pixel zátvorka */
  pointer-events: none;
}

/* vizuálny predel medzi akciami a undo/lock */
.controls .divider{
  width: 2px; height: 40px; flex: none;
  background: rgba(255,255,255,.18);
  border-radius: 2px;
  margin: 0 8px;
}

/* pixel ikony — pôvodné emoji nakreslené do malého canvasu a roztiahnuté s pixelated */
.pix-ico{ display: inline-block; width: 26px; height: 26px; }
.pix-ico canvas, .pix-ico svg{ display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.pix-ico.mini{ width: 12px; height: 12px; vertical-align: -2px; margin-left: 1px; }
.bar-label .pix-ico{ width: 22px; height: 22px; }

/* ikonové tlačidlá akcií — všetky rovnako veľké */
.btn.act{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 24px; line-height: 1.1;
  padding: 0; width: 72px; height: 60px; flex: none;
}
.btn.act .cost{ font-size: 11px; font-weight: 800; opacity: .95; }
/* Farebná identita ťahov: pohyb = neutrálna šedá, útok = červená, mágia = purpurová,
   obrana = cyan, zdroje = modrá, golden = zlatá; silnejší ťah = tmavší odtieň rodiny */
.btn.move{ background: #757575; } /* Move — neutrálna šedá */
.btn.dash{ background: #616161; } /* Dash (−2) — o odtieň tmavšia než move */

/* výber smeru pre Move — popup nad tlačidlom v tvare kríža */
.move-wrap{ position: relative; }
.dir-picker{
  position: absolute;
  bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  display: grid;
  grid-template-areas: ". up ." "left . right" ". down .";
  gap: 4px; padding: 8px;
  background: rgba(12,14,18,.9); border: none; border-radius: 2px;
  box-shadow: 0 0 0 2px #000;
  z-index: 5;
}
.dir-picker.hidden{ display: none; }
.dir-picker .arrow.up{    grid-area: up; }
.dir-picker .arrow.left{  grid-area: left; }
.dir-picker .arrow.right{ grid-area: right; }
.dir-picker .arrow.down{  grid-area: down; }

/* Buttons — pixel look: hranaté, čierny obrys, svetlá horná a tmavá dolná hrana */
.btn {
  appearance: none; border: none; border-radius: 2px;
  padding: 8px 12px; font-weight: 700; cursor: pointer;
  color: #fff; background: #555;
  box-shadow:
    0 0 0 2px #000,
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.35);
  transition: transform .05s ease, filter .15s ease, background .15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #424242; }
.btn.arrow { width: auto; height: auto; font-size: 16px; line-height: 1; background: #616161; }
/* šípky pickerov vo farbe svojej akcie */
#dir-picker  .arrow{ background: #757575; }
#aim-picker  .arrow{ background: #b71c1c; }
#dash-picker .arrow{ background: #616161; }
#special-picker .arrow{ background: #6a1b9a; } /* Medúzin smer pohľadu — fialová ako special */
/* special picker má len ←/→ — jednoriadková mriežka bez prázdnych oblastí kríža */
.dir-picker.special-picker{ grid-template-areas: "left right"; }

/* Vlkolak: 8-smerový picker charge — plná 3×3 mriežka (diagonály + kríž), stred prázdny */
.dir-picker.wolf-picker{ grid-template-areas: "ul up ur" "left c right" "dl down dr"; }
.wolf-picker .arrow.ul{ grid-area: ul; }
.wolf-picker .arrow.ur{ grid-area: ur; }
.wolf-picker .arrow.dl{ grid-area: dl; }
.wolf-picker .arrow.dr{ grid-area: dr; }
.wolf-picker .wolf-center{ grid-area: c; }
#wolf-picker .arrow{ background: #6a1b9a; } /* fialová ako special */

/* Vojak: mini mapa plochy na výber cieľovej bunky specialu (stĺpce nastaví buildCellPicker podľa board.w) */
.dir-picker.cell-picker{ grid-template-areas: none; gap: 3px; }
.cell-picker .mini-target{
  width: 28px; height: 21px; padding: 0;
  font-size: 11px; line-height: 1; font-weight: 800;
  background: #37405a; border-radius: 2px;
}
.cell-picker .mini-target:hover:not(:disabled){ background: #7b1fa2; } /* fialová ako special */
.cell-picker .mini-target.own{ background: #14324a; color: #5bc0ff; cursor: not-allowed; opacity: .85; } /* moja (ghost) bunka */
.cell-picker .mini-target.foe{ background: #47201f; color: #ff8a7a; cursor: not-allowed; opacity: .85; } /* súperova aktuálna bunka / jeho klon */

/* Colors */
.btn.mana    { background: #1565c0; } /* Recharge (+4) — modrá ako mana bar */
.btn.attack  { background: #b71c1c; } /* Basic (−2, smerová strela) — červená */
.btn.melee   { background: #7f0000; } /* Melee (−8, 8 dmg) — tmavá krvavá, najťažší úder */
.btn.shield  { background: #0097a7; } /* Shield (−2, blokuje celý dmg) — cyan ako prstenec */
.btn.mirror  { background: #00838f; } /* Mirror (−4, odrazí celý dmg) — cyan po predchodcovi blocku */
.btn.special { background: #7b1fa2; } /* Special (−5) — purpurová mágia */
/* zlaté extra akcie — ozdobný rám: gradient + svetlý vnútorný a tmavý vonkajší prstenec */
.btn.golden{
  width: 122px; height: auto; /* obe zlaté tlačidlá rovnako široké (pravé určuje dlhší cost text) */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 10px; /* väčší vnútorný priestor než bežné akcie — obsah nelepí na rám */
  /* neaktívne: tlmené zlato v plochých pásoch — rozsvieti sa až v .armed stave */
  background: linear-gradient(180deg,
    #a87f0a 0 4px, #8f6f05 4px calc(100% - 4px), #5d4a00 calc(100% - 4px) 100%);
  border: none;
  box-shadow: 0 0 0 2px #000;
}
.btn.golden:hover{ filter: brightness(1.08); }
.btn.golden.hidden { display: none; }
.btn.golden.armed{
  background: linear-gradient(180deg,
    #ffd54f 0 4px, #d4a017 4px calc(100% - 4px), #8a6d00 calc(100% - 4px) 100%);
  filter: brightness(1.1);
  box-shadow:
    0 0 0 2px #000,
    0 0 16px rgba(255,200,60,.55);
}

/* Démon útok — bordové tlačidlo s červeným rámom (rovnaký motív ako démon „end" bunka / FINAL ROUND tile) */
.btn.act.demon{
  width: 122px; height: auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px;
  background: #2a0d12; color: #ffd9d9;
  /* zlatá obruba — odlíši démon ÚTOK od červeného banishment motívu (FINAL „end" bunka) */
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px rgba(255,210,74,.9), 0 0 18px rgba(255,200,60,.55);
}
.btn.act.demon.hidden{ display: none; }
.btn.act.demon .ls-ico{
  width: 34px; height: 38px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(255,80,80,.85));
}
.btn.act.demon .cost{ font-size: 12px; font-weight: 800; white-space: nowrap; opacity: 1; }
.btn.act.demon:not(:disabled):hover{ filter: brightness(1.1); }
.btn.act.demon.armed{
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px rgba(255,225,130,1), 0 0 26px rgba(255,200,60,.85);
  filter: brightness(1.12);
}
.btn.act.demon:disabled{ filter: grayscale(.7) brightness(.55); cursor: not-allowed; }

/* Last Hope tlačidlo — žiarivo červené, len ikona last_hope.png (naľavo od golden shield/mirror) */
.btn.act.lasthope{
  background: #3a0808; color: #ffd9d9;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px rgba(255,70,70,.9), 0 0 18px rgba(255,30,30,.7);
}
.btn.act.lasthope.hidden{ display: none; }
.btn.act.lasthope .lh-ico{
  width: 34px; height: 36px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(255,60,60,.95));
}
.btn.act.lasthope .lh-cost{ display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: #ffd9d9; }
.btn.act.lasthope .lh-cost .mini{ width: 14px; height: 14px; }
.btn.act.lasthope:not(:disabled):hover{ filter: brightness(1.12); }
.btn.act.lasthope.armed{
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px rgba(255,130,130,1), 0 0 26px rgba(255,40,40,1);
  filter: brightness(1.18);
}

/* golden predťah: tlačidlo ROVNAKO VEĽKÉ ako golden-mana, len rozdelené na 2 polovice (ŠTÍT | MIRROR).
   Zlato je na samotných poloviciach (nie na kontajneri), aby každá mala vlastný hover aj armed stav.
   Žiadny overflow:hidden — inak by sa orezal zámok (🔒 ::after je umiestnený mimo tlačidla). */
.btn.golden.golden-split{
  padding: 0; gap: 0;
  flex-direction: row; align-items: stretch; /* .btn.act inak núti column */
  background: none;
}
.golden-half{
  flex: 1 1 0; min-width: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 4px;                  /* padding + gap rovnaké ako golden-mana → rovnaká výška */
  font-size: 24px; line-height: 1.1;  /* rovnako veľká ikona ako bežné .btn.act (button nededí font) */
  color: #fff; border: none; cursor: pointer;
  /* tlmené zlato v plochých pásoch — rovnaké ako neaktívne .btn.golden */
  background: linear-gradient(180deg,
    #a87f0a 0 4px, #8f6f05 4px calc(100% - 4px), #5d4a00 calc(100% - 4px) 100%);
  transition: filter .12s ease, background .15s ease, box-shadow .15s ease;
}
.golden-half + .golden-half{ border-left: 2px solid rgba(0,0,0,.55); } /* viditeľný šev medzi polovicami */
.golden-half .cost{ font-size: 11px; font-weight: 800; opacity: .95; white-space: nowrap; }
/* hover: jemné rozžiarenie zlata danej polovice (rovnako ako golden-mana); kontajner sám sa nerozsvieti.
   Pri zamknutom tlačidle (starter / lock-in / picker) hover nič nemení — ostáva sivé. */
.btn.golden.golden-split:not(.locked-perm):not(.locked-ui):hover{ filter: none; }
.btn.golden.golden-split:not(.locked-perm):not(.locked-ui) .golden-half:hover{ filter: brightness(1.08); }
/* zvolená polovica: jasné zlato + žiara (rovnako ako pôvodný .armed) */
.golden-half.armed{
  background: linear-gradient(180deg,
    #ffd54f 0 4px, #d4a017 4px calc(100% - 4px), #8a6d00 calc(100% - 4px) 100%);
  filter: brightness(1.1);
  box-shadow: 0 0 16px rgba(255,200,60,.55);
}
.btn.golden.golden-split:not(.locked-perm):not(.locked-ui) .golden-half.armed:hover{ filter: brightness(1.18); }
.btn.golden.locked-perm .golden-half{ cursor: not-allowed; }
/* zamknutá polovica — príslušný bežný štít/mirror je už vo fronte (vzájomné vylúčenie, zámok kým ho nezrušíš) */
.golden-half.locked{ position: relative; filter: grayscale(.85) brightness(.5); cursor: not-allowed; }
.golden-half.locked::after{
  content: "🔒";
  position: absolute; top: 1px; right: 2px;
  font-size: 11px; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.btn.golden.golden-split:not(.locked-perm):not(.locked-ui) .golden-half.locked:hover{ filter: grayscale(.85) brightness(.5); }

/* rovnaký štít, len v zlatej — filter na samotnej emoji ikone */
.g-ico{ filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1); }
/* golden MIRROR ikona (tlačidlo + lišta ťahov + widgety + záznam pod plochou): sklo ostáva modré
   ako originál, zlatý je len RÁM (tvrdý obrys, bez žiary — v pokoji pôsobí úplne neutrálne, nesvieti) */
.g-ico.mirror{
  filter:
    drop-shadow(1.5px 0 0 #d4a017) drop-shadow(-1.5px 0 0 #d4a017)
    drop-shadow(0 1.5px 0 #d4a017) drop-shadow(0 -1.5px 0 #d4a017);
}

/* akcia už použitá v tomto kole (vrátane Move bez data-act) */
.actions .btn:disabled { opacity: .35; cursor: default; filter: none; transform: none; }

/* zamknuté tlačidlo — vizuálne neaktívne + zámok v rohu
   (.locked-ui = dočasný zámok pri otvorenom pickeri, .locked-perm = golden shield pre startera) */
.btn.locked-ui, .btn.locked-perm, .btn.locked-golden{
  position: relative;
  filter: grayscale(.75) brightness(.55);
  cursor: not-allowed;
}
.btn.locked-ui::after, .btn.locked-perm::after, .btn.locked-golden::after{
  content: "🔒";
  position: absolute;
  top: -7px; right: -7px;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* LOCK IN: zelený -> zamknutý červený; väčší než ostatné tlačidlá */
.btn-lock {
  background: #2e7d32;
  padding: 14px 20px;
  font-size: 15px;
  letter-spacing: .5px;
}
.btn-lock.locked,
.btn-lock:disabled { background: #c62828 !important; color: #fff; filter: none; cursor: default; animation: none; }

/* pulz, keď je queue plná a hráč ešte nepotvrdil — drží aj pixel obrys tlačidla */
@keyframes lock-pulse {
  0%   { box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 0 rgba(76,175,80,.75); }
  70%  { box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 14px rgba(76,175,80,0); }
  100% { box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 0 rgba(76,175,80,0); }
}
.btn-lock.ready { animation: lock-pulse 1.1s ease-out infinite; }

/* “Shake” pri lock bez 3 príkazov */
@keyframes shake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.btn.shake { animation: shake .35s; }

/* Queue badges */
#queue, .queue { display: flex; gap: 6px; min-height: 36px; align-items: center; flex-wrap: nowrap; position: relative; }
/* zelená šípka pod lištou — počas animácie ukazuje na práve vykonávaný beat (kĺže sa) */
.q-cursor{
  position: absolute; bottom: -16px; left: 0; width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 14px solid #54e07a;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 6px rgba(84,224,122,.85)) drop-shadow(0 1px 0 #000);
  opacity: 0; pointer-events: none;
  transition: left .18s ease, opacity .15s ease;
}
.q-cursor.show{ opacity: 1; }
.q-badge {
  width: 48px; padding: 6px 0; box-sizing: border-box;
  border-radius: 2px; font-weight: 700; font-size: 14px;
  background: #333; color: #eee;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.12);
}
.q-badge.move    { background: #4a4a4a; }
.q-badge.dash    { background: #3f3f3f; }
.q-badge.mana    { background: #0b4ea2; }
.q-badge.attack  { background: #7f1515; }
.q-badge.melee   { background: #5c0000; }
.q-badge.shield  { background: #00606b; }
.q-badge.mirror  { background: #00525b; }
.q-badge.special { background: #5e1387; }
.q-badge.stoned  { background: #4a4d55; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(190,195,205,.4); filter: grayscale(.3); } /* skamenený pass ťah */
/* súperov DETERMINISTICKY prenesený stun — nie skrytý „?", ale plný kamenný beat (kaster vidí dokedy súper stojí) */
.q-badge.opp.q-slot.stoned{ background: #4a4d55; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgba(190,195,205,.4); color: #cfd2d6; opacity: 1; filter: grayscale(.3); }
.q-badge.golden  { background: #8a6d00; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(255,213,79,.55); }
/* démon „end" banishment bunka (pos 7) — červený okraj; platí pri každej šírke */
.q-badge.demon   { background: #2a0d12; overflow: hidden; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(255,90,90,.6), 0 0 12px rgba(255,60,60,.55); }
.q-badge.demon .ls-badge{ width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
/* swap (výmena maga) — modrastý badge s hlavou cieľového maga */
.q-badge.swap  { position: relative; background: #12203c; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(90,150,255,.45); }
/* object-fit: cover → štvorcová hlava vyplní obdĺžnik bez deformácie (žiadne „čapaté" roztiahnutie) */
.q-badge.swap canvas.mage-head{ width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; }
/* rám NAD hlavou (hlava je za okrajom, neprelieza cezeň) */
.q-badge.swap::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(120,170,255,.6); }
.q-badge.main.swap::after{ box-shadow: inset 0 0 0 2px rgba(120,170,255,.9); }
/* démon ÚTOK navolený ako ťah (má .main) — zlatá obruba (ako tlačidlo), odlíšenie od červeného banishmentu */
.q-badge.main.demon{ box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(255,210,74,.9), 0 0 12px rgba(255,200,60,.55); }
/* Last Hope bunka v lište — veľkosť ako banishment démon bunka, žiarivo červená; placeholder kým sa nenavolí */
.q-badge.lasthope{ width: 56px; height: 40px; padding: 0; overflow: hidden; background: #3a0808; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(255,70,70,.7), 0 0 12px rgba(255,40,40,.6); }
.q-badge.lasthope.q-slot{ background: #240606; }
.q-badge.lasthope .lh-badge{ width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.q-badge.lasthope .lh-dim{ font-size: 18px; font-weight: 800; color: rgba(255,150,150,.65); }

/* prázdny slot fronty — čiarkovaný placeholder, rovnaká šírka ako vyplnený badge */
.q-badge.q-slot{
  background: transparent;
  box-shadow: none;
  border: 2px dashed rgba(255,255,255,.22);
  color: rgba(255,255,255,.4);
}
.g-ico.dim{ opacity: .35; }

/* round-script lišta: moje beaty = zlatý lining, súperove = dim, kurzor = práve animovaný beat */
.q-badge.mine{ box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(212,160,23,.9); }
.q-badge.mine.q-slot{
  background: transparent; box-shadow: none;
  border: 2px dashed rgba(255,213,79,.6); color: rgba(255,213,79,.75);
}
.q-badge.opp{ opacity: .82; }
.q-badge.opp.q-slot{
  background: transparent; box-shadow: none;
  border: 2px dashed rgba(255,255,255,.15); color: rgba(255,255,255,.3);
}
.q-badge.opp.revealed{ opacity: .92; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.12); }
/* kurzor — beat, ktorý sa práve animuje; sunie sa zľava doprava ako kolo prebieha */
.q-badge.q-now{
  transform: translateY(-3px) scale(1.08); z-index: 1;
  outline: 2px solid #fff; outline-offset: 1px;
  box-shadow: 0 0 12px 3px rgba(255,213,79,.95);
  transition: transform .12s ease;
}

/* dôležitosť = veľkosť: 3 hlavné akcie veľké, golden menšie a voliteľné */
.q-badge.main{ width: 56px; height: 40px; padding: 0; font-size: 17px; } /* fixná výška → väčšie číslo nerozťahuje box */
.q-badge.opt { width: 32px; padding: 5px 0; font-size: 12px; align-self: center; }
/* prázdny golden slot — statické solídne orámovanie (nepulzuje; pulz má len povinných 6 dvojíc) */
.q-badge.opt.q-slot{ background: transparent; box-shadow: none; border: 2px solid rgba(255,255,255,.18); }
.q-badge.opt.mine.q-slot{ border-color: rgba(212,160,23,.55); } /* moje extra = tlmené zlaté */
/* prázdne povinné sloty jemne pulzujú = „nastav ma" (číslo ①②③) */
.q-badge.main.mine.q-slot{ font-weight: 900; font-size: 26px; line-height: 1; }
.q-badge.main.mine.q-slot:not(.revealed){ animation: q-prompt 1.4s ease-in-out infinite; }
@keyframes q-prompt{
  0%, 100% { border-color: rgba(255,213,79,.4);  box-shadow: none; }
  50%      { border-color: rgba(255,213,79,1);   box-shadow: 0 0 9px rgba(255,213,79,.45); }
}

/* vertikálny predel medzi golden shieldom a bežnými 3 akciami vo fronte */
.q-divider{
  width: 2px; height: 28px; flex: none; align-self: center;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
}

/* Char select */
.char-select {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92); /* takmer nepriehľadné — aréna za výberom neruší */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; z-index: 9999;
}
.char-select.hidden { display: none; }
.char-cards { display: flex; align-items: center; justify-content: center; gap: 28px; }
.char-cards.hidden { display: none; }

/* veľký nadpis aktuálnej stránky výberu (Mages / Experimental) */
.char-page-title {
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 30px; color: #ffb300; letter-spacing: 4px;
  text-shadow: 4px 4px 0 rgba(0,0,0,.75);
}

/* riadok kariet so šípkami stránkovania po bokoch */
.char-pager { display: flex; align-items: center; justify-content: center; gap: 26px; }
.char-arrow {
  width: 54px; height: 78px; border: none; cursor: pointer; border-radius: 2px;
  background: #5a6473; color: #ffb300;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 20px; line-height: 1;
  box-shadow:
    0 0 0 3px #ffb300,
    0 0 0 5px #000,
    inset 0 3px 0 rgba(255,255,255,.06),
    inset 0 -4px 0 rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.char-arrow:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #ffc333,
    0 0 0 5px #000,
    0 0 16px rgba(255,179,0,.55);
}
/* neaktívna šípka: neviditeľná, ale drží miesto — karty neskáču pri prepnutí stránky */
.char-arrow.off { visibility: hidden; }
/* tournament: stránkovanie vypnuté — obe šípky preč (roster-mode zlúči karty do jedného radu) */
.char-select.no-paging .char-arrow { visibility: hidden; }

/* tournament char-select: obe stránky sa zlúčia do jedného radu (kontajnery stránok prestanú
   byť boxami) a vidno LEN karty draftnutého tímu; vyššia špecificita prebije .char-cards.hidden */
.char-select.roster-mode .char-cards { display: contents; }
.char-select.roster-mode .char-card.off-roster,
.char-select.roster-mode .char-card.soon { display: none; }

/* turnajový draft (team-mode): confirm tlačidlo pod kartami; mimo draftu je lišta skrytá.
   Dizajn = jazyk char-selectu: slate podklad, oranžový pixel rám s tvrdým čiernym obrysom,
   pixel font + bevel (ako .char-arrow / karty); disabled = tlmený šedý rám ako "Coming soon" karta */
.char-select .team-bar { display: none; }
.char-select.team-mode .team-bar { display: flex; justify-content: center; }
.team-confirm {
  padding: 18px 36px; cursor: pointer; border: none; border-radius: 2px;
  background: #5a6473; color: #ffb300;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 14px; letter-spacing: 2px; text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  box-shadow:
    0 0 0 3px #ffb300,
    0 0 0 5px #000,
    inset 0 3px 0 rgba(255,255,255,.06),
    inset 0 -4px 0 rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.team-confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #ffc333,
    0 0 0 5px #000,
    0 0 16px rgba(255,179,0,.55),
    inset 0 3px 0 rgba(255,255,255,.06),
    inset 0 -4px 0 rgba(0,0,0,.5);
}
.team-confirm:active:not(:disabled) { transform: translateY(2px); }
.team-confirm:disabled {
  cursor: not-allowed; background: #3b4149; color: #8f97a3; text-shadow: 2px 2px 0 rgba(0,0,0,.45);
  box-shadow:
    0 0 0 3px #6b7480,
    0 0 0 5px #000,
    inset 0 3px 0 rgba(255,255,255,.04),
    inset 0 -4px 0 rgba(0,0,0,.5);
}

/* náhľad špeciálnej abilitky pri hoveri nad mágom */
.char-ability {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  height: 300px; /* fixná výška od začiatku — nič pri hoveri neskáče (text má pevný 4-riadkový blok; rezerva na Escanorov pride riadok) */
}
.char-ability.hidden { visibility: hidden; }
.ca-title {
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 13px; color: #ffb300; letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(0,0,0,.6);
}
.ca-grid { display: grid; gap: 3px; padding: 6px; background: rgba(12,14,18,.7); box-shadow: 0 0 0 2px #000; border-radius: 2px; }
.ca-grid .mini-cell { position: relative; width: 42px; height: 30px; background: #2b2e34; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
/* zasiahnuté bunky pulzujú načerveno — podobne ako preview v hre */
.ca-grid .mini-cell.hit { animation: mini-hit-pulse 1s ease-in-out infinite; }
@keyframes mini-hit-pulse {
  0%, 100% { background: #7a2a1c; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
  50%      { background: #ff5a3c; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 10px rgba(255,90,60,.85); }
}
.ca-grid .mini-cell.caster { background: #ffb300; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.25); }
/* malý castiaci mág priamo v bunke castera */
.ca-grid .mini-cell .mini-caster { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* Escanor: pride level pod mini-doskou — lev + číslo ako v HUD widgete (pride_lion_{0..3}.png, pri 3 pulz);
   JS (syncCaPride) prepína frame/číslo synchrónne s cyklením zvýraznenej zóny */
.ca-pride { display: flex; align-items: center; gap: 3px; }
.ca-pride.hidden { display: none; }
.ca-pride img { height: 34px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
.ca-pride.pride-max img { animation: pride-max-pulse 1s ease-in-out infinite; }
.ca-pride .pride-num { font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 15px; color: #ffd24a;
  text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 2px 3px rgba(0,0,0,.9); }
/* Vlkolak: fáza mesiaca + dmg pod mini-doskou — cyklí 0→3 ako Escanorov pride lev (JS syncCaMoon) */
.ca-moon { display: flex; align-items: center; gap: 6px; }
.ca-moon.hidden { display: none; }
.ca-moon img { height: 34px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
.ca-moon.pride-max img { animation: pride-max-pulse 1s ease-in-out infinite; } /* spln pulzuje (max dmg) */
.ca-moon .ca-moon-dmg { font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 15px; color: #ffd24a;
  display: flex; align-items: center; gap: 3px;
  text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 2px 3px rgba(0,0,0,.9); }
.ca-moon .pix-ico.mini { width: 15px; height: 15px; vertical-align: 0; margin-left: 0; }
.ca-text {
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 11px; color: #cfd2d6; letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  text-align: center; max-width: 500px; line-height: 1.7; margin: 0 auto;
  /* PEVNÝ blok presne na 4 riadky — popisy rôznych dĺžok (mágovia 1 riadok, Minotaur 4) nehýbu
     efektom (dmg/petrify/bludisko) pod textom; kratší text sa v bloku vertikálne vycentruje */
  height: calc(4 * 1.7em);
  display: flex; align-items: center; justify-content: center;
}
/* dmg + mana, výraznejšie pod popisom útoku */
.ca-stats {
  display: flex; align-items: center; justify-content: center;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 18px; letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(0,0,0,.65);
}
.ca-stats .ca-dmg { color: #ff7a4d; display: inline-flex; align-items: center; gap: 8px; }
.ca-stats .pix-ico { width: 24px; height: 24px; }
/* jemné dorovnanie čísla k lebke (lebka je v emoji vizuálne nižšie) */
.ca-stats .ca-num { position: relative; top: 1px; }
/* ========== Losovanie farieb (biely/čierny) ========== */
/* fullscreen overlay NAD char-selectom (ten má z-index 9999) — výber postáv čaká pod ním, kým ruleta dobehne */
.color-roll {
  position: fixed; inset: 0; z-index: 10000;
  /* NEPRIEHĽADNÉ pozadie — výber postáv pod ním nesmie presvitať (mirrorovaná p2 strana by prezradila,
     ktorú farbu/stranu hráč dostal). Celé začierni a odkryje sa až fade-outom po dobehnutí rulety. */
  background: #08090c;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
}
.color-roll.hidden { display: none; }
.cr-title {
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 22px; color: #ffb300; letter-spacing: 3px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.75);
}
.cr-wheel { position: relative; width: 260px; height: 260px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.cr-wheel > svg { display: block; width: 100%; height: 100%; }
/* strelka — celoplošný SVG rotovaný okolo stredu kruhu (WAAPI zo skriptu) */
.cr-arrow { position: absolute; inset: 0; transform-origin: 50% 50%; pointer-events: none; }
.cr-arrow svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
/* stredový čap strelky */
.cr-knob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: #ffb300; box-shadow: 0 0 0 4px #000, inset 0 -4px 0 rgba(0,0,0,.35);
}
.cr-result {
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 17px; letter-spacing: 2px; color: #cfd2d6;
  text-shadow: 2px 2px 0 rgba(0,0,0,.7);
  animation: cr-pop .35s cubic-bezier(.2,1.6,.4,1) both;
}
.cr-result.hidden { display: none; animation: none; }
.cr-result .cr-white { color: #f1f1ec; text-shadow: 0 0 10px rgba(255,255,255,.55), 2px 2px 0 rgba(0,0,0,.7); }
.cr-result .cr-black { color: #9aa0ab; text-shadow: 0 0 10px rgba(0,0,0,.9), 2px 2px 0 rgba(0,0,0,.7); }
@keyframes cr-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.char-card {
  width: 220px; height: 240px; padding: 0; border-radius: 2px;
  background: #5a6473; color: #fff; border: none; cursor: pointer; text-align: center;
  position: relative; overflow: hidden; /* sprite vyplní celú kartu, orez je až na ráme karty */
  /* oranžový pixel okraj — farba hry; tvrdý čierny obrys + bevel ako zvyšok UI */
  box-shadow:
    0 0 0 3px #ffb300,
    0 0 0 5px #000,
    inset 0 3px 0 rgba(255,255,255,.06),
    inset 0 -4px 0 rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.char-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 3px #ffc333,
    0 0 0 5px #000,
    0 10px 28px rgba(0,0,0,.5),
    0 0 18px rgba(255,179,0,.55);
}
.char-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

/* tournament: HP maga — vycentrované hore, červené číslo + srdiečko */
.char-stats {
  position: absolute; top: 6px; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  /* pixel font ako inde v hre */
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 13px; line-height: 1; letter-spacing: 1px;
  /* plný čierny outline pre kontrast */
  text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 2px 2px rgba(0,0,0,.9);
}
.char-stats.hidden { display: none; }
/* rovnaké rozloženie ako HUD widgety: ikona → číslo */
.char-hp, .char-mana { display: inline-flex; align-items: center; gap: 5px; }
.char-hp { color: #ff5a5a; }     /* prenesené HP — červená (srdiečko), jasnejšia ako HUD */
.char-mana { color: #57a9ff; }   /* prenesená mana — modrá (kvapka), jasnejšia ako HUD */
.char-stats svg { width: 14px; height: 14px; display: block; }
/* pixel font sadá vysoko v riadku — čísla jemne nadol, nech sedia s ikonou (žiadne levitovanie) */
.char-hp span, .char-mana span { position: relative; top: 1px; }

/* tournament: mŕtvy mág — nedá sa zvoliť, stlmený, démon prekrýva okno */
.char-card.dead { cursor: default; filter: grayscale(.7) brightness(.7); }
.char-card.dead:hover { transform: none; box-shadow: 0 0 0 3px #7a2b2b, 0 0 0 5px #000; }

/* turnajový draft: vybraná karta — zelený rám + poradové číslo výberu v rohu */
.char-card.picked {
  box-shadow:
    0 0 0 3px #3ddc84,
    0 0 0 5px #000,
    0 0 18px rgba(61,220,132,.55),
    inset 0 3px 0 rgba(255,255,255,.06),
    inset 0 -4px 0 rgba(0,0,0,.5);
}
.char-card.picked:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 3px #5cf29e,
    0 0 0 5px #000,
    0 10px 28px rgba(0,0,0,.5),
    0 0 22px rgba(61,220,132,.7);
}
.char-card .pick-badge {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: #3ddc84; color: #06301a; border-radius: 2px;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 13px;
  box-shadow: 0 0 0 2px #000, inset 0 -3px 0 rgba(0,0,0,.25);
}

/* placeholder karta "Coming soon" — neaktívna, stlmený šedý rám */
.char-card.soon {
  cursor: default; background: #3b4149;
  box-shadow: 0 0 0 3px #6b7480, 0 0 0 5px #000, inset 0 3px 0 rgba(255,255,255,.04), inset 0 -4px 0 rgba(0,0,0,.5);
}
.char-card.soon:hover {
  transform: none;
  box-shadow: 0 0 0 3px #6b7480, 0 0 0 5px #000, inset 0 3px 0 rgba(255,255,255,.04), inset 0 -4px 0 rgba(0,0,0,.5);
}
.char-card.soon .soon-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 52px; color: #6b7480; text-shadow: 4px 4px 0 rgba(0,0,0,.6);
}
.char-card.soon .char-name { color: #8f97a3; }

.char-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 10px; line-height: 1.5; color: #ffb300; letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.7);
}

/* Game Over */
/* hláška pre tretieho a ďalších pripojených — semi-transparentný pixel box, hru vidí a môže sledovať */
.spectator{
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 10;
  padding: 14px 24px;
  border-radius: 2px;
  background: rgba(12,14,18,.7);
  border: none;
  box-shadow: 0 0 0 2px #000;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  text-align: center;
  pointer-events: none;
}
.spectator.hidden{ display: none; }

/* chyba spojenia pri odosielaní ťahu — červený varovný pruh hore, klikom sa dá zavrieť */
.conn-error{
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  z-index: 60; max-width: 92vw;
  padding: 12px 20px;
  border-radius: 2px;
  background: rgba(140,20,24,.95);
  box-shadow: 0 0 0 2px #000, 0 6px 18px rgba(0,0,0,.5);
  color: #fff;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 11px; line-height: 1.7; letter-spacing: .5px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  text-align: center;
  cursor: pointer;
  animation: connErrPulse 1.1s ease-in-out infinite;
}
.conn-error b{ color: #ffd54f; }
.conn-error.hidden{ display: none; }
@keyframes connErrPulse{ 0%,100%{ box-shadow: 0 0 0 2px #000, 0 6px 18px rgba(0,0,0,.5); } 50%{ box-shadow: 0 0 0 2px #000, 0 0 22px rgba(255,60,60,.9); } }

/* game over neprekrýva plochu — len semi-transparentné tlačidlo v strede, verdikt ide do .hud-turn */
.gameover { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.gameover.hidden { display: none; }
/* klasické retro tlačidlo: plná zelená, bevel cez inset tiene, stlačenie posunom */
.retry {
  pointer-events: auto;
  padding: 16px 26px 18px;
  border-radius: 2px;
  border: none;
  background: #2f8a34;
  color: #fff;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 13px;
  cursor: pointer;
  text-shadow: 2px 2px 0 rgba(0,0,0,.55);
  box-shadow:
    0 0 0 2px #000,
    inset 0 3px 0 rgba(255,255,255,.3),
    inset 0 -4px 0 rgba(0,0,0,.35);
}
.retry:hover { background: #379e3d; }
.retry:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px #000,
    inset 0 3px 0 rgba(0,0,0,.25);
}

/* verdikt pod GAME OVER v hud-turn — pixel font, tvrdé tiene */
.hud-turn .go-verdict { display: block; text-align: center; font-size: 20px; letter-spacing: 2px; margin-top: 10px; }
.hud-turn .go-verdict.win  { color: #6fdc6f; text-shadow: 2px 2px 0 #0a3d0a, 4px 4px 0 rgba(0,0,0,.55); }
.hud-turn .go-verdict.lose { color: #ff6b6b; text-shadow: 2px 2px 0 #4d0a0a, 4px 4px 0 rgba(0,0,0,.55); }
.hud-turn .go-verdict.tie  { color: #ddd;    text-shadow: 2px 2px 0 #333,    4px 4px 0 rgba(0,0,0,.55); }

.panel { display: grid; gap: 8px; justify-items: center; }

/* ---------- Series crowns (BO3/BO5) + turn timer ---------- */
/* placeholdery pod žrďou vlajky (celá vlajka visí pod HUD boxom: top:100% + 40px margin, výška 308px),
   centrované na stred widgetu hráča; nezískaná hra = obrys koruny, získaná = plná pixel-art koruna */
.series-crowns{
  position: absolute;
  top: calc(100% + 392px); /* pod hrotom žrde vlajky, s odstupom */
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; justify-content: center;
  z-index: 2; pointer-events: none;
}
.series-crowns.hidden{ display: none; }
.series-crowns .crown{ width: 78px; height: 78px; display: inline-block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.series-crowns .crown svg{ display: block; width: 100%; height: 100%; }
.series-crowns .crown.won{ filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
/* tournament: hlavy 3 magov namiesto lebiek — vyššie pod HUD boxom, väčšie, s HP/manou nad hlavou */
.series-crowns.mage-heads{
  top: calc(100% + 360px);   /* pod žrďou vlajky, o kúsok vyššie */
  gap: 12px;
}
/* labyrint: hlavy (swap buttony) skryté u OBOCH hráčov, kým kliatba beží — visibility drží layout,
   klik neprejde; objavia sa s labyrinth_end (prepína renderHUD/renderMageHeads per frame) */
.series-crowns.lab-hidden{ visibility: hidden; }
/* mág na pravej strane (p2) pozerá doľava na súpera — zrkadli hlavu ako na boarde (.hud-p2 .hud-char) */
.hud-p2 .series-crowns .mh-face canvas{ transform: scaleX(-1); }
.series-crowns .mhead{
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  box-sizing: border-box; transition: transform .1s ease;
}
.series-crowns .mh-face{
  position: relative; width: 77px; height: 77px; border-radius: 8px; box-sizing: border-box;
  overflow: hidden; background: rgba(12,14,18,.72);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.series-crowns .mh-face svg,
.series-crowns .mh-face canvas{ width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* rám okienka NAD sprite-om → mág pôsobí, že je ZA rámom (rám prekrýva okraje) */
.series-crowns .mh-face::after{
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px #000, inset 0 0 0 5px rgba(255,255,255,.12);
}
/* HP/mana riadok nad hlavou */
.series-crowns .mh-stats{
  display: flex; gap: 7px; align-items: center; justify-content: center; min-height: 18px;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 12px; line-height: 1;
  color: #f0f0f0; text-shadow: 2px 2px 0 rgba(0,0,0,.7);
}
.series-crowns .mh-stats.empty{ visibility: hidden; }
.series-crowns .mh-hp, .series-crowns .mh-mana{ display: inline-flex; align-items: center; gap: 3px; }
.series-crowns .mh-hp svg, .series-crowns .mh-mana svg{ width: 12px; height: 12px; display: block; }
.series-crowns .mhead.dead .mh-face{ opacity: .92; }          /* lebka — mág je mŕtvy (= prehra) */
.series-crowns .mhead.current .mh-face::after{ box-shadow: 0 0 0 2px #000, inset 0 0 0 4px rgba(255,213,79,.95), 0 0 14px rgba(255,200,60,.55); } /* aktuálne nasadený */
.series-crowns .mhead.clickable{ pointer-events: auto; cursor: pointer; }
.series-crowns .mhead.clickable .mh-face::after{ box-shadow: 0 0 0 2px #000, inset 0 0 0 3px #000, inset 0 0 0 5px rgba(120,170,255,.6); }
.series-crowns .mhead.clickable:hover{ transform: scale(1.07); }
.series-crowns .mhead.clickable:hover .mh-face::after{ box-shadow: 0 0 0 2px #000, inset 0 0 0 4px rgba(120,170,255,.95), 0 0 16px rgba(90,150,255,.6); }
.series-crowns .mhead.armed .mh-face::after{ box-shadow: 0 0 0 2px #000, inset 0 0 0 4px #2ecc71, 0 0 16px rgba(46,204,113,.75); } /* navolená výmena v tomto kole */
/* teleport (výmena maga) — explózia centrovaná na postavu, PRED mágom; opacity riadi JS (0.75 out / 1.0 in) */
.teleport-fx{ position: absolute; pointer-events: none; image-rendering: pixelated; }
.turn-timer{
  position: fixed; top: 78px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  padding: 8px 14px; border-radius: 2px;
  background: rgba(12,14,18,.8); box-shadow: 0 0 0 2px #000;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 20px; letter-spacing: 1px; color: #e8e8e8;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6); pointer-events: none; min-width: 64px; text-align: center;
}
.turn-timer.hidden{ display: none; }
/* quick-draw: časovač beží až keď súper locklne -> daj ho pod hlášku „OPPONENT IS READY" s medzerou */
.turn-timer.below-status{ top: 172px; }
.turn-timer.urgent{ color: #ff6b6b; animation: timer-pulse .5s steps(2) infinite; }
@keyframes timer-pulse{ 50%{ transform: translateX(-50%) scale(1.12); } }

/* „ROUND N" animácia medzi kolami — round-script ostane vidieť, kým dobehne */
.round-banner{
  position: fixed; top: 40%; left: 50%; transform: translate(-50%,-50%) scale(.6);
  z-index: 50; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
  font-size: 60px; letter-spacing: 5px; color: #ffd54f;
  text-shadow: 5px 5px 0 #000, 0 0 28px rgba(255,200,60,.75);
  opacity: 0;
}
/* veľký démon tile pod „FINAL ROUND" (rovnaký vzhľad ako .q-badge.demon — červený okraj) */
.round-banner .rb-demon{
  width: 120px; height: 120px; overflow: hidden; border-radius: 4px;
  background: #2a0d12;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 3px rgba(255,90,90,.75), 0 0 28px rgba(255,60,60,.6);
}
.round-banner .rb-demon img{ width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.round-banner.hidden{ display: none; }
.round-banner.show{ animation: round-pop 1.9s ease-out forwards; }
@keyframes round-pop{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  16%  { opacity: 1; transform: translate(-50%,-50%) scale(1.14); }
  28%  {              transform: translate(-50%,-50%) scale(1); }
  72%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.05); }
}

/* ---------- Lobby (úvodná obrazovka hosta) ---------- */
.lobby{
  position: fixed; inset: 0; z-index: 9999; overflow: auto;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; color: #fff;
}
.lobby.hidden{ display: none; }
.lobby-card{
  background: #121315; border: 1px solid #2a2b2e; box-shadow: 0 0 0 2px #000, 0 12px 40px rgba(0,0,0,.6);
  border-radius: 4px; padding: 24px 28px; width: min(620px, 94vw);
}
.lobby-title{ font-size: 30px; color: #ffb300; text-align: center; margin: 0 0 4px;
  text-shadow: 3px 3px 0 #7a1f00, 6px 6px 0 rgba(0,0,0,.5); letter-spacing: 3px; }
.lobby-sub{ font-size: 11px; color: #9aa; text-align: center; margin: 0 0 18px; letter-spacing: 1px; }
.lobby-section{ margin-bottom: 18px; }
.lobby-label{ font-size: 10px; color: #cfd2d6; letter-spacing: 1px; margin-bottom: 8px; }
.opt-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.opt{
  flex: 1 1 auto; min-width: 56px; padding: 10px 8px; cursor: pointer;
  background: #1c1d20; color: #cfd2d6; border: none; box-shadow: 0 0 0 2px #000;
  border-radius: 2px; font-family: inherit; font-size: 10px; letter-spacing: 1px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.6); transition: background .12s, color .12s;
}
.opt:hover{ background: #26282c; }
/* aktívna voľba — oranžová, farba hry (rovnaká ako GAME OVER / ROUND) */
.opt.active{ background: #ffb300; color: #2a1c00; box-shadow: 0 0 0 2px #000, inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.3); }
.weights{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.weight{ display: flex; align-items: center; gap: 8px; font-size: 10px; color: #cfd2d6; }
.weight .w-ico{ width: 16px; height: 16px; display: inline-block; image-rendering: pixelated; flex: 0 0 auto; }
.weight input{
  width: 88px; margin-left: auto; padding: 6px 10px; background: #0c0e12; color: #fff; border: none; box-sizing: border-box;
  box-shadow: 0 0 0 2px #000; border-radius: 2px; font-family: inherit; font-size: 11px; text-align: left; flex: 0 0 auto;
}
.weight .pct{ color: #888; font-size: 10px; flex: 0 0 auto; }
.weights-sum{ margin-top: 8px; font-size: 10px; color: #ffb300; }
.weights-sum.bad{ color: #ff6b6b; }
.lobby-start{
  width: 100%; margin-top: 8px; padding: 16px; cursor: pointer; border: none; border-radius: 2px;
  background: #ffb300; color: #2a1c00; font-family: inherit; font-size: 14px; letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.25);
  box-shadow: 0 0 0 2px #000, inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.3);
}
.lobby-start:hover{ background: #ffc333; }
.lobby-start:active{ transform: translateY(3px); box-shadow: 0 0 0 2px #000, inset 0 3px 0 rgba(0,0,0,.25); }
.lobby-start:disabled{ background: #444; color: #888; cursor: not-allowed; box-shadow: 0 0 0 2px #000; }

.lobby-wait{
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 14px; color: #cfd2d6;
  letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(0,0,0,.6); line-height: 1.8;
}
.lobby-wait.hidden{ display: none; }

/* ---------- Intermission (medzi hrami série) ---------- */
.intermission{
  position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; color: #fff;
}
.intermission.hidden{ display: none; }
.intermission-box{ text-align: center; }
.im-title{ font-size: 22px; color: #ffd54f; text-shadow: 3px 3px 0 rgba(0,0,0,.5); margin-bottom: 24px; letter-spacing: 2px; }
.im-crowns{ display: flex; align-items: flex-start; justify-content: center; gap: 32px; margin-bottom: 26px; }
.im-col{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.im-side{ display: flex; gap: 10px; min-height: 48px; }
.im-side .crown{ width: 48px; height: 48px; display: inline-block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.im-side .crown svg{ display: block; width: 100%; height: 100%; }
.im-who{ font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 11px; letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
.im-who.you{ color: #ffb300; }
.im-who.opp{ color: #9aa; }
.im-vs{ align-self: center; font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 14px; color: #9aa; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
/* novo získaná koruna „dopadne" — zväčší sa a so žiarou sadne na miesto */
.im-side .crown.new{ animation: crown-pop .8s ease-out both; }
@keyframes crown-pop{
  0%   { transform: scale(2.6) rotate(-22deg); opacity: 0; filter: drop-shadow(0 0 18px #ffd54f); }
  55%  { transform: scale(1.25) rotate(7deg);  opacity: 1; filter: drop-shadow(0 0 14px #ffd54f); }
  100% { transform: scale(1) rotate(0);        opacity: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
}
.im-next{ font-size: 12px; color: #9aa; letter-spacing: 1px; }

/* kompaktnejšie na menších šírkach */
@media (max-width: 1100px){
  .controls{ gap: 6px; padding: 6px 8px; }
  .btn{ padding: 7px 10px; }
}

/* special sprite v strede boardu */
.special-center{
    position: absolute;
    width: auto; height: auto;
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 4; /* nad gridom, pod HUD */
  }
  
  /* plávajúci -X HP nad postavou */
  .dmg-float{
    position: absolute;
    z-index: 6;
    pointer-events: none;
    color: #ff5a5a;
    font-weight: 900;
    font-size: 24px;
    text-shadow: 0 2px 0 #000;
    transform: translateX(-50%);
    animation: rise-fade 900ms ease-out forwards;
  }
  @keyframes rise-fade{
    0%   { opacity: 1; transform: translate(-50%, -8px); }
    100% { opacity: 0; transform: translate(-50%, -56px); }
  }

/* ---- HUD pásy P1/P2 — vertikálne ---- */
  /* pixel-art widget — plochá farba, tvrdý čierny obrys, bevel hrany namiesto blur skla */
  .hud-box{
    top: 28px;
    z-index: 3;
    padding: 4px 10px 10px;
    border-radius: 2px;
    background: rgba(12,14,18,.55);
    border: none;
    backdrop-filter: none;
    box-shadow:
      0 0 0 2px #000,
      inset 0 2px 0 rgba(255,255,255,.07),
      inset 0 -2px 0 rgba(0,0,0,.55);
    font-weight: 700;
    width: 296px; /* 5 akcií v jednom riadku logu — aj keď 3 hlavné nesú šípku smeru */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hud-p1{ position: fixed; left: 14px; }
  .hud-p2{ position: fixed; right: 14px; }
  
  .hud-char{
    width: 180px; height: 180px;
    /* orez prázdneho vzduchu nad postavou — vizuálna veľkosť postavy ostáva, widget je nižší */
    margin-top: -60px;
    clip-path: inset(60px 0 0 0);
    image-rendering: pixelated;
    flex: none;
    transition: filter .5s ease;
  }
  .hud-p2 .hud-char{ transform: scaleX(-1); } /* P2 pozerá doľava */

  /* Escanor: pride indikátor (ikona pride.png + číslo) vľavo od postavy, rozsah abilitky (minimapka) vpravo */
  /* vertikálne vycentrované na stred Escanorovho tela (~68px od vrchu widgetu); left = rovnaký odstup od okraja ako minimapka (.pride-range right: 40px) */
  .pride-badge{ position: absolute; left: 40px; top: 52px; z-index: 4; display: flex; flex-direction: row; align-items: center; gap: 3px; pointer-events: none; }
  .pride-badge.hidden, .pride-range.hidden{ display: none; }
  /* Lev = indikátor pride: 4 framy (pride_lion_0..3.png, orezané z „pride lions.png") — biely → zlatý odspodku, JS mení src.
     Pride 3 (celý zlatý) navyše pulzuje = signál, že je to max. */
  .pride-badge img{ height: 42px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); } /* pomer strán zachovaný */
  .pride-badge.pride-max img{ animation: pride-max-pulse 1s ease-in-out infinite; }
  @keyframes pride-max-pulse{
    0%,100%{ filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 0 2px rgba(255,210,74,.5)); }
    50%    { filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(255,210,74,1)); }
  }
  .pride-badge .pride-num{ font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 18px; color: #ffd24a;
    text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 2px 3px rgba(0,0,0,.9); }
  .pride-range{ position: absolute; right: 40px; top: 58px; z-index: 4; display: grid; gap: 2px; pointer-events: none;
    padding: 3px; background: rgba(0,0,0,.4); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
  .pride-range .pr-cell{ width: 9px; height: 7px; border-radius: 1px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  .pride-range .pr-cell.hit{ background: rgba(255,150,0,.85); box-shadow: inset 0 0 0 1px rgba(255,210,80,.9); }
  /* pozícia hráča = červená bodka (navrch, aj keď je políčko v range) — nemýli sa s dosahom */
  .pride-range .pr-cell.caster{ position: relative; }
  .pride-range .pr-cell.caster::after{ content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 4px;
    border-radius: 50%; background: #ff2b2b; box-shadow: 0 0 0 1px #000, 0 0 3px rgba(255,0,0,.8); }

  /* Escanor: float nad postavou po zmene pride — zelený lev + ▲ (rástol) / červený lev + ▼ (klesol) */
  @keyframes pride-float-rise {
    0%   { transform: translateX(-50%) translateY(8px) scale(.7); opacity: 0; }
    18%  { transform: translateX(-50%) translateY(-2px) scale(1); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateX(-50%) translateY(-50px) scale(1); opacity: 0; }
  }
  .pride-float{ position: absolute; z-index: 9; display: flex; flex-direction: row; align-items: center; gap: 4px; pointer-events: none;
    animation: pride-float-rise 1.7s ease-out forwards; }
  /* solídne zafarbený lev (silueta cez mask z pride.png) — vedľa neho šípka */
  .pride-float .pf-lion{ width: 78px; height: 52px; -webkit-mask: url(/assets/pride.png) center/contain no-repeat; mask: url(/assets/pride.png) center/contain no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
  .pride-float .pf-arrow{ font-size: 30px; font-weight: 900; line-height: .8;
    text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 2px 3px rgba(0,0,0,.9); }
  .pride-float.up .pf-lion{ background: #3ddc84; }  .pride-float.up .pf-arrow{ color: #3ddc84; }
  .pride-float.down .pf-lion{ background: #ff3b3b; } .pride-float.down .pf-arrow{ color: #ff3b3b; }

  /* Vlkolak: fáza mesiaca (ikona BEZ čísla) vľavo od postavy — rovnaké miesto ako Escanorov pride lev */
  .moon-badge{ position: absolute; left: 40px; top: 52px; z-index: 4; display: flex; align-items: center; pointer-events: none; }
  .moon-badge.hidden, .moon-dmg.hidden{ display: none; }
  .moon-badge img{ height: 42px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
  .moon-badge.moon-max img{ animation: pride-max-pulse 1s ease-in-out infinite; } /* spln pulzuje = max dmg */
  /* dmg specialu pri aktuálnej fáze — vpravo od postavy (miesto Escanorovej minimapky) */
  .moon-dmg{ position: absolute; right: 40px; top: 58px; z-index: 4; pointer-events: none;
    display: flex; align-items: center; gap: 4px;
    font-family: "Press Start 2P", Impact, "Arial Black", sans-serif; font-size: 18px; color: #ffd24a;
    text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 2px 3px rgba(0,0,0,.9); }
  /* smrtka pri čísle dmg — rovnako veľká ako číslo (default .mini je len 12px) */
  .moon-dmg .pix-ico.mini{ width: 18px; height: 18px; vertical-align: 0; margin-left: 0; }

  /* Vlkolak: float s NOVOU fázou mesiaca po zmene levelu — rovnaký let ako pride float, bez farieb/šípok */
  .moon-float{ position: absolute; z-index: 9; pointer-events: none; animation: pride-float-rise 1.7s ease-out forwards; }
  .moon-float img{ height: 46px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.85)); }

  /* palette swap pravej strany (p2) — vyblednutý „albino" variant (do biela), fixný na celú sériu */
  .sprite-actor.alt-color,
  .special-center.alt-color,
  .charge-canvas.alt-color,
  .projectile.alt-color,
  .mage-head.alt-color{ filter: saturate(.22) brightness(1.4); }
  .sprite-ghost.alt-color{ filter: grayscale(35%) saturate(.22) brightness(1.4); }
  /* HUD portrét — len v zdravom stave; wounded/critical/dead degradácia má prednosť */
  .hud-char.alt-color:not(.wounded):not(.critical):not(.dead){ filter: saturate(.22) brightness(1.4); }
  /* char-select hráča vpravo (p2) — náhľady magov v rovnakom alternatívnom vykreslení */
  #char-select.p2-side canvas.char-canvas{ filter: saturate(.22) brightness(1.4); }
  /* Medúza, Minotaur a Naruto majú pre p2 natívnu paletu (…_2 priečinky) — filter sa na ne neaplikuje */
  #char-select.p2-side canvas.char-canvas[data-char="medusa"]{ filter: none; }
  #char-select.p2-side canvas.char-canvas[data-char="minotaur"]{ filter: none; }
  #char-select.p2-side canvas.char-canvas[data-char="naruto"]{ filter: none; }
  #char-select.p2-side canvas.char-canvas[data-char="escanor"]{ filter: none; }
  /* hráč vpravo (p2): celý výber orientovaný na opačnú stranu — postavy v kartách aj mini-caster
     v náhľade špeciálu hľadia doľava (zrkadlovo k ľavému hráčovi); zónu zrkadlí renderAbilityPreview */
  #char-select.p2-side canvas.char-canvas{ transform: scaleX(-1); }
  #char-select.p2-side .mini-caster{ transform: scaleX(-1); }

  /* skamenený HUD portrét — sivá socha; smrť (dead) má prednosť */
  .hud-char.stoned:not(.dead){ filter: grayscale(.92) brightness(.82) contrast(1.12) !important; }

  /* labyrint: súperov widget prekrýva bludisko (assets/minotaur/labyrint.png) — zmizne portrét,
     HP, mana, záznam ťahov aj OPPONENT popisok; vlajka štartéra a korunky série OSTÁVAJÚ viditeľné
     (sú ukotvené pod widgetom, mimo prekrytia); platí pre OBE strany, kým labyrint (alebo labReveal) trvá */
  .hud-box .maze-cover{ display: none; }
  .hud-box.in-maze > *:not(.maze-cover):not(.starter-flag):not(.series-crowns){ visibility: hidden; }
  .hud-box.in-maze::before{ visibility: hidden; } /* YOU/OPPONENT štítok nad widgetom */
  .hud-box.in-maze .maze-cover{
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    border-radius: inherit;
    z-index: 4;
  }
  /* skrytá hodnota baru (mana súpera počas labyrintu, kým widget nie je celý prekrytý) — "?" namiesto čísla */
  .bar.masked{ box-shadow: inset 0 0 0 2px rgba(155,127,232,.55), inset 0 2px 6px rgba(0,0,0,.45); }
  .bar.masked .fill, .bar.masked .fill-trail{ height: 0 !important; }

  /* glow postavy (zlatý „YOU" / pulzujúca obrana / alt-color) rieši JS: actorFilter() v rAF (inline filter) */

  /* „YOU" značka — poskakujúca zlatá šípka nad vlastnou postavou */
  .you-marker{
    position: absolute; z-index: 6; pointer-events: none;
    transition: left var(--move-ms, 700ms) linear, top var(--move-ms, 700ms) linear; /* sync s pohybom postavy */
  }
  .you-marker-bob{
    display: flex; flex-direction: column; align-items: center;
    animation: you-bob .5s steps(2) alternate infinite;
  }
  .you-tag{
    font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
    font-size: 10px; letter-spacing: 1px; line-height: 1; color: #2a2000;
    background: linear-gradient(180deg, #ffd54f 0 3px, #d4a017 3px 100%);
    padding: 4px 7px 3px; border-radius: 2px;
    box-shadow: 0 0 0 2px #000, 0 0 10px rgba(255,200,60,.6);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
  }
  .you-tip{
    width: 0; height: 0; margin-top: -1px;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 8px solid #b8860b;
  }
  @keyframes you-bob{ from{ transform: translateY(0); } to{ transform: translateY(-5px); } }

  /* degradácia portrétu podľa HP (Doom-style) */
  .hud-char.wounded{
    filter: saturate(.5) brightness(.72) sepia(.7) hue-rotate(-32deg)
            drop-shadow(0 0 10px rgba(255,40,40,.5));
  }
  .hud-char.critical{
    animation: crit-pulse 1.1s ease-in-out infinite;
  }
  @keyframes crit-pulse{
    0%, 100% {
      filter: saturate(.35) brightness(.55) sepia(.85) hue-rotate(-35deg)
              drop-shadow(0 0 10px rgba(255,20,20,.6));
    }
    50% {
      filter: saturate(.35) brightness(.7) sepia(.85) hue-rotate(-35deg)
              drop-shadow(0 0 26px rgba(255,20,20,1));
    }
  }
  .hud-char.dead{
    filter: grayscale(1) brightness(.35) contrast(1.1);
    animation: none;
  }

  /* zelená pixel-art SVG vlajka — kto začína kolo (maxi, pod widgetom) */
  .starter-flag{
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    width: 280px; height: 308px; /* pomer viewBoxu 100:110 */
    opacity: 0;
    transition: opacity .2s ease;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
    z-index: 1;
    pointer-events: none;
  }
  .starter-flag svg{ display: block; width: 100%; height: 100%; }
  /* hráč napravo má vlajku zrkadlovo (žrď z vonkajšej strany); label sa neotáča, ostáva čitateľný */
  .hud-p2 .starter-flag svg{ transform: scaleX(-1); }
  .starter-flag.on{ opacity: 1; }
  /* nápis na látke vlajky — pixel font, tvrdý tieň */
  .starter-flag .flag-label{
    position: absolute;
    top: 27%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Press Start 2P", Impact, "Arial Black", sans-serif;
    font-size: 28px;
    color: #eaffea;
    text-shadow: 3px 3px 0 #1b5e20;
    white-space: nowrap;
    z-index: 1;
  }
  .starter-flag .flag-label sup{
    font-size: 55%;
    vertical-align: super;
  }

  /* dva stĺpce: ❤️ a 💧, pod ikonou vertikálny bar */
  /* stĺpce HP/MP si rozdelia celú šírku widgetu — bary ju proporčne vyplnia */
  .hud-stats{
    display: flex;
    gap: 16px;
    margin-top: 8px;
    width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
  }
  .hud-stat{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  /* záznam akcií kola pod widgetom — všetky akcie (aj s goldenom) v jednom riadku */
  .action-log{
    display: flex;
    gap: 4px;
    margin-top: 10px;
    min-height: 26px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .a-badge{
    width: 44px; padding: 3px 0; box-sizing: border-box;
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
    background: #2c2c2e;
    box-shadow: 0 0 0 1px #000;
  }
  .a-badge.move     { background: #4a4a4a; }
  .a-badge.dash     { background: #3f3f3f; }
  .a-badge.recharge { background: #0b4ea2; }
  .a-badge.attack   { background: #7f1515; }
  .a-badge.melee    { background: #5c0000; }
  .a-badge.shield   { background: #00606b; }
  .a-badge.mirror   { background: #00525b; }
  .a-badge.special  { background: #5e1387; }
  .a-badge.golden_shield { background: #8a6d00; }
  .a-badge.golden_mirror { background: #8a6d00; }
  .a-badge.golden_mana   { background: #8a6d00; }
  .a-badge.last_stand    { background: #8a6d00; }
  /* nevykonaná akcia (odmietnutá serverom — napr. plná mana, strela mimo plochu) — jemný červený ✕
     z rohu do rohu cez badge; rovnako v lište ťahov (.q-badge) aj v zázname pod widgetom (.a-badge).
     Dve diagonály cez linear-gradient s rohovými kľúčovými slovami (magic-corner) → presne do rohov aj pri obdĺžniku. */
  .q-badge.act-invalid, .a-badge.act-invalid{ position: relative; }
  .q-badge.act-invalid::after, .a-badge.act-invalid::after{
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    /* SVG s preserveAspectRatio='none' → koncové body čiar sa mapujú presne do rohov boxu (aj obdĺžnik);
       non-scaling-stroke drží rovnakú hrúbku 2px bez ohľadu na pomer strán */
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 10 10'><path d='M0 0L10 10M10 0L0 10' fill='none' stroke='%23e53935' stroke-width='2' stroke-opacity='.8' vector-effect='non-scaling-stroke'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  /* prázdny slot záznamu — čiarkovaný placeholder, rovnaká šírka ako vyplnený badge */
  .a-badge.a-slot{
    background: transparent;
    box-shadow: none;
    border: 2px dashed rgba(255,255,255,.18);
    color: rgba(255,255,255,.35);
  }
  /* vertikálny predel za golden shieldom v zázname kola */
  .log-divider{
    width: 2px; height: 20px; flex: none; align-self: center;
    background: rgba(255,255,255,.25);
    border-radius: 2px;
  }
  /* HP/MP bary — 10 dielikov, vertikálne (plnia sa zdola) */
  /* flex centrovanie zarovná optický stred emoji a čísla (baseline emoji sedí inde než textu) */
  .bar-label{
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* presná hodnota hneď vedľa ikony — farba podľa baru, tvrdý pixel tieň */
  .bar-num{
    margin-left: 5px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    /* fixná šírka na 2 cifry — ikona sa nehýbe, keď hodnota preskočí medzi 9 a 10 */
    min-width: 30px;
    text-align: left;
    text-shadow: 0 2px 0 rgba(0,0,0,.75);
  }
  .bar-num.hp-num  { color: #ff5a5a; }
  .bar-num.mana-num{ color: #57a9ff; }
  /* pixel-art bar — ploché farby s tvrdým bevel okrajom, žiadne mäkké gradienty */
  .bar{
    position: relative;
    width: 100%; height: 118px;
    border-radius: 2px;
    background: #14161a;
    box-shadow: 0 0 0 2px #000;
    overflow: hidden;
  }
  .bar .fill, .bar .fill-trail{
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 0%;
  }
  /* steps() = skoková zmena hladiny — retro pohyb namiesto plynulého */
  .bar .fill{ transition: height .25s steps(3, end); z-index: 1; }
  /* trail reaguje s oneskorením — pri strate ostane chvíľu svietiť nad novou hladinou */
  .bar .fill-trail{
    transition: height .5s steps(5, end) .4s;
    background: linear-gradient(90deg, #ffffff 0 4px, #ffd54f 4px 100%);
  }
  /* svetlá hrana vľavo + plochá farba + tmavá hrana vpravo — pixel bevel */
  .hp-bar .fill{
    background: linear-gradient(90deg,
      #ff8a80 0 4px, #e53935 4px calc(100% - 4px), #9c1f1f calc(100% - 4px) 100%);
  }
  .mana-bar .fill{
    background: linear-gradient(90deg,
      #82c4ff 0 4px, #1e88e5 4px calc(100% - 4px), #11519b calc(100% - 4px) 100%);
  }
  /* pri zisku výplň blikne do jasu */
  .bar .fill.gain{ animation: fill-gain .45s ease-out; }
  @keyframes fill-gain{
    0%   { filter: brightness(2); }
    100% { filter: brightness(1); }
  }
  
  /* zlaté zvýraznenie boxu aktuálneho klienta — hrubý rámik + jemná zlatá výplň */
  /* widget vlastného hráča — plochý zlatý bevel (svetlý pás hore, tmavý dole) + YOU štítok */
  .hud-box.me {
    border: none;
    background: linear-gradient(180deg,
      rgba(227,184,50,.75) 0 4px,
      rgba(184,134,11,.6) 4px calc(100% - 4px),
      rgba(122,94,0,.75) calc(100% - 4px) 100%);
    box-shadow:
      0 0 0 2px #000,
      0 0 16px rgba(255,200,60,.35);
  }
  /* na zlatom podklade svetlé farby čísel splývajú — tmavé odtiene so svetlým tieňom */
  .hud-box.me .bar-num.mana-num{ color: #0d47a1; text-shadow: 0 1px 2px rgba(255,236,170,.55); }
  .hud-box.me .bar-num.hp-num  { color: #8e0000; text-shadow: 0 1px 2px rgba(255,236,170,.55); }
  .hud-box.me::before,
  .hud-box.foe::before{
    position: absolute;
    top: -14px; left: 50%; transform: translateX(-50%);
    padding: 2px 16px;
    border-radius: 2px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    box-shadow: 0 0 0 2px #000;
    border: none;
    z-index: 2;
  }
  .hud-box.me::before{
    content: "YOU";
    background: linear-gradient(180deg, #ffd54f 0 3px, #d4a017 3px 100%);
    color: #2a2000;
  }
  .hud-box.foe::before{
    content: "OPPONENT";
    background: linear-gradient(180deg, #4a4d55 0 3px, #2c2e34 3px 100%);
    color: #cfd4dc;
  }
  
  /* ---- plávajúce bubliny nad postavou ---- */
  @keyframes floatUp {
    from { transform: translate(-50%, -6px); opacity: 0; }
    30%  { opacity: 1; }
    to   { transform: translate(-50%, -48px); opacity: 0; }
  }
  .dmg-float, .mana-float{
    position: absolute;
    z-index: 5;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
    pointer-events: none;
    white-space: nowrap;
    animation: floatUp .9s ease-out forwards;
  }
  .dmg-float {  color: #ff5a5a; }
  .mana-float { color: #57a9ff; }
  .mana-float.gold { color: #ffd54f; } /* golden mana — rovnaký float, len zlatý */

  /* štítové a heal bubliny */
  .heal-float{ color: #5eff8a; }
  .shield-float, .block-float, .mirror-float, .heal-float{
    position: absolute;
    z-index: 5;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
    pointer-events: none;
    white-space: nowrap;
    animation: floatUp .9s ease-out forwards;
  }
  .shield-float { color: #4dd0e1; }
  .block-float  { color: #4dd0e1; }
  .mirror-float { color: #ce93d8; }
  .golden-float {
    position: absolute;
    z-index: 5;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
    pointer-events: none;
    white-space: nowrap;
    animation: floatUp .9s ease-out forwards;
    color: #ffd54f;
  }

  /* „Goku" nabíjacia aura pri recharge — naviazaná na postavu (cx = päta) */
  .charge-aura{ position: absolute; z-index: 4; pointer-events: none; }
  .charge-aura .ca-core{
    position: absolute; left: 0; bottom: calc(var(--tile-h) * .42);
    width: calc(var(--tile-w) * .4); height: calc(var(--tile-h) * .95);
    transform: translate(-50%, 50%);
    background: radial-gradient(ellipse at center, rgba(120,190,255,.8), rgba(87,169,255,.35) 45%, rgba(87,169,255,0) 72%);
    animation: ca-core 1.1s ease-out forwards;
  }
  .charge-aura .ca-ring{
    position: absolute; left: 0; bottom: 0;
    width: calc(var(--tile-w) * .5); height: calc(var(--tile-h) * .26);
    border: 4px solid rgba(120,190,255,.85); border-radius: 50%;
    box-shadow: 0 0 12px rgba(87,169,255,.7);
    transform: translate(-50%, 50%);
    animation: ca-ring .5s ease-out infinite;
  }
  .charge-aura .ca-streak{
    position: absolute; left: 0; bottom: 0; width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(87,169,255,0), #57a9ff 45%, #eaf4ff);
    box-shadow: 0 0 6px rgba(87,169,255,.9);
    border-radius: 2px;
    animation: ca-streak .5s ease-out infinite;
  }
  @keyframes ca-core{
    0%   { opacity: 0;   transform: translate(-50%,50%) scale(.5); }
    25%  { opacity: .9;  transform: translate(-50%,50%) scale(1.05); }
    60%  { opacity: .65; transform: translate(-50%,50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%,50%) scale(1.15); }
  }
  @keyframes ca-ring{
    0%   { opacity: .85; transform: translate(-50%,50%) scale(.4); }
    100% { opacity: 0;   transform: translate(-50%,50%) scale(1.25); }
  }
  @keyframes ca-streak{
    0%   { opacity: 0; transform: translateX(-50%) translateY(0)     scaleY(.6); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-170%) scaleY(1.1); }
  }
  /* zlatá varianta nabíjacej aury — golden mana (rovnaký efekt ako recharge, len zlatý) */
  .charge-aura.gold .ca-core{
    background: radial-gradient(ellipse at center, rgba(255,224,140,.85), rgba(255,193,7,.4) 45%, rgba(255,193,7,0) 72%);
  }
  .charge-aura.gold .ca-ring{
    border-color: rgba(255,214,90,.9);
    box-shadow: 0 0 12px rgba(255,180,0,.75);
  }
  .charge-aura.gold .ca-streak{
    background: linear-gradient(to top, rgba(255,193,7,0), #ffca28 45%, #fff3c0);
    box-shadow: 0 0 6px rgba(255,180,0,.95);
  }
  /* červená varianta nabíjacej aury — Last Hope ultra mód */
  .charge-aura.red .ca-core{
    background: radial-gradient(ellipse at center, rgba(255,140,140,.85), rgba(255,60,60,.4) 45%, rgba(255,60,60,0) 72%);
  }
  .charge-aura.red .ca-ring{
    border-color: rgba(255,110,110,.9);
    box-shadow: 0 0 12px rgba(255,50,50,.8);
  }
  .charge-aura.red .ca-streak{
    background: linear-gradient(to top, rgba(255,60,60,0), #ff5a5a 45%, #ffd6d6);
    box-shadow: 0 0 6px rgba(255,50,50,.95);
  }

  /* death summon — golden recharge stav: žiari LEN widget hráča (vlajka a korunky NIE).
     HP a mana sú zlaté (čísla, emoji, bary); pulzujú LEN HP a mana bary, zvyšok widgetu nie. */
  .hud-box.death-golden{
    box-shadow: 0 0 0 2px #000, 0 0 24px 5px rgba(255,200,60,.8); /* statická žiara celého widgetu */
  }
  /* vlajka a korunky bez zlatého efektu */
  .hud-box.death-golden .starter-flag,
  .hud-box.death-golden .series-crowns,
  .hud-box.death-golden .series-crowns .crown{ filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
  /* zlaté čísla HP/many (prebije aj .me override) */
  .hud-box.death-golden .bar-num.hp-num,
  .hud-box.death-golden .bar-num.mana-num{
    color: #ffdd57;
    text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 8px rgba(255,210,74,.9);
  }
  /* zlaté emoji ikony HP/many */
  .hud-box.death-golden .bar-label .pix-ico{
    filter: sepia(1) saturate(6) hue-rotate(-8deg) brightness(1.15) drop-shadow(0 0 4px rgba(255,210,74,.9));
  }
  /* zlaté výplne barov */
  .hud-box.death-golden .hp-bar .fill,
  .hud-box.death-golden .mana-bar .fill{
    background: linear-gradient(90deg,
      #fff3c0 0 4px, #ffca28 4px calc(100% - 4px), #b8860b calc(100% - 4px) 100%);
  }
  /* pulzuje LEN HP a mana bar */
  .hud-box.death-golden .bar{ animation: death-bar-pulse .7s ease-in-out infinite; }
  @keyframes death-bar-pulse{
    0%,100%{ box-shadow: 0 0 0 2px #000, 0 0 4px rgba(255,210,74,.5); }
    50%    { box-shadow: 0 0 0 2px #000, 0 0 16px 2px rgba(255,210,74,.95); }
  }

  /* Last Hope ultra mód — celý widget hráča červený a pulzujúci (HP aj mana), analógia k zlatému Last Stand */
  .hud-box.hope-red{
    box-shadow: 0 0 0 2px #000, 0 0 24px 5px rgba(255,70,70,.8); /* statická červená žiara celého widgetu */
  }
  .hud-box.hope-red .hp-bar .fill,
  .hud-box.hope-red .mana-bar .fill{
    background: linear-gradient(90deg,
      #ffd0d0 0 4px, #ff4d4d 4px calc(100% - 4px), #a30000 calc(100% - 4px) 100%) !important;
  }
  /* pulzujú HP aj mana bar */
  .hud-box.hope-red .bar{ animation: hope-bar-pulse .7s ease-in-out infinite; }
  /* červené HP aj mana číslo (prebije aj .me override) */
  .hud-box.hope-red .bar-num.hp-num,
  .hud-box.hope-red .bar-num.mana-num{
    color: #ff6b6b !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 8px rgba(255,80,80,.95);
  }
  /* červené ikony HP (srdce) aj many (kvapka) */
  .hud-box.hope-red .bar-label .pix-ico{
    filter: sepia(1) saturate(8) hue-rotate(-38deg) brightness(1.05) drop-shadow(0 0 4px rgba(255,80,80,.9));
  }
  @keyframes hope-bar-pulse{
    0%,100%{ box-shadow: 0 0 0 2px #000, 0 0 4px rgba(255,70,70,.5); }
    50%    { box-shadow: 0 0 0 2px #000, 0 0 16px 2px rgba(255,70,70,.95); }
  }

  /* labyrint: widget prekrytý bludiskom nesmie ČERVENOU/ZLATOU žiarou prezradiť buff stav skrytého
     súpera (Last Hope / Last Stand) — vonkajší glow sa vracia na základný rámik widgetu */
  .hud-box.in-maze.hope-red,
  .hud-box.in-maze.death-golden{
    box-shadow:
      0 0 0 2px #000,
      inset 0 2px 0 rgba(255,255,255,.07),
      inset 0 -2px 0 rgba(0,0,0,.55);
  }

  /* mana polovica má 3 riadky (ruky / +6 mana / cena v srdiečkach) — zhutni padding+gap+font,
     nech jej výška ostane ≤ shield/mirror polovica → výška celého buttonu sa nezmení (1:1) */
  .golden-half.gm-half{ padding-top: 4px; padding-bottom: 4px; gap: 1px; }
  .golden-half.gm-half .cost{ font-size: 10px; line-height: 1; }
  /* Last Stand polovica duálneho gold tlačidla — ikona démona z PNG (last_stand.png) */
  .golden-half.ls-half .ls-ico{
    width: 30px; height: 34px; object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(255,90,90,.7));
  }
  /* Last Stand ikona (zmenšenina démona) namiesto 💀 — v malých bunkách (lišta .opt + záznam .a-badge)
     fixná malá výška, nech bunku NEzväčší; veľká „end" bunka (.demon) ju vyplní (má pevný rozmer) */
  .q-badge.opt .ls-badge, .a-badge .ls-badge{
    width: auto; height: 18px; object-fit: contain; image-rendering: pixelated; display: block;
  }
  /* démon „end" bunka v lište posledného kola — rozmer ako štandardná akčná bunka (56×40), nezväčšuje riadok */
  .q-badge.demon{
    width: 56px; height: 40px; padding: 0; overflow: hidden;
    background: #2a0d12; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(255,90,90,.6), 0 0 12px rgba(255,60,60,.55);
  }
  .q-badge.demon .ls-badge{ width: 100%; height: 100%; object-fit: contain; }

  /* úspešný blok štítu — hexagonálna bariéra flashne + rázové prstence + iskry */
  .shield-fx{ position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%,-50%); }
  .shield-fx.sb-barrier{
    clip-path: polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%);
    background: linear-gradient(135deg, rgba(150,235,245,.9), rgba(77,208,225,.35));
    box-shadow: 0 0 26px rgba(77,208,225,.85);
    animation: sb-barrier .5s ease-out forwards;
  }
  .shield-fx.sb-barrier.gold{ background: linear-gradient(135deg, rgba(255,230,150,.92), rgba(255,200,60,.4)); box-shadow: 0 0 26px rgba(255,200,60,.85); }
  @keyframes sb-barrier{
    0%   { opacity: 0;  transform: translate(-50%,-50%) scale(.55); }
    30%  { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
    55%  { opacity: .9; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0;  transform: translate(-50%,-50%) scale(1.14); }
  }
  .shield-fx.sb-flash{
    width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle, #fff, rgba(77,208,225,.7) 50%, transparent 72%);
    animation: sb-flash .35s ease-out forwards;
  }
  .shield-fx.sb-flash.gold{ background: radial-gradient(circle, #fff, rgba(255,200,60,.7) 50%, transparent 72%); }
  @keyframes sb-flash{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.3);} 35%{opacity:1;transform:translate(-50%,-50%) scale(1.5);} 100%{opacity:0;transform:translate(-50%,-50%) scale(2);} }
  .shield-fx.sb-ring{
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid rgba(150,235,245,.9); box-shadow: 0 0 12px rgba(77,208,225,.7);
    animation: sb-ring .55s ease-out forwards;
  }
  .shield-fx.sb-ring.gold{ border-color: rgba(255,215,100,.9); box-shadow: 0 0 12px rgba(255,200,60,.7); }
  @keyframes sb-ring{ 0%{opacity:.9;transform:translate(-50%,-50%) scale(.4);} 100%{opacity:0;transform:translate(-50%,-50%) scale(4.2);} }
  /* roztrieštené úlomky štítu — glassy, rotujú a letia na všetky strany */
  .shield-fx.sb-shard{
    background: linear-gradient(135deg, #eafbff, rgba(77,208,225,.8));
    box-shadow: 0 0 14px rgba(77,208,225,1), 0 0 4px #fff inset;
    border: 1px solid rgba(255,255,255,.7);
    clip-path: polygon(50% 0, 100% 62%, 62% 100%, 0 72%);
    animation: sb-shard .8s ease-out forwards;
  }
  .shield-fx.sb-shard.gold{ background: linear-gradient(135deg, #fff6da, rgba(255,200,60,.8)); box-shadow: 0 0 14px rgba(255,200,60,1); border-color: rgba(255,255,255,.7); }
  @keyframes sb-shard{
    0%   { opacity: 1; transform: translate(-50%,-50%) translate(0,0)                rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot)); }
  }

  /* výstraha pri pokuse o akciu bez dostatku many */
  .lowmana-float {
    position: absolute;
    z-index: 5;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
    pointer-events: none;
    white-space: nowrap;
    animation: floatUp .9s ease-out forwards;
    color: #ffca28;
  }
  /* skamenenie (Medúzin special) — STONED / PETRIFIED bublina */
  .stone-float {
    position: absolute;
    z-index: 5;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
    pointer-events: none;
    white-space: nowrap;
    animation: floatUp .9s ease-out forwards;
    color: #c3c8d2;
  }
  /* labyrint (Minotaurov special) — LOST/ESCAPED bublina + stopa na nití */
  .maze-float {
    position: absolute;
    z-index: 5;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
    pointer-events: none;
    white-space: nowrap;
    animation: floatUp .9s ease-out forwards;
    color: #b388ff;
  }
  @keyframes lowmana-flash {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 2px 6px rgba(0,0,0,.45); }
    50%      { box-shadow: 0 0 10px rgba(255,90,90,.95), inset 0 0 8px rgba(255,90,90,.6); }
  }
  .mana-bar.low-warn { animation: lowmana-flash .45s ease-in-out 2; }

  /* ============ MIRROR REFLECT FX ============ */
  .mirror-fx { position: absolute; pointer-events: none; z-index: 6; }

  /* zrkadlová tabuľa: vyšľahne, zableskne, praskne (gold rám + cyan sklo ako ikona) */
  .mirror-pane{
    transform: translate(-50%, -50%) scaleY(0);
    border: 4px solid #d4a017;
    background: linear-gradient(135deg,
      rgba(255,255,255,.92) 0%, rgba(178,235,242,.5) 45%, rgba(212,160,23,.45) 100%);
    box-shadow: 0 0 30px rgba(178,235,242,.95), inset 0 0 20px rgba(255,255,255,.85);
    animation: mirror-pane .5s ease-out forwards;
  }
  @keyframes mirror-pane{
    0%   { transform: translate(-50%,-50%) scaleY(0)    skewX(0deg);  opacity: 0; filter: brightness(1); }
    22%  { transform: translate(-50%,-50%) scaleY(1.08) skewX(0deg);  opacity: 1; filter: brightness(1.8); }
    55%  { transform: translate(-50%,-50%) scaleY(1)    skewX(-3deg); opacity: 1; filter: brightness(1.2); }
    100% { transform: translate(-50%,-50%) scaleY(1.02) skewX(10deg); opacity: 0; filter: brightness(2.2); }
  }

  /* 🪞 emoji ako zdroj lúča — vyskočí, kopne pri výstrele, zhasne */
  .mirror-emoji{
    transform: translate(-50%,-50%) scale(0);
    filter: drop-shadow(0 0 10px rgba(178,235,242,.9));
    animation: mirror-emoji .8s ease-out forwards;
  }
  .mirror-emoji canvas{ display:block; width:100%; height:100%; image-rendering: pixelated; }
  @keyframes mirror-emoji{
    0%   { transform: translate(-50%,-50%) scale(0)    rotate(-25deg); opacity: 0; }
    18%  { transform: translate(-50%,-50%) scale(1.25) rotate(0deg);   opacity: 1; }
    32%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
    44%  { transform: translate(-50%,-50%) scale(1.18); filter: drop-shadow(0 0 18px #ffffff) brightness(1.7); } /* recoil pri výstrele lúča */
    58%  { transform: translate(-50%,-50%) scale(1); filter: drop-shadow(0 0 10px rgba(178,235,242,.9)); }
    100% { transform: translate(-50%,-50%) scale(1.05); opacity: 0; }
  }

  /* rázová vlna */
  .mirror-ring{
    border: 5px solid #d4f7fb;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(.12);
    box-shadow: 0 0 22px rgba(178,235,242,.85), inset 0 0 14px rgba(178,235,242,.6);
    animation: mirror-ring .6s ease-out forwards;
  }
  @keyframes mirror-ring{
    0%   { transform: translate(-50%,-50%) scale(.12); opacity: .95; }
    100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
  }

  /* sklenené úlomky */
  .mirror-shard{
    width: 11px; height: 11px;
    background: linear-gradient(135deg, #ffffff, #b2ebf2 60%, #d4a017);
    box-shadow: 0 0 8px rgba(178,235,242,.9);
    transform: translate(-50%,-50%);
    animation: mirror-shard .55s ease-out forwards;
  }
  @keyframes mirror-shard{
    0%   { transform: translate(-50%,-50%) rotate(0deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; }
  }

  /* Vojak: mierenie pred výstrelom — slabý laser sight z hlavne na cieľ (chvíľu sa chveje, potom
     lock-on) + pulzujúci zameriavací terčík na cieľovej bunke. Trvanie animácie (2.3 s) MUSÍ sedieť
     s klientskym SOLDIER_AIM_MS − SOLDIER_FIRE_MS; element odstráni timeout v spawnSoldierAim. */
  .soldier-aim-wrap{ transform-origin: left center; }
  .soldier-aim{
    width: 100%; height: 100%;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(255,70,45,0) 0%, rgba(255,70,45,.55) 30%, rgba(255,90,60,.8) 100%);
    box-shadow: 0 0 4px 1px rgba(255,70,45,.35);
    animation: soldier-aim 2.3s ease-out forwards;
  }
  @keyframes soldier-aim{
    0%   { opacity: 0;  transform: scaleX(0); }
    8%   { opacity: .5; transform: scaleX(1) translateY(1.5px); }
    20%  { transform: scaleX(1) translateY(-1.2px); }
    32%  { transform: scaleX(1) translateY(.8px); }
    45%  { transform: scaleX(1) translateY(-.4px); }
    55%  { transform: scaleX(1) translateY(0); }
    100% { opacity: .85; transform: scaleX(1) translateY(0); }
  }
  .soldier-aim-dot{
    width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border: 2px solid rgba(255,70,45,.9);
    border-radius: 50%;
    box-shadow: 0 0 8px 2px rgba(255,70,45,.5), inset 0 0 4px rgba(255,70,45,.6);
    animation: soldier-aim-dot .8s ease-in-out infinite;
  }
  @keyframes soldier-aim-dot{
    0%,100% { transform: scale(1);    opacity: .9; }
    50%     { transform: scale(1.35); opacity: .5; }
  }
  /* záblesk výstrelu na veľkom stredovom sprite (raf pridá triedu v momente výšľahu) */
  .special-center.soldier-fire{ animation: soldier-fire .3s ease-out forwards; }
  @keyframes soldier-fire{
    0%   { filter: brightness(2.4) drop-shadow(0 0 18px rgba(255,150,80,.9)); }
    100% { filter: brightness(1); }
  }

  /* Vojak: snajperský lúč zo zbrane na zvolenú bunku — tenká červená verzia mirror beamu
     (wrap drží rotáciu, vnútro animuje scaleX; dopad ~350 ms = SOLDIER_BEAM_HIT_MS, kedy štartuje výbuch) */
  .soldier-beam-wrap{ transform-origin: left center; }
  .soldier-beam{
    width: 100%; height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255,120,80,0) 0%, #ff5a3c 18%, #ffe0b2 50%, #ff3d2e 100%);
    box-shadow: 0 0 10px 3px rgba(255,70,45,.85);
    animation: soldier-beam .9s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes soldier-beam{
    0%   { transform: scaleX(0); opacity: 0; }
    12%  { opacity: 1; }
    38%  { transform: scaleX(1); opacity: 1; filter: brightness(1.6); }
    70%  { transform: scaleX(1); opacity: .9; filter: brightness(1.2); }
    100% { transform: scaleX(1); opacity: 0; filter: brightness(1); }
  }

  /* lúč odrazu obranca → útočník (wrap drží rotáciu, vnútro animuje scaleX) */
  .mirror-beam-wrap{ transform-origin: left center; }
  .mirror-beam{
    width: 100%; height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #b2ebf2 22%, #ffffff 55%, #ffe082 100%);
    box-shadow: 0 0 20px 6px rgba(178,235,242,.85);
    animation: mirror-beam .7s cubic-bezier(.2,.7,.3,1) .16s forwards;
  }
  /* dopad (scaleX=1) ostáva na ~0.43s (sync s dmg), beam potom dlhšie drží a pomalšie zhasína */
  @keyframes mirror-beam{
    0%   { transform: scaleX(0); opacity: 0; }
    15%  { opacity: 1; }
    38%  { transform: scaleX(1); opacity: 1; filter: brightness(1.6); }
    62%  { transform: scaleX(1); opacity: 1; filter: brightness(1.3); }
    100% { transform: scaleX(1); opacity: 0; filter: brightness(1); }
  }

  /* odraz speciálu — rovnaký hladký beam ako basic, len fialovo ladený (nie pruhy) */
  .mirror-beam.special{
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #ce93d8 20%, #ffffff 48%, #b39ddb 72%, #ce93d8 100%);
    box-shadow: 0 0 24px 7px rgba(186,104,200,.85);
  }

  /* odraz melee — hrubý drsný roztrasený burst cez skoro celé políčko (beam nemá kam letieť) */
  .mirror-melee{
    transform: translate(-50%,-50%);
    background: linear-gradient(180deg, rgba(234,255,255,.95), rgba(178,235,242,.55));
    box-shadow: 0 0 34px 12px rgba(178,235,242,.9);
    clip-path: polygon(50% 0, 61% 33%, 100% 38%, 70% 60%, 84% 100%, 50% 76%, 16% 100%, 30% 60%, 0 38%, 39% 33%);
    animation: mirror-melee .8s steps(10) forwards; /* steps = choppy/drsný pixel pohyb */
  }
  /* special na rovnakom políčku — rovnaký drsný burst, len fialovo */
  .mirror-melee.special{
    background: linear-gradient(180deg, rgba(243,217,255,.95), rgba(206,147,216,.55));
    box-shadow: 0 0 34px 12px rgba(186,104,200,.9);
  }
  @keyframes mirror-melee{
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5)  rotate(-6deg); }
    12%  { opacity: 1; transform: translate(-50%,-50%) scale(1.14) rotate(6deg); }
    26%  { transform: translate(-50%,-50%) scale(.95) rotate(-5deg); }
    40%  { transform: translate(-50%,-50%) scale(1.1) rotate(4deg); filter: brightness(1.6); }
    55%  { transform: translate(-50%,-50%) scale(.98) rotate(-3deg); }
    70%  { transform: translate(-50%,-50%) scale(1.05) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.12) rotate(0deg); }
  }

  /* ===== GOLDEN MIRROR — tie isté animácie, odraz/lúč v zlatej (analogicky ku golden shieldu).
     Odrazová plocha (sklo aj jej žiar) ostáva modrá ako na origináli — zlatý je iba RÁM. ===== */
  .mirror-fx.gold.mirror-pane{ border-color: #ffd54f; }
  .mirror-fx.gold.mirror-ring{
    border-color: #ffe9a8;
    box-shadow: 0 0 22px rgba(255,200,60,.85), inset 0 0 14px rgba(255,200,60,.6);
  }
  .mirror-fx.gold.mirror-shard{
    background: linear-gradient(135deg, #fff6da, #ffd54f 60%, #b8860b);
    box-shadow: 0 0 8px rgba(255,200,60,.9);
  }
  /* po .special, aby zlatý odraz speciálu ostal zlatý (rovnaká špecifickosť → vyhráva poradie) */
  .mirror-beam.gold{
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #ffe082 22%, #ffffff 55%, #ffb300 100%);
    box-shadow: 0 0 20px 6px rgba(255,200,60,.85);
  }
  .mirror-fx.gold.mirror-melee{
    background: linear-gradient(180deg, rgba(255,247,214,.95), rgba(255,213,79,.55));
    box-shadow: 0 0 34px 12px rgba(255,200,60,.9);
  }

  /* veľký nápis REFLECTED! — punchier než bežný float */
  .mirror-reflect-text{
    position: absolute;
    z-index: 7;
    transform: translateX(-50%);
    font-family: "Press Start 2P", Impact, sans-serif;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 0 0 10px #b2ebf2, 2px 2px 0 #00838f, 4px 4px 0 rgba(0,0,0,.6);
    pointer-events: none;
    white-space: nowrap;
    animation: reflect-pop .9s ease-out forwards;
  }
  .mirror-reflect-text.gold{
    text-shadow: 0 0 10px #ffe082, 2px 2px 0 #b8860b, 4px 4px 0 rgba(0,0,0,.6);
  }
  @keyframes reflect-pop{
    0%   { transform: translateX(-50%) scale(.3); opacity: 0; }
    30%  { transform: translateX(-50%) scale(1.25); opacity: 1; }
    45%  { transform: translateX(-50%) scale(1); opacity: 1; }
    80%  { transform: translateX(-50%) translateY(-14px) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-30px) scale(1); opacity: 0; }
  }

  /* otras boardu pri odraze */
  @keyframes fx-shake{
    0%,100% { transform: translate(0,0); }
    15% { transform: translate(-7px, 4px); }
    30% { transform: translate(6px, -5px); }
    45% { transform: translate(-5px, -3px); }
    60% { transform: translate(5px, 4px); }
    75% { transform: translate(-3px, 2px); }
    90% { transform: translate(2px, -2px); }
  }
  .board.fx-shake{ animation: fx-shake .45s ease-in-out; }

  /* štít/mirror sa už nekreslia na bunku — pulzujúci glow je per-postavu (JS actorFilter) */