/* ─── HJÆLP-MODAL ─────────────────────────────────────────────────────────── */
#help-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-modal);
    z-index: 400;
    align-items: center;
    justify-content: center;
}
#help-modal.open { display: flex; }

#help-modal-inner {
    position: relative;
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    padding: 24px 24px 20px;
    /* Faste referenceopløsnings-px (640×360) i stedet for vw/vh — #ui-scale-root
       skalerer nu hele UI'et til den ægte skærm, så vw/vh her ville dobbelt-skalere. */
    width: 440px;
    max-height: 312px;
    overflow-y: auto;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.55;
    border-radius: 0;
    transform: rotate(-1deg);
}
#help-modal-inner h2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: 0.03em;
}

#help-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: var(--clr-bg-deeper, #f0f0f0);
    border: 2px solid var(--border-ink);
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    transition: box-shadow 0.08s, transform 0.08s;
}
#help-close:hover {
    box-shadow: var(--shadow-pressed);
    transform: translate(2px, 2px);
}

.help-section {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-hairline);
}
.help-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.help-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    margin-top: 1px;
}
.help-section strong {
    display: block;
    color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}
.help-section p  { color: var(--text-secondary); font-size: 13px; margin: 0; }
.help-section ul { color: var(--text-secondary); font-size: 13px; margin: 6px 0 0 16px; }
.help-section li { margin-bottom: 2px; }
.help-tip {
    margin-top: 8px !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}
.pwr-green  { color: var(--clr-green);    font-weight: 700; }
.pwr-yellow { color: var(--clr-gold-dark); font-weight: 700; }
.pwr-red    { color: var(--clr-red);      font-weight: 700; }

.help-power-section { align-items: center; }
.help-power-demo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}
#help-power-bar {
    width: 18px;
    height: 90px;
    border: 3px solid var(--border-ink);
    background: linear-gradient(to top, #cc2222 0%, #e8b800 50%, #22aa44 100%);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
#help-power-fill {
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(249, 249, 249, 0.92);
    animation: help-bar-oscillate 2.5s ease-in-out infinite;
}

/* ─── DETAIL BACKDROP ─────────────────────────────────────────────────────── */
/* Delt dæmpnings-lag bag cap/slammer/relic-detail — de tre popups er gensidigt
   udelukkende (kun én kan være åben ad gangen), så ét baggrundslag er nok.
   Samme --overlay-modal-token som help-modal/shop-pack-overlay/collection, så
   det visuelt matcher resten af spillets "dæmp alt andet"-mønster. Vises/
   skjules centralt i UIManager (_setDetailBackdrop) sammen med selve popup'en
   — også fra de knapper der lukker popup'en direkte (BUY/PICK/TAKE/Sell),
   ikke kun fra klik-udenfor. z-index under selve popup'en (300) men over alt
   andet, så det dækker den skærm popup'en er åbnet fra (reward/shop/boss-shop/
   collection) uanset hvilken det er. */
/* opacity+visibility (IKKE display:none/block) — giver en blød fade i stedet
   for et instant spring, uden at kræve JS-timede setTimeout'er. visibility
   forsinkes KUN på vej ud (0.18s), så elementet forbliver klikbart/synligt
   gennem hele fade-out'en, men bliver ikke-interaktivt med det samme via
   pointer-events (ingen forsinkelse der) — undgår at et hurtigt dobbeltklik
   rammer en popup der visuelt er ved at forsvinde. */
#detail-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-modal);
    z-index: 295;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
#detail-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, visibility 0s linear 0s;
}

