/* ==========================================================================
   Karta (komponenta nrCard v templates/@card.latte) – podle karta.html autora.
   Jeden šedý rámeček: barva kovu podle vzácnosti (data-rarity C/U/R/E/L),
   kámen podle frakce (data-faction), foil jako vlastnost kusu (.is-foil).
   Velikost karty určuje rodič – text se škáluje přes container query (cqw).
   ========================================================================== */

.nr-card {
  --tint: transparent; --tint-op: 0; --glow: rgba(0,0,0,0);
  --rune-glow: rgba(201,196,212,.3); --stone-filter: brightness(1.1);
  --frame-filter: none; --rarity-label: #B6AEC4;
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; width: 100%; aspect-ratio: 627 / 967;  container-type: inline-size;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .35s ease, filter .3s ease;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 14px var(--glow));
  border-radius: 3%;
  user-select: none;
  font-family: 'Sora', system-ui, sans-serif;
}
.nr-card.live { transition: transform .08s linear, filter .3s ease; }
.nr-card > * { position: absolute; }

/* ilustrace pod rámečkem (rámeček ji ořízne do oblouku) */
.nr-card__art { left: 10%; top: 7%; width: 80%; height: 51%; overflow: hidden; background: #120A1E; }
.nr-card__art img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* zástupný obrázek: noční obloha v barvě frakce + velký kámen frakce */
.nr-card__art.is-placeholder {
  background:
    radial-gradient(60% 45% at 50% 38%, var(--rune-glow), transparent 70%),
    linear-gradient(#1A1030, #2A1846 60%, #0E0816);
}
.nr-card__art.is-placeholder img {
  width: 42%; height: auto; margin: 26% auto 0; opacity: .35;
  filter: var(--stone-filter) blur(.3cqw);
}

/* přebarvení ilustrace – varianta běžného soupeře výpravy (data-shade, EnemyShade): filtr obrázku + barevná vrstva */
.nr-card[data-shade] .nr-card__art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--shade-color, transparent); mix-blend-mode: var(--shade-blend, color); opacity: var(--shade-op, .35);
}
.nr-card[data-shade] .nr-card__art img { filter: var(--shade-filter, none); }
.nr-card[data-shade="krev"]    { --shade-filter: saturate(1.2) brightness(.9);  --shade-color: #A3121C; --shade-op: .45; }
.nr-card[data-shade="ohen"]    { --shade-filter: saturate(1.3) brightness(1.05); --shade-color: #E2701A; --shade-op: .4; }
.nr-card[data-shade="mraz"]    { --shade-filter: saturate(.7) brightness(1.1);  --shade-color: #5FA8E0; --shade-op: .45; }
.nr-card[data-shade="jed"]     { --shade-filter: saturate(1.1);                 --shade-color: #4E9A2A; --shade-op: .45; }
.nr-card[data-shade="stin"]    { --shade-filter: brightness(.6) contrast(1.25) saturate(.8); --shade-color: #1A0F2E; --shade-blend: multiply; --shade-op: .35; }
.nr-card[data-shade="popel"]   { --shade-filter: grayscale(.85) contrast(1.05) brightness(.95); --shade-op: 0; }
.nr-card[data-shade="sepie"]   { --shade-filter: sepia(.75) brightness(.95); --shade-op: 0; }
.nr-card[data-shade="mlha"]    { --shade-filter: brightness(1.15) contrast(.75) saturate(.5); --shade-color: #C8D2E6; --shade-blend: screen; --shade-op: .25; }
.nr-card[data-shade="stribro"] { --shade-filter: grayscale(.9) brightness(1.15) contrast(1.1); --shade-color: #8FA6D6; --shade-op: .3; }
.nr-card[data-shade="runa"]    { --shade-filter: saturate(1.1);                 --shade-color: #7A3FD0; --shade-op: .45; }

/* podklad textového panelu */
.nr-card__panel { left: 8%; top: 66%; width: 84%; height: 29%; background: radial-gradient(120% 90% at 50% 0%, #1E1530 0%, #0B0812 70%); }

/* rámeček + barva kovu (jen tam, kde je rámeček) */
.nr-card__frame { inset: 0; width: 100%; height: 100%; pointer-events: none; filter: var(--frame-filter); }
.nr-card__tint, .nr-card__shine {
  inset: 0; pointer-events: none;
  -webkit-mask: url('../img/card/card-frame.webp') center / 100% 100% no-repeat;
  mask: url('../img/card/card-frame.webp') center / 100% 100% no-repeat;
}
.nr-card__tint { background: var(--tint); opacity: var(--tint-op); mix-blend-mode: color; }
.nr-card__shine {
  mix-blend-mode: soft-light; opacity: var(--tint-op);
  background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 40%, transparent 60%, rgba(255,255,255,.2));
}

/* kámen frakce v lůžku */
.nr-card__stone {
  left: 50%; top: 62.36%; transform: translate(-50%, -50%); width: 12%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 2.6cqw var(--rune-glow);
}
.nr-card__stone img { width: 100%; height: 100%; display: block; filter: var(--stone-filter) drop-shadow(0 0 .9cqw var(--rune-glow)); }
/* úroveň karty hráče v horním kolečku rámu (střed 50 % × 5,9 %, průměr ~16 %): neutrální kámen s vyrytým číslem –
   tmavé písmo, světlá hrana dole = vtesané */
.nr-card__level { left: 50%; top: 5.9%; transform: translate(-50%, -50%); width: 15%; aspect-ratio: 1; border-radius: 50%; }
.nr-card__level img { width: 100%; height: 100%; display: block; filter: brightness(1.08) drop-shadow(0 0 .6cqw rgba(0, 0, 0, .6)); }
.nr-card__level span {
  position: absolute; inset: 0; display: grid; place-items: center; padding-top: .3cqw;
  font-family: var(--nr-display, 'Cinzel', serif); font-weight: 800; font-size: 9cqw; line-height: 1;
  color: rgba(28, 22, 18, .88);
  text-shadow: 0 .25cqw .1cqw rgba(255, 255, 255, .38), 0 -.15cqw .1cqw rgba(0, 0, 0, .55);
}

/* text */
.nr-card__text {
  left: 9.5%; top: 68%; width: 81%; height: 25%; box-sizing: border-box; padding-top: 2cqw;
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; text-align: center; overflow: hidden;
}
.nr-card__name {
  font-family: var(--nr-display, 'Cinzel', serif); font-weight: 700; font-size: 6.2cqw; letter-spacing: .04em;
  color: #F4EEFF; line-height: 1.1; text-shadow: 0 .3cqw 0 #000; text-wrap: balance;
}
.nr-card__type { font-size: 3.3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--rarity-label); }
.nr-card__quote { font-size: 3.7cqw; font-style: italic; color: #CFC6DE; line-height: 1.4; max-width: 92%; }

/* staty: po najetí myší překryjí textový panel, v aréně (stats: true) jsou místo citátu */
.nr-card__hover {
  left: 9.5%; top: 68%; width: 81%; height: 25%; box-sizing: border-box; padding-top: 1.5cqw;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
/* bez vlastního pozadí – rámeček zůstane celý, jen se vymění text panelu */
.nr-card__text { transition: opacity .2s ease; }
.nr-card:hover .nr-card__hover, .nr-card:focus-visible .nr-card__hover { opacity: 1; }
.nr-card:not(.is-zoomable):hover .nr-card__text:has(~ .nr-card__hover),
.nr-card:not(.is-zoomable):focus-visible .nr-card__text:has(~ .nr-card__hover) { opacity: 0; }
/* malá karta v katalogu / sbírce staty po najetí neukáže (nejde je přečíst) – až zvětšená kopie po kliknutí */
.nr-card.is-zoomable .nr-card__hover { display: none; }
.nr-card__stats { font-size: 3.6cqw; line-height: 1.35; color: #EDE6FA; text-align: center; }
.nr-card__stats ul { list-style: none; margin: 0; padding: 0; }
.nr-card__stats.is-dense { line-height: 1.25; }
.nr-card__text:has(.is-dense) { gap: .5cqw; padding-top: 1.2cqw; }
.nr-card__stats.is-dense ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5cqw; font-size: 3.1cqw; }
.nr-card__hover .nr-card__stats { font-size: 4.4cqw; }
.nr-card__hover .nr-card__stats.is-dense ul { font-size: 3.6cqw; }
.nr-card__stats-note { font-size: 3cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--rarity-label); margin: .4cqw 0; }

/* foil */
.nr-card__foil {
  inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; border-radius: 3%;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 32%),
    linear-gradient(115deg, transparent 20%, rgba(255,80,180,.55) 34%, rgba(255,220,90,.55) 42%, rgba(90,255,180,.55) 50%, rgba(80,170,255,.55) 58%, rgba(190,110,255,.55) 66%, transparent 80%);
  background-size: 100% 100%, 250% 250%;
  background-position: center, var(--mx) var(--my);
  mix-blend-mode: color-dodge;
}
.nr-card__sparkle {
  inset: 0; pointer-events: none; opacity: 0; border-radius: 3%; transition: opacity .3s;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 9% 6%;
  mix-blend-mode: overlay;
}
.nr-card.is-foil .nr-card__foil { opacity: .28; }
.nr-card.is-foil:hover .nr-card__foil, .nr-card.is-foil.live .nr-card__foil { opacity: .6; }
.nr-card.is-foil .nr-card__sparkle { opacity: .22; }

/* počet kusů (sbírka) */
.nr-card__count {
  left: 5%; top: 2.6%; font-family: var(--nr-display, 'Cinzel', serif); font-size: 6.5cqw; font-weight: 700; line-height: 1.2;
  padding: .4cqw 2.4cqw; border-radius: 99px; color: #F4EEFF; background: rgba(9,7,13,.82); border: 1px solid rgba(255,255,255,.18);
}

/* zvětšitelná karta (sbírka) – ruka, záře při najetí; zvětšená kopie v okně .nr-zoom */
.nr-card.is-zoomable { cursor: pointer; }
.nr-card.is-zoomable:hover { filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 18px var(--glow)) brightness(1.08); }
.nr-card.is-zoomable:focus-visible { outline: 2px solid var(--nr-rune, #D9C6FF); outline-offset: 4px; }

.nr-zoom {
  padding: 0; border: 0; background: none; overflow: visible;
  width: min(440px, 86vw, calc(84vh * 627 / 967)); max-width: none; max-height: none;
}
.nr-zoom::backdrop { background: rgba(5,3,9,.78); backdrop-filter: blur(3px); }
.nr-zoom[open] { animation: nr-zoom-in .25s ease-out; }
@keyframes nr-zoom-in { from { opacity: 0; transform: scale(.85); } }
.nr-zoom__stage { perspective: 1200px; }
.nr-zoom__close {
  position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(9,7,13,.85); color: #ECE6F5;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.nr-zoom__close:hover { border-color: var(--nr-rune, #D9C6FF); color: #fff; }
.nr-zoom__close:focus-visible { outline: 2px solid var(--nr-rune, #D9C6FF); outline-offset: 2px; }

/* vzácnosti */
.nr-card[data-rarity="U"] {
  --frame-filter: sepia(.55) saturate(2.4) hue-rotate(72deg) brightness(1.02);
  --tint: #43A047; --tint-op: .7; --glow: rgba(67,160,71,.3); --rarity-label: #86D98A;
}
.nr-card[data-rarity="R"] {
  --frame-filter: sepia(.55) saturate(2.6) hue-rotate(178deg) brightness(1.04);
  --tint: #2F7BFF; --tint-op: .75; --glow: rgba(70,140,255,.35); --rarity-label: #8CB8FF;
}
.nr-card[data-rarity="E"] {
  --frame-filter: sepia(.55) saturate(3) hue-rotate(228deg) brightness(1.02);
  --tint: #9B4DFF; --tint-op: .85; --glow: rgba(155,90,255,.5); --rarity-label: #C9A6FF;
}
.nr-card[data-rarity="G"] {
  --frame-filter: sepia(.8) saturate(5) hue-rotate(-52deg) brightness(.78) contrast(1.15);
  --tint: #B3123A; --tint-op: .95; --glow: rgba(214,30,70,.6); --rarity-label: #FF8FA8;
  animation: nr-card-god 3s ease-in-out infinite;
}
.nr-card[data-rarity="L"] {
  --frame-filter: sepia(1) saturate(1.9) brightness(1.1) hue-rotate(-6deg);
  --tint: #E0A93A; --tint-op: .95; --glow: rgba(240,190,90,.55); --rarity-label: #F2CD7E;
  animation: nr-card-legend 3s ease-in-out infinite;
}
@keyframes nr-card-legend {
  50% { filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(240,190,90,.8)); }
}
@keyframes nr-card-god {
  50% { filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(230,40,80,.85)); }
}

/* frakce – barva a záře kamene */
.nr-card[data-faction="noctis"] { --rune-glow: rgba(155,107,255,.8); --stone-filter: sepia(.7) saturate(3.4) hue-rotate(225deg) brightness(1.15); }
.nr-card[data-faction="ignis"]  { --rune-glow: rgba(255,90,70,.75);  --stone-filter: sepia(.8) saturate(4) hue-rotate(-28deg) brightness(1.1); }
.nr-card[data-faction="vitae"]  { --rune-glow: rgba(70,220,150,.7);  --stone-filter: sepia(.7) saturate(3.2) hue-rotate(95deg) brightness(1.1); }

/* ==========================================================================
   Odhalování balíčku (nrFlip): karta rubem nahoru, záře podle rarity na najetí, otočení na klik
   ========================================================================== */

.nr-flip {
  --aura: transparent;
  position: relative; display: block; width: 100%; aspect-ratio: 627 / 967; margin-bottom: 1.8rem; perspective: 1200px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  opacity: 0; transform: translateY(30px) scale(.9);
  animation: nr-deal .5s ease-out forwards; animation-delay: calc(var(--i) * .12s);
}
@keyframes nr-deal { to { opacity: 1; transform: none; } }
.nr-flip:focus-visible { outline: 2px solid var(--nr-rune, #D9C6FF); outline-offset: 6px; border-radius: 4%; }
.nr-flip.is-flipped { cursor: default; }

.nr-flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, 1.3, .5, 1); }
.nr-flip.is-flipped .nr-flip__inner { transform: rotateY(180deg); }
.nr-flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nr-flip__front { transform: rotateY(180deg); }
.nr-flip__back { border-radius: 3%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)); transition: filter .3s ease, transform .3s ease; }
.nr-flip__back img { width: 100%; height: 100%; display: block; }

.nr-flip__aura {
  position: absolute; inset: 0; border-radius: 3%; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at 50% 51%, var(--aura) 0%, transparent 38%); mix-blend-mode: color-dodge;
}
.nr-flip__aura.is-rainbow {
  background:
    radial-gradient(circle at 50% 51%, rgba(255,255,255,.7) 0%, transparent 30%),
    conic-gradient(from 0deg at 50% 51%, #ff7ac8, #ffe17a, #7affc0, #7ac0ff, #c48aff, #ff7ac8);
  -webkit-mask: radial-gradient(circle at 50% 51%, #000 0 22%, transparent 42%);
  mask: radial-gradient(circle at 50% 51%, #000 0 22%, transparent 42%);
}
.nr-flip[data-rarity="U"] { --aura: rgba(67,160,71,.8); }
.nr-flip[data-rarity="R"] { --aura: rgba(70,140,255,.95); }
.nr-flip[data-rarity="E"] { --aura: rgba(165,95,255,1); }
.nr-flip[data-rarity="L"] { --aura: rgba(255,195,80,1); }
.nr-flip[data-rarity="G"] { --aura: rgba(225,40,80,1); }

.nr-flip:not(.is-flipped):hover .nr-flip__aura, .nr-flip:not(.is-flipped):focus-visible .nr-flip__aura { opacity: .9; }
.nr-flip[data-rarity="U"]:not(.is-flipped):hover .nr-flip__aura:not(.is-rainbow) { opacity: .55; }
.nr-flip:not(.is-flipped):hover .nr-flip__aura.is-rainbow { opacity: .45; }
.nr-flip[data-rarity="U"]:not(.is-flipped):hover .nr-flip__back { filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(67,160,71,.55)); }
.nr-flip[data-rarity="R"]:not(.is-flipped):hover .nr-flip__back { filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(70,140,255,.7)); }
.nr-flip[data-rarity="E"]:not(.is-flipped):hover .nr-flip__back { filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(165,95,255,.85)); }
.nr-flip[data-rarity="L"]:not(.is-flipped):hover .nr-flip__back {
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(255,195,80,.95));
  animation: nr-shake .4s ease-in-out infinite;
}
@keyframes nr-shake { 25% { transform: translate(-1.5px, 1px) rotate(-.6deg); } 75% { transform: translate(1.5px, -1px) rotate(.6deg); } }

/* záblesk při otočení (ne u obyčejné common) */
.nr-flip__burst {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff, var(--aura) 40%, transparent 70%); animation: nr-burst .7s ease-out forwards;
}
.nr-flip[data-rarity="C"] .nr-flip__burst { --aura: rgba(255,255,255,.6); }
@keyframes nr-burst { to { transform: scale(16); opacity: 0; } }

.nr-flip__cap {
  position: absolute; left: 0; right: 0; bottom: -1.6rem; text-align: center; font-size: 12px; letter-spacing: .06em;
  color: #A99CC2; opacity: 0; transition: opacity .4s .5s;
}
.nr-flip.is-flipped .nr-flip__cap { opacity: 1; }

/* kopie nad limit sbírky – přeměněná na prach */
.nr-flip.is-dusted { margin-bottom: 3rem; }
.nr-flip.is-dusted .nr-flip__cap { top: calc(100% + .3rem); bottom: auto; line-height: 1.5; }
.nr-flip.is-dusted.is-flipped .nr-flip__front .nr-card { filter: grayscale(.75) brightness(.6); transition: filter .6s .5s ease; }
.nr-flip__dust { color: #C9AEFF; font-weight: 600; }
.nr-card__count.is-full { color: #F2CD7E; border-color: rgba(242,205,126,.6); }
.nr-foil-text {
  font-weight: 700; background: linear-gradient(90deg, #FF9BD2, #FFE58A, #8DFFC9, #8EC5FF, #C9A0FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .nr-card, .nr-card *, .nr-flip, .nr-flip * { animation: none !important; transition: none !important; }
  .nr-flip { opacity: 1; transform: none; }
}