/* ============================================
   BOSS CARD - TORN NOTEBOOK PAGE DESIGN
   Portrait styled as torn old fantasy photo
   ============================================ */

/* === Boss Panel Container === */
.boss-panel {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: inset 8px 0 12px -8px rgba(0, 0, 0, 0.1);
    /* Allow tooltip to overflow and appear above bottom-deck */
    overflow: visible;
    z-index: 50;
}

/* === Boss Card - Torn Parchment Page === */
.boss-card {
    display: flex;
    flex-direction: column;
    width: 340px;
    /* height: 480px;  <-- REMOVED to prevent stretching */
    width: 340px;
    /* Let height be determined by content */
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    gap: 0;
}

/* Remove previous decorative elements from style.css */
.boss-card::before,
.boss-card::after {
    display: none;
}

/* === Main Torn Page Container === */
.boss-card-page {
    position: relative;
    width: 100%;
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(175deg,
            #f5ebe0 0%,
            #e8dcc8 30%,
            #ddd0b8 70%,
            #d4c4a8 100%);
    background-blend-mode: multiply, normal;
    border-radius: 6px;
    padding: var(--space-4);
    padding-bottom: var(--space-5);
    /* FIXED HEIGHT removed */
    /* min-height: 480px; */
    display: flex;
    flex-direction: column;
    box-shadow:
        /* Torn edge layering effect - stacked pages */
        2px 2px 0 rgba(160, 140, 110, 0.7),
        4px 4px 0 rgba(160, 140, 110, 0.5),
        6px 6px 0 rgba(160, 140, 110, 0.3),
        8px 8px 0 rgba(160, 140, 110, 0.15),
        /* Main shadow */
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 5px 15px rgba(0, 0, 0, 0.2),
        /* Inner parchment glow */
        inset 0 0 50px rgba(139, 90, 43, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    /* Torn edge effect using clip-path */
    clip-path: polygon(0% 0%,
            2% 0.8%, 5% 0%, 8% 1.2%, 12% 0.3%, 16% 1.5%, 21% 0.5%, 26% 1.2%,
            32% 0%, 37% 0.8%, 43% 0.3%, 49% 1.2%, 55% 0%, 61% 0.8%, 67% 0%,
            73% 1.4%, 79% 0.4%, 85% 0.9%, 91% 0%, 95% 1.2%, 98% 0.5%, 100% 0%,
            100% 100%,
            98% 99.2%, 95% 100%, 91% 98.8%, 86% 100%, 81% 98.5%, 76% 99.5%,
            70% 100%, 64% 98.8%, 58% 100%, 52% 99.2%, 46% 100%, 40% 98.5%,
            34% 99.5%, 28% 100%, 22% 98.8%, 16% 99.5%, 10% 100%, 5% 98.8%,
            2% 99.6%, 0% 100%);
}

/* Aging stains and imperfections */
.boss-card-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Coffee stain 1 */
        radial-gradient(ellipse 100px 80px at 15% 20%, rgba(139, 90, 43, 0.06) 0%, transparent 70%),
        /* Coffee stain 2 */
        radial-gradient(ellipse 60px 50px at 85% 80%, rgba(139, 90, 43, 0.05) 0%, transparent 70%),
        /* Water damage edge */
        radial-gradient(ellipse 150px 100px at 95% 5%, rgba(180, 160, 120, 0.06) 0%, transparent 60%),
        /* Edge darkening/aging */
        linear-gradient(180deg, transparent 0%, rgba(139, 90, 43, 0.03) 100%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Parchment fiber texture */
.boss-card-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.035;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

/* === Character Name - Large Elegant Script at Top === */
.boss-character-name {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Decorative underline */
.boss-character-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(92, 61, 30, 0.25) 15%,
            rgba(92, 61, 30, 0.5) 50%,
            rgba(92, 61, 30, 0.25) 85%,
            transparent 100%);
}

/* Decorative flourish elements */
.boss-character-name::before {
    content: '✦';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: rgba(92, 61, 30, 0.4);
    background: linear-gradient(175deg, #f5ebe0, #e8dcc8);
    padding: 0 8px;
}

#boss-name {
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: 1.6rem;
    font-style: italic;
    color: var(--ink-black);
    letter-spacing: 0.02em;
    text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 6px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(92, 61, 30, 0.08);
    font-weight: 400;
    text-transform: none;
    line-height: 1.1;
    max-width: 90%;
    display: block;
}

/* === Portrait Section - Torn Old Fantasy Photo === */
.boss-portrait-section {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    flex: 1;
}

/* Portrait Frame - Torn Old Photo Style */
.boss-portrait-frame {
    position: relative;
    flex-shrink: 0;
    /* Slight rotation for stuck look */
    transform: rotate(-1.5deg);
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle ambient glow around portrait */
.boss-portrait-frame::after {
    content: '';
    position: absolute;
    inset: -15px;
    background: radial-gradient(ellipse at center,
            rgba(180, 140, 80, 0.12) 0%,
            rgba(139, 90, 43, 0.05) 40%,
            transparent 70%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    animation: portraitGlow 4s ease-in-out infinite;
}

@keyframes portraitGlow {

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

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

.boss-portrait-frame:hover {
    transform: rotate(-0.5deg) scale(1.03);
    filter: brightness(1.05) contrast(1.02);
}

/* Top tape strip - aged masking tape */
.boss-portrait-frame::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(1deg);
    width: 70px;
    height: 22px;
    background: linear-gradient(180deg,
            rgba(210, 195, 165, 0.9) 0%,
            rgba(190, 175, 145, 0.85) 50%,
            rgba(175, 160, 130, 0.8) 100%);
    border-radius: 2px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    z-index: 20;
    /* Tape texture - slightly transparent edges */
    mask-image: linear-gradient(90deg,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
}

/* Ambient glow is defined above in the portrait section */

/* Main Portrait/Photo Container - Torn Old Photo */
.boss-display {
    width: 200px;
    height: 240px;
    background: linear-gradient(145deg,
            #c8baa8 0%,
            #b8a890 50%,
            #a89878 100%);
    border: none;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 0;
    /* Torn/worn edge effect */
    box-shadow:
        /* Multiple shadow layers for depth */
        0 3px 8px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2),
        /* Inner worn effect */
        inset 0 0 30px rgba(60, 40, 20, 0.15),
        inset 0 0 60px rgba(60, 40, 20, 0.08);
    /* Torn edge clip-path for old photo */
    clip-path: polygon(0% 2%, 3% 0%, 8% 1.5%, 15% 0%, 22% 1%, 30% 0.5%, 40% 1.5%,
            50% 0%, 60% 1%, 70% 0.5%, 78% 1.5%, 85% 0%, 92% 1%, 97% 0.5%, 100% 1.5%,
            100% 98%, 97% 100%, 92% 98.5%, 85% 100%, 78% 99%, 70% 100%, 60% 98.5%,
            50% 100%, 40% 99%, 30% 100%, 22% 98.5%, 15% 100%, 8% 99%, 3% 100%, 0% 98%);
}

/* Photo aging/sepia overlay */
.boss-display::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Vignette effect */
        radial-gradient(ellipse at center, transparent 40%, rgba(40, 25, 10, 0.25) 100%),
        /* Sepia tone */
        linear-gradient(180deg, rgba(139, 100, 50, 0.08) 0%, rgba(100, 70, 30, 0.12) 100%);
    pointer-events: none;
    z-index: 5;
}

/* Photo scratches and wear */
.boss-display::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Corner light leak */
        radial-gradient(ellipse at 0% 0%, rgba(255, 230, 180, 0.12) 0%, transparent 40%),
        /* Corner damage */
        radial-gradient(ellipse at 100% 100%, rgba(60, 40, 20, 0.15) 0%, transparent 35%),
        radial-gradient(ellipse at 0% 100%, rgba(60, 40, 20, 0.1) 0%, transparent 30%),
        /* Scratch lines */
        linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.03) 48%, transparent 52%),
        linear-gradient(45deg, transparent 48%, rgba(0, 0, 0, 0.02) 50%, transparent 53%);
    pointer-events: none;
    z-index: 6;
}

.boss-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg,
            rgba(180, 160, 130, 0.3) 0%,
            rgba(150, 130, 100, 0.2) 100%);
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    position: relative;
    box-shadow: none;
    max-width: none;
    aspect-ratio: auto;
    /* Old photo sepia filter */
    filter: sepia(0.2) contrast(0.95) brightness(0.95);
}

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

