/* Kartentemplate: feste Grösse 630 x 880 px (Verhältnis 63 x 88 mm). Farben pro Element über --c1..--c4. */

@font-face { font-family: 'Cinzel Decorative'; font-weight: 900; font-display: block; src: url('fonts/cinzel-decorative-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans Condensed'; font-weight: 500; font-display: block; src: url('fonts/fira-sans-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans Condensed'; font-weight: 700; font-display: block; src: url('fonts/fira-sans-condensed-latin-700-normal.woff2') format('woff2'); }

.card {
    /* Metall in den Elementfarben, für Rahmen und Kanten */
    --metal: linear-gradient(135deg, var(--c3) 0%, var(--c1) 22%, var(--c2) 45%, var(--c1) 62%, var(--c3) 80%, var(--c1) 100%);
    /* Pergament: hell in der Mitte, zum Rand hin getönt */
    --parchment:
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--c3) 70%, #fff) 0%, var(--c3) 55%, color-mix(in srgb, var(--c3) 72%, var(--c1)) 100%);
    --gem: radial-gradient(circle at 35% 30%, #fff 0%, var(--c1) 35%, var(--c2) 100%);
    --ink: color-mix(in srgb, var(--c4) 85%, #000);

    position: relative;
    width: 630px;
    height: 880px;
    box-sizing: border-box;
    padding: 22px;
    border-radius: 28px;
    overflow: hidden;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 500;
    color: var(--ink);
    background:
        radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.6px) 0 0 / 17px 17px,
        radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.6px) 8px 9px / 23px 23px,
        radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--c1) 70%, transparent) 0, transparent 22%),
        radial-gradient(circle at 92% 96%, color-mix(in srgb, var(--c1) 60%, transparent) 0, transparent 24%),
        linear-gradient(160deg, var(--c2) 0%, color-mix(in srgb, var(--c2) 55%, #000) 50%, var(--c2) 100%);
    -webkit-font-smoothing: antialiased;
    font-variant-ligatures: no-common-ligatures no-discretionary-ligatures; /* Cinzel macht sonst aus "TH" ein Æ-artiges Zeichen */
}
.card *, .card *::before, .card *::after { box-sizing: border-box; }

.card__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.card__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 60px 392px 64px 108px 108px 1fr;
    gap: 6px;
    height: 100%;
}

/* Alle Tafeln: Pergament innen, Metallkante aussen (Verlaufsrand per padding-box/border-box) */
.card__name, .card__points, .card__stat, .card__attack, .card__lore, .card__speed {
    background: var(--parchment) padding-box, var(--metal) border-box;
    border: 4px solid transparent;
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--c2) 55%, transparent),
        inset 0 0 14px color-mix(in srgb, var(--c1) 35%, transparent),
        0 3px 5px rgba(0,0,0,.45);
}

/* Kopfzeile: Platz links für das Element-Badge */
.card__top { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-left: 112px; }
.card__name, .card__points { display: flex; align-items: center; justify-content: center; border-radius: 30px 10px 30px 10px; }
.card__name {
    font-family: 'Cinzel Decorative', serif; font-weight: 900; line-height: 1;
    white-space: nowrap; overflow: hidden; padding: 0 12px;
    color: var(--c2);
    text-shadow: 0 1px 0 #fff, 0 2px 3px color-mix(in srgb, var(--c2) 45%, transparent);
}
.card__points { flex-direction: column; padding: 0 16px; line-height: 1; border-radius: 10px 30px 10px 30px; }
.card__points small { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.card__points b { font-family: 'Cinzel Decorative', serif; font-size: 23px; color: var(--c2); text-shadow: 0 1px 0 #fff; }

/* Artwork mit Metallrahmen, Vignette und Glanz */
.card__art {
    position: relative;
    border: 6px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(circle, var(--c1), var(--c2)) padding-box, var(--metal) border-box;
    box-shadow: 0 0 0 2px var(--c2), 0 0 18px color-mix(in srgb, var(--c1) 70%, transparent), 0 4px 8px rgba(0,0,0,.5);
}
.card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__art::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(125deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%),
        radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.45) 100%);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c3) 60%, transparent);
    border-radius: 8px;
    pointer-events: none;
}
.card__wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--c3); font-size: 22px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.card__spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px solid color-mix(in srgb, var(--c3) 30%, transparent); border-top-color: var(--c3); animation: card-spin 1s linear infinite; }
@keyframes card-spin { to { transform: rotate(360deg); } }

