/* ============================================
   ONE SHOT HERO - Premium Medieval Book UI
   Refined parchment & leather-bound aesthetic
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Merriweather:wght@400;700&family=Lora:ital,wght@0,400;0,600;1,400&family=MedievalSharp&display=swap');

:root {
    /* === Parchment & Paper Colors - AGED & DARKER === */
    --parchment-light: #e8ddd0;
    --parchment: #d6cab0;
    --parchment-dark: #c4b595;
    --parchment-aged: #b5a480;
    --parchment-shadow: #9e8c6b;

    /* === Leather & Wood === */
    --leather-light: #5c3d1e;
    --leather: #3d2815;
    --leather-dark: #251810;
    --leather-accent: #7a4f2a;
    --wood-dark: #1a0f08;

    /* === Ink & Text === */
    --ink-black: #1a1209;
    --ink-brown: #3d2914;
    --ink-faded: #6b5a4a;
    --ink-red: #8b2500;
    --ink-gold: #b8860b;

    /* === Accent Colors === */
    --gold-ornament: #d4a84b;
    --gold-highlight: #e8c060;
    --gold-dark: #9a7520;
    --red-wax: #8b1a1a;
    --red-wax-light: #a83232;
    --green-herb: #3d6b35;
    --blue-ink: #2a4a6c;

    /* === UI States === */
    --highlight-valid: rgba(61, 107, 53, 0.25);
    --highlight-invalid: rgba(139, 26, 26, 0.25);
    --highlight-hover: rgba(212, 168, 75, 0.15);

    /* === Typography === */
    --font-display: 'Cinzel', 'Times New Roman', serif;
    --font-heading: 'Merriweather', 'Georgia', serif;
    --font-body: 'Lora', 'Georgia', serif;

    /* === Spacing (8px base) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* === Borders === */
    --border-thin: 1px solid var(--leather);
    --border-medium: 2px solid var(--leather);
    --border-ornate: 3px double var(--gold-ornament);

    /* === Shadows === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.25), 0 6px 10px rgba(0, 0, 0, 0.15);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);

    /* === Transitions === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* === Scaling === */
    --ui-scale: 1;
}

/* === Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--wood-dark);
    color: var(--ink-black);
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
    position: relative;
    user-select: none;
    overflow: hidden;
}

/* Dark wood background texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('../img/fantasy_table_bg.png') center bottom/cover no-repeat fixed;
    pointer-events: none;
    z-index: 0;
    transition: background-image 1s ease;
    /* Smooth transition for background changes */
}

/* Boss specific backgrounds */
body.boss-field-giles::before {
    background-image: url('../img/farm_boss_bg.png');
    background-position: center 20%;
    background-size: cover;
}

body.boss-field-cleopatra::before {
    background-image: url('../img/cleopatra_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

body.boss-field-tesla::before {
    background-image: url('../img/tesla_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

body.boss-field-leonardo::before {
    background-image: url('../img/leonardo_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

body.boss-field-genghiskhan::before {
    background-image: url('../img/genghiskhan_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

body.boss-field-juliuscaesar::before {
    background-image: url('../img/juliuscaesar_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

body.boss-field-napoleon::before {
    background-image: url('../img/napoleon_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

body.boss-field-einstein::before {
    background-image: url('../img/einstein_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

body.boss-field-suntzu::before {
    background-image: url('../img/suntzu_boss_bg.png');
    background-position: center 40%;
    background-size: cover;
}

/* === Ambient overlay (Lantern glow) === */
.ambient-overlay {
    position: fixed;
    inset: 0;
    /* Stronger, darker vignette with subtle dynamic center */
    background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 50%),
            transparent 22%,
            rgba(0, 0, 0, 0.4) 55%,
            rgba(0, 0, 0, 0.8) 85%,
            rgba(0, 0, 0, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
    /* Better blending with the fantasy desktop */
    animation: ambient-lighting-pulse 10s infinite alternate ease-in-out;
}

@keyframes ambient-lighting-pulse {

    0%,
    100% {
        opacity: 0.92;
    }

    50% {
        opacity: 1;
    }
}

/* === Floating Particles (Dust/Embers) === */
.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 200, 100, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 150, 0, 0.8);
    animation: float-particle 10s infinite linear;
    opacity: 0;
}

.particle:nth-child(1) {
    left: 10%;
    top: 100%;
    animation-duration: 8s;
    animation-delay: 0s;
    transform: scale(0.6);
}

.particle:nth-child(2) {
    left: 30%;
    top: 100%;
    animation-duration: 12s;
    animation-delay: 2s;
    transform: scale(1);
}

.particle:nth-child(3) {
    left: 50%;
    top: 100%;
    animation-duration: 7s;
    animation-delay: 5s;
    transform: scale(0.8);
}

.particle:nth-child(4) {
    left: 70%;
    top: 100%;
    animation-duration: 11s;
    animation-delay: 1s;
    transform: scale(1.2);
}

.particle:nth-child(5) {
    left: 90%;
    top: 100%;
    animation-duration: 9s;
    animation-delay: 4s;
    transform: scale(0.7);
}

.particle:nth-child(6) {
    left: 20%;
    top: 100%;
    animation-duration: 13s;
    animation-delay: 6s;
    transform: scale(0.9);
}

@keyframes float-particle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    50% {
        transform: translateY(-50vh) translateX(20px);
        opacity: 0.6;
    }

    90% {
        opacity: 0;
    }

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

/* === App Container === */
#app {
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

#app.visible {
    opacity: 1;
    visibility: visible;
}

/* === Player HUD (Bottom Left) === */
.player-hud {
    position: fixed;
    bottom: -20px;
    /* Tuck it slightly below screen edge */
    left: -20px;
    /* Tuck it slightly to the left */
    z-index: 100;
    /* Reduced container size */
    width: 300px;
    height: 400px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s ease-in-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-hud.visible {
    opacity: 1;
    transform: translateX(0);
}

.player-hud-avatar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    height: 420px;
    /* Reduced from 550px */
    object-fit: contain;
    border-radius: 0;
    border: none;
    box-shadow: none;
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.7));
    z-index: 1;
    transition: filter 0.5s ease;
}

.player-hud.has-active-potion .player-hud-avatar {
    filter: drop-shadow(0 0 6px var(--potion-color, rgba(46, 204, 113, 0.4))) drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.7));
}

.player-background-particles {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 420px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    mask-image: linear-gradient(to top, black 80%, transparent 100%);
}

.potion-background-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: var(--particle-color, #fff);
    box-shadow: 0 0 10px var(--particle-color, #fff);
    animation: potion-particle-float var(--duration) ease-out forwards;
    opacity: 0;
}

@keyframes potion-particle-float {
    0% {
        transform: translate(var(--start-x), var(--start-y)) scale(0);
        opacity: 0;
    }

    20% {
        opacity: var(--max-opacity, 0.8);
    }

    100% {
        transform: translate(var(--end-x), var(--end-y)) scale(var(--end-scale, 1));
        opacity: 0;
    }
}

.player-hud-name {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    /* Span across the container width minus padding */
    display: flex;
    /* Use flexbox for perfect centering */
    justify-content: center;
    align-items: center;
    z-index: 2;

    /* Visuals */
    color: var(--parchment-light);
    /* Lighter color for better contrast against dark robe */
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    /* Cinematic "Nameplate" Background */
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.6) 20%,
            rgba(0, 0, 0, 0.6) 80%,
            transparent 100%);

    padding: 8px 0;
    /* Add vertical breathing room */

    /* Text Shadow for depth */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);

    /* Subtle Gold Accent (Top/Bottom borders fading out) */
    border-top: 1px solid rgba(212, 168, 75, 0.3);
    border-bottom: 1px solid rgba(212, 168, 75, 0.3);

    /* Ensure text doesn't wrap awkwardly */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    pointer-events: auto;
    cursor: pointer;
}

/* === Potion Shelf (Behind Player) === */
.potion-shelf {
    position: absolute;
    bottom: 430px;
    /* Position it just above the player's head */
    left: 20px;
    width: 260px;
    height: 12px;
    background: linear-gradient(to bottom, #4a3219, #2d1e0f);
    border-radius: 4px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    z-index: 0;
    /* Behind the avatar (z-index 1) */
    border-bottom: 2px solid #1a0f08;
    /* Transition and Visibility */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    overflow: visible;
}

.potion-shelf.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.potion-shelf-items {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 20px;
    pointer-events: none;
}

.shelf-potion {
    pointer-events: auto;
    width: 34px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: help;
    animation: potion-bob 4s infinite ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Localized shadow on the shelf surface */
.shelf-potion::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 6px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    filter: blur(2px);
    z-index: -1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.shelf-potion:hover {
    transform: scale(1.15) translateY(-8px);
    z-index: 10;
}

.shelf-potion:hover::before {
    transform: translateX(-50%) scale(0.8);
    opacity: 0.4;
}

/* Potion Bottle Components */
.potion-bottle {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.potion-bottle-top {
    width: 14px;
    height: 8px;
    background: #5c3d1e;
    border-radius: 3px 3px 1px 1px;
    box-shadow:
        inset 0 -2px 3px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.potion-bottle-body {
    width: 32px;
    height: 42px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px 4px 12px 12px;
    position: relative;
    overflow: hidden;
    margin-top: -1px;
    box-shadow:
        inset 0 2px 6px rgba(255, 255, 255, 0.2),
        inset 0 -4px 10px rgba(0, 0, 0, 0.1);
}

/* Glass reflection shine */
.potion-bottle-body::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 25%;
    height: 60%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
    border-radius: 20px;
    pointer-events: none;
}

.potion-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%;
    border-radius: 0 0 10px 10px;
    opacity: 0.85;
    box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.potion-bubble {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    bottom: 5px;
    left: 40%;
    animation: bottle-bubble 2s infinite ease-in;
}

@keyframes bottle-bubble {
    0% {
        bottom: 5px;
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        bottom: 35px;
        opacity: 0;
        transform: scale(1.6);
    }
}

/* Rarity Effects */
.shelf-potion.rarity-common {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.shelf-potion.rarity-rare {
    filter: drop-shadow(0 0 10px rgba(52, 152, 219, 0.5));
}

.shelf-potion.rarity-epic {
    filter: drop-shadow(0 0 15px rgba(241, 196, 15, 0.6));
}


/* Wood grain effect on shelf */
.potion-shelf::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.05) 5%,
            rgba(0, 0, 0, 0) 10%);
    pointer-events: none;
}

/* Shelf brackets */
.potion-shelf-bracket {
    position: absolute;
    top: 100%;
    width: 8px;
    height: 20px;
    background: #3d2815;
    border-radius: 0 0 4px 4px;
}

.potion-shelf-bracket.left {
    left: 30px;
}

.potion-shelf-bracket.right {
    right: 30px;
}

.shelf-potion {
    font-size: 2.2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: help;
    margin-bottom: 2px;
    position: relative;
    animation: potion-bob 3s infinite ease-in-out;
}

.shelf-potion:hover {
    transform: scale(1.2) translateY(-5px);
    filter: drop-shadow(0 5px 15px rgba(255, 250, 200, 0.4));
}

@keyframes potion-bob {

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

    50% {
        transform: translateY(-4px);
    }
}

/* Rarity glow for potions on shelf */
.shelf-potion.rarity-common {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.shelf-potion.rarity-rare {
    filter: drop-shadow(0 0 8px rgba(0, 100, 255, 0.4));
}

.shelf-potion.rarity-epic {
    filter: drop-shadow(0 0 12px rgba(180, 0, 255, 0.6));
}

/* === Clickable Potion States === */
.shelf-potion.potion-available {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.3s ease;
}

.shelf-potion.potion-available:hover {
    transform: scale(1.25) translateY(-12px) !important;
    filter: drop-shadow(0 6px 20px rgba(255, 200, 50, 0.6)) brightness(1.15);
    z-index: 100;
}

.shelf-potion.potion-available:hover .potion-liquid {
    animation: potion-bubble-intense 0.6s infinite ease-in-out;
}

.shelf-potion.potion-available:active {
    transform: scale(1.1) translateY(-8px) !important;
}

/* Used potion state - dimmed and grayed out */
.shelf-potion.potion-used {
    cursor: default;
    opacity: 0.4;
    filter: grayscale(70%) brightness(0.8) !important;
    pointer-events: auto;
    animation: none !important;
}

.shelf-potion.potion-used .potion-liquid {
    opacity: 0.3;
}

.shelf-potion.potion-used .potion-bubble {
    display: none;
}

/* Used checkmark overlay */
.shelf-potion.potion-used::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    color: rgba(46, 204, 113, 0.9);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

/* Potion drinking animation */
.shelf-potion.potion-drinking {
    animation: potion-drink 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards !important;
}

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

    20% {
        transform: scale(1.3) rotate(-30deg) translateY(-10px);
    }

    40% {
        transform: scale(1.2) rotate(-45deg) translateY(-20px);
    }

    60% {
        transform: scale(0.9) rotate(-60deg) translateY(-15px);
        opacity: 0.8;
    }

    80% {
        transform: scale(0.6) rotate(-30deg) translateY(-5px);
        opacity: 0.4;
    }

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

/* Bubbling liquid animation */
@keyframes potion-bubble-intense {

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

    25% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(1px);
    }

    75% {
        transform: translateY(-1px);
    }
}

/* === Potion Splash Particles === */
.potion-splash-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    box-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor;
    animation: potion-splash 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes potion-splash {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.2);
        opacity: 0;
    }
}

/* === Potion Activated Text === */
.potion-activated-text {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10001;
    animation: potion-text-rise 1.5s ease-out forwards;
}

.potion-activated-text .potion-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-shadow:
        0 0 10px rgba(212, 168, 75, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.potion-activated-text .potion-activated-label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: #2ecc71;
    letter-spacing: 0.15em;
    text-shadow:
        0 0 8px rgba(46, 204, 113, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes potion-text-rise {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
    }

    20% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px) scale(1.1);
    }

    40% {
        transform: translateX(-50%) translateY(-30px) scale(1);
    }

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

/* === Screen Flash Effect === */
.potion-screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.3;
    mix-blend-mode: overlay;
    animation: potion-flash 0.4s ease-out forwards;
}

@keyframes potion-flash {
    0% {
        opacity: 0.35;
    }

    100% {
        opacity: 0;
    }
}

/* === Player HUD Flash on Potion Use === */
.player-hud.potion-activated-flash::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 20px;
    background: radial-gradient(circle, rgba(46, 204, 113, 0.4) 0%, transparent 70%);
    animation: hud-glow-pulse 0.6s ease-out forwards;
    pointer-events: none;
    z-index: -1;
}

@keyframes hud-glow-pulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    30% {
        opacity: 1;
        transform: scale(1.1);
    }

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

/* === Tooltip Action Hints (Atmospheric Potion Status) === */
.tooltip-action-hint {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(139, 90, 43, 0.06);
    border: 1px solid rgba(139, 90, 43, 0.15);
    border-radius: var(--radius-sm);
    position: relative;
}

/* Decorative corner flourishes */
.tooltip-action-hint::before,
.tooltip-action-hint::after {
    content: '❧';
    position: absolute;
    font-size: 0.6rem;
    color: var(--leather-light);
    opacity: 0.6;
}

.tooltip-action-hint::before {
    top: 2px;
    left: 6px;
}

.tooltip-action-hint::after {
    bottom: 2px;
    right: 6px;
    transform: rotate(180deg);
}

.potion-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 0;
}

.potion-status .status-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.potion-status .status-text {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

/* Available state - warm inviting glow */
.potion-status-available {
    color: var(--ink-brown);
}

.potion-status-available .status-icon {
    color: var(--leather);
    animation: alchemist-glow 2s infinite ease-in-out;
    filter: drop-shadow(0 0 4px rgba(139, 90, 43, 0.5));
}

.potion-status-available .status-text {
    color: var(--ink-brown);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Used state - serene, completed look */
.potion-status-used {
    opacity: 0.95;
}

.potion-status-used .status-icon {
    color: #27ae60;
    text-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}

.potion-status-used .status-text {
    color: var(--green-herb);
    font-weight: 500;
}

@keyframes alchemist-glow {

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

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


/* === Main App Container === */
#app {
    width: 100%;
    max-width: 1400px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#app.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   THE BOOK - Main Container
   ============================================ */
.game-container {
    /* Realistic Leather Texture - Darker and richer */
    background:
        /* Leather grain texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E"),
        /* Main leather gradient */
        linear-gradient(165deg,
            #4a2e15 0%,
            #3d2510 20%,
            #2e1b0b 50%,
            #1e1106 80%,
            #100802 100%);

    border-radius: 12px;
    padding: 12px;
    /* Thinner border as per reference */

    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.8),
        0 15px 25px rgba(0, 0, 0, 0.6),
        /* Highlight on top edge */
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        /* Deep inset shadow */
        inset 0 0 30px rgba(0, 0, 0, 0.6);

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The stack of pages visible inside the cover */
.book-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    position: relative;
    z-index: 5;
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(165deg, #fdfcf3 0%, #f5ebe0 50%, #e8dcc8 100%);
    background-blend-mode: multiply, normal;
    border-radius: var(--radius-md);
    /* Allow tooltips to overflow */
    overflow: visible;

    /* The page shadow itself */
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.05);
}

/* Torn/Ragged Pages Underneath */
/* Torn/Ragged Pages Underneath - Right side stack */
.book-inner::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: -5px;
    z-index: -1;
    background: #d6cab0;

    /* Paper stack effect on right side */
    box-shadow:
        1px 1px 0 #baa685,
        2px 2px 0 #e8ddd0,
        3px 3px 0 #b09e7a,
        4px 4px 0 #d6cab0,
        5px 5px 2px rgba(0, 0, 0, 0.2);

    border-radius: 4px 6px 6px 4px;
}

/* Second torn layer for more organic feel */
.book-inner::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -2px;
    right: -10px;
    z-index: -2;
    background: #e8ddd0;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 2px 4px 4px 2px;
    transform: rotate(-0.5deg);

    /* Ragged right edge using mask/gradient magic */
    background-image: linear-gradient(to right, #e8ddd0 98%, transparent 100%);
}

/* Leather texture overlay */
/* Leather stitching border - Closer to edge */
.game-container::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(160, 120, 80, 0.3);
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
    /* Below book-inner (5) but above background */
}

/* Book spine shadow (center) */
/* Book spine/crease (center) - Improved Binding */
.game-container::after {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 50px;
    transform: translateX(-50%);

    /* Deep binding crease */
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.2) 20%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.4) 55%,
            rgba(0, 0, 0, 0.2) 80%,
            rgba(0, 0, 0, 0) 100%);

    pointer-events: none;
    z-index: 20;
    mix-blend-mode: multiply;
}

/* Optional: Binding Thread look */
.main-stage::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(0, 0, 0, 0.1);
    border-left: 1px dashed rgba(255, 255, 255, 0.2);
    z-index: 21;
}

/* ============================================
   PARCHMENT PAGES
   ============================================ */
.main-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    /* Allow tooltips to overflow */
    overflow: visible;
}

/* Parchment texture for all panels */
.stats-panel,
.grid-panel,
.boss-panel,
.inventory-panel,
.draft-panel {
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(160deg, var(--parchment-light) 0%, var(--parchment) 100%);
    background-blend-mode: multiply, normal;
    position: relative;
}

/* === Stats Panel (Top Left) === */
.stats-panel {
    grid-column: 1;
    grid-row: 1;
    padding: var(--space-5);
    border-right: 1px solid var(--parchment-shadow);
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 110px;
    box-shadow: inset -8px 0 12px -8px rgba(0, 0, 0, 0.08);
}

/* Stat Capsules - Sticky Note Paper Style */
.stat-capsule {
    background: linear-gradient(175deg,
            #fffef5 0%,
            #f8f4e3 40%,
            #f0ebda 100%);
    padding: var(--space-4) var(--space-5);
    position: relative;
    text-align: center;
    flex: 0 1 auto;
    min-width: 110px;
    border: none;
    border-radius: 2px;
    box-shadow:
        2px 3px 8px rgba(0, 0, 0, 0.15),
        1px 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    transform: rotate(-2deg);
}

/* Second capsule tilts opposite direction */
.stat-capsule.secondary {
    transform: rotate(1.5deg);
}

/* Tape/pin effect at top */
.stat-capsule::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 14px;
    background: linear-gradient(180deg,
            rgba(200, 180, 140, 0.7) 0%,
            rgba(180, 160, 120, 0.5) 100%);
    border-radius: 2px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* Subtle paper texture lines */
.stat-capsule::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 18px,
            rgba(180, 160, 130, 0.08) 18px,
            rgba(180, 160, 130, 0.08) 19px);
    pointer-events: none;
    border-radius: 2px;
    transition: opacity 0.3s ease;
}

/* Atmospheric hover - paper lifts slightly, shadow deepens */
.stat-capsule {
    transition: box-shadow 0.3s ease, filter 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.stat-capsule:hover {
    box-shadow:
        3px 5px 12px rgba(0, 0, 0, 0.2),
        1px 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    filter: brightness(1.02);
}

.stat-capsule:hover::after {
    opacity: 0.6;
}



.stat-label {
    display: block;
    font-family: 'IM Fell English', serif;
    font-size: 0.7rem;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-1);
    font-weight: 400;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--ink-red);
    text-shadow: none;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Player Portrait - Hidden */
.player-portrait-container,
.hero-avatar,
.hero-name {
    display: none;
}