/* Boss Image Styling - Old Photo Look */
.boss-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Zoom in to show roughly half body/bust */
    transform: scale(1.6) translateY(15px);
    filter: sepia(0.25) contrast(1.02) brightness(0.92) saturate(0.85);
}

/* === Level Badge - Simple Parchment Design === */
.boss-level-badge {
    position: relative;
    text-align: center;
    z-index: 10;
    margin: var(--space-2) 0;
    padding: var(--space-3) 0;
}

/* Decorative divider line above level */
.boss-level-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(92, 61, 30, 0.2) 20%,
            rgba(92, 61, 30, 0.35) 50%,
            rgba(92, 61, 30, 0.2) 80%,
            transparent 100%);
}

/* Decorative flourishes */
.boss-level-badge::after {
    content: '~ ✦ ~';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(92, 61, 30, 0.45);
    background: linear-gradient(175deg, #e8dcc8, #ddd0b8);
    padding: 0 10px;
    letter-spacing: 2px;
}

.boss-level-badge-inner {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 20px;
    position: relative;
}

.boss-level-label {
    font-family: 'IM Fell English', serif;
    font-size: 0.95rem;
    color: var(--ink-brown);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.boss-level-value {
    font-family: 'IM Fell English', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink-black);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    line-height: 1;
}

/* === HP Vial (Integrated Notebook Style) === */
.boss-hp-vial {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 90px;
    height: 90px;
    z-index: 25;
    pointer-events: none;
    /* Soft shadow to ground it on the paper */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

/* Container: Looks like a hole cut in paper or a glass lens sitting on it */
.hp-vial-inner {
    position: absolute;
    inset: 4px;
    background: #2a1a1a;
    /* Dark ink background */
    border-radius: 48% 52% 51% 49% / 52% 48% 51% 49%;
    /* Organic, imperfect circle */
    overflow: hidden;
    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, 0.8),
        inset 0 0 4px rgba(255, 240, 220, 0.1);
    /* Slight paper reflection */
    z-index: 10;
}

/* Texture Overlay - Makes the liquid look painted/inked */
.hp-vial-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 15;
}

