/* ─── PERSISTENT TOP-LEFT OVERLAY (BAG + MAP) ────────────────────────────── */
#tl-overlay {
    position: fixed;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
    z-index: 220;
}

.overlay-btn {
    height: 36px;
    padding: 0 14px;
    background: var(--clr-bg-panel);
    color: var(--text-primary);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: box-shadow 0.08s, transform 0.08s;
    user-select: none;
}
.overlay-btn:active {
    box-shadow: var(--shadow-pressed);
    transform: translate(3px, 3px);
}

/* ─── TOP-RIGHT: CORNER BUTTONS ─────────────────────────────────────────── */
#corner-btns {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 220;
}

#corner-btns button {
    width: 40px;
    height: 40px;
    background: var(--clr-bg-panel);
    color: var(--text-primary);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.08s, transform 0.08s;
}
#corner-btns button:active {
    box-shadow: var(--shadow-pressed);
    transform: translate(3px, 3px);
}

#fullscreen-btn { display: none; }
@media (pointer: coarse) {
    #fullscreen-btn { display: flex; }
}

/* ─── PERSISTENT PAUSE KNAP (run-mode, alle screens) ────────────────────── */
#pause-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--clr-bg-panel);
    color: var(--text-primary);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.08s, transform 0.08s;
    z-index: 220;
}
#pause-btn:active {
    box-shadow: var(--shadow-pressed);
    transform: translate(3px, 3px);
}

/* ─── LEGACY #ui ─────────────────────────────────────────────────────────── */
#ui {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 90;
}

/* ─── BOTTOM BAR — én container til alt i bunden, virker på alle skærme ─── */
/* Ingen pixel-tweaking: browseren bestemmer layoutet via flexbox             */
#bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;          /* alt rammer bundkanten */
    padding: 12px 12px;
    z-index: 90;            /* under shop/map/reward screens (z:200) — pile btns skjules automatisk */
    pointer-events: none;
    gap: 8px;
}

/* Venstre: pile-knapper — starter med padding forbi power bar */
#bottom-left {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    pointer-events: auto;
    padding-left: 48px;             /* forbi power bar (left:16 + 32px + borders ≈ 56px) */
    flex-shrink: 0;
}

/* Center: action-prompt → pips → status — absolut centreret i viewport */
#bottom-center {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    padding-bottom: 10px;
}

/* ─── PILE BUTTONS ───────────────────────────────────────────────────────── */
.pile-btn {
    background: var(--clr-bg-panel);
    color: var(--text-primary);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-sticker);
    border-radius: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 78px;
    height: 64px;
    font-family: 'JetBrains Mono', monospace;
    transition: box-shadow 0.08s, transform 0.08s;
    pointer-events: auto;
    flex-shrink: 0;
}
.pile-btn:active { box-shadow: var(--shadow-pressed); }

#pile-won-btn { transform: rotate(-2deg); }
#pile-rem-btn { transform: rotate(2deg); }

.pile-btn span:first-child {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}
.pile-btn-label {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}

/* ─── THROW PIPS ─────────────────────────────────────────────────────────── */
#throw-pips {
    display: flex;
    gap: 6px;
    pointer-events: none;
}
.throw-pip {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    transition: background 0.2s, border-color 0.2s;
}
.throw-pip.active {
    background: #fff;
    border-color: #fff;
}

/* ─── ACTION PROMPT ──────────────────────────────────────────────────────── */
#action-prompt {
    white-space: nowrap;
    background: #000;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 6px 16px;
    pointer-events: none;
    display: none;
    animation: prompt-pulse 1.6s ease-in-out infinite;
    margin: 0;
}

/* ─── STATUS BAR ─────────────────────────────────────────────────────────── */
#status-bar {
    white-space: nowrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    font-family: 'Space Grotesk', sans-serif;
    margin: 0;
}

