/* ============================================================
   Anatomy engine CSS - portnute 1:1 z prototyp/index.html
   (karta, hotspoty, tooltip, zoom, overlay animacie).
   ============================================================ */

/* zoom skryje app chrome + zamkne swipe feed */
body.zoomed #topbar, body.zoomed #footer, body.zoomed .headline-band { opacity: 0; pointer-events: none; transition: opacity .3s; }
body.zoomed .feed { overflow: hidden; -webkit-mask-image: none; mask-image: none; }

  /* ===== Scena s kartou ===== */
  .stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* visible: nazoomovana karta smie prekryt priestor (skryteho) headera,
       orezava az okraj obrazovky (body ma overflow hidden) */
    overflow: visible;
    position: relative;
  }

  .card-wrap {
    position: relative;
    width: min(68.4vw, 323px, 49.4vh);  /* karta 745:1041, -5% */
    margin-bottom: 1vh;             /* maly odstup od hornej hrany footeru */
    transition: transform .5s cubic-bezier(.22,.9,.3,1);
    will-change: transform;
  }
  .card-wrap img.card {
    display: block;
    width: 100%;
    height: auto;
    /* PNG ma vlastne zaoblene rohy, tien cez drop-shadow kopiruje alfu */
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
    pointer-events: none;
    transition: filter .45s;
  }
  /* pri zoome tien vypnut - skalovany drop-shadow stmavoval pozadie
     okolo karty a robil border efekt */
  body.zoomed .card-wrap img.card { filter: none; }

  /* ===== Hotspoty =====
     Dizajn podla Viktorovho nahladu: biely kruh + cerveno-oranzovy
     stred + polopriehladne biele halo. Pulzuju stale (aj po kliknuti),
     pri nacitani postupne popnu (spotIn + animation-delay v JS). */
  .spot {
    position: absolute;
    width: 42px; height: 42px;
    transform: translate(-50%,-50%) scale(0); /* start pre pop-in */
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
    animation: spotIn .7s cubic-bezier(.34,1.35,.5,1) both;
    animation-delay: var(--d, 0s);
    transition: opacity .3s;
  }
  .spot::after {
    content: '';
    position: absolute; inset: 26%;
    border-radius: 50%;
    background: #00c0f3;
  }
  /* ripple: vlna sa zvacsuje do stratena (codepen referencia) */
  .spot::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    z-index: -1;
    opacity: 0;
    animation: ripple 1.9s ease-out infinite;
    animation-delay: calc(var(--d, 0s) + .7s); /* az po pop-ine */
  }
  /* mekky spring: overshoot riesi bezier kriva.
     POZOR: opacity v keyframoch nesmie byt - fill mode by prebijal
     skryvanie spotov pri zoome (body.zoomed .spot) */
  @keyframes spotIn {
    0%   { transform: translate(-50%,-50%) scale(0); }
    100% { transform: translate(-50%,-50%) scale(1); }
  }
  @keyframes ripple {
    0%   { transform: scale(1); opacity: .55; }
    70%  { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(2.5); opacity: 0; } /* pauza medzi vlnami */
  }
  body.zoomed .spot { opacity: 0; pointer-events: none; }

  /* ===== Overlay vrstvy na elementoch karty ===== */
  .ov {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: 3;   /* nad spotlight overlayom */
  }
  .ov img { width: 100%; height: 100%; display: block; }
  .ov.show { opacity: 1; }

  /* odometer: dve vrstvy na crossfade */
  .ov .layerA, .ov .layerB {
    position: absolute; inset: 0;
    transition: opacity .12s linear;
  }
  .ov .layerB { opacity: 0; }

  /* klon vyrezu karty (vlajka, chevrony) cez background trik */
  .clone {
    position: absolute;
    background-image: url('../visual-assets/dobrodej.png');
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
  }

  /* bonusovy chip (+5 / +7) */
  .chip {
    position: absolute;
    transform: translate(-50%,-50%) scale(0);
    background: var(--accent);
    color: #1d1d1b;
    font-family: 'Apotek', sans-serif;
    font-size: .69rem;
    line-height: 1;
    padding: 4px 7px 3px;
    border-radius: 999px;
    border: 2px solid #1d1d1b;
    pointer-events: none;
    z-index: 4;
  }
  .chip.pop { animation: chipPop 1.4s ease forwards; }
  @keyframes chipPop {
    0%   { transform: translate(-50%,-50%) scale(0); }
    18%  { transform: translate(-50%,-58%) scale(1.15); }
    30%  { transform: translate(-50%,-55%) scale(1); }
    80%  { transform: translate(-50%,-55%) scale(1); opacity: 1; }
    100% { transform: translate(-50%,-65%) scale(.9); opacity: 0; }
  }

  /* age overlay - biele okienko s cislom v Apoteku */
  .ageBox {
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Apotek', sans-serif;
    color: #1d1d1b;
  }

  .pulseAnim { animation: iconPulse .55s ease 2; }
  @keyframes iconPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.22); }
  }

  /* ===== Tooltip panel (podla mockupu m3s2-zoom1: biely, lavy text,
         kotveny pod elementom, sipka na element) ===== */
  .tip {
    position: fixed;
    left: 0; top: 0;             /* presne umiestnenie nastavuje JS */
    width: min(86vw, 340px);
    background: #fff;
    color: #1d1d1b;
    border-radius: 16px;
    padding: 16px 18px 17px;
    text-align: left;
    opacity: 0;
    transform: translateY(8px) scale(.96);
    pointer-events: none;
    /* zladene s prichodom TT karty (rovnaky cas aj easing) */
    transition: transform .6s cubic-bezier(.45,.05,.2,1), opacity .45s;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 10;
  }
  .tip .arrow {
    position: absolute;
    top: -9px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    border-top: none;
  }
  .tip.flip .arrow {
    top: auto; bottom: -9px;
    border-bottom: none;
    border-top: 10px solid #fff;
  }
  /* side variant: tooltip nalavo od elementu, sipka doprava */
  .tip.side { padding: 16px; }
  .tip.side .arrow {
    top: auto; bottom: auto;
    left: auto !important;
    right: -9px;
    border: 10px solid transparent;
    border-right: none;
    border-left: 10px solid #fff;
  }
  .tip.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .tip h3 {
    font-family: 'Apotek', sans-serif;
    font-weight: normal;   /* h3 default bold by Apotek (1 vaha) faux-zhrubol, vypina sa */
    font-size: 4.5vh;   /* zhodne s nadpisom AUCTION PRICES (.priceLabel) */
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 6px;
  }
  .tip p { font-size: clamp(.97rem, 4.5vw, 1.1rem); line-height: 1.3; color: #3d4145; font-weight: bold; }
  .tip .note { margin-top: 6px; font-size: .69rem; color: #999; font-style: italic; }

  /* ===== Tmavy overlay LEN cez kartu: card-overlay.png (Viktorov asset),
     50% transparency, presne rozmery aj rohy karty. Ikonka elementu
     sa rendruje NAD nim (z-index 3), takze diera nie je potrebna. ===== */
  .dim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none;
    z-index: 2;
  }
  .dim.show { opacity: .65; }
  /* neviditelna kotva pre tooltip na mieste elementu */
  .anchor { position: absolute; pointer-events: none; visibility: hidden; }

  /* ===== Transfer Target karta (m3s2 position zoom, mockup m3s2-zoom2) =====
     sliduje zprava, vrstvy ikoniek pop-anim po sekvencii */
  .tt {
    position: fixed;
    right: -3vw;
    bottom: 3vh;
    width: min(91vw, 470px);    /* 2x -10% z povodnych 112vw/580 */
    aspect-ratio: 1040 / 745;
    /* start: vpravo mimo obrazu, +10 stupnov navyse -> pri prilete
       sa dotoci o 10 stupnov counter-clockwise na finalnych 22 */
    transform: translateX(130%) rotate(33deg);
    transition: transform .6s cubic-bezier(.45,.05,.2,1); /* sync s tooltipom */
    filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
    z-index: 9;
    pointer-events: none;
  }
  .tt.show { transform: translateX(0) rotate(18deg); }
  .tt img.base { width: 100%; height: 100%; display: block; }
  .ttL { position: absolute; }
  .ttL img { width: 100%; height: 100%; display: block; }

  /* ===== Rarity: AUCTION PRICES panel (sliduje zlava) + ukazovatel ===== */
  .priceP {
    position: fixed;
    left: 0;
    top: 5vh;
    transform: translateX(-108%);
    /* sync s tooltipom (rovnaky cas aj easing) */
    transition: transform .6s cubic-bezier(.45,.05,.2,1);
    z-index: 9;
    display: flex;
    align-items: stretch;
    /* overflow visible: zlta sipka smie vytrcat von z panelu */
    overflow: visible;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    pointer-events: none;
  }
  /* len panel (label + ceny) ma pruhy a zaoblenie, sipka je mimo neho */
  .priceBg {
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 2;   /* nad ukazovatelom, kym je zasunuty za panelom */
    gap: 1.08vh;
    padding: 1.8vh 1.8vh 1.8vh 1.8vh;
    background: #f5d000;
    border-radius: 0 18px 18px 0;
    overflow: hidden;   /* orez pohyblivych pasov na tvar panelu */
  }
  /* subtilne pasy bezia zlava doprava (ako progress bar) */
  .priceBg::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -40px;
    width: calc(100% + 40px);
    z-index: 0;
    background: repeating-linear-gradient(-45deg,
      rgba(255,255,255,.16) 0 10px, rgba(255,255,255,0) 10px 20px);
    animation: barberPrice 2.2s linear infinite;
  }
  /* horizontalna perioda -45deg pasov s 20px krokom: 20/cos45 = 28.28px */
  @keyframes barberPrice { to { transform: translateX(28.28px); } }
  .priceBg > .priceLabel, .priceBg > .priceCol { position: relative; z-index: 1; }
  .priceP.show { transform: translateX(0); }
  .priceLabel {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Apotek', sans-serif;
    font-size: 4.5vh;
    color: #161616;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
    align-self: center;
  }
  .priceCol {
    position: relative;
    display: flex;
    flex-direction: column;   /* ceny na seba, ziadny gap */
  }
  .priceCol img { height: 6.3vh; width: auto; display: block; }
  /* cenovky maju zaoble­ne rohy -> v rohoch presvita zlta. mierny presah
     susednych cipov tu medzeru v rohoch potlaci */
  .priceCol img + img { margin-top: -0.45vh; }
  /* jemne zosvetlenie ceny, na ktoru sa ukazovatel posunie (ako pri TT) */
  .priceCol img.lit { animation: priceLit .6s ease; }
  @keyframes priceLit { 45% { filter: brightness(1.15); } }
  /* zlta sipka MIMO panelu (dieta priceP), otocena o 180 stupnov.
       trvanie = od zaciatku closing po koniec reveal (~0.64s) */
  .pricePtr {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 1.26vh;
    z-index: 1;   /* pod priceBg, kym je zasunuty */
    width: 0; height: 0;
    border: 1.35vh solid transparent;
    border-right: none;
    border-left: 1.71vh solid #f5d000;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
    transition: transform .5s cubic-bezier(.34,1.1,.4,1);
  }

  /* ===== Rarity: ikonka + label ako jedna skupina, curtain roll =====
     skupina sa zroluje do stredu (clip + scale) a vyroluje von,
     auto-sirka, centrovana cez translateX(-50%) */
  .rarEl {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    transform: translateX(-50%);
    transform-origin: center;
    white-space: nowrap;
  }
  .rarRoll {
    display: inline-flex;
    align-items: center;
    height: 100%;     /* definicna vyska pre height:100% ikonky */
    /* maska sa zatvori z oboch stran do stredu a vyroluje na strany,
       obsah ostava v plnej velkosti (ziadna deformacia) */
    clip-path: inset(0 0 0 0);
    transition: clip-path .3s cubic-bezier(.45,0,.3,1);
  }
  .rarRoll.closed { clip-path: inset(0 50% 0 50%); }
  .rarIco {
    position: relative;
    height: 100%;
    aspect-ratio: 13.7 / 15.82;   /* pomer rarity SVG */
    flex: none;
  }
  .rarIco img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .rarIco img.hide { opacity: 0; }
  .rarIco img.rarFrame { z-index: 2; }
  .rarWord {
    font-family: 'Apotek', sans-serif;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: .02em;
  }

  /* ===== DNA slider (mockup: ikonky horizontalne, nazvy vertikalne) ===== */
  .dnaWin {
    position: absolute;
    overflow: hidden;
    z-index: 3;
  }
  .dnaStrip {
    display: flex;
    height: 100%;
    transition: transform .55s cubic-bezier(.45,.05,.2,1); /* zjemneny rozjazd aj dojazd */
  }
  .dnaStrip img { width: 100%; height: 100%; flex: none; object-fit: cover; }
  .dnaLabel {
    position: absolute;
    background: #fff;
    overflow: hidden;
    z-index: 4;
  }
  .dnaNames { height: 100%; transition: transform .55s cubic-bezier(.45,.05,.2,1); }
  .dnaName {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Apotek', sans-serif;
    color: #111;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  /* ===== DNA collection: coin + bracket + 4 sloty nad ikonkou ===== */
  .dnaColl {
    position: fixed;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s, transform .45s cubic-bezier(.22,.9,.3,1);
  }
  .dnaColl.show { opacity: 1; transform: translateY(0); }
  /* inline svg je default inline -> baseline medzera pod nim
     robila volny priestor medzi stubmi a kartami */
  .dnaColl svg { display: block; }
  .dnaColl .coin { position: relative; }
  .dnaColl .coin > svg { width: 100%; height: 100%; display: block; }
  /* farebne stavy coinu: zaklad zlta, neg cervena, zero siva */
  .dnaColl .coin .coinRing, .dnaColl .coin .coinMain { transition: fill .25s; }
  .dnaColl .coin .coinRing { fill: #d7850d; }
  .dnaColl .coin .coinMain { fill: #f5d700; }
  .dnaColl .coin.neg .coinRing { fill: #a8241c; }
  .dnaColl .coin.neg .coinMain { fill: #e8392f; }
  .dnaColl .coin.zero .coinRing { fill: #6f6f6f; }
  .dnaColl .coin.zero .coinMain { fill: #9c9c9c; }
  .dnaColl .coin.neg .numOv, .dnaColl .coin.zero .numOv { color: #fff; }
  .dnaColl .slots { display: flex; }
  .dnaColl .slot {
    position: relative;
    background: rgba(255,255,255,.28);
    border: 3px solid #fff;
    overflow: hidden;
  }
  .dnaColl .slot img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: translateY(110%);   /* schovany pod slotom */
    transition: transform .5s cubic-bezier(.22,.9,.3,1);
  }
  .dnaColl .slot img.in { transform: translateY(0); }

  /* karta vylietava zo spodnej DNA do slotu (fixed coords cez viewport) */
  .dnaFlyer {
    position: fixed;
    z-index: 9;
    overflow: hidden;
    pointer-events: none;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
    transform-origin: center;
    transition: transform .72s cubic-bezier(.3,.85,.3,1), opacity .25s linear;
    will-change: transform, opacity;
  }
  .dnaFlyer img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* spodna DNA prebliskne: biely overlay, animuje sa len opacity (plynule) */
  .dnaFlashOv {
    position: absolute; inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
  }
  .dnaFlashOv.go { animation: dnaFlash .55s ease-in-out; }
  @keyframes dnaFlash {
    0%   { opacity: 0; }
    22%  { opacity: .6; }
    100% { opacity: 0; }
  }

  /* -3 za ukradnuteho hraca: cervene koliecko pri okraji, vystupa a mizne */
  .stealCoin {
    position: fixed;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  }
  .stealCoin svg { width: 100%; height: 100%; display: block; }
  /* dlhsia transicia nahor, ease-out: zo zaciatku stupa rychlo, potom dobrzduje.
     opacity 1 -> 0 zdiela rovnaky easing, takze mizne v takte s rychlostou */
  .stealCoin.rise { animation: stealRise 4.06s cubic-bezier(.05,.7,.15,1) forwards; }
  @keyframes stealRise {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-130px); }
  }

  /* pop: mikro doprezenie + presvietenie na vrchole (vsetky segmenty) */
  /* will-change drzi elementy trvalo na vlastnej kompozitnej vrstve,
     inak po skonceni pop animacie browser vrstvu zrusi a element sa
     re-rasterizuje zaokruhleny na cele px = preblik o par pixelov */
  .ov, .ttL { will-change: transform, filter; }
  .pop { animation: ttPop .80s cubic-bezier(.33,.1,.3,1); }
  @keyframes ttPop {
    0%   { transform: scale(1);     filter: brightness(1); }
    35%  { transform: scale(1.15);  filter: brightness(1.18); }
    70%  { transform: scale(.985);  filter: brightness(1); }
    100% { transform: scale(1);     filter: brightness(1); }
  }
  /* pop2: tlmena verzia pre spolocny blik viacerych prvkov naraz */
  .pop2 { animation: ttPop2 .80s cubic-bezier(.33,.1,.3,1); }
  @keyframes ttPop2 {
    0%   { transform: scale(1);     filter: brightness(1); }
    35%  { transform: scale(1.05);  filter: brightness(1.18); }
    70%  { transform: scale(.995);  filter: brightness(1); }
    100% { transform: scale(1);     filter: brightness(1); }
  }

  /* prestige counter: prazdny badge + cislo fontom.
     translateY: opticke centrovanie cislice v minci (ladene vizualne) */
  .numOv {
    position: absolute; inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Apotek', sans-serif;
    color: #3d382e;
    transform: translateY(.6%);
  }


/* headline screenu zmizne pri zoome (ako header v prototype) */
body.zoomed .head { opacity: 0; pointer-events: none; transition: opacity .3s; }