/* ============================================
   GRID PANEL - Equipment Page
   ============================================ */
.grid-panel {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-6) var(--space-5);
    border-right: 1px solid var(--parchment-shadow);
    border-top: 1px solid var(--parchment-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    position: relative;
    box-shadow:
        inset -8px 0 12px -8px rgba(0, 0, 0, 0.08),
        inset 0 8px 12px -8px rgba(0, 0, 0, 0.05);
}

/* Panel Header Tags - Premium Leather Tab Style */
.panel-header-tag {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
            var(--leather-accent) 0%,
            var(--leather-light) 20%,
            var(--leather) 80%,
            var(--leather-dark) 100%);
    color: var(--gold-highlight);
    padding: 10px var(--space-5) 8px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    z-index: 5;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-top: none;
}

/* Stitching effect inside tab */
.panel-header-tag::before {
    content: '';
    position: absolute;
    inset: 3px;
    top: 5px;
    border: 1px dashed rgba(212, 168, 75, 0.25);
    border-radius: 0 0 6px 6px;
    border-top: none;
    pointer-events: none;
}

/* Decorative gold accent line */
.panel-header-tag::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 168, 75, 0.4) 30%,
            rgba(212, 168, 75, 0.6) 50%,
            rgba(212, 168, 75, 0.4) 70%,
            transparent 100%);
}

.grid-container {
    background: linear-gradient(145deg,
            var(--parchment-aged) 0%,
            var(--parchment-shadow) 80%,
            rgba(158, 140, 107, 0.9) 100%);
    padding: var(--space-4);
    border: 2px solid var(--leather-light);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* Inner ornamental border on grid area */
.grid-container::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(92, 61, 30, 0.2);
    border-radius: calc(var(--radius-lg) - 3px);
    pointer-events: none;
}

.backpack-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 3), var(--cell-size, 64px));
    grid-template-rows: repeat(var(--grid-rows, 3), var(--cell-size, 64px));
    gap: 4px;
    position: relative;
    transition: all 0.3s ease;
    /* Ensure grid doesn't overflow container */
    max-width: 100%;
    /* But allow tooltips/drag to go outside if needed */
    overflow: visible;
}

.grid-cell {
    width: var(--cell-size, 64px);
    height: var(--cell-size, 64px);
    /* Carved/embossed slot look */
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.04) 70%),
        rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(92, 61, 30, 0.35);
    border-radius: var(--radius-md);
    position: relative;
    transition: all var(--transition-fast);
    /* Enhanced inner bevel for carved look */
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 1px 0 0 rgba(255, 255, 255, 0.04),
        inset -1px 0 0 rgba(0, 0, 0, 0.08);
}

/* Subtle cross pattern in empty cells */
.grid-cell::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(92, 61, 30, 0.15);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.5;
}

.grid-cell:hover {
    background: var(--highlight-hover);
    border-color: var(--gold-ornament);
    box-shadow:
        inset 0 0 12px rgba(212, 168, 75, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(212, 168, 75, 0.15);
}

.grid-cell:hover::before {
    border-color: rgba(212, 168, 75, 0.3);
    opacity: 0.8;
}

.grid-cell.valid-target {
    background: var(--highlight-valid);
    border-color: var(--green-herb);
    box-shadow: inset 0 0 12px rgba(61, 107, 53, 0.25);
}

.grid-cell.invalid-target {
    background: var(--highlight-invalid);
    border-color: var(--red-wax);
    box-shadow: inset 0 0 12px rgba(139, 26, 26, 0.25);
}

/* Item containers in grid */
.item-in-grid-container {
    cursor: grab;
    /* Add depth to the entire item */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.item-in-grid-container:active {
    cursor: grabbing;
    transform: scale(0.95);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.item-in-grid-container:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
    z-index: 500 !important;
}

.item-in-grid-container>div {
    border: none;
    /* Remove default border from JS logic if any */
    box-sizing: border-box;
}

/* Premium Item Cell Styling */
.item-subcell-filled {
    position: relative;
    /* The background-color is set inline by JS (item.color) */
    /* We overlay gradients to create a gem/enamel look */
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 100%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 60%);

    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;

    /* Inner lighting/bevel */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1);

    /* Content alignment */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;

    /* Text styles */
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5);
    font-size: 1.5rem;

    transition: background-color 0.3s ease;
}

/* Shine reflection effect */
.item-subcell-filled::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 35%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 4px 4px 12px 12px;
    pointer-events: none;
}

.item-subcell-empty {
    background: transparent;
    pointer-events: none;
}

/* Item images - prevent flashing during grid re-renders */
.item-image {
    /* Prevent layout shift during image load */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Hardware acceleration for smoother rendering */
    will-change: transform, opacity;
    /* Prevent flash by ensuring image is visible immediately */
    opacity: 1;
    /* Ensure images don't animate on initial render */
    transition: none;
}

/* Fight Button - Premium Wax Seal */
.btn-fight {
    width: 100%;
    max-width: 200px;
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(165deg, var(--red-wax-light) 0%, var(--red-wax) 50%, #6b1010 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--parchment-light);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    box-shadow:
        0 4px 0 #5a0a0a,
        0 6px 20px rgba(139, 26, 26, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast);
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.btn-fight::before {
    content: '⚔';
    margin-right: var(--space-2);
    font-size: 1.1rem;
}

.btn-fight::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-fight:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #5a0a0a,
        0 10px 30px rgba(139, 26, 26, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(165deg, #c03838 0%, #9b2020 50%, #7b1515 100%);
}

.btn-fight:hover::after {
    left: 100%;
}

.btn-fight:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #5a0a0a,
        0 4px 10px rgba(139, 26, 26, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}



/* Wrapper for positioning elements relative to grid */
.grid-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Clear Button - Secondary Action */
/* Clear Button - Secondary Action */
.btn-clear {
    position: absolute;
    left: -80px;
    /* Kept position */
    top: 50%;
    transform: translateY(-50%);

    width: 48px;
    height: 48px;
    padding: 0;

    /* Revert to Leather Brown Theme */
    background: linear-gradient(165deg, var(--leather-light) 0%, var(--leather) 50%, var(--leather-dark) 100%);
    border: none;
    border-radius: var(--radius-lg);

    color: var(--parchment-light);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 3D Button Shadow - Wood/Dark Brown shadow */
    box-shadow:
        0 4px 0 var(--wood-dark),
        0 5px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 10;
}

.btn-clear svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s ease;
}

.btn-clear:hover {
    /* Lighter Leather on hover */
    background: linear-gradient(165deg, var(--leather-accent) 0%, var(--leather-light) 50%, var(--leather) 100%);
    transform: translateY(calc(-50% - 2px));
    color: var(--gold-highlight);

    box-shadow:
        0 6px 0 var(--wood-dark),
        0 8px 15px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-clear:hover svg {
    transform: rotate(-180deg);
}

.btn-clear:active {
    transform: translateY(calc(-50% + 2px));
    box-shadow:
        0 2px 0 var(--wood-dark),
        0 3px 5px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ============================================
   COMBAT ANIMATIONS & JUICE
   ============================================ */

/* 1. Item Activation Pulse */
@keyframes item-pulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter: brightness(1.3) drop-shadow(0 0 10px gold);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.item-attacking {
    animation: item-pulse 0.4s ease-out forwards;
    z-index: 100;
}

/* 2. Projectile */
.combat-projectile {
    position: fixed;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #fff 20%, #ffaa00 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 15px #ffaa00, 0 0 30px #ff0000;
    transition: transform 0.05s linear;
    /* Smooth trail */
}

/* Projectile Trail Particles */
.projectile-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #ffaa00;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: fade-out 0.5s ease-out forwards;
}

@keyframes fade-out {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* Big Fireball - High Multiplier Attack */
.combat-projectile.big-fireball {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #fff 10%, #ffcc00 40%, #ff6600 70%, #ff0000 100%);
    box-shadow:
        0 0 30px #ffaa00,
        0 0 60px #ff6600,
        0 0 90px #ff0000,
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    animation: big-fireball-pulse 0.15s ease-in-out infinite alternate;
}

@keyframes big-fireball-pulse {
    0% {
        box-shadow:
            0 0 30px #ffaa00,
            0 0 60px #ff6600,
            0 0 90px #ff0000,
            inset 0 0 20px rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow:
            0 0 40px #ffcc00,
            0 0 80px #ff6600,
            0 0 120px #ff0000,
            inset 0 0 25px rgba(255, 255, 255, 0.8);
    }
}

/* Charging Particles (converge toward center) */
.charging-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fff 30%, #ffcc00 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: charge-converge 0.4s ease-in forwards;
}

@keyframes charge-converge {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--target-x), var(--target-y)) scale(0.2);
    }
}

/* Big Projectile Trail */
.projectile-trail.big-trail {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #ffcc00 30%, #ff6600 100%);
    animation: big-trail-fade 0.6s ease-out forwards;
}

@keyframes big-trail-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }

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

/* Big Impact Screen Shake */
.big-impact-shake {
    animation: big-shake 0.6s ease-out;
}

@keyframes big-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-10px) rotate(-1deg);
    }

    20% {
        transform: translateX(10px) rotate(1deg);
    }

    30% {
        transform: translateX(-8px) rotate(-0.5deg);
    }

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

    50% {
        transform: translateX(-6px);
    }

    60% {
        transform: translateX(6px);
    }

    70% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }

    90% {
        transform: translateX(-2px);
    }
}

/* Big Crit Floating Number */
.floating-damage.big-crit {
    color: #ffcc00;
    font-size: 4rem;
    text-shadow:
        4px 4px 0 #ff6600,
        -2px -2px 0 #ff6600,
        0 0 30px #ffcc00,
        0 0 60px #ff6600;
    animation: big-float-up 1.5s ease-out forwards;
}

@keyframes big-float-up {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }

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

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

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

/* 3. Boss Reactions */
@keyframes boss-hit-shake {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5px, -5px) rotate(-1deg);
    }

    20% {
        transform: translate(5px, 5px) rotate(1deg);
    }

    30% {
        transform: translate(-5px, 5px);
    }

    40% {
        transform: translate(5px, -5px);
    }

    50% {
        transform: translate(0, 0);
    }
}

.boss-hit {
    animation: boss-hit-shake 0.4s ease-out;
}

.boss-flash-red {
    position: relative;
}

.boss-flash-red::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 0, 0, 0.5);
    border-radius: inherit;
    pointer-events: none;
    animation: flash-fade 0.2s ease-out forwards;
}

@keyframes flash-fade {
    to {
        opacity: 0;
    }
}

/* 4. Floating Damage Numbers */
.floating-damage {
    position: fixed;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 10px #ff0000;
    pointer-events: none;
    z-index: 10000;
    animation: float-up-fade 1s ease-out forwards;
}

@keyframes float-up-fade {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }

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

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

.floating-damage.crit {
    color: #ffcc00;
    font-size: 3rem;
    text-shadow: 3px 3px 0 #000, 0 0 20px gold;
}

/* HP Bar: Handled by original CSS now */

.hp-fill {
    background: linear-gradient(90deg, #8b1a1a, #ff3333);
    height: 100%;
    width: 100%;
    transition: width 0.3s ease-out;
}

/* 6. Victory/Defeat Overlays */
.fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    /* Darker background */
    backdrop-filter: blur(8px);
    /* Blur behind */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 0;
    animation: fade-in 0.5s ease-out forwards;
    pointer-events: auto;
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

.overlay-title {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 6rem;
    /* Bigger */
    margin-bottom: var(--space-4);
    line-height: 1;
    text-transform: uppercase;
    animation: title-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s;
    opacity: 0;
    transform: scale(0.5);
}

@keyframes title-pop {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.overlay-title.victory {
    background: linear-gradient(180deg, #ffd700, #ffaa00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

.overlay-title.defeat {
    background: linear-gradient(180deg, #ff3333, #8b1a1a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.6));
}

.overlay-subtitle {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #ccc;
    margin-bottom: var(--space-8);
    opacity: 0;
    animation: fade-in 0.5s ease-out forwards 0.5s;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.overlay-btn {
    padding: var(--space-4) var(--space-8);
    font-size: 1.5rem;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: fade-in 0.5s ease-out forwards 0.8s;
    transition: all 0.2s ease;
}

.overlay-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* ============================================
   BOSS PANEL - Right Page
   ============================================ */
.boss-panel {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-shadow: inset 8px 0 12px -8px rgba(0, 0, 0, 0.1);

    /* Seamless transition setup - match bottom color to draft panel top */
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(to bottom, var(--parchment-light) 0%, var(--parchment) 100%);
    background-blend-mode: multiply, normal;
}

.boss-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    border: 3px solid var(--gold-ornament);
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(160deg, #f0e6d2 0%, #decba5 100%);
    background-blend-mode: multiply, normal;
    position: relative;
    border-radius: var(--radius-xl);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 0 40px rgba(160, 120, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Inner ornamental border */
.boss-card::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(212, 168, 75, 0.3);
    border-radius: calc(var(--radius-xl) - 4px);
    pointer-events: none;
}

/* Decorative header flourish */
.boss-card::before {
    content: '— ✦ —';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #f5ebe0 0%, #f0e6d2 100%);
    border: 2px solid var(--gold-ornament);
    border-radius: 6px;
    padding: 2px var(--space-4);
    color: var(--gold-ornament);
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.boss-header {
    text-align: center;
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--gold-ornament);
}

.boss-name-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

#boss-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink-red);
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: 700;
    text-transform: uppercase;
}

/* HP Bar - Enhanced Glass Effect */
.hp-bar-container {
    background: linear-gradient(180deg,
            var(--parchment-shadow) 0%,
            var(--parchment-aged) 60%,
            var(--parchment-dark) 100%);
    height: 28px;
    border: 2px solid var(--leather);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15);
}

.hp-fill {
    background: linear-gradient(180deg,
            #d04040 0%,
            #c03030 20%,
            #8b1a1a 60%,
            #5a0a0a 100%);
    height: 100%;
    width: 100%;
    position: relative;
    transition: width var(--transition-slow);
    border-radius: 12px;
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(139, 26, 26, 0.3);
}

/* Glass sheen on HP bar */
.hp-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0.1) 60%,
            transparent 100%);
    border-radius: 10px 10px 0 0;
}

.hp-fill.low {
    animation: hpPulse 1s ease-in-out infinite;
}

@keyframes hpPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

#boss-hp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.03em;
}

/* Boss Display */
.boss-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) 0;
}

.boss-avatar-placeholder {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1;
    background: linear-gradient(145deg, var(--parchment) 0%, var(--parchment-aged) 100%);
    border: 3px solid var(--leather);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    position: relative;
    box-shadow:
        var(--shadow-lg),
        inset 0 0 30px rgba(0, 0, 0, 0.08),
        0 0 0 4px var(--gold-ornament),
        0 0 0 6px var(--leather);
}

.boss-avatar-placeholder::before {
    content: '👹';
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    animation: bossIdle 3s ease-in-out infinite;
}

@keyframes bossIdle {

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

    50% {
        transform: scale(1.03) translateY(-4px);
    }
}

.boss-card .character-info {
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--parchment-shadow);
}

.boss-card .level-badge {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--ink-brown);
    text-align: center;
}

/* ============================================
   BOSS MECHANICS HINT TOOLTIP
   ============================================ */
.boss-mechanics-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    margin-left: 4px;
}

.mechanics-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 20px;
    text-align: center;
    background: linear-gradient(145deg, var(--gold-highlight) 0%, var(--gold-ornament) 100%);
    border: 1.5px solid var(--gold-dark);
    border-radius: 50%;
    color: var(--ink-brown);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
    transition: all var(--transition-fast);
}

.boss-mechanics-hint:hover .mechanics-icon {
    transform: scale(1.1);
    background: linear-gradient(145deg, var(--gold-ornament) 0%, var(--gold-dark) 100%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.4),
        0 0 12px rgba(212, 168, 75, 0.4);
}

.mechanics-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(170deg, #f5ebe0 0%, #e8dcc8 50%, #ddd0b8 100%);
    background-blend-mode: multiply, normal;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    min-width: 280px;
    max-width: 340px;
    box-shadow:
        /* Outer torn edge effect - uneven shadow */
        1px 2px 0 rgba(92, 61, 30, 0.6),
        2px 3px 0 rgba(92, 61, 30, 0.4),
        3px 4px 0 rgba(92, 61, 30, 0.25),
        /* Main drop shadow */
        0 10px 30px rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.25),
        /* Inner parchment glow */
        inset 0 0 30px rgba(139, 90, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition: all var(--transition-fast);
    pointer-events: none;
}

/* Inner border - simulates aged paper edge */
.mechanics-tooltip::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px solid var(--leather-light);
    border-radius: calc(var(--radius-lg) - 6px);
    box-shadow:
        inset 0 0 0 1px rgba(139, 90, 43, 0.15),
        inset 2px 2px 4px rgba(139, 90, 43, 0.06);
    pointer-events: none;
}

.boss-mechanics-hint:hover .mechanics-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Tooltip arrow - pointing up */
.mechanics-tooltip::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #e8dcc8 transparent;
}

.mechanics-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--gold-ornament);
}

.mechanics-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-brown);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mechanics-description {
    color: #3d2914;
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: var(--space-4);
    padding: 0 var(--space-2);
    font-family: 'IM Fell English', serif;
    font-style: italic;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mechanics-rules {
    color: #2a1a0a;
    font-size: 0.9rem;
    line-height: 1.85;
    padding: var(--space-4);
    margin: 0;
    font-family: var(--font-body);
    background: linear-gradient(165deg,
            rgba(232, 220, 200, 0.6) 0%,
            rgba(221, 208, 184, 0.5) 100%);
    border-radius: var(--radius-md);
    border: 1px solid rgba(92, 61, 30, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Style for the rules list items */
.mechanics-rules li {
    margin-bottom: var(--space-2);
    padding-left: var(--space-1);
    position: relative;
}

.mechanics-rules li:last-child {
    margin-bottom: 0;
}

/* Custom bullet styling */
.mechanics-rules li::marker {
    color: var(--gold-ornament);
    font-size: 1.1em;
}

/* ============================================
   BOTTOM DECK - Inventory & Draft
   ============================================ */
.bottom-deck {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    /* Removed border and pseudo-element to merge with top pages */
}

/* Inventory Panel */
.inventory-panel {
    padding: 35px var(--space-6) var(--space-3);
    border-right: 1px solid var(--parchment-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
    height: 380px;
    /* Synchronized high-fidelity height */
    box-shadow: inset -10px 0 20px -10px rgba(0, 0, 0, 0.15);
}

.inventory-scroll-area {
    margin-top: 0;
    flex: 1;
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(145deg, var(--parchment-light) 0%, var(--parchment) 100%);
    background-blend-mode: multiply, normal;
    border: 2px solid var(--leather-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.08);
    min-height: 140px;
    position: relative;
}

/* Inner ornamental border */
.inventory-scroll-area::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(92, 61, 30, 0.15);
    border-radius: calc(var(--radius-lg) - 4px);
    pointer-events: none;
    z-index: 5;
}

/* Scrollbar styling */
.inventory-scroll-area::-webkit-scrollbar {
    width: 8px;
    /* Vertical scrollbar width */
    height: 8px;
}

.inventory-scroll-area::-webkit-scrollbar-track {
    background: var(--parchment-shadow);
    border-radius: 4px;
}

.inventory-scroll-area::-webkit-scrollbar-thumb {
    background: var(--leather);
    border-radius: 4px;
}

.inventory-scroll-area::-webkit-scrollbar-thumb:hover {
    background: var(--leather-light);
}

.inventory-list {
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap to next line */
    gap: var(--space-4);
    align-items: flex-start;
    /* Align to top */
    justify-content: flex-start;
    width: 100%;
}

.empty-inventory-message {
    width: 100%;
    text-align: center;
    padding: var(--space-6) 0;
    font-family: 'IM Fell English', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--ink-faded);
    opacity: 0.5;
    pointer-events: none;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

/* Draft Panel */
/* Draft Panel - Redesigned for Vertical Cards */
.draft-panel {
    padding: 40px var(--space-5) 20px;
    /* Reduced bottom padding to move button down */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Increased gap for structural clarity */
    position: relative;
    height: 380px;
    /* Extended for visual balance and to avoid overlaps */
    /* Seamless transition from Boss Panel (which ends at --parchment) */
    box-shadow: inset 10px 0 20px -10px rgba(0, 0, 0, 0.1);

    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(to bottom, var(--parchment) 0%, var(--parchment-aged) 100%);

    background-blend-mode: multiply, normal;
}

.draft-area {
    flex: 1;
    overflow: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-2);
}

/* Scrollbar hidden as we fit 3 items */
.draft-area::-webkit-scrollbar {
    display: none;
}

/* Empty Draft State */
.empty-draft-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-4);
    opacity: 0.8;
    animation: draftEmptyFade 0.8s ease-out forwards;
    padding: var(--space-5);
    width: 100%;
}

@keyframes draftEmptyFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.empty-draft-icon {
    font-size: 3.5rem;
    filter: sepia(0.5) contrast(0.8) brightness(0.9);
    opacity: 0.3;
    margin-bottom: -10px;
}

.empty-draft-text {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.1rem;
    color: var(--ink-faded);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.empty-draft-hint {
    font-family: 'IM Fell English', serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ink-faded);
    opacity: 0.65;
    max-width: 280px;
    line-height: 1.3;
}

