/* --- WORLD & BACKGROUND --- */
#background {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Width/height are set in JS (_computeWorldBounds) to match the image's
       native aspect ratio scaled by BG_ZOOM — this way the element matches
       the PNG's 1.24 ratio and background-size: 100% 100% does NOT stretch.
       The JS also sets maxWorldX/Y from the exact rendered size so the pan
       clamp lines up with the image edges. */
    transform: translate(-50%, -50%);
    background-image: url('../assets/images/duel_bckg_final.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    transition: transform 0.05s ease-out;
}

#crosshair {
    /* --ch-edge: set dynamically by renderer for shotgun (default 35% = revolver gap) */
    --ch-edge: 35%;
    position: fixed;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    /* Central grey transparent round */
    background: radial-gradient(circle, rgba(200, 200, 200, 0.4) 3px, transparent 4px);
}

#crosshair::before,
#crosshair::after {
    content: '';
    position: absolute;
}

/* Horizontal Line with Gap — uses --ch-edge for weapon-specific gap width */
#crosshair::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(to right, rgba(0, 255, 0, 0.8) 0%, rgba(0, 255, 0, 0.8) var(--ch-edge), transparent var(--ch-edge), transparent calc(100% - var(--ch-edge)), rgba(0, 255, 0, 0.8) calc(100% - var(--ch-edge)), rgba(0, 255, 0, 0.8) 100%);
}

/* Vertical Line with Gap */
#crosshair::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(0, 255, 0, 0.8) 0%, rgba(0, 255, 0, 0.8) var(--ch-edge), transparent var(--ch-edge), transparent calc(100% - var(--ch-edge)), rgba(0, 255, 0, 0.8) calc(100% - var(--ch-edge)), rgba(0, 255, 0, 0.8) 100%);
}

/* Shotgun crosshair override — thicker black bars + center dot */
#crosshair.shotgun-crosshair::before {
    height: 3px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) var(--ch-edge), transparent var(--ch-edge), transparent calc(100% - var(--ch-edge)), rgba(0, 0, 0, 0.95) calc(100% - var(--ch-edge)), rgba(0, 0, 0, 0.95) 100%);
}

#crosshair.shotgun-crosshair::after {
    width: 3px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) var(--ch-edge), transparent var(--ch-edge), transparent calc(100% - var(--ch-edge)), rgba(0, 0, 0, 0.95) calc(100% - var(--ch-edge)), rgba(0, 0, 0, 0.95) 100%);
}

#crosshair.shotgun-crosshair {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.55) 3px, transparent 4px);
}

/* --- PELLET IMPACTS (shotgun spray) --- */
.pellet-impact {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 15;
    transform: translate(-50%, -50%);
}

.pellet-impact.hit {
    background: rgba(255, 180, 60, 0.9);
}

.pellet-impact.miss {
    background: rgba(160, 140, 110, 0.5);
}

.pellet-impact.active {
    animation: pellet-fade ease-out forwards;
    /* duration set inline by renderer from SHOTGUN.PELLET_IMPACT_DURATION_MS */
}

@keyframes pellet-fade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
}

/* --- TUTORIAL BANNER (in-duel) --- */
.tutorial-banner {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 15, 8, 0.92);
    color: #e67e22;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #8b5e34;
    z-index: 999;
    text-align: center;
    max-width: 85%;
    pointer-events: none;
    transition: opacity 0.4s;
}

/* --- TUTORIAL HIGHLIGHT (pulse glow) --- */
.tutorial-highlight {
    animation: tutorial-pulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 12px 4px rgba(230, 126, 34, 0.6) !important;
    border-color: #e67e22 !important;
}

@keyframes tutorial-pulse {

    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(230, 126, 34, 0.4);
    }

    50% {
        box-shadow: 0 0 16px 6px rgba(230, 126, 34, 0.8);
    }
}

/* --- ENEMY --- */
#enemy {
    position: absolute;
    width: 100px;
    height: 175px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    transition: opacity 0.3s;
    perspective: 200px;
}

#enemy-sprite {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/hn_main.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 0;
    transform-origin: center bottom;
}

.enemy-eye-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    pointer-events: none;
}

/* Walk oscillation and hit reactions now driven by JS transforms */

/* DEBUG HITBOX (Headshot Zone) */
.debug-hitbox {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    /* 2 * HEAD_WIDTH(15) */
    height: 18px;
    /* Head area from top edge down */
    border: 2px solid rgba(255, 0, 0, 0.7);
    background: rgba(255, 0, 0, 0.3);
    pointer-events: none;
    z-index: 999;
}

/* DEBUG BODY HITBOX */
.debug-body-hitbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    /* 2 * WIDTH(35) */
    height: 130px;
    /* 2 * HEIGHT(65) */
    border: 2px solid rgba(0, 0, 255, 0.5);
    background: rgba(0, 0, 255, 0.1);
    pointer-events: none;
    z-index: 998;
}

#enemy.dummy #enemy-sprite {
    background-image: url('../assets/images/hn_dummy_duel.png');
}

/* Skin: Base (default) */
#enemy.skin-base #enemy-sprite {
    background-image: url('../assets/images/skins/base_duel.png');
}

/* Skin: El Bandido */
#enemy.skin-mexican #enemy-sprite {
    background-image: url('../assets/images/skins/mexican_duel.png');
}

/* Skin: Street Outlaw */
#enemy.skin-gangsta #enemy-sprite {
    background-image: url('../assets/images/skins/gangsta_duel.png');
}

/* Skin: Shadow Agent */
#enemy.skin-matrix #enemy-sprite {
    background-image: url('../assets/images/skins/matrix_duel.png');
}

/* Skin: Desert Prince */
#enemy.skin-desert #enemy-sprite {
    background-image: url('../assets/images/skins/desert_duel.png');
}

/* Skin: Union Officer */
#enemy.skin-officer #enemy-sprite {
    background-image: url('../assets/images/skins/officer_duel.png');
}

/* Skin: War Chief */
#enemy.skin-indian #enemy-sprite {
    background-image: url('../assets/images/skins/indian_duel.png');
}

/* --- v2.0 New Skins --- */
#enemy.skin-dark_rider #enemy-sprite {
    background-image: url('../assets/images/skins/dark_rider_duel.png');
}

#enemy.skin-mr_tenpenny #enemy-sprite {
    background-image: url('../assets/images/skins/mr_tenpenny_duel.png');
}

#enemy.skin-wanted_wade #enemy-sprite {
    background-image: url('../assets/images/skins/wanted_wade_duel.png');
}

#enemy.skin-doc_jackpot #enemy-sprite {
    background-image: url('../assets/images/skins/doc_jackpot_duel.png');
}

#enemy.skin-gear_doc #enemy-sprite {
    background-image: url('../assets/images/skins/gear_doc_duel.png');
}

#enemy.skin-el_magnifico #enemy-sprite {
    background-image: url('../assets/images/skins/el_magnifico_duel.png');
}

#enemy.skin-al_saqr #enemy-sprite {
    background-image: url('../assets/images/skins/al_saqr_duel.png');
}

#enemy.skin-iron_bjorn #enemy-sprite {
    background-image: url('../assets/images/skins/iron_bjorn_duel.png');
}

#enemy.skin-yojimbo #enemy-sprite {
    background-image: url('../assets/images/skins/yojimbo_duel.png');
}

#enemy.skin-black_spurs #enemy-sprite {
    background-image: url('../assets/images/skins/black_spurs_duel.png');
}

#enemy.skin-inferno #enemy-sprite {
    background-image: url('../assets/images/skins/inferno_duel.png');
}

/* --- Season 3 Skins --- */
#enemy.skin-bandido #enemy-sprite {
    background-image: url('../assets/images/skins/s3/bandido_duel.png');
}

#enemy.skin-dynamitero #enemy-sprite {
    background-image: url('../assets/images/skins/s3/dynamitero_duel.png');
}

#enemy.skin-iron_hawk #enemy-sprite {
    background-image: url('../assets/images/skins/s3/indian_duel.png');
}

#enemy.skin-wolf #enemy-sprite {
    background-image: url('../assets/images/skins/s3/wolf_duel.png');
}

#enemy.skin-iron_dragon #enemy-sprite {
    background-image: url('../assets/images/skins/s3/The_Iron_Dragon_duel.png');
}

#enemy.skin-dracula #enemy-sprite {
    background-image: url('../assets/images/skins/s3/dracula_duel.png');
}

#enemy.skin-dark_ninja #enemy-sprite {
    background-image: url('../assets/images/skins/s3/dark_ninja_duel.png');
}

#enemy.skin-dune_ninja #enemy-sprite {
    background-image: url('../assets/images/skins/s3/dune_ninja_duel.png');
}

/* --- Season 4 Skins --- */
#enemy.skin-stagecoach_driver #enemy-sprite {
    background-image: url('../assets/images/skins/s4/stagecoach_driver_duel.png');
}

#enemy.skin-pinkerton #enemy-sprite {
    background-image: url('../assets/images/skins/s4/pinkerton_duel.png');
}

#enemy.skin-aztec_outlaw #enemy-sprite {
    background-image: url('../assets/images/skins/s4/aztec_outlaw_duel.png');
}

#enemy.skin-gravewalker #enemy-sprite {
    background-image: url('../assets/images/skins/s4/gravewalker_duel.png');
}

/* Season 4 PvP rewards (Season 3 leaderboard) */
#enemy.skin-neon #enemy-sprite {
    background-image: url('../assets/images/skins/s4/neon/neon_duel.png');
}

#enemy.skin-quasar #enemy-sprite {
    background-image: url('../assets/images/skins/s4/quasar/quasar_duel.png');
}

/* Boss skins */
#enemy.skin-boss1_bad_bunny #enemy-sprite {
    background-image: url('../assets/images/skins/boss/boss1_bad_bunny.png');
}

#enemy.skin-boss2_mommy #enemy-sprite {
    background-image: url('../assets/images/skins/boss/boss2_mommy.png');
}

/* Ranger skin class (default - explicitly defined) */
#enemy.ranger #enemy-sprite {
    background-image: url('../assets/images/skins/base_duel.png');
}

#enemy.dead #enemy-sprite {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
    transition: all 0.5s ease-out;
}

#enemy.killed #enemy-sprite {
    background-image: url('../assets/images/cb1_dead.png');
    transform: translateY(30%) rotate(-5deg);
    opacity: 1;
    filter: grayscale(0.5);
    transition: background-image 0.1s;
}

