/* ============================================
   SLAY THE SPIRE CLONE - GRIMDARK THEME
   Dark, atmospheric, blood and shadow
   ============================================ */

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

:root {
    /* Grimdark palette */
    --bg-abyss: #0a0808;
    --bg-dark: #121010;
    --bg-shadow: #1a1515;
    --bg-blood: #2a1515;
    
    /* Blood and fire */
    --blood-dark: #4a1010;
    --blood-red: #8b0000;
    --blood-bright: #cc2020;
    --fire-orange: #b8460a;
    --ember-glow: #ff4500;
    
    /* Sickly accents */
    --poison-green: #2d4a2d;
    --toxic-bright: #4a7a4a;
    --bone-white: #c8c0b0;
    --parchment: #a89880;
    
    /* Metals */
    --iron-dark: #2a2a2a;
    --iron-mid: #404040;
    --iron-light: #606060;
    --gold-dark: #6a5020;
    --gold-bright: #c9a227;
    
    /* UI */
    --text-primary: #d0c8b8;
    --text-dim: #888078;
    --text-highlight: #fff0d0;
    
    /* Cards */
    --card-attack-bg: linear-gradient(135deg, #2a1010 0%, #1a0808 100%);
    --card-attack-border: #6a2020;
    --card-skill-bg: linear-gradient(135deg, #101a2a 0%, #080810 100%);
    --card-skill-border: #203060;
    --card-power-bg: linear-gradient(135deg, #1a102a 0%, #100818 100%);
    --card-power-border: #402060;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-abyss);
    font-family: 'Crimson Text', Georgia, serif;
    color: var(--text-primary);
}

/* Game Container with atmospheric background */
#game-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: 
        radial-gradient(ellipse at 50% 100%, rgba(139, 0, 0, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 20%, rgba(74, 16, 16, 0.15) 0%, transparent 40%),
        url('../assets/background.png') center center / cover no-repeat;
    background-color: var(--bg-abyss);
}

/* Atmospheric particles */
#game-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(1px 1px at 100px 50px, rgba(255,200,150,0.3) 1px, transparent 0),
        radial-gradient(1px 1px at 200px 150px, rgba(255,200,150,0.2) 1px, transparent 0),
        radial-gradient(2px 2px at 300px 250px, rgba(255,100,50,0.3) 1px, transparent 0),
        radial-gradient(1px 1px at 400px 100px, rgba(255,200,150,0.2) 1px, transparent 0),
        radial-gradient(1px 1px at 500px 300px, rgba(255,150,100,0.25) 1px, transparent 0);
    animation: float-particles 30s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes float-particles {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-20px) translateX(10px); }
}

/* ============================================
   SCREEN MANAGEMENT
   ============================================ */

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
}

.screen.active {
    display: flex;
}

/* ============================================
   VIGNETTE OVERLAY
   ============================================ */

#game-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   MAIN MENU
   ============================================ */

#screen-main-menu {
    justify-content: center;
    align-items: center;
    background: 
        radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}

#screen-main-menu .menu-content {
    text-align: center;
    padding: 70px 80px;
    background: 
        linear-gradient(180deg, 
            rgba(35,25,20,0.97) 0%, 
            rgba(20,15,12,0.98) 50%,
            rgba(15,10,8,0.99) 100%);
    border: 4px solid;
    border-color: #5a4030 #2a1810 #1a1008 #4a3020;
    border-radius: 12px;
    position: relative;
    box-shadow: 
        0 0 80px rgba(139, 0, 0, 0.4),
        0 0 40px rgba(0,0,0,0.8),
        0 25px 50px rgba(0,0,0,0.9),
        inset 0 1px 0 rgba(255,200,150,0.1),
        inset 0 0 100px rgba(0,0,0,0.5);
}

#screen-main-menu .menu-content::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 8px;
    pointer-events: none;
}

#screen-main-menu .menu-content::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--blood-red), var(--gold-dark), var(--blood-red), transparent);
    border-radius: 2px;
}

.game-title {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-highlight);
    text-shadow: 
        0 0 10px rgba(255, 69, 0, 0.5),
        0 0 30px rgba(139, 0, 0, 0.5),
        2px 2px 4px rgba(0,0,0,0.8);
    margin-bottom: 10px;
    letter-spacing: 4px;
}

