/* style.css - 게임의 전반적인 스타일을 담당합니다. */

/* 모든 요소의 box-sizing을 border-box로 설정하여 레이아웃 계산을 직관적으로 만듭니다. */
/* 이를 통해 padding과 border가 width/height에 포함되어 계산되므로, 100% 너비 요소가 화면을 벗어나는 문제를 방지합니다. */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Press Start 2P', cursive;
    background-color: #1a1a1a;
    color: #e0e0e0;
    text-align: center;
    font-size: 14px;
    margin: 0;
    overflow-x: hidden; /* 모바일에서 의도치 않은 가로 스크롤 방지 */
}

h1 {
    color: #ffc107;
    text-shadow: 3px 3px 0px #9c27b0;
    font-size: 2.5em;
    margin-bottom: 30px;
}

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    padding-bottom: 80px; /* 하단 내비게이션 바 공간 확보 */
}

.panel-zone {
    background-color: #2a2a2a;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 5px rgba(0,0,0,0.3);
}

#hunting-ground, #battle-log-container {
    width: 100%;
    max-width: 900px;
}

.zone-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: -10px; /* 아래 p 태그와의 간격 조정 */
}

#music-toggle-button {
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: 1px solid #888;
}

#music-toggle-button:hover {
    background: #444;
    box-shadow: 0 0 10px #ffc107;
}

#battle-display {
    font-size: 60px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    position: relative; /* VFX를 위한 기준점 */
}
#sword-area {
    position: relative;
    width: 100px;
    height: 120px; /* 칼과 텍스트 영역을 포함할 높이 */
}

#sword-container {
    width: 100px;
    height: 100px;
    transition: transform 0.1s ease-in-out, animation-duration 0.2s linear;
    position: absolute; /* sword-area 내에서 위치 조정 */
    top: 20px;
    left: 30px;
    z-index: 2; /* VFX 컨테이너보다 위에 있도록 설정 */
}

/* 대장장이 숫돌 오라 효과 */
#whetstone-aura {
    position: absolute;
    top: 65px; /* 칼의 중앙에 위치하도록 조정 */
    left: 75px;
    width: 120px; /* 칼보다 약간 크게 */
    height: 120px;
    background-image: radial-gradient(circle, rgba(255, 193, 7, 0.7) 20%, rgba(255, 87, 34, 0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0); /* 기본적으로 작게 숨김 */
    opacity: 0;
    z-index: 1; /* 칼보다 뒤에 위치 */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#whetstone-aura.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    animation: whetstone-burn 1s infinite;
}


#loot-text-container {
    position: absolute;
    top: 0%; /* 칼 컨테이너 바로 아래에 위치 */
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 클릭 방해 방지 */
    z-index: 3; /* 칼 위에 표시 */
}

#monster-container {
    width: 100px;
    height: 100px;
    transition: transform 0.1s ease-in-out, animation-duration 0.2s linear;
    position: relative; /* z-index 적용을 위해 position 속성 필요 */
    z-index: 3; /* 몬스터가 가장 앞에 보이도록 설정 */
}

#monster-wrapper {
    position: relative;
    width: 100px; /* monster-container와 동일한 너비 */
    height: 100px; /* monster-container와 동일한 높이 */
}

#damage-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 클릭 방해 방지 */
    z-index: 2; /* 데미지 텍스트는 몬스터보다 뒤, VFX보다는 앞에 위치 */
}

.icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 10px;
    vertical-align: -0.2em;
}

.icon svg {
    width: 100%;
    height: 100%;
}

#battle-log {
    height: 220px;
    overflow-y: auto;
    background-color: #1f1f1f;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 15px;
    text-align: left;
    font-size: 12px;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#battle-log p {
    margin: 0 0 8px 0;
    color: #ccc;
    animation: fade-in 0.3s ease-out;
    line-height: 1.4;
}

/* 상태창의 파편 카운트가 깜빡이는 현상 방지 */
#soul-shards-count {
    display: inline-block;
    min-width: 80px; /* 충분한 최소 너비 확보 */
    text-align: left;
}