/* Stat-Boxen mit runden Icon-Medaillons */
.card__stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 6px; }
.card__stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 5px; padding: 3px 7px 3px 5px; line-height: 1.05; }
.card__stat i, .card__speed i {
    grid-row: span 2;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    font-style: normal; font-size: 21px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: radial-gradient(circle at 40% 35%, #fff 0%, var(--c3) 60%, color-mix(in srgb, var(--c3) 60%, var(--c1)) 100%) padding-box, var(--metal) border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.card__stat b { font-size: 14px; text-align: center; align-self: end; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.card__stat span { font-size: 18px; font-weight: 700; text-align: center; align-self: start; white-space: nowrap; }
.card__stat--wide span { font-size: 16px; white-space: normal; }

/* Angriffe */
.card__attack { display: grid; grid-template-columns: 124px 1fr 96px; align-items: center; padding: 6px 6px 6px 8px; }
.card__attack-icons {
    display: grid; place-items: center;
    height: 80px;
    font-size: 30px; letter-spacing: -3px;
    border-radius: 40px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c1) 40%, transparent) 0%, transparent 70%);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.card__attack-text { padding: 0 4px 0 6px; border-left: 2px solid color-mix(in srgb, var(--c1) 55%, transparent); }
.card__attack-text h3 {
    margin: 0 0 4px;
    font-family: 'Cinzel Decorative', serif; font-weight: 900; line-height: 1.05;
    color: var(--c2);
    text-shadow: 0 1px 0 #fff;
    white-space: nowrap;
}
.card__attack-text p { margin: 0; font-size: 15.5px; line-height: 1.2; }

/* Schadens-Stern: dunkler Umriss + goldener Stern darüber */
.card__burst, .card__burst::before {
    clip-path: polygon(50% 0, 61% 18%, 82% 10%, 79% 31%, 100% 38%, 85% 54%, 97% 73%, 75% 76%, 71% 98%, 52% 86%, 33% 100%, 27% 79%, 5% 80%, 15% 60%, 0 42%, 20% 32%, 15% 11%, 37% 17%);
}
.card__burst { position: relative; width: 92px; height: 92px; display: grid; place-items: center; background: color-mix(in srgb, var(--c2) 70%, #000); }
.card__burst::before { content: ''; position: absolute; inset: 4px; background: radial-gradient(circle at 45% 40%, #fffbe0 0%, #ffe066 35%, #f5a623 75%, #c46a06 100%); }
.card__burst span { position: relative; font-size: 25px; font-weight: 700; color: #2a1600; text-shadow: 0 0 4px #fff, 0 0 2px #fff; }

/* Fusszeile */
.card__bottom { display: grid; grid-template-columns: 1fr 150px; gap: 6px; }
.card__lore { position: relative; padding: 6px 12px 6px 14px; font-size: 14px; line-height: 1.22; display: flex; align-items: center; }
.card__lore::before { content: '❝'; position: absolute; top: -2px; left: 3px; font-size: 22px; color: var(--c1); opacity: .7; }
.card__speed { display: flex; align-items: center; gap: 7px; padding: 4px 8px; }
.card__speed b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.card__speed span { font-size: 19px; font-weight: 700; }

/* Element-Badge oben links: Medaillon mit Strahlenkranz */
.card__badge {
    position: absolute; z-index: 4; top: 10px; left: 12px;
    width: 120px; height: 120px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 6px solid transparent;
    background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c3) 80%, #fff) 0%, var(--c1) 55%, var(--c2) 100%) padding-box, var(--metal) border-box;
    box-shadow: 0 0 0 2px var(--c2), 0 0 16px color-mix(in srgb, var(--c1) 80%, transparent), 0 5px 10px rgba(0,0,0,.5);
}
.card__badge::before {
    content: '';
    position: absolute; inset: 4px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.35) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%, #000 68%, transparent 70%);
    mask: radial-gradient(circle, transparent 30%, #000 31%, #000 68%, transparent 70%);
}
.card__badge-icon { position: relative; font-size: 54px; margin-top: -12px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.card__badge-label {
    position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
    padding: 2px 16px;
    border: 3px solid transparent;
    background: var(--parchment) padding-box, var(--metal) border-box;
    border-radius: 6px 16px 6px 16px;
    font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    color: var(--c2);
    box-shadow: 0 2px 4px rgba(0,0,0,.45);
}

/* Siegel: gezackte Rosette mit Prägung */
.card__seal {
    --s1: #f4f6f9; --s2: #aeb6c2; --s3: #5f6875; --sink: #2f3540;
    position: absolute; z-index: 4; top: 96px; right: 22px;
    width: 118px; height: 118px;
    display: grid; place-items: center;
    text-align: center;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--s3) 0deg 7.5deg, var(--s2) 7.5deg 15deg);
    filter: drop-shadow(0 5px 6px rgba(0,0,0,.55));
    transform: rotate(-10deg);
}
.card__seal::before {
    content: '';
    position: absolute; inset: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--s1) 0%, var(--s2) 55%, var(--s3) 100%);
    box-shadow: inset 0 0 0 3px var(--s3), inset 0 0 0 6px var(--s1), inset 0 -4px 8px rgba(0,0,0,.35);
}
.card__seal span { position: relative; width: 80px; font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: 14px; line-height: 1.05; color: var(--sink); text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.card__seal--episch { --s1: #fbeaff; --s2: #c58be0; --s3: #6e2f8c; --sink: #3a1050; }
.card__seal--legendaer { --s1: #fff7d6; --s2: #f2c94c; --s3: #9a6408; --sink: #3e2a03; }
.card__seal--legendaer span { font-size: 15px; }