/* Potion glow: two soft blue pulses on sprite only (drop-shadow respects transparency) */
@keyframes potion-glow {
    0% {
        filter: drop-shadow(0 0 0px rgba(100, 180, 255, 0));
    }

    25% {
        filter: drop-shadow(0 0 14px rgba(100, 180, 255, 0.8));
    }

    50% {
        filter: drop-shadow(0 0 0px rgba(100, 180, 255, 0));
    }

    75% {
        filter: drop-shadow(0 0 14px rgba(100, 180, 255, 0.8));
    }

    100% {
        filter: drop-shadow(0 0 0px rgba(100, 180, 255, 0));
    }
}

#enemy-sprite.potion-glow {
    animation: potion-glow 1.6s ease-in-out;
}

.overhead-hp {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    text-align: center;
}

.hp-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
    position: relative;
}

.hp-damage-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #e74c3c;
    transition: width 0.3s ease-out;
    z-index: 1;
}

.hp-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #2ecc71;
    transition: width 0.3s ease-out, background 0.8s ease;
    z-index: 2;
}

.hp-fill.heal-flash {
    background: #3498db;
}

.blinking {
    animation: hp-blink 0.2s infinite alternate;
}

@keyframes hp-blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

.hp-text {
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

.enemy-blood {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(180, 0, 0, 0.9) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 15;
    animation: blood-pop 0.4s ease-out forwards;
}

/* --- BATTLE HUD --- */
#hud {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    display: none;
    align-items: center;
    gap: 15px;
    pointer-events: none;
}

.run-button {
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, #e67e22, #d35400);
    border: 4px solid #a04000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    pointer-events: auto;
    cursor: pointer;
    z-index: 110;
}

.recenter-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 110;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #8d6e63;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
}

.recenter-button span {
    color: #fceabb;
    font-size: 24px;
    line-height: 1;
}

.recenter-button:active {
    background: rgba(230, 126, 34, 0.6);
    border-color: #e67e22;
}

.run-button span {
    color: #f1c40f;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.stats-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 220px;
    /* Reduced to fit mobile */
}

.new-hp-bar {
    width: 100%;
    height: 24px;
    /* Slightly thinner */
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #2d5a27;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.new-hp-fill {
    height: 100%;
    background: linear-gradient(to bottom, #7ed321, #417505);
    width: 100%;
    border-radius: 14px;
    transition: width 0.3s ease, background 0.8s ease;
}

.new-hp-fill.heal-flash {
    background: linear-gradient(to bottom, #5dade2, #2471a3);
}

.new-hp-text {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
    /* Slightly smaller */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

#ammo-display {
    display: flex;
    gap: 4px;
    padding-left: 5px;
}

.bullet-unit {
    width: 75px;
    height: 75px;
    background-image: url('../assets/images/bullet.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.6));
    transition: opacity 0.2s, transform 0.2s;
}

.bullet-unit.spent {
    opacity: 0.3;
    filter: grayscale(1) brightness(0.5);
    transform: scale(0.9);
}

/* --- GUN DISPLAY --- */
#gun-display {
    position: fixed;
    top: 70%;
    right: -20px;
    width: 200px;
    height: 200px;
    /* gun image set dynamically by setupWeapon() */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    pointer-events: none;
    z-index: 10;
    transform: translateY(-50%) rotate(-10deg);
    transition: background-image 0.2s, width 0.2s, height 0.2s;
}

#gun-display.hidden {
    display: none !important;
}

/* gun-display is hidden during reload — no override needed */

#gun-display.recoil {
    animation: recoil-anim 0.2s ease-out;
}

/* Shotgun gun-display: smaller, tucked into bottom-right like revolver */
#gun-display.gun-display-shotgun {
    width: 260px;
    height: 260px;
    top: 86%;
    right: -35px;
    transform: translateY(-50%) rotate(1deg);
}

/* Shotgun shell display — single composite image showing 0, 1, or 2 shells */
.bullet-unit.shotgun-shell-display {
    width: 100px;
    height: 50px;
    border-radius: 0;
    background-size: contain;
    background-position: center;
}

#reload-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 50px;
    font-size: 24px;
    background: #e67e22;
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.5);
    z-index: 21;
    display: none;
}

#reload-btn:disabled {
    background: #7f8c8d;
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- POST-EFFECTS & HUD --- */
#damage-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 50%, rgba(231, 76, 60, 0.4) 100%);
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    transition: opacity 0.2s;
}

#cooldown-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
}

#cooldown-bar {
    height: 100%;
    width: 0%;
    background: #f1c40f;
    box-shadow: 0 0 10px #f39c12;
    transition: width 0.05s linear;
}

/* Blood splash — on-hit "got shot" feel. Irregular dark-red spatter sprayed
   across the screen ("blood on the lens"), biased to the edges + corners with a
   vignette so the centre stays readable. The .hit class (added by
   renderer.showPlayerDamageEffect) runs a sharp punch-in → ease-out fade and
   re-triggers on rapid consecutive hits; --blood-intensity scales the peak
   opacity with the size of the hit (light chip vs. heavy blast). */
#blood-splash {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 19;
    background:
        radial-gradient(circle at 10% 18%, rgba(125,2,2,0.90) 0%, rgba(125,2,2,0.45) 6%, transparent 13%),
        radial-gradient(circle at 88% 26%, rgba(150,4,4,0.85) 0%, rgba(150,4,4,0.40) 6%, transparent 12%),
        radial-gradient(circle at 80% 80%, rgba(110,0,0,0.88) 0%, rgba(110,0,0,0.42) 7%, transparent 15%),
        radial-gradient(circle at 18% 84%, rgba(140,2,2,0.82) 0%, rgba(140,2,2,0.40) 6%, transparent 13%),
        radial-gradient(circle at 60% 12%, rgba(130,0,0,0.70) 0%, transparent 9%),
        radial-gradient(circle at 36% 30%, rgba(120,0,0,0.55) 0%, transparent 6%),
        radial-gradient(circle at 70% 55%, rgba(120,0,0,0.50) 0%, transparent 6%),
        radial-gradient(ellipse at center, transparent 42%, rgba(80,0,0,0.60) 100%);
}

#blood-splash.hit {
    animation: hn-blood-hit 650ms ease-out forwards;
}

@keyframes hn-blood-hit {
    0%   { opacity: 0; transform: scale(1.07); }
    10%  { opacity: var(--blood-intensity, 0.85); transform: scale(1); }
    60%  { opacity: calc(var(--blood-intensity, 0.85) * 0.8); }
    100% { opacity: 0; transform: scale(1); }
}

/* A couple of drips running down from the top spatter for extra feel. */
#blood-splash::before,
#blood-splash::after {
    content: '';
    position: absolute;
    top: 0;
    width: 9px;
    height: 0;
    background: linear-gradient(to bottom, rgba(120,0,0,0.90), rgba(120,0,0,0));
    border-radius: 0 0 7px 7px;
    opacity: 0;
}
#blood-splash::before { left: 16%; }
#blood-splash::after  { right: 24%; width: 7px; }
#blood-splash.hit::before { animation: hn-blood-drip 700ms ease-in forwards; }
#blood-splash.hit::after  { animation: hn-blood-drip 700ms ease-in 80ms forwards; }

@keyframes hn-blood-drip {
    0%   { height: 0;   opacity: 0; }
    25%  { opacity: 0.85; }
    100% { height: 16%; opacity: 0; }
}

#hit-message {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 3px 3px 6px black;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

#hit-message.headshot {
    color: #e74c3c;
    font-size: 60px;
}

.damage-number {
    position: fixed;
    font-size: 48px;
    font-weight: bold;
    color: #ff6b6b;
    text-shadow: 2px 2px 4px black;
    z-index: 26;
    pointer-events: none;
    animation: damageFloat 1s ease-out forwards;
}

#status {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #e74c3c;
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s;
}

/* --- DEATH ANIMATION --- */
/* Phase 1: spin in place (1.5s), Phase 2: fall to ground via rotateX (0.5s) */
@keyframes spin-and-fall {

    /* Phase 1 — Spin in place (0% to 75% = 1.5s of 2s total) */
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    25% {
        transform: rotateY(480deg);
        opacity: 1;
    }

    50% {
        transform: rotateY(960deg);
        opacity: 1;
    }

    75% {
        transform: rotateY(1440deg);
        opacity: 1;
    }

    /* Phase 2 — Fall flat to ground (75% to 100% = 0.5s) */
    100% {
        transform: rotateY(1440deg) rotateX(90deg);
        opacity: 0;
    }
}

#enemy.anim-death #enemy-sprite {
    animation: spin-and-fall 2s ease-in forwards;
    transform-origin: center bottom;
}

#enemy.anim-death .overhead-hp {
    display: none;
}

/* --- RECAP SCREEN — WoodTheme port (SandCard body + SaddlePanel zones)
       The DOM/HTML and the JS that drives it are unchanged; this is a pure
       CSS retheme matching the rest of the design refacto. */
#game-over-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(15, 8, 4, 0.78);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(4px);
    animation: hn-popup-fade 220ms ease-out;
}

.recap-poster {
    position: relative;
    background: linear-gradient(to bottom,
            var(--hn-sand-light) 0%,
            var(--hn-sand) 45%,
            var(--hn-tumbleweed) 100%);
    width: 92%;
    max-width: 380px;
    max-height: calc(100vh - 40px);
    padding: 0 0 14px;
    border: 2.5px solid var(--hn-saddle);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.7),
        inset 0 -2px 6px rgba(107, 59, 34, 0.3),
        0 4px 0 var(--hn-saddle-dark),
        0 10px 24px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: var(--hn-font-body);
    color: var(--hn-saddle-dark);
    overflow: hidden;
    animation: hn-popup-rise 280ms cubic-bezier(.18, .9, .32, 1.2);
}

/* inner hairline (matches SandCard) */
.recap-poster::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid var(--hn-saddle);
    opacity: 0.32;
    border-radius: 11px;
    pointer-events: none;
    z-index: 0;
}

.recap-poster > * {
    position: relative;
    z-index: 1;
    width: 100%;
}

#blood-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    pointer-events: none;
    background: radial-gradient(circle, transparent 40%, rgba(139, 0, 0, 0.8) 90%),
        url('../assets/images/blood_splash.png') no-repeat center center;
    background-size: cover;
    animation: fade-in-blood 0.5s ease-out forwards;
}

@keyframes fade-in-blood {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- DEATH VIGNETTE (dramatic end-game fade) --- */
#death-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 95;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.9) 70%, rgba(0, 0, 0, 1) 100%);
}

#death-vignette.active {
    animation: vignette-close 2.5s ease-in forwards;
}

@keyframes vignette-close {
    0% {
        opacity: 0;
        background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.6) 100%);
    }

    40% {
        opacity: 1;
        background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.9) 100%);
    }

    100% {
        opacity: 1;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 1) 100%);
    }
}