/* ─── SCORE DISPLAY — eigen fixed positie, altijd boven alle screens ────── */
#score-display {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    z-index: 220;
    pointer-events: none;
    transform: rotate(2deg);
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    padding: 6px 12px 6px 10px;
}
#score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #000;
}
.score-star {
    font-size: 26px;
    font-weight: 700;
    color: #000;
}

/* ─── SLAMMER-PASSIV-BADGE-STACK ──────────────────────────────────────────
   Fælles flex-container for ALLE badges ovenover #run-info (double/amplify/
   first-strike/last-stand + dynamisk tilføjede rarity/parity/flatbonus-
   badges). Løser tidligere overlap-bug (hver badge havde sin egen faste
   top/left/right, uafhængigt af hvor mange andre der samtidig var synlige).
   Højrejusteret til #run-infos egen højrekant (i stedet for centreret) —
   #run-info sidder allerede tæt på skærmens højre kant, så en centreret
   stack skubbede halvdelen af badges ud af billedet. Vertikal kolonne i
   stedet for vandret række, da der ellers ikke er bredde nok til flere
   badges ad gangen. `flex-direction: column` (IKKE reverse) betyder senere
   tilføjede badges (dynamiske rarity/parity/flatbonus, appendChild'et sidst)
   havner nederst i stacken OG tegnes ØVERST i z-rækkefølgen — så en evt.
   overlappende skygge fra badgen ovenover altid ender bag den under, aldrig
   forkert foran. */
#slammer-badge-stack {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

@keyframes double-badge-pulse {
    0%,100% { transform: rotate(-3deg) scale(1);    box-shadow: 3px 3px 0 #8b5a00; }
    50%      { transform: rotate(-3deg) scale(1.1);  box-shadow: 4px 4px 0 #8b5a00; }
}
#double-badge {
    background: #ffcc00;
    color: #000;
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #8b5a00;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 13px;
    padding: 1px 8px;
    white-space: nowrap;
    animation: double-badge-pulse 1s ease-in-out infinite;
}

@keyframes amplify-badge-pulse {
    0%,100% { transform: rotate(3deg) scale(1);    box-shadow: 3px 3px 0 #0a2a66; }
    50%      { transform: rotate(3deg) scale(1.1);  box-shadow: 4px 4px 0 #0a2a66; }
}
#amplify-badge {
    background: #6688ff;
    color: #fff;
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #0a2a66;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 13px;
    padding: 1px 8px;
    white-space: nowrap;
    animation: amplify-badge-pulse 1s ease-in-out infinite;
}

@keyframes first-strike-pulse {
    0%,100% { transform: rotate(-5deg) scale(1);    box-shadow: 3px 3px 0 #1a5c2a; }
    50%      { transform: rotate(-5deg) scale(1.08); box-shadow: 4px 4px 0 #1a5c2a; }
}
@keyframes last-stand-pulse {
    0%,100% { transform: rotate(5deg) scale(1);    box-shadow: 3px 3px 0 #4a2d80; }
    50%      { transform: rotate(5deg) scale(1.08); box-shadow: 4px 4px 0 #4a2d80; }
}
#first-strike-badge, #last-stand-badge,
.rarity-mult-badge, .parity-mult-badge, .flatbonus-mult-badge, .passive-trigger-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 11px;
    padding: 1px 6px;
    white-space: nowrap;
    border: 3px solid #000;
    pointer-events: none;
}
.slammer-badge-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #000;
}

/* Binder HUD-chip — persistent per-serie multiplier-række (UIManager.
   renderSeriesMultChips()). Genbruger passive-trigger-badge-opskriften (bold
   mono, sort kant, lille) men er IKKE en del af #slammer-badge-stacks
   transiente badge-system — intet animationend-auto-remove, forbliver indtil
   containeren re-renderes/skjules. Placeret til HØJRE for power-baren (samme
   fixed left/top-udgangspunkt som #power-container, men forskudt til højre
   for dens 32px bredde), IKKE nestet i #run-info — undgår at klemmes ind
   mellem score og goal-score. */
#series-mult-chips {
    display: none;
    position: fixed;
    left: 60px;
    top: max(60px, calc(50% - 140px));
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 90;
    pointer-events: none;
}
.series-mult-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 11px;
    padding: 1px 6px;
    white-space: nowrap;
    border: 2px solid #000;
    border-radius: 3px;
    box-shadow: 2px 2px 0 #000;
}
/* Ejer man ingen cap fra serien lige nu, bidrager binderen reelt ikke til
   noget score endnu — dæmpet grå i stedet for seriens farve, så chippen
   stadig er synlig (spilleren skal huske den findes) uden at signalere
   "aktivt i spil" når den ikke er. */
.series-mult-chip--inactive {
    background: rgba(0,0,0,0.06) !important;
    color: var(--text-secondary) !important;
    border-color: var(--text-secondary) !important;
    opacity: 0.6;
}
#first-strike-badge {
    background: #4ecb71;
    box-shadow: 3px 3px 0 #1a5c2a;
    animation: first-strike-pulse 1.2s ease-in-out infinite;
}
/* Last Stand — violet i stedet for rødt, så den ikke kan forveksles med
   Rare-rarity-badgens røde farve (se .rarity-mult-badge/modals.css). */
#last-stand-badge {
    background: #9966ee;
    color: #fff;
    box-shadow: 3px 3px 0 #4a2d80;
    animation: last-stand-pulse 1.2s ease-in-out infinite;
}

