/* ─── ICON-KLIK "JUICE" (cap/slammer-thumbnails før detail-view åbnes) ──────
   Erstatter/supplerer den gamle rene :hover-rotation (som slet ikke fyrer på
   touch — derfor virkede den kun med mus på pc). Trigges via JS
   (domUtils.js: pulseIconRotate) lige når et ikon-klik detekteres, samme sted
   på tværs af RewardScreen/ShopScreen/BossShopScreen for konsekvent feel. */
@keyframes icon-pulse-rotate {
    0%   { transform: rotate(0deg) scale(1);    }
    40%  { transform: rotate(15deg) scale(1.12); }
    100% { transform: rotate(0deg) scale(1);    }
}
.icon-pulse-rotate { animation: icon-pulse-rotate 0.4s ease-out; }

/* ─── SCREEN TRANSITIONS ─────────────────────────────────────────────────── */
@keyframes screen-fade-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1);    }
}
@keyframes screen-fade-out {
    from { opacity: 1; transform: scale(1);    }
    to   { opacity: 0; transform: scale(0.98); }
}
.fading-out {
    animation: screen-fade-out 0.18s ease-in forwards;
    pointer-events: none;
}

/* ─── SCORE FLOAT ────────────────────────────────────────────────────────── */
@keyframes score-float-anim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0px)   scale(0.6);  }
    15%  { opacity: 1; transform: translateX(-50%) translateY(-12px)  scale(1.08); }
    22%  { opacity: 1; transform: translateX(-50%) translateY(-16px)  scale(1.0);  }
    60%  { opacity: 1; transform: translateX(-50%) translateY(-16px)  scale(1.0);  }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px)  scale(0.85); }
}
@keyframes score-float-anim-mult {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0px)   scale(0.6);  }
    10%  { opacity: 1; transform: translateX(-50%) translateY(-12px)  scale(1.08); }
    16%  { opacity: 1; transform: translateX(-50%) translateY(-16px)  scale(1.0);  }
    68%  { opacity: 1; transform: translateX(-50%) translateY(-16px)  scale(1.0);  }
    100% { opacity: 0; transform: translateX(-50%) translateY(-52px)  scale(0.85); }
}

.score-float {
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    z-index: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.6);
    user-select: none;
    white-space: nowrap;
    animation: score-float-anim 0.88s ease-out forwards;
}
.score-float--deduct {
    color: #e05050;
    text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
}
.score-float.bonus {
    font-size: 26px;
    color: #f5c842;
    text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 14px rgba(255,180,0,0.7);
}
.score-float.has-multiplier {
    animation: score-float-anim-mult 1.4s ease-out forwards;
}

.score-float-val { pointer-events: none; }

.score-float-carry {
    font-size: 11px;
    font-weight: 700;
    color: #ff8833;
    opacity: 0.9;
    pointer-events: none;
    line-height: 1;
    margin-bottom: 1px;
}
@keyframes val-pop-anim {
    0%   { transform: scale(1.35); color: #e0b8ff; }
    100% { transform: scale(1);    color: inherit;  }
}
.score-float-val.pop { animation: val-pop-anim 0.22s ease-out forwards; }

.score-float-mult {
    font-size: 13px;
    font-weight: 700;
    color: #b985ff;
    text-shadow: 0 0 8px rgba(185, 133, 255, 0.8);
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    line-height: 1;
}
.score-float-mult.visible {
    opacity: 1;
    transform: scale(1);
}

/* ─── CAP COLLECT ANIMATION ──────────────────────────────────────────────── */
@keyframes collect-float {
    0%   { opacity: 0;   transform: translateY(0)    scale(0.4); }
    20%  { opacity: 1;   transform: translateY(-10px) scale(1);   }
    100% { opacity: 0;   transform: translateY(-48px) scale(0.7); }
}

.collect-icon {
    position: fixed;
    width: 51px;
    height: 51px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 204, 0, 0.85);
    pointer-events: none;
    z-index: 500;
    animation: collect-float 0.75s ease-out forwards;
}

