/* karty-v2: karta narysowana w CSS, gdy karta nie ma grafiki (partial karty-v2/_karta_css, dane KartyKarta::dane).
   Pole 600 x 838 jak prawdziwa grafika (tarcza z przezroczystym marginesem), wszystkie miary w cqw = % szerokości karty,
   więc ta sama karta pasuje do miniatury 34 px w panelu i do karty na podium. Progi szerokości (@container) chowają to,
   czego przy danym rozmiarze nie da się przeczytać. Bez obrazków, bez filtrów, bez JS. Kolory wersji niżej (kvk--<klucz>). */
.kvk {
    --kvk-ksztalt: polygon(50% 0%, 55% 2.6%, 60% 3.8%, 80% 3.8%, 87% 2.2%, 92% 0.8%, 96% 1.4%, 98.5% 3.8%, 99% 7%, 97.5% 10%, 97.5% 84%, 100% 88%, 98.5% 91%, 93% 92.6%, 72% 94.6%, 58% 96.6%, 50% 100%, 42% 96.6%, 28% 94.6%, 7% 92.6%, 1.5% 91%, 0% 88%, 2.5% 84%, 2.5% 10%, 1% 7%, 1.5% 3.8%, 4% 1.4%, 8% 0.8%, 13% 2.2%, 20% 3.8%, 40% 3.8%, 45% 2.6%);
    /* domyślnie: nieznana wersja - ciemna z turkusowym akcentem strony */
    --kvk-a: #2b3546;
    --kvk-b: #1b2230;
    --kvk-c: #10151e;
    --kvk-rama1: #5eead4;
    --kvk-rama2: #0f766e;
    --kvk-tekst: #e8eef5;
    --kvk-akcent: #2dd4bf;
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 600 / 838;
    container: kvk / inline-size;
    font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: var(--kvk-tekst);
    text-align: left;
    user-select: none;
}
.kvk[hidden] { display: none; }

.kvk-rama, .kvk-tarcza { position: absolute; clip-path: var(--kvk-ksztalt); }
.kvk-rama { inset: 8.5% 8% 4.5%; background: linear-gradient(160deg, var(--kvk-rama1), var(--kvk-rama2) 55%, var(--kvk-rama1)); }
.kvk-tarcza {
    inset: 9.6% 9.4% 5.6%;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 20% 8%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%),
        repeating-linear-gradient(125deg, rgba(255, 255, 255, 0) 0 9cqw, rgba(255, 255, 255, .06) 9cqw 9.6cqw),
        linear-gradient(170deg, var(--kvk-a) 0%, var(--kvk-b) 52%, var(--kvk-c) 100%);
}

/* współrzędne w tarczy: 100% = pole tarczy (82.6% x 84.8% karty) */
.kvk-sylwetka {
    position: absolute; left: 34%; top: 10%; width: 58%; height: auto;
    fill: currentColor; opacity: .2;
    -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%);
}
.kvk-ocena, .kvk-poz { position: absolute; left: 9%; width: 26%; text-align: center; font-weight: 700; }
.kvk-ocena { top: 9%; font-size: 17cqw; letter-spacing: -.02em; }
.kvk-poz { top: 27%; font-size: 7.4cqw; font-weight: 600; }
.kvk-poz::after { content: ""; display: block; width: 46%; height: .6cqw; margin: 2cqw auto 0; background: var(--kvk-akcent); opacity: .8; }
.kvk-nazwisko {
    position: absolute; left: 6%; right: 6%; top: 56%;
    font-size: 10cqw; font-weight: 700; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-bottom: 2.2cqw; border-bottom: .5cqw solid var(--kvk-akcent);
}
.kvk-dl-1 .kvk-nazwisko { font-size: 9cqw; }
.kvk-dl-2 .kvk-nazwisko { font-size: 7.8cqw; }
.kvk-dl-3 .kvk-nazwisko { font-size: 6.8cqw; }
.kvk-staty { position: absolute; left: 7%; right: 7%; top: 68.5%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); text-align: center; }
.kvk-stat i, .kvk-stat b { width: auto; margin: 0; padding: 0; color: inherit; font-family: inherit; line-height: 1; }
.kvk-stat i { display: block; font-style: normal; font-size: 4.6cqw; font-weight: 600; opacity: .85; }
.kvk-stat b { display: block; margin-top: 1cqw; font-size: 7.6cqw; font-weight: 700; }
.kvk-kraj {
    position: absolute; left: 14%; right: 14%; top: 83%;
    font-size: 4.6cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8;
}