/* ====== Zone 1: Header WIN / LOSE — saddle-wood plate with star dividers ====== */
.recap-header-zone {
    position: relative;
    width: 100%;
    padding: 18px 20px 12px;
    text-align: center;
    border-bottom: 2px solid var(--hn-saddle-dark);
    overflow: hidden;
}

/* WIN: deep green plate (mirrors achievements claimed-tier palette) */
.recap-header-win {
    background: linear-gradient(to bottom, #5A8A40 0%, #3F6B26 55%, #2E4D22 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}

/* LOSE: rust plate */
.recap-header-lose {
    background: linear-gradient(to bottom,
            var(--hn-rust-light) 0%,
            var(--hn-rust) 50%,
            var(--hn-rust-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}

/* diagonal weave on header */
.recap-header-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: repeating-linear-gradient(45deg,
            rgba(242, 231, 210, 0.2) 0 6px,
            transparent 6px 14px);
}

.recap-header-zone > * { position: relative; z-index: 1; }

.recap-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 4px;
}

.recap-star {
    font-size: 18px;
    color: var(--hn-gold-light);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 0 4px rgba(244, 195, 106, 0.45));
}

.recap-header {
    font-family: var(--hn-font-head);
    font-size: 26px;
    color: var(--hn-dust);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.08em;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 0 12px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

.recap-pts-delta {
    font-family: var(--hn-font-head);
    font-size: 14px;
    font-style: italic;
    letter-spacing: 0.16em;
    margin-top: 4px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.recap-header-win .recap-pts-delta {
    color: #C8E6A0;
}

.recap-header-lose .recap-pts-delta {
    color: var(--hn-dust);
    opacity: 0.92;
}

/* ====== Zone 2: Portraits side by side ====== */
.recap-portraits-zone {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px 8px;
    width: 100%;
    box-sizing: border-box;
}

.recap-portrait-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.recap-you-label,
.recap-opp-label {
    font-family: var(--hn-font-head);
    font-size: 9px;
    color: var(--hn-saddle);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 5px;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
}

/* Head-cropped portrait — saddle-bordered tile on a sand surface */
.recap-portrait {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: linear-gradient(to bottom,
            rgba(255, 245, 220, 0.5) 0%,
            rgba(228, 201, 154, 0.5) 100%);
    border: 2px solid var(--hn-saddle);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.6),
        0 2px 0 var(--hn-saddle-dark),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.recap-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

/* Winner portrait gets a gold halo */
.recap-portrait-winner {
    border: 2px solid var(--hn-gold);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.6),
        0 2px 0 var(--hn-saddle-dark),
        0 0 14px rgba(244, 195, 106, 0.65),
        0 0 28px rgba(244, 195, 106, 0.3);
}

/* Loser variants — keep saddle/rust borders, less prominent */
.recap-portrait-loser {
    border-color: var(--hn-saddle);
    opacity: 0.92;
}

.recap-portrait-loser-red {
    border-color: var(--hn-rust-deep);
    opacity: 0.92;
}

.recap-portrait-name {
    font-family: var(--hn-font-head);
    font-size: 13px;
    color: var(--hn-saddle-dark);
    margin-top: 6px;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

.recap-portrait-weapon {
    font-family: var(--hn-font-typewriter);
    font-size: 9.5px;
    color: var(--hn-saddle);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-top: 2px;
    opacity: 0.85;
}

/* VS pill — gold gradient with saddle border */
.recap-vs-badge {
    font-family: var(--hn-font-head);
    font-size: 13px;
    color: var(--hn-saddle-dark);
    background: linear-gradient(to bottom,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 50%,
            #B57420 100%);
    padding: 5px 12px;
    border-radius: 10px;
    margin-top: 32px;
    border: 2px solid var(--hn-saddle-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.45),
        0 2px 0 var(--hn-saddle-dark),
        0 0 10px rgba(244, 195, 106, 0.35);
    flex-shrink: 0;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.4);
}

/* Post-game message bubble — sand pill with saddle tail */
.recap-bubble {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-110%);
    background: linear-gradient(to bottom, var(--hn-sand-light) 0%, var(--hn-sand) 100%);
    color: var(--hn-saddle-dark);
    font-family: var(--hn-font-head);
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    border-radius: 10px;
    border: 2px solid var(--hn-saddle);
    white-space: nowrap;
    z-index: 5;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.7),
        0 2px 0 var(--hn-saddle-dark);
    animation: bubble-pop 0.3s ease-out;
}

.recap-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--hn-saddle);
}

@keyframes bubble-pop {
    0% {
        transform: translateX(-50%) translateY(-110%) scale(0);
        opacity: 0;
    }

    70% {
        transform: translateX(-50%) translateY(-110%) scale(1.15);
    }

    100% {
        transform: translateX(-50%) translateY(-110%) scale(1);
        opacity: 1;
    }
}

/* Post-game message buttons — saddle mini-pills */
.recap-message-buttons {
    display: flex;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 0 16px 10px;
    box-sizing: border-box;
}

.recap-msg-btn {
    flex: 1;
    background: linear-gradient(to bottom,
            var(--hn-sand-light) 0%,
            var(--hn-sand) 50%,
            var(--hn-tumbleweed) 100%);
    border: 2px solid var(--hn-saddle);
    color: var(--hn-saddle-dark);
    font-family: var(--hn-font-head);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 4px;
    border-radius: 8px;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.6),
        0 2px 0 var(--hn-saddle-dark);
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.recap-msg-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(60, 30, 10, 0.4);
}

.recap-msg-btn.sent {
    background: linear-gradient(to bottom,
            var(--hn-rust-light) 0%,
            var(--hn-rust) 50%,
            var(--hn-rust-deep) 100%);
    border-color: var(--hn-saddle-dark);
    color: var(--hn-dust);
    text-shadow: 0 1px 0 rgba(74, 19, 10, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 205, 0.35),
        0 2px 0 var(--hn-saddle-dark);
}

.recap-msg-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ====== Zone 3: Comparative stats — sand surface inside the recap ====== */
.recap-stats-zone {
    position: relative;
    width: calc(100% - 32px);
    margin: 0 16px 10px;
    background: linear-gradient(to bottom,
            rgba(255, 245, 220, 0.5) 0%,
            rgba(228, 201, 154, 0.45) 100%);
    border: 2px solid var(--hn-saddle);
    border-radius: 10px;
    padding: 7px 12px 4px;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.55),
        0 2px 0 var(--hn-saddle-dark);
}

.recap-stats-header {
    display: flex;
    justify-content: space-between;
    padding: 0 4px 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(74, 39, 19, 0.3);
    font-family: var(--hn-font-head);
    font-size: 10px;
    color: var(--hn-saddle);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
}

.stat-row-v2 {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-family: var(--hn-font-body);
    font-size: 13px;
    position: relative;
}

.stat-row-v2:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 39, 19, 0.18), transparent);
}

.stat-val-left,
.stat-val-right {
    flex: 1;
    font-family: var(--hn-font-head);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
}

.stat-val-left { text-align: left; }
.stat-val-right { text-align: right; }

.stat-label {
    flex: 1.2;
    text-align: center;
    font-family: var(--hn-font-head);
    font-size: 9.5px;
    color: var(--hn-saddle);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
}

.stat-better {
    color: #3F6B26;
}

.stat-worse {
    color: var(--hn-rust-deep);
}

.stat-neutral {
    color: var(--hn-saddle-dark);
}

/* ====== Zone 4: Grouped rewards — saddle wood plate with weave ====== */
.recap-rewards-zone {
    position: relative;
    width: calc(100% - 32px);
    margin: 0 16px 10px;
    box-sizing: border-box;
    background: linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 55%,
            var(--hn-saddle-dark) 100%);
    border: 2px solid var(--hn-saddle-dark);
    border-radius: 10px;
    padding: 9px 10px 10px;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(242, 231, 210, 0.25),
        inset 0 -2px 5px rgba(0, 0, 0, 0.32),
        0 2px 0 var(--hn-saddle-night);
    overflow: hidden;
}

.recap-rewards-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: repeating-linear-gradient(45deg,
            rgba(242, 231, 210, 0.18) 0 6px,
            transparent 6px 14px);
}

.recap-rewards-zone > * { position: relative; z-index: 1; }

.recap-rewards-label {
    font-family: var(--hn-font-head);
    font-size: 9px;
    color: var(--hn-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 7px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.recap-rewards-row {
    display: flex;
    justify-content: space-around;
    gap: 8px;
}

.recap-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    opacity: 0;
    transform: translateY(20px);
}

.recap-pill.animate {
    animation: pillSlideUp 0.4s ease-out forwards;
}

@keyframes pillSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pill-value {
    font-family: var(--hn-font-head);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.55);
}

.pill-label {
    font-family: var(--hn-font-typewriter);
    font-size: 9px;
    color: rgba(242, 231, 210, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 2px;
}

.recap-pill-pts .pill-value {
    color: #C8E6A0;
}

.recap-pill-pts.loss .pill-value {
    color: #F2A088;
}

.recap-pill-xp .pill-value {
    color: #B8D4E8;
}

.recap-pill-gold .pill-value {
    color: var(--hn-gold-light);
}

.xp-elixir-badge {
    display: inline-block;
    background: linear-gradient(to bottom, #6B96C8 0%, #3F6B96 100%);
    color: var(--hn-dust);
    font-family: var(--hn-font-head);
    font-size: 9px;
    letter-spacing: 0.10em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    border: 1px solid #2A4F75;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* Sundown Showdown ×2 / ×4 reward badge — warm gold/rust to distinguish it
   from the cool-blue Experience Elixir badge. Same dimensions. */
.event-multiplier-badge {
    display: inline-block;
    background: linear-gradient(to bottom, var(--hn-gold-light) 0%, var(--hn-rust) 100%);
    color: var(--hn-dust);
    font-family: var(--hn-font-head);
    font-size: 9px;
    letter-spacing: 0.10em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    border: 1px solid var(--hn-rust-deep);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* ====== Zone 5: Collect button — ClaimBtn gold/rust gradient with
   warm halo pulse + diagonal sheen sweep ====== */
.collect-btn {
    position: relative;
    overflow: hidden;
    display: block;
    width: calc(100% - 32px);
    box-sizing: border-box;
    margin: 0 16px 12px;
    padding: 14px;
    background: linear-gradient(to bottom,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 50%,
            var(--hn-rust) 100%);
    color: var(--hn-dust);
    font-family: var(--hn-font-head);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1.5px 0 rgba(74, 19, 10, 0.55);
    border: 2px solid var(--hn-saddle-dark);
    border-radius: 11px;
    cursor: pointer;
    box-shadow:
        0 3px 0 var(--hn-saddle-dark),
        0 0 14px rgba(244, 195, 106, 0.45);
    animation: glowPulse 1.5s ease-in-out infinite;
    transition: transform 0.1s;
}

/* Diagonal white sheen that sweeps across every ~3.2s */
.collect-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.65) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: hn-wampum-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}

.collect-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--hn-saddle-dark);
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow:
            0 3px 0 var(--hn-saddle-dark),
            0 0 14px rgba(244, 195, 106, 0.45);
    }
    50% {
        box-shadow:
            0 3px 0 var(--hn-saddle-dark),
            0 0 24px rgba(244, 195, 106, 0.75),
            0 0 36px rgba(166, 75, 46, 0.35);
    }
}