/* Draft Options - Redesigned as Torn Notebook Pages */
.draft-option {
    flex: 0 1 185px;
    height: 241px;
    /* Slightly taller to accommodate spacing */
    cursor: pointer;
    transition: transform var(--transition-normal), filter var(--transition-normal);
    position: relative;
    padding: var(--space-5) var(--space-3) var(--space-6);
    /* More breathing room */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    overflow: visible;
    background: none;
    border: none;
    z-index: 10;
}

/* Paper Background with Clip Path moved to pseudo-element */
.draft-option::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(175deg,
            #fffdf5 0%,
            #f2e6d0 30%,
            #e8dcc0 70%,
            #e0d0b0 100%);
    background-blend-mode: multiply, normal;

    /* Torn Edge Effect - Defines visible paper area ONLY */
    clip-path: polygon(0% 0%, 5% 1%, 12% 0%, 20% 1.5%, 32% 0%, 45% 1%, 55% 0%, 65% 1.2%, 78% 0%, 88% 1%, 100% 0%,
            100% 100%, 95% 99%, 88% 100%, 75% 98.5%, 62% 100%, 50% 99%, 38% 100%, 25% 98.8%, 12% 100%, 0% 99%);

    /* Stronger Shadow for Separation */
    box-shadow:
        /* Deep drop shadow */
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 6px rgba(0, 0, 0, 0.2),
        /* Paper stack edge */
        1px 1px 0 rgba(160, 140, 110, 0.7),
        2px 2px 0 rgba(160, 140, 110, 0.5),
        /* Inner definition */
        inset 0 0 20px rgba(139, 90, 43, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);

    /* Filter to brighten it up against the darker background */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
    transition: all var(--transition-normal);
    will-change: transform;
    backface-visibility: hidden;
}

/* Atmospheric stains on cards */
.draft-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80px 60px at 15% 20%, rgba(139, 90, 43, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50px 40px at 85% 80%, rgba(139, 90, 43, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.draft-option.common {
    border-color: var(--ink-faded);
}

.draft-option.uncommon {
    border-color: var(--green-herb);
}

.draft-option.rare {
    border-color: var(--blue-ink);
}

.draft-option.epic {
    border-color: #7b4fb0;
}

.draft-option.legendary {
    border-color: var(--gold-ornament);
    box-shadow: 0 0 10px rgba(212, 168, 75, 0.2);
}


.draft-option:hover {
    transform: translateY(-8px) rotate(1deg) scale(1.05);
    z-index: 100;
}

.draft-option:hover::after {
    filter: brightness(1.03);
    box-shadow:
        2px 2px 10px rgba(0, 0, 0, 0.2),
        inset 0 0 40px rgba(212, 168, 75, 0.08);
}

/* Rarity-specific hover glows */
.draft-option.common:hover {
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(107, 90, 74, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.draft-option.uncommon:hover {
    border-color: var(--green-herb);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 0 25px rgba(61, 107, 53, 0.6),
        0 0 0 3px rgba(61, 107, 53, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.draft-option.rare:hover {
    border-color: var(--blue-ink);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(42, 74, 108, 0.7),
        0 0 0 3px rgba(42, 74, 108, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.draft-option.epic:hover {
    border-color: #7b4fb0;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 0 35px rgba(123, 79, 176, 0.8),
        0 0 0 3px rgba(123, 79, 176, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.draft-option.legendary:hover {
    border-color: var(--gold-ornament);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(212, 168, 75, 0.9),
        0 0 20px rgba(232, 192, 96, 0.7),
        0 0 0 3px rgba(212, 168, 75, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: legendaryHoverPulse 1.5s ease-in-out infinite;
}

@keyframes legendaryHoverPulse {

    0%,
    100% {
        filter: brightness(1.1);
    }

    50% {
        filter: brightness(1.15);
    }
}

/* Draft Option Icon - Sketched Frame Look */
.draft-option-icon {
    width: 55px;
    height: 55px;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.4), transparent),
        var(--item-color, rgba(0, 0, 0, 0.05));
    background-blend-mode: overlay;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-top: 0;
    margin-bottom: var(--space-1);
    flex-shrink: 0;

    /* Sketched border effect */
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(92, 61, 30, 0.15);
}

.icon-text {
    font-size: 2.2rem;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) sepia(0.3);
    transition: transform var(--transition-fast);
}

.draft-option:hover .icon-text {
    transform: scale(1.1) rotate(5deg);
}

/* Small hand-drawn ornaments around icon */
.draft-option-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1.5px dashed rgba(92, 61, 30, 0.25);
    border-radius: 8px;
    pointer-events: none;
    transform: rotate(-2deg);
}

.draft-option-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(92, 61, 30, 0.15);
    border-radius: 6px;
    pointer-events: none;
    transform: rotate(1deg);
}

.draft-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    /* Tighter, more consistent spacing */
    width: 100%;
    text-align: center;
    margin-top: 0;
}

.draft-option-name {
    font-family: 'Cinzel', serif;
    /* Stronger, more premium font */
    font-size: 1.2rem;
    font-style: normal;
    color: var(--ink-black);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 1.2em;
    /* Fit single line or tightly wrapped */
    z-index: 2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    margin-bottom: var(--space-1);
}

/* Decorative line under name - Moved to be more subtle */
.draft-option-name::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 25%;
    right: 25%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 61, 30, 0.2), transparent);
}

.draft-option-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* Tight proximity for Type and Shape */
    font-size: 0.75rem;
    color: var(--ink-faded);
    width: 100%;
}

.draft-option-type {
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    /* Adjusted spacing */
    color: var(--ink-faded);
    font-weight: 600;
    margin-top: var(--space-1);
    opacity: 0.8;
}

/* Draft shape preview */
.draft-shape-preview {
    display: grid;
    grid-auto-flow: row;
    gap: 2px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
}

.shape-cell {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
}

.shape-cell.empty {
    background: transparent;
    border: none;
}

/* Rarity Indicator (Dot) */
.draft-option-rarity {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
}

/* Draft Card Damage Badge - Red Wax Seal/Stamp style */
.draft-option-damage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: radial-gradient(circle at 35% 35%,
            #a83232 0%,
            #8b1a1a 45%,
            #631212 100%);
    color: #f5ebe0;
    border-radius: 50% 48% 52% 49% / 48% 52% 49% 51%;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 10px rgba(0, 0, 0, 0.3);
    margin: 0;
    position: absolute;
    bottom: -18px;
    /* Lower position for better overlap */
    /* Balanced bleed */
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    z-index: 15;
    border: none;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.draft-option:hover .draft-option-damage {
    transform: translateX(-50%) rotate(0deg) scale(1.1);
}

/* Wax seal rim */
.draft-option-damage::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 3px solid rgba(139, 26, 26, 0.4);
    border-radius: inherit;
    z-index: -1;
    filter: blur(1px);
}

.draft-option-damage-label {
    font-size: 0.45rem;
    /* Scaled down */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: -1px;
}

.draft-option-damage-value {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    /* Scaled down */
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Reroll Button - Gold Wax Seal */
.btn-reroll {
    width: 100%;
    max-width: 200px;
    align-self: center;
    margin-top: auto;
    /* Push to bottom if flex container allows, matches request 'Down move' */
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(165deg, var(--gold-highlight) 0%, var(--gold-ornament) 50%, var(--gold-dark) 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--leather-dark);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    box-shadow:
        0 3px 0 #7a5510,
        0 5px 15px rgba(154, 117, 32, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    height: 44px;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.btn-reroll::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-reroll:hover {
    transform: translateY(-2px);
    box-shadow:
        0 5px 0 #7a5510,
        0 8px 20px rgba(154, 117, 32, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(165deg, #f0d070 0%, #e0b850 50%, #b08520 100%);
}

.btn-reroll:hover::after {
    left: 100%;
}

.btn-reroll:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 #7a5510,
        0 3px 8px rgba(154, 117, 32, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-reroll:disabled {
    background: linear-gradient(165deg, #bbb 0%, #999 50%, #777 100%);
    box-shadow:
        0 2px 0 #555,
        0 4px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(26, 15, 8, 0.6);
    cursor: not-allowed;
    opacity: 0.8;
    transform: none;
    text-shadow: none;
}

.btn-reroll:disabled::after {
    display: none;
}

/* ============================================
   ITEMS - Equipment Cards
   ============================================ */
.item {
    width: 64px;
    height: 64px;
    background: linear-gradient(145deg, var(--parchment-light) 0%, var(--parchment) 100%);
    border: 2px solid var(--leather);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: grab;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal), filter var(--transition-normal);
    will-change: transform;
    backface-visibility: hidden;
}

.item:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(212, 168, 75, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: var(--gold-ornament);
    filter: brightness(1.1);
    z-index: 10;
}

/* Rarity-specific hover glows for inventory items */
.item.common:hover {
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(107, 90, 74, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.item.uncommon:hover {
    border-color: var(--green-herb);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 18px rgba(61, 107, 53, 0.7),
        0 0 0 2px rgba(61, 107, 53, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.item.rare:hover {
    border-color: var(--blue-ink);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 22px rgba(42, 74, 108, 0.8),
        0 0 0 2px rgba(42, 74, 108, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.item.epic:hover {
    border-color: #7b4fb0;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 25px rgba(123, 79, 176, 0.9),
        0 0 0 2px rgba(123, 79, 176, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.item.legendary:hover {
    border-color: var(--gold-ornament);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(212, 168, 75, 1),
        0 0 15px rgba(232, 192, 96, 0.7),
        0 0 0 2px rgba(212, 168, 75, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: legendaryItemHoverPulse 1.2s ease-in-out infinite;
}

@keyframes legendaryItemHoverPulse {

    0%,
    100% {
        filter: brightness(1.1) drop-shadow(0 0 4px rgba(212, 168, 75, 0.8));
    }

    50% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(232, 192, 96, 1));
    }
}

.item:active {
    cursor: grabbing;
    transform: scale(1.08);
}

/* Item Rarity Styles */
.item.common {
    border-color: var(--ink-faded);
    background: linear-gradient(145deg, var(--parchment) 0%, var(--parchment-aged) 100%);
}

.item.uncommon {
    border-color: var(--green-herb);
    background: linear-gradient(145deg, var(--parchment-light) 0%, rgba(61, 107, 53, 0.12) 100%);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(61, 107, 53, 0.2);
}

.item.rare {
    border-color: var(--blue-ink);
    background: linear-gradient(145deg, var(--parchment-light) 0%, rgba(42, 74, 108, 0.15) 100%);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(42, 74, 108, 0.25);
}

.item.epic {
    border-color: #7b4fb0;
    background: linear-gradient(145deg, var(--parchment-light) 0%, rgba(123, 79, 176, 0.15) 100%);
    box-shadow: var(--shadow-md), 0 0 12px rgba(123, 79, 176, 0.25);
}

.item.legendary {
    border-color: var(--gold-ornament);
    background: linear-gradient(145deg, var(--parchment-light) 0%, rgba(212, 168, 75, 0.2) 100%);
    box-shadow: var(--shadow-md), 0 0 20px rgba(212, 168, 75, 0.35);
    animation: legendaryGlow 2.5s ease-in-out infinite;
}

@keyframes legendaryGlow {

    0%,
    100% {
        box-shadow: var(--shadow-md), 0 0 15px rgba(212, 168, 75, 0.3);
    }

    50% {
        box-shadow: var(--shadow-md), 0 0 25px rgba(212, 168, 75, 0.5);
    }
}

/* Item Sub-blocks */
.item-sub-block {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, var(--leather-light) 0%, var(--leather) 100%);
    border: 1px solid var(--leather-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

/* Damage Popup */
.damage-popup {
    position: absolute;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--ink-red);
    text-shadow:
        2px 2px 0 var(--parchment-light),
        -1px -1px 0 var(--parchment-light);
    animation: damageFloat 0.9s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes damageFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }

    20% {
        transform: translateY(-10px) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1);
    }
}

/* Heal Popup */
.heal-popup {
    position: absolute;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--green-herb);
    text-shadow:
        2px 2px 0 var(--parchment-light),
        -1px -1px 0 var(--parchment-light);
    animation: healFloat 0.9s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes healFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }

    20% {
        transform: translateY(-10px) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1);
    }
}

/* Screen Shake */
@keyframes screenShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px);
    }
}

.shake {
    animation: screenShake 0.4s ease-in-out;
}

/* Footer (Hidden) */
.game-footer {
    display: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1000px) {
    body {
        padding: var(--space-4);
    }

    .main-stage {
        grid-template-columns: 1fr;
    }

    .stats-panel {
        grid-column: 1;
        grid-row: 1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid var(--parchment-shadow);
        box-shadow: inset 0 -8px 12px -8px rgba(0, 0, 0, 0.08);
    }

    .stat-capsule {
        flex: 1;
        min-width: 120px;
        max-width: 180px;
    }

    .grid-panel {
        grid-column: 1;
        grid-row: 2;
        border-right: none;
        box-shadow: inset 0 8px 12px -8px rgba(0, 0, 0, 0.05);
    }

    .boss-panel {
        grid-column: 1;
        grid-row: 3;
        border-top: 1px solid var(--parchment-shadow);
        box-shadow: inset 0 8px 12px -8px rgba(0, 0, 0, 0.08);
    }

    .boss-avatar-placeholder {
        max-width: 140px;
    }

    .bottom-deck {
        grid-template-columns: 1fr;
    }

    .inventory-panel {
        border-right: none;
        border-bottom: 1px solid var(--parchment-shadow);
        box-shadow: inset 0 -8px 12px -8px rgba(0, 0, 0, 0.08);
    }

    .draft-panel {
        box-shadow: inset 0 8px 12px -8px rgba(0, 0, 0, 0.08);
    }
}

@media (max-width: 600px) {
    body {
        padding: var(--space-2);
    }

    .game-container {
        padding: 8px;
        border-radius: var(--radius-md);
    }

    .game-container::after {
        display: none;
    }

    .backpack-grid {
        grid-template-columns: repeat(3, 56px);
        grid-template-rows: repeat(3, 56px);
    }

    .grid-cell {
        width: 56px;
        height: 56px;
    }

    .item {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    #boss-name {
        font-size: 1.1rem;
    }

    .btn-fight {
        font-size: 0.9rem;
        padding: var(--space-3) var(--space-4);
        max-width: 160px;
    }

    .boss-avatar-placeholder {
        max-width: 120px;
        font-size: 3.5rem;
    }

    .inventory-panel,
    .draft-panel {
        height: 320px;
        min-height: 320px;
        padding-top: 36px;
    }
}

/* ============================================
   TOOLTIP STYLES
   ============================================ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--leather-dark);
    color: var(--parchment-light);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

[data-tooltip].tooltip-bottom::after {
    bottom: auto;
    top: 100%;
    transform: translateX(-50%) translateY(8px);
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* ============================================
   FOCUS STATES (Accessibility)
   ============================================ */
.btn-fight:focus-visible,
.btn-reroll:focus-visible,
.draft-option:focus-visible,
.item:focus-visible {
    outline: 3px solid var(--gold-highlight);
    outline-offset: 2px;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--parchment-shadow);
    border-top-color: var(--gold-ornament);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   ITEM TOOLTIP - Parchment Scroll Style
   ============================================ */
.item-tooltip {
    position: fixed;
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(170deg, #f5ebe0 0%, #e8dcc8 50%, #ddd0b8 100%);
    background-blend-mode: multiply, normal;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow:
        1px 2px 0 rgba(92, 61, 30, 0.6),
        2px 3px 0 rgba(92, 61, 30, 0.4),
        3px 4px 0 rgba(92, 61, 30, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 30px rgba(139, 90, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 10000;
    pointer-events: none;
    min-width: 280px;
    max-width: 340px;
    animation: tooltipFadeIn 0.2s ease;
}

/* Rough inner border - simulates aged paper edge */
.item-tooltip::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px solid var(--leather-light);
    border-radius: calc(var(--radius-lg) - 6px);
    /* Subtle uneven edge using filter */
    box-shadow:
        inset 0 0 0 1px rgba(139, 90, 43, 0.15),
        inset 2px 2px 4px rgba(139, 90, 43, 0.06);
    pointer-events: none;
}

/* Corner wear marks */
.item-tooltip::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: calc(var(--radius-lg) - 10px);
    border: 1px dashed rgba(139, 90, 43, 0.12);
    pointer-events: none;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

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

.tooltip-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--gold-ornament);
}

.tooltip-icon {
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.tooltip-potion-icon {
    width: 32px;
    height: 40px;
    margin-right: -4px;
}

.tooltip-potion-bottle {
    transform: scale(0.7);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tooltip-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-brown);
    flex: 1;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    padding-top: 2px;
}

.tooltip-meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    font-size: 0.75rem;
}

.tooltip-type,
.tooltip-tier,
.tooltip-rarity {
    padding: 3px 8px;
    border-radius: 2px;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

.tooltip-type {
    background: rgba(139, 90, 43, 0.1);
    color: var(--ink-brown);
    border-color: var(--leather-light);
}

.tooltip-type.potion-badge {
    background: rgba(192, 57, 43, 0.15);
    color: #c0392b;
    border-color: rgba(192, 57, 43, 0.3);
}

.tooltip-tier {
    background: rgba(42, 74, 108, 0.15);
    color: var(--blue-ink);
    border-color: var(--blue-ink);
}

.tooltip-rarity {
    font-weight: 700;
}

.tooltip-rarity-common {
    background: rgba(107, 90, 74, 0.15);
    color: var(--ink-faded);
    border-color: var(--ink-faded);
}

.tooltip-rarity-uncommon {
    background: rgba(61, 107, 53, 0.12);
    color: var(--green-herb);
    border-color: var(--green-herb);
}

.tooltip-rarity-rare {
    background: rgba(42, 74, 108, 0.12);
    color: var(--blue-ink);
    border-color: var(--blue-ink);
}

.tooltip-rarity-epic {
    background: rgba(123, 79, 176, 0.12);
    color: #7b4fb0;
    border-color: #7b4fb0;
}

.tooltip-rarity-legendary {
    background: rgba(212, 168, 75, 0.15);
    color: var(--gold-dark);
    border-color: var(--gold-ornament);
}

.tooltip-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(139, 90, 43, 0.06);
    border-left: 3px solid var(--leather-light);
    border-radius: 0 3px 3px 0;
}

.tooltip-stat {
    display: flex;
    flex-direction: column;
    /* Better for long potion effects */
    gap: 4px;
    font-size: 0.95rem;
}

.tooltip-stat-label {
    color: var(--leather);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.tooltip-stat-value {
    color: var(--ink-brown);
    font-weight: 700;
    line-height: 1.4;
}

.tooltip-description {
    font-size: 0.9rem;
    color: var(--ink-brown);
    font-family: 'IM Fell English', serif;
    font-style: italic;
    line-height: 1.5;
    padding-top: var(--space-3);
    border-top: 1px dashed rgba(139, 90, 43, 0.2);
    text-align: center;
    opacity: 0.9;
}

.tooltip-upgrade {
    margin-top: var(--space-3);
    padding: var(--space-2);
    background: rgba(139, 90, 43, 0.08);
    border: 1px dashed var(--leather-light);
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    color: var(--ink-brown);
    font-family: 'IM Fell English', serif;
    font-style: italic;
    text-align: center;
}

.tooltip-max-tier {
    margin-top: var(--space-3);
    padding: var(--space-2);
    background: rgba(212, 168, 75, 0.12);
    border: 1px solid var(--gold-ornament);
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    color: var(--gold-dark);
    font-family: var(--font-display);
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.05em;
}

/* Detailed upgrade section - Scroll note style */
.tooltip-upgrade-section {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(139, 90, 43, 0.06);
    border: 2px solid var(--leather-light);
    border-radius: var(--radius-md);
    position: relative;
}

/* Decorative quill mark */
.tooltip-upgrade-section::before {
    content: '⬆';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #f5ebe0 0%, #e8dcc8 100%);
    padding: 2px 8px;
    font-size: 0.7rem;
    color: var(--leather);
    border: 1px solid var(--leather-light);
    border-radius: var(--radius-sm);
}

.tooltip-upgrade-title {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--leather);
    text-align: center;
    margin-bottom: var(--space-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tooltip-upgrade-criteria {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.tooltip-criteria-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.75rem;
    line-height: 1.4;
}

.criteria-icon {
    color: var(--leather);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.criteria-text {
    color: var(--ink-brown);
    flex: 1;
    font-family: 'IM Fell English', serif;
}

.criteria-text strong {
    color: var(--ink-black);
    font-weight: 700;
    font-family: var(--font-body);
}

.criteria-text em {
    color: var(--ink-faded);
    font-size: 0.7rem;
    font-style: italic;
}

.tooltip-upgrade-result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--parchment-shadow);
    margin-top: var(--space-2);
}

.upgrade-arrow {
    font-size: 1rem;
    color: var(--gold-dark);
    font-weight: 700;
}

.upgrade-next {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.upgrade-next-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-brown);
}

.upgrade-next-tier {
    font-size: 0.65rem;
    color: var(--blue-ink);
    font-weight: 600;
    font-family: var(--font-body);
}

.upgrade-next-damage {
    font-size: 0.7rem;
    color: var(--ink-red);
    font-weight: 700;
    font-family: var(--font-heading);
}


/* ============================================
   MERGE SYSTEM
   ============================================ */

/* Item container states */
.item-container {
    transition: all var(--transition-normal), filter var(--transition-normal);
    position: relative;
}

.item-container:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(212, 168, 75, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    filter: brightness(1.15);
    z-index: 10;
    cursor: grab;
}

.item-container.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.item-container.mergeable {
    animation: mergeablePulse 1s ease-in-out infinite;
    box-shadow: 0 0 12px var(--green-herb), 0 0 20px rgba(61, 107, 53, 0.4);
    border: 2px solid var(--green-herb);
    border-radius: 6px;
}

.item-container.merge-target {
    animation: mergeTargetGlow 0.5s ease-in-out infinite;
    box-shadow: 0 0 20px var(--gold-ornament), 0 0 30px rgba(212, 168, 75, 0.6);
    border: 2px solid var(--gold-ornament);
    border-radius: 6px;
    transform: scale(1.1);
}

@keyframes mergeablePulse {

    0%,
    100% {
        box-shadow: 0 0 8px var(--green-herb), 0 0 16px rgba(61, 107, 53, 0.3);
    }

    50% {
        box-shadow: 0 0 16px var(--green-herb), 0 0 24px rgba(61, 107, 53, 0.5);
    }
}

@keyframes mergeTargetGlow {

    0%,
    100% {
        box-shadow: 0 0 15px var(--gold-ornament), 0 0 25px rgba(212, 168, 75, 0.5);
        transform: scale(1.08);
    }

    50% {
        box-shadow: 0 0 25px var(--gold-ornament), 0 0 40px rgba(212, 168, 75, 0.7);
        transform: scale(1.12);
    }
}

/* Tier indicator on items */
.item-tier-indicator {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(145deg, var(--gold-highlight) 0%, var(--gold-ornament) 100%);
    color: var(--ink-black);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
    font-family: var(--font-heading);
    border: 1px solid var(--gold-dark);
}

/* ============================================
   MERGE NOTIFICATION - Premium Parchment Style
   ============================================ */
.merge-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Parchment texture background matching item-tooltip */
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(170deg, #f5ebe0 0%, #e8dcc8 50%, #ddd0b8 100%);
    background-blend-mode: multiply, normal;
    /* Ornate border with double gold lines */
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    /* Layered shadows for depth and glow */
    box-shadow:
        /* Outer gold glow */
        0 0 40px rgba(212, 168, 75, 0.6),
        0 0 80px rgba(212, 168, 75, 0.3),
        /* 3D edge effect */
        2px 3px 0 rgba(92, 61, 30, 0.5),
        3px 5px 0 rgba(92, 61, 30, 0.3),
        4px 7px 0 rgba(92, 61, 30, 0.15),
        /* Soft drop shadow */
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.25),
        /* Inner paper glow */
        inset 0 0 40px rgba(139, 90, 43, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    min-width: 320px;
    animation: mergeNotifyIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
}

/* Rough inner border - aged paper edge */
.merge-notification::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid var(--gold-ornament);
    border-radius: calc(var(--radius-lg) - 6px);
    box-shadow:
        inset 0 0 0 1px rgba(139, 90, 43, 0.2),
        inset 3px 3px 6px rgba(139, 90, 43, 0.08);
    pointer-events: none;
}

/* Decorative corner marks */
.merge-notification::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: calc(var(--radius-lg) - 12px);
    border: 1px dashed rgba(139, 90, 43, 0.15);
    pointer-events: none;
}

/* Header banner with title */
.merge-notification-header {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--gold-highlight) 0%, var(--gold-ornament) 100%);
    color: var(--ink-black);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 4px;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gold-dark);
    white-space: nowrap;
}