/* holo: połysk z karty-v2-holo.css (keyframes kv2-holo-polysk) w obrysie tarczy, nie prostokątem kontenera */
.kvk--holo .kvk-tarcza::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, rgba(160, 220, 255, .45) 50%, rgba(255, 190, 240, .40) 55%, transparent 70%);
    background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: overlay;
    animation: kv2-holo-polysk 4.5s ease-in-out infinite;
}
.kv2-holo:has(> .kvk:not([hidden]))::after { display: none; }
@media (prefers-reduced-motion: reduce) {
    .kvk--holo .kvk-tarcza::after { animation: none; background-position: 50% 0; opacity: .5; }
}

/* błysk na dużej karcie (zamiast .kv2p-blysk, który maskuje się adresem grafiki) */
.kvk-blysk {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 62%);
    transform: translateX(-130%); animation: kvk-blysk 6.5s ease-in-out 1.2s infinite;
}
@keyframes kvk-blysk { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .kvk-blysk { display: none; animation: none; } }

/* miniatura i mała karta na podium (telefon): bez statystyk i kraju, nazwisko niżej i większe */
.kvk--mini .kvk-nazwisko { top: 66%; font-size: 12cqw; }
.kvk--mini.kvk-dl-1 .kvk-nazwisko { font-size: 10.5cqw; }
.kvk--mini.kvk-dl-2 .kvk-nazwisko { font-size: 9cqw; }
.kvk--mini.kvk-dl-3 .kvk-nazwisko { font-size: 7.8cqw; }
@container kvk (max-width: 150px) {
    .kvk-staty, .kvk-kraj { display: none; }
    .kvk-nazwisko { top: 66%; font-size: 12cqw; }
    .kvk-dl-1 .kvk-nazwisko { font-size: 10.5cqw; }
    .kvk-dl-2 .kvk-nazwisko { font-size: 9cqw; }
    .kvk-dl-3 .kvk-nazwisko { font-size: 7.8cqw; }
}
/* do 90 px (wiersz listy, polecane, skład) nazwisko stoi obok karty - na karcie ocena i pozycja */
@container kvk (max-width: 90px) {
    .kvk-nazwisko { display: none; }
    .kvk-ocena { top: 12%; font-size: 21cqw; width: 34%; left: 6%; }
    .kvk-poz { top: 34%; font-size: 10cqw; width: 34%; left: 6%; }
    .kvk-poz::after { display: none; }
    .kvk-sylwetka { left: 30%; top: 30%; width: 70%; }
}
/* do 44 px (panel, skład na telefonie) tylko ocena na środku */
@container kvk (max-width: 44px) {
    .kvk-poz { display: none; }
    .kvk-ocena { left: 0; width: 100%; top: 28%; font-size: 30cqw; }
    .kvk-sylwetka { left: 15%; top: 42%; width: 70%; opacity: .16; }
}