/* ====== Level Up Screen ====== */
#level-up-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 110;
    background: radial-gradient(ellipse at center, rgba(60, 30, 10, 0.75), rgba(0, 0, 0, 0.92));
    display: flex;
    justify-content: center;
    align-items: center;
    animation: levelup-overlay-in 0.5s ease-out both;
    overflow: hidden;
}

@keyframes levelup-overlay-in {
    from {
        background: rgba(0, 0, 0, 0);
    }

    to {
        background: radial-gradient(ellipse at center, rgba(60, 30, 10, 0.75), rgba(0, 0, 0, 0.92));
    }
}

/* --- Warm radial halo behind the poster --- */
.level-up-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
            rgba(240, 192, 64, 0.30) 0%,
            rgba(200, 110, 40, 0.12) 35%,
            transparent 70%);
    animation: levelup-rays-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

/* --- Rotating sunburst behind new level number --- */
.level-up-starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
        conic-gradient(from 0deg,
            rgba(240, 192, 64, 0) 0deg,
            rgba(240, 192, 64, 0.35) 10deg,
            rgba(240, 192, 64, 0) 20deg,
            rgba(240, 192, 64, 0) 40deg,
            rgba(240, 192, 64, 0.35) 50deg,
            rgba(240, 192, 64, 0) 60deg,
            rgba(240, 192, 64, 0) 80deg,
            rgba(240, 192, 64, 0.35) 90deg,
            rgba(240, 192, 64, 0) 100deg,
            rgba(240, 192, 64, 0) 120deg,
            rgba(240, 192, 64, 0.35) 130deg,
            rgba(240, 192, 64, 0) 140deg,
            rgba(240, 192, 64, 0) 160deg,
            rgba(240, 192, 64, 0.35) 170deg,
            rgba(240, 192, 64, 0) 180deg,
            rgba(240, 192, 64, 0) 200deg,
            rgba(240, 192, 64, 0.35) 210deg,
            rgba(240, 192, 64, 0) 220deg,
            rgba(240, 192, 64, 0) 240deg,
            rgba(240, 192, 64, 0.35) 250deg,
            rgba(240, 192, 64, 0) 260deg,
            rgba(240, 192, 64, 0) 280deg,
            rgba(240, 192, 64, 0.35) 290deg,
            rgba(240, 192, 64, 0) 300deg,
            rgba(240, 192, 64, 0) 320deg,
            rgba(240, 192, 64, 0.35) 330deg,
            rgba(240, 192, 64, 0) 340deg,
            rgba(240, 192, 64, 0) 360deg);
    mask-image: radial-gradient(circle, transparent 40px, #000 140px);
    -webkit-mask-image: radial-gradient(circle, transparent 40px, #000 140px);
    opacity: 0;
    animation: starburst-in 0.4s 0.45s ease-out both, starburst-spin 18s 0.45s linear infinite;
}

@keyframes starburst-in {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
}

@keyframes starburst-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes levelup-rays-pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* --- Floating gold dust particles --- */
.level-up-dust {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f0c040;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 6px 2px rgba(240, 192, 64, 0.4);
}

.level-up-dust-1 {
    animation: dust-float 4s 0.3s ease-in-out infinite;
    left: 15%;
    top: 60%;
}

.level-up-dust-2 {
    animation: dust-float 3.5s 0.8s ease-in-out infinite;
    left: 80%;
    top: 30%;
    width: 3px;
    height: 3px;
}

.level-up-dust-3 {
    animation: dust-float 5s 0.1s ease-in-out infinite;
    left: 25%;
    top: 25%;
    width: 5px;
    height: 5px;
}

.level-up-dust-4 {
    animation: dust-float 4.2s 1.2s ease-in-out infinite;
    left: 70%;
    top: 65%;
    width: 3px;
    height: 3px;
}

.level-up-dust-5 {
    animation: dust-float 3.8s 0.6s ease-in-out infinite;
    left: 50%;
    top: 15%;
}

.level-up-dust-6 {
    animation: dust-float 4.5s 1.5s ease-in-out infinite;
    left: 35%;
    top: 75%;
    width: 3px;
    height: 3px;
}

@keyframes dust-float {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    20% {
        opacity: 0.9;
        transform: translateY(-20px) scale(1);
    }

    80% {
        opacity: 0.6;
        transform: translateY(-60px) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.3);
    }
}

/* --- Parchment Wanted-Poster --- */
.level-up-poster {
    background-color: #d8b683;
    background-image:
        /* Subtle aged fibres */
        repeating-linear-gradient(95deg,
            rgba(93, 58, 26, 0.04) 0 2px,
            transparent 2px 6px),
        repeating-linear-gradient(5deg,
            rgba(93, 58, 26, 0.03) 0 1px,
            transparent 1px 5px),
        /* Warm parchment gradient */
        radial-gradient(ellipse at 30% 20%, #e8d5a5 0%, #c9a876 60%, #a88048 100%);
    width: 320px;
    padding: 30px 22px 22px;
    border: 5px solid #3e2210;
    border-radius: 8px;
    box-shadow:
        0 0 0 2px #8b6914,
        0 0 60px rgba(240, 192, 64, 0.35),
        0 0 120px rgba(240, 130, 40, 0.18),
        0 12px 30px rgba(0, 0, 0, 0.55),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -2px 6px rgba(80, 40, 10, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'BJ Cree', serif;
    position: relative;
    overflow: hidden;
    animation:
        levelup-poster-slam 0.55s cubic-bezier(0.17, 0.89, 0.32, 1.28) both,
        levelup-poster-shake 0.35s 0.55s ease-out;
}

@keyframes levelup-poster-slam {
    0% {
        transform: translateY(-60px) scale(0.6) rotate(-3deg);
        opacity: 0;
    }

    55% {
        transform: translateY(8px) scale(1.04) rotate(1deg);
        opacity: 1;
    }

    80% {
        transform: translateY(-3px) scale(0.98) rotate(-0.5deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes levelup-poster-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-3px) rotate(-0.3deg); }
    40%      { transform: translateX(3px) rotate(0.3deg); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
}

/* Inner tan border (double-frame wanted-poster look) */
.level-up-poster::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px dashed rgba(93, 58, 26, 0.55);
    border-radius: 4px;
    pointer-events: none;
}

/* Noise/grain for aged paper */
.level-up-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: 4px;
    mix-blend-mode: multiply;
}

/* --- Sheriff-star rivets in each corner --- */
.level-up-rivet {
    position: absolute;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #8b6914;
    background: radial-gradient(circle at 35% 30%, #e4c070 0%, #b8863a 55%, #6b4220 100%);
    border: 2px solid #3e2210;
    border-radius: 50%;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
    animation: rivet-glint 3.5s ease-in-out infinite;
}

.level-up-rivet-tl { top: 6px; left: 6px;  animation-delay: 0s; }
.level-up-rivet-tr { top: 6px; right: 6px; animation-delay: 0.8s; }
.level-up-rivet-bl { bottom: 6px; left: 6px;  animation-delay: 1.6s; }
.level-up-rivet-br { bottom: 6px; right: 6px; animation-delay: 2.4s; }

@keyframes rivet-glint {
    0%, 100% { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.4); }
    50%      { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 0 6px rgba(240, 192, 64, 0.5); }
}

/* --- Sparkles --- */
.level-up-sparkle {
    position: absolute;
    font-size: 18px;
    color: #ffe28a;
    opacity: 0;
    animation: levelup-sparkle-spin 2.5s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(240, 192, 64, 0.9), 0 0 18px rgba(240, 140, 40, 0.45);
    z-index: 3;
}

.level-up-sparkle-tl {
    top: 34px;
    left: 44px;
    animation-delay: 0s;
}

.level-up-sparkle-tr {
    top: 34px;
    right: 44px;
    animation-delay: 1.2s;
}

@keyframes levelup-sparkle-spin {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.5);
    }

    15% {
        opacity: 1;
        transform: rotate(40deg) scale(1.2);
    }

    50% {
        opacity: 0.5;
        transform: rotate(180deg) scale(0.8);
    }

    85% {
        opacity: 1;
        transform: rotate(320deg) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: rotate(360deg) scale(0.5);
    }
}

/* --- Ornament stars --- */
.level-up-ornament-top {
    font-size: 10px;
    color: #8b3a1a;
    letter-spacing: 10px;
    margin-bottom: 4px;
    opacity: 0.7;
    animation: levelup-fade-in 0.6s 0.3s ease-out both;
}

@keyframes levelup-fade-in {
    from { opacity: 0; }
    to   { opacity: 0.7; }
}

/* --- Header — burnt-red Western title with gold emboss --- */
.level-up-header {
    font-size: 34px;
    color: #8b3a1a;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 0 rgba(139, 58, 26, 0.3),
        0 3px 6px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(240, 192, 64, 0.45);
    margin-bottom: 6px;
    letter-spacing: 4px;
    font-weight: 900;
    animation: levelup-header-glow 2.4s ease-in-out infinite, levelup-header-in 0.6s 0.15s ease-out both;
    position: relative;
    z-index: 2;
}

@keyframes levelup-header-in {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes levelup-header-glow {
    0%, 100% {
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.5),
            0 2px 0 rgba(139, 58, 26, 0.3),
            0 3px 6px rgba(0, 0, 0, 0.35),
            0 0 20px rgba(240, 192, 64, 0.45);
    }
    50% {
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.6),
            0 2px 0 rgba(139, 58, 26, 0.3),
            0 3px 6px rgba(0, 0, 0, 0.4),
            0 0 34px rgba(240, 192, 64, 0.85),
            0 0 60px rgba(240, 140, 40, 0.4);
    }
}

/* --- Level numbers --- */
.level-up-levels {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.level-up-level-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.level-up-label {
    font-size: 11px;
    color: #5d3a1a;
    font-family: 'BJ Cree', serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 4px;
    opacity: 0.75;
}

.level-up-old {
    font-size: 44px;
    color: #8b6f47;
    font-family: 'BJ Cree', serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: levelup-old-in 0.5s 0.3s ease-out both;
    opacity: 0.7;
}

@keyframes levelup-old-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.level-up-arrow {
    font-size: 26px;
    color: #8b3a1a;
    margin-top: -14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 8px rgba(240, 192, 64, 0.4);
    animation: levelup-arrow-in 0.4s 0.45s ease-out both, levelup-arrow-nudge 1.8s 0.9s ease-in-out infinite;
}

@keyframes levelup-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

@keyframes levelup-arrow-in {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }

    100% {
        opacity: 0.8;
        transform: translateX(0);
    }
}