/* Main content row */
.merge-notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-2);
}

/* Input items section */
.merge-items {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3));
}

.merge-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(139, 90, 43, 0.1);
    border: 2px solid var(--leather-light);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15);
    font-size: 1.6rem;
    transition: transform 0.3s ease;
}

.merge-plus {
    font-size: 1.4rem;
    color: var(--leather);
    font-weight: 700;
    font-family: var(--font-display);
    opacity: 0.7;
}

/* Arrow separator */
.merge-arrow {
    font-size: 1.6rem;
    color: var(--gold-ornament);
    font-weight: 900;
    font-family: var(--font-display);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    animation: arrowPulse 1s ease-in-out infinite;
}

@keyframes arrowPulse {

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

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* Result section */
.merge-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.merge-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(145deg, rgba(212, 168, 75, 0.2) 0%, rgba(212, 168, 75, 0.1) 100%);
    border: 3px solid var(--gold-ornament);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 20px rgba(212, 168, 75, 0.4),
        0 0 40px rgba(212, 168, 75, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 2rem;
    animation: resultIconGlow 2s ease-in-out infinite;
}

@keyframes resultIconGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(212, 168, 75, 0.4),
            0 0 40px rgba(212, 168, 75, 0.2),
            inset 0 2px 4px rgba(255, 255, 255, 0.3),
            0 4px 8px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow:
            0 0 30px rgba(212, 168, 75, 0.6),
            0 0 60px rgba(212, 168, 75, 0.3),
            inset 0 2px 4px rgba(255, 255, 255, 0.4),
            0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

.merge-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.merge-result-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink-brown);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Tier badge */
.merge-tier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(145deg, var(--gold-highlight) 0%, var(--gold-ornament) 100%);
    color: var(--ink-black);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid var(--gold-dark);
    align-self: flex-start;
}

.merge-tier::before {
    content: '★';
    font-size: 0.65rem;
}

/* Sparkle particles container */
.merge-sparkles {
    position: absolute;
    inset: -30px;
    pointer-events: none;
    overflow: visible;
}

.merge-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--gold-highlight);
    border-radius: 50%;
    box-shadow:
        0 0 8px var(--gold-highlight),
        0 0 16px var(--gold-ornament);
    animation: sparkleFloat 1.5s ease-out forwards;
    opacity: 0;
}

@keyframes sparkleFloat {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.5);
        opacity: 0;
    }
}

/* Pop-in animation with bounce */
@keyframes mergeNotifyIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(-3deg);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08) rotate(1deg);
    }

    70% {
        transform: translate(-50%, -50%) scale(0.95) rotate(-0.5deg);
    }

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

.merge-notification.fade-out {
    animation: mergeNotifyOut 0.6s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

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

    30% {
        transform: translate(-50%, -50%) scale(1.05);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7) translateY(-40px);
    }
}

/* Draft tier badge */
.draft-tier-badge {
    background: var(--blue-ink);
    color: var(--parchment-light);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 4px;
}

/* ============================================
   MULTIPLIER SYSTEM - Arcade Style Effects
   ============================================ */

/* === SCREEN SHAKE FOR BIG MULTIPLIERS === */
/* Optimized: GPU accelerated with translate3d, reduced duration */
@keyframes screenShake {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    10% {
        transform: translate3d(-5px, 0, 0) rotate(-0.5deg);
    }

    20% {
        transform: translate3d(5px, 0, 0) rotate(0.5deg);
    }

    30% {
        transform: translate3d(-4px, 0, 0) rotate(-0.3deg);
    }

    40% {
        transform: translate3d(4px, 0, 0) rotate(0.3deg);
    }

    50% {
        transform: translate3d(-3px, 0, 0) rotate(0);
    }

    60% {
        transform: translate3d(3px, 0, 0) rotate(0);
    }

    70% {
        transform: translate3d(-2px, 0, 0) rotate(0);
    }

    80% {
        transform: translate3d(2px, 0, 0) rotate(0);
    }

    90% {
        transform: translate3d(-1px, 0, 0) rotate(0);
    }
}

.game-container.screen-shake {
    animation: screenShake 0.35s ease-out;
    will-change: transform;
}

/* === DAMAGE VALUE ARCADE ANIMATION === */
.damage-pulse {
    animation: damagePulseArcade 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes damagePulseArcade {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
    }

    20% {
        transform: scale(1.5) rotate(-3deg);
        color: #fff;
        text-shadow:
            0 0 20px var(--gold-highlight),
            0 0 40px var(--gold-ornament),
            0 0 60px rgba(255, 215, 0, 0.8);
    }

    40% {
        transform: scale(1.3) rotate(2deg);
    }

    60% {
        transform: scale(1.4) rotate(-1deg);
        color: var(--gold-highlight);
    }

    100% {
        transform: scale(1) rotate(0);
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    }
}

/* === MULTIPLIER SLOT MACHINE SPIN === */
.stat-capsule.secondary .stat-value {
    transition: all 0.3s ease;
}

.multiplier-spinning {
    animation: slotSpin 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slotSpin {
    0% {
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    20% {
        transform: translateY(-30px) scale(0.8);
        filter: blur(4px);
        opacity: 0.5;
    }

    50% {
        transform: translateY(20px) scale(0.8);
        filter: blur(4px);
        opacity: 0.5;
    }

    70% {
        transform: translateY(-5px) scale(1.2);
        filter: blur(0);
        opacity: 1;
    }

    85% {
        transform: translateY(3px) scale(1.1);
    }

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

/* Multiplier Active State - Lantern-lit warmth (base level) */
.stat-capsule.multiplier-active {
    background: linear-gradient(175deg,
            #fffae8 0%,
            #f7f0d8 40%,
            #efe6c8 100%);
    box-shadow:
        3px 5px 12px rgba(120, 80, 30, 0.25),
        1px 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(180, 140, 60, 0.2);
    animation: lanternFlicker 4s ease-in-out infinite;
}

.stat-capsule.multiplier-active .stat-value {
    color: #8b5a00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.stat-capsule.multiplier-active .stat-label {
    color: #6b4a1a;
}

/* Subtle lantern flicker - shadow depth varies slightly */
@keyframes lanternFlicker {

    0%,
    100% {
        box-shadow:
            3px 5px 12px rgba(120, 80, 30, 0.25),
            1px 2px 4px rgba(0, 0, 0, 0.12),
            inset 0 0 0 1px rgba(180, 140, 60, 0.2);
        filter: brightness(1);
    }

    50% {
        box-shadow:
            4px 6px 14px rgba(120, 80, 30, 0.3),
            2px 3px 5px rgba(0, 0, 0, 0.15),
            inset 0 0 0 1px rgba(180, 140, 60, 0.25);
        filter: brightness(1.02);
    }
}

/* HIGH MULTIPLIER (1.5x+) - Warm golden glow */
.stat-capsule.multiplier-high {
    background: linear-gradient(175deg,
            #fff5d0 0%,
            #f5e5b0 40%,
            #e8d498 100%);
    box-shadow:
        0 0 15px rgba(212, 168, 75, 0.35),
        3px 5px 12px rgba(120, 80, 30, 0.3),
        inset 0 0 0 1px rgba(212, 168, 75, 0.4);
    animation: highMultiplierPulse 1.5s ease-in-out infinite;
}

.stat-capsule.multiplier-high .stat-value {
    color: var(--gold-dark);
    text-shadow:
        0 0 8px rgba(212, 168, 75, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.8);
}

@keyframes highMultiplierPulse {

    0%,
    100% {
        box-shadow:
            0 0 15px rgba(212, 168, 75, 0.35),
            3px 5px 12px rgba(120, 80, 30, 0.3),
            inset 0 0 0 1px rgba(212, 168, 75, 0.4);
        transform: rotate(1.5deg) scale(1);
    }

    50% {
        box-shadow:
            0 0 25px rgba(212, 168, 75, 0.5),
            4px 6px 16px rgba(120, 80, 30, 0.35),
            inset 0 0 0 1px rgba(212, 168, 75, 0.5);
        transform: rotate(1.5deg) scale(1.02);
    }
}

/* MEGA MULTIPLIER (2x+) - Intense candlelit warmth */
.stat-capsule.multiplier-mega {
    background: linear-gradient(175deg,
            #fff4d4 0%,
            #f0dca0 40%,
            #dcc580 100%);
    box-shadow:
        0 0 20px rgba(180, 130, 50, 0.4),
        3px 6px 15px rgba(100, 60, 20, 0.35),
        inset 0 0 0 1px rgba(200, 160, 80, 0.5);
    animation: megaMultiplierGlow 1.5s ease-in-out infinite;
}

.stat-capsule.multiplier-mega .stat-value {
    color: #7a4a00;
    text-shadow:
        0 0 6px rgba(200, 150, 50, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.8);
}

.stat-capsule.multiplier-mega .stat-label {
    color: #5a3a10;
}

@keyframes megaMultiplierGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(180, 130, 50, 0.4),
            3px 6px 15px rgba(100, 60, 20, 0.35),
            inset 0 0 0 1px rgba(200, 160, 80, 0.5);
        transform: rotate(1.5deg) scale(1);
        filter: brightness(1);
    }

    50% {
        box-shadow:
            0 0 28px rgba(180, 130, 50, 0.55),
            4px 7px 18px rgba(100, 60, 20, 0.4),
            inset 0 0 0 1px rgba(200, 160, 80, 0.6);
        transform: rotate(1.5deg) scale(1.02);
        filter: brightness(1.04);
    }
}

@keyframes textPulse {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.9;
    }
}

/* Synergy Glow for items in connected groups */


/* Apply glow only to filled sub-cells, not the container */
.item-in-grid-container.synergy-active .item-subcell-filled {
    position: relative;
    box-shadow:
        0 0 10px var(--synergy-color, var(--gold-highlight)),
        0 0 20px var(--synergy-color, var(--gold-ornament)),
        0 0 30px var(--synergy-glow-dim, rgba(212, 168, 75, 0.5)),
        inset 0 0 6px var(--synergy-glow-inner, rgba(255, 215, 0, 0.4));
    border: 2px solid var(--synergy-color, var(--gold-ornament)) !important;
    animation: synergyPulse 1.5s ease-in-out infinite;
}

@keyframes synergyPulse {

    0%,
    100% {
        box-shadow:
            0 0 8px var(--synergy-color, var(--gold-highlight)),
            0 0 16px var(--synergy-color, var(--gold-ornament)),
            0 0 24px var(--synergy-glow-dim, rgba(212, 168, 75, 0.4)),
            inset 0 0 4px var(--synergy-glow-inner, rgba(255, 215, 0, 0.3));
    }

    50% {
        box-shadow:
            0 0 14px var(--synergy-color, var(--gold-highlight)),
            0 0 28px var(--synergy-color, var(--gold-ornament)),
            0 0 40px var(--synergy-glow-dim, rgba(212, 168, 75, 0.6)),
            inset 0 0 8px var(--synergy-glow-inner, rgba(255, 215, 0, 0.5));
    }
}

/* Synergy connection indicator */
.synergy-indicator {
    position: absolute;
    /* top and right are set dynamically via JavaScript based on item shape */
    width: calc(var(--cell-size) * 0.35);
    height: calc(var(--cell-size) * 0.35);
    background: linear-gradient(145deg, var(--gold-highlight) 0%, var(--gold-ornament) 100%);
    border: max(1px, calc(var(--cell-size) * 0.03)) solid var(--leather);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--cell-size) * 0.2);
    font-weight: 700;
    color: var(--ink-black);
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    animation: indicatorBounce 2s ease-in-out infinite;
}

@keyframes indicatorBounce {

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

    50% {
        transform: translateY(-2px);
    }
}

/* Multiplier tooltip that appears on hover */
.synergy-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: linear-gradient(145deg, var(--parchment-light) 0%, var(--parchment) 100%);
    border: 2px solid var(--gold-ornament);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink-black);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.synergy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gold-ornament);
}

.item-in-grid-container:hover .synergy-tooltip {
    opacity: 1;
}

.synergy-tooltip .synergy-type {
    font-weight: 700;
    color: var(--ink-red);
    text-transform: capitalize;
}

.synergy-tooltip .synergy-mult {
    color: var(--gold-dark);
    font-weight: 700;
}

/* Grid synergy line connections (optional visual) */
.synergy-line {
    position: absolute;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--gold-highlight) 50%,
            transparent 100%);
    height: 2px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    animation: lineGlow 1.5s ease-in-out infinite;
}

@keyframes lineGlow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* Synergy group colors by type */
.synergy-type-weapon {
    --synergy-color: #c44536;
    --synergy-glow-dim: rgba(196, 69, 54, 0.5);
    --synergy-glow-inner: rgba(196, 69, 54, 0.4);
}

.synergy-type-armor {
    --synergy-color: #4a7c59;
    --synergy-glow-dim: rgba(74, 124, 89, 0.5);
    --synergy-glow-inner: rgba(74, 124, 89, 0.4);
}

.synergy-type-artifact {
    --synergy-color: #6b5b95;
    --synergy-glow-dim: rgba(107, 91, 149, 0.5);
    --synergy-glow-inner: rgba(107, 91, 149, 0.4);
}

.synergy-type-fruit {
    --synergy-color: #ff7f50;
    --synergy-glow-dim: rgba(255, 127, 80, 0.5);
    --synergy-glow-inner: rgba(255, 127, 80, 0.4);
}

.synergy-type-boot {
    --synergy-color: #8b4513;
    --synergy-glow-dim: rgba(139, 69, 19, 0.5);
    --synergy-glow-inner: rgba(139, 69, 19, 0.4);
}

/* Color Synergies */
.synergy-type-red {
    --synergy-color: #ff4444;
    --synergy-glow-dim: rgba(255, 68, 68, 0.5);
    --synergy-glow-inner: rgba(255, 68, 68, 0.4);
}

.synergy-type-blue {
    --synergy-color: #4488ff;
    --synergy-glow-dim: rgba(68, 136, 255, 0.5);
    --synergy-glow-inner: rgba(68, 136, 255, 0.4);
}

.synergy-type-green {
    --synergy-color: #44aa44;
    --synergy-glow-dim: rgba(68, 170, 68, 0.5);
    --synergy-glow-inner: rgba(68, 170, 68, 0.4);
}

.synergy-type-yellow {
    --synergy-color: #e6b832;
    --synergy-glow-dim: rgba(230, 184, 50, 0.5);
    --synergy-glow-inner: rgba(230, 184, 50, 0.4);
}

.synergy-type-purple {
    --synergy-color: #aa44aa;
    --synergy-glow-dim: rgba(170, 68, 170, 0.5);
    --synergy-glow-inner: rgba(170, 68, 170, 0.4);
}

.synergy-type-brown {
    --synergy-color: #a86832;
    --synergy-glow-dim: rgba(168, 104, 50, 0.5);
    --synergy-glow-inner: rgba(168, 104, 50, 0.4);
}

/* Multiplier breakdown panel (optional expandable) */
.multiplier-breakdown {
    position: absolute;
    top: 100%;
    left: -4px;
    right: -4px;
    background:
        linear-gradient(170deg, #f5ebe0 0%, #e8dcc8 50%, #ddd0b8 100%);
    border: 2px solid var(--leather-light);
    border-top: 1px dashed var(--parchment-shadow);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    font-size: 0.7rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    box-shadow:
        2px 3px 8px rgba(0, 0, 0, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

.stat-capsule.multiplier-active:hover .multiplier-breakdown {
    max-height: 100px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
    border-bottom: 1px dashed rgba(139, 90, 43, 0.15);
}

.breakdown-row:last-child {
    border-bottom: none;
}

.breakdown-type {
    text-transform: capitalize;
    color: var(--ink-brown);
    font-family: 'IM Fell English', serif;
    font-style: italic;
}

.breakdown-mult {
    font-weight: 700;
    color: var(--gold-dark);
    font-family: var(--font-heading);
}

/* ============================================
   ARCADE PARTICLE & CELEBRATION EFFECTS
   ============================================ */

/* === COIN BURST PARTICLES === */
.coin-particle {
    position: fixed;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 30% 30%,
            #ffd700 0%,
            #daa520 50%,
            #b8860b 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 20000;
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    animation: coinBurst 1s ease-out forwards;
}

.coin-particle::before {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: rgba(0, 0, 0, 0.3);
}

@keyframes coinBurst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }

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

/* === FLOATING SCORE NUMBERS === */
.floating-score {
    position: fixed;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 1),
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.6),
        2px 2px 0 #b8860b,
        -1px -1px 0 #fff;
    pointer-events: none;
    z-index: 20001;
    animation: floatScore 1.5s ease-out forwards;
    white-space: nowrap;
}

@keyframes floatScore {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

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

    40% {
        transform: translateY(-30px) scale(1.1);
    }

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

/* === RAINBOW CHROMATIC SYNERGY === */
/* Apply to subcells so it follows the shape, not the bounding box */
.synergy-active.rainbow-glow .item-subcell-filled::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 8px;
    background: linear-gradient(45deg,
            #ff0000, #ff7f00, #ffff00,
            #00ff00, #0000ff, #4b0082,
            #9400d3, #ff0000);
    background-size: 400% 400%;
    z-index: 2;
    filter: blur(3px);
    animation: rainbowFlow 2s linear infinite;
    opacity: 1;

    /* Create a ring by masking the center */
    padding: 4px;
    /* Thickness of the ring */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes rainbowFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* === NEON GLOW EFFECT === */
.neon-flash {
    animation: neonFlash 0.15s ease-in-out 3;
}

@keyframes neonFlash {

    0%,
    100% {
        filter: brightness(1);
        box-shadow: 0 0 5px var(--gold-ornament);
    }

    50% {
        filter: brightness(1.5);
        box-shadow:
            0 0 20px var(--gold-highlight),
            0 0 40px var(--gold-ornament),
            0 0 60px rgba(255, 215, 0, 0.5);
    }
}

/* === JACKPOT CELEBRATION === */
.jackpot-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center,
            rgba(255, 215, 0, 0.3) 0%,
            transparent 70%);
    pointer-events: none;
    z-index: 19999;
    animation: jackpotFlash 0.8s ease-out forwards;
}