.monster-hp-bar-container {
    width: 100px;
    height: 10px;
    background-color: #111;
    border: 1px solid #888;
    border-radius: 5px;
    margin: 0 auto 5px auto;
}

.monster-hp-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #28a745, #8fbc8f);
    border-radius: 4px;
    transition: width 0.2s ease-out;
}

.monster-death-animation {
    animation: monster-death 0.3s ease-out forwards;
}

.monster-spawn-animation {
    animation: monster-spawn 0.3s ease-in forwards;
}

#settings-zone {
    margin-top: 20px;
}

button {
    font-family: 'Press Start 2P', cursive;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid #888;
    border-radius: 6px;
    background: linear-gradient(to bottom, #666, #444);
    color: #fff;
    margin: 5px;
    transition: all 0.1s ease-in-out;
    text-shadow: 1px 1px 0px #000;
}

button:hover {
    background: linear-gradient(to bottom, #777, #555);
    box-shadow: 0 0 15px #ffc107;
    color: #ffc107;
}

button:active {
    transform: translateY(2px);
    background: linear-gradient(to bottom, #555, #333);
    box-shadow: 0 0 5px #ffc107;
}

button:disabled {
    background: linear-gradient(to bottom, #444, #222);
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
}

#sound-control-button {
    width: 40px;
    height: 40px;
    padding: 8px;
}

#potion-use-zone button {
    position: relative; /* 개수 표시를 위한 기준점 */
    overflow: hidden; /* 쿨다운 요소가 버튼 밖으로 나가지 않도록 함 */
    width: 50px;
    height: 50px;
    vertical-align: middle; /* 버튼들을 수직 중앙 정렬합니다. */
    padding: 10px;
    font-size: 12px;
}

/* 모바일 화면에서만 UI 토글 버튼 표시 */
#toggle-ui-button {
    display: none; /* 기본적으로 숨김 */
}

@media (max-width: 768px) {
    #toggle-ui-button {
        display: inline-block; /* 모바일에서만 표시 */
    }
}
.potion-cooldown {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0; /* 시작 높이는 0 */
    background-color: rgba(40, 167, 69, 0.7); /* 반투명 초록색 */
    z-index: 1; /* 아이콘과 숫자 아래에 위치 */
    pointer-events: none; /* 클릭 방해 방지 */
}

.cooldown-animation {
    animation-name: cooldown-progress;
    animation-timing-function: linear; /* 일정한 속도로 진행 */
    animation-fill-mode: forwards;
}

@keyframes cooldown-progress {
    from { height: 100%; }
    to { height: 0%; }
}

#potion-use-zone button.active {
    border-color: #28a745;
    box-shadow: 0 0 15px #28a745;
    background: linear-gradient(to bottom, #4caf50, #2e7d32);
}

.potion-count {
    position: relative; /* 쿨다운 요소 위에 표시되도록 */
    z-index: 2;
    position: absolute;
    bottom: 2px;
    right: 4px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 10px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
}

.guide-text {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 10px;
}

#conquest-zone {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #555;
}

.conquest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 5px;
}

.conquest-item.mastered {
    color: #ffc107;
}

.mastery-badge {
    background-color: #28a745;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.zone-kill-count {
    font-size: 12px;
    color: #aaa;
    margin-top: -15px;
    margin-bottom: 15px;
}

#potion-use-zone button .icon {
    position: relative; /* 쿨다운 요소 위에 표시되도록 */
    z-index: 2;
}

/* 진화 가능 버튼 애니메이션 */
#evolution-trigger-button {
    animation: evolution-ready 1.5s infinite;
}

@keyframes evolution-ready {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px #ffc107; }
    50% { transform: scale(1.1); box-shadow: 0 0 25px #ffeb3b; }
}

@keyframes whetstone-burn {
    0%, 100% {
        box-shadow: 0 0 20px #ffc107, 0 0 30px #ff9800, 0 0 40px #ff5722;
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 30px #ffeb3b, 0 0 45px #ffc107, 0 0 60px #ff9800;
        filter: brightness(1.2);
    }
}

#combat-stats-summary {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    padding: 10px;
    flex-wrap: wrap; /* 화면이 좁을 때 아이템이 다음 줄로 넘어가도록 허용합니다. */
    background-color: rgba(0,0,0,0.3);
    border-radius: 8px;
}