/* Glow behind new level number */
.level-up-new-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -55%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(240, 192, 64, 0.55) 0%,
        rgba(240, 140, 40, 0.25) 45%,
        transparent 75%);
    animation: levelup-new-glow-pulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes levelup-new-glow-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -55%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -55%) scale(1.35); }
}

.level-up-new {
    font-size: 68px;
    font-family: 'BJ Cree', serif;
    font-weight: 900;
    color: #f0c040;
    background: linear-gradient(180deg, #fff1b8 0%, #f0c040 45%, #b8863a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 2px 0 #6b4220)
        drop-shadow(0 0 14px rgba(240, 192, 64, 0.8))
        drop-shadow(0 0 28px rgba(240, 140, 40, 0.45));
    position: relative;
    z-index: 1;
    animation: levelup-new-bounce 0.7s 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.45) both;
}

@keyframes levelup-new-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    75% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Ornament divider --- */
.level-up-ornament-divider {
    width: 70%;
    height: 3px;
    background:
        linear-gradient(90deg, transparent, rgba(93, 58, 26, 0.5) 20%, rgba(93, 58, 26, 0.5) 80%, transparent),
        linear-gradient(180deg, transparent 45%, #8b6914 45%, #8b6914 55%, transparent 55%);
    margin: 6px 0 14px;
    animation: levelup-fade-in-full 0.5s 0.6s ease-out both;
    position: relative;
}

.level-up-ornament-divider::before,
.level-up-ornament-divider::after {
    content: '\2605';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #8b6914;
}
.level-up-ornament-divider::before { left: -4px; }
.level-up-ornament-divider::after  { right: -4px; }

@keyframes levelup-fade-in-full {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- No-reward variant --- */
.level-up-no-reward {
    margin-bottom: 16px;
    animation: levelup-fade-in-full 0.5s 0.65s ease-out both;
}

.level-up-motivational {
    font-size: 15px;
    color: #5d3a1a;
    font-family: 'BJ Cree', serif;
    margin: 0 0 10px 0;
    font-style: italic;
    letter-spacing: 0.5px;
}

.level-up-next-hint {
    font-size: 11px;
    color: #8b6914;
    font-family: 'BJ Cree', serif;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.level-up-next-level {
    font-size: 34px;
    font-family: 'BJ Cree', serif;
    font-weight: 900;
    color: #8b3a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 12px rgba(240, 192, 64, 0.4);
}

/* --- Reward variant --- */
.level-up-reward-section {
    width: 100%;
    margin-bottom: 16px;
    animation: levelup-fade-in-full 0.5s 0.65s ease-out both;
}

.level-up-section-title {
    font-size: 13px;
    color: #8b3a1a;
    font-family: 'BJ Cree', serif;
    letter-spacing: 4px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    position: relative;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.level-up-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(93, 58, 26, 0.5), transparent);
}

.level-up-reward-card {
    width: 100%;
    padding: 12px 0;
    border: 2px solid #6b4220;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.level-up-reward-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.35), transparent);
    animation: card-shimmer 3s 1s ease-in-out infinite;
}

@keyframes card-shimmer {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}

.level-up-gold-card {
    background: linear-gradient(180deg, #e4c070 0%, #c9a05a 60%, #a67c2e 100%);
}

.level-up-card-value {
    font-size: 22px;
    font-family: 'BJ Cree', serif;
    font-weight: 900;
    color: #3e2210;
    margin-bottom: 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.level-up-card-label {
    font-size: 10px;
    color: #3e2210;
    font-family: 'BJ Cree', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.75;
}

.level-up-item-card {
    background: linear-gradient(180deg, #d6b37d 0%, #b8935a 60%, #96703a 100%);
}

.level-up-item-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Tier accent colors */
.level-up-item-card.tier-1 {
    border-color: rgba(76, 175, 80, 0.5);
}

.level-up-item-card.tier-1 .level-up-card-value {
    color: #66bb6a;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.level-up-item-card.tier-2 {
    border-color: rgba(66, 165, 245, 0.5);
}

.level-up-item-card.tier-2 .level-up-card-value {
    color: #64b5f6;
    text-shadow: 0 0 8px rgba(66, 165, 245, 0.3);
}

.level-up-item-card.tier-3 {
    border-color: rgba(255, 152, 0, 0.5);
}

.level-up-item-card.tier-3 .level-up-card-value {
    color: #ffb74d;
    text-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
}

/* --- Buttons: Western leather plank --- */
.level-up-poster .recap-button {
    background: linear-gradient(180deg, #d6b37d 0%, #b8935a 45%, #a07840 100%);
    color: #2c1507;
    font-family: 'BJ Cree', serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 2px;
    border: 2px solid #6b4220;
    border-radius: 999px;
    padding: 12px 18px;
    box-shadow:
        0 4px 0 #3e2210,
        0 6px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    width: 100%;
    margin: 4px 0 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
    animation: btn-pulse 2.2s 1s ease-in-out infinite;
}

.level-up-poster .recap-button:active {
    transform: translateY(3px);
    box-shadow:
        0 1px 0 #3e2210,
        0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@keyframes btn-pulse {
    0%, 100% { box-shadow: 0 4px 0 #3e2210, 0 6px 12px rgba(0,0,0,0.35), 0 0 0 rgba(240, 192, 64, 0), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.2); }
    50%      { box-shadow: 0 4px 0 #3e2210, 0 6px 12px rgba(0,0,0,0.35), 0 0 24px rgba(240, 192, 64, 0.55), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.2); }
}

.level-up-btn-animated {
    animation: levelup-btn-in 0.5s 0.75s ease-out both;
}

@keyframes levelup-btn-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.level-up-claim-btn {
    background: linear-gradient(180deg, #e8c370 0%, #c89b3c 45%, #8b6914 100%) !important;
    color: #2c1507 !important;
    font-size: 17px !important;
}

/* Claim animation — card glow */
.level-up-reward-card.claimed {
    animation: card-glow 0.8s ease-out;
}

@keyframes card-glow {
    0% {
        box-shadow: 0 0 0 rgba(240, 192, 64, 0);
        transform: scale(1);
    }

    30% {
        box-shadow: 0 0 30px rgba(240, 192, 64, 0.7);
        transform: scale(1.03);
    }

    100% {
        box-shadow: 0 0 0 rgba(240, 192, 64, 0);
        transform: scale(1);
    }
}

/* ====== Pre-Battle Screen ====== */
#pre-battle-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/images/prebattle/matchmaking-screen.jpg') center center / cover no-repeat;
    /* z-index: 150 — above every game/lobby root-level element (background
       z:1, crosshair z:10, flash z:15, blood-splash z:19, hit-message z:25,
       damage-indicator z:50, hud/cooldown z:100, overlay z:30), below the
       match-found banner (z:2000) so the banner can slide in briefly on
       top. Creates a stacking context that traps the emote bubble (z:2100
       inside pre-battle): the bubble will therefore be hidden during the
       banner's 2.4s slide-in animation. In practice players don't send
       emotes that early, so the overlap is acceptable. */
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pre-battle-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.pre-battle-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 30px 20px 120px;
}

.pre-battle-vs {
    font-family: 'BJ Cree', serif;
    font-size: 36px;
    color: #f1c40f;
    text-shadow: 3px 3px 0 #000, 0 0 20px rgba(241, 196, 15, 0.5);
    margin-bottom: 6px;
}

.pre-battle-opponent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

/* Shared positioning origin for the sprite + weapon overlays. Without this
   wrapper the overlays pin to the top of .pre-battle-opponent (which is flex
   column with justify-content: center), while the sprite sits vertically
   centered — so the weapon floats above the shoulder. */
.pre-battle-sprite-box {
    position: relative;
    width: 220px;
    height: 340px;
    flex: 0 0 auto;
}

.pre-battle-sprite {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/skins/base.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* Eye-skin overlay — PvP reward cosmetic. Stacked on top of the skin in the
   same 220×340 box with identical size+anchor rules, so the eye PNG lands
   on the character's head (eye assets are authored on the same 1792×2400
   canvas proportions as skins). z-index between skin and weapon. */
.pre-battle-eye-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 2;
    pointer-events: none;
}

.pre-battle-weapon-overlay {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    width: 180px;
    height: 270px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 3;
    pointer-events: none;
}

/* Single-weapon overlay for pre-battle. Same pattern as lobby: weapon and
   _no_hand skin assets share the 1792×2400 canvas, so matching the sprite's
   box dimensions + anchor makes the weapon hand land on the skin's wrist. */
.pre-battle-weapon-single {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 3;
    pointer-events: none;
}

/* No-hand skin variants for the pre-battle sprite. Each mirrors the normal
   skin rule but swaps to the `_no_hand` asset. Applied only when a weapon
   overlay will be rendered on top (see showPreBattle logic). */
.pre-battle-sprite.skin-base.no-hand         { background-image: url('../assets/images/skins/base_no_hand.png'); }
.pre-battle-sprite.skin-black_spurs.no-hand  { background-image: url('../assets/images/skins/black_spurs_no_hand.png'); }
.pre-battle-sprite.skin-dark_rider.no-hand   { background-image: url('../assets/images/skins/dark_rider_no_hand.png'); }
.pre-battle-sprite.skin-doc_jackpot.no-hand  { background-image: url('../assets/images/skins/doc_jackpot_no_hand.png'); }
.pre-battle-sprite.skin-el_magnifico.no-hand { background-image: url('../assets/images/skins/el_magnifico_no_hand.png'); }
.pre-battle-sprite.skin-iron_bjorn.no-hand   { background-image: url('../assets/images/skins/iron_bjorn_no_hand.png'); }
.pre-battle-sprite.skin-wanted_wade.no-hand  { background-image: url('../assets/images/skins/wanted_wade_no_hand.png'); }
.pre-battle-sprite.skin-yojimbo.no-hand      { background-image: url('../assets/images/skins/yojimbo_no_hand.png'); }
.pre-battle-sprite.skin-bandido.no-hand      { background-image: url('../assets/images/skins/s3/bandido_no_hand.png'); }
.pre-battle-sprite.skin-dynamitero.no-hand   { background-image: url('../assets/images/skins/s3/dynamitero_no_hand.png'); }
.pre-battle-sprite.skin-iron_hawk.no-hand    { background-image: url('../assets/images/skins/s3/indian_no_hand.png'); }
.pre-battle-sprite.skin-wolf.no-hand         { background-image: url('../assets/images/skins/s3/wolf_no_hand.png'); }
.pre-battle-sprite.skin-iron_dragon.no-hand  { background-image: url('../assets/images/skins/s3/The_Iron_Dragon_no_hand.png'); }
.pre-battle-sprite.skin-dracula.no-hand      { background-image: url('../assets/images/skins/s3/dracula_no_hand.png'); }
.pre-battle-sprite.skin-dark_ninja.no-hand   { background-image: url('../assets/images/skins/s3/dark_ninja_no_hand.png'); }
.pre-battle-sprite.skin-dune_ninja.no-hand   { background-image: url('../assets/images/skins/s3/dune_ninja_no_hand.png'); }
/* Season 4 */
.pre-battle-sprite.skin-stagecoach_driver.no-hand { background-image: url('../assets/images/skins/s4/stagecoach_driver_no_hand.png'); }
.pre-battle-sprite.skin-pinkerton.no-hand         { background-image: url('../assets/images/skins/s4/pinkerton_no_hand.png'); }
.pre-battle-sprite.skin-aztec_outlaw.no-hand      { background-image: url('../assets/images/skins/s4/aztec_outlaw_no_hand.png'); }
.pre-battle-sprite.skin-gravewalker.no-hand       { background-image: url('../assets/images/skins/s4/gravewalker_no_hand.png'); }
.pre-battle-sprite.skin-neon.no-hand              { background-image: url('../assets/images/skins/s4/neon/neon_no_hand.png'); }
.pre-battle-sprite.skin-quasar.no-hand            { background-image: url('../assets/images/skins/s4/quasar/quasar_no_hand.png'); }

.pre-battle-sprite.dummy {
    background-image: url('../assets/images/hn_dummy.png');
}

.pre-battle-sprite.ranger {
    background-image: url('../assets/images/skins/base.png');
}

.pre-battle-sprite.skin-base {
    background-image: url('../assets/images/skins/base.png');
}

.pre-battle-sprite.skin-mexican {
    background-image: url('../assets/images/skins/mexican.png');
}

.pre-battle-sprite.skin-gangsta {
    background-image: url('../assets/images/skins/gangsta.png');
}

.pre-battle-sprite.skin-matrix {
    background-image: url('../assets/images/skins/matrix.png');
}

.pre-battle-sprite.skin-desert {
    background-image: url('../assets/images/skins/desert.png');
}

.pre-battle-sprite.skin-officer {
    background-image: url('../assets/images/skins/officer.png');
}

.pre-battle-sprite.skin-indian {
    background-image: url('../assets/images/skins/indian.png');
}

/* v2.0 new skins — pre-battle */
.pre-battle-sprite.skin-dark_rider {
    background-image: url('../assets/images/skins/dark_rider.png');
}

.pre-battle-sprite.skin-mr_tenpenny {
    background-image: url('../assets/images/skins/mr_tenpenny.png');
}

.pre-battle-sprite.skin-wanted_wade {
    background-image: url('../assets/images/skins/wanted_wade.png');
}

.pre-battle-sprite.skin-doc_jackpot {
    background-image: url('../assets/images/skins/doc_jackpot.png');
}

.pre-battle-sprite.skin-gear_doc {
    background-image: url('../assets/images/skins/gear_doc.png');
}

.pre-battle-sprite.skin-el_magnifico {
    background-image: url('../assets/images/skins/el_magnifico.png');
}

.pre-battle-sprite.skin-al_saqr {
    background-image: url('../assets/images/skins/al_saqr.png');
}

.pre-battle-sprite.skin-iron_bjorn {
    background-image: url('../assets/images/skins/iron_bjorn.png');
}

.pre-battle-sprite.skin-yojimbo {
    background-image: url('../assets/images/skins/yojimbo.png');
}

.pre-battle-sprite.skin-black_spurs {
    background-image: url('../assets/images/skins/black_spurs.png');
}

.pre-battle-sprite.skin-inferno {
    background-image: url('../assets/images/skins/inferno.png');
}

/* Season 3 skins — pre-battle */
.pre-battle-sprite.skin-bandido {
    background-image: url('../assets/images/skins/s3/bandido.png');
}

.pre-battle-sprite.skin-dynamitero {
    background-image: url('../assets/images/skins/s3/dynamitero.png');
}

.pre-battle-sprite.skin-iron_hawk {
    background-image: url('../assets/images/skins/s3/indian.png');
}

.pre-battle-sprite.skin-wolf {
    background-image: url('../assets/images/skins/s3/wolf.png');
}

.pre-battle-sprite.skin-iron_dragon {
    background-image: url('../assets/images/skins/s3/The_Iron_Dragon.png');
}

.pre-battle-sprite.skin-dracula {
    background-image: url('../assets/images/skins/s3/dracula.png');
}

.pre-battle-sprite.skin-dark_ninja {
    background-image: url('../assets/images/skins/s3/dark_ninja.png');
}

.pre-battle-sprite.skin-dune_ninja {
    background-image: url('../assets/images/skins/s3/dune_ninja.png');
}

/* Season 4 skins + S3-leaderboard PvP rewards (neon/quasar) */
.pre-battle-sprite.skin-stagecoach_driver { background-image: url('../assets/images/skins/s4/stagecoach_driver.png'); }
.pre-battle-sprite.skin-pinkerton         { background-image: url('../assets/images/skins/s4/pinkerton.png'); }
.pre-battle-sprite.skin-aztec_outlaw      { background-image: url('../assets/images/skins/s4/aztec_outlaw.png'); }
.pre-battle-sprite.skin-gravewalker       { background-image: url('../assets/images/skins/s4/gravewalker.png'); }
.pre-battle-sprite.skin-neon              { background-image: url('../assets/images/skins/s4/neon/neon.png'); }
.pre-battle-sprite.skin-quasar            { background-image: url('../assets/images/skins/s4/quasar/quasar.png'); }

.pre-battle-sprite.skin-boss1_bad_bunny {
    background-image: url('../assets/images/skins/boss/boss1_bad_bunny.png');
}

.pre-battle-sprite.skin-boss2_mommy {
    background-image: url('../assets/images/skins/boss/boss2_mommy.png');
}

/* --- EMOTE BUBBLES (pre-duel) ---
   The emote PNGs are transparent-background speech-bubble cutouts, so the
   container must NOT add any circle/border/fill — render the image as-is. */
.emote-bubble {
    position: absolute;
    width: 110px;
    height: 110px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20;
    pointer-events: none;
}

/* Opponent bubble: root-level sibling of #pre-battle-screen (see index.html),
   positioned with viewport coordinates so it escapes pre-battle's stacking
   context (z:150) and the match-found banner (z:2000). The sprite sits in a
   flex-column centered horizontally; at rest its left edge is roughly at
   calc(50vw - 110px), so placing the bubble at calc(50vw - 165px) anchors
   it just to the LEFT of the head. top tuned to align with the sprite head
   in the pre-battle layout (sprite starts ~80-120px from top). */
#emote-bubble-opp {
    position: fixed;
    left: calc(50vw - 165px);
    top: 120px;
    z-index: 2100;
}

/* Own bubble: fixed just above the trigger row so self-feedback is always visible.
   Centered via calc() rather than translateX(-50%) so the pop-scale animation
   on .emote-bubble.pop doesn't override positioning. */
#emote-bubble-self {
    position: fixed !important;
    bottom: 210px;
    left: calc(50% - 55px);
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    width: 110px;
    height: 110px;
    z-index: 2100;
}

.emote-bubble.pop {
    animation: emote-pop 0.35s ease-out;
}

@keyframes emote-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Emote trigger button */
.emote-trigger-icon {
    font-size: 20px !important;
    line-height: 1;
}

.pre-battle-name {
    font-family: 'BJ Cree', serif;
    font-size: 28px;
    color: #fff;
    text-shadow: 2px 2px 4px #000;
}

.pre-battle-rank {
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    color: #f1c40f;
    text-shadow: 1px 1px 3px #000;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 16px;
    border-radius: 12px;
    border: 1px solid rgba(241, 196, 15, 0.4);
}

.pre-battle-score {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 1px 1px 2px #000;
}

/* Pre-Battle Selector Trigger Buttons */
.prebattle-selectors {
    position: absolute;
    bottom: 85px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    /* Above the match-found banner (z-index 2000) so the selectors are always on top */
    z-index: 2100;
    padding: 0 16px;
}

/* Image-based triggers: visible art is the PNG itself */
.prebattle-trigger-img {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 92px;
    max-width: 28vw;
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prebattle-trigger-img img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.prebattle-trigger-img:active {
    transform: scale(0.94);
}

/* Selection feedback — subtle golden glow on the image itself */
.prebattle-trigger-img.has-selection img {
    filter:
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 10px rgba(241, 196, 15, 0.8));
}

/* Legacy label/icon spans kept in DOM so old JS that writes to them still works */
.trigger-hidden-label,
.trigger-hidden-icon {
    display: none;
}

.prebattle-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(62, 39, 35, 0.85);
    border: 2px solid #8d6e63;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    min-width: 130px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.prebattle-trigger:active {
    transform: scale(0.97);
}

.prebattle-trigger.has-selection {
    border-color: #f1c40f;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
}

.trigger-icon {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.trigger-text {
    font-family: 'BJ Cree', serif;
    font-size: 11px;
    color: #f1c40f;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pre-Battle Popup Overlay */
.prebattle-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Above the match-found banner so the picker clearly takes over */
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prebattle-popup {
    background: linear-gradient(180deg, #e6bd9b 0%, #d7a685 55%, #c9996f 100%);
    border: 3px solid #4d2817;
    border-radius: 22px;
    padding: 22px 18px 18px;
    min-width: 260px;
    max-width: 85%;
    max-height: 55%;
    position: relative;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.55),
        inset 0 -5px 10px rgba(77, 40, 23, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.25);
    isolation: isolate;
    margin-bottom: 22px;
}

/* Speech-bubble tail pointing down toward the trigger row */
.prebattle-popup::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, #d7a685 0%, #c9996f 100%);
    border-right: 3px solid #4d2817;
    border-bottom: 3px solid #4d2817;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.prebattle-popup-title {
    font-family: 'BJ Cree', serif;
    font-size: 15px;
    font-weight: 900;
    color: #3e2210;
    text-align: center;
    margin-bottom: 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.prebattle-popup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    overflow-y: auto;
    max-height: 250px;
    padding: 4px 2px;
}

.prebattle-popup-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: #c0392b;
    border: 2px solid #e74c3c;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Popup card — emote picker (shared look with consumables/weapons) */
.prebattle-popup-card {
    width: 86px;
    height: 100px;
    border: 2px solid #8d6e63;
    border-radius: 10px;
    background-color: rgba(238, 187, 136, 0.85);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.prebattle-popup-card:active {
    transform: scale(0.95);
}

.popup-card-img {
    width: 64px;
    height: 64px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
}

.popup-card-label {
    margin-top: 4px;
    font-size: 10px;
    font-family: 'BJ Cree', serif;
    color: #4e342e;
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Popup item cards (shared by consumables & weapons) */
.consumable-item,
.weapon-item {
    width: 72px;
    height: 72px;
    border: 2px solid #8d6e63;
    border-radius: 10px;
    background-color: rgba(238, 187, 136, 0.85);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center top 8px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.consumable-item:active,
.weapon-item:active {
    transform: scale(0.95);
}

.consumable-item.selected,
.weapon-item.selected {
    border-color: #f1c40f;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.7);
}

/* Level-locked pre-battle popup cards — player's level < item.levelRequired.
   Red transparent overlay + "LVL X" label; tap fires a 2s toast and does not
   select the item. */
.consumable-item.prebattle-locked,
.weapon-item.prebattle-locked {
    position: relative;
}
.consumable-item.prebattle-locked::after,
.weapon-item.prebattle-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(231, 76, 60, 0.55);
    border-radius: 8px;
    pointer-events: none;
}
.prebattle-lock-label {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(26, 15, 8, 0.9);
    color: #ffd666;
    font-family: 'BJ Cree', serif;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #8d6e63;
    z-index: 2;
    pointer-events: none;
}

/* Toast shown when a locked item is tapped. Root-level fixed element with
   high z-index so it paints above pre-battle (z:150) and the popup overlay. */
.level-lock-toast {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 15, 8, 0.95);
    color: #e74c3c;
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    padding: 14px 24px;
    border-radius: 10px;
    border: 1px solid #e74c3c;
    z-index: 3000;
    pointer-events: none;
    transition: opacity 0.25s;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.consumable-item-name,
.weapon-item-name {
    font-size: 9px;
    font-family: 'BJ Cree', serif;
    color: #4e342e;
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consumable-item .item-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pre-battle FIGHT button */
.pre-battle-ready {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #e67e22;
    border: 3px solid #d35400;
    color: #fff;
    font-family: 'BJ Cree', serif;
    font-size: 24px;
    padding: 15px 60px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 0 #d35400;
    z-index: 10;
    letter-spacing: 2px;
}

.pre-battle-ready:active {
    transform: translateX(-50%) translateY(4px);
    box-shadow: none;
}

.pre-battle-countdown {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'BJ Cree', serif;
    font-size: 36px;
    color: #f1c40f;
    text-shadow: 2px 2px 4px #000;
    z-index: 10;
}

/* ====== Boss Mode ====== */

/* Boss carousel slot */
.boss-slot .boss-label {
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
    font-weight: bold;
}

.boss-slot .boss-timer {
    font-size: 10px;
    color: #ffcc00;
    text-shadow: 1px 1px 2px #000;
    margin-top: 2px;
    text-align: center;
}

.boss-slot.boss-active .boss-timer {
    color: #4cff4c;
}

.boss-slot.boss-cooldown {
    opacity: 0.4;
    pointer-events: none;
}

/* Boss pre-battle variant */
.boss-prebattle .pre-battle-vs {
    color: #ff4444;
    text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 50, 50, 0.5);
}

/* ====== Battle Consumable Icon ====== */
.battle-consumable {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 180px;
    height: 180px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    z-index: 100;
    animation: consumablePulse 2s ease-in-out infinite;
}

.battle-consumable img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

.battle-consumable.used {
    opacity: 0.3;
    pointer-events: none;
    animation: none;
}

.battle-consumable.passive {
    opacity: 0.7;
    pointer-events: none;
}

@keyframes consumablePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

/* ====== Dynamite Animation ====== */
#dynamite-projectile {
    position: fixed;
    width: 50px;
    height: 50px;
    background-image: url('../assets/images/consumables/single_dynamite.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 150;
    pointer-events: none;
}

#dynamite-projectile.dynamite-rolling {
    animation: dynamiteRoll 0.8s ease-in forwards;
}

@keyframes dynamiteRoll {
    0% {
        bottom: 10%;
        left: 10%;
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }

    50% {
        bottom: 45%;
        left: 35%;
        transform: rotate(360deg) scale(0.9);
        opacity: 1;
    }

    100% {
        bottom: 50%;
        left: 50%;
        transform: translateX(-50%) rotate(720deg) scale(0.7);
        opacity: 1;
    }
}

/* ====== Boom Effect ====== */
#boom-effect {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-family: 'BJ Cree', serif;
    font-size: 80px;
    color: #e74c3c;
    text-shadow: 0 0 30px #ff6600, 0 0 60px #ff3300, 3px 3px 0 #000;
    z-index: 155;
    pointer-events: none;
    opacity: 0;
}

#boom-effect.boom-active {
    animation: boomExplosion 0.6s ease-out forwards;
}

@keyframes boomExplosion {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
    }
}

/* ====== Big Dynamite Damage Number ====== */
.dynamite-damage {
    font-size: 72px !important;
    color: #e74c3c !important;
    text-shadow: 3px 3px 6px #000, 0 0 20px rgba(231, 76, 60, 0.6) !important;
}

#game-over {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 35;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#game-over h1 {
    font-size: 64px;
    margin-bottom: 20px;
}

#game-over.win h1 {
    color: #2ecc71;
}

#game-over.lose h1 {
    color: #e74c3c;
}

/* Hit reaction animations now driven by JS transforms in game-engine.js */

/* ====== Daily Bounty Badge (Lobby HUD) ====== */

.bounty-badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    animation: bounty-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes bounty-dot-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.7);
    }
}

