/* Karty, postavy na scéně a hrdinové. Velikosti uvnitř karty jsou v cqw,
   takže stejná karta vypadá dobře v ruce, v detailu i v menu. */
.pal-hudba { --c1: #ff4fa3; --c2: #6b22ff; }
.pal-internet { --c1: #27d7ff; --c2: #3b3bff; }
.pal-tv { --c1: #ffb02e; --c2: #ff3d2e; }
.pal-sport { --c1: #3dffa8; --c2: #0d8f8a; }
.pal-akce { --c1: #c27bff; --c2: #4b1fa8; }
.pal-vybaveni { --c1: #ffe07a; --c2: #c46a12; }
.pal-neutral { --c1: #a8b4e0; --c2: #3d4378; }

.card { --frame: linear-gradient(160deg, #6e6a8e, #2b2742 50%, #8a86a8);
  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; }
.card.type-osobnost { --frame: linear-gradient(150deg, #fff3b8, var(--gold) 25%, #9a5d06 50%, #ffe28a 75%, #b37208); }
.card.type-akce { --frame: linear-gradient(150deg, #e6c6ff, #8f4dff 40%, #3a1580 70%, #c79bff); }
.card.type-vybaveni { --frame: linear-gradient(150deg, #ffe1b0, #d48a2e 45%, #6e3a0a 70%, #f5b867); }
.card-frame { position: absolute; inset: 0; border-radius: 7cqw; padding: 3.2cqw; background: var(--frame);
  box-shadow: 0 2.5cqw 7cqw rgba(0, 0, 0, .55), inset 0 0 0 .6cqw rgba(255, 255, 255, .35);
  display: flex; flex-direction: column; overflow: hidden;
}
.card-frame::before { content: ''; position: absolute; inset: 3.2cqw; border-radius: 5cqw; background: linear-gradient(180deg, #241739, #130b22); }
.card-frame > * { position: relative; }
.card-art { height: 47%; border-radius: 5cqw 5cqw 3cqw 3cqw; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .55), transparent 48%), linear-gradient(165deg, var(--c1), var(--c2));
  box-shadow: inset 0 -4cqw 8cqw rgba(0, 0, 0, .35);
}
.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: 33cqw; line-height: 1; filter: drop-shadow(0 2cqw 2cqw rgba(0, 0, 0, .45)); }
@keyframes spin { to { transform: rotate(360deg); } }
.card-name { margin: -5cqw 2cqw 0; padding: 2.4cqw 3cqw; border-radius: 3cqw; text-align: center;
  background: linear-gradient(180deg, #3a2560, #1e1236); box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .5), inset 0 0 0 .5cqw rgba(255, 255, 255, .14);
  font: 800 7.8cqw/1.05 var(--font-display); letter-spacing: -.01em; text-wrap: balance; z-index: 2;
}
.type-osobnost .card-name { background: linear-gradient(180deg, #ffe58a, #c98a12); color: #2a1400; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .5), inset 0 .6cqw 0 rgba(255, 255, 255, .6); }
.card-typeline { margin-top: 2cqw; text-align: center; font: 700 5cqw/1 var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.card-text { flex: 1; display: grid; place-items: center; padding: 1.5cqw 6cqw 9cqw; text-align: center; font: 600 7cqw/1.22 var(--font-body); color: #f0e8ff; text-wrap: balance; }
.card-text b { color: var(--gold); font-weight: 800; }
.card-text i { color: var(--muted); font-weight: 400; }
.card-flavor { margin: -8cqw 16cqw 12cqw; text-align: center; font: italic 400 5.6cqw/1.25 var(--font-body); color: rgba(220, 205, 245, .65); }
.card-crown { position: absolute; top: -5cqw; left: 50%; transform: translateX(-50%); font-size: 13cqw; color: var(--gold); text-shadow: 0 0 4cqw rgba(255, 204, 77, .9), 0 1cqw 0 #6a3a00; }

/* Holografická fólie: osobnosti silně, ostatní jen jemný odlesk */
.card-foil, .card-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.card-foil { 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: .35; animation: foil 6s ease-in-out infinite; }
.card.tilting .card-foil { opacity: .75; animation: none; }
.card-glare { 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%; } }

/* Drahokamy s čísly */
.gem { position: absolute; display: grid; place-items: center; z-index: 3; }
.gem span { font: 900 var(--gem-font, 12cqw)/1 var(--font-display); color: #fff; -webkit-text-stroke: .14em #1a0a14; paint-order: stroke fill;
  text-shadow: 0 .08em 0 rgba(0, 0, 0, .6), 0 0 .3em rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
.card .gem { width: 22cqw; height: 22cqw; }
.gem-cost { top: -4cqw; left: -4cqw; }
.gem-cost::before { content: ''; position: absolute; inset: 8%; transform: rotate(45deg); border-radius: 22%;
  background: radial-gradient(circle at 35% 30%, #ffc2e0, var(--hot) 45%, #7a0038); box-shadow: 0 0 0 .14em rgba(255, 255, 255, .35), 0 .1em .4em rgba(0, 0, 0, .6), 0 0 .8em rgba(255, 46, 136, .6); }
.gem-cost span { position: relative; }
.gem-atk { bottom: -3cqw; left: -3cqw; }
.gem-hp { bottom: -3cqw; right: -3cqw; }
.gem-atk::before, .gem-hp::before { content: ''; position: absolute; inset: 0; box-shadow: 0 .1em .4em rgba(0, 0, 0, .6), inset 0 0 0 .12em rgba(255, 255, 255, .35); }
.gem-atk::before { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b0, #f2a10c 55%, #7a4300); }
.gem-hp::before { border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%; background: radial-gradient(circle at 35% 30%, #ffb1b8, var(--blood) 55%, #6a0010); }
.gem-atk span, .gem-hp span { position: relative; }
.gem.buffed span { color: #8dff9d; }
.gem.hurt span { color: #ffb0b0; }

.card.big { --card-w: min(72vw, 300px, 46vh); }
.card.playable .card-frame { box-shadow: 0 0 0 1.2cqw var(--ice), 0 0 8cqw rgba(92, 225, 255, .75), 0 2.5cqw 7cqw rgba(0, 0, 0, .55); animation: playable 1.6s ease-in-out infinite; }
@keyframes playable { 50% { box-shadow: 0 0 0 1.2cqw #b8f3ff, 0 0 12cqw rgba(92, 225, 255, .95), 0 2.5cqw 7cqw rgba(0, 0, 0, .55); } }

.card-back { width: 100%; aspect-ratio: 5 / 7; border-radius: 12%; display: grid; place-items: center; container-type: inline-size;
  background: radial-gradient(circle at 50% 50%, rgba(255, 204, 77, .3), transparent 55%), repeating-conic-gradient(from 45deg, #3a1460 0 25%, #2a0d48 0 50%) 0 0 / 22% 16%;
  box-shadow: inset 0 0 0 4cqw #c98a12, inset 0 0 0 6cqw #3a1460, 0 4cqw 10cqw rgba(0, 0, 0, .55);
}
.card-back span { font: 900 30cqw/1 var(--font-display); color: var(--gold); text-shadow: 0 2cqw 0 #5a2a00, 0 0 8cqw rgba(255, 204, 77, .6); }

/* Postavy na scéně */
.minion { container-type: inline-size; position: relative; flex: 0 0 auto;
  width: min(calc((100cqw - 6 * var(--gap)) / 7), calc(86cqh * .78), 112px); aspect-ratio: 4 / 5; cursor: pointer;
}
.minion-body { position: absolute; inset: 4% 6% 8%; border-radius: 50% / 44%; overflow: hidden;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .55), transparent 45%), linear-gradient(165deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 4cqw #2c2342, 0 0 0 6cqw #8d88ad, 0 3cqw 10cqw rgba(0, 0, 0, .6), inset 0 -6cqw 12cqw rgba(0, 0, 0, .35);
  transition: box-shadow .25s, transform .25s;
}
.type-osobnost .minion-body { box-shadow: 0 0 0 4cqw #6a3d00, 0 0 0 7.5cqw var(--gold), 0 0 14cqw rgba(255, 204, 77, .45), 0 3cqw 10cqw rgba(0, 0, 0, .6), inset 0 -6cqw 12cqw rgba(0, 0, 0, .35); }
.minion-art { position: absolute; inset: 0; display: grid; place-items: center; }
.minion-emoji { font-size: 50cqw; line-height: 1; filter: drop-shadow(0 3cqw 3cqw rgba(0, 0, 0, .45)); }
.minion-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 45%, transparent 60%); transform: translateX(-120%); }
.type-osobnost .minion-shine { animation: shine 4s ease-in-out infinite; }
.minion-crown { position: absolute; top: -10cqw; left: 50%; transform: translateX(-50%); font-size: 22cqw; color: var(--gold); text-shadow: 0 0 6cqw rgba(255, 204, 77, .9), 0 1.5cqw 0 #6a3a00; z-index: 2; }
.minion-name { position: absolute; left: -6%; right: -6%; bottom: -16cqw; text-align: center; font: 800 10.5cqw/1.05 var(--font-display); color: #efe6ff; text-shadow: 0 1cqw 3cqw #000; display: none; }
@container (min-width: 84px) { .minion-name { display: block; } }
.minion .gem { width: 34cqw; height: 34cqw; --gem-font: 19cqw; bottom: 0; }
.minion .gem-atk { left: -4cqw; }
.minion .gem-hp { right: -4cqw; }
.minion-shield { position: absolute; inset: -6% -2% 2%; opacity: 0; transition: opacity .3s, transform .3s; transform: scale(.85);
  clip-path: polygon(50% 0, 96% 14%, 92% 62%, 50% 100%, 8% 62%, 4% 14%);
  background: linear-gradient(160deg, #e7ecff, #7d88b8 35%, #2e3458 60%, #b9c2ea); filter: drop-shadow(0 0 4cqw rgba(160, 190, 255, .6));
}
.minion.taunt .minion-shield { opacity: 1; transform: none; }
.badges { position: absolute; top: -4cqw; right: -6cqw; display: flex; gap: 2cqw; z-index: 3; }
.badge { width: 28cqw; height: 28cqw; border-radius: 50%; display: grid; place-items: center; font-size: 16cqw; background: #1b1030; box-shadow: 0 0 0 2cqw var(--gold), 0 2cqw 5cqw rgba(0, 0, 0, .5); }
.badge.viral { box-shadow: 0 0 0 2cqw var(--hot), 0 0 8cqw rgba(255, 46, 136, .7); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.zzz { position: absolute; top: -6cqw; right: 2cqw; display: none; font: 800 14cqw/1 var(--font-display); color: #cbd6ff; pointer-events: none; }
.zzz i { display: inline-block; font-style: normal; animation: zzz 2s ease-in-out infinite; opacity: 0; }
.zzz i:nth-child(2) { animation-delay: .4s; font-size: .8em; }
.zzz i:nth-child(3) { animation-delay: .8s; font-size: .65em; }
.minion.sleeping .zzz { display: block; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6cqw, -16cqw); } }

.minion.ready .minion-body { box-shadow: 0 0 0 4cqw #0f3a26, 0 0 0 7cqw var(--ready), 0 0 16cqw rgba(125, 255, 178, .8), 0 3cqw 10cqw rgba(0, 0, 0, .6); animation: ready 1.3s ease-in-out infinite; }
@keyframes ready { 50% { transform: translateY(-3cqw); } }
.minion.targetable .minion-body { box-shadow: 0 0 0 4cqw #4a0010, 0 0 0 7cqw var(--blood), 0 0 18cqw rgba(255, 59, 78, .85); }
.minion.aim-hover .minion-body, .hero.aim-hover .hero-ring { transform: scale(1.1); filter: brightness(1.25); }
.minion.aim-source .minion-body { transform: translateY(-6cqw) scale(1.08); }
.minion.lunging { z-index: 40; }
.minion.dying { pointer-events: none; }
.minion.incoming, .hand-slot.incoming, .back-slot.incoming { visibility: hidden; }

/* Hrdinové */
.hero { position: relative; width: var(--hero-w); aspect-ratio: 1; cursor: pointer; container-type: inline-size; }
.hero-ring { position: absolute; inset: 0; border-radius: 50%; transition: transform .25s, filter .25s;
  background: conic-gradient(from 0deg, #fff3b8, var(--gold), #9a5d06, #ffe28a, #b37208, #fff3b8);
  box-shadow: 0 0 0 3cqw #2a1400, 0 6cqw 16cqw rgba(0, 0, 0, .6), 0 0 22cqw rgba(255, 204, 77, .25);
}
.hero-portrait { position: absolute; inset: 7%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .45), transparent 50%), linear-gradient(165deg, #5a3aa0, #1c0f38);
}
.enemy .hero-portrait { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .4), transparent 50%), linear-gradient(165deg, #b0204e, #3a0620); }
.hero-portrait span { font-size: 56cqw; line-height: 1; filter: drop-shadow(0 3cqw 3cqw rgba(0, 0, 0, .5)); }
.hero-name { position: absolute; left: 50%; bottom: -11cqw; transform: translateX(-50%); white-space: nowrap; padding: 3cqw 9cqw; border-radius: 999px;
  font: 800 max(10px, 11cqw)/1 var(--font-display); background: #1b1030; box-shadow: 0 0 0 2.5cqw var(--gold-deep); z-index: 2; }
.hero .gem { width: 38cqw; height: 38cqw; --gem-font: 19cqw; right: -10cqw; bottom: 4cqw; }
.hero.targetable .hero-ring { box-shadow: 0 0 0 3cqw #4a0010, 0 0 0 6cqw var(--blood), 0 0 26cqw rgba(255, 59, 78, .9); }
.hero.low .hero-ring { animation: low 1.1s ease-in-out infinite; }
@keyframes low { 50% { box-shadow: 0 0 0 3cqw #4a0010, 0 0 26cqw rgba(255, 59, 78, .8); } }