/* AMPLIFYZ armeret — ekstra ring + hurtigere puls omkring den eksisterende
   badge, så den forstærkede værdi ikke bare ligner et tilfældigt større tal
   uden forklaring. */
@keyframes slammer-badge-amplified-ring {
    0%, 100% { box-shadow: 0 0 0 2px #1144aa, 3px 3px 0 #000; }
    50%      { box-shadow: 0 0 0 4px #1144aa, 3px 3px 0 #000; }
}
.slammer-badge--amplified {
    animation: first-strike-pulse 0.6s ease-in-out infinite, slammer-badge-amplified-ring 0.6s ease-in-out infinite;
}
#last-stand-badge.slammer-badge--amplified {
    animation: last-stand-pulse 0.6s ease-in-out infinite, slammer-badge-amplified-ring 0.6s ease-in-out infinite;
}

/* Transiente rarity/parity/flatbonus-badges — poppes ind, holder et øjeblik,
   poppes ud igen, som en rigtig badge i stacken (kan bære slammer-ikonet),
   IKKE synlige før kastet rent faktisk er afgjort (fx Voodoo Skulls Magnet
   skal ikke vises FØR kastet, kun som bekræftelse efter). */
@keyframes rarity-parity-badge-pop {
    0%   { opacity: 0; transform: scale(0.5); }
    25%  { opacity: 1; transform: scale(1.15); }
    35%  { opacity: 1; transform: scale(1); }
    85%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.85); }
}
.rarity-mult-badge, .parity-mult-badge, .flatbonus-mult-badge, .passive-trigger-badge {
    animation: rarity-parity-badge-pop 1.8s ease-in-out forwards;
}

/* ─── RUN INFO (node name + goal) ────────────────────────────────────────── */
#run-info {
    position: fixed;
    bottom: 100px;
    right: 16px;
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-sticker);
    padding: 6px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
    transform: rotate(1deg);
    z-index: 90;
    overflow: visible;
    pointer-events: none;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
#run-info b {
    color: #000;
    transition: color 0.35s ease;
}
#run-info.run-info--won  { background: #c8ecd0; border-color: #4e9e62; color: #1a5228; }
#run-info.run-info--won  b { color: #1a5228; }
#run-info.run-info--lost { background: #f2c8c8; border-color: #b05060; color: #7a1f28; }
#run-info.run-info--lost b { color: #7a1f28; }

/* ─── BOSS GIMMICK HEADER — vises kun under en boss-kamp ──────────────────── */
#boss-info {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    background: #2a1414;
    border: 4px solid #7a1f28;
    box-shadow: var(--shadow-sticker);
    padding: 8px 18px;
    text-align: center;
    z-index: 95;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}