/* Burning glow animation when bounty is claimable */
.bounty-badge.claimable {
    animation: bounty-fire-glow 0.8s ease-in-out infinite alternate, bounty-border-fire 2s linear infinite;
    border-color: #f1c40f;
    position: relative;
    overflow: visible;
}

.bounty-badge.claimable::before,
.bounty-badge.claimable::after {
    content: '🔥';
    position: absolute;
    font-size: 16px;
    pointer-events: none;
    animation: bounty-flame-dance 1.2s ease-in-out infinite alternate;
}

.bounty-badge.claimable::before {
    top: -14px;
    left: 4px;
    animation-delay: 0s;
}

.bounty-badge.claimable::after {
    top: -12px;
    right: 4px;
    animation-delay: 0.4s;
    font-size: 14px;
}

@keyframes bounty-flame-dance {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-4px) scale(1.15);
        opacity: 1;
    }

    100% {
        transform: translateY(-1px) scale(0.95);
        opacity: 0.7;
    }
}

@keyframes bounty-fire-glow {
    0% {
        box-shadow:
            0 0 10px rgba(255, 100, 0, 0.7),
            0 0 25px rgba(255, 165, 0, 0.6),
            0 0 50px rgba(255, 69, 0, 0.4),
            0 0 70px rgba(255, 0, 0, 0.15),
            inset 0 0 10px rgba(255, 165, 0, 0.2);
    }

    100% {
        box-shadow:
            0 0 18px rgba(255, 200, 0, 1),
            0 0 40px rgba(255, 140, 0, 0.8),
            0 0 70px rgba(255, 69, 0, 0.6),
            0 0 100px rgba(255, 0, 0, 0.25),
            inset 0 0 15px rgba(255, 200, 0, 0.3);
    }
}