/* ─── CAP DETAIL ──────────────────────────────────────────────────────────── */
#cap-detail {
    position: fixed;
    left: 50%; top: 50%;
    /* --detail-rot sættes med en ny tilfældig vinkel af UIManager._showCapDetail()
       hver gang popup'en åbnes (2-3° til en tilfældig side) — fallback -1deg.
       scale(0.72) var oprindeligt kun i @media (max-height:520px) for at undgå
       at popup'en klippede top/bund på korte ÆGTE viewports (fx mobil-
       landscape) — men nu lever popup'en altid i #ui-scale-root's faste
       360px-høje referenceboks uanset ægte skærmstørrelse, så "kort viewport"
       ikke længere er betinget af den ægte skærm. Gjort permanent i stedet. */
    transform: translate(-50%, -50%) rotate(var(--detail-rot, -1deg)) scale(0.72);
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    padding: 20px;
    z-index: 300;
    text-align: center;
    min-width: 180px;
    border-radius: 0;
    /* Blød fade i stedet for instant display:none/block — se #detail-backdrop's
       kommentar for hvorfor opacity+visibility fremfor display bruges. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}
#cap-detail.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.16s ease, visibility 0s linear 0s;
}
.cap-viewer-wrap {
    position: relative;
    display: inline-block;
    margin: 10px auto 0;
}
#cap-viewer-container {
    width: 220px;
    height: 220px;
    border: 2px solid var(--border-ink);
    overflow: hidden;
    cursor: grab;
    background: #f0f0f0;
    display: block;
}
#cap-viewer-container:active { cursor: grabbing; }
#cap-detail-action {
    position: absolute;
    bottom: -14px; right: -14px;
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 700;
    line-height: 1.3; text-align: center;
    padding: 7px 16px; cursor: pointer;
    transform: rotate(2deg);
    transition: box-shadow 0.08s, transform 0.08s;
    z-index: 1;
}
#cap-detail-action:hover {
    box-shadow: 5px 5px 0px #000;
    transform: rotate(2deg) translate(-1px, -1px);
}
#cap-detail-action:active {
    box-shadow: 1px 1px 0px #000;
    transform: rotate(2deg) translate(2px, 2px);
}
/* Navn + serie-pille — SAMME linje, navn dominerende, serie dæmpet støtte */
.cap-detail-name-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
#cap-detail-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}
/* border-radius:0 — matcher spillets øvrige hård-kant/sticker-æstetik (rarity-
   badge, ability-box, alle knapper) i stedet for en blødere afrundet "chip". */
.cap-detail-series-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    padding: 1px 7px;
    border-radius: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* Delt ability/enchant-boks (abilityBox.js) */
.ability-box {
    margin-top: 8px;
    background: var(--clr-bg-panel);
    border: 2px solid var(--border-ink);
    border-left-width: 6px;
    border-left-style: solid;
    padding: 6px 9px;
    text-align: left;
}
.ability-box-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.ability-box-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    color: var(--text-primary);
    line-height: 1.35;
    margin-top: 2px;
}

/* Enchant-forhåndsvisning der erstatter en eksisterende enchant — gammel og
   ny boks SIDE OM SIDE med en pil imellem (ikke stablet ovenpå hinanden).
   Spillet spilles kun i landscape, så bredde er den rigelige ressource og
   højde den knappe — en vandret række koster næsten ingen ekstra højde i
   forhold til at vise ét enkelt enchant, i modsætning til en stablet
   version. #cap-detail har ingen max-width, så popup'en vokser naturligt i
   bredden for at rumme rækken. */
.cap-detail-enchant-compare {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 360px;
    margin: 8px auto 0;
}
.cap-detail-enchant-compare-box {
    flex: 1 1 0;
    min-width: 0;
}
.cap-detail-enchant-compare-box .ability-box { margin-top: 0; height: 100%; }
.cap-detail-enchant-compare-arrow {
    align-self: center;
    font-size: 16px;
    opacity: 0.6;
    flex-shrink: 0;
}
.ability-box--replaced {
    opacity: 0.55;
    border-style: dashed;
}
.ability-box--replaced .ability-box-name { text-decoration: line-through; }

