/* e:\WebGame\Gate of Hell\style.css */
body {
    margin: 0;
    background-color: #111;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Malgun Gothic', sans-serif;
    overflow: hidden;
}

/* 게임 전체 컨테이너 (16:9 비율) */
#game-container {
    position: relative;
    width: 360px; /* 모바일 9:16 비율 */
    height: 640px;
    background: radial-gradient(circle at center, #2a0505, #000000); /* 어두운 붉은 동굴 배경 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 메인 게임 영역 (좌/우 슬롯, 중앙 길) */
#game-layout {
    height: 70%;
    display: flex;
    width: 100%;
    position: relative;
    border-bottom: 3px solid #4a0000;
}

/* 좌우 카드 배치 구역 */
.slot-area {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 2px;
    padding: 2px;
    z-index: 5;
}

/* 중앙 길 */
#road {
    width: 150px;
    background: linear-gradient(90deg, #8b0000 0%, #1a1a1a 15%, #1a1a1a 85%, #8b0000 100%); /* 용암 테두리와 돌길 */
    box-shadow: inset 0 0 20px #ff4500;
    position: relative;
    display: flex;
    justify-content: center;
}

/* 개별 타일 (셀) */
.card-slot {
    position: relative; /* 전직 버튼 위치 기준 */
    box-sizing: border-box;
    border: 1px solid rgba(0, 255, 255, 0.6); /* 푸른색 네온 테두리 */
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.1);
    background-color: rgba(0, 20, 40, 0.6);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* 마우스를 올렸을 때 타일 효과 */
.card-slot:hover {
    background-color: rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

/* 퇴마사가 배치된 타일 */
.card-slot.occupied {
    border: 2px solid #ffd700;
    box-shadow: 0 0 10px #ffd700;
}

/* 포탈 (적 소멸 지점) */
#portal {
    position: absolute;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #d000ff, #4b0082, transparent);
    box-shadow: 0 0 30px #9400d3;
    border: 2px solid #fff;
    animation: portalPulse 2s infinite alternate;
    z-index: 1;
    left: 50%;
    margin-left: -30px; /* 너비의 절반만큼 이동하여 중앙 정렬 */
}

@keyframes portalPulse {
    from { transform: scale(1); box-shadow: 0 0 20px #9400d3; }
    to { transform: scale(1.1); box-shadow: 0 0 40px #9400d3, 0 0 10px white; }
}

/* 스테이지 정보 (길 위쪽 표시) */
#stage-info {
    position: absolute;
    top: 10px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 4px #000000;
    z-index: 20;
    pointer-events: none;
}

/* 시작 타이머 */
#start-timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    font-weight: bold;
    color: #ff0000;
    text-shadow: 0 0 10px #fff;
    z-index: 100;
    display: none;
    pointer-events: none;
}

/* 적 유령 */
.enemy {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto; /* Changed from none to make clickable */
    cursor: help;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: serif;
    /* Text outline for the emoji */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    border-radius: 50%; /* For the halo effect */
}

/* 유령 체력바 */
.hp-bar-bg {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #000;
    border-radius: 2px;
    pointer-events: none;
}

.hp-bar-fill {
    width: 100%;
    height: 100%;
    background: #ff4500;
    border-radius: 1px;
    transition: width 0.2s ease;
}

.enemy.boss .hp-bar-bg {
    width: 40px;
    height: 5px;
    top: -15px;
}

