/* ─── BOSS SHOP SCREEN ────────────────────────────────────────────────────── */
#boss-shop-screen {
    /* inset:0 alene fylder #ui-scale-root helt ud — se #map-screen's
       kommentar for hvorfor vw/vh IKKE skal bruges her. */
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    background-image: var(--bg-dot-grid);
    background-size: var(--bg-dot-size);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.boss-shop-inner {
    width: 100%;
    max-width: 780px;
    max-height: 100%;
    overflow-y: auto;
    /* Toppen skal kun cleare Next-knappen — nogenlunde samme fodaftryk som
       Shards-pillen havde der før byttet, så den oprindelige lille top-
       padding er stadig rigtig. BUNDEN skal nu derimod cleare BÅDE Shards-
       pillen OG consumable-slots-baren (#consumable-slots, permanent bund-
       højre til venstre for Shards, se consumables.css) — de sidder side om
       side dernede nu i stedet for kun Continue-knappen alene, så bunden
       beholder den STORE padding (samme værdi som Continue-knappen krævede
       tidligere, tilfældigvis næsten identisk fodaftryk). */
    /* Faste referenceopløsnings-px (640×360) i stedet for vw/vh — #ui-scale-root
       står allerede for at skalere hele UI'et proportionalt til den ægte skærm. */
    padding: 16px 24px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.boss-shop-title-sticker {
    background: #2a1414;
    border: 4px solid #7a1f28;
    box-shadow: 6px 6px 0px #4a1015;
    padding: 8px 26px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 19.2px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ff8888;
    transform: rotate(-2deg);
}

/* Overtager score-stickerens faste bund-højre-plads (BossShopScreen skjuler
   #score-display eksplicit mens denne skærm er aktiv — 0★ er meningsløst
   her, scoren nulstilles jo allerede ved selve boss-kampens start). Byttet
   plads med Next-knappen (se .boss-shop-continue-btn) — Shards er ikke en
   handling, så den hører hjemme dernede, ikke oppe ved burger-menuen. */
.boss-shop-balance {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 210;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.8px;
    font-weight: 800;
    color: #000;
    background: var(--clr-bg-panel);
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    padding: 4px 12px;
    transform: rotate(1deg);
}
.boss-shop-balance span { color: #7a1f28; }

/* ── Skrå bånd — genbruger shop.css' band-klasser (.shop-band/.band-item/
   .band-price-tag/.band-effect-sticker) så boss-shoppen deler visuelt sprog
   med den almindelige shop. Kun temaet (mørkerødt bånd) og layout-afstande
   er boss-specifikke. Én række med 5 caps, én med 3 slammere. */
.boss-shop-band-row {
    width: 100%;
    max-width: 640px;
    /* Rigelig plads til caps der stikker op over båndet (top) OG til pris-
       tags + info-stickers der hænger under det (band-price-tag -14px,
       band-effect-sticker helt ned til -48px) — for stramt før kolliderede
       synligt med rækken nedenunder. Begge rækker får samme margin, da
       slammer-billeder stikker lige så meget op som cap-billeder. */
    margin-top: 22px;
    margin-bottom: 56px;
}

.boss-shop-band {
    background: #2a1414;
    border-color: #7a1f28;
}
/* Slammer-rækken hælder den anden vej end cap-rækken for sticker-æstetikken */
.boss-shop-band-row--slammers .boss-shop-band { transform: rotate(2deg); }

/* Flyttet op til toppen, mellem titel-skiltet og pause/burger-ikonet
   (#pause-btn sidder fast top:16px right:16px, 40px bred) — samme placering
   som Skip-knappen bruger i reward-skærmene (top:14px right:70px), så det
   opfører sig som en genkendelig top-højre primær handling i stedet for at
   dele plads med Shards-visningen. */
.boss-shop-continue-btn {
    position: fixed;
    top: 16px;
    right: 68px;
    z-index: 210;
    padding: 10px 22px;
    background: #000;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: 4px solid #000;
    box-shadow: var(--shadow-raised);
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: box-shadow 0.08s, transform 0.08s;
}
.boss-shop-continue-btn:active {
    box-shadow: var(--shadow-pressed);
    transform: translate(3px, 3px);
}