/* Modvirker scale(0.72)-nedskaleringen af #cap-detail/#slammer-detail (se
   deres transform-kommentar) ved at kompensere med en STØRRE base-størrelse,
   så det VISUELT rendrede resultat efter skalering forbliver læsbart
   (10px × 0.72 ≈ 7.2px er for lille — 13px × 0.72 ≈ 9.4px, tæt på normal
   størrelse). Scoped til de to popups — .ability-box bruges ikke andre
   steder, men undgår alligevel at gøre den delte base-klasse selv forkert
   hvis den en dag genbruges uden den nedskalering. */
#cap-detail .ability-box-desc, #slammer-detail .ability-box-desc { font-size: 13px; }
#cap-detail .ability-box-name, #slammer-detail .ability-box-name { font-size: 11px; }

.cap-detail-extra-base {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: #f5c842;
    text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
    vertical-align: middle;
    margin-left: 3px;
}

#cap-detail-rarity {
    display: none;
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 11px;
    border: 3px solid #000;
    top: -16px; left: -14px;
    transform: rotate(-4deg);
}
#cap-detail-rarity.rarity--common    { display: block; background: #000;            color: #fff; }
#cap-detail-rarity.rarity--uncommon  { display: block; background: #5d5f5f;         color: #fff; }
#cap-detail-rarity.rarity--rare      { display: block; background: var(--clr-red);  color: #fff; top: -16px; right: -14px; left: auto; transform: rotate(4deg); }
#cap-detail-rarity.rarity--legendary { display: block; background: #f5c842;         color: #000; top: -16px; right: -14px; left: auto; transform: rotate(4deg); }

#slammer-detail-rarity {
    display: none;
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 11px;
    border: 3px solid #000;
    top: -16px; left: -14px;
    transform: rotate(-4deg);
}
#slammer-detail-rarity.rarity--common    { display: block; background: #000;            color: #fff; }
#slammer-detail-rarity.rarity--uncommon  { display: block; background: #5d5f5f;         color: #fff; }
#slammer-detail-rarity.rarity--rare      { display: block; background: var(--clr-red);  color: #fff; top: -16px; right: -14px; left: auto; transform: rotate(4deg); }
#slammer-detail-rarity.rarity--legendary { display: block; background: #f5c842;         color: #000; top: -16px; right: -14px; left: auto; transform: rotate(4deg); }

/* ─── RELIC / CARD DETAIL ────────────────────────────────────────────────── */
#relic-detail {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(1deg);
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    padding: 20px;
    z-index: 300;
    text-align: center;
    width: 220px;
    border-radius: 0;
    /* Samme blød fade-mønster som #cap-detail — se dens kommentar. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}
#relic-detail.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.16s ease, visibility 0s linear 0s;
}
#relic-detail-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 10px;
}
#relic-detail-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
#relic-detail-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.5;
}
#relic-detail-action {
    margin-top: 14px;
    display: block;
    width: 100%;
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 700;
    padding: 8px 16px; cursor: pointer;
    transform: rotate(-1deg);
    transition: box-shadow 0.08s, transform 0.08s;
}
#relic-detail-action:hover {
    box-shadow: 5px 5px 0px #000;
    transform: rotate(-1deg) translate(-1px, -1px);
}
#relic-detail-action:active {
    box-shadow: 1px 1px 0px #000;
    transform: rotate(-1deg) translate(2px, 2px);
}

/* ─── SLAMMER DETAIL ──────────────────────────────────────────────────────── */
#slammer-detail {
    position: fixed;
    left: 50%; top: 50%;
    /* --detail-rot sættes med en ny tilfældig vinkel af UIManager._showSlammerDetail()
       hver gang popup'en åbnes (2-3° til en tilfældig side) — fallback 1deg.
       scale(0.72) gjort permanent — se #cap-detail's kommentar for hvorfor. */
    transform: translate(-50%, -50%) rotate(var(--detail-rot, 1deg)) scale(0.72);
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    padding: 20px;
    z-index: 300;
    text-align: center;
    min-width: 180px;
    border-radius: 0;
    /* Samme blød fade-mønster som #cap-detail — se dens kommentar. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}
#slammer-detail.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.16s ease, visibility 0s linear 0s;
}
.slammer-viewer-wrap {
    position: relative;
    display: inline-block;
    margin: 10px auto 0;
}
#slammer-viewer-container {
    width: 220px;
    height: 220px;
    border: 2px solid var(--border-ink);
    overflow: hidden;
    cursor: grab;
    background: #f0f0f0;
    display: block;
}
#slammer-viewer-container:active { cursor: grabbing; }
/* Generisk action-knap på slammer-detail — parallel til #cap-detail-action,
   bruges når slammeren inspiceres FØR et valg (reward/shop), i modsætning til
   #slammer-equip-btn/#slammer-sell-btn's faste hjørne-knapper (Collection-
   brug) — de tre deler samme hjørne-mønster men vises aldrig samtidig
   (action= vs. showEquip=true er gensidigt udelukkende). */