/* Liquid Fill - "Blood Ink" Style */
.hp-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    /* Watercolor/Ink gradient: Darker, less neon */
    background: linear-gradient(180deg,
            #d64541 0%,
            /* Faded red ink */
            #a93226 30%,
            /* Dried blood */
            #641e16 80%,
            /* Deep dark ink */
            #350d0d 100%);
    transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);

    /* Ink bleed edge effect at the top */
    box-shadow: 0 -2px 5px rgba(100, 30, 22, 0.5);
}

/* Meniscus/Ink Line */
.hp-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    right: -10%;
    height: 5px;
    background: rgba(255, 245, 235, 0.15);
    /* Very subtle highlight */
    filter: blur(2px);
    transform: rotate(-1deg);
}

/* Subtle Ink Blotches/Bubbles */
.hp-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.2) 2px, transparent 2px),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px, 12px 12px;
    opacity: 0.6;
}

/* Glass Shine - Much cleaner, old glass look */
.hp-vial-shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 30% 30%,
            rgba(255, 255, 255, 0.4) 0%,
            transparent 25%);
    z-index: 12;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

/* Glass Glare - Removed neon vibe, kept subtle rim */
.hp-vial-glare {
    display: none;
}

/* Frame - Hand-drawn Ink Circle / Old Iron Ring */
.hp-vial-frame {
    position: absolute;
    inset: -2px;
    border-radius: 49% 51% 48% 52% / 52% 48% 50% 50%;
    /* Imperfect */
    border: 3px solid rgba(60, 45, 30, 0.85);
    /* Dark brown ink/iron */
    box-shadow:
        /* Outer glow to blend with paper */
        0 0 0 1px rgba(92, 61, 30, 0.3),
        /* Sketched effect (double line) */
        0 0 0 4px rgba(60, 45, 30, 0.1);
    z-index: 20;
    /* Sketchy rotation */
    transform: rotate(2deg);
}

