/* Alle mål i denne fil er faste px i #ui-scale-root's 640×360-referencerum
   (se UIScaler.js) — tidligere vw/vh-baserede clamp()/min()/max()-udtryk er
   udregnet til deres tilsvarende faste px-værdi ved 640×360, da vw/vh måler
   den ÆGTE viewport og derfor dobbeltskalerede oven i UIScaler's egen
   transform. Selve skaleringen til den ægte skærm klares nu ALENE af
   #ui-scale-root. */

/* ─── RUN-START PACK SCREEN ──────────────────────────────────────────────────
   Vises ÉN gang, ved den allerførste "New Run" (se RunStartPackScreen.js).
   Trin 2 (åbnet pack) genbruger .reward-cards/.reward-card 1:1 — ingen ny
   CSS nødvendig der. Dette er kun trin 1 (vælg mellem 3 packs). */
#run-start-packs-screen {
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    background-image: var(--bg-dot-grid);
    background-size: var(--bg-dot-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 200;
    padding: 19.2px;
}
/* Samme JS-drevne hak (domUtils.js's startTitleWobble(), kaldt fra
   RunStartPackScreen.js) + blødt CSS-float som .start-title/.reward-title-box
   — se .reward-title-box's kommentar for baggrunden. */
@keyframes rsp-title-pop-in-scale {
    from { opacity: 0; scale: 0.85; }
    to   { opacity: 1; scale: 1; }
}
@keyframes rsp-title-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}
.rsp-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 25.6px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0;
    /* IKKE en transition på rotate — se .start-title's kommentar. Hårdt
       spring, ingen tweening, det ER selve "hakket". */
    animation: rsp-title-pop-in-scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
               rsp-title-float 3.4s ease-in-out infinite 0.3s;
}
.rsp-pack-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 19.2px;
}
/* Samme kort-anatomi som .shop-pack (ikon-boks + label), bare lodret stablet
   og uden pris — dette er gratis. Egen let skæv rotation pr. kort, matcher
   spillets øvrige sticker-æstetik. */
.rsp-pack-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 140.8px;
    padding: 16px 12px;
    background: var(--clr-bg-panel);
    border: 4px solid #000;
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    cursor: pointer;
    transition: box-shadow 0.08s, transform 0.1s;
}
.rsp-pack-card:nth-child(1) { transform: rotate(-2deg); }
.rsp-pack-card:nth-child(2) { transform: rotate(1deg);  }
.rsp-pack-card:nth-child(3) { transform: rotate(-1deg); }
.rsp-pack-card:hover  { box-shadow: var(--shadow-raised); }
.rsp-pack-card:active { box-shadow: var(--shadow-pressed); transform: translate(3px, 3px); }
.rsp-pack-card .pack-icon-box {
    width: 56px;
    height: 64px;
    font-size: 30px;
}
.rsp-pack-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* ─── REWARD SCREEN ───────────────────────────────────────────────────────── */
#reward-screen {
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    background-image: var(--bg-dot-grid);
    background-size: var(--bg-dot-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* "safe center": opfører sig som almindelig centrering når kortene
       passer i den resterende plads under titlen — men falder tilbage til
       at starte foroven i stedet for at presse indhold symmetrisk ud af
       syne, hvis det IKKE passer. Ingen scroll (droppet igen — gjorde
       SKIP-knappen upålidelig, se chatten): på de sjældne viewports hvor
       kort stadig er for høje, klippes bunden nu simpelt af overflow:hidden
       i stedet, og man kan altid vælge via ikon-klikket (åbner detail-popup)
       som fallback for PICK-knappen. */
    justify-content: safe center;
    overflow: hidden;
    gap: 12px;
    z-index: 200;
    /* Toppen reserverer plads til .reward-title-box, som IKKE længere er en
       flex-child her — den er position:absolute, fast forankret til toppen
       (se dens egne regler), præcis som #reward-skip-btn allerede var. Det
       var netop DERFOR skip-knappen aldrig flyttede sig på tværs af
       opløsninger, mens titlen gjorde: den var stadig en del af den
       centrerede flex-gruppe, så dens Y-position drev med afhængigt af
       kortenes samlede højde. Nu opfører titlen sig som skip-knappen —
       helt uafhængig af kortenes højde/viewportens størrelse.
       --reward-title-space sættes af watchRewardTitleSpacing() (JS, målt fra
       titlens FAKTISKE renderede højde — varierer med tekstlængde/wrapping på
       smalle skærme). clamp()-værdien er kun et fallback for det ene frame
       før JS når at måle. Uden den dynamiske måling kunne lange titler
       stadig række ind i kortenes område; da titlen fik z-index-forrang
       endte kortene med at blive skjult BAG titlen i stedet for foran den —
       samme geometriske overlap, bare usynligt i stedet for synligt. Bunden
       reserverer stadig lidt plads mod #score-display som før. */
    padding: var(--reward-title-space, 90px) 19.2px 40px;
}

