/* Duris Cards - Card Styles (all card-related CSS in one place) */
/* Cards */
.card {
    width: var(--card-width);
    height: var(--card-height);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%),
        linear-gradient(135deg, var(--bg-card) 0%, var(--bg-panel) 100%);
    border: var(--border-width) solid var(--border-bronze);
    border-radius: var(--radius-md);
    position: relative;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: var(--shadow-md),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}
/* Card inner frame */
.card::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(139,115,85,0.3);
    border-radius: var(--radius-sm);
    pointer-events: none;
    z-index: var(--z-card-inner);
}
.card:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: var(--z-card-hover);
    box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
}
.card.selected { border-color: var(--gold); box-shadow: 0 0 20px rgba(201,162,39,0.6), inset 0 0 15px rgba(201,162,39,0.1); }
.card.targetable { border-color: var(--health-red); box-shadow: 0 0 15px var(--health-red); }
.card.valid-target { border-color: var(--success); box-shadow: var(--shadow-glow-green); cursor: pointer; }
.hero.valid-target { border-color: var(--success); box-shadow: var(--shadow-glow-green); cursor: pointer; }
.card.has-taunt {
    overflow: visible !important;
    isolation: isolate;
}
.card.has-taunt::after {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: -8px !important;
    right: -8px !important;
    bottom: -10px !important;
    width: auto !important;
    height: auto !important;
    background: linear-gradient(180deg, rgba(154,154,154,0.45) 0%, rgba(106,106,106,0.45) 30%, rgba(74,74,74,0.45) 70%, rgba(58,58,58,0.45) 100%) !important;
    clip-path: polygon(
        50% 0%,
        90% 6%,
        100% 15%,
        100% 85%,
        90% 94%,
        50% 100%,
        10% 94%,
        0% 85%,
        0% 15%,
        10% 6%
    ) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    transform: none !important;
    border: none !important;
    box-shadow:
        0 2px 10px rgba(0,0,0,0.35),
        inset 0 2px 8px rgba(255,255,255,0.12),
        inset 0 -2px 8px rgba(0,0,0,0.2) !important;
}
.card.can-attack {
    border-color: var(--success);
    box-shadow: var(--shadow-glow-green);
    animation: readyPulse var(--animation-pulse) ease-in-out infinite;
}
@keyframes readyPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(76,175,80,0.4); }
    50% { box-shadow: 0 0 20px rgba(76,175,80,0.7); }
}
/* Divine Shield - golden bubble effect */
.card.has-divine-shield {
    box-shadow: 0 0 15px rgba(255,215,0,0.6), inset 0 0 20px rgba(255,215,0,0.2);
}
.card.has-divine-shield::before {
    background: linear-gradient(135deg, rgba(255,215,0,0.04) 0%, transparent 55%);
}
.card .divine-shield-bubble {
    position: absolute;
    inset: 6px;
    border-radius: 18px;
    border: none;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,215,0,0.18) 45%, rgba(255,215,0,0) 70%),
        radial-gradient(circle at 70% 75%, rgba(255,255,255,0.18), rgba(255,215,0,0.08) 40%, rgba(255,215,0,0) 65%);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.45), inset 0 0 8px rgba(255,255,255,0.2);
    pointer-events: none;
    z-index: 2;
}
.card .divine-shield-bubble::after {
    content: 'DIVINE';
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: 1px;
    color: #ffe08a;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    opacity: 0.9;
}
.card .durability {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #c7b9a2;
}
.card .durability-icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    position: relative;
}
.card .durability-icon::before {
    content: '🛡️';
    position: absolute;
    inset: 0;
    font-size: 12px;
    line-height: 12px;
}
.card .durability-icon::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: rgba(255, 120, 80, 0.9);
    top: 5px;
    left: -1px;
    transform: rotate(-35deg);
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(255, 120, 80, 0.8);
}
/* Stealth - semi-transparent, shadowy */
.card.has-stealth {
    opacity: 0.75;
    box-shadow: 0 0 15px rgba(100,100,150,0.5);
    border-color: #667;
}
/* Windfury - swirling wind effect */
.card.has-windfury {
    box-shadow: 0 0 12px rgba(100,200,255,0.5);
    border-color: #6cf;
}
/* Lifesteal - red/purple vampiric glow */
.card.has-lifesteal {
    box-shadow: 0 0 12px rgba(180,50,100,0.5);
    border-color: #a46;
}
/* Charge - green speed lines */
.card.has-charge {
    box-shadow: 0 0 12px rgba(50,200,50,0.5);
    border-color: #4c4;
}
/* Evasion - dodge shimmer */
.card.has-evasion {
    box-shadow: 0 0 10px rgba(200,200,255,0.4);
    border-color: #aaf;
}
/* Undying - purple death resist */
.card.has-undying {
    box-shadow: 0 0 12px rgba(150,50,200,0.5);
    border-color: #a4f;
}
/* Frozen - blue ice effect */
.card.is-frozen {
    filter: brightness(1.1) saturate(0.7);
    box-shadow: 0 0 15px rgba(100,200,255,0.7);
    border-color: #4cf !important;
}
.card.is-frozen::after {
    content: '❄️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    text-shadow: 0 0 10px rgba(100,200,255,0.8);
    z-index: 10;
    pointer-events: none;
}
/* Silenced - muted grey */
.card.is-silenced {
    filter: grayscale(60%);
    opacity: 0.85;
}
.card.is-silenced::after {
    content: '🔇';
    position: absolute;
    bottom: 30px;
    right: 5px;
    font-size: 16px;
    z-index: 10;
}
.card .status-badge {
    position: absolute;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 11px;
    background: rgba(15,15,18,0.85);
    border: 1px solid rgba(190,190,210,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 12;
}
.card .pos-top-left { top: 6px; left: 6px; }
.card .pos-top-center { top: 6px; left: 50%; transform: translateX(-50%); }
.card .pos-top-right { top: 6px; right: 6px; }
.card .pos-mid-left { top: 50%; left: 4px; transform: translateY(-50%); }
.card .pos-mid-right { top: 50%; right: 4px; transform: translateY(-50%); }
.card .pos-bottom-left { bottom: 6px; left: 6px; }
.card .pos-bottom-center { bottom: 6px; left: 50%; transform: translateX(-50%); }
.card .pos-bottom-right { bottom: 6px; right: 6px; }
.card .pos-mid-top { top: 34px; left: 50%; transform: translateX(-50%); }
.card .pos-mid-bottom { bottom: 34px; left: 50%; transform: translateX(-50%); }
.card .pos-mid-left-top { top: 30%; left: 6px; transform: translateY(-50%); }
.card.exhausted {
    opacity: 0.7;
    filter: grayscale(50%);
    border-color: #555 !important;
    box-shadow: none !important;
}
.card .exhausted-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    line-height: 1;
    background: rgba(10,10,12,0.7);
    border: 1px solid rgba(140,140,200,0.6);
    border-radius: 6px;
    padding: 2px 4px;
    text-shadow: 0 0 6px rgba(0,0,0,0.8), 0 0 10px rgba(120,120,220,0.6);
    z-index: 12;
    pointer-events: none;
    animation: sleepPulse 1.5s ease-in-out infinite;
}
@keyframes sleepPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
.card .mana-cost {
    position: absolute;
    top: -5px;
    left: -5px;
    width: var(--gem-size);
    height: var(--gem-size);
    background: linear-gradient(135deg, var(--mana-light) 0%, var(--mana-purple) 100%);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: #fff;
    border: var(--border-width) solid #d4a8ff;
    box-shadow: var(--shadow-sm), var(--shadow-glow-mana);
    z-index: 10;
}
.card .card-class-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    width: var(--gem-size-sm);
    height: var(--gem-size-sm);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    border: var(--border-width) solid var(--border-bronze);
    box-shadow: var(--shadow-sm);
    z-index: 18;
}
.class-skill-icon {
    position: relative;
    width: var(--gem-size-lg);
    height: var(--gem-size-lg);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    border: var(--border-width) solid var(--gold);
    box-shadow: var(--shadow-glow-gold);
    cursor: help;
}
.class-skill-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--gap-sm);
    background: var(--bg-dark);
    color: var(--text-light);
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    border: 1px solid var(--border-bronze);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
}
.card .card-name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    padding: var(--padding-xs);
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-light);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.card .card-tribe {
    font-size: 7px;
    text-align: center;
    background: rgba(80,60,40,0.8);
    color: var(--gold);
    padding: var(--padding-xs);
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
}
.card .stats {
    display: flex;
    justify-content: space-between;
    padding: var(--padding-xs) var(--padding-sm);
    background: transparent;
    border-top: none;
    position: relative;
    z-index: var(--z-card-stats);
}
.card .attack {
    font-family: var(--font-family-display);
    color: var(--gold);
    font-weight: var(--font-weight-bold);
    text-shadow: 0 0 5px rgba(201,162,39,0.5);
    font-size: 11px;
    position: relative;
    z-index: var(--z-card-stats);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(139,115,85,0.35);
    border-radius: 6px;
    padding: 1px 4px;
}
.card .health {
    font-family: var(--font-family-display);
    color: var(--health-red);
    font-weight: var(--font-weight-bold);
    text-shadow: var(--shadow-glow-health);
    font-size: 11px;
    position: relative;
    z-index: var(--z-card-stats);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(139,115,85,0.35);
    border-radius: 6px;
    padding: 1px 4px;
}
.card .keywords {
    font-family: var(--font-family-body);
    font-size: 8px;
    font-style: italic;
    color: var(--text-muted);
    padding: var(--padding-xs);
    text-align: center;
}
/* Keyword icons bar */
.card .keyword-icons {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 2px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid rgba(139,115,85,0.3);
}
.card .keyword-icon {
    font-size: 10px;
    cursor: help;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
    transition: transform 0.15s;
}
.card .keyword-icon:hover {
    transform: scale(1.3);
}
.card .card-text {
    font-family: var(--font-family-body);
    font-size: 7px;
    color: #fff;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    padding: var(--padding-xs);
    text-align: center;
    line-height: 1.1;
    max-height: 24px;
    overflow: hidden;
    margin: 1px 3px;
}
.card .card-short-desc {
    text-transform: none;
    font-weight: normal;
    font-style: italic;
    color: var(--text-muted);
    font-size: 6px;
    max-height: 20px;
}
.card.unowned {
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.6;
}
.card.unowned:hover {
    filter: grayscale(70%) brightness(0.7);
    opacity: 0.8;
}
.card .card-image {
    flex: 1 1 60px;
    min-height: 60px;
    max-height: 80px;
    width: calc(100% - 4px);
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-sm);
    margin: 2px;
    border: 1px solid rgba(255,255,255,0.2);
}
.card.hidden {
    background: linear-gradient(135deg, #5a3a3a 0%, #3a2a2a 100%);
}
.card.hidden .card-name { visibility: hidden; }
.card.hidden .stats { visibility: hidden; }

/* Rarity Gem Indicator */
.card .rarity-gem {
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 9;
    pointer-events: none;
}

/* Rarity Colors */
.card.rarity-Common { border-color: #6b6b6b; }
.card.rarity-Common .rarity-gem {
    background: linear-gradient(135deg, #888 0%, #555 100%);
    box-shadow: 0 0 4px rgba(136,136,136,0.3);
}
.card.rarity-Rare {
    border-color: #4169e1;
    box-shadow: 0 0 8px rgba(65,105,225,0.3), inset 0 0 20px rgba(65,105,225,0.1);
}
.card.rarity-Rare .rarity-gem {
    background: linear-gradient(135deg, #6189ff 0%, #4169e1 100%);
    box-shadow: 0 0 8px rgba(65,105,225,0.6);
}
.card.rarity-Epic {
    border-color: #9932cc;
    box-shadow: 0 0 12px rgba(153,50,204,0.4), inset 0 0 20px rgba(153,50,204,0.1);
}
.card.rarity-Epic .rarity-gem {
    background: linear-gradient(135deg, #b952ec 0%, #9932cc 100%);
    box-shadow: 0 0 10px rgba(153,50,204,0.7);
}
.card.rarity-Legendary {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(201,162,39,0.5), inset 0 0 25px rgba(201,162,39,0.1);
    animation: legendaryGlow 3s ease-in-out infinite;
}
@keyframes legendaryGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(201,162,39,0.5); }
    50% { box-shadow: 0 0 25px rgba(201,162,39,0.8), 0 0 40px rgba(201,162,39,0.3); }
}
.card.rarity-Legendary .rarity-gem {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    box-shadow: 0 0 12px rgba(201,162,39,0.8);
    animation: gemPulse 2s ease-in-out infinite;
}
@keyframes gemPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(201,162,39,0.6); }
    50% { box-shadow: 0 0 15px rgba(201,162,39,1), 0 0 25px rgba(201,162,39,0.4); }
}

/* Card Type Frames */
.card.type-Spell {
    background: linear-gradient(135deg, #2a2a4a 0%, #1a1a3a 100%);
    box-shadow: inset 0 0 20px rgba(107,63,160,0.4);
}
.card.type-Weapon {
    background: linear-gradient(135deg, #4a3030 0%, #3a2020 100%);
    box-shadow: inset 0 0 20px rgba(139,26,26,0.4);
}
.card.type-Minion {
    background: linear-gradient(135deg, #3a5a3a 0%, #2a4a2a 100%);
    box-shadow: inset 0 0 20px rgba(100, 200, 100, 0.2);
}

/* Type Banner - Top ribbon showing card type */
.card .type-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-family-display);
    font-size: 7px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 0;
    z-index: 2;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.card.type-Minion .type-banner {
    background: linear-gradient(180deg, rgba(45,90,45,0.95) 0%, rgba(35,70,35,0.9) 100%);
    color: #c0ffc0;
    text-shadow: 0 0 8px rgba(100,200,100,0.8);
    border-bottom: 1px solid rgba(100,200,100,0.5);
}
.card.type-Spell .type-banner {
    background: linear-gradient(180deg, rgba(107,63,160,0.95) 0%, rgba(80,45,130,0.9) 100%);
    color: #e0c0ff;
    text-shadow: 0 0 8px rgba(180,130,255,0.8);
    border-bottom: 1px solid rgba(180,130,255,0.5);
}
.card.type-Weapon .type-banner {
    background: linear-gradient(180deg, rgba(160,50,50,0.95) 0%, rgba(130,35,35,0.9) 100%);
    color: #ffcccc;
    text-shadow: 0 0 8px rgba(255,100,100,0.8);
    border-bottom: 1px solid rgba(255,100,100,0.5);
}