.subtitle {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    color: var(--text-dim);
    font-style: italic;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.menu-btn {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    padding: 18px 55px;
    background: 
        linear-gradient(180deg, 
            rgba(80,70,60,1) 0%, 
            rgba(50,45,40,1) 45%, 
            rgba(35,30,25,1) 55%, 
            rgba(25,22,18,1) 100%);
    border: 3px solid;
    border-color: #6a5a4a #3a3028 #2a2420 #5a4a3a;
    border-radius: 6px;
    color: var(--bone-white);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 6px 20px rgba(0,0,0,0.7),
        0 2px 4px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

.menu-btn::before {
    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.4s ease;
}

.menu-btn:hover::before {
    left: 100%;
}

.menu-btn:hover:not(:disabled) {
    background: 
        linear-gradient(180deg, 
            rgba(120,30,30,1) 0%, 
            rgba(80,20,20,1) 45%, 
            rgba(60,15,15,1) 55%, 
            rgba(40,10,10,1) 100%);
    border-color: #a04040 #602020 #401515 #803030;
    color: var(--text-highlight);
    text-shadow: 0 0 10px rgba(255,200,150,0.5);
    box-shadow: 
        0 0 30px rgba(139, 0, 0, 0.6),
        0 8px 25px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,150,150,0.2);
    transform: translateY(-3px);
}

.menu-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.6),
        inset 0 2px 4px rgba(0,0,0,0.3);
}

.menu-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

/* ============================================
   COMBAT SCREEN
   ============================================ */

#combat-screen {
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

/* Enemy Area */
#enemies-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 30px;
    min-height: 250px;
}

.enemy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(180deg, rgba(30,20,20,0.9) 0%, rgba(15,10,10,0.95) 100%);
    border: 2px solid var(--blood-dark);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.5),
        inset 0 0 20px rgba(0,0,0,0.3);
    position: relative;
}

.enemy::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--blood-red), transparent, var(--blood-red));
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

.enemy:hover {
    transform: scale(1.05);
    border-color: var(--blood-bright);
    box-shadow: 
        0 0 40px rgba(139, 0, 0, 0.4),
        0 10px 30px rgba(0,0,0,0.5);
}

.enemy:hover::before {
    opacity: 1;
    animation: pulse-border 1s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.enemy-intent {
    font-size: 1.5rem;
    margin-bottom: 10px;
    padding: 5px 15px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    border: 1px solid var(--iron-dark);
}

.enemy-sprite {
    font-size: 80px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
    margin: 10px 0;
}

.enemy-name {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-highlight);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 5px 0;
}

.enemy-hp-bar {
    width: 120px;
    height: 18px;
    background: linear-gradient(180deg, #1a0808 0%, #0a0404 100%);
    border: 2px solid var(--blood-dark);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.enemy-hp-fill {
    height: 100%;
    background: linear-gradient(180deg, var(--blood-bright) 0%, var(--blood-red) 50%, var(--blood-dark) 100%);
    transition: width 0.4s ease;
    box-shadow: 0 0 10px var(--blood-red);
}

.enemy-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: bold;
    color: var(--text-highlight);
    text-shadow: 1px 1px 2px black, -1px -1px 2px black;
}

.enemy-block {
    margin-top: 8px;
    padding: 4px 12px;
    background: linear-gradient(180deg, #203050 0%, #102040 100%);
    border: 1px solid #304060;
    border-radius: 3px;
    color: #80b0ff;
    font-weight: bold;
}

/* Player Area */
#player-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 15px;
}

#player-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 25px;
    background: linear-gradient(180deg, rgba(20,15,15,0.9) 0%, rgba(10,8,8,0.95) 100%);
    border: 2px solid var(--iron-dark);
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

#player-health-bar {
    width: 150px;
    height: 24px;
    background: linear-gradient(180deg, #1a0808 0%, #0a0404 100%);
    border: 2px solid var(--blood-dark);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

#player-hp-fill {
    height: 100%;
    background: linear-gradient(180deg, #ff4040 0%, var(--blood-red) 50%, var(--blood-dark) 100%);
    width: 90%;
    transition: width 0.4s ease;
    box-shadow: 0 0 15px var(--blood-red);
}

#player-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: var(--text-highlight);
    text-shadow: 1px 1px 2px black, -1px -1px 2px black;
}

#player-block {
    font-size: 1.1rem;
    color: #80b0ff;
    text-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
}