/* 전투화면 하단 제물 요약 스타일 */
#sacrifices-summary-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 8px;
}

#sacrifices-summary-list {
    display: flex;
    gap: 10px;
}

.crit-attack-animation {
    animation: attack 0.2s ease-in-out, pulse 0.2s ease-in-out;
}

/* 애니메이션 효과 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); color: #ffeb3b; }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: pulse 0.4s ease-out;
}

@keyframes attack {
    0% { transform: translateX(0); }
    50% { transform: translateX(25px) rotate(15deg); }
    100% { transform: translateX(0); }
}

.attack-animation {
    animation: attack ease-in-out;
}

/* 화면 번쩍임 효과 */
#screen-flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 클릭 방해 방지 */
    z-index: 9999;
    background-color: transparent;
}

.screen-flash-animation {
    animation: screen-flash 0.2s ease-out;
}

/* 보스 UI 스타일 */
#boss-zone {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #555;
}

#boss-hp-bar-container {
    width: 100%;
    height: 30px;
    background-color: #111;
    border: 2px solid #ffc107;
    border-radius: 15px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}

#boss-hp-bar {
    width: 100%;
    height: 100%;
    /* 색상을 붉은색으로 고정합니다. */
    background: linear-gradient(to right, #dc3545, #ff4b5c); /* 30% 미만: 붉은색 */
}

#boss-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 1px 1px 2px black;
    font-size: 1.2em; /* 기본 폰트 크기 설정 */
    white-space: nowrap; /* 텍스트가 줄 바꿈되지 않도록 설정 */
}

#boss-timer {
    margin-top: 10px;
    font-size: 1.2em;
    color: #ff4b5c;
    text-shadow: 1px 1px 2px black;
}

/* 엔딩 화면 스타일 */
#ending-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 콘텐츠를 위에서부터 정렬 */
    align-items: center;
    z-index: 100;
    text-align: center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    overflow-y: auto; /* 내용이 길어지면 세로 스크롤 허용 */
    padding: 40px 20px; /* 상하좌우 여백 추가 */
}

#ending-screen h2 {
    font-size: 3em;
    color: #ffc107;
    text-shadow: 3px 3px 0px #9c27b0;
}

#ending-screen p {
    font-size: 1.2em;
    max-width: 600px;
    line-height: 1.8;
}

#ending-screen button {
    margin-top: 30px;
}

.shop-category {
    color: #ffc107;
    margin: 15px 0 5px 0;
}

.overlay-content .action-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#prestige-bonus-display {
    font-size: 12px;
    color: #8fbc8f;
    margin-left: 20px;
    border-left: 2px solid #8fbc8f;
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.achievement {
    background-color: #3a3a3a;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.achievement.completed {
    background-color: #4a4a3a;
    border-color: #ffc107;
}

.achievement-info h4 {
    margin: 0 0 5px 0;
    color: #e0e0e0;
}

.achievement-info p {
    margin: 0;
    font-size: 11px;
    color: #aaa;
}

/* 오프닝 화면 스타일 */
#opening-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    text-align: center;
    transition: opacity 1s ease-out;
}

#opening-text {
    max-width: 800px;
    line-height: 2;
    font-size: 1.1em;
}

#opening-text p {
    opacity: 0;
    animation: fadeInParagraph 2s ease-in-out forwards;
}

@keyframes fadeInParagraph {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#start-game-button {
    margin-top: 40px;
    opacity: 0;
    animation: fadeInParagraph 2s 8s forwards; /* 8초 후에 버튼 나타남 */
}

.hidden-ui {
    display: none !important;
}