/* Under selve kastet: dæmpet + pulserende, så udsynet til bordet er frit */
#boss-info.boss-info--active {
    animation: boss-info-pulse 1.6s ease-in-out infinite;
}
@keyframes boss-info-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 0.25; }
}
#boss-info-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    color: #ff8888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#boss-info-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    color: #f2c8c8;
    margin: 2px 0 0;
}
/* No Glam Fam — live straf-procent, beregnet fra ejede caps' enchants lige nu. */
#boss-info-penalty {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    color: #ffcc66;
    background: rgba(0,0,0,0.25);
    border: 2px solid #ffcc66;
    border-radius: 2px;
    padding: 2px 8px;
    margin: 5px 0 0;
    display: inline-block;
    white-space: nowrap;
}

/* Pr.-kast parity-feedback (Even Steven/Odd Todd) — sidder ØVERST PÅ selve
   gimmick-stickeren (ikke løs nede ved scoren), så check/kryds altid vises
   lige ved siden af forklaringen på HVORFOR kastet tæller eller ej. */
#boss-info-feedback {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 17px;
    border: 3px solid #000;
    box-shadow: 2px 2px 0px #000;
    transform: rotate(6deg);
}
#boss-info-feedback.boss-info-feedback--show { display: flex; }
#boss-info-feedback.boss-info-feedback--pass { background: #2a9d5c; color: #fff; }
#boss-info-feedback.boss-info-feedback--fail { background: #e05050; color: #fff; }
#boss-info-feedback.boss-info-feedback--pop  { animation: boss-info-feedback-pop 0.5s ease-out; }
@keyframes boss-info-feedback-pop {
    0%   { transform: rotate(6deg) scale(0.4); opacity: 0; }
    35%  { transform: rotate(6deg) scale(1.25); opacity: 1; }
    60%  { transform: rotate(6deg) scale(1);    opacity: 1; }
    100% { transform: rotate(6deg) scale(1);    opacity: 1; }
}

/* ─── RESULTS PANEL ──────────────────────────────────────────────────────── */
#results {
    display: none;
    position: fixed;
    top: 72px;
    right: 16px;
    background: var(--clr-bg-panel);
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-raised);
    padding: 12px 18px;
    text-align: center;
    min-width: 130px;
    z-index: 100;
    transform: rotate(2deg);
}
#results .big {
    font-family: 'JetBrains Mono', monospace;
    font-size: 36px;
    font-weight: 800;
    color: #f5c842;
    line-height: 1;
}
#results p    { font-size: 12px; color: var(--text-secondary); margin: 3px 0 6px; font-family: 'Space Grotesk', sans-serif; }
/* max-height fast px i stedet for vh: #ui-scale-root skalerer allerede hele UI'et,
   så værdien er regnet ud som om viewporten var præcis 640×360 (referenceopløsningen). */
#wonList      { min-height: 20px; max-height: 162px; overflow-y: auto; overflow-x: hidden; }

@keyframes results-pop-in {
    0%   { opacity: 0; transform: rotate(2deg) scale(0.4) translateY(-18px); }
    55%  { opacity: 1; transform: rotate(2deg) scale(1.15) translateY(4px); }
    75%  { transform: rotate(2deg) scale(0.95) translateY(-1px); }
    100% { opacity: 1; transform: rotate(2deg) scale(1) translateY(0); }
}
#results.results--entering {
    animation: results-pop-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── POWER BAR ──────────────────────────────────────────────────────────── */
#power-container {
    display: none;
    position: fixed;
    left: 16px;
    top: max(60px, calc(50% - 140px));
    transform: rotate(-2deg);
    width: 32px;
    height: 280px;
    border: 4px solid var(--border-ink);
    box-shadow: var(--shadow-sticker);
    background: linear-gradient(to top, #cc2222 0%, #e8b800 50%, #22aa44 100%);
    border-radius: 0;
    overflow: hidden;
    z-index: 90;
}
#power-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 8, 12, 0.92);
}