/* ============================================================
   Scene engine CSS (board screeny, c1s1). Hotspoty a tooltip
   dedia zo style/anatomy.css (.spot, .tip, body.zoomed).
   ============================================================ */

/* ===== Kalendar band (calbar): FIXNY mimo feedu (staticky ako headline, neswipne sa so scenou).
   Zdielany pre c2s2/c3s2. Reveal (odmaskovanie zlava) + gloss loop na dnoch. ===== */
.calbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--foot-stack) + var(--cal-gap, 20px)); top: auto;   /* DOLE nad footerom (poradie: header, scena, kalendar, footer); --cal-gap ladi debug (default 20) */
  width: min(88vw, 470px); max-width: 470px;
  display: flex; z-index: 6;
  opacity: 0; pointer-events: none;
  clip-path: inset(0 100% 0 0);               /* skryty do reveal */
}
.calbar.show { opacity: 1; }
.calbar.reveal { animation: progWipe .55s cubic-bezier(.5,.05,.25,1) both; }
.cb-day { position: relative; flex: 1 1 0; }
.cb-day img { width: 100%; height: auto; display: block; }
.cb-dim { position: absolute; inset: 0; background: rgba(8,6,16,.66); border-radius: 5px; opacity: 1; transition: opacity .5s ease; }
body.zoomed .calbar { opacity: 0; transition: opacity .3s; }
body.unzoom .calbar { animation: progWipe .62s cubic-bezier(.5,.05,.25,1) .06s both; }

