/* ============================================
   BOSS MECHANICS VISUAL INDICATORS
   Clean, minimal approach with cell highlights
   ============================================ */

/* ============================================
   GRID CELL CORNER HIGHLIGHTS (Cleopatra)
   ============================================ */

/* Corner cells affected by boss mechanics */
.grid-cell.boss-corner-cell {
    position: relative;
    overflow: visible;
}

/* Enhanced poison corner glow effect - no badge */
.grid-cell.boss-corner-cell::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(61, 155, 74, 0.6);
    border-radius: calc(var(--radius-md) + 2px);
    background: radial-gradient(circle at 50% 50%,
            rgba(61, 155, 74, 0.2) 0%,
            rgba(61, 155, 74, 0.12) 40%,
            rgba(61, 155, 74, 0.05) 70%,
            transparent 100%);
    box-shadow:
        inset 0 0 12px rgba(61, 155, 74, 0.3),
        0 0 8px rgba(61, 155, 74, 0.4),
        0 0 16px rgba(61, 155, 74, 0.2);
    animation: poison-corner-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Corner cell tooltip */
.grid-cell.boss-corner-cell::after {
    content: 'Corner: +2 ☠️ Poison Stacks';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(145deg, #2a2015 0%, #1a1510 100%);
    color: #f5f0e5;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-family: var(--font-body);
    white-space: nowrap;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(61, 155, 74, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

/* Bottom row corner cells - tooltip appears below */
.grid-cell.boss-corner-cell[data-row="2"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}

/* Show tooltip on hover */
.grid-cell.boss-corner-cell:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* Bottom row hover - move down instead of up */
.grid-cell.boss-corner-cell[data-row="2"]:hover::after {
    transform: translateX(-50%) translateY(2px);
}

@keyframes poison-corner-pulse {

    0%,
    100% {
        border-color: rgba(61, 155, 74, 0.5);
        box-shadow:
            inset 0 0 8px rgba(61, 155, 74, 0.2),
            0 0 6px rgba(61, 155, 74, 0.3),
            0 0 12px rgba(61, 155, 74, 0.15);
    }

    50% {
        border-color: rgba(61, 155, 74, 0.9);
        box-shadow:
            inset 0 0 16px rgba(61, 155, 74, 0.4),
            0 0 12px rgba(61, 155, 74, 0.6),
            0 0 20px rgba(61, 155, 74, 0.3);
    }
}

/* ============================================
   CLEOPATRA ATMOSPHERIC TOOLTIP STYLING
   Poison/Venom theme with dripping effects
   ============================================ */

/* Cleopatra effect row base styling */
.boss-status-row.cleopatra-effect {
    background: linear-gradient(90deg,
            rgba(61, 155, 74, 0.08) 0%,
            rgba(100, 200, 100, 0.15) 50%,
            rgba(61, 155, 74, 0.08) 100%);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 2px -4px;
    border-left: 2px solid rgba(61, 155, 74, 0.6);
    position: relative;
    overflow: hidden;
}

/* Poison dripping effect (simulated with moving gradient) */
.boss-status-row.cleopatra-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle at 50% 0%,
            rgba(61, 155, 74, 0.1) 0%,
            transparent 70%);
    animation: poison-drip 3s ease-in-out infinite;
    pointer-events: none;
    background-size: 100% 50%;
}

@keyframes poison-drip {
    0% {
        background-position: 0% 0%;
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        background-position: 0% 100%;
        opacity: 0.5;
    }
}

/* Cleopatra icon styling - venomous glow */
.cleopatra-icon {
    color: #5cdb5c;
    font-size: 0.9rem;
    filter: drop-shadow(0 0 4px rgba(61, 155, 74, 0.8));
    animation: venom-pulse 2s ease-in-out infinite;
}

@keyframes venom-pulse {

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

    50% {
        opacity: 1;
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px rgba(90, 240, 90, 0.6));
    }
}

/* Cleopatra value styling */
.cleopatra-value {
    color: #90ee90;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(61, 155, 74, 0.6);
}

.cleopatra-value.negative {
    color: #ff8080;
    text-shadow: 0 0 5px rgba(180, 40, 40, 0.4);
}

/* Specific Row Types */

/* Poison Stacks - Darker, toxic look */
.boss-status-row.poison-stack {
    border-left-color: rgba(61, 155, 74, 0.8);
    background: linear-gradient(90deg,
            rgba(40, 60, 40, 0.2) 0%,
            rgba(61, 155, 74, 0.2) 50%,
            rgba(40, 60, 40, 0.2) 100%);
}

/* Corruption - Venomous bright green */
.boss-status-row.corruption-effect {
    border-left-color: rgba(140, 255, 100, 0.7);
    background: linear-gradient(90deg,
            rgba(61, 155, 74, 0.1) 0%,
            rgba(140, 255, 100, 0.15) 50%,
            rgba(61, 155, 74, 0.1) 100%);
}

.boss-status-row.corruption-effect .cleopatra-icon {
    color: #adff2f;
}

/* Corner effect - Purple/Green mix for mystical poison */
.boss-status-row.cleopatra-corner {
    border-left-color: rgba(155, 74, 155, 0.6);
    background: linear-gradient(90deg,
            rgba(61, 155, 74, 0.1) 0%,
            rgba(120, 80, 160, 0.15) 50%,
            rgba(61, 155, 74, 0.1) 100%);
}

/* ============================================
   BOSS EFFECT TOOLTIP (on item hover)
   ============================================ */

.boss-status-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: linear-gradient(145deg, #2a2015 0%, #1a1510 100%);
    color: #f5f0e5;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(212, 168, 75, 0.3);
    min-width: 120px;
    text-align: left;
    isolation: isolate;
}