/* 유령별 후광(Halo) 및 스타일 */
.enemy.normal { font-size: 16px; box-shadow: 0 0 12px rgba(255, 85, 85, 0.8); }
.enemy.tank { font-size: 22px; box-shadow: 0 0 15px rgba(138, 43, 226, 0.8); }
.enemy.runner { font-size: 14px; box-shadow: 0 0 10px rgba(255, 170, 0, 0.8); }
.enemy.greedy { font-size: 18px; box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
.enemy.dimension { font-size: 16px; box-shadow: 0 0 12px rgba(0, 255, 255, 0.8); }
.enemy.deceiver { font-size: 16px; box-shadow: 0 0 12px rgba(255, 0, 255, 0.8); }
.enemy.boar { font-size: 20px; box-shadow: 0 0 12px rgba(139, 69, 19, 0.8); }
.enemy.frost { font-size: 22px; box-shadow: 0 0 15px rgba(173, 216, 230, 0.8); }
.enemy.lightspeed { font-size: 14px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.9); }
.enemy.heavy { font-size: 24px; box-shadow: 0 0 15px rgba(85, 85, 85, 0.8); }
.enemy.lava { font-size: 18px; box-shadow: 0 0 15px rgba(255, 69, 0, 0.8); }
.enemy.burning { font-size: 20px; box-shadow: 0 0 15px rgba(255, 0, 0, 0.8); }
.enemy.gold { font-size: 18px; box-shadow: 0 0 20px rgba(255, 215, 0, 1); }

/* --- 보스(Boss) 스타일 --- */
.enemy.boss {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.enemy.cerberus { font-size: 60px; box-shadow: 0 0 30px rgba(255, 0, 0, 0.8); }
.enemy.charon { font-size: 50px; box-shadow: 0 0 30px rgba(0, 255, 255, 0.6); }
.enemy.beelzebub { font-size: 55px; box-shadow: 0 0 30px rgba(0, 255, 0, 0.7); }
.enemy.lucifer { font-size: 70px; box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }

/* 물살 효과 */
.enemy.charon::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(0,255,255,0.3) 0%, transparent 70%);
    animation: ripple 1s infinite;
    z-index: -1;
}

@keyframes ripple {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* 탑승한 유령 (무적) */
.enemy.boarded {
    opacity: 0.6;
    box-shadow: 0 0 5px #00ffff;
    z-index: 20; /* 배 위에 표시 */
}

/* 바알세불 (Lv.30 보스) */
.enemy.beelzebub {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, #006400, #000000); /* 짙은 녹색 */
    box-shadow: 0 0 20px #00ff00;
    border: 2px solid #556b2f;
    z-index: 16;
}

/* 파리 떼 효과 */
.enemy.beelzebub::after {
    content: '🪰';
    font-size: 24px;
    position: absolute;
    top: -20px;
    left: 10px;
    animation: flySwarm 1s infinite linear;
}

@keyframes flySwarm {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5px, -5px) rotate(10deg); }
    50% { transform: translate(0, -10px) rotate(0deg); }
    75% { transform: translate(-5px, -5px) rotate(-10deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* 상태이상: 공포 (공격 불가) */
.unit.feared {
    filter: grayscale(100%) blur(1px);
    animation: shake 0.5s infinite;
    border: 2px solid #555 !important;
}

/* Thematic Header (Top Center) */
#thematic-header {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    z-index: 100;
    pointer-events: none;
}

#stage-count {
    font-size: 14px;
    font-weight: bold;
    color: #ff4500;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.8), 0 0 2px #000;
    letter-spacing: 2px;
    animation: textBreathing 3s infinite alternate ease-in-out;
}

@keyframes textBreathing {
    from { opacity: 0.8; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); text-shadow: 0 0 15px rgba(255, 69, 0, 1), 0 0 5px #fff; }
}

#enemy-counter {
    font-size: 11px;
    color: #00e5ff;
    margin-top: 2px;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5), 0 0 2px #000;
    font-style: italic;
}

/* Dual Gauges (Bottom Panel) */
#gauges-container {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
    padding: 0 5px;
    box-sizing: border-box;
}