#reward-skip-btn,
#pack-skip-btn {
    position: absolute;
    top: 14px;
    right: 70px;
    background: var(--clr-red);
    color: #fff;
    border: 3px solid #000;
    box-shadow: 4px 4px 0px #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transform: rotate(-2deg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: box-shadow 0.08s, transform 0.08s;
    z-index: 1;
}
#reward-skip-btn:hover, #pack-skip-btn:hover  { box-shadow: 2px 2px 0px #000; transform: rotate(-2deg) translateY(2px); }
#reward-skip-btn:active, #pack-skip-btn:active { box-shadow: none;              transform: rotate(-2deg) translateY(4px); }
.reward-skip-bonus { font-weight: 800; }

/* Title sticker box — position:absolute (på .reward-title-anchor), fast
   forankret til toppen (samme princip som #reward-skip-btn ovenfor), IKKE en
   flex-child af #reward-screen længere. left:calc(50% - 24px) + translateX
   (-50%) centrerer den vandret uafhængigt af sin egen (indholds-afhængige)
   bredde. */
/* Positionering og dekoration er nu PÅ TO FORSKELLIGE ELEMENTER — ikke
   samme element som før. Grunden: da rotate/translate lå som selvstændige
   egenskaber PÅ SAMME element som centrerings-transformen (translateX(-50%)
   translateX(-24px)), komponerede de i en fast rækkefølge (translate →
   rotate → scale → transform, jf. spec) der gjorde rotations-PIVOTPUNKTET
   forskudt væk fra boksens eget centrum (så den så ud til at rotere om et
   hjørne i stedet for midten) — jo mere synlig vinklen/floatet blev, jo
   tydeligere blev fejlen (var usynlig dengang rotationen bare var en fast,
   lille -1deg). Løsningen: .reward-title-anchor gør AL positionering (ren
   translateX(-50%), ingen dekoration overhovedet), .reward-title-box gør AL
   dekoration (rotate/translate/scale) uden nogen positionerings-transform at
   komponere imod — så roterer den garanteret om sit eget centrum. */
@keyframes reward-title-pop-in-scale {
    from { opacity: 0; scale: 0.85; }
    to   { opacity: 1; scale: 1; }
}
@keyframes reward-title-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}
.reward-title-anchor {
    position: absolute;
    top: 14px;
    left: calc(50% - 24px);
    transform: translateX(-50%);
    /* Skal altid vinde over kortene nedenunder — det midterste kort får sit
       eget z-index:1 (se .reward-cards .reward-card:nth-child(2)) for at
       ligge oven på nabo-kortene i det forskudte layout. Delte z-index:1 på
       begge gav uforudsigelig stacking (tie brydes af DOM-rækkefølge, så det
       midterste kort — som kommer SENERE i DOM'en end titlen — vandt og
       lagde sig oven på titlen, mens kort 1/3 uden z-index tabte og endte
       bagved). 5 er rigeligt headroom over kortenes 1. */
    z-index: 5;
}
.reward-title-box {
    display: inline-block;
    background: var(--clr-bg-panel);
    border: 4px solid #000;
    box-shadow: 6px 6px 0px #000;
    padding: 8px 25.6px;
    rotate: -1deg;
    /* IKKE en transition på rotate — se .start-title's kommentar. Hårdt
       spring, ingen tweening, det ER selve "hakket". */
    animation: reward-title-pop-in-scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
               reward-title-float 3.4s ease-in-out infinite 0.3s;
    text-align: center;
}
/* "Juice" pr. reward-type. Holo/enchant genbrugte først Holo Pack-ikonets
   pack-holo-shift-animation (frem-og-tilbage "swing", ease) 1:1 — det virker
   fint på det lille kvadratiske ikon, men på en bred titel-boks bliver
   svinget for langsomt/uroligt at følge. Byttet til samme ÉN-VEJS-teknik som
   Next Round-knappen (shop.css' shop-next-shift — kun background-position,
   ingen farver, så keyframen er delt frit): pastel-cyklussen skrevet ud TO
   gange over en 200%-bred baggrund, animeret lineært i én retning. */