@keyframes jackpotFlash {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

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

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

/* === CONFETTI PARTICLES - DEPRECATED (Moved to Canvas for performance) === */

/* === ELECTRIC ARC EFFECT === */
.electric-arc {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            #00ffff 20%,
            #ffffff 40%,
            #ffffff 60%,
            #00ffff 80%,
            transparent 100%);
    filter: blur(1px);
    opacity: 0.8;
    pointer-events: none;
    z-index: 50;
    animation: electricFlicker 0.1s linear infinite;
}

@keyframes electricFlicker {

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

    25% {
        opacity: 0.5;
        transform: scaleY(0.8);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }

    75% {
        opacity: 0.7;
        transform: scaleY(0.9);
    }
}

/* === COMBO METER DISPLAY === */
.combo-meter {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(30, 30, 30, 0.95) 100%);
    border: 3px solid var(--gold-ornament);
    border-radius: 20px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    opacity: 0;
    transform: translateY(-50%) translateX(100px);
    transition: all 0.3s ease-out;
}

.combo-meter.active {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.combo-meter-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: var(--gold-ornament);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.combo-meter-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow:
        0 0 10px var(--gold-highlight),
        0 0 20px var(--gold-ornament);
    line-height: 1;
}

.combo-meter-bar {
    width: 60px;
    height: 150px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--leather);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.combo-meter-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg,
            #ff0000 0%,
            #ff7f00 25%,
            #ffff00 50%,
            #00ff00 75%,
            #00ffff 100%);
    transition: height 0.3s ease-out;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 0 15px currentColor;
}

/* === SYNERGY ACTIVATION BURST === */
.synergy-burst {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
            rgba(255, 215, 0, 0.8) 0%,
            rgba(255, 215, 0, 0.4) 30%,
            transparent 70%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
}

.synergy-active .synergy-burst {
    animation: synergyBurst 0.5s ease-out;
}

@keyframes synergyBurst {
    0% {
        transform: scale(0);
        opacity: 1;
    }

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

/* === MULTIPLIER HIT EFFECT === */
.multiplier-hit {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: #fff;
    text-shadow:
        0 0 20px #ff0,
        0 0 40px #ffa500,
        0 0 60px #ff4500,
        4px 4px 0 #000;
    pointer-events: none;
    z-index: 20002;
    animation: multiplierHit 1.2s ease-out forwards;
}

@keyframes multiplierHit {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }

    15% {
        transform: translate(-50%, -50%) scale(1.5) rotate(5deg);
        opacity: 1;
    }

    30% {
        transform: translate(-50%, -50%) scale(1.2) rotate(-3deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg) translateY(-30px);
        opacity: 0;
    }
}

/* === LIGHTNING STRIKE EFFECT === */
.lightning-strike {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    pointer-events: none;
    z-index: 19998;
}

.lightning-strike.flash {
    animation: lightningFlash 0.15s ease-out;
}

@keyframes lightningFlash {
    0% {
        background: rgba(255, 255, 255, 0);
    }

    10% {
        background: rgba(255, 255, 255, 0.8);
    }

    20% {
        background: rgba(255, 255, 255, 0.1);
    }

    30% {
        background: rgba(255, 255, 255, 0.6);
    }

    40% {
        background: rgba(255, 255, 255, 0);
    }

    50% {
        background: rgba(255, 255, 255, 0.3);
    }

    100% {
        background: rgba(255, 255, 255, 0);
    }
}

/* ============================================
   DEV TOOLS
   ============================================ */
/* Dev Tools Buttons Stacking */
.dev-buttons-container {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
}

.dev-btn {
    width: 180px;
    /* Unified width */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Left justified */
    gap: 10px;
    background: #2a2a2a;
    color: #eee;
    border: 1px solid #444;
    padding: 8px 16px;
    font-family: monospace;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.3;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.dev-btn:hover {
    opacity: 1;
    z-index: 10010;
    background: #444;
}

.dev-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.dev-modal.hidden {
    display: none;
}

.dev-modal-content {
    background: #1e1e1e;
    color: #e0e0e0;
    width: 90%;
    max-width: 1100px;
    height: 85%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
    font-family: sans-serif;
    transform: scale(var(--ui-scale));
    transform-origin: center center;
    /* Keep it clean for dev stuff */
}

.dev-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #252525;
    border-radius: 8px 8px 0 0;
}

.dev-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.dev-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
}

.dev-modal-close:hover {
    color: #fff;
}

.dev-filter-bar {
    padding: 12px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    gap: 15px;
    background: #222;
}

.dev-filter-bar input,
.dev-filter-bar select {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.dev-filter-bar input {
    flex: 1;
}

.dev-item-grid {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    background: #1a1a1a;
}

.dev-item-card {
    background: #2a2a2a;
    border: 1px solid #3d3d3d;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
}

.dev-item-card:hover {
    background: #383838;
    border-color: #666;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dev-item-card:active {
    transform: translateY(0);
}

.dev-item-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.dev-item-details {
    flex: 1;
    overflow: hidden;
}

.dev-item-name {
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.dev-item-meta {
    font-size: 0.75em;
    color: #aaa;
    display: flex;
    gap: 8px;
}

.dev-item-tier {
    background: #444;
    padding: 1px 4px;
    border-radius: 2px;
}

/* Scrollbar for dev modal */
.dev-item-grid::-webkit-scrollbar {
    width: 10px;
}

.dev-item-grid::-webkit-scrollbar-track {
    background: #222;
}

.dev-item-grid::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}



/* === DEV BOSS MODAL === */
.dev-boss-modal-content {
    max-width: 600px;
    height: auto;
    max-height: 80%;
}

.dev-boss-grid {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 500px;
}

.dev-boss-card {
    background: #2a2a2a;
    border: 2px solid #3d3d3d;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.15s ease;
    position: relative;
}

.dev-boss-card:hover {
    background: #383838;
    border-color: #666;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dev-boss-card.active {
    border-color: #4CAF50;
    background: linear-gradient(135deg, #2a3a2a 0%, #2a2a2a 100%);
}

.dev-boss-portrait {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 3px solid #555;
    background: #1a1a1a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dev-boss-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dev-boss-placeholder {
    font-size: 32px;
}

.dev-boss-info {
    flex: 1;
    overflow: hidden;
}

.dev-boss-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #fff;
    margin-bottom: 4px;
}

.dev-boss-meta {
    display: flex;
    gap: 12px;
    font-size: 0.85em;
    color: #aaa;
    margin-bottom: 4px;
}

.dev-boss-hp {
    color: #e57373;
}

.dev-boss-mechanics {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
}

.dev-boss-current-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    background: #4CAF50;
    color: #fff;
    font-size: 0.65em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Scrollbar for boss modal */
.dev-boss-grid::-webkit-scrollbar {
    width: 8px;
}

.dev-boss-grid::-webkit-scrollbar-track {
    background: #222;
}

.dev-boss-grid::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

/* ============================================
   ARCADE & ANIMATION ENHANCEMENTS
   ============================================ */

/* Placement Bounce Animation */
@keyframes arcadeDrop {
    0% {
        transform: scale(1.3);
        opacity: 0.5;
    }

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

    70% {
        transform: scale(0.95);
    }

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

.dropped-bounce {
    animation: arcadeDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    transform-origin: center center;
    z-index: 100;
}

/* Enhanced Drag Target Feedback */
.grid-cell.valid-target {
    animation: validPulse 0.8s infinite alternate;
}

@keyframes validPulse {
    from {
        background-color: rgba(61, 107, 53, 0.3);
        box-shadow: inset 0 0 12px rgba(61, 107, 53, 0.3);
        transform: scale(0.95);
    }

    to {
        background-color: rgba(100, 200, 100, 0.5);
        box-shadow: inset 0 0 20px rgba(100, 200, 100, 0.6);
        transform: scale(1);
    }
}

.grid-cell.invalid-target {
    animation: invalidPulse 0.5s infinite alternate;
}

@keyframes invalidPulse {
    from {
        background-color: rgba(139, 26, 26, 0.3);
        box-shadow: inset 0 0 12px rgba(139, 26, 26, 0.3);
    }

    to {
        background-color: rgba(200, 50, 50, 0.5);
        box-shadow: inset 0 0 20px rgba(200, 50, 50, 0.5);
    }
}

/* Juice up the item hover functionality - stronger pop */
.item-in-grid-container {
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.15s ease;
}

.item-in-grid-container:hover {
    transform: translateY(-4px) scale(1.05);
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.3)) brightness(1.1);
    z-index: 50 !important;
}

.item-in-grid-container:active {
    transform: scale(0.9) translateY(0);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.05s ease;
}

/* ============================================
   SHARED MODAL BASE STYLES
   Premium dark wood theme with golden accents
   ============================================ */

/* Shared modal overlay */
.modal-overlay-base {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shared modal content dark wood background */
.modal-content-base {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;

    /* Premium dark wood background */
    background:
        linear-gradient(175deg,
            #1e1812 0%,
            #1a150f 30%,
            #15110c 70%,
            #0f0c08 100%);

    /* Premium layered shadows */
    box-shadow:
        0 0 40px rgba(212, 168, 75, 0.2),
        0 0 80px rgba(212, 168, 75, 0.08),
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 10px 25px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 220, 150, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Shared golden gradient border */
.modal-gold-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 19px;
    background: linear-gradient(180deg,
            #f0d890 0%,
            #d4a84b 25%,
            #a67c30 50%,
            #7a5a20 75%,
            #d4a84b 100%);
    z-index: -1;
    pointer-events: none;
}

/* Shared inner decorative border */
.modal-inner-border::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    border: 1px solid rgba(212, 168, 75, 0.15);
    pointer-events: none;
    z-index: 1;
}

/* Shared modal header - leather-bound style */
.modal-header-base {
    position: relative;
    padding: 24px 20px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    background:
        linear-gradient(180deg,
            rgba(92, 61, 30, 0.5) 0%,
            rgba(61, 40, 21, 0.7) 50%,
            rgba(37, 24, 16, 0.9) 100%);

    border-bottom: 3px solid;
    border-image: linear-gradient(90deg,
            transparent 0%,
            #d4a84b 15%,
            #f0d890 50%,
            #d4a84b 85%,
            transparent 100%) 1;

    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.15),
        inset 0 -2px 8px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Shared header decorative line above */
.modal-header-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 168, 75, 0.5) 20%,
            rgba(240, 216, 144, 0.7) 50%,
            rgba(212, 168, 75, 0.5) 80%,
            transparent 100%);
    border-radius: 0 0 4px 4px;
}

/* Shared modal title - gold gradient text */
.modal-title-base {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    background: linear-gradient(180deg,
            #f8f0d0 0%,
            #f0d890 25%,
            #d4a84b 50%,
            #f0d890 75%,
            #a67c30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 100% 200%;
    animation: modalTitleShimmer 3s ease-in-out infinite;

    text-shadow: 0 0 25px rgba(212, 168, 75, 0.4);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));

    display: flex;
    align-items: center;
    gap: 10px;
}

@keyframes modalTitleShimmer {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 100%;
    }
}

/* Shared modal close button */
.modal-close-base {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(212, 168, 75, 0.3);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    color: rgba(240, 216, 144, 0.8);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
}

.modal-close-base:hover {
    background: rgba(212, 168, 75, 0.2);
    border-color: var(--gold-ornament);
    color: var(--gold-highlight);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(212, 168, 75, 0.4);
}

/* Shared modal enter animation */
@keyframes modalEnterBounce {
    0% {
        transform: scale(0.85) translateY(30px);
        opacity: 0;
    }

    60% {
        transform: scale(1.02) translateY(-5px);
    }

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

/* ============================================
   SETTINGS MODAL
   ============================================ */
.settings-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 40000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.settings-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.settings-modal-content {
    position: relative;
    width: 420px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;

    /* Premium dark wood background */
    background:
        linear-gradient(175deg,
            #1e1812 0%,
            #1a150f 30%,
            #15110c 70%,
            #0f0c08 100%);

    /* More subtle layered shadows */
    box-shadow:
        /* Soft localized golden glow */
        0 0 25px rgba(212, 168, 75, 0.15),
        0 0 50px rgba(212, 168, 75, 0.05),
        /* Depth shadows */
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 10px 25px rgba(0, 0, 0, 0.5),
        /* Inner lighting */
        inset 0 1px 0 rgba(255, 220, 150, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);

    animation: settingsModalEnter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes settingsModalEnter {
    0% {
        transform: scale(calc(0.85 * var(--ui-scale))) translateY(calc(30px * var(--ui-scale)));
        opacity: 0;
    }

    60% {
        transform: scale(calc(1.02 * var(--ui-scale))) translateY(calc(-5px * var(--ui-scale)));
    }

    100% {
        transform: scale(var(--ui-scale)) translateY(0);
        opacity: 1;
    }
}

.settings-modal.hidden .settings-modal-content {
    transform: translateY(calc(20px * var(--ui-scale))) scale(calc(0.95 * var(--ui-scale)));
}

/* Gradient border using pseudo-element */
.settings-modal-content::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 19px;
    background: linear-gradient(180deg,
            #f0d890 0%,
            #d4a84b 25%,
            #a67c30 50%,
            #7a5a20 75%,
            #d4a84b 100%);
    z-index: -1;
    pointer-events: none;
}

/* Inner decorative border */
.settings-modal-content::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    border: 1px solid rgba(212, 168, 75, 0.15);
    pointer-events: none;
    z-index: 1;
}

.settings-modal-header {
    position: relative;
    padding: 24px 20px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Darker leather-bound header for better contrast */
    background:
        linear-gradient(180deg,
            rgba(65, 45, 25, 0.7) 0%,
            rgba(45, 30, 15, 0.85) 50%,
            rgba(25, 15, 10, 0.95) 100%);

    border-bottom: 3px solid;
    border-image: linear-gradient(90deg,
            transparent 0%,
            #d4a84b 15%,
            #f0d890 50%,
            #d4a84b 85%,
            transparent 100%) 1;

    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.15),
        inset 0 -2px 8px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Decorative line above header */
.settings-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 168, 75, 0.5) 20%,
            rgba(240, 216, 144, 0.7) 50%,
            rgba(212, 168, 75, 0.5) 80%,
            transparent 100%);
    border-radius: 0 0 4px 4px;
}

.settings-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    /* Premium gold gradient text */
    background: linear-gradient(180deg,
            #f8f0d0 0%,
            #f0d890 25%,
            #d4a84b 50%,
            #f0d890 75%,
            #a67c30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 100% 200%;
    animation: modalTitleShimmer 3s ease-in-out infinite;

    text-shadow: 0 0 12px rgba(212, 168, 75, 0.35);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));

    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-title-icon {
    width: 26px;
    height: 26px;
    stroke: #d4a84b;
    filter: drop-shadow(0 0 6px rgba(212, 168, 75, 0.5));
    animation: gearSpin 8s linear infinite;
}

@keyframes gearSpin {
    0% {
        transform: rotate(0deg);
    }

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

.settings-modal-close {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(212, 168, 75, 0.3);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    color: rgba(240, 216, 144, 0.8);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
}

.settings-modal-close:hover {
    background: rgba(212, 168, 75, 0.2);
    border-color: var(--gold-ornament);
    color: var(--gold-highlight);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(212, 168, 75, 0.4);
}

.settings-body {
    padding: 24px;
    background: linear-gradient(180deg,
            rgba(21, 17, 12, 0.95) 0%,
            rgba(15, 12, 8, 0.98) 100%);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: rgba(240, 216, 144, 0.9);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 168, 75, 0.2);
}

.settings-section-icon {
    stroke: #d4a84b;
    filter: drop-shadow(0 0 4px rgba(212, 168, 75, 0.4));
}

.settings-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-label {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: rgba(224, 200, 160, 0.9);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-label-icon {
    stroke: rgba(212, 168, 75, 0.7);
    flex-shrink: 0;
}

.settings-slider-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: linear-gradient(180deg,
            rgba(30, 24, 18, 0.9) 0%,
            rgba(40, 32, 24, 0.9) 100%);
    border-radius: 5px;
    border: 2px solid rgba(92, 61, 30, 0.8);
    cursor: pointer;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 220, 150, 0.08);
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(145deg,
            #f0d890 0%,
            #d4a84b 40%,
            #a67c30 100%);
    border-radius: 50%;
    cursor: grab;
    border: 2px solid #7a5a20;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(212, 168, 75, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(212, 168, 75, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.settings-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.settings-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: linear-gradient(145deg,
            #f0d890 0%,
            #d4a84b 40%,
            #a67c30 100%);
    border-radius: 50%;
    cursor: grab;
    border: 2px solid #7a5a20;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(212, 168, 75, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(212, 168, 75, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.settings-slider::-moz-range-track {
    background: transparent;
}

.settings-value {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 50px;
    text-align: right;

    /* Gold gradient text */
    background: linear-gradient(180deg, #f0d890 0%, #d4a84b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(212, 168, 75, 0.3);
}

/* Settings Toggle Row */
.settings-row-toggle {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.settings-toggle-container {
    display: flex;
    align-items: center;
}

.settings-toggle-input {
    display: none;
}

.settings-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    background: linear-gradient(180deg,
            rgba(30, 24, 18, 0.95) 0%,
            rgba(40, 32, 24, 0.95) 100%);
    border: 2px solid rgba(92, 61, 30, 0.8);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 220, 150, 0.08);
}

.settings-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: linear-gradient(145deg,
            rgba(120, 100, 80, 0.9) 0%,
            rgba(80, 65, 50, 0.9) 100%);
    border-radius: 50%;
    border: 2px solid rgba(92, 61, 30, 0.6);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle ON state */
.settings-toggle-input:checked+.settings-toggle {
    background: linear-gradient(180deg,
            rgba(61, 40, 21, 0.9) 0%,
            rgba(92, 61, 30, 0.9) 100%);
    border-color: #d4a84b;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(212, 168, 75, 0.3);
}

.settings-toggle-input:checked+.settings-toggle::before {
    left: 26px;
    background: linear-gradient(145deg,
            #f0d890 0%,
            #d4a84b 40%,
            #a67c30 100%);
    border: 2px solid #7a5a20;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(212, 168, 75, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Toggle hover states */
.settings-toggle:hover {
    border-color: rgba(212, 168, 75, 0.5);
}

.settings-toggle:hover::before {
    transform: scale(1.05);
}

.settings-toggle-input:checked+.settings-toggle:hover {
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(212, 168, 75, 0.4);
}

/* Settings Footer */
.settings-footer {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(212, 168, 75, 0.15);
    display: flex;
    justify-content: center;
}

.settings-restore-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(180deg,
            rgba(40, 32, 24, 0.9) 0%,
            rgba(30, 24, 18, 0.95) 100%);
    border: 2px solid rgba(92, 61, 30, 0.6);
    border-radius: 8px;
    color: rgba(200, 180, 140, 0.8);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 220, 150, 0.05);
}

.settings-restore-btn svg {
    stroke: rgba(212, 168, 75, 0.6);
    transition: all 0.25s ease;
}

.settings-restore-btn:hover {
    background: linear-gradient(180deg,
            rgba(61, 40, 21, 0.9) 0%,
            rgba(40, 30, 20, 0.95) 100%);
    border-color: rgba(212, 168, 75, 0.5);
    color: rgba(240, 216, 144, 0.95);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(212, 168, 75, 0.15),
        inset 0 1px 0 rgba(255, 220, 150, 0.1);
}

.settings-restore-btn:hover svg {
    stroke: #d4a84b;
    transform: rotate(-45deg);
}

.settings-restore-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 220, 150, 0.05);
}

/* ============================================
   CUSTOM CONFIRMATION MODAL
   ============================================ */
.confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 40000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.confirm-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.confirm-modal-content {
    background: linear-gradient(160deg, var(--parchment-light) 0%, var(--parchment) 100%);
    border: 3px solid var(--leather);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    width: 90%;
    max-width: 400px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 40px rgba(184, 134, 11, 0.1);
    transform: scale(var(--ui-scale)) translateY(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    position: relative;
}

.confirm-modal.hidden .confirm-modal-content {
    transform: scale(calc(0.95 * var(--ui-scale))) translateY(calc(20px * var(--ui-scale)));
}

/* Decorative corner rivets for modal */
.confirm-modal-content::before,
.confirm-modal-content::after {
    content: '';
    position: absolute;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.confirm-modal-content::before {
    left: 10px;
}

.confirm-modal-content::after {
    right: 10px;
}

.confirm-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink-red);
    margin-bottom: var(--space-3);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid var(--gold-ornament);
    padding-bottom: var(--space-2);
    display: inline-block;
}