@keyframes btn-collect-glow {
    0%   { box-shadow: var(--shadow-sticker); border-color: var(--border-ink); }
    30%  { box-shadow: 0 0 0 5px rgba(255,204,0,0.5), var(--shadow-sticker); border-color: #ffcc00; }
    100% { box-shadow: var(--shadow-sticker); border-color: var(--border-ink); }
}
#pile-won-btn.collect-flash,
#pile-rem-btn.collect-flash,
#bag-btn.collect-flash {
    animation: btn-collect-glow 0.55s ease-out forwards;
}

/* ─── EFFECT INDICATORS ──────────────────────────────────────────────────── */
.effect-indicator {
    position: fixed;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
    z-index: 55;
    transform: translateX(-50%);
    animation: effect-ind-anim 0.9s ease-out forwards;
}
.effect-indicator--ok         { color: #4cff88; }
.effect-indicator--fail       { color: #ff5555; }
.effect-indicator--neighbours { color: #ffd700; }
.effect-indicator--magnet     { color: #ffaa00; }
.effect-indicator--boomerang  { color: #ffcc44; font-size: 22px; }
.effect-indicator--rally      { color: #44ffcc; }
.effect-indicator--crew       { color: #aaffaa; }
.effect-indicator--martyr     { color: #cc44ff; }
.effect-indicator--surge      { color: #ff6622; font-size: 20px; }
.effect-indicator--clone      { color: #88aaff; font-size: 22px; }
.effect-indicator--destroy    { color: #ff4444; font-size: 22px; }
.effect-indicator--exhaust    { color: #8888aa; }
.effect-indicator--husk       { color: #6a6a6a; font-size: 22px; }
.effect-indicator.ind-pop { animation: ind-pop-anim 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes effect-ind-anim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0)    scale(0.6); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(-8px)  scale(1.1); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(-14px) scale(1);   }
    100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(0.9); }
}
@keyframes ind-pop-anim {
    0%   { transform: translateX(-50%) scale(0.7); }
    60%  { transform: translateX(-50%) scale(1.3); }
    100% { transform: translateX(-50%) scale(1);   }
}

/* ─── PROMPT PULSE ───────────────────────────────────────────────────────── */
@keyframes prompt-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ─── HELP BAR ───────────────────────────────────────────────────────────── */
@keyframes help-bar-oscillate {
    0%   { height: 100%; }
    45%  { height: 0%;   }
    55%  { height: 0%;   }
    100% { height: 100%; }
}

/* ─── CAP KØB ───────────────────────────────────────────────────────────── */
@keyframes cap-buy-out {
    0%   { opacity: 1; transform: scale(1)    translateY(0);     filter: brightness(1);   }
    22%  { opacity: 1; transform: scale(1.28) translateY(-4px);  filter: brightness(1.6); }
    100% { opacity: 0; transform: scale(0.65) translateY(-22px); filter: brightness(1);   }
}
.band-item--buying {
    animation: cap-buy-out 0.38s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    pointer-events: none;
}

/* ─── CAP DISCARD ────────────────────────────────────────────────────────── */
@keyframes cap-discard-out {
    0%   { opacity: 1; transform: scale(1)    rotate(0deg);   filter: brightness(1);                      }
    15%  { opacity: 1; transform: scale(1.05) rotate(-8deg);  filter: brightness(0.9) saturate(2);        }
    35%  { opacity: 1; transform: scale(0.95) rotate(6deg);   filter: brightness(0.7) saturate(3) sepia(0.4); }
    100% { opacity: 0; transform: scale(0.35) rotate(20deg) translateY(10px); filter: brightness(0.3) saturate(0); }
}
.discard-cap--discarding {
    animation: cap-discard-out 0.42s cubic-bezier(0.4, 0, 0.8, 1) forwards;
    pointer-events: none;
}

/* ─── BAND POP-IN ────────────────────────────────────────────────────────── */
@keyframes band-pop-in {
    0%   { opacity: 0; transform: scale(0.55) translateY(10px); }
    55%  { opacity: 1; transform: scale(1.12) translateY(-4px); }
    75%  { transform: scale(0.96) translateY(1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.band-item--entering {
    opacity: 0;
    animation: band-pop-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── NODE PULSE ─────────────────────────────────────────────────────────── */
@keyframes node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    50%       { box-shadow: 0 0 0 6px rgba(0,0,0,0.18); }
}
@keyframes relic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185,133,255,0); }
    50%       { box-shadow: 0 0 0 7px rgba(185,133,255,0.3); }
}

/* ─── RELIC GAIN STICKER ─────────────────────────────────────────────────── */
@keyframes relic-gain-in {
    0%   { opacity: 0; transform: rotate(2deg) translateX(60px) scale(0.7); }
    55%  { opacity: 1; transform: rotate(2deg) translateX(-4px)  scale(1.06); }
    70%  { transform: rotate(2deg) translateX(2px)  scale(0.98); }
    82%  { transform: rotate(2deg) translateX(0px)  scale(1.0); }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(2deg) translateX(0px) scale(0.95); }
}
.relic-gain-sticker {
    position: fixed;
    right: 20px;
    top: 42%;
    z-index: 500;
    background: var(--clr-bg-panel);
    border: 4px solid #000;
    box-shadow: 6px 6px 0px #000;
    padding: 10px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: rotate(2deg);
    animation: relic-gain-in 3.2s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    pointer-events: none;
}
.relic-gain-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.relic-gain-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000;
    flex-shrink: 0;
    background: var(--clr-bg-panel);
}
.relic-gain-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #000;
}
.relic-gain-old   { opacity: 0.4; }
.relic-gain-arrow { font-size: 14px; opacity: 0.6; }
.relic-gain-new {
    color: #000;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.relic-gain-sticker--reveal .relic-gain-new {
    opacity: 1;
    transform: scale(1);
}
/* Reset-variant (streak brudt) — rødtonet i stedet for gyldent/sort, så den
   tydeligt læses som "mistet", ikke endnu en gevinst. */
.relic-gain-sticker--reset .relic-gain-throws { color: var(--clr-red, #cc2222); }
.relic-gain-sticker--reset .relic-gain-new    { color: var(--clr-red, #cc2222); }


/* ─── ENCHANT RESULT STICKER ─────────────────────────────────────────────── */
@keyframes enchant-result-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-6deg); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
@keyframes enchant-result-out {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85) translateY(-20px); }
}
.enchant-result-sticker {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 4px solid #000;
    box-shadow: 6px 6px 0 #000;
    padding: 0;
    width: 240px;
    z-index: 500;
    overflow: hidden;
    animation: enchant-result-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    cursor: pointer;
}
.enchant-result-sticker--out {
    animation: enchant-result-out 0.3s ease-in forwards;
}
.enchant-result-icon {
    background: var(--enchant-color, #444);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 32px;
    text-align: center;
    padding: 16px 0 12px;
    border-bottom: 3px solid #000;
}
.enchant-result-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 10px 12px 4px;
    color: var(--enchant-color, #000);
}
.enchant-result-desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-align: center;
    color: #555;
    padding: 0 14px 14px;
    line-height: 1.4;
}

/* Bonus-sticker på Trick Shot-info-stickeren — viser hvad rewarden opgraderes
   TIL, som et ekstra "påklistret" mærke nederst, adskilt fra selve beskrivelsen. */
.trickshot-reward-bonus {
    background: #f5c842;
    color: #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 6px 10px;
    border-top: 3px solid #000;
    margin-top: -1px;
}

/* Samme "påklistret mærke nederst"-mønster som ovenfor, men på boss-info-
   stickeren (kort-tooltip) — viser No Glam Fams live straf-procent baseret på
   ejede caps' enchants LIGE NU, i stedet for kun den statiske gimmick-tekst. */
.boss-penalty-live {
    background: #7a1f28;
    color: #ffcc66;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 6px 10px;
    border-top: 3px solid #000;
    margin-top: -1px;
}

.transform-result-img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #000;
}
.transform-result-img--old {
    opacity: 0.35;
    filter: grayscale(1);
}