/* ===== kolory wersji (klucze: App\Libraries\KartyKarta::WERSJE i kolor()) ===== */
.kvk--zlota { --kvk-a: #fbe9a6; --kvk-b: #e2bd55; --kvk-c: #b8862a; --kvk-rama1: #fff3c4; --kvk-rama2: #9a6d17; --kvk-tekst: #3b2a07; --kvk-akcent: #8a6416; }
.kvk--srebrna { --kvk-a: #f4f6f8; --kvk-b: #c3cad2; --kvk-c: #8d97a3; --kvk-rama1: #ffffff; --kvk-rama2: #707b88; --kvk-tekst: #222b35; --kvk-akcent: #5c6774; }
.kvk--brazowa { --kvk-a: #f0c9a0; --kvk-b: #c08856; --kvk-c: #85552f; --kvk-rama1: #f7dcbf; --kvk-rama2: #6b4123; --kvk-tekst: #2e1a0c; --kvk-akcent: #6b4123; }
.kvk--totw { --kvk-a: #3a3a3a; --kvk-b: #1a1a1a; --kvk-c: #050505; --kvk-rama1: #f7dc84; --kvk-rama2: #a07a1e; --kvk-tekst: #f2d27a; --kvk-akcent: #d6ae45; }
.kvk--ikona { --kvk-a: #ffffff; --kvk-b: #f1ead6; --kvk-c: #dccfa9; --kvk-rama1: #f9e39a; --kvk-rama2: #b08a2e; --kvk-tekst: #4a3a17; --kvk-akcent: #b08a2e; }
.kvk--debiut { --kvk-a: #f3f8ff; --kvk-b: #c9dcf3; --kvk-c: #8fb2df; --kvk-rama1: #f6e3a1; --kvk-rama2: #a8822c; --kvk-tekst: #13284a; --kvk-akcent: #a8822c; }
.kvk--hero { --kvk-a: #7a5ee0; --kvk-b: #4a2fa8; --kvk-c: #231463; --kvk-rama1: #ffe39a; --kvk-rama2: #b8862a; --kvk-tekst: #fff1c7; --kvk-akcent: #f0c860; }
.kvk--hof { --kvk-a: #2f6e9e; --kvk-b: #163e66; --kvk-c: #0a1e36; --kvk-rama1: #e6edf5; --kvk-rama2: #7d8c9e; --kvk-tekst: #f2f6fb; --kvk-akcent: #c7d3e0; }
.kvk--sf { --kvk-a: #23b48c; --kvk-b: #0f6e5a; --kvk-c: #07332c; --kvk-rama1: #b9f5e1; --kvk-rama2: #138a6c; --kvk-tekst: #f2fffa; --kvk-akcent: #8ff0cf; }
.kvk--fs { --kvk-a: #8a3cf5; --kvk-b: #4b16a8; --kvk-c: #1d0748; --kvk-rama1: #ff8ae2; --kvk-rama2: #6a1fd1; --kvk-tekst: #fff4fd; --kvk-akcent: #ff6fd8; }
.kvk--dfg { --kvk-a: #3653a8; --kvk-b: #1b2c66; --kvk-c: #0b1433; --kvk-rama1: #ffe08a; --kvk-rama2: #b88a22; --kvk-tekst: #fff3cf; --kvk-akcent: #f2c94c; }
.kvk--us { --kvk-a: #ff8c2a; --kvk-b: #8a3a08; --kvk-c: #170b04; --kvk-rama1: #ffc56b; --kvk-rama2: #c24f00; --kvk-tekst: #fff2e2; --kvk-akcent: #ffb347; }
.kvk--sp { --kvk-a: #1c9a62; --kvk-b: #0b5636; --kvk-c: #04251a; --kvk-rama1: #a8f5c9; --kvk-rama2: #13804f; --kvk-tekst: #effff6; --kvk-akcent: #8cf2b0; }
.kvk--otw { --kvk-a: #e0393f; --kvk-b: #8e151c; --kvk-c: #2a0709; --kvk-rama1: #ffd0d2; --kvk-rama2: #a8141c; --kvk-tekst: #fff5f5; --kvk-akcent: #ffb3b6; }
.kvk--heritage { --kvk-a: #a52a4a; --kvk-b: #5e1427; --kvk-c: #2a0812; --kvk-rama1: #f3d38e; --kvk-rama2: #9a7330; --kvk-tekst: #fbefd8; --kvk-akcent: #e9c27a; }
.kvk--partner { --kvk-a: #d63384; --kvk-b: #6d1b5a; --kvk-c: #1a1033; --kvk-rama1: #ffd1e8; --kvk-rama2: #8e2470; --kvk-tekst: #fff3fa; --kvk-akcent: #ff9fd0; }
.kvk--potm { --kvk-a: #2f8de6; --kvk-b: #134a8a; --kvk-c: #071d3a; --kvk-rama1: #d6ecff; --kvk-rama2: #1f6fc2; --kvk-tekst: #f3f9ff; --kvk-akcent: #9fd0ff; }
.kvk--futc { --kvk-a: #d1222c; --kvk-b: #6e0c12; --kvk-c: #1a0405; --kvk-rama1: #ffe27a; --kvk-rama2: #b38b12; --kvk-tekst: #fff6dc; --kvk-akcent: #f5c518; }

/* zapas za grafiką, która się nie wczytała (onerror w widoku chowa <img>) */
img.kvk-img[hidden] { display: none !important; }
.kvk-bez-grafiki .kv2p-blysk { display: none; }