@keyframes screen-flash {
    0% { background-color: rgba(255, 255, 150, 0); }
    50% { background-color: rgba(255, 255, 150, 0.3); }
    100% { background-color: rgba(255, 255, 150, 0); }
}

/* 토스트 팝업 로그 스타일 */
#toast-container {
    position: fixed;    
    /* 모바일 브라우저의 UI 변화에도 위치가 흔들리지 않도록 calc와 vh 단위를 사용합니다. */
    bottom: calc(10vh + 20px); /* 하단 메뉴(약 10vh)보다 20px 위에 위치 */
    left: 10px;
    z-index: 999;    
    display: flex;
    flex-direction: column-reverse; /* 메시지가 아래에서 위로 쌓이도록 복원 */
    gap: 8px;
    max-width: 80%; /* 토스트 메시지가 화면 너비를 초과하지 않도록 제한합니다. */
    pointer-events: none; /* 팝업이 클릭 방해하지 않도록 설정 */
}

.toast-message {
    background-color: rgba(0, 0, 0, 0.75);
    color: #ccc;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    animation: toast-fade 4s ease-out forwards;
    text-shadow: 1px 1px 0 #000;
    border-left: 3px solid #888;
}

.toast-message.special {
    color: #ffc107;
    border-left-color: #ffc107;
}

.toast-message.error {
    color: #ff6b6b;
    border-left-color: #ff6b6b;
}

@keyframes toast-fade {
    0% { opacity: 0; transform: translateX(-20px); }
    10% { opacity: 1; transform: translateX(0); }
    90% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(20px); }
}

/* 모바일에서 상점 레이아웃이 깨지는 것을 방지합니다. */
@media (max-width: 400px) {
    .overlay-content .action-group {
        flex-direction: column; /* 세로로 배치 */
        align-items: flex-start; /* 왼쪽 정렬 */
        gap: 5px; /* 아이템 간 간격 추가 */
    }
}

/* 반응형 디자인 (모바일 화면 대응) */
@media (max-width: 900px) {
    h1 {
        font-size: 1.8em;
    }
}

/* 신규 사냥터 선택 UI */
#zone-selector-container {
    width: 100%;
    max-width: 900px;
    padding: 10px;
    overflow-x: auto; /* 버튼이 화면을 벗어날 경우 가로 스크롤을 허용합니다. */
}

#zone-buttons {
    display: flex;
    flex-wrap: nowrap; /* 버튼들이 항상 한 줄로 표시되도록 합니다. */
    justify-content: flex-start; /* 버튼을 왼쪽부터 정렬합니다. */
    gap: 5px;
}

#zone-buttons button.locked {
    background: linear-gradient(to bottom, #444, #222);
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
}

#zone-buttons button.active-zone {
    border-color: #ffc107;
    box-shadow: 0 0 10px #ffc107;
    color: #ffc107;
}

#zone-buttons button {
    width: 60px;
    height: 60px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#zone-buttons button .icon {
    margin-right: 0;
}

/* 오버레이 메뉴 스타일 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* 기본적으로 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.overlay-content .panel-zone {
    margin-bottom: 0;
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    background: none;
    border: none;
    color: #fff;
}

/* 하단 내비게이션 바 */
#nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-top: 2px solid #ffc107;
    z-index: 500;
}

#nav-bar button {
    position: relative; /* 알림 점을 위한 기준점 */
    flex-grow: 1;
    padding: 12px 5px; /* 모바일 화면에서 텍스트가 깨지지 않도록 좌우 패딩을 줄입니다. */
    /* 아이콘과 텍스트를 세로로 배치하여 가로 공간을 절약합니다. */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}

#nav-bar button.has-reward::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background-color: #ff4b5c;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 5px #ff4b5c;
}

#nav-bar button {
    flex-grow: 1;
    margin: 0 5px;
}

/* 상단 요약 바 */
#summary-bar {
    /* 이제 hunting-ground 내부로 이동했으므로, 불필요한 스타일을 제거합니다. */
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid #555;
    gap: 15px;
    flex-wrap: wrap; /* 아이템이 여러 줄로 표시되도록 수정 */
}