@keyframes bounty-border-fire {
    0% {
        border-color: #f1c40f;
    }

    25% {
        border-color: #ff8c00;
    }

    50% {
        border-color: #ff4500;
    }

    75% {
        border-color: #ff8c00;
    }

    100% {
        border-color: #f1c40f;
    }
}

/* ====== Bounty Detail Panel — wood/sand theme (matches WoodTheme JSX) ====== */
.bounty-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    background: rgba(15, 8, 4, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hn-popup-fade 220ms ease-out;
}

/* SaddlePanel wood plate — dark saddle gradient + diagonal weave + inner hairline */
.bounty-panel-content {
    position: relative;
    box-sizing: border-box;
    width: min(340px, calc(100vw - 32px));
    padding: 18px 18px 16px;
    border: 2.5px solid var(--hn-saddle-dark);
    border-radius: 14px;
    background:
        linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 55%,
            var(--hn-saddle-dark) 100%);
    box-shadow:
        inset 0 1px 0 rgba(242, 231, 210, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        0 4px 0 var(--hn-saddle-night),
        0 8px 20px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    font-family: var(--hn-font-body);
    color: var(--hn-dust);
    animation: hn-popup-rise 280ms cubic-bezier(.18, .9, .32, 1.2);
}

/* inner hairline */
.bounty-panel-content::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 11px;
    border: 1px solid rgba(242, 231, 210, 0.22);
    pointer-events: none;
}

/* diagonal weave */
.bounty-panel-content::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image: repeating-linear-gradient(45deg,
            rgba(242, 231, 210, 0.15) 0 6px,
            transparent 6px 14px);
}

.bounty-panel-content > * {
    position: relative;
    z-index: 1;
}

/* WoodBrandBand-style title — dust on saddle, with hairline rules */
.bounty-panel-header {
    position: relative;
    margin: 4px 0 14px;
    font-family: var(--hn-font-head);
    font-size: 20px;
    color: var(--hn-dust);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 0 10px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bounty-panel-header::before,
.bounty-panel-header::after {
    content: '';
    flex: 0 0 28px;
    height: 1.5px;
    background: var(--hn-rust);
    opacity: 0.85;
}

/* SandCard quest tile — cream gradient + saddle border */
.bounty-panel-quest {
    position: relative;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 2px solid var(--hn-saddle);
    border-radius: 10px;
    background: linear-gradient(to bottom,
            var(--hn-sand-light) 0%,
            var(--hn-sand) 50%,
            var(--hn-tumbleweed) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.7),
        inset 0 -2px 6px rgba(107, 59, 34, 0.3),
        0 2px 0 var(--hn-saddle-dark);
}

.bounty-panel-quest-name {
    font-family: var(--hn-font-head);
    font-size: 16px;
    color: var(--hn-rust-deep);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.55);
    margin-bottom: 2px;
}

.bounty-panel-quest-obj {
    font-family: var(--hn-font-body);
    font-style: italic;
    font-size: 12.5px;
    color: var(--hn-saddle-dark);
    opacity: 0.9;
}