#slammer-detail-action {
    position: absolute;
    bottom: -14px; right: -14px;
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 700;
    line-height: 1.3; text-align: center;
    padding: 7px 16px; cursor: pointer;
    transform: rotate(2deg);
    transition: box-shadow 0.08s, transform 0.08s;
    z-index: 1;
}
#slammer-detail-action:hover {
    box-shadow: 5px 5px 0px #000;
    transform: rotate(2deg) translate(-1px, -1px);
}
#slammer-detail-action:active {
    box-shadow: 1px 1px 0px #000;
    transform: rotate(2deg) translate(2px, 2px);
}
#slammer-detail-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
#slammer-detail-stats {
    margin: 10px auto 0;
}
/* Genbruger .ability-box/.ability-box-name/.ability-box-desc fra cap-detail-
   redesignet (modals.css) uændret — se den opgave for definitionen. */
#slammer-detail-passive-slot { margin: 8px auto 0; }

/* Sell — spejlvendt venstre-hjørne-variant af #slammer-detail-action. Samme
   visuelle sprog (sticker-boks på vieweren), modsat hjørne, så Equip (højre) og
   Sell (venstre) aldrig kan kollidere selvom begge er synlige samtidig. */
#slammer-sell-btn {
    position: absolute;
    bottom: -14px; left: -14px;
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700;
    padding: 7px 14px; cursor: pointer;
    transform: rotate(-2deg);
    transition: box-shadow 0.08s, transform 0.08s;
    background: var(--clr-red);
    color: #fff;
    z-index: 1;
}
#slammer-sell-btn:hover  { box-shadow: 5px 5px 0px #000; transform: rotate(-2deg) translate(1px, -1px); }
#slammer-sell-btn:active { box-shadow: 1px 1px 0px #000; transform: rotate(-2deg) translate(2px, 2px); }

/* Equip — deler hjørne med #slammer-detail-action (generisk PICK/BUY), men de
   to er aldrig synlige samtidig (action= vs. showEquip=true er gensidigt
   udelukkende i _showSlammerDetail, verificeret på tværs af alle kaldesteder). */
#slammer-equip-btn {
    position: absolute;
    bottom: -14px; right: -14px;
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700;
    padding: 7px 14px; cursor: pointer;
    transform: rotate(2deg);
    transition: box-shadow 0.08s, transform 0.08s;
    background: #000;
    color: #fff;
    z-index: 1;
}
#slammer-equip-btn:hover  { box-shadow: 5px 5px 0px #000; transform: rotate(2deg) translate(-1px, -1px); }
#slammer-equip-btn:active { box-shadow: 1px 1px 0px #000; transform: rotate(2deg) translate(2px, 2px); }

#slammer-equip-btn:disabled {
    background: var(--clr-bg-darker);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    box-shadow: none;
    cursor: default;
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: 'Space Grotesk', sans-serif;
    width: 62px;
    text-align: left;
}
.stat-pips { display: flex; gap: 4px; }
.stat-pip {
    width: 16px;
    height: 8px;
    border-radius: 0;
    background: var(--bg-dot-grid, #e2e2e2);
    border: 1px solid var(--border-subtle);
}
.stat-pip.filled {
    background: #f5c842;
    border-color: #000;
}