/* Rám karty ve stylu Hearthstonu. Tvar podle typu (jednotka, akce, vybavení),
   barvy a materiál podle sady (Základ, Clash of the Stars). Vše v cqw: šířka karty = 100cqw, výška = 140cqw. */

.card {
  /* Sada Základ: zlato a fialová scéna */
  --body: radial-gradient(120% 80% at 50% 0%, #4a2b80, #1d1036 60%, #140a26);
  --edge: linear-gradient(150deg, #fff3b8, #ffcc4d 22%, #9a5d06 48%, #ffe28a 72%, #b37208);
  --ring: conic-gradient(from 210deg, #fff3b8, #ffcc4d, #9a5d06, #ffe28a, #b37208, #fff3b8);
  --ribbon: linear-gradient(180deg, #fff0b0, #ffcc4d 40%, #c98a12);
  --ribbon-ink: #2a1400;
  --panel: linear-gradient(180deg, #2a1a48, #160c28);
  --panel-edge: rgba(255, 204, 77, .4);
  --panel-ink: #f0e8ff;
  --accent: var(--gold);
  --plaque: linear-gradient(180deg, #3a2560, #1e1236);
  --plaque-ink: #e9dcff;
  --bt: 13cqw;
  container-type: inline-size; position: relative; width: var(--card-w); aspect-ratio: 5 / 7;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; transition: transform .25s ease-out, filter .2s;
}
.card.tilting { transition: transform .06s linear; }

/* Tělo karty, fólie a odlesk sdílí stejný tvar */
.card-body, .card-foil, .card-glare { position: absolute; top: var(--bt); left: 3cqw; right: 3cqw; bottom: 1.5cqw; border-radius: 7cqw; pointer-events: none; }
.card-body { border: 1.6cqw solid transparent; background: var(--body) padding-box, var(--edge) border-box;
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .55), inset 0 0 0 .5cqw rgba(255, 255, 255, .15); }

/* Okno s obrázkem: jednotka = ovál přes horní okraj, akce = oblouk, vybavení = kruh */
.card-art { position: absolute; top: 0; left: 18cqw; width: 64cqw; height: 76cqw; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; border: 2.6cqw solid transparent;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .55), transparent 48%) padding-box,
    linear-gradient(165deg, var(--c1), var(--c2)) padding-box, var(--ring) border-box;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .6); z-index: 1; }
.card-art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 5cqw rgba(0, 0, 0, .55); pointer-events: none; }
.shape-spell, .shape-gear { --bt: 3cqw; }
.shape-spell .card-art { top: 8cqw; left: 12cqw; width: 76cqw; height: 58cqw; border-radius: 50% 50% 8cqw 8cqw / 42% 42% 8cqw 8cqw; }
.shape-gear .card-art { top: 6cqw; left: 16cqw; width: 68cqw; height: 68cqw; }
.card-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0 8deg, transparent 8deg 20deg); animation: spin 26s linear infinite; }
.card:not(.type-osobnost) .card-rays { opacity: .45; animation-duration: 60s; }
.card-emoji { position: relative; font-size: 30cqw; line-height: 1; filter: drop-shadow(0 2cqw 2cqw rgba(0, 0, 0, .45)); }
.art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.has-art .card-rays, .has-art .card-emoji, .has-art .minion-emoji { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.card-crown { position: absolute; top: -6cqw; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 13cqw; line-height: 1;
  color: var(--gold); text-shadow: 0 0 4cqw rgba(255, 204, 77, .9), 0 1cqw 0 #6a3a00; }

/* Stuha se jménem a drahokam vzácnosti */
.card-ribbon { position: absolute; top: 68cqw; left: -1cqw; right: -1cqw; height: 15cqw; z-index: 2; display: grid; place-items: center; padding: 0 9cqw;
  background: var(--ribbon); filter: drop-shadow(0 1.2cqw 1.5cqw rgba(0, 0, 0, .55));
  clip-path: polygon(0 16%, 5% 0, 95% 0, 100% 16%, 96% 50%, 100% 84%, 95% 100%, 5% 100%, 0 84%, 4% 50%); }
.card-ribbon span { font: 800 6.8cqw/1 var(--font-display); color: var(--ribbon-ink); text-align: center; text-wrap: balance; letter-spacing: -.01em; }
.shape-spell .card-ribbon { top: 61cqw; }
.shape-gear .card-ribbon { top: 66cqw; }
.card-rarity { position: absolute; top: 81cqw; left: 50%; width: 7cqw; height: 9cqw; transform: translateX(-50%); z-index: 3;
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); background: radial-gradient(circle at 40% 30%, #ffffff, #c8ccd6 50%, #6a6f7c); }
.type-osobnost .card-rarity { background: radial-gradient(circle at 40% 30%, #fff1c2, #ff9d1f 50%, #a34a00); }
.shape-spell .card-rarity { top: 74cqw; }
.shape-gear .card-rarity { top: 79cqw; }

/* Textové pole */
.card-text { position: absolute; top: 88cqw; left: 11cqw; right: 11cqw; bottom: 15cqw; z-index: 1; display: grid; place-items: center; overflow: hidden;
  padding: 2cqw 4cqw; border-radius: 3cqw; background: var(--panel); box-shadow: inset 0 0 0 .6cqw var(--panel-edge), inset 0 2cqw 4cqw rgba(0, 0, 0, .35);
  text-align: center; font: 600 6.1cqw/1.2 var(--font-body); color: var(--panel-ink); text-wrap: balance; }
.shape-spell .card-text { top: 80cqw; left: 9cqw; right: 9cqw; }
.shape-gear .card-text { top: 85cqw; }
.card-text b { color: var(--accent); font-weight: 800; }
.card-text i { color: var(--muted); font-weight: 400; }

/* Štítek typu dole mezi útokem a životy */
.card-type { position: absolute; bottom: 3.5cqw; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 1.4cqw;
  padding: 1.6cqw 3.6cqw; border-radius: 2.4cqw; white-space: nowrap; background: var(--plaque); box-shadow: inset 0 0 0 .5cqw var(--panel-edge);
  font: 800 4.1cqw/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--plaque-ink); }

/* Drahokamy: Hype krystal, útok, životy */
.card .gem { width: 25cqw; height: 25cqw; --gem-font: 13cqw; }
.card .gem-cost { top: 3cqw; left: -3cqw; filter: drop-shadow(0 .8cqw 0 #2a0018) drop-shadow(0 0 2cqw rgba(255, 46, 136, .65)); }
.card .gem-cost::before { inset: 0; transform: none; border-radius: 0; box-shadow: none;
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  background: linear-gradient(160deg, #ffe0f0, #ff5aa5 35%, var(--hot) 55%, #7a0038); }
.card .gem-atk { bottom: 0; left: -3cqw; }
.card .gem-hp { bottom: 0; right: -3cqw; }
.shape-spell .gem-cost, .shape-gear .gem-cost { top: -2cqw; }

/* Holografická fólie: osobnosti silně, ostatní jen jemný odlesk */
.card-foil { z-index: 4; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 15%, rgba(255, 0, 170, .55) 30%, rgba(0, 255, 240, .55) 45%, rgba(255, 240, 0, .5) 60%, rgba(140, 80, 255, .55) 75%, transparent 90%);
  background-size: 300% 300%; background-position: var(--mx, 50%) var(--my, 50%); }
.type-osobnost .card-foil { opacity: .3; animation: foil 6s ease-in-out infinite; }
.card.tilting .card-foil { opacity: .7; animation: none; }
.card-glare { z-index: 4; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .45), transparent 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: overlay; }
.card.tilting .card-glare { opacity: 1; }
@keyframes foil { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }

.card.big { --card-w: min(72vw, 300px, 46vh); }
.card.playable .card-body { box-shadow: 0 0 0 1.6cqw var(--ice), 0 0 12cqw rgba(92, 225, 255, .9), 0 0 24cqw rgba(92, 225, 255, .45), 0 3cqw 8cqw rgba(0, 0, 0, .55); animation: playable 1.3s ease-in-out infinite; }
.card.playable .card-art { box-shadow: 0 0 0 1cqw var(--ice), 0 0 7cqw rgba(92, 225, 255, .7); }
@keyframes playable { 50% { box-shadow: 0 0 0 1.6cqw #e6fbff, 0 0 18cqw rgba(92, 225, 255, 1), 0 0 34cqw rgba(92, 225, 255, .6), 0 3cqw 8cqw rgba(0, 0, 0, .55); } }
.card.playable .gem-cost { filter: drop-shadow(0 .8cqw 0 #2a0018) drop-shadow(0 0 3cqw rgba(255, 255, 255, .9)) drop-shadow(0 0 4cqw rgba(255, 46, 136, .9)); }