.confirm-message {
    color: var(--ink-brown);
    font-size: 1rem;
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.btn-confirm {
    padding: var(--space-2) var(--space-4);
    min-width: 100px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.9rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-confirm:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-yes {
    background: linear-gradient(145deg, var(--red-wax-light) 0%, var(--red-wax) 100%);
    color: var(--parchment-light);
    box-shadow: 0 4px 0 #5a0a0a, 0 5px 10px rgba(0, 0, 0, 0.3);
}

.btn-yes:hover {
    filter: brightness(1.1);
}

.btn-no {
    background: linear-gradient(145deg, var(--parchment-aged) 0%, var(--parchment-shadow) 100%);
    color: var(--ink-brown);
    border: 1px solid var(--leather-light);
    box-shadow: 0 4px 0 var(--leather-light), 0 5px 10px rgba(0, 0, 0, 0.1);
}

.btn-no:hover {
    background: var(--parchment-light);
}

/* ============================================
   ENHANCED DESIGN - Premium Visual Upgrades
   ============================================ */

/* === BOSS CARD CORNER FLOURISHES === */
.boss-card-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

/* Corner flourish element - ornate frame corners */
.boss-card::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(212, 168, 75, 0.3);
    border-radius: 10px;
    pointer-events: none;
}

/* Decorative corner rivets */
.boss-card .boss-header::before,
.boss-card .boss-header::after {
    content: '✧';
    position: absolute;
    font-size: 0.9rem;
    color: var(--gold-ornament);
    opacity: 0.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.boss-card .boss-header::before {
    top: 8px;
    right: 12px;
}

.boss-card .boss-header::after {
    bottom: 8px;
    left: 12px;
}

/* === TORN CORNER EFFECTS === */
.torn-corner-br {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg,
            transparent 55%,
            var(--parchment-aged) 55%,
            var(--parchment-shadow) 65%,
            var(--parchment) 100%);
    pointer-events: none;
    z-index: 10;
    border-radius: 0 0 var(--radius-lg) 0;
}

.torn-corner-br::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.15) 60%);
    pointer-events: none;
}

.torn-corner-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(225deg,
            transparent 55%,
            var(--parchment-aged) 55%,
            var(--parchment-shadow) 70%,
            var(--parchment) 100%);
    pointer-events: none;
    z-index: 10;
    border-radius: 0 0 0 var(--radius-lg);
}

.torn-corner-bl::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background: linear-gradient(225deg,
            transparent 50%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.12) 65%);
    pointer-events: none;
}

/* === ENHANCED SCROLLBAR - Wooden Roller Look === */
.inventory-scroll-area::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.inventory-scroll-area::-webkit-scrollbar-track {
    background: linear-gradient(90deg,
            var(--parchment-shadow) 0%,
            var(--parchment-aged) 50%,
            var(--parchment-shadow) 100%);
    border: 1px solid var(--leather-light);
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.inventory-scroll-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            var(--leather-accent) 0%,
            var(--leather) 50%,
            var(--leather-dark) 100%);
    border: 1px solid var(--leather-dark);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.2);
    /* Wood grain texture effect */
    background-image:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 25%,
            transparent 50%,
            rgba(0, 0, 0, 0.05) 75%,
            transparent 100%);
}

.inventory-scroll-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            var(--leather-light) 0%,
            var(--leather-accent) 50%,
            var(--leather) 100%);
}

/* Scroll fade effect at edges */
.inventory-scroll-area {
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 8px,
            black calc(100% - 8px),
            transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 8px,
            black calc(100% - 8px),
            transparent 100%);
}

/* === DRAFT CARD IDLE ANIMATION === */
.draft-option {
    animation: draftIdle 3s ease-in-out infinite;
    animation-delay: calc(var(--card-index, 0) * 0.3s);
}

.draft-option:nth-child(1) {
    --card-index: 0;
}

.draft-option:nth-child(2) {
    --card-index: 1;
}

.draft-option:nth-child(3) {
    --card-index: 2;
}

@keyframes draftIdle {

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

    25% {
        transform: translateY(-2px) rotate(0.3deg);
    }

    75% {
        transform: translateY(1px) rotate(-0.2deg);
    }
}

/* Disable idle animation on hover - use hover transform instead */
.draft-option:hover {
    animation: none;
}

/* === GRID CONTAINER CORNER STITCHING === */
.grid-container::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(92, 61, 30, 0.2);
    border-radius: calc(var(--radius-lg) - 2px);
    pointer-events: none;
}

/* Corner accent dots */
.grid-container::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 4px;
    height: 4px;
    background: var(--gold-dark);
    border-radius: 50%;
    box-shadow:
        calc(100% - 12px + 100%) 0 0 var(--gold-dark),
        0 calc(100% - 12px + 100% - 6px) 0 var(--gold-dark),
        calc(100% - 12px + 100%) calc(100% - 12px + 100% - 6px) 0 var(--gold-dark);
    pointer-events: none;
}

/* === ENHANCED INVENTORY ITEM HOVER === */
.inventory-list .item-container:hover {
    animation: itemBob 0.4s ease-out;
}

@keyframes itemBob {

    0%,
    100% {
        transform: translateY(-6px) scale(1.08);
    }

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

/* === PANEL HEADER TAG SHINE EFFECT === */
.panel-header-tag::before {
    content: '•';
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 8px;
    color: var(--gold-dark);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.panel-header-tag::after {
    content: '•';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 8px;
    color: var(--gold-dark);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Shine sweep animation on tags */
.panel-header-tag {
    overflow: hidden;
}

@keyframes tagShine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 200%;
    }
}

/* === WOW SEAL FOR BOSS DEFEAT === */
.boss-defeated-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    width: 120px;
    height: 120px;
    background: linear-gradient(145deg,
            var(--red-wax-light) 0%,
            var(--red-wax) 50%,
            #6b1010 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--parchment-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    box-shadow:
        0 8px 24px rgba(139, 26, 26, 0.5),
        0 0 0 4px #5a0a0a,
        inset 0 0 20px rgba(0, 0, 0, 0.3),
        inset 0 4px 0 rgba(255, 255, 255, 0.1);
    z-index: 100;
    animation: sealStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.boss-defeated-seal::before {
    content: 'SLAIN';
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes sealStamp {
    0% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(3);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(0.9);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
        opacity: 1;
    }
}



/* === HP BAR TEXTURE OVERLAY === */
.hp-bar-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px);
    border-radius: 12px;
    pointer-events: none;
    z-index: 5;
}

/* ============================================
   INVENTORY EMPTY STATE
   ============================================ */
.empty-inventory-message {
    position: absolute;
    bottom: 12px;
    right: 25px;
    width: auto;
    height: auto;

    color: var(--ink-faded);
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    transform: rotate(-3deg);

    pointer-events: none;
    user-select: none;
    opacity: 0.5;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.empty-inventory-message::before {
    content: '‣ ';
    opacity: 0.6;
    margin-right: 4px;
}

/* ==========================================================================
   BOSS PANEL REDESIGN (New)
   ========================================================================== */

.boss-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-2);
    perspective: 1000px;
}

.boss-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    padding: var(--space-4);
    background: var(--parchment);
    border: 4px double var(--leather);
    border-radius: 4px;
    box-shadow:
        var(--shadow-md),
        inset 0 0 30px rgba(61, 40, 21, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    /* Decorative Corners */
    --corner-size: 12px;
}

/* Corner Accents */
.boss-card::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--leather-light);
    pointer-events: none;
    z-index: 1;
}

.boss-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    z-index: 2;
}

#boss-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-red);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid var(--gold-ornament);
    padding-bottom: var(--space-1);
    width: 100%;
}

.boss-display {
    width: 200px;
    height: 200px;
    /* Frame style */
    border: 3px solid var(--leather);
    border-radius: 50%;
    /* Circle portrait looks premium? Or square? Let's go Arch/Square */
    border-radius: 120px 120px 20px 20px;
    /* Arch shape */
    background-color: var(--parchment-dark);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Portrait Image */
.boss-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* VISUAL MAGIC: Blends white background into the parchment */
    mix-blend-mode: multiply;
    filter: sepia(0.2) contrast(1.1) brightness(0.95);
    transition: transform 0.4s ease;
}

.boss-card:hover .boss-portrait {
    transform: scale(1.05);
}

/* Ornate Border Overlay for Portrait */
.boss-display::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 15px rgba(26, 15, 8, 0.6);
    pointer-events: none;
    z-index: 2;
}

.boss-emoji {
    font-size: 5rem;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
    animation: floatEmoji 3s ease-in-out infinite;
}

@keyframes floatEmoji {

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

    50% {
        transform: translateY(-5px);
    }
}

/* Adjust HP Bar in Boss Card */
.boss-card .hp-bar-container {
    width: 100%;
    height: 20px;
    background: var(--leather-dark);
    border: 2px solid var(--leather);
    border-radius: 10px;
    margin-top: var(--space-1);
}

.boss-card .hp-fill {
    background: linear-gradient(180deg, #d32f2f, #8b0000);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ============================================
   GAME CONTROLS
   ============================================ */
/* Game Controls Container */
.game-controls-container {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 26000;

    /* Scaling and Origin */
    transform: scale(var(--ui-scale)) translateX(-20px);
    transform-origin: top left;

    /* Smooth entrance */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-controls-container.visible {
    opacity: 0.65;
    transform: scale(var(--ui-scale)) translateX(0);
    pointer-events: auto;
    transition: opacity 0.4s ease-in-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-controls-container.visible:hover {
    opacity: 1;
}

/* Consolidating logic into the base visible class */

.game-control-btn {
    width: 180px;
    /* Same unified width */
    background: linear-gradient(145deg, var(--leather-light) 0%, var(--leather) 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--parchment-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Left justified content */
    gap: 12px;
    padding: 10px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    /* Physical 3D Button Style */
    box-shadow:
        0 4px 0 var(--leather-dark),
        0 5px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    white-space: nowrap;
}

.game-control-btn:hover {
    transform: translateY(-2px);
    z-index: 10;
    background: linear-gradient(145deg, var(--leather) 0%, var(--leather-dark) 100%);
    box-shadow:
        0 6px 0 var(--leather-dark),
        0 8px 15px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: var(--gold-highlight);
}

.game-control-btn:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 var(--leather-dark),
        0 3px 5px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-control-btn svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    /* Alignment fix */
    margin-bottom: 2px;
}

/* Keyboard Hint Badge */
.keyboard-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: auto;
    /* Push to the far right of the button */
    background: linear-gradient(145deg,
            rgba(61, 40, 21, 0.8) 0%,
            rgba(40, 26, 13, 0.9) 100%);
    border: 1px solid rgba(92, 61, 30, 0.6);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold-ornament);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
}

.game-control-btn:hover .keyboard-hint {
    background: linear-gradient(145deg,
            rgba(212, 168, 75, 0.3) 0%,
            rgba(175, 138, 62, 0.4) 100%);
    color: var(--gold-highlight);
    border-color: rgba(212, 168, 75, 0.5);
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 3px rgba(212, 168, 75, 0.4);
}

/* Fix tooltip overlap for bottom position */
[data-tooltip].tooltip-bottom:hover::after {
    transform: translateX(-50%) translateY(12px);
}

/* ============================================
   JUICE ENHANCEMENTS - Subtle Life Animations
   ============================================ */

/* PUNCH Button - Subtle Breathing Animation */
@keyframes punchBreathe {

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

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

.btn-fight {
    animation: punchBreathe 2.5s ease-in-out infinite;
}

.btn-fight:hover {
    animation: none;
    /* Stop breathing on hover for direct control */
}

/* HP Badge - Subtle Wobble Animation */
@keyframes hpVialWobble {

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

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

    66% {
        transform: rotate(1deg);
    }
}

.boss-hp-vial {
    animation: hpVialWobble 4s ease-in-out infinite;
}

/* ============================================
   GAME RESULT OVERLAY (Victory/Defeat/NG+)
   Matches reward-screen premium fantasy aesthetic
   ============================================ */

.game-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    gap: var(--space-2);

    /* Dark wood background matching expedition map */
    background: var(--wood-dark);

    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.game-result-overlay.active {
    opacity: 1;
    visibility: visible;
}

.game-result-overlay.closing {
    opacity: 0;
    transform: scale(1.05);
}

/* Wood table texture background */
.game-result-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url('../img/fantasy_table_bg.png') center/cover,
        radial-gradient(ellipse at center, #2a1a0a 0%, #0f0a05 100%);
    background-blend-mode: overlay;
    opacity: 0.9;
    pointer-events: none;
}

/* Specific background for victory screen */
.game-result-overlay.victory::before {
    background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
        url('../img/victory_bg.png') center/cover,
        radial-gradient(ellipse at center, #2a1a0a 0%, #0f0a05 100%);
    background-blend-mode: multiply, overlay, normal;
}

/* Specific background for defeat screen */
.game-result-overlay.defeat::before {
    background:
        url('../img/defeat_bg.png') center/cover,
        radial-gradient(ellipse at center, #2a1a0a 0%, #0f0a05 100%);
    background-blend-mode: overlay;
    /* Ensure blend mode is maintained */
}

/* Atmospheric lighting - warm lantern glow */
.game-result-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 35%,
            rgba(255, 180, 80, 0.15) 0%,
            rgba(200, 120, 40, 0.08) 35%,
            transparent 65%);
    pointer-events: none;
    animation: ambientPulse 4s ease-in-out infinite;
}

/* Victory glow overlay */
.game-result-overlay.victory::after {
    background: radial-gradient(ellipse 80% 70% at 50% 35%,
            rgba(255, 215, 100, 0.2) 0%,
            rgba(212, 168, 75, 0.1) 35%,
            transparent 65%);
}

/* Defeat dark overlay */
.game-result-overlay.defeat::after {
    background: radial-gradient(ellipse 80% 70% at 50% 35%,
            rgba(180, 50, 50, 0.15) 0%,
            rgba(100, 20, 20, 0.08) 35%,
            transparent 65%);
}

/* Final victory extra glow */
.game-result-overlay.final-victory::after {
    background: radial-gradient(ellipse 100% 80% at 50% 30%,
            rgba(255, 215, 100, 0.25) 0%,
            rgba(255, 180, 60, 0.15) 30%,
            rgba(212, 168, 75, 0.08) 50%,
            transparent 70%);
    animation: finalGlowPulse 3s ease-in-out infinite;
}

@keyframes finalGlowPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* ============================================
   MILESTONE VICTORY SCREENS (NG+5, NG+10, NG+20)
   ============================================ */

/* --- NG+5: EPIC MILESTONE (Purple/Gold Theme) --- */
.game-result-overlay.milestone-epic::before {
    background:
        linear-gradient(rgba(80, 40, 120, 0.5), rgba(40, 20, 80, 0.7)),
        url('../img/victory_bg.png') center/cover,
        radial-gradient(ellipse at center, #3d1f5c 0%, #1a0f2e 100%);
    background-blend-mode: multiply, overlay, normal;
}

.game-result-overlay.milestone-epic::after {
    background:
        radial-gradient(ellipse 120% 100% at 50% 30%,
            rgba(155, 89, 182, 0.35) 0%,
            rgba(142, 68, 173, 0.2) 25%,
            rgba(212, 168, 75, 0.15) 50%,
            transparent 70%);
    animation: epicGlowPulse 2.5s ease-in-out infinite;
}

.game-result-overlay.milestone-epic .result-title {
    background: linear-gradient(180deg,
            #e0b0ff 0%,
            #9b59b6 25%,
            #f0d890 45%,
            #9b59b6 55%,
            #7b3f9e 80%,
            #5a2d82 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(155, 89, 182, 0.6),
        0 0 100px rgba(212, 168, 75, 0.3);
    animation: goldShimmer 2s ease-in-out infinite, epicTitlePulse 3s ease-in-out infinite;
}

.game-result-overlay.milestone-epic .result-subtitle {
    color: rgba(224, 176, 255, 0.9);
    text-shadow: 0 0 15px rgba(155, 89, 182, 0.5);
}

@keyframes epicGlowPulse {

    0%,
    100% {
        opacity: 0.8;
        filter: hue-rotate(0deg);
    }

    50% {
        opacity: 1;
        filter: hue-rotate(10deg);
    }
}

@keyframes epicTitlePulse {

    0%,
    100% {
        filter: drop-shadow(0 0 15px rgba(155, 89, 182, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8));
    }
}

/* --- NG+10: MYTHIC MILESTONE (Cyan/Blue Theme) --- */
.game-result-overlay.milestone-mythic::before {
    background:
        linear-gradient(rgba(20, 80, 120, 0.5), rgba(10, 40, 80, 0.7)),
        url('../img/victory_bg.png') center/cover,
        radial-gradient(ellipse at center, #0a3d62 0%, #051626 100%);
    background-blend-mode: multiply, overlay, normal;
}

.game-result-overlay.milestone-mythic::after {
    background:
        radial-gradient(ellipse 120% 100% at 50% 30%,
            rgba(52, 152, 219, 0.4) 0%,
            rgba(41, 128, 185, 0.25) 25%,
            rgba(26, 188, 156, 0.15) 50%,
            transparent 70%),
        radial-gradient(circle at 30% 20%, rgba(52, 152, 219, 0.3) 0%, transparent 30%),
        radial-gradient(circle at 70% 80%, rgba(26, 188, 156, 0.3) 0%, transparent 30%);
    animation: mythicGlowPulse 2s ease-in-out infinite;
}

.game-result-overlay.milestone-mythic .result-title {
    background: linear-gradient(180deg,
            #e0f7ff 0%,
            #3498db 20%,
            #1abc9c 40%,
            #3498db 60%,
            #2980b9 80%,
            #1a5276 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(52, 152, 219, 0.7),
        0 0 120px rgba(26, 188, 156, 0.4);
    animation: goldShimmer 1.5s ease-in-out infinite, mythicTitleGlow 2s ease-in-out infinite;
}

.game-result-overlay.milestone-mythic .result-subtitle {
    color: rgba(174, 234, 255, 0.95);
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.6);
}

@keyframes mythicGlowPulse {

    0%,
    100% {
        opacity: 0.85;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.15);
    }
}

@keyframes mythicTitleGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(52, 152, 219, 0.6)) drop-shadow(0 0 40px rgba(26, 188, 156, 0.3));
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(52, 152, 219, 0.9)) drop-shadow(0 0 60px rgba(26, 188, 156, 0.5));
    }
}

/* --- NG+20: LEGENDARY MILESTONE (Rainbow/Prismatic Theme) --- */
.game-result-overlay.milestone-legendary::before {
    background:
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(20, 10, 30, 0.6)),
        url('../img/victory_bg.png') center/cover,
        radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a15 100%);
    background-blend-mode: multiply, overlay, normal;
}

.game-result-overlay.milestone-legendary::after {
    background:
        radial-gradient(ellipse 150% 120% at 50% 30%,
            rgba(255, 215, 0, 0.3) 0%,
            rgba(255, 100, 100, 0.2) 20%,
            rgba(255, 0, 255, 0.15) 40%,
            rgba(100, 100, 255, 0.1) 60%,
            transparent 80%);
    animation: legendaryGlowCycle 4s ease-in-out infinite;
}

.game-result-overlay.milestone-legendary .result-title {
    background: linear-gradient(90deg,
            #ff6b6b 0%,
            #feca57 14%,
            #48dbfb 28%,
            #1dd1a1 42%,
            #5f27cd 56%,
            #ff6b6b 70%,
            #feca57 84%,
            #48dbfb 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: legendaryRainbow 3s linear infinite;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(255, 215, 0, 0.5),
        0 0 150px rgba(255, 100, 255, 0.4);
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.7));
}

.game-result-overlay.milestone-legendary .result-subtitle {
    background: linear-gradient(90deg,
            #ffeaa7 0%,
            #fab1a0 25%,
            #a29bfe 50%,
            #81ecec 75%,
            #ffeaa7 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: legendarySubtitleShift 4s linear infinite;
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

@keyframes legendaryGlowCycle {
    0% {
        opacity: 0.9;
        filter: hue-rotate(0deg) brightness(1);
    }

    25% {
        filter: hue-rotate(45deg) brightness(1.1);
    }

    50% {
        opacity: 1;
        filter: hue-rotate(90deg) brightness(1.2);
    }

    75% {
        filter: hue-rotate(45deg) brightness(1.1);
    }

    100% {
        opacity: 0.9;
        filter: hue-rotate(0deg) brightness(1);
    }
}

@keyframes legendaryRainbow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes legendarySubtitleShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Legendary particle sparkle effect */
.game-result-overlay.milestone-legendary .result-header::before {
    content: '';
    position: absolute;
    inset: -50px;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.9), transparent),
        radial-gradient(2px 2px at 80% 20%, rgba(255, 100, 255, 0.9), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(100, 200, 255, 0.9), transparent),
        radial-gradient(2px 2px at 60% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 10% 80%, rgba(100, 255, 150, 0.9), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(255, 150, 100, 0.9), transparent);
    background-size: 200px 200px;
    animation: sparkleFloat 8s linear infinite;
    pointer-events: none;
    opacity: 0.7;
    z-index: -1;
}

@keyframes sparkleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-50px) rotate(15deg);
    }
}

/* Milestone badge for all milestone levels */
.game-result-overlay[class*="milestone-"] .result-header::after {
    content: '★';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    animation: starPulse 1.5s ease-in-out infinite;
}

.game-result-overlay.milestone-epic .result-header::after {
    color: #9b59b6;
    text-shadow: 0 0 20px rgba(155, 89, 182, 0.8);
}

.game-result-overlay.milestone-mythic .result-header::after {
    color: #3498db;
    text-shadow: 0 0 25px rgba(52, 152, 219, 0.8);
}