/* Energy Orb */
#combat-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
}

.energy-orb {
    width: 80px;
    height: 80px;
    background: 
        radial-gradient(circle at 30% 30%, #ff6040 0%, transparent 50%),
        radial-gradient(circle at center, var(--blood-bright) 0%, var(--blood-red) 40%, var(--blood-dark) 70%, #0a0404 100%);
    border: 3px solid var(--gold-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-highlight);
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
    box-shadow: 
        0 0 30px rgba(139, 0, 0, 0.6),
        0 0 60px rgba(139, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 69, 0, 0.3);
    animation: energy-pulse 2s ease-in-out infinite;
}

@keyframes energy-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(139, 0, 0, 0.6), 0 0 60px rgba(139, 0, 0, 0.3); }
    50% { box-shadow: 0 0 40px rgba(139, 0, 0, 0.8), 0 0 80px rgba(139, 0, 0, 0.4); }
}

/* End Turn Button */
.combat-btn, #end-turn-btn {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 20px 40px;
    background: 
        linear-gradient(180deg, 
            #d4a520 0%, 
            #b8920a 30%, 
            #96750a 50%,
            #7a5a08 70%,
            #5a4008 100%);
    border: 4px solid;
    border-color: #e8c040 #8a6010 #5a4008 #c9a227;
    border-radius: 8px;
    color: #1a0800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.6),
        0 4px 8px rgba(0,0,0,0.4),
        inset 0 2px 0 rgba(255,255,255,0.25),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 0 20px rgba(201, 162, 39, 0.3);
}

.combat-btn::before, #end-turn-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.combat-btn:hover::before, #end-turn-btn:hover::before {
    left: 150%;
}

.combat-btn:hover, #end-turn-btn:hover {
    background: 
        linear-gradient(180deg, 
            #f0c030 0%, 
            #d4a520 30%, 
            #b8920a 50%,
            #96750a 70%,
            #7a5a08 100%);
    border-color: #ffe060 #b88020 #7a5a08 #e8c040;
    transform: translateY(-4px);
    box-shadow: 
        0 0 40px rgba(201, 162, 39, 0.7),
        0 12px 30px rgba(0,0,0,0.5),
        inset 0 2px 0 rgba(255,255,255,0.3);
}

.combat-btn:active, #end-turn-btn:active {
    transform: translateY(1px);
    box-shadow: 
        0 2px 10px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(0,0,0,0.2);
}

/* ============================================
   CARDS
   ============================================ */

#hand-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 10px;
    min-height: 220px;
    align-items: flex-end;
}

.card {
    display: flex;
    flex-direction: column;
    width: 140px;
    height: 195px;
    padding: 12px;
    background: linear-gradient(135deg, #1a1515 0%, #0a0808 100%);
    border: 3px solid var(--iron-mid);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 
        0 8px 20px rgba(0,0,0,0.6),
        inset 0 0 30px rgba(0,0,0,0.3);
}

.card::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 5px;
    pointer-events: none;
}

.card:hover {
    transform: translateY(-40px) scale(1.15);
    z-index: 100;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.8),
        0 0 30px rgba(255, 69, 0, 0.3);
}

.card.selected {
    transform: translateY(-50px) scale(1.2);
    z-index: 101;
    border-color: var(--gold-bright);
    box-shadow: 
        0 0 40px rgba(201, 162, 39, 0.6),
        0 20px 40px rgba(0,0,0,0.8);
}

.card.unplayable {
    opacity: 0.5;
    filter: grayscale(0.5);
    cursor: not-allowed;
}

.card.unplayable:hover {
    transform: none;
}

/* Attack cards */
.card-attack {
    background: var(--card-attack-bg);
    border-color: var(--card-attack-border);
}

.card-attack:hover {
    border-color: var(--blood-bright);
    box-shadow: 
        0 0 30px rgba(139, 0, 0, 0.5),
        0 20px 40px rgba(0,0,0,0.8);
}