/* ===== c4s2 sell: manager board (kabina) sa vyroluje zlava; hraci/DNA/sponzor/SELL priecinok su % boardu ===== */
.sell-board { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); transform-origin: 50% 50%; will-change: transform, opacity; }
.sell-board-img { width: 100%; height: auto; display: block; border-radius: 6px; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5)); }
.sell-card { position: absolute; transform: translate(-50%, -50%); display: block; border-radius: 5px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.sell-up { z-index: 2; }               /* vylepsenie pod hracom (Stieglitz) */
.sell-player { z-index: 3; }
.sell-dna, .sell-sp { z-index: 3; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.sell-meeple { position: absolute; transform: translate(-50%, -50%); z-index: 4; display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.sell-tab { position: absolute; transform: translate(-50%, -50%); z-index: 4; margin: 0; white-space: nowrap; }
.sell-dbgdot { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 3px solid #ff2d55; box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1.5px #fff; transform: translate(-50%, -50%); z-index: 20; cursor: grab; touch-action: none; }   /* duty prstenec -> vidno figurku v strede */
.sell-dbglbl { position: absolute; left: 130%; top: 50%; transform: translateY(-50%); font: bold 11px monospace; color: #fff; background: rgba(0, 0, 0, .7); padding: 1px 5px; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.sell-dbglbl.left { left: auto; right: 130%; }
/* sell zoom = 1:1 ako c3s3 projekt (body-level .egz overlay, znovupouzite egz-* triedy). sz-* len drobne z-index/pozicia. */
.sz-upc { z-index: 2; }                  /* vylepsenie tesne pod Zoufalom (egz-card z2, appended skor) */
.sz-gloss { z-index: 9; }
.sz-counter { z-index: 950; display: flex; align-items: center; justify-content: center; gap: 4px; }   /* label + hodnota v jednom riadku, mensia medzera, cely element vycentrovany */
.oct-counter.sz-counter .lbl { margin-bottom: 0; font-size: clamp(1.13rem, 5.11vw, 1.41rem); line-height: 1; letter-spacing: .05em; white-space: nowrap; }   /* presne rovnaka velkost ako TOTAL CLUB PRESTIGE: clamp(.82,3.7,1.02) x 1.38 (projClubScale); .oct-counter.sz-counter prebije neskorsie .oct-counter .lbl 15px */
.sz-cube { z-index: 4; }
.sz-tip { position: fixed; z-index: 941; width: min(86vw, 340px); }
.sz-delta { position: absolute; z-index: 951; transform: translate(-50%, -50%); font-family: 'Apotek', sans-serif; font-weight: bold; color: #fff; font-size: clamp(1.5rem, 8vw, 2.6rem); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); pointer-events: none; }
.sell-board .spot { z-index: 5; }
.sell-board .tip { z-index: 6; }

/* ===== c4s3 TURN-ORDER ZOOM (standings): central board fade out + REALNE kocky odletia -> skore zetony -> manager board zdola s tmavym overlayom, vynikaju hraci + vylepsenia ===== */
.stz { position: fixed; inset: 0; z-index: 940; }
.stz-dim { position: fixed; inset: 0; z-index: 0; background: rgba(4, 3, 10, .72); opacity: 0; transition: opacity .45s ease; }
.stz-toks { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.stz-toks.in { opacity: 1; }
.stz-toks .stz-tok { position: absolute; transform: translate(-50%, -50%); display: block; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); }
.stz .piece { z-index: 4; }                                    /* reparentnute kocky nad dim */
.stz-mb { position: fixed; z-index: 3; transition: transform .6s cubic-bezier(.3, .8, .3, 1); filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6)); }
.stz-mb .stz-board { display: block; width: 100%; z-index: 0; border-radius: 10px; }
.stz-mb img:not(.stz-board) { position: absolute; transform: translate(-50%, -50%); }
.stz-dna, .stz-spon, .stz-inj { z-index: 1; }                 /* pod maskou -> stmavene */
.stz-mask { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stz-up { z-index: 3; border-radius: 8px; }                    /* vylepsenie: vrstva POD hracom, nad maskou */
.stz-player { z-index: 4; border-radius: 8px; }               /* hrac: nad upgradom aj maskou -> vynika */
.stz-inj { border-radius: 8px; }

/* ===== c3s3 event grid: 6 kariet (stack -> 3x2 grid), round corners + dim veil s postupnym rozsvietenim ===== */
.eg-card { position: absolute; left: 0; top: 0; transform-origin: center; opacity: 0; z-index: 2; will-change: transform, opacity; cursor: pointer; }
.eg-card img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .42); }
.eg-veil { position: absolute; inset: 0; border-radius: 14px; background: rgba(8, 6, 16, .5); opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
/* wiggle nahodnych kariet (evokuje klikatelnost) - centrovany pivot + naklon do oboch stran s dotlmenim (ako waldo avatar).
   animuje sa IMG (nie wrapper) -> rotate okolo stredu karty, nezasahuje do grid transformu (translate+rotate na .eg-card). */
@keyframes egWiggle {
  0%   { transform: rotate(0); }
  19%  { transform: rotate(-9deg); }
  41%  { transform: rotate(7deg); }
  59%  { transform: rotate(-4deg); }
  78%  { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
.eg-card img { transform-origin: 50% 50%; }
.eg-card.wig img { animation: egWiggle .8s ease-in-out; }
/* pocas wigglu: karta jemne stmavne (veil) + lupa (naznak klikatelnosti); animacie dobehnu do opacity 0 -> po skonceni neostanu, aj ked .wig trieda pretrva */
.eg-mag { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); }
.eg-mag svg { width: 100%; height: 100%; display: block; }
.eg-card.wig .eg-veil { animation: egWigVeil .8s ease-in-out; }
.eg-card.wig .eg-mag { animation: egWigMag .8s ease-in-out; }
/* veil aj lupa rotuju rovnako ako img (egWiggle uhly) -> stmavenie + ikona sa kolisu SPOLU s kartou */
@keyframes egWigVeil {
  0%   { opacity: 0; transform: rotate(0); }
  19%  { opacity: 1; transform: rotate(-9deg); }
  41%  { opacity: 1; transform: rotate(7deg); }
  59%  { opacity: 1; transform: rotate(-4deg); }
  78%  { opacity: 1; transform: rotate(2deg); }
  100% { opacity: 0; transform: rotate(0); }
}
@keyframes egWigMag {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.7); }
  19%  { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1.05); }
  41%  { opacity: 1; transform: translate(-50%, -50%) rotate(7deg) scale(1); }
  59%  { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) rotate(2deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.9); }
}

/* ===== c3s3 zoom (zlta karta): dim + manager board zhora + zasunutie karty pod hraca -> tooltip ===== */
.egz { position: fixed; inset: 0; z-index: 900; }
.egz-dim { position: absolute; inset: 0; background: rgba(4, 3, 10, .64); opacity: 0; transition: opacity .5s ease; }
.egz-board { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; will-change: transform; filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .55)); }
.egz-card { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .6); will-change: transform; }
.egz-redcard { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; border-radius: 6px; box-shadow: 0 12px 28px rgba(0, 0, 0, .55); will-change: transform; }
.egz-sponsor { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; border-radius: 10px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); will-change: transform; }
.egz-die { position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 50% 50%; will-change: transform, filter; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
/* TOTAL CLUB PRESTIGE label + zeton (zeleny projekt) - styl ako aukcny OFFERED PRICE */
.egz-clubtot { position: fixed; left: 50%; top: 7%; transform: translateX(-50%); z-index: 950; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.egz-clubtot.show { opacity: 1; }
.egz-clubtot .ct-lbl { color: #fff; font-family: 'Apotek', sans-serif; font-weight: 700; font-size: clamp(.82rem, 3.7vw, 1.02rem); letter-spacing: .05em; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.egz-clubtot .ct-tok { position: relative; width: clamp(40px, 11vw, 52px); aspect-ratio: 1; font-family: 'Apotek', sans-serif; font-weight: bold; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.egz-clubtot .ct-tok svg { width: 100%; height: 100%; display: block; }
.egz-clubtot .ct-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 55%; }
.egz-clubtot .ct-tok circle { transition: fill .45s ease; }   /* sedy -> zlaty prechod pri prirataní */
.egz-player { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; border-radius: 10px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); will-change: transform; }
.egz-dna { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; border-radius: 10px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); will-change: transform; }
.egz-delta { position: absolute; z-index: 6; font-family: 'Apotek', sans-serif; font-weight: bold; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.egz-delta svg { width: 100%; height: 100%; display: block; }
/* prestiz counter (prekryje vytlacenu 7 na hracovi, naratava 7 -> 10) */
.egz-tok { position: absolute; left: 0; top: 0; z-index: 5; transform-origin: 50% 50%; font-family: 'Apotek', sans-serif; font-weight: bold; will-change: transform; }
.egz-tok svg { width: 100%; height: 100%; display: block; }
/* info label ako Waldo banner (sivy, avatar), vyroluje sa zospodu ako v celej appke - bez duhoveho okraja */
.egz-info { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%); z-index: 940; width: min(94vw, 460px); display: flex; align-items: center; gap: 14px; background: #4d4d4d; border-radius: 18px 18px 0 0; padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 3.2vh) 16px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.22, .9, .3, 1); pointer-events: none; }
.egz-info.show { opacity: 1; transform: translate(-50%, 0); }
.egz-info .wb-av { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; align-self: flex-start; margin-top: 2px; }
.egz-info .wb-txt { font-family: 'NotoCond', sans-serif; font-weight: bold; font-size: clamp(1.02rem, 4.4vw, 1.18rem); line-height: 1.2; color: #fff; text-align: left; min-height: 2.4em; }   /* rezerva na 2 riadky -> text tecie od hora, horna hrana sa pri pisani neposuva */
.egz-info .wb-txt.typing::after { content: '▌'; display: inline-block; width: 0; overflow: visible; color: #fff; animation: wtBlink .8s step-end infinite; }   /* pisaci kurzor ako v appke */
/* progress pasik dole pocas zoom sekvencie (rovnaky styl ako seq-bar pri animacnych sekvenciach) */
.egz-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; z-index: 960; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.egz-bar.show { opacity: 1; }
.egz-bar-fill { display: block; height: 100%; width: 0; background: rgba(255, 210, 0, .92); }
/* pause/play button nad progress liniou (jemny, sedy, 50% opacity) - da sa stopnut sekvencia na prezretie */
/* skupina ovladacov (pause + fast-forward) - centrovana ako celok nad progress liniou */
.egz-ctrls { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateX(-50%); z-index: 962; display: flex; gap: 16px; align-items: center; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.egz-ctrls.show { opacity: .5; pointer-events: auto; }
.egz-cbtn { width: 34px; height: 34px; border-radius: 50%; background: rgba(190, 190, 200, .3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.egz-cbtn:active { transform: scale(.9); }
.egz-cbtn svg { width: 44%; height: 44%; fill: #fff; }   /* proporcionalne k velkosti tlacidla */
.egz-pause .ic-play { display: none; }
.egz-pause.paused .ic-pause { display: none; }
.egz-pause.paused .ic-play { display: block; }
.egz-tip { position: fixed; z-index: 950; max-width: min(78vw, 360px); background: #16141f; color: #f0eef7; border-radius: 12px; padding: 13px 15px; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.egz-tip.show { opacity: 1; transform: translateY(0); }
.egz-tip h4 { margin: 0 0 5px; font-size: clamp(.92rem, 3.9vw, 1.08rem); letter-spacing: .02em; }
.egz-tip p { margin: 0; font-size: clamp(.78rem, 3.3vw, .95rem); line-height: 1.42; color: rgba(236, 232, 245, .86); }

/* wrapper scena+decky: vyplni content-box .stage a centruje scenu rovnako ako predtym .stage;
   transformuje sa pri zoome ako JEDEN celok (decky su jeho deti -> zoomuju rigidne so scenou) */
.scene-inner {
  flex: 1; align-self: stretch; width: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.scene {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2vh;
  overflow: visible;
  margin-top: -3vh;   /* cela scena vyssie -> miesto pod boardom pre kocky/hviezdu.
                         margin (nie transform) zamerne: .scene netvori stacking kontext,
                         takze z-index hotspotov (6) prebije kocky (.piece z-index 1). */
}

/* central board: landscape, dole pod kartami, vlastny tien */
.scene-board {
  position: relative;
  width: min(94vw, 560px);
}
.scene-board img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28)) drop-shadow(0 14px 22px rgba(0, 0, 0, .32));
}

/* rad vylozenych kariet NAD boardom */
.scene-row {
  display: flex;
  gap: 4vw;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: opacity .35s ease;   /* fade pri board zoome (bz) */
}
.scene-thumb { position: relative; flex: 0 0 auto; }
.scene-thumb img { display: block; }

/* decky: predrenderovany stack (kopka kariet na sirku), velky tien = 3D.
   asset uz je landscape, CSS pridava len jemny sklon.
   sirka = mierka odhalenej karty na boarde: landscape karta = 19% sirky boardu
   (+ male navysenie kvoli stack offsetu). board = min(94vw,560px). */
.scene-thumb.deck { width: min(25.6vw, 153px); }   /* +10% */
.scene-thumb.deck img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)) drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
}
/* sklon deckov: hraci +2, eventy -2 */
.scene-thumb.deck:nth-child(1) img { transform: rotate(-1deg); }
.scene-thumb.deck:nth-child(2) img { transform: rotate(-2deg); }

/* trofej: portretova karta natocena ~20 doprava, vlastny tien.
   sirka = mierka odhalenej karty na boarde: portretova karta = 13.6% sirky boardu. */
.scene-thumb.trophy {
  --w: min(17.8vw, 106px);   /* +10% */
  width: var(--w);
  height: calc(var(--w) * 1.394);
  margin-left: 6vw;   /* medzera medzi event deckom a trofejou */
}
.scene-thumb.trophy img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  transform: rotate(2deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)) drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
}

/* c1s2 manager karty: 3 portretove karty v rade nad boardom (dealing animacia v scene.js) */
.scene-thumb.mcard {
  --w: min(17.8vw, 106px);   /* rovnaka velkost ako training trophy */
  width: var(--w);
  height: calc(var(--w) * 1.394);   /* 520/373 */
  margin: 0 1.6vw;   /* vacsi rozostup medzi kartami (navyse k row gap) */
}
.scene-thumb.mcard img {
  width: 100%; height: auto; border-radius: 6px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)) drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
}
/* label nad mcard (TRANSFER TARGETS / CLUB DNA / SPONSOR) - len 1. segment */
.scene-thumb.mcard .mcard-label {
  margin-bottom: 2.6vh; z-index: 7;
  white-space: nowrap; text-align: center; line-height: 1.05;
}
.scene-thumb.mcard .spot { z-index: 6; }   /* hotspot NAD kartou (mflip wrap sa do _el appenduje neskor) */
/* 3D flip karta (DNA, Sponsor): rub + lic na dvoch stranach, otacane cez rotateY */
.scene-thumb.mcard .mflip { position: absolute; inset: 0; }
.mflip-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.mflip-inner .mface {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  filter: none;   /* bez tiena: drop-shadow by mohol splostit 3D backface */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mflip-inner .mfront { transform: rotateY(180deg); }   /* lic je na druhej strane */

/* hotspoty: pulz az PO vstupnej animacii (scene.js prida .spots-in).
   Zakladny .spot (vzhlad, spotIn/ripple keyframes) je v anatomy.css. */
[data-scene].spots-in .spot {
  animation: spotIn .7s cubic-bezier(.34, 1.35, .5, 1) both;
  animation-delay: var(--d, 0s);
}
[data-scene].spots-in .spot::before {
  animation: ripple 1.9s ease-out infinite;
  animation-delay: calc(var(--d, 0s) + .7s);
}
[data-scene].spots-in .spot::after {   /* druhy prstenec (interleave), posun o pol cyklu */
  animation: rippleShadow 1.9s ease-out infinite;
  animation-delay: calc(var(--d, 0s) + .7s + .95s);
}
/* per-spot reveal (c1s2: targets+dna v seg2, zvysok v seg3) */
[data-scene] .spot.in { animation: spotIn .7s cubic-bezier(.34, 1.35, .5, 1) both; }
[data-scene] .spot.in::before { animation: ripple 1.9s ease-out infinite; animation-delay: .7s; }
[data-scene] .spot.in::after { animation: rippleShadow 1.9s ease-out infinite; animation-delay: calc(.7s + .95s); }

/* ===== Central board: slide-in (central-front) + otvorenie ako kniha (central-board) ===== */
/* debug: ciel pozicie slotov/kalendara (?debug) - tahatelne + popis % */
.dbg-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: magenta;
  border: 1px solid #fff;
  border-radius: 50%;
  z-index: 50;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
/* hotspoty musia byt NAD doskou (bb-wrap ma z-index:1, prida sa az po nich) */
.scene-board .spot { z-index: 6; }
.scene-thumb.trophy .spot { z-index: 6; }

/* board zoom (turnorder): zoomuje sa CELA scena (board+decky+trophy); fadnu len labely + spoty
   (scene-row sa NEskryva, aby trofej zoomovala spolu so scenou) */
.scene.bz .deck-label,
.scene.bz .board-label,
.scene.bz .trophy-label,
.scene.bz .spot { opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; }
.dbg-dot.dbg-intro { background: cyan; }   /* intro stred/vyska radu kociek */
.dbg-lbl {
  position: absolute;
  left: 13px;
  top: -5px;
  font: 10px/1 monospace;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/* kocky + hviezda (turn-order markery a star) */
.piece {
  position: absolute;
  z-index: 1;
  height: auto;
  display: block;
  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
/* plynule prebliknutie kocky pri zoome (brightness fade in-out, jemny scale) - kocky su pripnute s translate(-50%,-50%) */
@keyframes cubeGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)) brightness(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)) brightness(1.5); }
}