.overlay-content #offline-rewards-list {
    text-align: left;
    margin: 20px 0;
    line-height: 1.8;
}

.overlay-content #offline-rewards-list p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-item {
    display: flex;
    align-items: center;
    font-size: 12px;
}

/* 파편 카운트의 최소 너비를 지정하여 숫자 길이에 따른 레이아웃 깨짐 방지 */
#summary-shards-count {
    min-width: 80px; 
}

.summary-item .icon {
    width: 1.5em;
    height: 1.5em;
}

/* 시각 효과(VFX) 컨테이너 */
#vfx-container {
    position: absolute;
    top: 50%;
    left: 50%; /* 몬스터 중앙에 맞춤 */
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1; /* 몬스터보다 뒤에 있도록 설정 */
}

.vfx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
}

.vfx-poison {
    background-image: radial-gradient(circle, #8fbc8f 10%, rgba(40,167,69,0) 70%);
    animation: vfx-fade-out 0.5s ease-out forwards;
}

.vfx-fire {
    background-image: radial-gradient(circle, #ffeb3b 10%, rgba(255,75,92,0) 60%);
    animation: vfx-fade-out 0.5s ease-out forwards;
}

.vfx-lightning {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50,10 30,50 45,50 40,90 70,40 55,40' fill='%23ffeb3b'/%3E%3C/svg%3E");
    animation: vfx-flash 0.3s ease-out forwards;
}

@keyframes vfx-fade-out {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes vfx-flash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes monster-death {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.5) rotate(45deg); }
}

@keyframes monster-spawn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

.monster-shake-animation {
    animation: monster-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes monster-shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.loot-text {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: bold;
    color: #ffc107; /* 영혼 파편 색상 */
    text-shadow: 2px 2px 2px #000;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.loot-text .icon {
    width: 1em;
    height: 1em;
    margin-right: 5px;
}

.loot-text.material {
    color: #8fbc8f; /* 재료 색상 */
}


.damage-text {
    position: absolute;
    left: 50%;
    top: 20%;
    /* transform: translateX(-50%); */ /* JS에서 제어하므로 제거 */
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    white-space: nowrap;
    opacity: 0; /* 기본적으로 숨김 */
}

.damage-text.float-up-animation, .loot-text.float-up-animation {
    animation: float-up 1.2s ease-out forwards;
}

.damage-text .icon {
    width: 0.8em;
    height: 0.8em;
    margin-right: 5px;
}

.damage-text.crit {
    font-size: 28px;
    color: #ffc107;
    animation-duration: 1.2s;
}

.damage-text.superCrit {
    font-size: 25px; /* 폰트 크기 약간 조정 */
    color: #c37de4; /* 보라색 */
    animation-duration: 1.8s; /* 애니메이션 시간 증가 */
    display: flex;
    align-items: baseline;
    white-space: normal; /* 텍스트가 길어질 경우 줄바꿈을 허용하여 가로 스크롤 방지 */
}

.super-crit-multiplier {
    font-size: 16px;
    color: #f5d5ff;
    margin-left: 8px;
}

.damage-text.fire {
    color: #ff9800;
}

.damage-text.frost {
    color: #00d2ff;
}

.damage-text.lightning {
    color: #ffeb3b;
}

.damage-text.poison {
    color: #8fbc8f;
}

@keyframes float-up {
    from {
        opacity: 1; /* JS에서 opacity를 1로 설정하면 여기서부터 애니메이션 시작 */
        /* transform은 JS에서 설정한 초기 위치를 그대로 사용합니다. */
    }
    to {
        opacity: 0; /* 서서히 사라짐 */
        transform: translate(-50%, -80px); /* JS에서 설정한 초기 위치에서 위로 80px 이동 */
    }
}

/* 설정 그룹 스타일 */
.settings-group {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #555;
    text-align: left;
}

.settings-group h4 {
    margin-bottom: 10px;
    color: #ffc107;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.checkbox-group label {
    cursor: pointer;
}