html {
    scroll-behavior: smooth;
}

/* 상단 고정 UI 레이아웃 */
.battle-sticky-ui {
    position: sticky;
    top: 145px;
    z-index: 1000;
    background: #000;
}

.battle-ui-wrapper {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

/* 구식 필터 대신 transform을 사용하여 자식 요소의 필터 효과가 부모에게 전이되는 현상 방지 */
.team-flip-container {
    transform: scaleX(-1);
    transform-origin: center;
    backface-visibility: hidden; /* 렌더링 안정성 확보 */
}

/* 전투 시 메뉴 및 정보창 상단 고정 스타일 */
.battle-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: #10151b;
    border-bottom: 1px solid #333;
}

/* 하단 고정 제어 버튼 스타일 */
#battle-controls {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    z-index: 2000;
    padding: 15px 0;
    background: rgba(0, 0, 0, 0.9);
    border-top: 2px solid #555;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
}

#battle-controls button {
    background: #222;
    color: #eee;
    border: 1px solid #666;
    border-radius: 4px;
    transition: background 0.2s, opacity 0.2s;
    padding: 5px 12px;
    cursor: pointer;
    margin: 0 5px;
}

#battle-controls button:hover:not(:disabled) {
    background: #444;
}

/* 버튼 비활성화 스타일: 카운트다운 도중 적용 */
#battle-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
    background: #111 !important;
    color: #888 !important;
    border-color: #333 !important;
}

/* 하단 버튼 공간 확보 */
#contents {
    padding-bottom: 60px !important;
}

/* 초기 상태 숨김 */
.log-row, .state-update-row, .result-row {
    display: none;
	/* font-size: .85em; */
}

.ttd1 { padding-right:20px !important; text-align: right; }
.ttd2 { padding-left:20px !important; }

/* 로그 테이블 컬럼 너비 및 정렬 강제 */
.log-row td {
    width: 50%;
    vertical-align: top;
    padding: 20px 0;
    box-sizing: border-box;
}

/* 캐릭터 스프라이트 기본 설정 */
.battle-sprite {
    position: absolute; 
    top: 0;
    left: 0;
    transition: filter 0.1s;
    will-change: filter, transform;
}

