/* ─── SHOP SCREEN ─────────────────────────────────────────────────────────── */
#shop-screen {
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    background-image: var(--bg-dot-grid);
    background-size: var(--bg-dot-size);
    z-index: 200;
    overflow: hidden;
}

.shop-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* 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. */
    gap: 8px;
    padding: 24px 16px 8px;
    box-sizing: border-box;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* ── SHOP titel ───────────────────────────────────────────────────────────── */
.shop-title-sticker {
    align-self: center;
    background: var(--clr-bg-panel);
    border: 4px solid #000;
    box-shadow: var(--shadow-sticker);
    padding: 6px 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 19.2px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    color: #000;
    white-space: nowrap;
}

/* ── 2-kolonne grid: venstre (band+packs) og højre (actions) ─────────────── */
.shop-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 178px;
    gap: 12px;
    align-items: stretch;
    min-height: 0;
}

/* ── VENSTRE: band-række + pack-kort under ────────────────────────────────── */
.shop-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Band-række: reroll-knap overlapper let med bandets venstre kant */
.shop-band-row {
    display: flex;
    align-items: center;
    gap: 0;   /* ingen gap — reroll "smelter" mod bandet */
    margin-top: 16px; /* kompenserer for caps der stikker op over båndet */
}

#shop-reroll-btn {
    flex-shrink: 0;
    width: 54px;
    height: 64px;
    background: var(--clr-bg-panel);
    border: 4px solid #000;
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transform: rotate(3deg);
    transition: box-shadow 0.08s, transform 0.1s;
    padding: 6px;
    position: relative;
    z-index: 1;        /* over bandet */
    margin-right: -12px; /* overlapper let ind over bandets venstre kant */
}
#shop-reroll-btn:active {
    box-shadow: var(--shadow-pressed);
    transform: rotate(3deg) translate(3px, 3px);
}
#shop-reroll-btn.cant-afford { opacity: 0.28; cursor: default; pointer-events: none; }
.reroll-icon { font-size: 20px; font-weight: 700; color: #000; line-height: 1; }
.reroll-cost { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; color: #000; }

/* Sort diagonal band */
.shop-band {
    flex: 1;
    min-width: 0;
    background: #000;
    border: 4px solid #000;
    box-shadow: var(--shadow-sticker);
    padding: 0 10px;
    height: 56px;
    position: relative;
    overflow: visible;
    transform: rotate(-3deg);
    display: flex;
    align-items: center;
}
.shop-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.07) 10px, rgba(255,255,255,0.07) 20px);
    pointer-events: none;
}

.shop-band-items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 9.6px;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Pack-kort — horisontalt, max bredde så de ikke spænder hele venstre kolonne */
.shop-packs {
    display: flex;
    gap: 12px;
    margin-top: auto;  /* altid i bunden af venstre kolonne uanset band-indhold */
}

.shop-pack {
    flex: 0 1 192px;  /* aldrig bredere end 260px */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: var(--clr-bg-panel);
    border: 4px solid #000;
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.08s, transform 0.1s;
}
.shop-pack:nth-child(odd)  { transform: rotate(-1deg); }
.shop-pack:nth-child(even) { transform: rotate(1deg);  }
.shop-pack:active { box-shadow: var(--shadow-pressed); transform: translate(3px, 3px); }
.shop-pack.cant-afford { opacity: 0.32; cursor: default; pointer-events: none; }
.shop-pack.bought      { opacity: 0.20; cursor: default; pointer-events: none; }

.pack-icon-box {
    width: 40px;
    height: 46px;
    background: var(--clr-bg-darker);
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transform: rotate(-3deg);
    position: relative;
    overflow: hidden;
}
.pack-icon-box::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background: repeating-linear-gradient(-45deg, transparent, transparent 5px, #000 5px, #000 10px);
}
.pack-icon-box .pack-icon-emoji { position: relative; z-index: 1; }
.pack--relic .pack-icon-box {
    background: rgba(185,133,255,0.15);
    border-color: var(--clr-purple);
    box-shadow: 3px 3px 0px var(--clr-purple-dark);
}