.game-result-overlay.milestone-legendary .result-header::after {
    content: '★★★';
    font-size: 2rem;
    letter-spacing: 10px;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1, #5f27cd);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: starPulse 1.5s ease-in-out infinite, legendaryRainbow 2s linear infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

@keyframes starPulse {

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

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

/* ============================================
   RESULT HEADER
   ============================================ */
.result-header {
    text-align: center;
    animation: headerReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
    position: relative;
    z-index: 10;
}

@keyframes headerReveal {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    60% {
        transform: translateY(5px) scale(1.02);
    }

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

.result-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
    color: transparent;

    /* Premium Gold Gradient */
    background: linear-gradient(180deg,
            #f0d890 0%,
            #d4a84b 25%,
            #f0d890 45%,
            #d4a84b 55%,
            #a67c30 80%,
            #7a5a20 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100% 200%;
    animation: goldShimmer 3s ease-in-out infinite;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 168, 75, 0.4);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
}

.game-result-overlay.defeat .result-title {
    background: linear-gradient(180deg,
            #c44 0%,
            #922 25%,
            #c44 45%,
            #922 55%,
            #711 80%,
            #500 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(200, 50, 50, 0.4);
}

.result-subtitle {
    font-family: 'IM Fell English', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: rgba(212, 168, 75, 0.85);
    margin-top: var(--space-2);
    opacity: 0;
    animation: fadeUp 0.6s ease 0.3s forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.game-result-overlay.defeat .result-subtitle {
    color: rgba(200, 150, 150, 0.85);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ============================================
   STATS CARD
   ============================================ */
.result-stats-card {
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(175deg, #fdfcf3 0%, #f4e9d1 100%);
    background-blend-mode: multiply, normal;

    border: 2px solid var(--gold-ornament);
    border-radius: 8px;
    /* Sharper rounded corners for notebook feel */
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 10;



    box-shadow:
        0 4px 0 var(--wood-dark),
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 0 40px rgba(212, 168, 75, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);

    opacity: 0;
    animation:
        cardReveal 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards,
        cardAmbientFloat 4s ease-in-out infinite alternate;
}

/* Row separators for cleaner look */
.result-stats-card .stat-row:not(:last-child) {
    border-bottom: 1px solid rgba(139, 101, 46, 0.15);
}

/* Decorative Gold Corners */
.result-stats-card::before,
.result-stats-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.result-stats-card::before {
    top: 5px;
    left: 5px;
    border-top: 2px solid var(--gold-ornament);
    border-left: 2px solid var(--gold-ornament);
}

.result-stats-card::after {
    bottom: 5px;
    right: 5px;
    border-bottom: 2px solid var(--gold-ornament);
    border-right: 2px solid var(--gold-ornament);
}

@keyframes cardAmbientFloat {
    0% {
        transform: translateY(0) rotate(0.2deg);
    }

    100% {
        transform: translateY(-5px) rotate(-0.2deg);
    }
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

/* ============================================
   TOTAL DAMAGE HERO DISPLAY (Final Victory)
   ============================================ */
.total-damage-hero {
    text-align: center;
    position: relative;
    z-index: 10;
    padding: var(--space-4) var(--space-8);
    margin-bottom: var(--space-2);

    opacity: 0;
    animation: cardReveal 0.8s ease 0.4s forwards;
}

.damage-label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(212, 168, 75, 0.65);
    margin-bottom: var(--space-1);
}

.damage-value-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.damage-flourish {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-ornament);
    opacity: 0.5;
}

.damage-flourish svg {
    width: 24px;
    height: 24px;
}

.damage-flourish.left svg {
    transform: scaleX(-1);
}

.damage-value {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(3.5rem, 12vw, 5.5rem);
    font-weight: 700;
    color: transparent;
    line-height: 1;

    /* Gold shimmer gradient */
    background: linear-gradient(180deg,
            #fff8e0 0%,
            #f0d890 20%,
            #d4a84b 40%,
            #f0d890 60%,
            #d4a84b 80%,
            #a67c30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100% 200%;
    animation: damageShimmer 2s ease-in-out infinite;

    text-shadow:
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(212, 168, 75, 0.4);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

@keyframes damageShimmer {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 100%;
    }
}

.damage-subtitle {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(212, 168, 75, 0.55);
    margin-top: 0;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    min-width: 280px;
}

.stat-row .stat-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-ornament);
}

.stat-row .stat-icon svg {
    width: 22px;
    height: 22px;
}

.stat-row .stat-label {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-brown);
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-row .stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-red);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 10px rgba(139, 26, 26, 0.1);
    min-width: 80px;
    text-align: right;

    /* Subtle focus animation on appearance */
    animation: statValueFocus 0.6s ease 0.6s both;
}

@keyframes statValueFocus {
    from {
        transform: scale(1.2);
        filter: brightness(1.5);
    }

    to {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* ============================================
   NG+ PREVIEW PANEL
   ============================================ */
.ng-plus-preview {
    background:
        linear-gradient(175deg, rgba(60, 45, 25, 0.95) 0%, rgba(40, 30, 18, 0.95) 100%);
    border: 2px solid rgba(212, 168, 75, 0.4);
    border-radius: 12px;
    padding: var(--space-4) var(--space-5);
    position: relative;
    z-index: 10;
    text-align: center;
    min-width: 280px;
    max-width: 340px;

    box-shadow:
        0 0 20px rgba(212, 168, 75, 0.25),
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    opacity: 0;
    animation: cardReveal 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}

.preview-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f0d890;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(212, 168, 75, 0.25);
    text-shadow: 0 0 10px rgba(212, 168, 75, 0.4);
}

.preview-bonuses {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-left: var(--space-2);
}

.preview-bonuses .bonus {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    padding: var(--space-1) 0;
    text-align: left;
}

/* Default bonus icon color - gold for standard victory */
.bonus-icon {
    color: rgba(212, 168, 75, 0.85) !important;
}

/* --- Final Victory (Non-Milestone) Styles --- */

/* Gold-themed NG+ preview panel for standard final victory */
.game-result-overlay.final-victory:not([class*="milestone-"]) .ng-plus-preview {
    background: linear-gradient(175deg,
            rgba(60, 45, 25, 0.95) 0%,
            rgba(40, 30, 18, 0.95) 100%);
    border: 2px solid rgba(212, 168, 75, 0.4);
    box-shadow:
        0 0 25px rgba(212, 168, 75, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-result-overlay.final-victory:not([class*="milestone-"]) .preview-title {
    color: #f0d890;
    border-bottom-color: rgba(212, 168, 75, 0.3);
    text-shadow: 0 0 12px rgba(212, 168, 75, 0.5);
}

.game-result-overlay.final-victory:not([class*="milestone-"]) .bonus-icon {
    color: #d4a84b !important;
}

/* Gold-themed buttons for standard final victory */
.game-result-overlay.final-victory:not([class*="milestone-"]) .result-btn-primary {
    background: linear-gradient(165deg,
            rgba(180, 140, 60, 0.95) 0%,
            rgba(140, 100, 40, 0.95) 50%,
            rgba(100, 70, 25, 0.95) 100%);
    border: 2px solid rgba(240, 216, 144, 0.4);
    color: #fff8e8;

    box-shadow:
        0 4px 0 rgba(80, 55, 20, 0.9),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 168, 75, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.game-result-overlay.final-victory:not([class*="milestone-"]) .result-btn-primary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg,
            rgba(200, 160, 70, 0.95) 0%,
            rgba(160, 120, 50, 0.95) 50%,
            rgba(120, 85, 30, 0.95) 100%);
    border-color: rgba(255, 230, 160, 0.5);

    box-shadow:
        0 6px 0 rgba(80, 55, 20, 0.9),
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(212, 168, 75, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.game-result-overlay.final-victory:not([class*="milestone-"]) .result-btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(80, 55, 20, 0.9),
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(212, 168, 75, 0.2);
}

.game-result-overlay.final-victory:not([class*="milestone-"]) .result-btn-secondary {
    background: linear-gradient(165deg,
            rgba(60, 45, 30, 0.9) 0%,
            rgba(45, 35, 22, 0.9) 100%);
    border: 1px solid rgba(212, 168, 75, 0.25);
    color: rgba(240, 216, 144, 0.85);

    box-shadow:
        0 4px 0 rgba(35, 25, 15, 0.9),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.game-result-overlay.final-victory:not([class*="milestone-"]) .result-btn-secondary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg,
            rgba(75, 55, 35, 0.95) 0%,
            rgba(55, 42, 28, 0.95) 100%);
    border-color: rgba(212, 168, 75, 0.4);
    color: rgba(255, 235, 180, 0.95);

    box-shadow:
        0 6px 0 rgba(35, 25, 15, 0.9),
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(212, 168, 75, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-result-overlay.final-victory:not([class*="milestone-"]) .result-btn-secondary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(35, 25, 15, 0.9),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* --- Milestone-specific NG+ Preview Panel Styles --- */

/* Epic milestone - Purple (default style, kept for consistency) */
.game-result-overlay.milestone-epic .ng-plus-preview {
    background: linear-gradient(175deg, rgba(60, 30, 80, 0.95) 0%, rgba(40, 20, 60, 0.95) 100%);
    border-color: rgba(155, 89, 182, 0.6);
    box-shadow:
        0 0 25px rgba(155, 89, 182, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Mythic milestone - Cyan/Blue theme */
.game-result-overlay.milestone-mythic .ng-plus-preview {
    background: linear-gradient(175deg, rgba(10, 60, 100, 0.95) 0%, rgba(5, 40, 70, 0.95) 100%);
    border-color: rgba(52, 152, 219, 0.6);
    box-shadow:
        0 0 25px rgba(52, 152, 219, 0.4),
        0 0 40px rgba(26, 188, 156, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-result-overlay.milestone-mythic .preview-title {
    color: #aeeaff;
    text-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
}

.game-result-overlay.milestone-mythic .bonus-icon {
    color: #48dbfb;
}

/* --- Milestone-specific Button Styles --- */

/* Epic milestone buttons - Purple/Gold theme */
.game-result-overlay.milestone-epic .result-btn-primary {
    background: linear-gradient(165deg,
            rgba(80, 40, 100, 0.95) 0%,
            rgba(55, 25, 75, 0.95) 100%);
    border: 2px solid rgba(155, 89, 182, 0.5);
    color: #f0d890;

    box-shadow:
        0 4px 0 rgba(40, 20, 55, 0.9),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(155, 89, 182, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 10px rgba(212, 168, 75, 0.5);
}

.game-result-overlay.milestone-epic .result-btn-primary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg,
            rgba(100, 50, 120, 0.95) 0%,
            rgba(70, 35, 95, 0.95) 100%);
    border-color: rgba(155, 89, 182, 0.7);
    color: #fff8e0;

    box-shadow:
        0 6px 0 rgba(40, 20, 55, 0.9),
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(155, 89, 182, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 0 15px rgba(212, 168, 75, 0.8);
}

.game-result-overlay.milestone-epic .result-btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(40, 20, 55, 0.9),
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(155, 89, 182, 0.2);
}

.game-result-overlay.milestone-epic .result-btn-secondary {
    background: linear-gradient(165deg,
            rgba(50, 30, 65, 0.9) 0%,
            rgba(35, 20, 50, 0.9) 100%);
    border: 1px solid rgba(155, 89, 182, 0.3);
    color: rgba(224, 176, 255, 0.85);

    box-shadow:
        0 4px 0 rgba(30, 15, 40, 0.9),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.game-result-overlay.milestone-epic .result-btn-secondary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg,
            rgba(65, 40, 85, 0.95) 0%,
            rgba(50, 30, 70, 0.95) 100%);
    border-color: rgba(155, 89, 182, 0.5);
    color: rgba(240, 200, 255, 0.95);

    box-shadow:
        0 6px 0 rgba(30, 15, 40, 0.9),
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(155, 89, 182, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-result-overlay.milestone-epic .result-btn-secondary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(30, 15, 40, 0.9),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Mythic milestone buttons - Cyan/Blue theme */
.game-result-overlay.milestone-mythic .result-btn-primary {
    background: linear-gradient(165deg,
            rgba(15, 70, 110, 0.95) 0%,
            rgba(10, 50, 85, 0.95) 100%);
    border: 2px solid rgba(52, 152, 219, 0.5);
    color: #aeeaff;

    box-shadow:
        0 4px 0 rgba(5, 35, 60, 0.9),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(52, 152, 219, 0.3),
        0 0 30px rgba(26, 188, 156, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.6);
}

.game-result-overlay.milestone-mythic .result-btn-primary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg,
            rgba(20, 90, 140, 0.95) 0%,
            rgba(15, 65, 105, 0.95) 100%);
    border-color: rgba(52, 152, 219, 0.7);
    color: #e0f7ff;

    box-shadow:
        0 6px 0 rgba(5, 35, 60, 0.9),
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(52, 152, 219, 0.45),
        0 0 50px rgba(26, 188, 156, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 0 15px rgba(52, 152, 219, 0.9);
}

.game-result-overlay.milestone-mythic .result-btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(5, 35, 60, 0.9),
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(52, 152, 219, 0.2);
}

.game-result-overlay.milestone-mythic .result-btn-secondary {
    background: linear-gradient(165deg,
            rgba(10, 45, 70, 0.9) 0%,
            rgba(5, 30, 50, 0.9) 100%);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: rgba(174, 234, 255, 0.85);

    box-shadow:
        0 4px 0 rgba(5, 25, 40, 0.9),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.game-result-overlay.milestone-mythic .result-btn-secondary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg,
            rgba(15, 60, 95, 0.95) 0%,
            rgba(10, 45, 75, 0.95) 100%);
    border-color: rgba(52, 152, 219, 0.5);
    color: rgba(200, 245, 255, 0.95);

    box-shadow:
        0 6px 0 rgba(5, 25, 40, 0.9),
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(52, 152, 219, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-result-overlay.milestone-mythic .result-btn-secondary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(5, 25, 40, 0.9),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Legendary milestone - Rainbow/Prismatic theme */
.game-result-overlay.milestone-legendary .ng-plus-preview {
    background: linear-gradient(175deg, rgba(30, 20, 40, 0.98) 0%, rgba(15, 10, 25, 0.98) 100%);
    border: none;
    border-radius: 14px;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.3),
        0 0 50px rgba(155, 89, 182, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

/* Rainbow border using pseudo-element (supports border-radius) */
.game-result-overlay.milestone-legendary .ng-plus-preview::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1, #5f27cd, #ff6b6b);
    background-size: 200% 100%;
    animation: legendaryBorderShift 3s linear infinite;
    z-index: -1;
    border-radius: 16px;
}

/* Inner background to cover the pseudo-element center */
.game-result-overlay.milestone-legendary .ng-plus-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(175deg, rgba(30, 20, 40, 0.98) 0%, rgba(15, 10, 25, 0.98) 100%);
    border-radius: 12px;
    z-index: -1;
}

@keyframes legendaryBorderShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.game-result-overlay.milestone-legendary .preview-title {
    background: linear-gradient(90deg, #ffeaa7, #fab1a0, #a29bfe, #81ecec, #ffeaa7);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: legendarySubtitleShift 4s linear infinite;
    text-shadow: none;
}

.game-result-overlay.milestone-legendary .bonus-icon {
    color: #feca57;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

/* Legendary milestone button styles - Rainbow/Prismatic theme */
.game-result-overlay.milestone-legendary .result-btn-primary {
    background: linear-gradient(165deg,
            rgba(40, 30, 55, 0.95) 0%,
            rgba(25, 20, 40, 0.95) 100%);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    color: #ffeaa7;

    box-shadow:
        0 4px 0 rgba(20, 15, 30, 0.9),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Rainbow border using pseudo-element */
.game-result-overlay.milestone-legendary .result-btn-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1, #5f27cd, #ff6b6b);
    background-size: 200% 100%;
    animation: legendaryBorderShift 3s linear infinite;
    z-index: -1;
    border-radius: inherit;
}

/* Inner fill to cover gradient center */
.game-result-overlay.milestone-legendary .result-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg,
            rgba(40, 30, 55, 0.98) 0%,
            rgba(25, 20, 40, 0.98) 100%);
    border-radius: calc(var(--radius-lg) - 2px);
    z-index: -1;
}

.game-result-overlay.milestone-legendary .result-btn-primary:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow:
        0 6px 0 rgba(20, 15, 30, 0.9),
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 215, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.game-result-overlay.milestone-legendary .result-btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(20, 15, 30, 0.9),
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 215, 0, 0.2);
}

/* Secondary button for legendary */
.game-result-overlay.milestone-legendary .result-btn-secondary {
    background: linear-gradient(165deg,
            rgba(30, 25, 45, 0.9) 0%,
            rgba(20, 15, 35, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);

    box-shadow:
        0 4px 0 rgba(15, 10, 25, 0.9),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.game-result-overlay.milestone-legendary .result-btn-secondary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg,
            rgba(45, 35, 60, 0.95) 0%,
            rgba(30, 25, 50, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 6px 0 rgba(15, 10, 25, 0.9),
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(155, 89, 182, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-result-overlay.milestone-legendary .result-btn-secondary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(15, 10, 25, 0.9),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   RESULT BUTTONS
   ============================================ */
.result-btn-container {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    margin-top: var(--space-4);

    opacity: 0;
    animation: fadeUp 0.5s ease 0.6s forwards;
}

.result-btn {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-4) var(--space-6);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.result-btn-primary {
    /* Wax seal red button - matching fight button */
    background: linear-gradient(165deg, var(--red-wax-light) 0%, var(--red-wax) 50%, #6b1010 100%);
    color: var(--parchment-light);

    box-shadow:
        0 4px 0 #5a0a0a,
        0 6px 20px rgba(139, 26, 26, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.result-btn-primary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg, #c03838 0%, #9b2020 50%, #7b1515 100%);
    box-shadow:
        0 6px 0 #5a0a0a,
        0 10px 30px rgba(139, 26, 26, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.result-btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #5a0a0a,
        0 4px 10px rgba(139, 26, 26, 0.3);
}

.result-btn-secondary {
    /* Leather button - matching clear button */
    background: linear-gradient(165deg, var(--leather-light) 0%, var(--leather) 50%, var(--leather-dark) 100%);
    color: var(--parchment-light);

    box-shadow:
        0 4px 0 var(--wood-dark),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.result-btn-secondary:hover {
    transform: translateY(-3px);
    background: linear-gradient(165deg, var(--leather-accent) 0%, var(--leather-light) 50%, var(--leather) 100%);
    box-shadow:
        0 6px 0 var(--wood-dark),
        0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.result-btn-secondary:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 var(--wood-dark),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.btn-icon svg {
    width: 18px;
    height: 18px;
}

.btn-text {
    position: relative;
    top: 2px;
    /* Optically align Cinzel caps with icon center */
    line-height: 1;
}

/* Bonus icons in NG+ preview */
.bonus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-right: 10px;
    vertical-align: middle;
    color: rgba(224, 176, 255, 0.85);
}

.bonus-icon svg {
    width: 14px;
    height: 14px;
}

.preview-bonuses .bonus {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* ============================================
   RESULT FOOTER
   ============================================ */
.result-footer {
    margin-top: var(--space-6);
    position: relative;
    z-index: 10;

    opacity: 0;
    animation: fadeUp 0.5s ease 0.8s forwards;
}

.result-hint {
    font-family: 'IM Fell English', serif;
    font-size: 0.95rem;
    font-style: italic;
    color: rgba(212, 168, 75, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

/* ============================================
   NG+ LEVEL INDICATOR (In-game badge)
   Premium wax seal / leather badge design
   ============================================ */
.ng-plus-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 18px;

    /* Leather/parchment background */
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(165deg,
            var(--leather-light) 0%,
            var(--leather) 40%,
            var(--leather-dark) 100%);
    background-blend-mode: multiply, normal;

    /* Gold ornate border */
    border: 3px solid var(--gold-ornament);
    border-radius: 6px;

    font-family: var(--font-display);
    z-index: 100;

    /* Premium shadow with gold glow */
    box-shadow:
        0 0 0 1px var(--leather-dark),
        0 4px 0 var(--wood-dark),
        0 6px 15px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 168, 75, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);

    animation: ngBadgePulse 4s ease-in-out infinite;
}

/* Inner decorative border */
.ng-plus-indicator::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(212, 168, 75, 0.3);
    border-radius: 3px;
    pointer-events: none;
}

/* Corner accents */
.ng-plus-indicator::after {
    content: '✦';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--gold-ornament);
    background: var(--leather);
    padding: 0 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes ngBadgePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 1px var(--leather-dark),
            0 4px 0 var(--wood-dark),
            0 6px 15px rgba(0, 0, 0, 0.5),
            0 0 20px rgba(212, 168, 75, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow:
            0 0 0 1px var(--leather-dark),
            0 4px 0 var(--wood-dark),
            0 6px 15px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(212, 168, 75, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    }
}

.ng-plus-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--parchment-light);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(212, 168, 75, 0.3);
}

.ng-plus-level {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: transparent;

    /* Gold gradient text */
    background: linear-gradient(180deg,
            #fff8e0 0%,
            #f0d890 30%,
            #d4a84b 60%,
            #a67c30 100%);
    -webkit-background-clip: text;
    background-clip: text;

    text-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* --- LEADERBOARD & MODAL STYLES --- */

.leaderboard-summary-strip {
    margin: 10px auto 20px auto;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--gold-ornament);
    border-radius: 8px;
    padding: 12px 20px;
    max-width: 450px;
    animation: fadeInSlideUp 0.6s ease-out 0.4s backwards;
    position: relative;
    z-index: 10;
}

.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
}

.summary-rank {
    color: var(--gold-ornament);
    font-weight: bold;
    font-size: 1.1rem;
}

.interactive-name {
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    text-decoration: underline dotted var(--gold-ornament);
}

.interactive-name:hover {
    background: var(--gold-ornament);
    color: #000;
    text-decoration: none;
    transform: scale(1.05);
}

.summary-damage {
    color: #fff;
    font-family: var(--font-heading);
}

.summary-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    text-align: center;
    font-style: italic;
}

/* ============================================
   MILESTONE-THEMED LEADERBOARD SUMMARY STRIPS
   Blend with Epic, Mythic, Legendary victory screens
   ============================================ */

/* Epic (NG+5) - Purple/Violet Theme */
.game-result-overlay.milestone-epic .leaderboard-summary-strip {
    background: rgba(80, 40, 120, 0.5);
    border: 2px solid rgba(155, 89, 182, 0.7);
    box-shadow:
        0 0 20px rgba(155, 89, 182, 0.3),
        inset 0 1px 0 rgba(224, 176, 255, 0.1);
}

.game-result-overlay.milestone-epic .summary-rank {
    color: #c792ea;
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.5);
}

.game-result-overlay.milestone-epic .interactive-name {
    text-decoration-color: #9b59b6;
}

.game-result-overlay.milestone-epic .interactive-name:hover {
    background: linear-gradient(180deg, #c792ea 0%, #9b59b6 100%);
    color: #1a0f2e;
}

.game-result-overlay.milestone-epic .summary-damage {
    color: #e0b0ff;
}

.game-result-overlay.milestone-epic .summary-hint {
    color: rgba(224, 176, 255, 0.6);
}

/* Mythic (NG+10) - Cyan/Ethereal Theme */
.game-result-overlay.milestone-mythic .leaderboard-summary-strip {
    background: rgba(20, 80, 80, 0.5);
    border: 2px solid rgba(32, 178, 170, 0.7);
    box-shadow:
        0 0 20px rgba(32, 178, 170, 0.3),
        inset 0 1px 0 rgba(118, 215, 234, 0.1);
}

.game-result-overlay.milestone-mythic .summary-rank {
    color: #76d7ea;
    text-shadow: 0 0 10px rgba(32, 178, 170, 0.5);
}

.game-result-overlay.milestone-mythic .interactive-name {
    text-decoration-color: #20b2aa;
}

.game-result-overlay.milestone-mythic .interactive-name:hover {
    background: linear-gradient(180deg, #76d7ea 0%, #20b2aa 100%);
    color: #0a2020;
}

.game-result-overlay.milestone-mythic .summary-damage {
    color: #a0f0f0;
}

.game-result-overlay.milestone-mythic .summary-hint {
    color: rgba(118, 215, 234, 0.6);
}

/* Legendary (NG+20) - Rainbow/Prismatic Theme */
.game-result-overlay.milestone-legendary .leaderboard-summary-strip {
    background: rgba(40, 30, 50, 0.6);
    border: 2px solid transparent;
    border-image: linear-gradient(90deg,
            #ff6b6b 0%,
            #ffd93d 25%,
            #6bcf6b 50%,
            #4dabf7 75%,
            #c792ea 100%) 1;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Prismatic border glow for Legendary */
.game-result-overlay.milestone-legendary .leaderboard-summary-strip::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg,
            #ff6b6b 0%,
            #ffd93d 20%,
            #6bcf6b 40%,
            #4dabf7 60%,
            #c792ea 80%,
            #ff6b9d 100%);
    background-size: 200% 100%;
    animation: prismaticBorderFlow 3s linear infinite;
    border-radius: 10px;
    z-index: -1;
    opacity: 0.6;
}

.game-result-overlay.milestone-legendary .leaderboard-summary-strip::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(30, 20, 40, 0.9);
    border-radius: 6px;
    z-index: -1;
}

@keyframes prismaticBorderFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.game-result-overlay.milestone-legendary .summary-rank {
    background: linear-gradient(90deg, #ffd93d, #ff6b9d, #c792ea, #4dabf7);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: prismaticText 3s linear infinite;
    font-weight: 700;
}

@keyframes prismaticText {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.game-result-overlay.milestone-legendary .interactive-name {
    text-decoration-color: #ffd93d;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.game-result-overlay.milestone-legendary .interactive-name:hover {
    background: linear-gradient(90deg, #ffd93d, #ff6b9d, #c792ea);
    background-size: 200% 100%;
    animation: prismaticText 2s linear infinite;
    color: #1a1a1a;
    font-weight: 700;
}

.game-result-overlay.milestone-legendary .summary-damage {
    color: #fff8dc;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.game-result-overlay.milestone-legendary .summary-hint {
    color: rgba(255, 248, 220, 0.6);
}

/* Modal Overlay */
/* ============================================
   LEADERBOARD MODAL - PREMIUM HALL OF HEROES
   Ornate fantasy design consistent with game UI
   ============================================ */

.leaderboard-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 2, 0.92);
    backdrop-filter: blur(12px);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: leaderboardFadeIn 0.4s ease-out;
}

/* Atmospheric vignette lighting */
.leaderboard-modal-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 30%,
            rgba(255, 180, 80, 0.08) 0%,
            rgba(200, 120, 40, 0.04) 35%,
            transparent 65%);
    pointer-events: none;
    animation: ambientGlow 4s ease-in-out infinite;
}

@keyframes ambientGlow {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

.leaderboard-modal-overlay.closing {
    animation: leaderboardFadeOut 0.3s ease-in forwards;
}

.leaderboard-modal-content {
    position: relative;
    width: 650px;
    max-width: 95vw;
    height: 750px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    transform: scale(var(--ui-scale));
    transform-origin: center center;

    /* Premium parchment with aged texture */
    background:
        linear-gradient(175deg,
            #1e1812 0%,
            #1a150f 30%,
            #15110c 70%,
            #0f0c08 100%);

    /* Softened layered shadows */
    box-shadow:
        /* Localized soft glow */
        0 0 30px rgba(212, 168, 75, 0.15),
        0 0 60px rgba(212, 168, 75, 0.05),
        /* Depth shadows */
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 10px 25px rgba(0, 0, 0, 0.5),
        /* Inner lighting */
        inset 0 1px 0 rgba(255, 220, 150, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);

    animation: hallOfHeroesEnter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Gradient border using pseudo-element (supports border-radius) */
.leaderboard-modal-content::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: linear-gradient(180deg,
            #f0d890 0%,
            #d4a84b 25%,
            #a67c30 50%,
            #7a5a20 75%,
            #d4a84b 100%);
    z-index: -1;
    pointer-events: none;
}

@keyframes hallOfHeroesEnter {
    0% {
        transform: scale(calc(0.85 * var(--ui-scale))) translateY(calc(40px * var(--ui-scale)));
    }

    60% {
        transform: scale(calc(1.02 * var(--ui-scale))) translateY(calc(-5px * var(--ui-scale)));
    }

    100% {
        transform: scale(var(--ui-scale)) translateY(0);
    }
}

/* Decorative inner corner accents */
.leaderboard-modal-content::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    border: 1px solid rgba(212, 168, 75, 0.15);
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   MODAL HEADER - Premium Trophy Banner
   ============================================ */
.leaderboard-modal-overlay .modal-header {
    position: relative;
    padding: 28px 24px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Darker leather-bound header for clarity */
    background:
        linear-gradient(180deg,
            rgba(65, 45, 25, 0.75) 0%,
            rgba(45, 30, 20, 0.9) 50%,
            rgba(25, 15, 10, 0.98) 100%);

    border-bottom: 3px solid;
    border-image: linear-gradient(90deg,
            transparent 0%,
            #d4a84b 15%,
            #f0d890 50%,
            #d4a84b 85%,
            transparent 100%) 1;

    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.15),
        inset 0 -2px 8px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Header decorative line above */
.leaderboard-modal-overlay .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 168, 75, 0.6) 20%,
            rgba(240, 216, 144, 0.8) 50%,
            rgba(212, 168, 75, 0.6) 80%,
            transparent 100%);
    border-radius: 0 0 4px 4px;
}

.leaderboard-modal-overlay .modal-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    /* Premium gold gradient text */
    background: linear-gradient(180deg,
            #f8f0d0 0%,
            #f0d890 25%,
            #d4a84b 50%,
            #f0d890 75%,
            #a67c30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 100% 200%;
    animation: modalTitleShimmer 3s ease-in-out infinite;

    text-shadow: 0 0 15px rgba(212, 168, 75, 0.35);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));

    display: flex;
    align-items: center;
    gap: 12px;
}

/* Trophy SVG icon styling */
.modal-title-icon {
    width: 28px;
    height: 28px;
    stroke: #d4a84b;
    filter: drop-shadow(0 0 8px rgba(212, 168, 75, 0.5));
    animation: trophyBob 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes trophyBob {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-3px) rotate(3deg);
    }
}

.leaderboard-modal-overlay .modal-close-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(212, 168, 75, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: rgba(240, 216, 144, 0.8);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
}

.leaderboard-modal-overlay .modal-close-btn:hover {
    background: rgba(212, 168, 75, 0.2);
    border-color: var(--gold-ornament);
    color: var(--gold-highlight);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(212, 168, 75, 0.4);
}

/* ============================================
   LEADERBOARD TABS - Tier-Themed Navigation
   ============================================ */
.leaderboard-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background:
        linear-gradient(180deg,
            rgba(30, 24, 18, 0.95) 0%,
            rgba(21, 17, 12, 0.98) 100%);
    border-bottom: 1px solid rgba(212, 168, 75, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.05);
}

.leaderboard-tab {
    flex: 1;
    padding: 12px 16px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    /* Base styling */
    background:
        linear-gradient(180deg,
            rgba(60, 50, 40, 0.6) 0%,
            rgba(40, 32, 25, 0.8) 100%);
    border: 1px solid rgba(100, 80, 60, 0.4);
    border-radius: 8px;
    color: rgba(200, 180, 150, 0.7);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.leaderboard-tab:hover:not(.active) {
    background:
        linear-gradient(180deg,
            rgba(80, 65, 50, 0.7) 0%,
            rgba(55, 45, 35, 0.85) 100%);
    border-color: rgba(150, 120, 80, 0.5);
    color: rgba(240, 220, 180, 0.9);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Active tab with tier-appropriate styling */
.leaderboard-tab.active {
    color: #1a1510;
    font-weight: 700;
    transform: translateY(-3px);
    z-index: 2;
}

/* Standard (NG+0) - Golden */
.leaderboard-tab:nth-child(1).active {
    background: linear-gradient(180deg, #f0d890 0%, #d4a84b 50%, #a67c30 100%);
    border-color: #f0d890;
    box-shadow:
        0 0 20px rgba(212, 168, 75, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Epic (NG+5) - Purple/Violet */
.leaderboard-tab:nth-child(2).active {
    background: linear-gradient(180deg, #c792ea 0%, #9b59b6 50%, #6c3483 100%);
    border-color: #c792ea;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow:
        0 0 20px rgba(155, 89, 182, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Mythic (NG+10) - Cyan/Ethereal */
.leaderboard-tab:nth-child(3).active {
    background: linear-gradient(180deg, #76d7ea 0%, #20b2aa 50%, #158a82 100%);
    border-color: #76d7ea;
    color: #0a3030;
    box-shadow:
        0 0 20px rgba(32, 178, 170, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Legendary (NG+20) - Rainbow/Prismatic */
.leaderboard-tab:nth-child(4).active {
    background: linear-gradient(90deg,
            #ff6b6b 0%,
            #ffd93d 20%,
            #6bcf6b 40%,
            #4dabf7 60%,
            #c792ea 80%,
            #ff6b9d 100%);
    background-size: 200% 100%;
    animation: legendaryTabShimmer 3s linear infinite;
    border-color: #ffd93d;
    color: #1a1a1a;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    box-shadow:
        0 0 25px rgba(255, 215, 0, 0.6),
        0 0 50px rgba(255, 100, 150, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes legendaryTabShimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Tab shine effect on hover */
.leaderboard-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 50%,
            transparent 100%);
    transition: left 0.5s ease;
}

.leaderboard-tab:hover::before {
    left: 100%;
}

/* ============================================
   RANKINGS LIST - Premium Scrollable Container
   ============================================ */
.leaderboard-rankings-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    /* Dark parchment interior */
    background:
        linear-gradient(180deg,
            rgba(15, 12, 8, 0.98) 0%,
            rgba(20, 16, 10, 0.95) 50%,
            rgba(15, 12, 8, 0.98) 100%);

    /* Subtle inner shadow for depth */
    box-shadow:
        inset 0 10px 20px rgba(0, 0, 0, 0.3),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2);
}

/* Custom scrollbar styling */
.leaderboard-rankings-list::-webkit-scrollbar {
    width: 10px;
}

.leaderboard-rankings-list::-webkit-scrollbar-track {
    background: rgba(30, 25, 18, 0.8);
    border-radius: 5px;
    border: 1px solid rgba(100, 80, 60, 0.3);
}

.leaderboard-rankings-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(212, 168, 75, 0.6) 0%,
            rgba(166, 124, 48, 0.8) 50%,
            rgba(122, 90, 32, 0.6) 100%);
    border-radius: 5px;
    border: 1px solid rgba(212, 168, 75, 0.3);
}

.leaderboard-rankings-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            rgba(240, 216, 144, 0.7) 0%,
            rgba(212, 168, 75, 0.9) 50%,
            rgba(166, 124, 48, 0.7) 100%);
}

/* ============================================
   RANKING ROWS - Premium Card Design
   ============================================ */
.ranking-row {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 8px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;

    /* Subtle parchment-like background */
    background:
        linear-gradient(90deg,
            rgba(45, 38, 28, 0.7) 0%,
            rgba(35, 30, 22, 0.8) 50%,
            rgba(45, 38, 28, 0.7) 100%);

    border: 1px solid rgba(100, 80, 60, 0.25);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.3);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Staggered entry animation */
    opacity: 0;
    transform: translateX(-20px);
    animation: rowSlideIn 0.4s ease-out both;
}

/* Staggered animation delays */
.ranking-row:nth-child(1) {
    animation-delay: 0.05s;
}

.ranking-row:nth-child(2) {
    animation-delay: 0.1s;
}

.ranking-row:nth-child(3) {
    animation-delay: 0.15s;
}

.ranking-row:nth-child(4) {
    animation-delay: 0.2s;
}

.ranking-row:nth-child(5) {
    animation-delay: 0.25s;
}

.ranking-row:nth-child(6) {
    animation-delay: 0.3s;
}

.ranking-row:nth-child(7) {
    animation-delay: 0.35s;
}

.ranking-row:nth-child(8) {
    animation-delay: 0.4s;
}

.ranking-row:nth-child(9) {
    animation-delay: 0.45s;
}

.ranking-row:nth-child(10) {
    animation-delay: 0.5s;
}

.ranking-row:nth-child(n+11) {
    animation-delay: 0.55s;
}

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

/* Hover effect with golden glow */
.ranking-row:hover {
    background:
        linear-gradient(90deg,
            rgba(65, 55, 40, 0.85) 0%,
            rgba(55, 48, 35, 0.9) 50%,
            rgba(65, 55, 40, 0.85) 100%);
    border-color: rgba(212, 168, 75, 0.4);
    transform: translateX(4px) scale(1.01);

    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 168, 75, 0.1);
}

/* Subtle shine on hover */
.ranking-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 168, 75, 0.08) 50%,
            transparent 100%);
    transition: left 0.6s ease;
    pointer-events: none;
}

.ranking-row:hover::before {
    left: 150%;
}

/* Top 3 special styling */
.ranking-row:nth-child(1) {
    background:
        linear-gradient(90deg,
            rgba(120, 90, 30, 0.3) 0%,
            rgba(90, 70, 25, 0.35) 50%,
            rgba(120, 90, 30, 0.3) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.1),
        0 0 15px rgba(255, 215, 0, 0.15),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

.ranking-row:nth-child(2) {
    background:
        linear-gradient(90deg,
            rgba(100, 100, 110, 0.25) 0%,
            rgba(80, 80, 90, 0.3) 50%,
            rgba(100, 100, 110, 0.25) 100%);
    border-color: rgba(192, 192, 192, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(192, 192, 192, 0.08),
        0 0 12px rgba(192, 192, 192, 0.1),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

.ranking-row:nth-child(3) {
    background:
        linear-gradient(90deg,
            rgba(140, 90, 60, 0.25) 0%,
            rgba(110, 70, 45, 0.3) 50%,
            rgba(140, 90, 60, 0.25) 100%);
    border-color: rgba(205, 127, 50, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(205, 127, 50, 0.08),
        0 0 12px rgba(205, 127, 50, 0.1),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Current player highlight - premium golden glow */
.ranking-row.current-player {
    background:
        linear-gradient(90deg,
            rgba(212, 168, 75, 0.2) 0%,
            rgba(180, 140, 60, 0.25) 50%,
            rgba(212, 168, 75, 0.2) 100%);
    border: 2px solid rgba(212, 168, 75, 0.6);

    box-shadow:
        0 0 25px rgba(212, 168, 75, 0.3),
        0 0 50px rgba(212, 168, 75, 0.15),
        inset 0 1px 0 rgba(255, 220, 150, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.3);

    animation: currentPlayerPulse 2s ease-in-out infinite, rowSlideIn 0.4s ease-out both;
}

@keyframes currentPlayerPulse {

    0%,
    100% {
        box-shadow:
            0 0 25px rgba(212, 168, 75, 0.3),
            0 0 50px rgba(212, 168, 75, 0.15),
            inset 0 1px 0 rgba(255, 220, 150, 0.15),
            0 4px 12px rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow:
            0 0 35px rgba(212, 168, 75, 0.45),
            0 0 70px rgba(212, 168, 75, 0.25),
            inset 0 1px 0 rgba(255, 220, 150, 0.2),
            0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

/* ============================================
   RANK NUMBER - Medal-Style Display
   ============================================ */
.rank-num {
    width: 45px;
    min-width: 45px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(180, 160, 130, 0.8);
    text-align: center;
    margin-right: 8px;
}

/* Top 3 medal styling */
.ranking-row:nth-child(1) .rank-num,
.ranking-row:nth-child(2) .rank-num,
.ranking-row:nth-child(3) .rank-num {
    font-size: 0;
}

.ranking-row:nth-child(1) .rank-num::before {
    content: '🥇';
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.ranking-row:nth-child(2) .rank-num::before {
    content: '🥈';
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.ranking-row:nth-child(3) .rank-num::before {
    content: '🥉';
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.rank-icon {
    width: 40px;
    min-width: 40px;
    font-size: 1.3rem;
    text-align: center;
    margin-right: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* ============================================
   RANK NAME - Heroic Typography
   ============================================ */
.rank-name {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(235, 225, 205, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;

    /* Prevent overflow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 16px;
}

/* Top 3 names get special treatment */
.ranking-row:nth-child(1) .rank-name {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ranking-row:nth-child(2) .rank-name {
    color: #e8e8f0;
    text-shadow: 0 0 8px rgba(192, 192, 192, 0.3), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ranking-row:nth-child(3) .rank-name {
    color: #e8b87a;
    text-shadow: 0 0 8px rgba(205, 127, 50, 0.3), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Current player name styling */
.current-player .rank-name {
    color: var(--gold-highlight);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(212, 168, 75, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ============================================
   RANK DAMAGE - Premium Score Display
   ============================================ */
.rank-damage {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-right: 16px;
    padding: 6px 12px;
    border-radius: 6px;

    /* Premium gold gradient */
    background: linear-gradient(180deg,
            rgba(212, 168, 75, 0.2) 0%,
            rgba(166, 124, 48, 0.15) 100%);
    border: 1px solid rgba(212, 168, 75, 0.3);

    color: var(--gold-highlight);
    text-shadow: 0 0 8px rgba(212, 168, 75, 0.4);

    white-space: nowrap;
}

/* Top 3 damage badges */
.ranking-row:nth-child(1) .rank-damage {
    background: linear-gradient(180deg,
            rgba(255, 215, 0, 0.25) 0%,
            rgba(200, 160, 0, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
}

.ranking-row:nth-child(2) .rank-damage {
    background: linear-gradient(180deg,
            rgba(192, 192, 192, 0.2) 0%,
            rgba(150, 150, 150, 0.15) 100%);
    border-color: rgba(192, 192, 192, 0.35);
    color: #e0e0e8;
}

.ranking-row:nth-child(3) .rank-damage {
    background: linear-gradient(180deg,
            rgba(205, 127, 50, 0.2) 0%,
            rgba(160, 100, 40, 0.15) 100%);
    border-color: rgba(205, 127, 50, 0.35);
    color: #e8b87a;
}

/* ============================================
   RANK DATE - Subtle Timestamp
   ============================================ */
.rank-date {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(150, 135, 110, 0.7);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ============================================
   NO RANKINGS MESSAGE
   ============================================ */
.no-rankings {
    text-align: center;
    padding: 60px 30px;

    font-family: var(--font-body);
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(180, 160, 130, 0.6);

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.no-rankings::before {
    content: '⚔️';
    display: block;
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
    filter: grayscale(0.5);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes leaderboardFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

@keyframes leaderboardFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

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

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

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

/* ============================================
   UI SCALING SYSTEM
   ============================================ */

/* Main Game Book & HUD Overlays */
#app,
.result-content,
.start-screen .notebook-wrapper,
.expedition-map-container,
.reward-header,
.reward-cards-container,
.reward-footer {
    transform: scale(var(--ui-scale));
    transform-origin: center center;
}

.result-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
}

/* Player HUD Corner Pinned */
.player-hud {
    transform: translateX(-50px) scale(var(--ui-scale)) !important;
    transform-origin: bottom left !important;
}

.player-hud.visible {
    transform: translateX(0) scale(var(--ui-scale)) !important;
}


/* Dev Tools Buttons Group Scaling */
.dev-buttons-container {
    transform: scale(var(--ui-scale));
    transform-origin: top right;
}