/* 공격자 강조 효과 - 투명 배경 GIF 외곽선 */
.active-glow {
    filter: drop-shadow(1px 0 0 #33ff33) 
            drop-shadow(-1px 0 0 #33ff33) 
            drop-shadow(0 1px 0 #33ff33) 
            drop-shadow(0 -1px 0 #33ff33) !important;
    /* z-index: 10; */
}

/* [애니메이션 정의] 흰색 -> 빨간색 반복 점멸 (피격용) */
@keyframes flash-white-red {
    0% { filter: brightness(10) sepia(0%) hue-rotate(0deg) saturate(100%); } 
    50% { filter: brightness(0.8) sepia(100%) hue-rotate(-50deg) saturate(600%); }
    100% { filter: brightness(10) sepia(0%) hue-rotate(0deg) saturate(100%); }
}

/* [애니메이션 정의] 짧고 강렬한 피격 진동 */
@keyframes shake-hard {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

/* [애니메이션 정의] 회복(HP/SP) 연출 */
@keyframes recovery-fade {
    0%   { filter: brightness(10)  sepia(0%)   hue-rotate(0deg)  saturate(100%); } 
    15%  { filter: brightness(1.2) sepia(100%) hue-rotate(90deg) saturate(500%); } 
    100% { filter: brightness(1)   sepia(0%)   hue-rotate(0deg)  saturate(100%); } 
}

/* 피격 시 동시 연출 (진동 포함) */
.damage-flash.shake-impact {
    animation: flash-white-red 0.07s linear 3,
               shake-hard 0.15s cubic-bezier(.36,.07,.19,.97) both !important;
}

/* 회복 시 연출 (진동 없음) */
.recovery-glow { animation: recovery-fade 3s ease-out both; }

/* 단독 적용 시 */
.damage-flash { animation: flash-white-red 0.07s linear 3; }
.shake-impact { animation: shake-hard 0.15s cubic-bezier(.36,.07,.19,.97) both; }

tr.state-update-row + tr:not([class]) td.ttd1 {
    display: none;
}

/* [신규] 매직서클 색상 순환 애니메이션 (0도 -> 360도 무한 회전) */
@keyframes hue-cycle {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* 플로팅 텍스트 기본 스타일 */
.floating-text {
    position: absolute;
    font-weight: 800 !important;
    font-size: 20px;
    font-family: "Asta Sans", sans-serif !important;
    pointer-events: none; /* 클릭 방해 금지 */
    z-index: 100; /* 스프라이트(10)보다 훨씬 위에 표시 */
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; /* 가독성용 외곽선 */
    animation: floatUp 1s ease-out forwards;
    white-space: nowrap;
	box-shadow: none !important;
}

/* 데미지 타입 스타일 */
.floating-text.damage {
    color: #ff3333; /* 빨간색 */
}
/* 중독 데미지*/
.floating-text.poison {
    color: #ce42f5;
}
/* (옵션) 회복 타입 스타일 */
.floating-text.heal {
    color: #3366ff;
}
/* (옵션) sp타입 스타일 */
.floating-text.sp {
    color: #66cc66;
}

/* 위로 떠오르며 사라지는 애니메이션 */
@keyframes floatUp {
    0% {
        transform: translate(-50%, 0) scale(0.8);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -10px) scale(1.2);
        opacity: 1;
    }
	60% {
		opacity: 1;
	}
    100% {
        transform: translate(-50%, -50px) scale(1);
        opacity: 0;
    }
}

.btl_img_container, 
.btl_img_container > div {
    overflow: hidden !important;
    isolation: isolate; 
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}

.btl_img_container > div {
    background-size: 100% 100% !important;
}

.btl_status_container {
    background: #000;
	display:none; 
}

.side-status-alt {
    position: absolute;
    top: -70px;
    width: 320px;
    max-height: 90vh; 
	min-height: 350px;
    overflow-x: hidden; 
    overflow-y: auto; 
    background: rgba(0, 0, 0, 0.85);
    /* border: 1px solid #333; */
    padding: 10px 8px; 
    color: #ccc;
    text-align: left;
    display: flex;
    flex-direction: column; 
	box-sizing: border-box;
}

/* .side-left { right: 100%; margin-right: 15px; } */
/* .side-right { left: 100%; margin-left: 15px; } */

.side-left {
	right: 100%;
	/* border-radius: 20px 0 0 20px; */
	/* min-height: 350px; */
	margin-right: 20px;
}
.side-right {
	left: 100%;
	/* border-radius: 0 20px 20px 0; */
	/* min-height: 350px; */
	margin-left: 20px;
}

.side-team-header { text-align: center; padding-bottom: 5px; }

.char-status-box {
    /* font-size: 0.8em; */
    margin: 10px 0;
    padding: 0 10px;
	text-align: center;
}

.char-status-box > div {
	word-break: break-all;
}

#bgm-volume-control {
	display:inline-flex;
	align-items:center;
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 99;
}

/* 바 그래프 레이아웃 스타일 */
.gauge-container {
    position: relative;
    width: 100%;
    height: 14px;
    background-color: #444; 
    /* margin: 4px 0; */
	border-bottom: 1px solid #222;
    overflow: hidden;
	font-size: 0.85em !important;
}

.hp-bar {
    height: 100%;
    background-color: #ff3333; 
    transition: width 0.3s ease-out; 
}

.sp-bar {
    height: 100%;
    background-color: #33ccff; 
    transition: width 0.3s ease-out; 
}

.hp-bar.poisoned {
    background-color: #a333ff !important; 
    box-shadow: 0 0 5px #a333ff;
}

.gauge-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 14px;
    /* font-size: 0.85em !important; */
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    text-align: center;
    pointer-events: none; 
}

.side-status-alt::-webkit-scrollbar { width: 4px; }
.side-status-alt::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }

#foot.show-footer { display: block !important; }

/* 결과 판정 오버레이 스타일 */
.battle-result-overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2100;
	text-shadow: 0 2px 6px rgba(0,0,0,.175);
    filter: drop-shadow(1px 0 0 #000) 
            drop-shadow(-1px 0 0 #000) 
            drop-shadow(0 1px 0 #000) 
            drop-shadow(0 -1px 0 #000) !important;
	font-weight: 900;
    color: #fff;
    text-align: center;
    pointer-events: none;
    min-width: 320px;
}

@keyframes result-appear {
    0% { opacity: 0; transform: translate(-50%, -70%) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.result-active {
    display: block !important;
    animation: result-appear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.battle-start-message.type-fullwidth {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 40px 0;
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scaleY(1);
    z-index: 3000;
    font-size: 4em;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.05em;
    color: #fff;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes message-squeeze-out {
    0% { transform: translateY(-50%) scaleY(1); }
    100% { transform: translateY(-50%) scaleY(0); }
}

.squeeze-out-active {
    animation: message-squeeze-out 0.2s ease-out forwards;
}

/* 커스텀 스크롤바
/* 1. 스크롤바 전체 폭 설정 */
.scroll-list-box::-webkit-scrollbar,
.side-status-alt::-webkit-scrollbar {
    width: 8px;
}

/* 2. 스크롤바 트랙(바탕) 설정 */
.scroll-list-box::-webkit-scrollbar-track,
.side-status-alt::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}

/* 3. 스크롤바 핸들(움직이는 부분) 설정 */
.scroll-list-box::-webkit-scrollbar-thumb,
.side-status-alt::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
    border: 2px solid #1a1a1a; /* 트랙과 분리되어 보이는 효과 */
    transition: background 0.2s;
}

/* 4. 핸들 마우스 호버 시 네온 그린으로 강조 */
.scroll-list-box::-webkit-scrollbar-thumb:hover,
.side-status-alt::-webkit-scrollbar-thumb:hover {
    background: #33ff33;
}

/* Firefox 대응 스타일 */
.scroll-list-box,
.side-status-alt {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

/* [수정] state-update-row 바로 다음에 생성되는 불필요한 빈 행 제거 */

/* 1. 클래스가 없는 일반 tr이 state-update-row 바로 뒤에 올 경우 숨김 */
tr.state-update-row + tr:not([class]) {
    display: none !important;
}

/* 2. (추가 안전장치) 위 조건의 행 내부에 ttd1 클래스 셀이 비어있을 경우만 숨김 */
tr.state-update-row + tr:not([class]) td.ttd1 {
    display: none;
}