/* --- General --- */
:root {
    --bg-color: #1a1a1d;
    --surface-color: #2c2c34;
    --primary-color: #4dffff;
    --secondary-color: #ff3366;
    --text-color: #f5f5f5;
    --text-muted-color: #a0a0b0;
    --border-color: #40404a;
    --font-family: 'Noto Sans KR', sans-serif;
    --border-radius: 12px;
    --shadow-light: 0 4px 10px rgba(0, 0, 0, 0.25);
    --shadow-deep: 0 8px 30px rgba(0, 0, 0, 0.5);
    --noise-texture: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="10" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>');
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background-image: var(--noise-texture);
}

.hidden { display: none !important; }

/* --- App Container --- */
.container { width: 100%; max-width: 1200px; height: 95vh; max-height: 800px; }

/* --- Login View --- */
#login-view { text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; }
.login-box { background: var(--surface-color); padding: 50px; border-radius: var(--border-radius); box-shadow: var(--shadow-deep); }
#login-view h1 { margin: 0 0 1rem; color: var(--primary-color); font-size: 3em; }
#login-view p { color: var(--text-muted-color); margin-bottom: 2.5rem; }
.login-button { background-color: var(--primary-color); color: #1a1a1d; font-weight: bold; padding: 14px 28px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(77, 255, 255, 0.3); }
.login-button:hover { transform: translateY(-4px); box-shadow: 0 4px 25px rgba(77, 255, 255, 0.5); }

/* --- Game View --- */
#game-view { display: flex; flex-direction: column; height: 100%; }
#game-header { padding: 15px 25px; background: var(--surface-color); border-bottom: 2px solid var(--border-color); border-radius: var(--border-radius) var(--border-radius) 0 0; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-deep); }
#user-info { display: flex; align-items: center; gap: 15px; }
#user-info img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--primary-color); }
#user-info div { display: flex; flex-direction: column; }
#user-info strong { font-size: 1.1rem; }
#user-info small { font-size: 0.8rem; color: var(--text-muted-color); }

#main-content { flex-grow: 1; display: grid; grid-template-columns: 270px 1fr 320px; gap: 20px; padding: 20px; background: var(--surface-color); border-radius: 0 0 var(--border-radius) var(--border-radius); }
.game-panel { padding: 25px; background-color: rgba(0,0,0,0.2); border-radius: var(--border-radius); box-shadow: inset 0 0 15px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 20px; }

/* --- HP Bars --- */
.hp-bar-container { width: 100%; height: 12px; background-color: #1a1a1d; border-radius: 6px; overflow: hidden; border: 1px solid #111; }
.hp-bar { height: 100%; border-radius: 5px; transition: width 0.3s ease-out; }
#player-hp-bar { background: linear-gradient(90deg, #4dffff, #00b8d4); box-shadow: 0 0 8px #4dffff; }
#monster-hp-bar { background: linear-gradient(90deg, #ff3366, #c40030); box-shadow: 0 0 8px #ff3366; }

/* --- Character & Monster Panels (#character-panel, #monster-panel) --- */
.game-panel h3 { margin: 0 0 15px; padding-bottom: 10px; font-size: 1.6em; color: var(--primary-color); border-bottom: 1px solid var(--border-color); text-align: center; }
#monster-panel h3 { color: var(--secondary-color); }
.stat-item { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; padding: 8px 0; }
.stat-item > span:first-child { color: var(--text-muted-color); }
.stat-item .value { font-weight: bold; }
#monster-panel .stat-item small { font-size: 0.8rem; color: var(--text-muted-color); margin-left: 5px; }
#stage-info { text-align: center; font-size: 1.1rem; font-weight: bold; margin-top: auto; color: var(--text-muted-color); }

/* --- Upgrade Panel (#actions-panel) --- */
#upgrade-container h3, #upgrade-container h4 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); color: var(--primary-color); }
#upgrade-container h4 { font-size: 1.1em; color: var(--text-muted-color); margin-top: 15px; font-weight: normal; }
#upgrade-container hr { border: 0; height: 1px; background-color: var(--border-color); margin: 20px 0; }
.base-stat .stat-info { flex-grow: 1; }
.base-stat .stat-level { color: var(--text-muted-color); font-size: 0.9em; margin-left: 8px; }
.upgrade-control { display: flex; align-items: center; gap: 15px; }
.upgrade-cost { min-width: 80px; text-align: right; color: #ffeb3b; font-size: 1rem; font-weight: bold; }
.upgrade-button { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: all 0.2s; }
.upgrade-button:hover:not(:disabled) { background-color: var(--primary-color); color: #1a1a1d; box-shadow: 0 0 10px var(--primary-color); }
.upgrade-button:disabled { border-color: #555; color: #555; cursor: not-allowed; }

/* --- Battle Screen --- */
#battle-screen { justify-content: center; align-items: center; gap: 30px; }

/* --- Error Popup --- */
#error-popup { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); color: var(--text-color); padding: 15px 30px; border-radius: 8px; box-shadow: var(--shadow-deep); z-index: 100; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
#error-popup.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Responsive Design --- */
@media (max-width: 1024px) {
    body { padding: 0; }
    .container { max-width: 100%; height: 100vh; max-height: none; border-radius: 0; }
    #game-header, #main-content { border-radius: 0; }
    #main-content { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 15px; height: calc(100vh - 75px); }
    #character-panel, #actions-panel { order: 1; }
    #battle-screen { order: 0; }
}