.bb-shadow {               /* tien pod celou doskou (za bb-wrap) */
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25), 0 14px 26px rgba(0, 0, 0, .3);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.bb-wrap {
  position: absolute;
  inset: 0;                /* vyplni boardWrap (.scene-board) presne */
  perspective: 1400px;
  z-index: 1;
  will-change: transform, opacity;
  pointer-events: none;
}
.bb-board {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* staticka prava polovica central-board (zatial skryta pod obalom, odhali sa) */
.bb-staticR {
  position: absolute;
  right: 0; top: 0;
  width: 50%; height: 100%;
  background-size: 200% 100%;          /* cela doska = 2x sirka panelu */
  background-position: right center;   /* prava polovica central-board */
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
/* obal vpravo, otaca sa okolo lavej hrany (stredovy chrbat) dolava */
.bb-cover-panel {
  position: absolute;
  left: 50%; top: 0;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 2;                          /* nad statickou polovicou (kym je zatvoreny) */
}
.bb-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background-repeat: no-repeat;
}
.bb-front {                            /* obal = central-front */
  background-size: 100% 100%;
  background-position: center;
}
.bb-back {                             /* zadna strana = lava polovica central-board (dvojita rotacia -> nezrkadli) */
  background-size: 200% 100%;
  background-position: left center;
  transform: rotateY(180deg);
}

/* maly label nad deckom (objavi sa po dosadnuti) */
.deck-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2.4vh;                          /* posun nadol o 1vh */
  font-family: 'Apotek', sans-serif;
  font-size: clamp(.72rem, 3.12vw, .936rem);     /* +20% */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);                  /* skryty (zaroleny dolava) */
  transition: clip-path .42s cubic-bezier(.5, .05, .25, 1), opacity .35s ease;
  pointer-events: none;
}
.deck-label.show { clip-path: inset(0 0 0 0); }  /* reveal: maska zlava doprava (ako headline) */
.board-label {                                   /* label POD doskou (nie nad) */
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 2.4vh;
}
/* label pod meeple (c2s4 seg4: TRAINING / TRAINING X2) - styl ako board label */
.meeple-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: 'Apotek', sans-serif;
  font-size: clamp(.72rem, 3.12vw, .936rem);     /* rovnaka velkost ako board/deck label */
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); white-space: nowrap;
  opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 6;
}
.meeple-label.show { opacity: 1; }
.trophy-label {                                  /* dvojriadkovy label */
  white-space: normal;
  text-align: center;
  line-height: 1.05;
  margin-left: -1vw;                             /* posun o 1vw dolava */
}