.pack-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.pack-type {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    white-space: nowrap;
}
.pack--relic .pack-type { color: var(--clr-purple); }
.pack-hint {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.pack-price {
    background: var(--clr-bg-panel);
    border: 2px solid #000;
    box-shadow: 2px 2px 0px #000;
    padding: 1px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    transform: rotate(2deg);
    display: inline-block;
    margin-top: 2px;
    color: #000;
}
.pack--relic .pack-price {
    border-color: var(--clr-purple);
    box-shadow: 2px 2px 0px var(--clr-purple-dark);
    color: var(--clr-purple);
}
.pack--card .pack-icon-box {
    background: var(--clr-bg-darker);
    border-color: #c87f00;
    box-shadow: 3px 3px 0px #8b5a00;
}

.pack-icon-box--gumstack {
    overflow: visible; /* let rotated cards peek out slightly */
}

.mini-gum-card {
    position: absolute;
    width: 22px;
    height: 30px;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    top: 50%;
    left: 50%;
}
.pack--card .pack-type { color: #c87f00; }
.pack--card .pack-price {
    border-color: #c87f00;
    box-shadow: 2px 2px 0px #8b5a00;
    color: #c87f00;
}

/* Uncommon-garanteret pack — matcher rarity--uncommon farven brugt i cap/slammer-detail */
.pack--uncommon .pack-icon-box {
    background: rgba(93,95,95,0.15);
    border-color: #5d5f5f;
    box-shadow: 3px 3px 0px #3a3b3b;
}
.pack--uncommon .pack-type  { color: #5d5f5f; }
.pack--uncommon .pack-price {
    border-color: #5d5f5f;
    box-shadow: 2px 2px 0px #3a3b3b;
    color: #5d5f5f;
}

/* Rare-garanteret pack (caps eller slammers) — matcher rarity--rare farven */
.pack--rare .pack-icon-box {
    background: rgba(211,47,47,0.12);
    border-color: var(--clr-red);
    box-shadow: 3px 3px 0px #7a1f1f;
}
.pack--rare .pack-type  { color: var(--clr-red); }
.pack--rare .pack-price {
    border-color: var(--clr-red);
    box-shadow: 2px 2px 0px #7a1f1f;
    color: var(--clr-red);
}

/* Holo pack — alle 3 valg garanteret enchantede, shimmer-baggrund så den skiller sig ud */
.pack--holo .pack-icon-box {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #ff9a9e);
    background-size: 300% 300%;
    animation: pack-holo-shift 3s ease infinite;
    border-color: #000;
}
.pack--holo .pack-type { color: #7722cc; }
@keyframes pack-holo-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Binder pack — tan/brun (Pap-tierens farve som "default" for selve
   pakke-ikonet i shop-listen, før den er åbnet og man ser den faktiske tier) */
.pack--binder .pack-icon-box {
    background: rgba(176,141,87,0.15);
    border-color: #b08d57;
    box-shadow: 3px 3px 0px #6b3f2a;
}
.pack--binder .pack-type  { color: #6b3f2a; }
.pack--binder .pack-price {
    border-color: #b08d57;
    box-shadow: 2px 2px 0px #6b3f2a;
    color: #6b3f2a;
}

.pack-choice--card .pack-relic-icon {
    font-size: 32px;
    text-align: center;
    margin-bottom: 4px;
}

/* ── Band items ── kompakt slots ─────────────────────────────────────────── */
.band-item {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
}
/* Fjernet hvid firkant-boks — cirkel-cap vises direkte */
.band-slot-box {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.band-cap-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #000;
    box-shadow: 4px 4px 0px #000;
    cursor: pointer;
    display: block;
    transition: box-shadow 0.08s, transform 0.1s;
}
.band-cap-img:hover  { box-shadow: 2px 2px 0px #000; transform: translateY(3px); }
.band-cap-img:active { box-shadow: none; transform: translateY(4px); }
button.band-price-tag {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    background: var(--clr-bg-panel);
    border: 2px solid #000;
    box-shadow: 2px 2px 0px #000;
    padding: 3px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    z-index: 2;
    color: #000;
    transition: box-shadow 0.08s, transform 0.08s;
}
button.band-price-tag:active {
    box-shadow: 1px 1px 0px #000;
    transform: translateX(-50%) rotate(-2deg) translate(1px, 1px);
}
button.band-price-tag.cant-afford {
    background: var(--clr-bg-darker);
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
}
/* Ability-navn under pris-skiltet — under artworket i stedet for oven på det. */
.band-effect-sticker {
    position: absolute;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%);
    background: #f5c842;
    color: #000;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 9px;
    line-height: 1.6;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 1;
}
/* Passiv-variant (slammer, kun Boss Shop's slammer-række) — teal i stedet for
   guld, samme princip som .reward-effect--passive/.col-badge.passive. */
.band-effect-sticker--passive { background: #2e8fa3; color: #fff; }
.band-price-tag.band-sold-label {
    background: #444;
    color: #aaa;
    border-color: #444;
    box-shadow: 1px 1px 0px #222;
    font-size: 9px;
    cursor: default;
}
.band-item.sold .band-slot-box       { opacity: 0.18; box-shadow: 1px 1px 0px #555; cursor: default; }
.band-item.sold .band-slot-box:hover { box-shadow: 1px 1px 0px #555; transform: none; }

.band-item:nth-child(1) .band-cap-img { transform: rotate(2deg);  }
.band-item:nth-child(2) .band-cap-img { transform: rotate(-1deg); }
.band-item:nth-child(3) .band-cap-img { transform: rotate(3deg);  }
.band-item:nth-child(4) .band-cap-img { transform: rotate(-2deg); }
.band-item:nth-child(5) .band-cap-img { transform: rotate(1deg);  }

/* ── Card slot in band ─────────────────────────────────────────────────────── */
.band-slot-box--card {
    width: min(100%, 70px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    flex-shrink: 0;
}

@keyframes band-no-room-glow {
    0%   { border-color: #c87f00; box-shadow: none; }
    25%  { border-color: #cc0000; box-shadow: 0 0 0 5px rgba(200,0,0,0.35); }
    70%  { border-color: #cc0000; box-shadow: 0 0 0 3px rgba(200,0,0,0.15); }
    100% { border-color: #c87f00; box-shadow: none; }
}
.band-slot-box--no-room {
    position: relative;
    animation: band-no-room-glow 0.65s ease-out forwards;
}

@keyframes no-room-pop {
    0%   { opacity: 0; transform: translateY(4px) scale(0.85); }
    20%  { opacity: 1; transform: translateY(0)   scale(1);    }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-6px); }
}
.band-no-room-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 9px;
    color: #cc0000;
    background: rgba(255,255,255,0.88);
    animation: no-room-pop 0.9s ease-out forwards;
    pointer-events: none;
}

/* ── HØJRE: action column ─────────────────────────────────────────────────── */
.shop-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    align-items: stretch;
}

.shop-remove-btn {
    flex: 1;
    /* Flad lyserød — animeret shimmer (som Next Round) blev afprøvet men var
       for voldsomt for en knap man kigger på hele tiden. Statisk farve er
       nok til at signalere "destruktiv handling" uden at trække opmærksomhed. */
    background: #ffb3b3;
    border: 4px solid #000;
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transform: rotate(-2deg);
    transition: box-shadow 0.08s, transform 0.1s;
    width: 100%;
    color: #000;
}
.shop-remove-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shop-discard-price {
    background: var(--clr-red);
    color: #fff;
    border: 2px solid #000;
    box-shadow: 2px 2px 0px #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 700;
    padding: 2px 6px;
    transform: rotate(-1deg);
    pointer-events: none;
}
.shop-remove-btn:active { box-shadow: var(--shadow-pressed); transform: rotate(-2deg) translate(3px, 3px); }
.shop-remove-btn.cant-afford { opacity: 0.28; cursor: default; pointer-events: none; }
.shop-skull-box {
    width: 30px;
    height: 30px;
    border: 2px solid #000;
    background: rgba(204,34,34,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: rotate(3deg);
    font-size: 15px;
}

.shop-next-btn {
    flex: 1;
    /* To forsøg med en DIAGONAL (135°) gradient gav begge en synlig søm —
       enten fordi %-baseret background-size skævvrider en diagonal gradient i
       en aflang (ikke-kvadratisk) boks, eller fordi repeating-linear-gradient
       selv har kendte afrundings-sømme ved sine egne gentagelses-grænser.
       Droppet diagonalen: en VANDRET (90°) gradient gør %-matematikken
       aspect-ratio-uafhængig og fjerner enhver diagonal-skævhed. Mønstret
       (A,B,C,A) er skrevet ud TO gange i selve gradient-definitionen (ikke
       via CSS' egen repeat-motor) over en 200%-sized baggrund, så vinduet ved
       0% og 100% viser bogstaveligt den samme håndskrevne kopi. */
    background: linear-gradient(90deg,
        #fff59d 0%, #ffffff 16.67%, #ffd54f 33.33%,
        #fff59d 50%, #ffffff 66.67%, #ffd54f 83.33%, #fff59d 100%);
    background-size: 200% 100%;
    animation: shop-next-shift 3s linear infinite;
    border: 4px solid #000;
    box-shadow: var(--shadow-raised);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transform: rotate(2deg);
    transition: box-shadow 0.08s, transform 0.1s;
    width: 100%;
    color: #000;
}
.shop-next-btn:active { box-shadow: var(--shadow-pressed); transform: rotate(2deg) translate(3px, 3px); }
@keyframes shop-next-shift {
    /* Tilbage til %, samme "høj → lav"-rækkefølge som gav retningen mod højre. */
    0%   { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}
.shop-next-price {
    background: var(--clr-bg-panel);
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    padding: 2px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    transform: rotate(-2deg);
    display: inline-block;
    white-space: nowrap;
}

/* ── Ghost spacer — reserverer plads til #score-display (fixed, bottom-right) */
.shop-score-ghost {
    flex-shrink: 0;
    height: 78px; /* score-display: 42px font + 12px padding + 8px border + 16px bottom offset */
    pointer-events: none;
}

/* ── Band pop-in ──────────────────────────────────────────────────────────── */
.band-item--entering {
    opacity: 0;
    animation: band-pop-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Pack popup ───────────────────────────────────────────────────────────── */
#shop-pack-popup {
    position: fixed;
    inset: 0;
    background: var(--overlay-modal);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pack-popup-panel {
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    border-radius: 0;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    transform: rotate(-1deg);
}
.pack-popup-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pack-choices-row    { display: flex; gap: 10px; justify-content: center; }
.pack-choice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-sticker);
    background: var(--clr-bg-panel);
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    transition: box-shadow 0.08s, transform 0.08s;
}
.pack-choice:hover  { box-shadow: var(--shadow-raised); }
.pack-choice:active { box-shadow: var(--shadow-pressed); transform: translate(2px, 2px); }
.pack-choice--relic { justify-content: flex-start; text-align: left; gap: 4px; }
.pack-relic-icon    { font-size: 32px; line-height: 1; margin-bottom: 4px; pointer-events: none; }
.pack-choice-img    { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #000; box-shadow: 3px 3px 0px #000; }
.pack-choice-name   { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; }
.pack-choice-effect { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #000; background: #f5c842; padding: 1px 4px; font-weight: 700; line-height: 1.4; }
.pack-empty         { font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: var(--text-muted); text-align: center; padding: 20px; }
.pack-skip-btn {
    display: block; width: 100%; margin-top: 12px; padding: 8px;
    background: none; border: 3px solid var(--border-ink); border-radius: 0;
    color: var(--text-secondary); font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.pack-skip-btn:hover { background: var(--surface-dim); }

/* ── Discard overlay ─────────────────────────────────────────────────────── */
#shop-discard-overlay {
    position: fixed; inset: 0;
    background: var(--overlay-modal);
    z-index: 300;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 60px;
}
.discard-panel {
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    border-radius: 0;
    width: 520px;
    max-height: 252px;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: rotate(1deg);
}
.discard-header {
    display: flex; align-items: stretch;
    border-bottom: 4px solid var(--border-ink);
    flex-shrink: 0;
}
.discard-title {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700;
    color: #000; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 10px 14px 6px;
}
.discard-close-btn {
    background: none; border: none;
    border-left: 3px solid var(--border-ink);
    color: var(--text-secondary); font-size: 15px;
    cursor: pointer; padding: 0 14px; flex-shrink: 0;
    transition: background 0.12s;
}
.discard-close-btn:hover { background: var(--surface-dim); }
.discard-cost-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 700; color: var(--clr-red);
    margin: 0; padding: 5px 14px;
    border-bottom: 3px solid var(--border-ink);
    background: rgba(204,34,34,0.05);
    flex-shrink: 0;
}
.discard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px; padding: 14px 16px;
    overflow-y: auto; flex: 1;
}
.discard-cap {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: none; border: none;
    text-align: center; padding: 6px 4px;
}
.discard-cap-img {
    width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
    cursor: pointer; transition: box-shadow 0.12s;
}
.discard-cap-img:hover { box-shadow: 0 0 0 3px var(--clr-red); }
.discard-cap-name { font-family: 'Space Grotesk', sans-serif; font-size: 10px; color: var(--text-primary); line-height: 1.2; word-break: break-word; }
.discard-price-tag {
    background: var(--clr-red); color: #fff;
    border: 2px solid #000; box-shadow: 2px 2px 0px #000;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
    padding: 2px 6px; cursor: pointer;
    transform: rotate(-1deg);
    transition: box-shadow 0.08s, transform 0.08s;
}
.discard-price-tag:hover  { box-shadow: 3px 3px 0px #000; transform: rotate(-1deg) translate(-1px,-1px); }
.discard-price-tag:active { box-shadow: none; transform: rotate(-1deg) translate(2px,2px); }
.discard-price-tag.cant-afford { opacity: 0.35; cursor: default; }
.discard-cap.cant-afford { opacity: 0.35; pointer-events: none; }
.discard-empty    { font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: var(--text-muted); text-align: center; padding: 20px; }