/* animation-shorthand er IKKE additiv på tværs af regler — denne erstatter
   HELE .reward-title-box's animation-liste, ikke kun tilføjer til den. Skal
   derfor eksplicit gentage pop-in+wobble her ved siden af shop-next-shift
   (tre forskellige egenskaber — transform×2 + background-position×1 — så de
   sameksisterer uden konflikt), ellers ville holo-titler miste pop-ind/vippe. */
.reward-title-box--holo {
    background: linear-gradient(90deg,
        #ff9a9e 0%, #fad0c4 12.5%, #a1c4fd 25%, #c2e9fb 37.5%,
        #ff9a9e 50%, #fad0c4 62.5%, #a1c4fd 75%, #c2e9fb 87.5%, #ff9a9e 100%);
    background-size: 200% 100%;
    animation: reward-title-pop-in-scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
               reward-title-float 3.4s ease-in-out infinite 0.3s,
               shop-next-shift 4s linear infinite;
}

/* Resten af den etablerede pack--X-farvekonvention (se shop.css' pakke-
   ikoner) genbrugt på titel-boksen — solid pastel-baggrund, SORT kant
   uændret (alle stickers i spillet holder sig til sort kant, kun baggrunden
   bærer temaet). Ny "mystery"-farve (indigo) og "silver"-farve (kølig grå)
   opfundet her, da ingen af dem havde en etableret farve i forvejen.  */
.reward-title-box--relic     { background: #efe3ff; } /* slammer pack — matcher .pack--relic (lilla) */
.reward-title-box--card      { background: #fff2df; } /* card pack — matcher .pack--card (orange) */
.reward-title-box--uncommon  { background: #e6e6e6; } /* uncommon-garanteret — matcher .pack--uncommon (grå) */
.reward-title-box--rare      { background: #ffe0e0; } /* rare-garanteret — matcher .pack--rare (rød) */
.reward-title-box--mystery   { background: #e2e5f7; } /* mystery — ny indigo-tone */
.reward-title-box--binder    { background: #f0e6d2; } /* binder pack — tan/pap, matcher .pack--binder */
.reward-title-box--gold      { background: #fff3cc; } /* gold chest — matcher --clr-gold */
.reward-title-box--silver    { background: #eceef0; } /* silver chest — ny kølig grå-tone */

.reward-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 19.2px;
    font-weight: 800;
    color: #000;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

/* Cards grid — kolonner er content-brede (samme "tykkelse" som kiste-kortet i
   single-mode) i stedet for 1fr-stræk, så 3-korts-layouts (rewards OG pakker)
   ikke blæser kortene op i fuld bredde på store skærme. */
.reward-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 153.6px));
    justify-content: center;
    gap: 12.8px;
    width: 100%;
    max-width: 588.8px;
    align-items: start;
    /* BEVIDST ingen min-height/overflow her — kortene skal ALDRIG skrumpes
       eller scrolle internt (det gjorde dem ulæselige, se chatten). De
       beholder altid deres fulde, naturlige størrelse. */
}
/* Kiste/mystery — ÉT kort, ikke 3 (reward-chests-draft.md) — ikke strakt ud
   til fuld gridbredde. */
.reward-cards--single {
    grid-template-columns: 1fr;
    max-width: 280px;
    justify-items: center;
}
/* Trækkes mod venstre halvdel på brede nok skærme, så der er plads til at
   capviewer/detail-view popper op til HØJRE for kortet (se
   #cap-detail--side/#slammer-detail--side i modals.css) i stedet for at
   overlappe midt på skærmen oven i et ellers tomt rum. Kun >=720px — på
   mobil er der ikke plads til side-by-side alligevel, så forbliver centreret
   (matcher modals.css' samme breakpoint-guard på selve popup'en).
   Positionen regnes som en FAST afstand fra skærmens midte
   (50vw - --reward-side-half), IKKE en ren vw/clamp-skalering af margenen —
   ellers vokser afstanden til popup'en ubegrænset med skærmbredden (kortet
   presses mod venstre kant, popup'en mod højre kant, og imellem dem opstår
   et stadig større tomrum jo bredere skærmen er). Med en fast afstand fra
   midten centrerer hele kort+popup-parret sig i stedet omkring skærmens
   midte med en KONSTANT indbyrdes afstand, uanset skærmbredde. Det sidste led
   trækker containerens egen venstre-padding fra, så margin-left rammer den
   ønskede ABSOLUTTE position (align-self:flex-start starter jo allerede
   inde efter paddingen). */
@media (min-width: 720px) {
    .reward-cards--single {
        align-self: flex-start;
        margin-left: calc(320px - var(--reward-side-half) - 19.2px);
    }
}
/* Der er altid præcis ét .reward-card i single-mode. */
.reward-cards--single .reward-card { --rot: 1deg; }

/* Point-udfald i en kiste — stort tal i stedet for et billede */
.reward-points-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 51.2px;
    font-weight: 800;
    color: #f5c842;
    text-shadow: 2px 2px 0 #000;
    align-self: center;
    margin: 8px 0;
}

/* Mystery bytte/opgradering — viser begge sider af et "før → efter" */
.reward-swap-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
}
.reward-swap-arrow {
    font-size: 20px;
    opacity: 0.7;
    flex-shrink: 0;
}
.reward-rarity-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border: 3px solid #000;
    white-space: nowrap;
}
.reward-rarity-pill--common   { background: #000;    color: #fff; }
.reward-rarity-pill--uncommon { background: #5d5f5f; color: #fff; }

/* Mystery-kort-udfald (gum-card ikon uden hele pakke-visningen) */
.reward-mystery-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 3px solid #000;
    align-self: center;
    margin: 8px 0;
}

/* Per-card scattered rotation + lodret forskydning via CSS custom properties —
   kortene skal stå let forskudt/skævt (sticker-æstetik), ikke snorlige. */
.reward-card {
    --rot: 0deg;
    --ty: 0px;
    position: relative;
    background: var(--clr-bg-panel);
    border: 4px solid #000;
    box-shadow: 8px 8px 0px #000;
    padding: 12.8px 12.8px 9.6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transform: rotate(var(--rot)) translateY(var(--ty));
    transition: box-shadow 0.1s, transform 0.1s;
    text-align: left;
}
.reward-card:hover  { box-shadow: 4px 4px 0px #000; transform: rotate(var(--rot)) translateY(calc(var(--ty) - 4px)); }
.reward-card:active { box-shadow: none;              transform: rotate(var(--rot)) translateY(calc(var(--ty) + 4px)); }

.reward-cards .reward-card:nth-child(1) { --rot:  2deg; --ty:  8px; }
.reward-cards .reward-card:nth-child(2) { --rot: -1deg; --ty: -5px; z-index: 1; }
.reward-cards .reward-card:nth-child(3) { --rot:  3deg; --ty: 12px; }

/* Rarity badge */
.reward-rarity {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.7px;
    font-weight: 700;
    padding: 3px 8px;
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
}
/* COMMON + UNCOMMON → top-left */
.reward-rarity--common,
.reward-rarity--uncommon { top: -12px; left: -10px; transform: rotate(-4deg); }
/* RARE + LEGENDARY → top-right */
.reward-rarity--rare,
.reward-rarity--legendary { top: -12px; right: -10px; left: auto; transform: rotate(5deg); }

.reward-rarity--common    { background: #000;            color: #fff; }
.reward-rarity--uncommon  { background: #5d5f5f;         color: #fff; }
.reward-rarity--rare      { background: var(--clr-red);  color: #fff; }
.reward-rarity--legendary { background: #f5c842;          color: #000; }

/* Cap image — larger, spin on card hover.
   INGEN pointer-events:none her — ikonet er selve klik-målet for "inspektion
   før valg" (ikon = detail-viewer, PICK-knap = commit). pointer-events:none
   gjorde at klik faldt igennem til det døde kort på alle kort hvor billedet
   er en BAR <img> (slammere, kiste-slammere) — caps virkede kun fordi
   capThumbnailHTML's .cap-enchant-wrap-wrapper fangede klikket i stedet. */
.reward-cap-img {
    width: 83.2px;
    height: 83.2px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #000;
    align-self: center;
    cursor: pointer;
    flex-shrink: 0;
}
.reward-card .cap-enchant-wrap { transition: transform 0.5s; align-self: center; }
.reward-card:hover .cap-enchant-wrap { transform: rotate(15deg); }

/* Cap name with border-bottom separator — bruges STANDALONE (slammere/point-
   udfald, ingen serie) med sin egen fulde bredde+underline. Når navnet i
   stedet sidder i en .reward-cap-name-row (cap-kort med serie-pille ved
   siden af), overskrives border/bredde nedenfor — rækken selv bærer
   underlinen i stedet, så den stadig spænder under BÅDE navn og pille. */
.reward-cap-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    pointer-events: none;
    width: 100%;
    border-bottom: 4px solid #000;
    padding-bottom: 4px;
    margin-bottom: 2px;
}

/* Navn + serie-pille på ÉN linje i stedet for serien på sin egen linje under
   — sparer en hel tekstlinjes højde pr. kort (mindsker risikoen for at kort
   klipper ud af bunden på reward-skærme). Samme farve-opskrift som capviewer's
   #cap-detail-series-pill (se seriesDefs.js's seriesPillHTML()). */
.reward-cap-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    border-bottom: 4px solid #000;
    padding-bottom: 4px;
    margin-bottom: 2px;
}
.reward-cap-name-row .reward-cap-name {
    width: auto;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.reward-series-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border: 1px solid;
    border-radius: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    pointer-events: none;
}

/* ── Gum card variant in pack-open ──────────────────────────────────────── */
.reward-card--gumcard {
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    gap: 0;
}

.gum-pack-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.gum-pack-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    flex: 1;
    padding: 0 12.8px 8px;
}

.gum-pack-header {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 14.1px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 9.6px 12px;
    flex-shrink: 0;
}

/* Ikon = klik-mål for "inspicér i sikker popup" (ligesom .reward-cap-img for
   caps), derfor cursor:pointer her — resten af kortet reagerer ikke på klik. */
.gum-pack-icon {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    text-align: center;
    padding: 12px 0 6px;
    align-self: center;
    cursor: pointer;
}

.gum-pack-flavor {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    color: #000;
    opacity: 0.45;
    padding: 6px 0 4px;
    width: 100%;
}

.gum-pack-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.2px;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: center;
    padding: 6px 12.8px;
    flex: 1;
}

.gum-pack-footer {
    display: flex;
    justify-content: center;
    padding: 8px;
}

.gum-pack-footer .reward-quick-pick {
    margin: 0;
}

.reward-effect {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: #000;
    background: #f5c842;
    border: 2px solid #000;
    padding: 2px 7px;
    pointer-events: none;
    font-weight: 700;
    align-self: flex-start;
}
/* Passiv-variant — samme facon som ability-badgen, teal i stedet for guld, så
   ability (cap) og passiv (slammer) aldrig kan forveksles visuelt. */
.reward-effect--passive { background: #2e8fa3; color: #fff; }

/* Quick pick sticker */
.reward-quick-pick {
    margin-top: auto;
    align-self: flex-start;
    background: #000;
    color: #fff;
    border: 2px solid #000;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transform: rotate(-1deg);
    transition: box-shadow 0.08s, transform 0.08s;
}
.reward-quick-pick:hover  { box-shadow: 3px 3px 0px #000; transform: rotate(-1deg) translate(-1px,-1px); }
.reward-quick-pick:active { box-shadow: none;              transform: rotate(-1deg) translate(2px,2px);   }

/* Relic variant */
.reward-card--relic { justify-content: flex-start; gap: 4px; }
.reward-relic-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 2px;
    pointer-events: none;
    align-self: center;
}
.reward-relic-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.2px;
    color: var(--text-secondary);
    pointer-events: none;
    line-height: 1.4;
    width: 100%;
}

/* Enchant reward variant */

/* "Hvad bliver den til?"-crossfade: to identiske cap-thumbnails (nuværende
   udseende + med den nye enchant) stacket oldenpå hinanden via CSS grid,
   krydsblændet med opacity-animation i stedet for et side-om-side "før→efter"-
   layout (som mystery-rewardens transform-result-img bruger) — der er ikke
   plads til det i et 3-korts grid. --preview-delay (sat pr. kort i JS)
   forskyder de 3 korts cyklusser indbyrdes, så de ikke blinker samtidig. */
.reward-enchant-preview {
    display: grid;
    align-self: center;
}
.reward-enchant-preview-layer { grid-area: 1 / 1; }
.reward-enchant-preview-layer--before {
    animation: reward-enchant-crossfade-before 5.2s ease-in-out infinite;
    animation-delay: var(--preview-delay, 0ms);
}
.reward-enchant-preview-layer--after {
    animation: reward-enchant-crossfade-after 5.2s ease-in-out infinite;
    animation-delay: var(--preview-delay, 0ms);
}
@keyframes reward-enchant-crossfade-before {
    0%, 38.5%  { opacity: 1; }
    50%, 88.5% { opacity: 0; }
    100%       { opacity: 1; }
}
@keyframes reward-enchant-crossfade-after {
    0%, 38.5%  { opacity: 0; }
    50%, 88.5% { opacity: 1; }
    100%       { opacity: 0; }
}

.reward-enchant-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
    width: 100%;
    border-bottom: 4px solid #000;
    padding-bottom: 4px;
    margin-bottom: 2px;
    /* Pulserer i takt med .reward-enchant-preview-layer--after ovenfor —
       samme cyklus/forskydning, så øjet kobler "badgen lyser op" sammen med
       "billedet viser nu holo-udgaven". */
    animation: reward-enchant-name-pulse 5.2s ease-in-out infinite;
    animation-delay: var(--preview-delay, 0ms);
}
@keyframes reward-enchant-name-pulse {
    0%, 38.5%  { opacity: 0.6; text-shadow: none; }
    50%, 88.5% { opacity: 1;   text-shadow: 0 0 6px currentColor; }
    100%       { opacity: 0.6; text-shadow: none; }
}

.reward-enchant-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    color: var(--text-secondary);
    pointer-events: none;
    line-height: 1.4;
    width: 100%;
}

.reward-enchant-replace {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.7px;
    color: var(--text-muted);
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.18);
    padding: 2px 6px;
    pointer-events: none;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Entrance animation — includes --rot so hover still works after animation */
@keyframes reward-card-in {
    from { opacity: 0; transform: rotate(var(--rot)) scale(0.5) translateY(12px); }
    55%  { opacity: 1; transform: rotate(var(--rot)) scale(1.08) translateY(-3px); }
    75%  { transform: rotate(var(--rot)) scale(0.97) translateY(1px); }
    100% { opacity: 1; transform: rotate(var(--rot)) scale(1) translateY(0); }
}
.reward-card--entering {
    opacity: 0;
    animation: reward-card-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}