/* ===== Vstupna animacia: deck rig (faza 1) =====
   rig je v STAGE (absolute), takze scrolluje so screenom. Outer rig drzi
   poziciu/scale/tien (NErotovany -> tien je screen-aligned), shuf-inner drzi
   rotaciu (portret -> landscape). */
.shuf-rig {
  position: absolute;
  z-index: 1;             /* nad scenou, ale pod lightboxom (z-index 8) */
  transform-origin: center center;
  will-change: transform, filter;
  pointer-events: none;
}
.shuf-inner {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform;
}
.shuf-rig .shuf-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.shuf-rig .shuf-card img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Lightbox (trofej): scena stmavne ale OSTANE jasne viditelna (nie plny backdrop) ===== */
.lb-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  padding: 7vw;
  opacity: 0;
  transition: opacity .4s ease;   /* plynule stmavenie pozadia (ako pri reveale menu) */
  z-index: 8;
}
.lb-back.show { opacity: 1; }
.lb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
  max-width: 100%;
}
.lb-crop {
  background-repeat: no-repeat;
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
  animation: lbIn .4s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes lbIn {
  0% { transform: scale(.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* tooltip v lightboxe: relative (kotva pre sipku); intro animacia cez .show ako pri karte hraca
   (zaklad .tip = opacity 0 + translateY(8px) scale(.96), prechod .6s/.45s) */
.lb .tip.lb-tip {
  position: relative;
  pointer-events: auto;
  width: min(86vw, 360px);
}
.lb-tip .arrow { display: block; left: 50%; transform: translateX(-50%); }   /* sipka v strede hore, mieri na vyrez */
/* trofej zoom: labely sceny + spoty fadnu (board ostane, len stmavne cez .tz-dim) */
.scene.tz .deck-label,
.scene.tz .board-label,
.scene.tz .trophy-label,
.scene.tz .spot { opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; }   /* spoty aj NEklikatelne (inak skryty hotspot blokuje tap-to-close) */
/* zjednodusene tiene pocas zoomu (jeden lahsi shadow) -> lacnejsi raster pri skalovani */
.scene.tz .bb-shadow, .scene.bz .bb-shadow { box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.scene.tz .scene-thumb.trophy img, .scene.bz .scene-thumb.trophy img { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .32)); }
/* dim overlay: vlozeny do #bg (fixna celoobrazovkova vrstva) -> stmavi cele pozadie nad
   scrim (z-index 3); cely feed so zoomnutou scenou + deckami je nad #bg, takze ostane svetly */
.tz-dim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .5s ease;
}
.tz-dim.on { opacity: 1; }
/* jemnejsi dim priamo nad central boardom (zoomuje sa s nim) ~50% sily pozadia; karta ostane svetla */
.tz-board-dim {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 6px;
  background: rgba(0, 0, 0, .36); opacity: 0; transition: opacity .5s ease;
}
.tz-board-dim.on { opacity: 1; }

/* ===== Calendar zoom: horizontalne scrollovatelne dni so snapom, hviezda = fixna ryska v strede ===== */
.cal-zoom {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(0, 0, 0, .8);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3.4vh;
  opacity: 0; transition: opacity .4s ease;
}
.cal-zoom.show { opacity: 1; }
.cal-zoom .tip.cal-tip { position: relative; width: min(86vw, 360px); pointer-events: auto; }
.cal-tip .arrow {                                   /* sipka dole -> mieri na kalendar pod tooltipom */
  top: auto; bottom: -9px; left: 50%; transform: translateX(-50%);
  border-bottom: none; border-top: 10px solid #fff;
}
/* tooltip + strip vyssie (desc ostava absolutne dole). width:100% NUTNE -> inak sa stage/track nezroztiahne na celu sirku a scroll/centrovanie sa rozbije */
.cal-main { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3vh; transform: translateY(-5%); }
.cal-stage { position: relative; width: 100%; }   /* vstup riesi slide-in tracku z prava (JS) */
.cal-track {
  display: flex; gap: 0;                             /* bez medzier medzi dnami */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 1.2vh 0;
  will-change: transform;
}
.cal-track::-webkit-scrollbar { display: none; }
/* cierny tien na hranach -> "obsah pokracuje do tmy"; fade-in (nie narazove) po dosadnuti */
.cal-edge {
  position: absolute; top: 0; bottom: 0; width: 15%;
  pointer-events: none; z-index: 3; opacity: 0; transition: opacity .55s ease;
}
.cal-edge.l { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .92), transparent); }
.cal-edge.r { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .92), transparent); }
.cal-stage.edges .cal-edge { opacity: 1; }
.cal-cell {
  flex: 0 0 auto;
  scroll-snap-align: center;
  position: relative;
}
.cal-cell img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
/* gloss sweep pri slotnuti (rovnaky lesk ako cez menu pri prepnuti na pro mode) */
.cal-gloss { position: absolute; inset: 0; overflow: hidden; border-radius: 7px; pointer-events: none; z-index: 2; }
.cal-gloss::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); opacity: 0;
}
.cal-gloss.go::before { animation: calGloss .7s ease forwards; }
@keyframes calGloss { 0% { left: -60%; opacity: 1; } 80% { opacity: 1; } 100% { left: 150%; opacity: 0; } }
/* swipe cue: 5 bielych sipok (SVG) vlavo od SAT, vertikalne v strede stripu; vlnovo pulzuju, fadeout pri scrolle */
.cal-cue-row {
  position: absolute; top: 50%; transform: translate(-50%, -50%);   /* left nastavuje JS (stred medzi okrajom a SAT) */
  display: flex; gap: 3.5px; align-items: center; pointer-events: none;
  opacity: 0; transition: opacity .45s ease;        /* skryte do reveal; fadne pri scrolle */
}
.cal-cue-row.vis { opacity: 1; pointer-events: auto; cursor: pointer; }   /* klik -> posun na SUN */
.cal-cue-row img {
  height: 1.03rem; width: auto; display: block;        /* este o 30% mensie */
  opacity: .2; animation: chevWave 2.6s ease-in-out infinite;   /* pomalsia vlna */
}
@keyframes chevWave { 0%, 100% { opacity: .2; } 50% { opacity: .5; } }
.cal-desc {                                          /* Waldo banner (sivy bottom-sheet, avatar) - konzistentne s egz-info hint bannerom */
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%);
  z-index: 40; width: min(94vw, 460px);
  display: flex; align-items: center; gap: 14px;
  background: #4d4d4d; border-radius: 18px 18px 0 0;
  padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 3.2vh) 16px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.22, .9, .3, 1);
}
.cal-desc.in { opacity: 1; transform: translate(-50%, 0); }
.cal-desc .wb-av { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; align-self: flex-start; margin-top: 2px; }
.cal-desc .wb-txt { font-family: 'NotoCond', sans-serif; font-weight: bold; font-size: clamp(1.02rem, 4.4vw, 1.18rem); line-height: 1.2; color: #fff; text-align: left; }
/* tooltip text (nadpis+popis): rovnaka maskova technika a rychlost ako headline screenov
   (.42s cubic-bezier(.5,.05,.25,1), dve fazy: roll out zprava dolava -> roll in zlava doprava) */
.cal-tip h3, .cal-tip p {
  -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
  transition: -webkit-clip-path .42s cubic-bezier(.5, .05, .25, 1), clip-path .42s cubic-bezier(.5, .05, .25, 1);
}
.cal-tip.rolled h3, .cal-tip.rolled p {
  -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);   /* skryty (zaroleny dolava) */
}