/* Extra sketched line */
.hp-vial-frame::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 52% 48% 51% 49% / 48% 52% 50% 50%;
    border: 1px dashed rgba(60, 45, 30, 0.4);
    transform: rotate(-5deg);
    z-index: -1;
}

/* HP Text Number - Ink Stamp Look */
#boss-hp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0e6d2;
    /* Parchment white */
    font-family: 'IM Fell English', serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(60, 40, 20, 0.9);
    z-index: 30;
    pointer-events: none;
    opacity: 0.95;
    mix-blend-mode: normal;
}

/* === Decorative Side Ornament (Leather Strap) === */
.boss-side-ornament {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 220px;
    pointer-events: none;
    z-index: 5;
}

/* Ornate Leather Strap */
.boss-side-ornament::before {
    content: '';
    position: absolute;
    top: 0;
    right: 12px;
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg,
            var(--leather-light) 0%,
            var(--leather) 15%,
            var(--leather-dark) 50%,
            var(--leather) 85%,
            var(--leather-light) 100%);
    border-radius: 4px;
    box-shadow:
        1px 0 3px rgba(0, 0, 0, 0.35),
        -1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Decorative Gold Rivets */
.boss-side-ornament::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 15px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 35% 35%,
            var(--gold-highlight) 0%,
            var(--gold-ornament) 45%,
            var(--gold-dark) 100%);
    border-radius: 50%;
    box-shadow:
        0 190px 0 0 currentColor,
        0 2px 5px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* === Notebook Ring Holes === */
.boss-notebook-holes {
    position: absolute;
    left: -14px;
    top: 10%;
    bottom: 10%;
    width: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 15;
}

.notebook-hole {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wood-dark);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.7),
        0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
}

/* Ring effect */
.notebook-hole::after {
    content: '';
    position: absolute;
    left: -8px;
    top: -3px;
    width: 26px;
    height: 16px;
    border: 2.5px solid var(--gold-ornament);
    border-radius: 12px 0 0 12px;
    border-right: none;
    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* === Mechanics Hint Integration - Hand Drawn Style === */
/* Position on .boss-card to avoid clip-path */
.boss-card .boss-mechanics-hint {
    position: absolute;
    top: 0px;
    right: -15px;
    /* Moved further right */
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    /* Just a visual guide */
}

.mechanics-hand-text {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-brown);
    transform: rotate(-10deg) translateX(-10px);
    opacity: 0.8;
}

.mechanics-arrow-guide {
    width: 60px;
    height: 40px;
    color: var(--ink-brown);
    transform: rotate(10deg) translateY(0);
    /* Slight tilt adjustment */
    margin-top: -15px;
    /* Pull closer to text */
    opacity: 0.8;
    filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.4));
}