.gauge-half {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gauge-header {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    margin-bottom: 1px;
    font-weight: bold;
    text-transform: uppercase;
}

.gauge-header span:first-child { color: #aaa; }
.gauge-half:first-child .gauge-header span:last-child { 
    color: #00e5ff; 
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
} /* SE neon color */
.gauge-half:last-child .gauge-header span:last-child { color: #ff4500; } /* Shards color */

.gauge-bar-bg {
    width: 100%;
    height: 5px;
    background-color: #111;
    border: 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 3px #000;
}

#se-gauge-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #008ba3, #00e5ff);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
    transition: width 0.3s ease;
}

#shard-gauge-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #4a0000, #ff0000);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
    transition: width 0.3s ease;
}

#active-debuffs {
    font-size: 7px;
    color: #777;
    margin-bottom: 4px;
    text-align: center;
    font-style: italic;
}

/* Redesign Unit Info Buttons */
.job-btn {
    display: inline-block;
    padding: 2px 8px;
    font-size: 9px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.2s;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-btn.active {
    background: linear-gradient(to bottom, #4CAF50, #2E7D32);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.job-btn.active:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

#info-sell-btn {
    background: linear-gradient(to bottom, #ef5350, #b71c1c) !important;
}

#info-abyss-btn {
    padding: 4px 12px;
    border-radius: 15px;
    margin-top: 5px;
}

/* Master buttons size fix */
.master-btn-container {
    margin-top: 6px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.master-btn-container .job-btn {
    flex: 1;
    margin: 0 2px;
    padding: 3px 1px;
    font-size: 8px;
    line-height: 1.1;
}

/* Unit Info Panel refinements */
#unit-info {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid #222;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 9px;
    color: #eee;
    text-align: center;
    flex: 1;
    overflow-y: auto;
    box-shadow: inset 0 0 15px #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#unit-info::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Remove old status bar */
#status-bar { display: none; }
#shard-info { display: none; }

#control-panel {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

#bottom-main-ui {
    display: flex;
    flex: 1;
    width: 100%;
    gap: 10px;
    overflow: hidden;
}

/* 퇴마사 카드 (드래그 앤 드롭 소스) */
.tower-card {
    pointer-events: auto; 
    width: 55px;
    height: 70px;
    background: linear-gradient(135deg, #003366, #001133);
    border: 2px solid #00e5ff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer; 
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
    color: #00e5ff;
    font-size: 10px;
    user-select: none;
    z-index: 100;
    flex-shrink: 0; 
}

.tower-card.locked {
    filter: grayscale(100%);
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #555;
    box-shadow: none;
}

/* Abyss Classes (Tier 4) */
.unit.abyss {
    box-shadow: 0 0 30px #9400d3;
    animation: abyssPulse 2s infinite alternate;
}

@keyframes abyssPulse {
    from { box-shadow: 0 0 15px #4b0082; transform: scale(1); }
    to { box-shadow: 0 0 30px #9400d3, 0 0 10px #fff; transform: scale(1.05); }
}

.unit.warden { background-color: #2a0052; border: 2px solid #8a2be2; }
.unit.cursed_talisman { background-color: #3b0000; border: 2px solid #ff4500; }
.unit.asura { background-color: #520000; border: 2px solid #b22222; }
.unit.piercing_shadow { background-color: #002200; border: 2px solid #32cd32; }
.unit.cocytus { background-color: #001a33; border: 2px solid #00ffff; }
.unit.purgatory { background-color: #4a0a0a; border: 2px solid #ff8c00; }
.unit.reaper { background-color: #000000; border: 2px dotted #4b0082; }
.unit.doom_guide { background-color: #1a0033; border: 2px dashed #9932cc; }
.unit.forsaken_king { background-color: #111111; border: 2px double #00ff00; }
.unit.void_gatekeeper { background-color: #222222; border: 2px solid #aaaaaa; }

/* Friendly Ghost */
.friendly-ghost {
    position: absolute;
    width: 20px; height: 20px;
    background: radial-gradient(circle, #8a2be2, #4b0082);
    border-radius: 50%;
    box-shadow: 0 0 10px #8a2be2;
    z-index: 11;
    opacity: 0.8;
}

/* 배치된 유닛 (시각적 표현) */
.unit {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    z-index: 15;
    font-size: 18px;
    /* Text outline for the icon */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.unit:active {
    cursor: grabbing;
}

/* 유닛 클래스별 후광(Halo) 스타일 */
.unit.apprentice { box-shadow: 0 0 10px #00e5ff; font-size: 16px; }
.unit.chainer { box-shadow: 0 0 10px #9370db; }
.unit.talisman { box-shadow: 0 0 10px #ffa500; }
.unit.monk { box-shadow: 0 0 10px #a52a2a; }
.unit.archer { box-shadow: 0 0 10px #228b22; }
.unit.ice { box-shadow: 0 0 10px #00ffff; }
.unit.fire { box-shadow: 0 0 10px #ff4500; }
.unit.assassin { box-shadow: 0 0 10px #333; }
.unit.tracker { box-shadow: 0 0 10px #ffffff; }
.unit.necromancer { box-shadow: 0 0 10px #4b0082; }
.unit.guardian { box-shadow: 0 0 15px #ffd700; }

/* Master classes */
.unit.executor { box-shadow: 0 0 15px #483d8b; border: 1px solid #fff; }
.unit.binder { box-shadow: 0 0 15px #8b008b; border: 1px solid #fff; }
.unit.grandsealer { box-shadow: 0 0 15px #191970; border: 1px solid #fff; }
.unit.flamemaster { box-shadow: 0 0 15px #ff4500; border: 1px solid #fff; }
.unit.vajra { box-shadow: 0 0 15px #ffd700; border: 1px solid #fff; }
.unit.saint { box-shadow: 0 0 15px #cd853f; border: 1px solid #fff; }
.unit.voidsniper { box-shadow: 0 0 15px #00ff00; border: 1px solid #fff; }
.unit.thousandhand { box-shadow: 0 0 15px #ffd700; border: 1px solid #fff; }
.unit.absolutezero { box-shadow: 0 0 15px #00ffff; border: 1px solid #fff; }
.unit.permafrost { box-shadow: 0 0 15px #87ceeb; border: 1px solid #fff; }
.unit.hellfire { box-shadow: 0 0 15px #ff4500; border: 1px solid #fff; }
.unit.phoenix { box-shadow: 0 0 15px #ffd700; border: 1px solid #fff; }
.unit.abyssal { box-shadow: 0 0 15px #800080; border: 1px solid #fff; }
.unit.spatial { box-shadow: 0 0 15px #c0c0c0; border: 1px solid #fff; }
.unit.seer { box-shadow: 0 0 15px #e6e6fa; border: 1px solid #fff; }
.unit.commander { box-shadow: 0 0 15px #ffd700; border: 1px solid #fff; }
.unit.wraithlord { box-shadow: 0 0 15px #00ff00; border: 1px solid #fff; }
.unit.cursedshaman { box-shadow: 0 0 15px #708090; border: 1px solid #fff; }
.unit.rampart { box-shadow: 0 0 15px #ffd700; border: 1px solid #fff; }
.unit.judgment { box-shadow: 0 0 15px #ff4500; border: 1px solid #fff; }

/* Abyss classes */
.unit.abyss { border: 2px solid #9400d3; }
.unit.warden { box-shadow: 0 0 20px #8a2be2; }
.unit.cursed_talisman { box-shadow: 0 0 20px #ff4500; }
.unit.asura { box-shadow: 0 0 20px #b22222; }
.unit.piercing_shadow { box-shadow: 0 0 20px #32cd32; }
.unit.cocytus { box-shadow: 0 0 20px #00ffff; }
.unit.purgatory { box-shadow: 0 0 20px #ff8c00; }
.unit.reaper { box-shadow: 0 0 20px #4b0082; }
.unit.doom_guide { box-shadow: 0 0 20px #9932cc; }
.unit.forsaken_king { box-shadow: 0 0 20px #00ff00; }
.unit.void_gatekeeper { box-shadow: 0 0 20px #aaaaaa; }

/* 하단 UI 패널 (30%) */
#bottom-panel {
    position: relative; 
    height: 30%;
    background: linear-gradient(to bottom, #1a0505, #000000);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 50;
}

/* Exorcism Records Overlay */
#records-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#records-content {
    width: 90%;
    height: 80%;
    background: #111;
    border: 2px solid #ffd700;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Exorcism Records Overlay */
#records-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#records-content {
    width: 90%;
    height: 80%;
    background: #111;
    border: 2px solid #ffd700;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#records-header {
    padding: 10px;
    background: #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

#records-header h2 { margin: 0; color: #ffd700; font-size: 18px; }

#close-records {
    background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
}

#records-tabs {
    display: flex;
    background: #1a1a1a;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: #ffd700;
    border-bottom: 2px solid #ffd700;
    background: rgba(255, 215, 0, 0.1);
}

#tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.tab-pane { display: none !important; }
.tab-pane.active { display: block !important; }

/* Bestiary Styles - Card Grid */
#bestiary-tab.active {
    display: grid !important;
}

#tree-tab.active {
    display: block !important;
}

#bestiary-tab {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding-top: 60px; /* Increased space for top-row tooltips */
}

.tree-main-container {
    padding-top: 60px; /* Increased space for top-row tooltips */
}

.bestiary-item {
    position: relative; /* For tooltip positioning */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(145deg, rgba(40, 40, 40, 0.8), rgba(20, 20, 20, 0.9));
    padding: 12px 8px;
    border-radius: 8px;
    border: 1px solid #333;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}

/* Custom Speech Bubble Tooltip */
.custom-tooltip {
    visibility: hidden;
    width: 150px;
    background-color: rgba(15, 15, 15, 0.95);
    color: #eee;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1000;
    bottom: 115%; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    border: 1px solid #ffd700;
    font-size: 9px;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.2);
}

.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ffd700 transparent transparent transparent;
}

/* Specter-specific tooltip colors */
.custom-tooltip.specter {
    color: #00e5ff;
    border-color: #00e5ff;
}
.custom-tooltip.specter::after {
    border-color: #00e5ff transparent transparent transparent;
}

.bestiary-item:hover .custom-tooltip,
.unit-node:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}

.bestiary-item:hover {
    transform: translateY(-2px);
    border-color: #00e5ff;
}

.bestiary-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.bestiary-info {
    width: 100%;
}

.bestiary-name {
    font-weight: bold;
    color: #ffd700;
    font-size: 10px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.1;
    height: 2.2em;
}

.bestiary-stats {
    font-size: 9px;
    color: #00e5ff;
    margin-bottom: 4px;
}

.bestiary-bonus {
    font-size: 8px;
    color: #4CAF50;
    font-weight: bold;
    line-height: 1.1;
    min-height: 18px;
}

/* Promotion Tree Styles */
.tree-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tree-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.unit-node {
    padding: 5px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #222;
    font-size: 10px;
    text-align: center;
    min-width: 80px;
    cursor: help;
}

.unit-node.locked {
    filter: grayscale(100%);
    opacity: 0.3;
    background: #000;
    border-color: #333;
    color: #444;
}

.unit-node.locked .custom-tooltip {
    display: none !important;
}

.unit-node.tier1 { border-color: #00e5ff; }
.unit-node.tier2 { border-color: #9370db; }
.unit-node.tier3 { border-color: #ffd700; }
.unit-node.tier4 { border-color: #9400d3; }

/* 상태이상 효과 */
.enemy.slowed { filter: hue-rotate(90deg); }
.enemy.burning { filter: sepia(1) saturate(5) hue-rotate(-50deg); }
.enemy.stunned { filter: grayscale(100%) brightness(1.5); animation: shake 0.2s infinite; }
.enemy.cursed { filter: sepia(1) hue-rotate(250deg) saturate(3); border: 1px dashed #800080; }

@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}