/* tooltip VPRAVO od prvku -> sipka vlavo (mieri na kartu) */
.tip.side-l .arrow {
  top: 50%; left: -9px; bottom: auto; transform: translateY(-50%);
  border: 10px solid transparent; border-left: none; border-right: 10px solid #fff;
}
/* ===== c1s2 Sponsor zoom: budget kocky na counteri + STARTING BUDGET box ===== */
.sp-cube {
  position: absolute; z-index: 7; height: auto;
  transform: translate(-50%, -50%);
  transition: top .5s cubic-bezier(.4, .05, .3, 1), left .5s cubic-bezier(.4, .05, .3, 1), opacity .3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.sp-budget {                                       /* STARTING BUDGET: biele cislo na Asset 14.svg (zeleny box) */
  position: absolute; z-index: 8; transform: translate(-50%, -50%);
  font-family: 'Apotek', sans-serif; color: #fff; white-space: nowrap; line-height: 1;
  width: 3em; box-sizing: content-box; text-align: center;   /* fixna sirka: rovnaka 800-1200 */
  padding: .32em .25em; background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  will-change: transform; backface-visibility: hidden;        /* drz na vlastnej GPU vrstve -> ziadny 1px preskok po pope */
}
.deal-spawn-dbg {                                  /* c2s2 debug: obrys kde sa karta objavi (tahatelny) */
  position: absolute; z-index: 30; box-sizing: border-box;
  outline: 2px dashed rgba(255, 0, 80, .95); border-radius: 6px;
  background: rgba(255, 0, 80, .08); cursor: move; touch-action: none;
}
/* ===== c2s4 Bidding: 4 meeple (bid figurky) + value badge ===== */
.bid-meeple {
  position: absolute; z-index: 6; display: block; height: auto; pointer-events: none;
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); border-radius: 0 !important;
  transition: left .55s cubic-bezier(.4, .05, .25, 1), top .55s cubic-bezier(.4, .05, .25, 1), transform .4s cubic-bezier(.3, 1.4, .5, 1), width .3s ease;
  will-change: left, top, transform, width;
}
.bid-val {
  position: absolute; z-index: 7; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Apotek', sans-serif; font-weight: 700; color: #35332d;
  background: #ffde17; border: 2px solid #d7850d; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .25s ease;
}
.bid-val.show { opacity: 1; }
/* octavio zoom: bright value badge (+N) nad boardom, meeple, OFFERED PRICE pocitadlo */
.auc-badge { position: absolute; z-index: 7; transform: translate(-50%, -50%); height: auto; pointer-events: none; border-radius: 0 !important; filter: none; }
.oct-meeple {   /* wrapper: pohyb cez transform:translate (GPU = plynule, ziadny left/top jank) */
  position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; will-change: transform;
  transition: transform .55s cubic-bezier(.4, .05, .25, 1), opacity .35s ease;
}
.oct-meeple-img { display: block; width: 100%; height: auto; border-radius: 0 !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.oct-counter { position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.oct-counter .lbl { color: #fff; font-family: 'Apotek', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .06em; margin-bottom: 7px; opacity: .92; }
.oct-counter .val {
  display: inline-block; min-width: 3.2em; box-sizing: content-box;
  font-family: 'Apotek', sans-serif; font-weight: 700; color: #fff; font-size: 30px; line-height: 1;
  padding: .32em .4em; background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* gloss sweep cez element (karta / value badge) ked nan meeple dosadne */
.oct-gloss { position: absolute; z-index: 9; transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; border-radius: 6px; }
.oct-gloss::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); opacity: 0;
}
.oct-gloss.go::before { animation: calGloss .7s ease forwards; }
.oct-gloss-card { inset: 0; transform: none; z-index: 9; border-radius: 8%; }
/* ===== Training zoom: 4 ikonky (2x2), aktivna svetla+zvacsena, neaktivne tmavsi overlay (0px rohy) ===== */
.trn-ico {
  position: absolute; z-index: 7; transform: translate(-50%, -50%) scale(1);
  aspect-ratio: 1 / 1;   /* rovnaky stvorcovy box pre vsetky -> rovnako velke; sirku riadi TRN.iw (podla training1) */
  cursor: pointer; pointer-events: auto; will-change: transform;   /* will-change: bez 1px skoku pri dosadnuti scale */
  transition: transform .3s cubic-bezier(.34, 1.4, .6, 1);
  -webkit-tap-highlight-color: transparent;
}
.trn-ico.active { transform: translate(-50%, -50%) scale(1.14); z-index: 8; }   /* aktivna: zvacsena */
.trn-ico-img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; border-radius: 0 !important; }   /* tile bottom-align (2x banner precnie hore) */
.trn-ico-veil {   /* 20% tmavy overlay cez neaktivne ikonky; PULZUJE (opacity value<->0) -> evokuje klikatelnost; zmizne ked aktivna */
  position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .2); opacity: 1;
  transition: opacity .3s ease; pointer-events: none;
  animation: trnVeilPulse 2.6s ease-in-out infinite;
}
.trn-ico.active .trn-ico-veil { opacity: 0; animation: none; }   /* aktivna: bez overlay a bez pulzu */
@keyframes trnVeilPulse { 0%, 100% { opacity: 1; } 28% { opacity: 0; } 56% { opacity: 1; } }   /* overlay 20% -> 0 (plna farba) -> 20% -> pauza; pomalsie, per-ikonka stagger */
/* training zoom: tmavsie stmavenie sceny (+50% oproti octavio) */
.tz-dim.trn { background: rgba(0, 0, 0, .6); }
.tz-board-dim.trn { background: rgba(0, 0, 0, .54); }
/* text pod boardom (side activity) */
.trn-sub {
  position: fixed; left: 50%; transform: translateX(-50%); max-width: 86vw; text-align: center;
  font-family: 'Apotek', sans-serif; text-transform: uppercase; letter-spacing: .3px; line-height: 1.15;
  font-size: clamp(.82rem, 4.1vw, 1.02rem); color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9);   /* bez pozadia, len tien pre citatelnost */
  opacity: 0; transition: opacity .45s ease; z-index: 13; pointer-events: none;
}
.trn-sub.show { opacity: 1; }
/* training tooltip: obsah sa meni mask rollom (ako headline: zaroluj dolava -> swap -> vyroluj) */
.trn-tip { z-index: 14; }
.trn-tip .trn-tip-in { clip-path: inset(0 0 0 0); transition: clip-path .4s cubic-bezier(.5, .05, .25, 1); }
.trn-tip .trn-tip-in.rolled { clip-path: inset(0 100% 0 0); }
/* ===== Side zoom (overbid): octavio lock + tooltip. .side-lock / .side-lock-ico su cele inline v JS (fixed, inline SVG) ===== */
.side-tip { z-index: 14; }
@keyframes bidWiggle {   /* pomaly grow -> wiggle -> pomaly shrink -> pauza; velkost inak rovnaka ako ostatni */
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  22%  { transform: translate(-50%, -50%) scale(var(--wig-scale, 1.5)) rotate(-6deg); }   /* pomaly narast (rovnaka rychlost) */
  27%  { transform: translate(-50%, -50%) scale(var(--wig-scale, 1.5)) rotate(6deg); }
  31%  { transform: translate(-50%, -50%) scale(var(--wig-scale, 1.5)) rotate(-6deg); }
  35%  { transform: translate(-50%, -50%) scale(var(--wig-scale, 1.5)) rotate(6deg); }   /* wiggle rychlejsie */
  57%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }   /* pomaly pokles (rovnaka rychlost) */
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }   /* pauza */
}
.bid-meeple.wig { animation: bidWiggle 2.4s ease-in-out infinite; }
/* ===== c1s2 Training zoom: level stlpec poskladany z dlazdic, kazda sa zosvetli pri dosadnuti kocky ===== */
.tr-levels { position: absolute; z-index: 6; transform: translate(-50%, -50%); pointer-events: none; }
.tr-lvl {   /* dlazdica levelu: SVG ako background (iOS rasterizuje vo velkosti boxu = ostre, na rozdiel od <img>) */
  position: absolute; left: 0; display: block; border-radius: 0 !important; filter: none;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
}
.tr-gloss { position: absolute; left: 0; overflow: hidden; pointer-events: none; }   /* gloss sweep cez dlazdicu (ako kalendar) */
.tr-gloss::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); opacity: 0;
}
.tr-gloss.go::before { animation: calGloss .7s ease forwards; }
.tr-cube {                                         /* level kocka = dieta stlpca, SVG ako background (iOS ostre) */
  position: absolute; z-index: 7; height: auto; aspect-ratio: 14.15 / 16.45; will-change: left, top; filter: none;
  border-radius: 0 !important;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  transition: left .5s cubic-bezier(.4, .05, .3, 1), top .5s cubic-bezier(.4, .05, .3, 1);
}
/* ===== c1s2 Training zoom (cube): counter vpravo (sp-counter) + 2 karty vlavo + tooltip hore ===== */
.tr-card {                                         /* DIV obal karty (drzi poziciu); obrazok + ikonky su deti */
  position: fixed; z-index: 12; width: auto; transform: translate(-50%, -50%); pointer-events: none;
  opacity: 0; transition: transform .45s cubic-bezier(.3, .8, .3, 1);   /* prilet/odlet riesi WAAPI; transition len pre debug rotaciu */
  will-change: transform, opacity;               /* vlastna GPU vrstva -> plynuly prilet */
}
.tr-card.in { opacity: 1; }
.tr-card-img {                                     /* samotny obrazok karty: vyska riadi JS cez .tr-card height */
  display: block; width: auto; height: 100%; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.tr-ico {                                          /* lvl4/lvl8 number ikonka = dieta karty; SVG ako background (iOS ostre) */
  position: absolute; z-index: 13; transform: translate(-50%, -50%); pointer-events: none;
  will-change: transform; display: block;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.tr-ico.in { opacity: 1; }
.sp-counter {                                      /* zeleny stlpec counter.svg nad board-dim (bright), pod kockami */
  position: absolute; z-index: 6; height: auto; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 0 !important; filter: none;       /* .scene-board img by inak dalo zaoblenie + shadow */
}
.sp-gloss {                                        /* gloss sweep cez cislo na ciselniku ked dosadne kocka */
  position: absolute; z-index: 6; transform: translate(-50%, -50%);
  pointer-events: none; overflow: hidden; border-radius: 14%;
}
.sp-gloss > i {                                    /* sikmy bily pruh (sweep ako kalendar) */
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 50%; display: block;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); opacity: 0;
}
.sp-gloss.dbg { outline: 1px solid rgba(255, 0, 80, .9); }       /* debug: viditelny obrys obdlznika */
.sp-gloss.sweep > i { animation: calGloss .7s ease forwards; }   /* prechodny gloss sweep */
/* ===== c1s2 Transfer Targets zoom ===== */
.tgt-catch { position: fixed; inset: 0; z-index: 11; }   /* tap kdekolvek -> zatvor (nad scenou, pod hracom/sliderom) */
/* hrac vykukne z praveho dolneho rohu (-15deg) */
.tgt-peek {
  position: fixed; right: -7%; bottom: -9%; z-index: 12;
  width: min(52vw, 290px);
  opacity: 0; transform: rotate(-15deg) translate(42%, 42%);
  transition: transform .6s cubic-bezier(.3, .8, .3, 1) .12s, opacity .4s ease .12s;
  pointer-events: none;
}
.tgt-peek.in { opacity: 1; transform: rotate(-15deg) translate(0, 0); }
/* DNA zoom: karta hraca posadena pod DNA (rovnaka velkost), vysunie sa zdola */
.dna-player {
  position: fixed; z-index: 12;
  opacity: 0; transform: translateY(36px);
  transition: transform .6s cubic-bezier(.3, .8, .3, 1) .12s, opacity .4s ease .12s;
}
.dna-player.in { opacity: 1; transform: translateY(0); }
.dna-player-img { width: 100%; height: auto; display: block; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
/* label nad DNA ikonkou hraca (sucast ikonky -> pulzuje ako skupina); biela platnicka ako dnaLabel v c2s2 */
.dna-namelabel {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: -6.5px; z-index: 2;
  background: #fff; color: #111; font-family: 'Apotek', sans-serif;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  font-size: 7.5px; padding: 0.5px 3.5px; border-radius: 2.5px;
}
.tgt-peek-img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
/* position ikonka na hracovi (vpravo hore karty) */
.tgt-pos { position: absolute; left: 77%; top: 3.5%; width: 18%; }
.tgt-pos img { width: 100%; height: auto; display: block; }
/* forward ikonka na tt karte */
.tgt-fwd { position: absolute; pointer-events: none; }
.tgt-fwd img { width: 100%; height: auto; display: block; border-radius: 0 !important; }   /* ikonka NEma zaoblenie (mcard img rule by ju chytilo) */
.dnaico img { border: 0.1px solid #fff; border-radius: 11% !important; }   /* hotheads DNA ikonka: tenka biela linka */
/* spolocny pulz (naraz na oboch ikonkach) */
.tgt-pos.pulse, .tgt-fwd.pulse { animation: tgtIcoPulse 2.8s ease-in-out infinite; }   /* 2 svizne pulzy, potom pauza */
@keyframes tgtIcoPulse {
  0%  { transform: scale(1);    filter: brightness(1); }
  12% { transform: scale(1.06); filter: brightness(1.18); }
  24% { transform: scale(1);    filter: brightness(1); }
  36% { transform: scale(1.06); filter: brightness(1.18); }
  48%, 100% { transform: scale(1); filter: brightness(1); }
}