body {
    background: linear-gradient(135deg, #1a1a2e, #16213e); /* Subtle dark gradient */
    color: #e0e0e0; /* Lighter text for contrast */
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden; /* Prevent scrollbars if content slightly overflows */
}

#game-container {
    border: 3px solid #4CAF50; /* Green border for a game feel */
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.8); /* Glowing effect */
    padding: 0; /* Removed padding */
    width: 800px;
    height: 360px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
	justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    border-radius: 10px; /* Slightly rounded corners */
    transition: all 0.3s ease-in-out; /* Smooth transitions for general elements */
}

h1 {
    color: #FFD700; /* Gold color for titles */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
    font-size: 24px; /* Further reduced font size */
    margin-top: 10px;
}

h2 {
    color: #ADD8E6; /* Light blue for subtitles/headers */
    margin-top: 2px;
    margin-bottom: 0; /* Removed margin */
    font-size: 16px; /* Further reduced font size */
}

button {
    font-family: inherit;
    padding: 8px 15px; /* Further reduced padding */
    font-size: 14px; /* Further reduced font size */ /* Reduced font size */
    cursor: pointer;
    border: 2px solid #4CAF50;
    background: linear-gradient(180deg, #4CAF50, #388E3C); /* Green gradient */
    color: #fff;
    margin: 4px; /* Reduced margin */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease-in-out;
}

button:hover {
    background: linear-gradient(to bottom, #56c271, #4aa864);
    transform: scale(1.05); /* 확대 효과 추가 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* 그림자 효과 강화 */
}

.start-battle-button {
    background: linear-gradient(to bottom, #007bff, #0056b3);
    border-color: #0056b3;
}

.start-battle-button:hover {
    background: linear-gradient(to bottom, #0056b3, #004085);
}

.reset-exp-button {
    background: linear-gradient(to bottom, #d9534f, #c9302c);
    border-color: #ac2925;
}

.reset-exp-button:hover {
    background: linear-gradient(to bottom, #c9302c, #ac2925);
}

.hidden {
    display: none;
}


button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: #555;
    border-color: #777;
    box-shadow: none;
    transform: none;
}

input[type="text"], input[type="file"] {
    font-family: inherit;
    padding: 2px; /* Further reduced padding */
    font-size: 16px;
    border: 2px solid #ADD8E6; /* Light blue border */
    background-color: #2a2a3a; /* Darker input background */
    color: #e0e0e0;
    margin: 10px;
    border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease-in-out;
}

input[type="text"]:focus, input[type="file"]:focus {
    border-color: #FFD700; /* Gold border on focus */
    outline: none;
}

/* Main Menu Styles */
.main-menu-layout {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 0; /* Removed margin */
    gap: 10px; /* Space between player summaries */
}
.player-summary {
    border: 2px solid #555;
    padding: 5px; /* Increased padding */
    width: 48%; /* Increased width */
    cursor: pointer;
    background-color: rgba(20, 20, 30, 0.7); /* Darker background for summaries */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
}
.player-summary:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
.player-summary.selected {
    border-color: #FFD700; /* Gold border when selected */
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.9); /* Gold glow when selected, 더 강하게 */
    background-color: rgba(60, 60, 90, 0.9); /* 더 밝고 눈에 띄는 배경색 */
    transform: scale(1.02); /* Slightly larger when selected */
}
.player-summary img {
    border: 2px solid #ADD8E6;
    border-radius: 5px;
    margin-top: 5px; /* Further reduced margin */
    margin-bottom: 0; /* Removed margin */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    max-width: 80px; /* Reduced image size */
    max-height: 80px; /* Reduced image size */
}
.monster-hp-area {
    display: flex;
    align-items: center;
    gap: 15px; /* 몬스터 이미지와 HP 정보/버튼 그룹 사이 간격 */
    margin-bottom: 10px; /* 몬스터 영역과 스킬 영역 사이 간격 */
}
.hp-info-and-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 텍스트와 버튼을 왼쪽 정렬 */
    gap: 5px; /* 텍스트와 버튼 사이 간격 */
}
.hp-info-and-button span {
    font-size: 14px; /* HP 정보 텍스트 크기 */
    color: #ADD8E6; /* HP 정보 텍스트 색상 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}
.player-summary p {
    font-size: 12px; /* Reduced font size */
}
.skill-info {
    font-size: 12px; /* Reduced font size */
    margin: 0; /* Removed margin */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 5px; /* Reduced padding */
    border-radius: 3px;
    border: 1px solid #333;
}
.skill-info-active {
    background-color: rgba(76, 175, 80, 0.5); /* 녹색 계열 배경 */
}
.skill-info-disabled {
    background-color: rgba(255, 0, 0, 0.5); /* 붉은색 계열 배경 */
}
.skill-info-inactive {
    background-color: rgba(40, 40, 50, 0.5); /* 어두운 배경색 */
}
.upgrade-skill-button {
    padding: 2px 5px; /* Reduced padding */
    font-size: 12px;
    margin: 0; /* Override general button margin */
    background: linear-gradient(180deg, #2a2a3a, #1a1a2e); /* 어두운 배경색 계열 */
    border-color: #333;
    box-shadow: none;
}
.upgrade-hp-button {
    padding: 2px 5px; /* Reduced padding */
    font-size: 12px;
    margin: 0; /* Override general button margin */
    background: linear-gradient(180deg, #4CAF50, #388E3C); /* 초록색 계열 배경 */
    border-color: #388E3C;
    box-shadow: none;
}
.upgrade-skill-button:hover {
    background: linear-gradient(180deg, #56c271, #4aa864); /* 플레이어 이름 변경 버튼과 동일한 hover 색상 */
    transform: scale(1.05); /* 5% 확대 */
    box-shadow: 0 0 10px rgba(86, 194, 113, 0.7); /* 녹색 빛 그림자 */
}
.upgrade-hp-button:hover {
    transform: scale(1.05); /* 5% 확대 */
    box-shadow: 0 0 10px rgba(86, 194, 113, 0.7); /* 녹색 빛 그림자 */
}
.menu-buttons {
    border-top: 2px solid #ADD8E6; /* Light blue separator */
    padding-top: 5px; /* Reduced padding */
    margin-top: 5px; /* Reduced margin */
    display: flex; /* Enable flexbox */
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: center; /* Center buttons horizontally */
}
.menu-buttons p {
    font-size: 14px; /* Reduced font size */
    color: #FFD700;
    margin-bottom: 0; /* Removed margin */
}
hr {
    border: none;
    border-top: 1px dashed #555;
    margin: 5px 0; /* Reduced margin */
}

/* Battle Screen Styles */
.battle-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas:
        "p1-info . p2-info"
        "monster-area monster-area monster-area"
        "turn-message-area turn-message-area turn-message-area" /* 턴 표시를 위한 새로운 행 */
        "skills-area skills-area skills-area";
    grid-template-rows: auto 1fr auto auto;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px; /* Gap between grid items */
}

.player-info {
    padding: 2px; /* Further reduced padding */
    background-color: rgba(30, 30, 45, 0.8);
    border-radius: 8px;
    border: 1px solid #ADD8E6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.player-info span {
    font-size: 18px;
    color: #FFD700;
    margin-bottom: 5px;
}
#player1-info { grid-area: p1-info; }
#player2-info { grid-area: p2-info; }

/* Progress Bar Styling */
.hp-bar-container {
    position: relative;
    width: 90%;
    height: 20px;
    margin-top: 5px;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #555; /* Track color */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Ensure damage overlay stays within bounds */
}

progress {
    width: 100%; /* Fill container */
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    border: none; /* Remove default border */
    border-radius: 5px;
    background-color: transparent; /* Make progress bar background transparent */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Ensure progress bar is above damage overlay */
}
progress::-webkit-progress-bar {
    background-color: transparent; /* Make progress bar background transparent */
}
progress::-webkit-progress-value {
    border-radius: 5px;
    transition: width 0.5s ease-in-out; /* Smooth transition for HP changes */
}
progress::-moz-progress-bar {
    border-radius: 5px;
}
/* Specific styling for HP bars */
#p1-hp::-webkit-progress-value { background-color: #4CAF50; }
#p2-hp::-webkit-progress-value { background-color: #FF6347; } /* Red for opponent */

.damage-overlay {
    position: absolute;
    top: 0;
    right: 0; /* Start from the right */
    height: 100%;
    background-color: rgba(255, 0, 0, 1); /* Red with some transparency */
    z-index: 2; /* Above progress bar */
    transition: width 0.5s ease-out, opacity 0.5s ease-out; /* Smooth transition for width and fade */
    opacity: 0; /* Initially hidden */
    transform-origin: right; /* Animation origin from the right */
}


.monster-area {
    grid-area: monster-area;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 0;
    position: relative; /* For damage text positioning */
}
.monster {
    max-width: 215px; /* Reduced monster size */
    max-height: 150px; /* Reduced monster size */
    border: 3px solid #ADD8E6;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(173, 216, 230, 0.5); /* Subtle glow */
    transition: transform 0.3s ease-in-out;
}
.monster:hover {
    transform: scale(1.05);
}
#p2-monster {
    transform: scaleX(-1); /* 좌우 반전 */
}
.battle-log {
    grid-area: battle-log; /* Assign grid area */
    font-size: 16px;
    min-width: 150px; /* 데미지 표시 영역 최소 가로 150px로 줄임 */
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2px; /* Further reduced padding */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    color: #FFD700;
    min-height: 50px; /* Ensure it has some height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.skills-area {
    grid-area: p1-skills / span 3;
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 (선택 사항, 필요 시) */
    padding-top: 15px;
    border-top: 1px solid #555;
}
.player-skills {
    display: flex;
    flex-direction: row; /* Skills in a row */
    gap: 10px; /* Space between skill buttons */
    justify-content: center; /* 각 플레이어 스킬 버튼 묶음 내부 중앙 정렬 */
}
.skill-button {
    padding: 10px 15px;
    font-size: 16px;
    background: linear-gradient(180deg, #8A2BE2, #4B0082); /* Purple gradient */
    border-color: #6A0DAD;
}
.skill-button:hover {
    background: linear-gradient(180deg, #9370DB, #8A2BE2);
}
.skill-button:disabled {
    background: #555;
    border-color: #777;
}


#turn-indicator {
    grid-area: turn-message-area; /* 새로운 그리드 영역 지정 */
    justify-self: center; /* 수평 중앙 정렬 */
    align-self: center; /* 수직 중앙 정렬 (필요 시) */
    font-size: 22px; /* Larger turn indicator */
    color: #FFD700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    animation: blink 0.5s infinite alternate; /* 깜빡이는 애니메이션 2배 빠르게 적용 */
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.3; }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    border: 2px solid #4CAF50;
    max-width: 450px;
}

.modal-content p {
    margin-bottom: 25px;
    color: #e0e0e0;
    font-size: 18px;
}

.modal-content button {
    margin: 0 15px;
    padding: 10px 25px;
    font-size: 16px;
}

.modal-confirm-button {
    background: linear-gradient(to bottom, #d9534f, #c9302c);
    border-color: #ac2925;
}

.modal-cancel-button {
    background: linear-gradient(to bottom, #6c757d, #5a6268);
    border-color: #545b62;
}
/* New styles for monster image comparison */
.monster-image-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* 이미지와 화살표 사이 간격 */
    margin-bottom: 0; /* Removed margin */
}

.monster-image-comparison img {
    border: 2px solid #ADD8E6;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.comparison-arrow {
    font-size: 30px;
    color: #FFD700; /* 화살표 색상 */
    font-weight: bold;
}
/* Game Over Screen Styles */
.game-over-stats {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.game-over-stats .stat-item {
    font-size: 20px;
    color: #FFD700; /* Gold color for stats */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    background-color: rgba(30, 30, 45, 0.8);
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid #ADD8E6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    min-width: 200px;
}

.game-over-stats .stat-item span {
    font-weight: bold;
    color: #4CAF50; /* Green for the numbers */
    margin-left: 10px;
}

/* Damage text animation */
@keyframes float-up {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

.damage-text {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: red;
    text-shadow: 1px 1px #000;
    animation: float-up 1s ease-out forwards;
    pointer-events: none; /* So it doesn't interfere with clicks */
}

.damage-number-in-log {
    color: red;
    font-size: 1.5em; /* Make it slightly larger than surrounding text */
    font-weight: bold;
	padding-left: 10px
}

/* Responsive Styles */
@media (max-width: 1023px) {
    body {
        align-items: flex-start; /* 콘텐츠를 위쪽으로 정렬 */
    }

    #game-container {
        margin-top: 25px; /* 상단에 25px 마진 추가 */
    }
}
@media (max-width: 790px) {
    #game-container {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        padding: 2px; /* Further reduced padding */
    }

    .main-menu-layout {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .player-summary {
        width: 90%;
    }

    .monster {
        max-width: 150px;
        max-height: 150px;
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .battle-container {
        grid-template-areas:
            "p1-info p2-info"
            "monster-area monster-area"
            "turn-message-area turn-message-area"
            "skills-area skills-area";
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .monster-area {
        flex-direction: column;
        gap: 10px;
    }

    .skills-area {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .player-skills {
        flex-direction: column;
        width: 100%;
    }

    .skill-button {
        width: 100%;
    }

    .battle-log {
        min-width: 100px;
        order: -1; /* Show log between monsters */
    }

    .monster {
        max-width: 120px;
        max-height: 120px;
    }

    #p2-monster {
        transform: scaleX(-1); /* Keep the flip */
    }
}

@media (min-width: 1024px) {
    #game-container {
        width: 1000px; /* Wider for PC screens */
        height: 600px; /* Taller for PC screens */
        padding: 20px; /* Restore original padding */
    }

    h1 {
        font-size: 32px; /* Larger font size for PC */
        margin-bottom: 20px; /* Restore original margin */
        margin-top: 20px; /* Restore original margin */
    }

    h2 {
        font-size: 22px; /* Larger font size for PC */
        margin-top: 10px; /* Restore original margin */
        margin-bottom: 10px; /* Restore original margin */
    }

    button {
        padding: 12px 25px; /* Restore original padding */
        font-size: 18px; /* Restore original font size */
        margin: 8px; /* Restore original margin */
    }

    .main-menu-layout {
        margin-bottom: 30px; /* Restore original margin */
        gap: 20px; /* Restore original gap */
    }

    .player-summary {
        padding: 15px; /* Restore original padding */
        width: 45%; /* Restore original width */
    }

    .player-summary img {
        max-width: 150px; /* Larger image size for PC */
        max-height: 150px; /* Larger image size for PC */
        margin-top: 10px; /* Restore original margin */
        margin-bottom: 10px; /* Restore original margin */
    }

    .player-summary p {
        font-size: 14px; /* Larger font size for PC */
    }

    .skill-info {
        font-size: 14px; /* Larger font size for PC */
        margin: 8px 0; /* Restore original margin */
        padding: 5px 10px; /* Restore original padding */
    }

    .upgrade-skill-button, .upgrade-hp-button {
        padding: 5px 10px; /* Restore original padding */
        font-size: 12px; /* Restore original font size */
    }

    .menu-buttons {
        padding-top: 20px; /* Restore original padding */
        margin-top: 20px; /* Restore original margin */
    }

    .menu-buttons p {
        font-size: 16px; /* Larger font size for PC */
        margin-bottom: 15px; /* Restore original margin */
    }

    hr {
        margin: 20px 0; /* Restore original margin */
    }

    .monster {
        max-width: 250px; /* Larger monster size for PC */
        max-height: 250px; /* Larger monster size for PC */
    }

    .battle-log {
        padding: 15px; /* Restore original padding */
    }

    .player-info {
        padding: 10px; /* Restore original padding */
    }

    .player-info span {
        font-size: 18px; /* Restore original font size */
    }

    #turn-indicator {
        font-size: 22px; /* Restore original font size */
    }

    .damage-number-in-log {
        font-size: 1.5em; /* Restore original font size */
    }

    input[type="text"], input[type="file"] {
        padding: 10px; /* PC 화면에서 텍스트 박스 패딩 증가 */
        font-size: 18px; /* PC 화면에서 텍스트 박스 폰트 크기 증가 */
    }
}
/* Animation Styles */
@keyframes shake {
    0%, 100% { transform: translateX(0) scaleX(-1); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) scaleX(-1); }
    20%, 40%, 60%, 80% { transform: translateX(5px) scaleX(-1); }
}

@keyframes shake-normal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes lunge {
    0% { transform: translate(0, 0); }
    50% { transform: translate(30px, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes lunge-reversed {
    0% { transform: translate(0, 0) scaleX(-1); }
    50% { transform: translate(-30px, 0) scaleX(-1); }
    100% { transform: translate(0, 0) scaleX(-1); }
}

.shake {
    animation: shake 0.5s;
}

.shake-normal {
    animation: shake-normal 0.5s;
}

.lunge {
    animation: lunge 0.5s;
}

.lunge-reversed {
    animation: lunge-reversed 0.5s;
}