/* ─── CONSUMABLE SLOTS — permanent bund-højre, til venstre for score ──── */

#consumable-slots {
    position: fixed;
    bottom: -12px; /* partial cutoff — bottom of slots not visible */
    right: 140px;
    display: flex;
    gap: 5px;
    align-items: flex-end;
    z-index: 225;  /* above map(215), shop(200), reward(200), score(220) */
    transform: scale(0.9);
    transform-origin: bottom right;
}

.consumable-slot {
    width: 48px;
    height: 64px;
    background: rgba(255, 255, 255, 0.35);
    border: 3px dashed #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    position: relative;
    font-size: 10px;
    color: #999;
    transition: transform 0.1s, box-shadow 0.1s;
}

.consumable-slot:nth-child(1) { transform: rotate(-2deg); }
.consumable-slot:nth-child(2) { transform: rotate( 1deg); }
.consumable-slot:nth-child(3) { transform: rotate(-1deg); }

.consumable-slot::after {
    content: '+';
    font-size: 18px;
    color: #ccc;
}

.consumable-slot.filled {
    border-style: solid;
    background: #fff;
    cursor: pointer;
    box-shadow: 4px 4px 0 #000;
}

.consumable-slot.filled::after { content: ''; }

.consumable-slot.filled:hover {
    box-shadow: 2px 2px 0 #000;
    transform: rotate(0deg) translate(2px, 2px);
}

@keyframes slot-collect-glow {
    0%   { box-shadow: 4px 4px 0 #000; border-color: #000; }
    30%  { box-shadow: 0 0 0 6px rgba(255,204,0,0.55), 4px 4px 0 #000; border-color: #ffcc00; }
    100% { box-shadow: 4px 4px 0 #000; border-color: #000; }
}
.consumable-slot--flash {
    animation: slot-collect-glow 0.55s ease-out forwards !important;
}

.consumable-slot-icon {
    font-size: 22px;
    line-height: 1;
    display: block;
    text-align: center;
}

.consumable-slot-name {
    font-size: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    margin-top: 2px;
    padding: 0 2px;
    color: #000;
}

/* ─── POPUP ─────────────────────────────────────────────────────────────── */

/* Centreret overlay (var før forankret nede i højre hjørne) — samme placering
   som cap/slammer-detail, så alle "inspicér før valg"-popups er konsekvente
   og ikke forvirrer spilleren med forskellige positioner. #detail-backdrop
   (samme dæmpnings-lag som cap/slammer/relic-detail) tændes/slukkes af
   ConsumableSlots via UIManager.setDetailBackdrop(). */
/* opacity+visibility i stedet for JS-sat display:none/'' — matcher #cap-detail/
   #slammer-detail's bløde fade-mønster (se modals.css) i stedet for et instant
   spring. Kortets egen pop-ind-rotation/scale (#consumable-popup-inner,
   consumable-popup-in-keyframen nedenfor) er urørt — den ydre opacity-fade
   bærer bare det hele blødt med ud igen ved lukning, hvor der FØR slet ingen
   luknings-animation var. */
#consumable-popup {
    position: fixed;
    inset: 0;
    z-index: 350; /* above shop popups at 300, above #detail-backdrop at 295 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}

#consumable-popup.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.16s ease, visibility 0s linear 0s;
}

#consumable-popup-inner {
    background: #fff;
    border: 4px solid #000;
    box-shadow: 6px 6px 0 #000;
    padding: 0;
    width: 180px;
    position: relative;
    overflow: hidden;
    /* Egen keyframes i stedet for den delte screen-fade-in — den sætter sin
       egen transform:scale(...) i keyframes, som fuldstændig ERSTATTER (ikke
       lægger oveni) elementets statiske rotation mens/efter animationen
       kører. cap/slammer-detail rammes ikke af dette, da de slet ingen åbne-
       animation har. Denne udgave holder rotationen med gennem hele forløbet.
       --popup-rot sættes med en ny tilfældig vinkel af ConsumableSlots.js
       hver gang popup'en åbnes (2-3° til en tilfældig side) — fallback -3deg
       hvis den af en eller anden grund ikke er sat. */
    animation: consumable-popup-in 0.15s ease-out forwards;
}
@keyframes consumable-popup-in {
    from { opacity: 0; transform: rotate(var(--popup-rot, -3deg)) scale(0.98); }
    to   { opacity: 1; transform: rotate(var(--popup-rot, -3deg)) scale(1);    }
}

#consumable-popup-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#consumable-popup-bottom {
    background: #fff;
    padding: 10px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#consumable-popup-footer {
    padding: 10px 14px 12px;
}

#consumable-popup-icon {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 32px;
    text-align: center;
    padding: 14px 0 10px;
}

#consumable-popup-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
}

#consumable-popup-desc {
    font-size: 11px;
    text-align: center;
    color: #555;
    line-height: 1.3;
    margin-bottom: 4px;
}

#consumable-popup-btns {
    display: flex;
    gap: 6px;
}

#consumable-use-btn,
#consumable-sell-btn,
#consumable-pick-btn {
    flex: 1;
    padding: 8px 4px;
    border: 3px solid #000;
    background: #000;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 3px 3px 0 #555;
    transition: transform 0.08s, box-shadow 0.08s;
}

#consumable-sell-btn {
    background: #fff;
    color: #000;
}

#consumable-use-btn:hover, #consumable-sell-btn:hover, #consumable-pick-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #555;
}

#consumable-use-btn:disabled {
    background: #ccc;
    border-color: #999;
    color: #999;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

#consumable-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 2px;
}

/* ─── POPUP HEADER ───────────────────────────────────────────────────────── */

#consumable-popup-header {
    padding: 10px 28px 10px 12px; /* right padding leaves room for ✕ */
    text-align: center;
}

#consumable-popup-header #consumable-popup-name {
    margin-bottom: 0;
    color: inherit;
}

#consumable-popup-flavor {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 9px;
    text-align: center;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── TYGGEGUMMI-SLOT INDRE STRUKTUR ────────────────────────────────────── */

.gum-slot-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gum-slot-header {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gum-slot-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding: 0 2px;
}

.gum-slot-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 2px 0;
    gap: 2px;
}

.gum-slot-icon {
    font-size: 17px;
    line-height: 1;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: #000;
}

.gum-slot-flavor {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 5.5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    color: #000;
    opacity: 0.55;
    line-height: 1;
    padding: 2px 2px 0;
    border-top: 1px dotted rgba(0,0,0,0.25);
    width: 100%;
    margin-top: 1px;
}