/* GoldProgressBar — gunmetal track + gold-rust fill */
.bounty-panel-progress-bar {
    width: 100%;
    height: 18px;
    background: linear-gradient(to bottom, var(--hn-ink) 0%, var(--hn-gunmetal) 100%);
    border: 1.5px solid var(--hn-saddle-dark);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.bounty-panel-progress-fill {
    height: 100%;
    background: linear-gradient(to bottom,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 45%,
            var(--hn-rust) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.5);
    border-radius: 7px;
    transition: width 0.36s ease;
}

.bounty-panel-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--hn-font-head);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--hn-dust);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    text-transform: uppercase;
}

.bounty-panel-timer {
    font-family: var(--hn-font-typewriter);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--hn-dust);
    opacity: 0.78;
    margin-bottom: 12px;
}

.bounty-panel-reward {
    font-family: var(--hn-font-head);
    font-size: 13px;
    color: var(--hn-gold-light);
    letter-spacing: 0.06em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    margin-bottom: 12px;
}

/* ColHeader-style stats plate — saddle gradient */
.bounty-panel-stats {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    margin-bottom: 14px;
    border: 2px solid var(--hn-saddle-dark);
    border-radius: 8px;
    background: linear-gradient(to bottom,
            rgba(15, 10, 6, 0.45) 0%,
            rgba(0, 0, 0, 0.35) 100%);
    box-shadow:
        inset 0 1px 0 rgba(242, 231, 210, 0.12),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    font-family: var(--hn-font-body);
    font-size: 12.5px;
    color: var(--hn-dust);
    text-align: left;
}

.bounty-panel-stats div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(242, 231, 210, 0.12);
    letter-spacing: 0.04em;
}

.bounty-panel-stats div:last-child {
    border-bottom: none;
}

.bounty-panel-stats span {
    font-family: var(--hn-font-head);
    color: var(--hn-gold-light);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ClaimBtn — pulsing gold→rust pill */
.bounty-claim-btn {
    all: unset;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
    border-radius: 11px;
    background: linear-gradient(to bottom,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 50%,
            var(--hn-rust) 100%);
    border: 2px solid var(--hn-saddle-dark);
    color: var(--hn-dust);
    font-family: var(--hn-font-head);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1px 0 rgba(74, 19, 10, 0.55);
    cursor: pointer;
    box-shadow:
        0 3px 0 var(--hn-saddle-dark),
        0 0 14px rgba(244, 195, 106, 0.35);
    margin-bottom: 8px;
    animation: hn-claim-pulse 1.4s ease-in-out infinite;
    transition: transform 80ms ease;
}

.bounty-claim-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--hn-saddle-dark);
}

.bounty-claim-btn:disabled {
    background: linear-gradient(to bottom, #6E6E76 0%, #4A4A52 55%, #2E2E34 100%);
    border-color: #1A1A1F;
    color: var(--hn-sand);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    box-shadow: 0 3px 0 #1A1A1F;
    cursor: not-allowed;
    opacity: 0.85;
    animation: none;
}

/* SandBackBtn-style close — cream pill */
.bounty-panel-close {
    all: unset;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    border-radius: 10px;
    background: linear-gradient(to bottom,
            var(--hn-sand) 0%,
            var(--hn-tumbleweed) 100%);
    border: 2px solid var(--hn-saddle);
    color: var(--hn-rust);
    font-family: var(--hn-font-head);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.7),
        0 2px 0 var(--hn-saddle-dark);
    transition: transform 80ms ease;
}

.bounty-panel-close:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(60, 30, 10, 0.4),
        0 1px 0 var(--hn-saddle-dark);
}

/* ====== Bounty Complete Popup ====== */
/* === Bounty Complete — Simple card popup === */
.bounty-complete-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 310;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounty-popup-in 0.3s ease-out;
}

@keyframes bounty-popup-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bounty-popup-card {
    background: linear-gradient(145deg, #5d4037 0%, #3e2723 100%);
    border: 3px solid #f1c40f;
    border-radius: 14px;
    padding: 28px 22px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'BJ Cree', serif;
    box-shadow: 0 0 40px rgba(241, 196, 15, 0.3);
    animation: bounty-card-pop 0.4s ease-out;
}

@keyframes bounty-card-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bounty-popup-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

/* === Victory Bounty — Full-screen bag opening === */
.victory-bounty-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 320;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: bounty-popup-in 0.5s ease-out;
    overflow: hidden;
}

.bounty-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/images/bounty/bounty_background.png') center/cover no-repeat;
    z-index: 0;
}

.vb-bag-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.vb-bag-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 196, 15, 0.4) 0%, rgba(241, 196, 15, 0.12) 35%, transparent 65%);
    animation: vb-glow-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* Light rays radiating from the bag */
.vb-bag-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background:
        conic-gradient(from 0deg,
            transparent 0deg, rgba(241, 196, 15, 0.15) 10deg, transparent 20deg,
            transparent 40deg, rgba(241, 196, 15, 0.1) 50deg, transparent 60deg,
            transparent 90deg, rgba(241, 196, 15, 0.12) 100deg, transparent 110deg,
            transparent 140deg, rgba(241, 196, 15, 0.15) 150deg, transparent 160deg,
            transparent 190deg, rgba(241, 196, 15, 0.1) 200deg, transparent 210deg,
            transparent 240deg, rgba(241, 196, 15, 0.12) 250deg, transparent 260deg,
            transparent 300deg, rgba(241, 196, 15, 0.15) 310deg, transparent 320deg,
            transparent 360deg);
    border-radius: 50%;
    animation: vb-rays-spin 12s linear infinite;
    mask-image: radial-gradient(circle, transparent 20%, white 40%, white 70%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle, transparent 20%, white 40%, white 70%, transparent 85%);
}

@keyframes vb-rays-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes vb-glow-pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.vb-bag-img {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 0 25px rgba(241, 196, 15, 0.5)) drop-shadow(0 0 50px rgba(241, 196, 15, 0.2));
    animation: vb-bag-float 3s ease-in-out infinite;
}

@keyframes vb-bag-float {

    0%,
    100% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.06) translateY(-8px);
    }
}

.vb-bag-img.shake-1 {
    animation: vb-shake-1 0.4s ease-out;
}

.vb-bag-img.shake-2 {
    animation: vb-shake-2 0.4s ease-out;
}

.vb-bag-img.shake-3 {
    animation: vb-open 0.6s ease-out forwards;
}

@keyframes vb-shake-1 {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-8deg) scale(1.03);
    }

    40% {
        transform: rotate(8deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    80% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes vb-shake-2 {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-12deg) scale(1.06);
    }

    30% {
        transform: rotate(12deg);
    }

    45% {
        transform: rotate(-8deg);
    }

    60% {
        transform: rotate(8deg);
    }

    75% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes vb-open {
    0% {
        transform: scale(1) rotate(0deg);
    }

    20% {
        transform: scale(1.2) rotate(-5deg);
    }

    40% {
        transform: scale(1.35) rotate(3deg);
        filter: drop-shadow(0 0 40px rgba(241, 196, 15, 0.8));
    }

    60% {
        transform: scale(1.4);
        filter: drop-shadow(0 0 60px rgba(241, 196, 15, 1));
    }

    80% {
        transform: scale(0.3);
        opacity: 0.5;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.vb-bag-hint {
    margin-top: 16px;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    color: #f1c40f;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
    animation: vb-hint-pulse 1.5s ease-in-out infinite;
}

@keyframes vb-hint-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.vb-tap-count {
    margin-top: 8px;
    font-family: 'BJ Cree', serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    min-height: 16px;
}

.vb-rewards-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'BJ Cree', serif;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(241, 196, 15, 0.3);
    border-radius: 14px;
    padding: 28px 22px;
    width: 300px;
    animation: vb-rewards-reveal 0.5s ease-out;
}

@keyframes vb-rewards-reveal {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.vb-title {
    font-size: 22px;
    color: #f1c40f;
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.vb-rewards {
    width: 100%;
}

.vb-reward-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-family: 'BJ Cree', serif;
}

.vb-reward-row+.vb-reward-row {
    border-top: 1px solid rgba(241, 196, 15, 0.15);
}

.vb-reward-icon {
    font-size: 22px;
    width: 30px;
    text-align: center;
}

.vb-reward-text {
    font-size: 15px;
    color: #f5e6c8;
    letter-spacing: 1px;
}

.vb-collect-btn {
    margin-top: 20px;
    padding: 10px 40px;
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    color: #2c1507;
    background: linear-gradient(180deg, #f1c40f 0%, #d4a017 100%);
    border: 2px solid #c9a227;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
}

.vb-collect-btn:active {
    transform: scale(0.96);
}

.bounty-popup-title {
    font-size: 22px;
    color: #f1c40f;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
    margin-bottom: 6px;
    letter-spacing: 2px;
}

.bounty-popup-quest {
    font-size: 16px;
    color: #e67e22;
    margin-bottom: 14px;
}

.bounty-popup-rewards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 4px;
}

.bounty-popup-gold {
    font-size: 36px;
    color: #f1c40f;
    text-shadow: 0 0 12px rgba(241, 196, 15, 0.4);
}

.bounty-popup-xp {
    font-size: 28px;
    color: #3498db;
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
}

.bounty-popup-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.bounty-popup-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.bounty-popup-item span {
    font-size: 15px;
    color: #e0e0e0;
    font-family: sans-serif;
}

.bounty-popup-breakdown {
    font-size: 12px;
    color: #b0bec5;
    font-family: sans-serif;
    margin-bottom: 10px;
}

.bounty-popup-streak {
    font-size: 14px;
    color: #e67e22;
    margin-bottom: 18px;
}

/* ====== Bounty Streak Lost Toast ====== */
.bounty-streak-toast {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 320;
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid #c0392b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: bounty-toast-slide 3s ease-in-out forwards;
    pointer-events: none;
}

@keyframes bounty-toast-slide {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* Old Victory Chest styles removed — replaced by .victory-bounty-popup above */

/* Flour bag — blind overlay on the receiving player's screen.
   Center-weighted: the blur + flour tint are strongest at the middle of the
   screen (where the opponent is) and fade to clear toward the edges, so the
   player keeps peripheral vision but can't read the center of the duel. The
   radial mask is what localises the effect — backdrop-filter otherwise blurs
   the whole element regardless of the background's shape. */
#blind-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 28%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 28%, rgba(0, 0, 0, 0) 70%);
    z-index: 160;
}

#blind-overlay.blinded {
    animation: hn-flour-blind var(--blind-duration, 3000ms) ease-out forwards;
}

@keyframes hn-flour-blind {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Flour bag — attacker-side dust puff (reuses #boom-effect element) */
#boom-effect.flour-puff {
    color: var(--hn-sand-light, #f5e6c8);
    text-shadow: 0 0 24px rgba(245, 230, 200, 0.9), 0 0 48px rgba(255, 255, 255, 0.6);
    animation: hn-flour-puff 0.5s ease-out forwards;
}

@keyframes hn-flour-puff {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    30%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}