/* Skill cards */
.card-skill {
    background: var(--card-skill-bg);
    border-color: var(--card-skill-border);
}

.card-skill:hover {
    border-color: #4080c0;
    box-shadow: 
        0 0 30px rgba(64, 128, 192, 0.4),
        0 20px 40px rgba(0,0,0,0.8);
}

/* Card elements */
.card-cost {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 36px;
    height: 36px;
    background: 
        radial-gradient(circle at 30% 30%, #ffd700 0%, transparent 60%),
        linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-dark) 100%);
    border: 2px solid #8a6a10;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 16px;
    color: #1a1000;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

.card-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-align: center;
    margin-top: 15px;
    font-size: 15px;
    color: var(--text-highlight);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.card-type {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin: 8px 0;
}

.card-description {
    font-family: 'Crimson Text', serif;
    font-size: 12px;
    text-align: center;
    color: var(--parchment);
    margin-top: auto;
    line-height: 1.4;
    font-style: italic;
}

/* ============================================
   DRAW/DISCARD PILES
   ============================================ */

#piles {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pile, #draw-pile, #discard-pile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(180deg, rgba(30,25,25,0.95) 0%, rgba(15,12,12,0.98) 100%);
    border: 2px solid var(--iron-dark);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.pile:hover, #draw-pile:hover, #discard-pile:hover {
    border-color: var(--iron-light);
    transform: scale(1.05);
}

.pile-icon {
    font-size: 24px;
}

#draw-count, #discard-count {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    color: var(--text-primary);
}

/* ============================================
   MODAL STYLES
   ============================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, rgba(25,20,20,0.98) 0%, rgba(12,10,10,0.99) 100%);
    border: 3px solid var(--blood-dark);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    box-shadow: 
        0 0 60px rgba(139, 0, 0, 0.4),
        0 20px 60px rgba(0,0,0,0.8);
}

/* ============================================
   VICTORY / DEFEAT SCREENS
   ============================================ */

#screen-game-over, #screen-victory {
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.9);
}

#screen-game-over h1 {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    color: var(--blood-red);
    text-shadow: 0 0 30px rgba(139, 0, 0, 0.8);
}

#screen-victory h1 {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    color: var(--gold-bright);
    text-shadow: 0 0 30px rgba(201, 162, 39, 0.8);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .card {
        width: 110px;
        height: 160px;
        padding: 8px;
    }
    
    .card-cost {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    
    .card-name {
        font-size: 12px;
    }
    
    .game-title {
        font-size: 2.5rem;
    }
    
    .enemy-sprite {
        font-size: 60px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px) rotate(-1deg); }
    40% { transform: translateX(10px) rotate(1deg); }
    60% { transform: translateX(-8px); }
    80% { transform: translateX(8px); }
}

@keyframes damage-flash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(2) sepia(1) saturate(3) hue-rotate(-20deg); }
}

.shake {
    animation: shake 0.4s ease;
}

.damage-flash {
    animation: damage-flash 0.2s ease;
}

/* Blood drip effect on screen transitions */
@keyframes blood-drip {
    0% { height: 0; }
    100% { height: 100%; }
}

.screen-transition::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--blood-red) 0%, transparent 100%);
    animation: blood-drip 0.5s ease-out;
}

/* ============================================
   GENERATED ART STYLES
   ============================================ */

/* Enemy sprite images */
.enemy-sprite {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.enemy-sprite img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
    border-radius: 8px;
}

/* Card art */
.card {
    height: 240px;
    overflow: hidden;
}

.card-art-container {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 4px;
    margin: 5px 0;
    background: rgba(0,0,0,0.3);
}

.card-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.1);
}

.card:hover .card-art {
    filter: saturate(1.2) contrast(1.15) brightness(1.1);
}

/* Intent styling */
.intent-attack {
    color: var(--blood-bright);
    text-shadow: 0 0 10px var(--blood-red);
}

.intent-buff {
    color: var(--gold-bright);
    text-shadow: 0 0 10px var(--gold-dark);
}

.intent-defend {
    color: #80b0ff;
    text-shadow: 0 0 10px #4060a0;
}