.boss-status-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1a1510;
}

/* Show tooltip on hover */
.item-in-grid-container:hover .boss-status-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(4px);
}


/* Tooltip status rows */
.boss-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.boss-status-icon {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}

.boss-status-label {
    color: rgba(245, 240, 229, 0.7);
    flex: 1;
}

.boss-status-value {
    font-weight: 600;
}

.boss-status-value.negative {
    color: #ff7f7f;
}

.boss-status-value.neutral {
    color: #d4a84b;
}

/* ============================================
   ITEM VISUAL EFFECTS (Subtle, no badges)
   ============================================ */

/* Poisoned item - subtle green tint */
.boss-poisoned {
    filter: drop-shadow(0 0 6px rgba(61, 155, 74, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-poisoned .item-subcell-filled {
    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),
        0 0 6px rgba(61, 155, 74, 0.4);
}

/* Corner item - warm amber glow */
.boss-corner {
    filter: drop-shadow(0 0 5px rgba(212, 168, 75, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Corrupted item - strong green corruption effect */
.boss-corrupted {
    filter: drop-shadow(0 0 8px rgba(61, 155, 74, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-corrupted .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(61, 155, 74, 0.6);
}

/* Corruption Overlay - Green shimmer */
.corruption-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%,
            rgba(61, 155, 74, 0.25) 0%,
            rgba(61, 155, 74, 0.1) 40%,
            transparent 70%);
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    animation: corruption-shimmer 2.5s ease-in-out infinite;
}

@keyframes corruption-shimmer {

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

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

/* Green penalty - subtle warning */
.boss-green-penalty {
    filter: drop-shadow(0 0 4px rgba(180, 80, 40, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* ============================================
   HIDE OLD BADGE SYSTEM (now using tooltips)
   ============================================ */

.boss-mechanics-badge {
    display: none !important;
}

/* ============================================
   TESLA MECHANICS - Electric Energy Theme
   ============================================ */

/* Positive value styling (for Tesla bonuses) */
.boss-status-value.positive {
    color: #7fd4ff;
    text-shadow: 0 0 4px rgba(127, 212, 255, 0.5);
}

/* Corner cells with POSITIVE effect (Tesla ×3 bonus) */
.grid-cell.boss-corner-cell.boss-corner-cell-positive::before {
    border-color: rgba(127, 200, 255, 0.7);
    background: radial-gradient(circle at 50% 50%,
            rgba(100, 180, 255, 0.25) 0%,
            rgba(100, 180, 255, 0.15) 40%,
            rgba(100, 180, 255, 0.05) 70%,
            transparent 100%);
    box-shadow:
        inset 0 0 12px rgba(127, 200, 255, 0.35),
        0 0 10px rgba(127, 200, 255, 0.5),
        0 0 20px rgba(127, 200, 255, 0.3);
    animation: electric-corner-pulse 1.5s ease-in-out infinite;
}

/* Tesla corner cell tooltip - Electric Arc Discharge Zone */
.grid-cell.boss-corner-cell.boss-corner-cell-positive::after {
    content: '⚡ Arc Discharge Zone ×3';
    background: linear-gradient(145deg, #0a1a2a 0%, #051525 100%);
    color: #7fd4ff;
    text-shadow: 0 0 6px rgba(127, 212, 255, 0.7);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(127, 200, 255, 0.6),
        0 0 15px rgba(127, 200, 255, 0.2);
}

@keyframes electric-corner-pulse {

    0%,
    100% {
        border-color: rgba(127, 200, 255, 0.5);
        box-shadow:
            inset 0 0 8px rgba(127, 200, 255, 0.2),
            0 0 8px rgba(127, 200, 255, 0.4),
            0 0 16px rgba(127, 200, 255, 0.2);
    }

    25% {
        border-color: rgba(127, 200, 255, 1);
        box-shadow:
            inset 0 0 20px rgba(127, 200, 255, 0.5),
            0 0 15px rgba(127, 200, 255, 0.8),
            0 0 30px rgba(127, 200, 255, 0.4);
    }

    50% {
        border-color: rgba(180, 220, 255, 0.7);
        box-shadow:
            inset 0 0 12px rgba(127, 200, 255, 0.3),
            0 0 10px rgba(127, 200, 255, 0.5),
            0 0 20px rgba(127, 200, 255, 0.25);
    }

    75% {
        border-color: rgba(127, 200, 255, 0.9);
        box-shadow:
            inset 0 0 18px rgba(127, 200, 255, 0.45),
            0 0 12px rgba(127, 200, 255, 0.7),
            0 0 25px rgba(127, 200, 255, 0.35);
    }
}

/* Tesla corner item - electric blue glow */
.boss-corner-positive {
    filter: drop-shadow(0 0 8px rgba(127, 200, 255, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: tesla-corner-glow 2s ease-in-out infinite;
}

.boss-corner-positive .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 1px 0 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(127, 200, 255, 0.5);
}

@keyframes tesla-corner-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(127, 200, 255, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(127, 200, 255, 0.8)) drop-shadow(0 0 20px rgba(127, 200, 255, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

/* Blue item bonus (Tesla: +10 damage) - subtle electric enhancement */
.boss-blue-bonus {
    filter: drop-shadow(0 0 6px rgba(127, 200, 255, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-blue-bonus .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(127, 200, 255, 0.4);
}

/* Large item penalty (Tesla: ×0.8 for ≥4 tiles) - electric overload effect */
.boss-large-penalty {
    filter: drop-shadow(0 0 3px rgba(255, 150, 50, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: overload-flicker 1.5s ease-in-out infinite;
}

.boss-large-penalty .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 4px rgba(255, 150, 50, 0.4);
}

/* Electric warning overlay for overloaded items */
.boss-large-penalty::after {
    content: '⚡';
    position: absolute;
    top: calc(var(--badge-offset-top, 0px) - 6px);
    left: calc(var(--badge-offset-left, 0px) - 6px);
    font-size: 0.85rem;
    opacity: 0.9;
    z-index: 50;
    pointer-events: none;
    animation: overload-warning 0.8s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 150, 50, 0.8));
}

@keyframes overload-flicker {

    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(255, 150, 50, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    25% {
        filter: drop-shadow(0 0 6px rgba(255, 100, 30, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 2px rgba(255, 150, 50, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    75% {
        filter: drop-shadow(0 0 5px rgba(255, 120, 40, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

@keyframes overload-warning {

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

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

/* ============================================
   TESLA ATMOSPHERIC TOOLTIP STYLING
   Electric energy theme with glowing effects
   ============================================ */

/* Tesla effect row base styling */
.boss-status-row.tesla-effect {
    background: linear-gradient(90deg,
            rgba(100, 180, 255, 0.08) 0%,
            rgba(127, 200, 255, 0.18) 50%,
            rgba(100, 180, 255, 0.08) 100%);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 2px -4px;
    border-left: 2px solid rgba(127, 200, 255, 0.7);
    position: relative;
    overflow: hidden;
}

/* Electric spark shimmer - subtle accent */
.boss-status-row.tesla-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(200, 230, 255, 0.12),
            transparent);
    animation: electric-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes electric-shimmer {
    0% {
        left: -100%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* Tesla icon styling - electric glow */
.tesla-icon {
    color: #7fd4ff;
    font-size: 0.95rem;
    text-shadow:
        0 0 8px rgba(127, 212, 255, 0.9),
        0 0 16px rgba(127, 200, 255, 0.5);
    animation: tesla-icon-pulse 1.5s ease-in-out infinite;
}

.tesla-icon-warning {
    color: #ffaa50;
    font-size: 0.95rem;
    text-shadow:
        0 0 6px rgba(255, 170, 80, 0.8),
        0 0 12px rgba(255, 150, 50, 0.4);
    animation: warning-pulse 0.8s ease-in-out infinite;
}

@keyframes tesla-icon-pulse {

    0%,
    100% {
        opacity: 0.85;
        text-shadow:
            0 0 6px rgba(127, 212, 255, 0.7),
            0 0 12px rgba(127, 200, 255, 0.3);
    }

    50% {
        opacity: 1;
        text-shadow:
            0 0 12px rgba(127, 212, 255, 1),
            0 0 20px rgba(127, 200, 255, 0.6);
    }
}

@keyframes warning-pulse {

    0%,
    100% {
        opacity: 0.8;
    }

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

/* Tesla value glow effect */
.tesla-value {
    color: #7fd4ff !important;
    text-shadow:
        0 0 4px rgba(127, 212, 255, 0.6),
        0 0 8px rgba(127, 200, 255, 0.3);
    font-weight: 700;
}

/* Electric unit sparkle */
.tesla-unit {
    font-size: 0.7rem;
    opacity: 0.8;
    animation: spark-flicker 0.5s ease-in-out infinite;
}

@keyframes spark-flicker {

    0%,
    100% {
        opacity: 0.7;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    75% {
        opacity: 0.9;
    }
}

/* Tile count styling */
.tesla-tiles {
    font-size: 0.65rem;
    opacity: 0.7;
    font-style: italic;
}

/* Arc Discharge row - corner bonus effect */
.boss-status-row.arc-discharge {
    border-left-color: rgba(180, 230, 255, 0.9);
    background: linear-gradient(90deg,
            rgba(127, 220, 255, 0.1) 0%,
            rgba(150, 230, 255, 0.2) 50%,
            rgba(127, 220, 255, 0.1) 100%);
}

/* Voltage Surge row - blue item bonus */
.boss-status-row.voltage-surge {
    border-left-color: rgba(100, 160, 255, 0.8);
    background: linear-gradient(90deg,
            rgba(80, 140, 220, 0.1) 0%,
            rgba(100, 160, 255, 0.18) 50%,
            rgba(80, 140, 220, 0.1) 100%);
}

/* Overloaded row - large item penalty */
.boss-status-row.overloaded {
    border-left-color: rgba(255, 150, 80, 0.8);
    background: linear-gradient(90deg,
            rgba(255, 120, 50, 0.1) 0%,
            rgba(255, 150, 80, 0.15) 50%,
            rgba(255, 120, 50, 0.1) 100%);
}

.boss-status-row.overloaded .boss-status-label {
    color: rgba(255, 180, 120, 0.9);
}

/* ============================================
   NAPOLEON MECHANICS - Blocked Central Slot
   ============================================ */

/* Blocked cell styling (Napoleon's formation mechanic) */
.grid-cell.boss-blocked-cell {
    position: relative;
    overflow: visible;
}

/* Blocked cell visual - military red with crossed pattern */
.grid-cell.boss-blocked-cell::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(180, 60, 60, 0.7);
    border-radius: calc(var(--radius-md) + 2px);
    background:
        linear-gradient(45deg, transparent 40%, rgba(180, 60, 60, 0.3) 45%, rgba(180, 60, 60, 0.3) 55%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(180, 60, 60, 0.3) 45%, rgba(180, 60, 60, 0.3) 55%, transparent 60%),
        radial-gradient(circle at 50% 50%,
            rgba(180, 60, 60, 0.15) 0%,
            rgba(180, 60, 60, 0.08) 50%,
            transparent 80%);
    box-shadow:
        inset 0 0 12px rgba(180, 60, 60, 0.3),
        0 0 8px rgba(180, 60, 60, 0.4);
    animation: blocked-cell-pulse 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Blocked cell tooltip */
.grid-cell.boss-blocked-cell::after {
    content: '⛔ Blocked by Napoleon';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(145deg, #2a1515 0%, #1a1010 100%);
    color: #f5f0e5;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-family: var(--font-body);
    white-space: nowrap;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(180, 60, 60, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

/* Show tooltip on hover */
.grid-cell.boss-blocked-cell:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* For center row cells, show tooltip below */
.grid-cell.boss-blocked-cell[data-row="1"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}

.grid-cell.boss-blocked-cell[data-row="1"]:hover::after {
    transform: translateX(-50%) translateY(2px);
}

@keyframes blocked-cell-pulse {

    0%,
    100% {
        border-color: rgba(180, 60, 60, 0.5);
        box-shadow:
            inset 0 0 8px rgba(180, 60, 60, 0.2),
            0 0 6px rgba(180, 60, 60, 0.3);
    }

    50% {
        border-color: rgba(200, 80, 80, 0.8);
        box-shadow:
            inset 0 0 16px rgba(180, 60, 60, 0.4),
            0 0 12px rgba(180, 60, 60, 0.5);
    }
}

/* ============================================
   LEONARDO DA VINCI MECHANICS - Renaissance Innovation Theme
   Inspired by sketches, inventions, and artistic mastery
   ============================================ */

/* === LEONARDO TOOLTIP STYLING === */
.boss-status-row.leonardo-effect {
    background: linear-gradient(90deg,
            rgba(212, 168, 75, 0.08) 0%,
            rgba(212, 168, 75, 0.15) 50%,
            rgba(212, 168, 75, 0.08) 100%);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 2px -4px;
    border-left: 2px solid rgba(212, 168, 75, 0.6);
}

.leonardo-icon {
    color: #d4a84b;
    font-size: 0.85rem;
    text-shadow: 0 0 6px rgba(212, 168, 75, 0.8);
    animation: leonardo-icon-glow 2s ease-in-out infinite;
}

@keyframes leonardo-icon-glow {

    0%,
    100% {
        opacity: 0.8;
        text-shadow: 0 0 4px rgba(212, 168, 75, 0.6);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(212, 168, 75, 1);
    }
}

.leonardo-bonus {
    font-size: 0.65rem;
    background: linear-gradient(135deg, #d4a84b, #b8922a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Color value styling based on target color */
.boss-status-value.color-value {
    font-weight: 600;
    text-transform: capitalize;
}

.boss-status-value.color-value.blue {
    color: #7fc4ff;
    text-shadow: 0 0 6px rgba(72, 120, 184, 0.6);
}

.boss-status-value.color-value.yellow {
    color: #ffd866;
    text-shadow: 0 0 6px rgba(230, 184, 50, 0.6);
}

/* Color effect row styling */
.boss-status-row.color-effect-blue {
    background: linear-gradient(90deg,
            rgba(72, 120, 184, 0.08) 0%,
            rgba(72, 120, 184, 0.15) 50%,
            rgba(72, 120, 184, 0.08) 100%);
    border-left: 2px solid rgba(72, 120, 184, 0.6);
}

.boss-status-row.color-effect-yellow {
    background: linear-gradient(90deg,
            rgba(230, 184, 50, 0.08) 0%,
            rgba(230, 184, 50, 0.15) 50%,
            rgba(230, 184, 50, 0.08) 100%);
    border-left: 2px solid rgba(230, 184, 50, 0.6);
}

/* === TIER UPGRADE ITEM EFFECT === */
.boss-tier-upgrade {
    filter: drop-shadow(0 0 6px rgba(212, 168, 75, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: tier-upgrade-glow 3s ease-in-out infinite;
}

.boss-tier-upgrade .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(212, 168, 75, 0.4);
}

/* Elegant star badge for tier upgrade */
.boss-tier-upgrade::before {
    content: '✦';
    position: absolute;
    top: calc(var(--badge-offset-top, 0px) - 8px);
    left: calc(var(--badge-offset-left, 0px) - 8px);
    font-size: 1rem;
    color: #d4a84b;
    z-index: 50;
    pointer-events: none;
    text-shadow:
        0 0 6px rgba(212, 168, 75, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.5);
    animation: tier-star-pulse 2s ease-in-out infinite;
}

@keyframes tier-upgrade-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(212, 168, 75, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(212, 168, 75, 0.7)) drop-shadow(0 0 15px rgba(212, 168, 75, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

@keyframes tier-star-pulse {

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

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

/* === COLOR CHANGE ITEM EFFECT === */
.boss-color-changed {
    filter: drop-shadow(0 0 5px rgba(150, 100, 255, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-color-changed .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.6s ease;
}

/* Diamond badge for color change */
.boss-color-changed::after {
    content: '✧';
    position: absolute;
    bottom: calc(var(--badge-offset-top, 0px) - 8px);
    left: calc(var(--badge-offset-left, 0px) - 8px);
    font-size: 1rem;
    z-index: 50;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: color-diamond-pulse 2.5s ease-in-out infinite;
}

/* Blue color change specific styling */
.boss-color-blue {
    filter: drop-shadow(0 0 6px rgba(72, 120, 184, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: color-blue-pulse 3s ease-in-out infinite;
}

.boss-color-blue::after {
    color: #7fc4ff;
    text-shadow:
        0 0 8px rgba(72, 120, 184, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

.boss-color-blue .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(72, 120, 184, 0.5);
}

@keyframes color-blue-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(72, 120, 184, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(72, 120, 184, 0.7)) drop-shadow(0 0 15px rgba(100, 160, 220, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

/* Yellow color change specific styling */
.boss-color-yellow {
    filter: drop-shadow(0 0 6px rgba(230, 184, 50, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: color-yellow-pulse 3s ease-in-out infinite;
}

.boss-color-yellow::after {
    color: #ffd866;
    text-shadow:
        0 0 8px rgba(230, 184, 50, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

.boss-color-yellow .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(230, 184, 50, 0.5);
}

@keyframes color-yellow-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(230, 184, 50, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(230, 184, 50, 0.7)) drop-shadow(0 0 15px rgba(255, 210, 100, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

@keyframes color-diamond-pulse {

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

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

/* ============================================
   GENGHIS KHAN MECHANICS - Warrior Conquest Theme
   Inspired by Mongolian warriors, red banners, and conquest
   ============================================ */

/* === KHAN TOOLTIP STYLING === */
.boss-status-row.khan-effect {
    background: linear-gradient(90deg,
            rgba(200, 60, 60, 0.04) 0%,
            rgba(200, 60, 60, 0.08) 50%,
            rgba(200, 60, 60, 0.04) 100%);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 2px -4px;
    border-left: 2px solid rgba(200, 80, 80, 0.4);
}

/* Tier penalty row - subtle warning */
.boss-status-row.khan-effect.tier-penalty {
    background: linear-gradient(90deg,
            rgba(180, 50, 50, 0.05) 0%,
            rgba(200, 60, 60, 0.1) 50%,
            rgba(180, 50, 50, 0.05) 100%);
    border-left-color: rgba(220, 80, 80, 0.5);
}

/* Red synergy row - subtle glow */
.boss-status-row.khan-effect.red-synergy {
    background: linear-gradient(90deg,
            rgba(220, 80, 60, 0.04) 0%,
            rgba(255, 100, 80, 0.08) 50%,
            rgba(220, 80, 60, 0.04) 100%);
    border-left-color: rgba(255, 100, 100, 0.5);
}

.khan-icon {
    font-size: 0.9rem;
    text-shadow: 0 0 4px rgba(200, 60, 60, 0.6);
}

/* === TIER PENALTY ITEM EFFECT === */
.boss-tier-penalty {
    filter: drop-shadow(0 0 4px rgba(200, 60, 60, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-tier-penalty .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(200, 60, 60, 0.4);
}

/* Warning icon for tier penalty */
.boss-tier-penalty::after {
    content: '⚔️';
    position: absolute;
    top: -6px;
    left: -6px;
    font-size: 0.75rem;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(200, 60, 60, 0.7));
    animation: tier-penalty-pulse 1.5s ease-in-out infinite;
}

@keyframes tier-penalty-pulse {

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

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

/* === RED SYNERGY ITEM EFFECT === */
.boss-red-synergy {
    filter: drop-shadow(0 0 5px rgba(220, 80, 60, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: red-synergy-glow 2.5s ease-in-out infinite;
}

.boss-red-synergy .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(220, 80, 60, 0.4);
}

@keyframes red-synergy-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgba(220, 80, 60, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(255, 100, 80, 0.6)) drop-shadow(0 0 12px rgba(220, 80, 60, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

/* ============================================
   JULIUS CAESAR VISUALS - Order vs Chaos
   ============================================ */

/* Global container modifiers */
/* We target #backpack-grid via the class or ID in JS */

/* Perfect Order (Exactly 4 types) - Golden/Regal */
#backpack-grid.caesar-perfect-order {
    box-shadow:
        0 0 0 2px rgba(212, 168, 75, 0.6),
        0 0 20px rgba(212, 168, 75, 0.4) !important;
    transition: box-shadow 0.3s ease;
}

#backpack-grid.caesar-perfect-order::before {
    content: 'PERFECT ORDER (x1.25)';
    position: absolute;
    bottom: -35px;
    /* Moved to bottom */
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(20, 15, 10, 0.9) 20%, rgba(20, 15, 10, 0.9) 80%, transparent);
    color: #ffd700;
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 20px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
    pointer-events: none;
    animation: order-text-pulse 2s infinite;
    z-index: 100;
    letter-spacing: 1px;
}

@keyframes order-text-pulse {

    0%,
    100% {
        opacity: 0.8;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

/* Uniformity Penalty (>50% same type) - Dull/Oppressive */
#backpack-grid.caesar-uniformity-penalty {
    box-shadow:
        0 0 0 2px rgba(180, 60, 60, 0.5),
        0 0 15px rgba(100, 20, 20, 0.4) !important;
    transition: box-shadow 0.3s ease;
}

#backpack-grid.caesar-uniformity-penalty::before {
    content: 'UNIFORMITY PENALTY (x0.8)';
    position: absolute;
    bottom: -35px;
    /* Moved to bottom */
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(20, 10, 10, 0.9) 20%, rgba(20, 10, 10, 0.9) 80%, transparent);
    color: #ff6b6b;
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 20px;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    letter-spacing: 0.5px;
}

/* Boot adjaceny bonus visual */
.boss-boot-bonus {
    filter: drop-shadow(0 0 4px rgba(205, 127, 50, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-boot-bonus .item-subcell-filled {
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.2),
        0 0 5px rgba(205, 127, 50, 0.4);
}

.boss-boot-bonus::after {
    content: '🥾';
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 0.8rem;
    filter: drop-shadow(0 0 2px black);
    z-index: 50;
    animation: boot-march 1s infinite alternate;
}

@keyframes boot-march {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-2px);
    }
}

/* ============================================
   EINSTEIN MECHANICS - Relativity Theme
   Golden/Yellow energy with dimensional warping
   ============================================ */

/* === CENTER CELL HIGHLIGHTING (Einstein) === */
.grid-cell.boss-center-cell {
    position: relative;
    overflow: visible;
}

/* Center cell glow effect - golden dimension warp */
.grid-cell.boss-center-cell::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(230, 184, 50, 0.7);
    border-radius: calc(var(--radius-md) + 2px);
    background: radial-gradient(circle at 50% 50%,
            rgba(230, 184, 50, 0.25) 0%,
            rgba(230, 184, 50, 0.15) 40%,
            rgba(230, 184, 50, 0.05) 70%,
            transparent 100%);
    box-shadow:
        inset 0 0 12px rgba(230, 184, 50, 0.35),
        0 0 10px rgba(230, 184, 50, 0.5),
        0 0 20px rgba(230, 184, 50, 0.3);
    animation: einstein-center-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Center cell tooltip */
.grid-cell.boss-center-cell::after {
    content: '🌟 Dimension Warp ×1.5';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(145deg, #2a2515 0%, #1a1810 100%);
    color: #ffd866;
    text-shadow: 0 0 6px rgba(230, 184, 50, 0.7);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-family: var(--font-body);
    white-space: nowrap;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(230, 184, 50, 0.6),
        0 0 15px rgba(230, 184, 50, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

/* Show tooltip on hover */
.grid-cell.boss-center-cell:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* Center row cells - tooltip appears below */
.grid-cell.boss-center-cell[data-row="1"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}

.grid-cell.boss-center-cell[data-row="1"]:hover::after {
    transform: translateX(-50%) translateY(2px);
}

@keyframes einstein-center-pulse {

    0%,
    100% {
        border-color: rgba(230, 184, 50, 0.5);
        box-shadow:
            inset 0 0 8px rgba(230, 184, 50, 0.2),
            0 0 8px rgba(230, 184, 50, 0.4),
            0 0 16px rgba(230, 184, 50, 0.2);
    }

    50% {
        border-color: rgba(230, 184, 50, 1);
        box-shadow:
            inset 0 0 20px rgba(230, 184, 50, 0.5),
            0 0 15px rgba(230, 184, 50, 0.8),
            0 0 30px rgba(230, 184, 50, 0.4);
    }
}

/* === EINSTEIN ITEM EFFECTS === */

/* Item in center - dimension warp bonus */
.boss-center-bonus {
    filter: drop-shadow(0 0 8px rgba(230, 184, 50, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: einstein-warp-glow 2s ease-in-out infinite;
}

.boss-center-bonus .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 1px 0 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(230, 184, 50, 0.5);
}

@keyframes einstein-warp-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(230, 184, 50, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(230, 184, 50, 0.8)) drop-shadow(0 0 20px rgba(230, 184, 50, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

/* Heavy item bonus (≥4 tiles) - purple/gravitational glow */
.boss-heavy-bonus {
    filter: drop-shadow(0 0 6px rgba(138, 100, 200, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-heavy-bonus .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(138, 100, 200, 0.4);
}

/* Mass indicator badge for heavy items */
.boss-heavy-bonus::after {
    content: '⚛️';
    position: absolute;
    top: calc(var(--badge-offset-top, 0px) - 6px);
    left: calc(var(--badge-offset-left, 0px) - 6px);
    font-size: 0.75rem;
    opacity: 0.9;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(138, 100, 200, 0.8));
}

/* Light item penalty (1-2 tiles) - subtle visual effect */
.boss-light-penalty {
    filter: drop-shadow(0 0 3px rgba(150, 150, 150, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.boss-light-penalty .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Light mass indicator */
.boss-light-penalty::after {
    content: '💨';
    position: absolute;
    top: calc(var(--badge-offset-top, 0px) - 4px);
    left: calc(var(--badge-offset-left, 0px) - 4px);
    font-size: 0.65rem;
    opacity: 0.7;
    z-index: 50;
    pointer-events: none;
}

/* Yellow brilliance effect - enhanced glow */
.boss-yellow-bonus {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: yellow-brilliance 1.5s ease-in-out infinite;
}

.boss-yellow-bonus .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 1px 0 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 12px rgba(255, 215, 0, 0.5);
}

@keyframes yellow-brilliance {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

/* === EINSTEIN TOOLTIP STYLING === */
.boss-status-row.einstein-effect {
    background: linear-gradient(90deg,
            rgba(230, 184, 50, 0.08) 0%,
            rgba(230, 184, 50, 0.18) 50%,
            rgba(230, 184, 50, 0.08) 100%);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 2px -4px;
    border-left: 2px solid rgba(230, 184, 50, 0.7);
    position: relative;
    overflow: hidden;
}

/* Golden shimmer effect */
.boss-status-row.einstein-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 235, 150, 0.15),
            transparent);
    animation: golden-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes golden-shimmer {
    0% {
        left: -100%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.einstein-icon {
    color: #ffd866;
    font-size: 0.95rem;
    text-shadow:
        0 0 8px rgba(230, 184, 50, 0.9),
        0 0 16px rgba(230, 184, 50, 0.5);
    animation: einstein-icon-pulse 1.5s ease-in-out infinite;
}

@keyframes einstein-icon-pulse {

    0%,
    100% {
        opacity: 0.85;
        text-shadow:
            0 0 6px rgba(230, 184, 50, 0.7),
            0 0 12px rgba(230, 184, 50, 0.3);
    }

    50% {
        opacity: 1;
        text-shadow:
            0 0 12px rgba(230, 184, 50, 1),
            0 0 20px rgba(230, 184, 50, 0.6);
    }
}

.einstein-value {
    color: #ffd866 !important;
    text-shadow:
        0 0 4px rgba(230, 184, 50, 0.6),
        0 0 8px rgba(230, 184, 50, 0.3);
    font-weight: 700;
}

/* Dimension Warp row - center bonus */
.boss-status-row.dimension-warp {
    border-left-color: rgba(255, 215, 100, 0.9);
    background: linear-gradient(90deg,
            rgba(255, 215, 100, 0.1) 0%,
            rgba(255, 215, 100, 0.2) 50%,
            rgba(255, 215, 100, 0.1) 100%);
}

/* Heavy mass row - gravitational bonus */
.boss-status-row.heavy-mass {
    border-left-color: rgba(138, 100, 200, 0.8);
    background: linear-gradient(90deg,
            rgba(138, 100, 200, 0.1) 0%,
            rgba(138, 100, 200, 0.18) 50%,
            rgba(138, 100, 200, 0.1) 100%);
}

/* Light mass row - penalty */
.boss-status-row.light-mass {
    border-left-color: rgba(150, 150, 150, 0.6);
    background: linear-gradient(90deg,
            rgba(150, 150, 150, 0.08) 0%,
            rgba(150, 150, 150, 0.12) 50%,
            rgba(150, 150, 150, 0.08) 100%);
}

.boss-status-row.light-mass .boss-status-label {
    color: rgba(180, 180, 180, 0.9);
}

/* Yellow brilliance row */
.boss-status-row.yellow-brilliance {
    border-left-color: rgba(255, 215, 0, 0.9);
    background: linear-gradient(90deg,
            rgba(255, 215, 0, 0.1) 0%,
            rgba(255, 215, 0, 0.2) 50%,
            rgba(255, 215, 0, 0.1) 100%);
}

/* === MONO-COLOR PENALTY (Global Effect) === */
#backpack-grid.einstein-mono-color-penalty {
    box-shadow:
        0 0 0 2px rgba(180, 60, 60, 0.5),
        0 0 15px rgba(100, 20, 20, 0.4) !important;
    transition: box-shadow 0.3s ease;
}

#backpack-grid.einstein-mono-color-penalty::before {
    content: '⚠️ RELATIVITY TAX (×0.7)';
    position: absolute;
    bottom: -35px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(20, 10, 10, 0.9) 20%, rgba(20, 10, 10, 0.9) 80%, transparent);
    color: #ff6b6b;
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 20px;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    letter-spacing: 0.5px;
}

/* ============================================
   SUN TZU MECHANICS - Strategic Warfare Theme
   Ancient ink/scroll aesthetic with tactical analysis
   ============================================ */

/* === GRID-LEVEL WARNINGS === */

/* Base Sun Tzu warning styling */
#backpack-grid.suntzu-penalty-active {
    position: relative;
    box-shadow:
        0 0 0 2px rgba(139, 90, 43, 0.5),
        0 0 20px rgba(139, 90, 43, 0.3) !important;
    transition: box-shadow 0.3s ease;
}

/* Rule A: Dominant Color Penalty */
#backpack-grid.suntzu-color-penalty::before {
    content: '🎯 DOMINANT COLOR (×0.7)';
    position: absolute;
    bottom: -35px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(30, 20, 10, 0.95) 15%, rgba(30, 20, 10, 0.95) 85%, transparent);
    color: #d4a84b;
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 24px;
    text-shadow: 0 0 8px rgba(212, 168, 75, 0.5);
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    letter-spacing: 0.5px;
    border: 1px solid rgba(139, 90, 43, 0.6);
    border-radius: 4px;
    animation: suntzu-warning-pulse 2s ease-in-out infinite;
}

/* Rule B: Dominant Type Penalty */
#backpack-grid.suntzu-type-penalty::before {
    content: '⚔️ DOMINANT TYPE (×0.7)';
    position: absolute;
    bottom: -35px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(30, 20, 10, 0.95) 15%, rgba(30, 20, 10, 0.95) 85%, transparent);
    color: #c4956a;
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 24px;
    text-shadow: 0 0 8px rgba(196, 149, 106, 0.5);
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    letter-spacing: 0.5px;
    border: 1px solid rgba(139, 90, 43, 0.6);
    border-radius: 4px;
    animation: suntzu-warning-pulse 2s ease-in-out infinite;
}

/* Rule C: Symmetry Penalty */
#backpack-grid.suntzu-symmetry-penalty::before {
    content: '🪞 SYMMETRY TRAP (×0.5 center)';
    position: absolute;
    bottom: -35px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(30, 20, 10, 0.95) 15%, rgba(30, 20, 10, 0.95) 85%, transparent);
    color: #a8c4d4;
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 24px;
    text-shadow: 0 0 8px rgba(168, 196, 212, 0.5);
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    letter-spacing: 0.5px;
    border: 1px solid rgba(139, 90, 43, 0.6);
    border-radius: 4px;
    animation: suntzu-warning-pulse 2s ease-in-out infinite;
}

/* Rule D: Low Tier Penalty */
#backpack-grid.suntzu-lowtier-penalty::before {
    content: '📜 WEAK ARSENAL (×0.9 global)';
    position: absolute;
    bottom: -35px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(30, 20, 10, 0.95) 15%, rgba(30, 20, 10, 0.95) 85%, transparent);
    color: #9a8a7a;
    font-family: var(--font-display, serif);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 24px;
    text-shadow: 0 0 8px rgba(154, 138, 122, 0.5);
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    letter-spacing: 0.5px;
    border: 1px solid rgba(139, 90, 43, 0.6);
    border-radius: 4px;
    animation: suntzu-warning-pulse 2s ease-in-out infinite;
}

@keyframes suntzu-warning-pulse {

    0%,
    100% {
        opacity: 0.9;
        text-shadow: 0 0 6px currentColor;
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 12px currentColor, 0 0 20px currentColor;
    }
}

/* === ITEM-LEVEL PENALTY EFFECTS === */

/* Color penalty item effect */
.boss-suntzu-color-penalty {
    filter: drop-shadow(0 0 6px rgba(212, 168, 75, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: suntzu-penalty-glow 2s ease-in-out infinite;
}

.boss-suntzu-color-penalty .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(212, 168, 75, 0.4);
}

/* Color penalty indicator badge */
.boss-suntzu-color-penalty::after {
    content: '🎯';
    position: absolute;
    top: calc(var(--badge-offset-top, 0px) - 8px);
    left: calc(var(--badge-offset-left, 0px) - 8px);
    font-size: 0.85rem;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(212, 168, 75, 0.8));
    animation: suntzu-badge-pulse 1.5s ease-in-out infinite;
}

/* Type penalty item effect */
.boss-suntzu-type-penalty {
    filter: drop-shadow(0 0 6px rgba(196, 149, 106, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: suntzu-penalty-glow 2s ease-in-out infinite;
}

.boss-suntzu-type-penalty .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(196, 149, 106, 0.4);
}

/* Type penalty indicator badge */
.boss-suntzu-type-penalty::after {
    content: '⚔️';
    position: absolute;
    top: calc(var(--badge-offset-top, 0px) - 8px);
    left: calc(var(--badge-offset-left, 0px) - 8px);
    font-size: 0.85rem;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(196, 149, 106, 0.8));
    animation: suntzu-badge-pulse 1.5s ease-in-out infinite;
}

/* Center item symmetry penalty */
.boss-suntzu-center-penalty {
    filter: drop-shadow(0 0 8px rgba(168, 196, 212, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: suntzu-center-pulse 1.5s ease-in-out infinite;
}

.boss-suntzu-center-penalty .item-subcell-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 12px rgba(168, 196, 212, 0.5);
}

/* Center item penalty indicator */
.boss-suntzu-center-penalty::after {
    content: '🪞';
    position: absolute;
    top: calc(var(--badge-offset-top, 0px) - 8px);
    left: calc(var(--badge-offset-left, 0px) - 8px);
    font-size: 0.9rem;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(168, 196, 212, 0.9));
    animation: suntzu-center-badge 2s ease-in-out infinite;
}

@keyframes suntzu-penalty-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgba(139, 90, 43, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(139, 90, 43, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

@keyframes suntzu-center-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(168, 196, 212, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(168, 196, 212, 0.8)) drop-shadow(0 0 20px rgba(168, 196, 212, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }
}

@keyframes suntzu-badge-pulse {

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

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

@keyframes suntzu-center-badge {

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

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

/* === SUN TZU TOOLTIP STYLING === */
.boss-status-row.suntzu-effect {
    background: linear-gradient(90deg,
            rgba(139, 90, 43, 0.08) 0%,
            rgba(139, 90, 43, 0.18) 50%,
            rgba(139, 90, 43, 0.08) 100%);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 2px -4px;
    border-left: 2px solid rgba(139, 90, 43, 0.7);
    position: relative;
    overflow: hidden;
}

/* Ancient scroll shimmer effect */
.boss-status-row.suntzu-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(212, 168, 75, 0.15),
            transparent);
    animation: suntzu-shimmer 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes suntzu-shimmer {
    0% {
        left: -100%;
    }

    40% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.suntzu-icon {
    color: #d4a84b;
    font-size: 0.95rem;
    text-shadow:
        0 0 6px rgba(212, 168, 75, 0.8),
        0 0 12px rgba(139, 90, 43, 0.4);
    animation: suntzu-icon-pulse 2s ease-in-out infinite;
}

@keyframes suntzu-icon-pulse {

    0%,
    100% {
        opacity: 0.85;
        text-shadow:
            0 0 4px rgba(212, 168, 75, 0.6),
            0 0 8px rgba(139, 90, 43, 0.3);
    }

    50% {
        opacity: 1;
        text-shadow:
            0 0 8px rgba(212, 168, 75, 0.9),
            0 0 16px rgba(139, 90, 43, 0.5);
    }
}

.suntzu-value {
    color: #d4a84b !important;
    text-shadow:
        0 0 4px rgba(212, 168, 75, 0.5),
        0 0 8px rgba(139, 90, 43, 0.3);
    font-weight: 700;
}

/* Color penalty row */
.boss-status-row.suntzu-color-penalty-row {
    border-left-color: rgba(212, 168, 75, 0.8);
    background: linear-gradient(90deg,
            rgba(212, 168, 75, 0.1) 0%,
            rgba(212, 168, 75, 0.2) 50%,
            rgba(212, 168, 75, 0.1) 100%);
}

/* Type penalty row */
.boss-status-row.suntzu-type-penalty-row {
    border-left-color: rgba(196, 149, 106, 0.8);
    background: linear-gradient(90deg,
            rgba(196, 149, 106, 0.1) 0%,
            rgba(196, 149, 106, 0.2) 50%,
            rgba(196, 149, 106, 0.1) 100%);
}

/* Symmetry penalty row */
.boss-status-row.suntzu-symmetry-penalty-row {
    border-left-color: rgba(168, 196, 212, 0.8);
    background: linear-gradient(90deg,
            rgba(168, 196, 212, 0.1) 0%,
            rgba(168, 196, 212, 0.2) 50%,
            rgba(168, 196, 212, 0.1) 100%);
}

/* Low tier penalty row */
.boss-status-row.suntzu-lowtier-penalty-row {
    border-left-color: rgba(154, 138, 122, 0.8);
    background: linear-gradient(90deg,
            rgba(154, 138, 122, 0.1) 0%,
            rgba(154, 138, 122, 0.2) 50%,
            rgba(154, 138, 122, 0.1) 100%);
}

.boss-status-row.suntzu-lowtier-penalty-row .boss-status-label {
    color: rgba(180, 165, 150, 0.9);
}