/* Tooltip positioning - moved to boss card root */
.boss-card .mechanics-tooltip {
    position: absolute;
    top: 85px;
    /* Positioned below the name area */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    /* Start slightly down */
    width: 290px;
    /* Slightly wider */
    /* Exact match for item-tooltip background */
    background:
        url('../img/parchment_bg.png') center/cover,
        linear-gradient(170deg, #f5ebe0 0%, #e8dcc8 50%, #ddd0b8 100%);
    background-blend-mode: multiply, normal;
    color: #2c2c2c;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    font-family: 'IM Fell English', serif;
    font-size: 0.95rem;
    border: none;
    /* item-tooltip has no border */
    box-shadow:
        /* Outer torn edge effect */
        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 8px 24px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.2),
        /* Inner parchment glow */
        inset 0 0 30px rgba(139, 90, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 10000;
    text-align: left;
}

/* Inner border - simulates aged paper edge (Matches .item-tooltip) */
.boss-card .mechanics-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;
    display: block !important;
    /* Force display */
}

/* Show tooltip on name hover IF mechanics exist */
.boss-character-name.has-mechanics:hover {
    cursor: help;
}

/* JS-toggled visibility class */
.mechanics-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Tooltip Header */
.mechanics-tooltip-header {
    border-bottom: 1px solid rgba(92, 61, 30, 0.2);
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.mechanics-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #5c3d1e;
}

/* Tooltip Content */
.mechanics-description {
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.4;
}

.mechanics-rules {
    list-style-type: disc;
    /* Use bullets */
    padding-left: 20px;
    margin: 0;
}

.mechanics-rules li {
    margin-bottom: 4px;
}

/* Arrow for tooltip */
.boss-card .mechanics-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #e8dcc8 transparent;
}

/* Page flutter on hover */
.boss-card:hover .boss-card-page {
    box-shadow:
        3px 3px 0 rgba(160, 140, 110, 0.7),
        5px 5px 0 rgba(160, 140, 110, 0.5),
        7px 7px 0 rgba(160, 140, 110, 0.3),
        9px 9px 0 rgba(160, 140, 110, 0.15),
        0 18px 45px rgba(0, 0, 0, 0.4),
        0 6px 18px rgba(0, 0, 0, 0.25),
        inset 0 0 50px rgba(139, 90, 43, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-3px) rotate(0.4deg);
}

.boss-card-page {
    transition: all 0.3s ease;
}

/* === Responsive Adjustments === */
@media (max-width: 1200px) {
    .boss-card-page {
        padding: var(--space-4);
        min-height: 420px;
    }

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

    .boss-display {
        width: 140px;
        height: 175px;
    }

    .boss-level-value {
        font-size: 1.7rem;
    }
}

/* === Boss Attack Animations === */

/* Simulates the boss card rearing back and punching/lunging forward */
@keyframes bossPunch {
    0% {
        transform: scale(1) translate(0, 0);
    }

    30% {
        transform: scale(0.92) translate(0, 15px) rotate(-1deg);
        /* Wind up */
    }

    45% {
        transform: scale(0.92) translate(0, 15px) rotate(-1deg);
        /* Hold */
    }

    50% {
        transform: scale(1.15) translate(0, -40px) rotate(1deg);
        /* Lunge/Punch */
    }

    60% {
        transform: scale(1.15) translate(0, -40px) rotate(1deg);
    }

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

.boss-punching {
    animation: bossPunch 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 1000 !important;
}

/* Screen effect when player takes damage/dies */
@keyframes screenShakeRed {
    0% {
        transform: translate(0, 0);
        box-shadow: inset 0 0 0 0 rgba(139, 26, 26, 0);
    }

    10% {
        transform: translate(-10px, -10px);
        box-shadow: inset 0 0 100px 50px rgba(139, 26, 26, 0.4);
    }

    20% {
        transform: translate(10px, 10px);
    }

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

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

    50% {
        transform: translate(-5px, 5px);
        box-shadow: inset 0 0 80px 40px rgba(139, 26, 26, 0.2);
    }

    100% {
        transform: translate(0, 0);
        box-shadow: inset 0 0 0 0 rgba(139, 26, 26, 0);
    }
}

.screen-damage-effect {
    animation: screenShakeRed 0.6s ease-out forwards;
    position: relative;
    /* Ensure transform works if needed */
}