/* style.css */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: #051005; /* 짙은 숲 색 */
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
    user-select: none; font-weight: 700; color: #eee;
    touch-action: none;
}
canvas { 
    display: block; 
    touch-action: none; 
    image-rendering: pixelated; 
    image-rendering: crisp-edges; 
}
.hidden { display: none !important; }

/* --- 스크롤바 스타일링 --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a1a0a; }
::-webkit-scrollbar-thumb { background: #224422; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #448844; }

/* --- 타이틀 화면 --- */
#title-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #1a2e1a 0%, #051005 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 850; 
}
.game-title {
    font-size: 70px; color: #22cc88;
    text-shadow: 0 0 20px rgba(34, 204, 136, 0.6);
    text-align: center; margin-bottom: 20px; line-height: 1;
    font-weight: 900; letter-spacing: 1px;
}
.button-container { display: flex; gap: 20px; }
#start-btn, #restart-btn, #shop-btn, #close-shop-btn, #close-asharil-btn, #back-to-title-btn, #bestiary-btn, #install-btn, #data-btn, #achieve-btn {
    padding: 15px 40px; font-size: 20px; font-family: inherit;
    background: transparent; border: 2px solid #446644; color: #88cc88;
    cursor: pointer; transition: all 0.2s; font-weight: 800; text-transform: uppercase;
}
#start-btn:hover { background: #22cc88; border-color: #22cc88; color: #003300; box-shadow: 0 0 20px #22cc88; }
#shop-btn:hover { background: #335533; border-color: #ffd700; color: #ffd700; box-shadow: 0 0 20px #886600; }
#bestiary-btn:hover  { background: #335533; border-color: #ffd700; color: #ffd700; box-shadow: 0 0 20px #886600; }
#data-btn:hover  { background: #335533; border-color: #ffd700; color: #ffd700; box-shadow: 0 0 20px #886600; }
#close-shop-btn:hover, #close-asharil-btn:hover, #back-to-title-btn:hover { background: #335533; color: #fff; }

#install-btn { border-color: #4488ff; color: #88ccff; }
#install-btn:hover { background: #4488ff; border-color: #4488ff; color: #fff; box-shadow: 0 0 20px #4488ff; }

/* ========================================================== */
/* [던전 선택 UI] */
/* ========================================================== */
#dungeon-select-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    z-index: 850; background: #000;
}
#dungeon-bg-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; opacity: 0.6; filter: brightness(0.6) sepia(0.3);
}
.dungeon-ui-wrapper {
    position: relative; z-index: 2; display: flex;
    width: 90%; max-width: 1100px; height: 80%; max-height: 700px;
    background: rgba(10, 15, 10, 0.85); border: 2px solid #22cc88;
    border-radius: 12px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(34, 204, 136, 0.1);
    backdrop-filter: blur(5px); overflow: hidden;
}

/* 좌측 뷰포트 패널 */
.dungeon-left-panel {
    flex: 1.2; border-right: 2px solid #1a2a1a;
    display: flex; flex-direction: column; padding: 20px;
}
#dungeon-preview-container {
    width: 100%; height: 60%; background: #000; border: 2px solid #335533;
    border-radius: 8px; position: relative; overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
#dungeon-preview-canvas {
    width: 100%; height: 100%; object-fit: cover;
}
#dungeon-preview-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    padding: 20px; box-sizing: border-box;
}
#dungeon-title {
    margin: 0 0 10px 0; font-size: 28px; color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.5);
}
#dungeon-desc { font-size: 13px; color: #ccc; line-height: 1.5; word-break: keep-all; }

#dungeon-info-container {
    flex: 1; margin-top: 20px; background: rgba(0,0,0,0.4);
    border: 1px solid #224422; border-radius: 8px; padding: 15px;
}
#dungeon-info-container h3 { color: #88cc88; margin: 0 0 15px 0; font-size: 16px; border-bottom: 1px solid #224422; padding-bottom: 5px; }
.dungeon-info-text { font-size: 14px; color: #aaa; margin-bottom: 8px; }

/* 우측 리스트 & 탭 패널 */
.dungeon-right-panel {
    flex: 1; display: flex; flex-direction: column; padding: 20px; background: rgba(5, 10, 5, 0.6);
}
.dungeon-section-title { font-size: 16px; color: #aaddaa; margin-bottom: 10px; font-weight: bold; text-shadow: 1px 1px 0 #000; }

#dungeon-list {
    flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 5px;
}
.dungeon-list-item {
    display: flex; align-items: center; padding: 12px 15px;
    background: linear-gradient(90deg, #112211, #0a150a); border: 1px solid #335533;
    border-radius: 6px; cursor: pointer; transition: 0.2s; position: relative;
}
.dungeon-list-item:hover:not(.locked) { border-color: #88cc88; transform: translateX(5px); }
.dungeon-list-item.active { background: linear-gradient(90deg, #1a331a, #112211); border-color: #22cc88; box-shadow: 0 0 15px rgba(34,204,136,0.3); }
.dungeon-list-item.locked { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; }
.dungeon-list-icon { font-size: 24px; margin-right: 15px; width: 30px; text-align: center; }
.dungeon-list-name { font-size: 16px; color: #eee; font-weight: bold; flex: 1; }
.dungeon-list-lock { color: #ff5555; font-size: 14px; }

#dungeon-diff-tabs {
    display: flex; gap: 5px; margin-bottom: 10px;
}
.diff-tab {
    flex: 1; padding: 10px 0; background: #111; border: 1px solid #333;
    color: #888; font-size: 12px; font-weight: bold; cursor: pointer; border-radius: 4px; transition: 0.2s;
    text-align: center;
}
.diff-tab:hover:not(.locked) { background: #222; color: #fff; }
.diff-tab.locked { background: #0a0a0a; color: #444; cursor: not-allowed; position: relative; overflow: hidden; }
.diff-tab.locked::after { content: '🔒'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; font-size: 16px; }

.diff-tab[data-diff="normal"].active { border-color: #88cc88; background: #1a2a1a; color: #88cc88; box-shadow: inset 0 0 10px #88cc88; }
.diff-tab[data-diff="hard"].active { border-color: #ffaa44; background: #2a1a0a; color: #ffaa44; box-shadow: inset 0 0 10px #ffaa44; }
.diff-tab[data-diff="nightmare"].active { border-color: #ff4444; background: #2a0a0a; color: #ff4444; box-shadow: inset 0 0 10px #ff4444; }
.diff-tab[data-diff="hell"].active { border-color: #aa44ff; background: #1a0a2a; color: #aa44ff; box-shadow: inset 0 0 10px #aa44ff; }

#dungeon-diff-info {
    min-height: 40px; font-size: 12px; color: #aaa; background: rgba(0,0,0,0.5);
    padding: 10px; border-radius: 4px; border: 1px dashed #335533; display: flex; align-items: center;
}

#dungeon-action-panel {
    display: flex; gap: 10px; margin-top: 20px;
}
#dungeon-back-btn {
    flex: 1; padding: 15px; background: transparent; border: 2px solid #446644;
    color: #88cc88; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 6px; transition: 0.2s;
}
#dungeon-back-btn:hover { background: #335533; color: #fff; }

#dungeon-enter-btn {
    flex: 2; padding: 15px; background: linear-gradient(180deg, #22cc88, #118855); border: 2px solid #fff;
    color: #000; font-size: 18px; font-weight: 900; cursor: pointer; border-radius: 6px; transition: 0.2s;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5); box-shadow: 0 0 15px rgba(34,204,136,0.6);
}
#dungeon-enter-btn:hover { filter: brightness(1.2); transform: scale(1.02); }

/* ========================================================== */
/* [신규 캐릭터 선택 화면 (통합 레이아웃)] */
/* ========================================================== */
#char-select-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #050a05; background-image: radial-gradient(circle at center, #0f1f0f 0%, #050a05 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    z-index: 850; box-sizing: border-box; padding-bottom: 20px;
}

#char-select-header {
    width: 100%; max-width: 600px; display: flex; justify-content: space-between; align-items: center; position:absolute; top:20px; z-index:2; box-sizing:border-box;
}
#char-select-header h2 { font-size: 26px; color: #22cc88; margin: 0; text-shadow: 0 0 10px #005522; font-weight: 900; }
#back-to-diff-btn {
    padding: 8px 20px; background: transparent; border: 2px solid #446644; border-radius: 6px;
    color: #88cc88; font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.2s;
}
#back-to-diff-btn:hover { background: #224422; color: #fff; }

/* 1. 상단 스와이프 및 전시 존 */
#char-top-section {
    display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 550px;
    flex: 0 0 auto; min-height: 260px; height:50%; position: relative;
}
.char-nav-btn {
    background: transparent; border: none; color: #558855; font-size: 40px; cursor: pointer; padding: 10px;
    transition: 0.2s; text-shadow: 0 0 10px rgba(0,0,0,0.8); outline: none; -webkit-tap-highlight-color: transparent; z-index: 10;
}
.char-nav-btn:hover { color: #88cc88; transform: scale(1.1); }
.char-nav-btn:active { transform: scale(0.9); }

#char-swipe-zone {
    flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: radial-gradient(circle, rgba(34,204,136,0.1) 0%, transparent 70%);
    border-radius: 20px; position: relative; overflow: hidden;
    cursor: grab;
}
#char-swipe-zone:active { cursor: grabbing; }

#char-image-wrapper {
    position: absolute; top:0; width: 400px; height: 120%; display: flex; justify-content: center; align-items: center; overflow:hidden;
    animation: float-char 3s ease-in-out infinite;
}
#char-large-image {
    width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.8));
    transition: opacity 0.3s, transform 0.3s;
}
#char-dot-canvas {
    position: absolute; bottom:10px; right:20px;
    width: 64px; height: 64px; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));
    pointer-events: none; z-index:5;
}

#char-tags-container {
    display: flex; gap: 8px; margin-top: 15px; justify-content: center; position: absolute; bottom:10px;
}
.char-tag {
    background: rgba(10, 20, 10, 0.8); border: 1px solid #22cc88; color: #aaddaa;
    padding: 4px 10px; font-size: 11px; font-weight: bold; border-radius: 12px;
    box-shadow: 0 0 8px rgba(34,204,136,0.2);
}

@keyframes float-char {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 2. 하단 정보 탭 뷰 */
#char-bottom-section {
    width: 100%; max-width: 550px; height:50%; background: rgba(10, 20, 10, 0.9); border: 2px solid #22cc88;
    border-radius: 12px; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.8), inset 0 0 15px rgba(34,204,136,0.1);
    overflow-y: auto;
}

#char-name-display { font-size: 24px; color: #ffd700; margin: 0 0 5px 0; text-align: center; text-shadow: 1px 1px 2px #000; font-weight: 900;}
#char-desc-display { font-size: 13px; color: #88aa88; text-align: center; margin: 0 0 15px 0; line-height: 1.4; word-break: keep-all; }

/* 탭 헤더 */
.char-tabs-header {
    display: flex; width: 100%; border-bottom: 2px solid #224422; margin-bottom: 15px;
}
.char-tab-btn {
    flex: 1; background: transparent; border: none; color: #668866; font-size: 14px; font-weight: bold;
    padding: 10px 0; cursor: pointer; transition: 0.2s; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.char-tab-btn:hover { color: #aaddaa; }
.char-tab-btn.active { color: #22cc88; border-bottom-color: #22cc88; text-shadow: 0 0 5px rgba(34,204,136,0.5); }

/* 탭 콘텐츠 공통 */
.char-tab-content { display: none; flex-direction: column; flex: 1; animation: fadeInTab 0.3s ease; }
.char-tab-content.active { display: flex; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* 탭 1: 능력치 */
.stats-layout {
    display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%;
}
.radar-wrapper {
    flex: 0 0 140px; width:140px; height: 140px; display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.3); border-radius: 50%; border: 1px dashed #224422;
}
.stat-bars-wrapper {
    flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.stat-bar-row { display: flex; align-items: center; gap: 8px; position: relative; }
.stat-bar-label { width: 75px; font-size: 11px; color: #ccc; text-align: right; font-weight: bold; }
.stat-bar-track { flex: 1; height: 10px; background: #112211; border: 1px solid #224422; border-radius: 5px; overflow: hidden; position: relative;}
.stat-bar-fill { height: 100%; border-radius: 5px; transition: width 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); box-shadow: inset 0 0 5px rgba(255,255,255,0.4); }
.stat-bar-value { width: 50px; font-size: 11px; color: #fff; font-weight: bold; text-align: left; text-shadow: 1px 1px 0 #000; }
.stat-tooltip-text { position: absolute; top:0; left:0; width:100%; height:100%; font-size:8px; line-height:10px; text-align:center; color:rgba(255,255,255,0.7); pointer-events:none; }

/* 탭 2 & 3: 패시브 및 진화 박스 */
.passive-box, .evo-box {
    background: #0f1a0f; border: 1px solid #335533; border-radius: 8px; padding: 15px;
    display: flex; gap: 15px; align-items: center; margin-bottom: 10px;
}
.passive-icon, .evo-icon {
    width: 48px; height: 48px; background: #111; border: 2px solid #555; border-radius: 8px;
    display: flex; justify-content: center; align-items: center; font-size: 24px; flex-shrink: 0;
}
.evo-icon { border-color: #ffd700; background: #332200; }
.passive-info, .evo-info { flex: 1; display: flex; flex-direction: column; }
.passive-title, .evo-title { font-size: 15px; color: #88ff88; margin-bottom: 5px; font-weight: bold; }
.evo-title { color: #ffd700; }
.passive-desc, .evo-desc { font-size: 12px; color: #ccc; line-height: 1.4; word-break: keep-all; }

#char-select-confirm-btn {
    margin-top: auto; padding: 14px; background: linear-gradient(180deg, #22cc88, #118855); border: 2px solid #fff;
    color: #000; font-size: 16px; font-weight: 900; cursor: pointer; border-radius: 8px; transition: 0.2s;
    box-shadow: 0 0 15px rgba(34,204,136,0.5); width: 100%; text-shadow: 0 1px 2px rgba(255,255,255,0.5); margin-top:24px;
}
#char-select-confirm-btn:hover { filter: brightness(1.2); transform: scale(1.02); }
#char-select-confirm-btn:active { transform: scale(0.98); }


/* ========================================================== */
/* [신규 상점 선택 팝업] */
/* ========================================================== */
#shop-select-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1000;
}
.shop-select-content {
    background: #0a150a; border: 2px solid #22cc88; border-radius: 12px;
    padding: 30px; text-align: center; box-shadow: 0 0 30px rgba(34, 204, 136, 0.3);
}
.shop-select-content h2 { color: #88cc88; margin-top: 0; font-size:24px; margin-bottom: 25px; }
.shop-select-buttons { display: flex; gap: 20px; justify-content: center; margin-bottom: 20px;}
.shop-select-buttons button {
    width: 180px; padding: 20px 10px; background: #112211; border: 2px solid #446644;
    color: #ffd700; font-size: 18px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: 0.2s;
    line-height: 1.5;
}
.shop-select-buttons button:hover { background: #22cc88; border-color: #22cc88; color: #000; }
#btn-asharil-shop { color: #d0aaff; border-color: #aa66ff; }
#btn-asharil-shop:hover { background: #aa66ff; border-color: #aa66ff; color: #fff; }
#shop-select-close-btn { padding: 10px 30px; background: transparent; border: 1px solid #446644; color: #88cc88; border-radius: 6px; cursor: pointer; }


/* ========================================================== */
/* [씨앗 상점 (아리안의 축복)] & [대장간 (아샤릴의 가호)] 공통 레이아웃 */
/* ========================================================== */
#shop-layer, #asharil-shop-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 850;
}
#shop-modal-content, #asharil-modal-content {
    background: #0a150a; border: 2px solid #22cc88; border-radius: 12px;
    width: 90%; max-width: 950px; height: 80%; max-height: 750px;
    display: flex; flex-direction: column; padding: 25px; box-sizing: border-box;
    box-shadow: 0 0 30px rgba(34,204,136,0.3); position: relative;
}
#asharil-modal-content { border-color: #aa66ff; box-shadow: 0 0 30px rgba(170,102,255,0.3); }

#shop-header, #asharil-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#shop-header h2 { font-size: 32px; color: #22cc88; margin: 0; text-shadow: 0 0 15px #005522; }
#asharil-header h2 { font-size: 32px; color: #d0aaff; margin: 0; text-shadow: 0 0 15px #440088; }
#shop-souls { font-size: 20px; color: #ffd700; text-shadow: 0 0 10px #886600; font-weight: bold; }
#asharil-currency { font-size: 20px; color: #d0aaff; text-shadow: 0 0 10px #8800ff; font-weight: bold; }

.shop-tabs { display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; }
.shop-tabs button {
    padding: 8px 18px; background: #112211; border: 2px solid #335533; min-width:124px;
    color: #88cc88; font-size: 15px; font-weight: bold; cursor: pointer; border-radius: 8px; transition: 0.2s;
}
.shop-tabs button:hover { border-color: #22cc88; }
.shop-tabs button.active { background: #22cc88; color: #003300; border-color: #22cc88; box-shadow: 0 0 15px rgba(34,204,136,0.3); }

.asharil-tab.active { background: #aa66ff !important; color: #fff !important; border-color: #aa66ff !important; box-shadow: 0 0 15px rgba(170,102,255,0.3) !important; }

/* 기존 스킬트리 뷰어 */
#shop-tree-viewport { flex: 1; overflow: auto; background: #050a05; border: 1px solid #1a2a1a; border-radius: 10px; position: relative; }
#shop-tree-content { min-width: max-content; min-height: 100%; display: flex; justify-content: center; align-items: center; padding: 40px; box-sizing: border-box; }
#shop-nodes-layer { display: grid; grid-auto-columns: 64px; grid-auto-rows: 64px; column-gap: 80px; row-gap: 40px; justify-items: center; align-items: center; position: relative; z-index: 1; }
#shop-svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.shop-node { width: 64px; height: 64px; background: #112211; border: 2px solid #335533; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 30px; cursor: pointer; transition: 0.2s; position: relative; }
.shop-node:hover { transform: scale(1.1); border-color: #88cc88; box-shadow: 0 0 15px rgba(136, 204, 136, 0.4); z-index: 10; }
.shop-node.unlocked { border-color: #ffd700; background: #222211; }
.shop-node.maxed { border-color: #00ffaa; box-shadow: 0 0 10px #00ffaa; color: #ffd700; }
.shop-node.locked { opacity: 0.4; border-color: #555; filter: grayscale(1); }
.shop-node .lvl-badge { position: absolute; bottom: -8px; right: -8px; background: #000; border: 1px solid #666; font-size: 10px; padding: 2px 5px; border-radius: 4px; color: #fff; font-weight: bold; }
.shop-node.unlocked .lvl-badge { border-color: #ffd700; }
.shop-node.maxed .lvl-badge { border-color: #00ffaa; color: #00ffaa; }

/* ========================================================== */
/* [신규] 아샤릴의 가호 - 장비 제작 UI */
/* ========================================================== */
.asharil-view { flex: 1; display: flex; flex-direction: column; width: 100%; background: #050a05; border: 1px solid #221133; border-radius: 10px; overflow: hidden; }
.asharil-view.hidden { display: none; }

.craft-layout { display: flex; width: 100%; height: 100%; }
.craft-list { width: 250px; background: rgba(20,10,30,0.8); border-right: 2px solid #331144; display: flex; flex-direction: column; padding: 15px; gap: 10px; overflow-y: auto; }
.craft-item { padding: 15px; background: #110a1a; border: 1px solid #331144; border-radius: 6px; color: #aaa; text-align: center; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.craft-item:hover { background: #221133; color: #fff; }
.craft-item.active { background: #331155; border-color: #aa66ff; color: #fff; box-shadow: 0 0 15px rgba(170,102,255,0.4); }

.craft-detail { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; position: relative; }
.craft-preview-box { width: 160px; height: 160px; background: radial-gradient(circle, #221133 0%, #000 100%); border: 2px dashed #aa66ff; border-radius: 12px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); }
.craft-preview-box canvas { width: 120px; height: 120px; image-rendering: pixelated; filter: drop-shadow(0 0 10px #aa66ff); }

.craft-cost-box { display: flex; align-items: center; gap: 15px; font-size: 20px; color: #d0aaff; margin-bottom: 40px; background: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 8px; border: 1px solid #331155; }
.craft-rate-btn { position: relative; width: 24px; height: 24px; background: #331155; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; cursor: help; border: 1px solid #aa66ff; }
.craft-rate-tooltip { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); width: 120px; background: rgba(0,0,0,0.9); border: 1px solid #aa66ff; border-radius: 6px; padding: 10px; font-size: 12px; line-height: 1.5; color: #ccc; text-align: left; display: none; pointer-events: none; z-index: 100; box-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.craft-rate-btn:hover .craft-rate-tooltip { display: block; }

#craft-execute-btn { padding: 15px 50px; font-size: 22px; background: linear-gradient(180deg, #aa66ff, #5511aa); color: #fff; border: 2px solid #eebbff; border-radius: 8px; font-weight: 900; cursor: pointer; transition: 0.2s; box-shadow: 0 0 20px rgba(170,102,255,0.5); }
#craft-execute-btn:hover { filter: brightness(1.2); transform: scale(1.05); }
#craft-execute-btn:disabled { background: #333; border-color: #555; color: #777; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }

.craft-progress-container { width: 80%; max-width: 400px; height: 20px; background: #111; border: 2px solid #555; border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
#craft-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #5511aa, #aa66ff, #fff); border-radius: 8px; transition: width 0.1s linear; }

@keyframes craftFlash {
    0% { background-color: #fff; box-shadow: 0 0 50px #fff; }
    100% { background-color: transparent; box-shadow: none; }
}
.flash-effect { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:100; animation: craftFlash 0.5s ease-out forwards; }


/* ========================================================== */
/* [신규] 아샤릴의 가호 - 장비 착용 UI (디아블로2 식) */
/* ========================================================== */
.equip-layout { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; gap: 20px; overflow-y: auto; }
.equip-paperdoll { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 12px; border: 1px dashed #331155; box-sizing:border-box;}
.equip-row { display: flex; justify-content: center; gap: 20px; width: 100%; }
.equip-slot { width: 64px; height: 64px; background: #0a0a0f; border: 2px solid #444; border-radius: 6px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; transition: 0.2s; box-shadow: inset 0 0 15px rgba(0,0,0,0.8); }
.equip-slot:hover { border-color: #aa66ff; box-shadow: 0 0 10px rgba(170,102,255,0.4); }
.slot-placeholder { font-size: 12px; color: #555; font-weight: bold; pointer-events: none; }
.equip-slot canvas { width: 48px; height: 48px; image-rendering: pixelated; pointer-events: none; }

.equip-inventory-container { flex: 1; background: rgba(20,10,30,0.6); border: 2px solid #331155; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; }
.inventory-header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-top: 12px; padding-bottom: 5px; 
}
.inventory-status { font-size: 16px; color: #aaddaa; margin-bottom: 10px; font-weight: bold; }
#equip-inventory-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 48px; gap: 4px; overflow-y: auto; align-content: start; }
.inven-slot { background: #050a05; border: 1px solid #333; border-radius: 4px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.1s; position: relative; }
.inven-slot:hover { border-color: #aa66ff; background: #1a0a2a; }
.inven-slot canvas { width: 36px; height: 36px; image-rendering: pixelated; pointer-events: none; }
.inven-slot.empty { cursor: default; }
.inven-slot.empty:hover { border-color: #333; background: #050a05; }

/* 장비 등급별 테두리 및 텍스트 색상 */
.rarity-normal { border-color: #aaaaaa !important; }
.rarity-magic { border-color: #4488ff !important; }
.rarity-rare { border-color: #aa44ff !important; }
.rarity-epic { border-color: #ffff44 !important; box-shadow: inset 0 0 10px rgba(190, 255, 68, 0.3) !important; }
.rarity-legendary { border-color: #ff8800 !important; box-shadow: inset 0 0 10px rgba(255,136,0,0.4) !important; }
.rarity-relic { border-color: #ff4444 !important; box-shadow: inset 0 0 15px rgba(255,68,68,0.5) !important; }
.rarity-mythic { border-color: #ff00aa !important; box-shadow: inset 0 0 20px rgba(255,0,170,0.6) !important; animation: mythicGlow 2s infinite alternate; }

.text-normal { color: #aaaaaa; }
.text-magic { color: #4488ff; }
.text-rare { color: #aa44ff; }
.text-epic { color: #ffff44; }
.text-legendary { color: #ff8800; }
.text-relic { color: #ff4444; }
.text-mythic { color: #ff00aa; text-shadow: 0 0 5px #ff00aa; }

@keyframes mythicGlow { from { box-shadow: inset 0 0 10px rgba(255,0,170,0.4), 0 0 5px rgba(255,0,170,0.4); } to { box-shadow: inset 0 0 25px rgba(255,0,170,0.8), 0 0 15px rgba(255,0,170,0.8); } }

/* 장비 툴팁 */
#equip-tooltip { position: absolute; z-index: 1050; background: rgba(5, 5, 10, 0.95); border: 2px solid #555; border-radius: 8px; padding: 15px; width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.9); pointer-events: auto; }
#equip-tt-name { margin: 0 0 5px 0; font-size: 16px; font-weight: 900; text-align: center; }
#equip-tt-type { font-size: 12px; color: #888; text-align: center; margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 8px; }
#equip-tt-stats { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #ddd; margin-bottom: 15px; }
.equip-tt-actions { display: flex; gap: 5px; }
.equip-tt-btn { flex: 1; padding: 8px 0; font-size: 13px; font-weight: bold; background: #222; border: 1px solid #555; color: #fff; cursor: pointer; border-radius: 4px; transition: 0.1s; }
.equip-tt-btn.equip-btn:hover { background: #228844; border-color: #22cc88; }
.equip-tt-btn.unequip-btn:hover { background: #886622; border-color: #ffaa00; }
.equip-tt-btn.disassemble-btn:hover { background: #882222; border-color: #ff4444; }

/* 시드샵 팝업 툴팁 */
#shop-tooltip {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 320px; background: #152215; border: 3px solid #448844; border-radius: 15px;
    padding: 20px; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 0 50px rgba(0,30,0,0.95); z-index: 1000;
}
.shop-card-icon-container { width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
#tooltip-icon { font-size: 40px; }
.shop-card-header h3 { margin: 0; font-size: 20px; color: #aaddaa; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,0.5); }
.shop-card-divider { width: 100%; height: 2px; background: rgba(255,255,255,0.15); margin: 15px 0; }
.shop-card-stats { width: 100%; text-align: center; }
.shop-stat-level { color: #88cc88; font-size: 14px; margin-bottom: 10px; font-weight: bold; }
.shop-stat-next { color: #ffd700; font-size: 13px; margin-bottom: 5px; }
.shop-stat-total { color: #aaa; font-size: 12px; }
.shop-card-desc { color: #88aa88; font-size: 13px; text-align: center; line-height: 1.5; margin-bottom: 20px; font-weight: normal; }
#tooltip-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #446644; font-size: 20px; cursor: pointer; }
#tooltip-close-btn:hover { color: #fff; }
#tooltip-buy-btn { padding: 12px 0; background: #228844; border: none; color: #fff; font-size: 18px; font-weight: bold; cursor: pointer; border-radius: 8px; width: 100%; box-shadow: 0 4px 0 #115522; transition: transform 0.1s; }
#tooltip-buy-btn:hover { background: #33aa55; transform: translateY(-2px); }
#tooltip-buy-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #115522; }
#tooltip-buy-btn:disabled { background: #334433; color: #556655; cursor: not-allowed; box-shadow: none; transform: none; }

/* --- 인게임 UI (NEW LAYOUT) --- */
#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* 1. 좌측 상단 (레벨 & 아이콘) */
#hud-top-left {
    position: absolute; top: 20px; left: 20px;
    display: flex; flex-direction: column; gap: 5px;
}
#level-display { color: #ffd700; font-size: 32px; font-weight: 900; text-shadow: 2px 2px 0 #000; }
#hud-upgrades { display: flex; flex-direction: column; gap: 2px; pointer-events: auto; }
.hud-row { display: flex; gap: 2px; }
.hud-icon { width: 24px; height: 24px; background: #112211; border: 1px solid #224422; border-radius: 4px; display: flex; justify-content: center; align-items: center; font-size: 14px; cursor: help; position: relative; }
#hud-row-combat .hud-icon { border-color: #f55; }
#hud-row-survival .hud-icon { border-color: #5f5; }
#hud-row-utility .hud-icon { border-color: #5af; }
.hud-icon .count { position: absolute; bottom: -2px; right: -2px; font-size: 8px; color: #fff; text-shadow: 1px 1px 0 #000; }

/* 2. 우측 상단 (PC 기준: 시간 -> 씨앗 -> 난이도) */
#hud-top-right {
    position: absolute; top: 20px; right: 20px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
#timer-display { 
    color: #fff; font-size: 30px; font-weight: 900; letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(34, 204, 136, 0.5); order: 1;
}
#ingame-souls { font-size: 20px; color: #aaddaa; text-shadow: 1px 1px 0 #000; order: 2; }
#ingame-asharil { font-size: 20px; color: #d0aaff; text-shadow: 1px 1px 0 #000; order: 3; }
#difficulty-display { font-size:14px; color:#aaa; font-weight:bold; text-shadow:1px 1px 0 #000; order: 4; }
#pause-btn {
    width: 40px; height: 40px; background: rgba(0,20,0,0.5); border: 2px solid #448844; border-radius: 50%;
    color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; pointer-events: auto;
    display: flex; justify-content: center; align-items: center; margin-bottom: 5px;
    display: none; order: 0; 
}
#pause-btn:hover { background: #224422; border-color: #fff; }

/* 3. 플로팅 UI (캐릭터 머리 위 HP/Dash) */
#player-floating-hud {
    position: absolute; top: 0; left: 0; 
    width: 60px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    transform: translate(-50%, -100%); 
    pointer-events: none;
    z-index: 100;
}

#floating-hp-container {
    width: 60px; height: 13px; background: #220000; 
    border: 1px solid #000; position: relative;
}
#floating-hp-bar { width: 100%; height: 100%; background: #cc0000; transition: width 0.1s; }
#floating-hp-text {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    font-size: 9px; color: #fff; font-weight: bold; text-align: center; line-height: 13px;
    text-shadow: 1px 1px 0 #000;
}

#floating-dash-container {
    width: 60px; height: 8px; background: #001122;
    border: 1px solid #000;
    position: relative; 
}
#floating-dash-bar { width: 100%; height: 100%; background: #0088ff; transition: width 0.1s; }

#floating-dash-count {
    position: absolute; right: 2px; top: 0; bottom: 0;
    font-size: 8px; color: #fff; font-weight: bold;
    display: flex; align-items: center; justify-content: flex-end;
    text-shadow: 1px 1px 0 #000;
    z-index: 2;
}

/* 경험치 바 */
#exp-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: #051005; }
#exp-bar { width: 0%; height: 100%; background: #22cc88; transition: width 0.2s; box-shadow: 0 0 10px #22cc88; }

/* ----------------------------------------------------- */
/* [모바일 컨트롤러 스타일] */
/* ----------------------------------------------------- */
#mobile-controls {
    display: none; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; 
    z-index: 800;
}

#joystick-zone {
    position: absolute; bottom: 30px; left: 30px;
    width: 115px; height: 115px;
    pointer-events: auto; 
}

#joystick-base {
    position: relative;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
}

#joystick-stick {
    position: absolute;
    top: 50%; left: 50%;
    width: 46px; height: 46px;
    background: rgba(34, 204, 136, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(34, 204, 136, 0.5);
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
}

#mobile-dash-btn {
    position: absolute; bottom: 30px; right: 30px;
    width: 70px; height: 70px;
    background-color: rgba(20, 20, 20, 0.6); 
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    pointer-events: auto;
    font-size: 24px; color: #fff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    overflow: hidden; 
}
#mobile-dash-btn span { z-index: 1; text-shadow: 0 0 5px #000; }
#mobile-dash-btn:active { transform: scale(0.95); border-color: #fff; }

#mobile-dash-count {
    position: absolute; bottom: 8px; right: 12px;
    font-size: 14px; color: #ffd700; font-weight: 900;
    text-shadow: 1px 1px 0 #000; z-index: 2;
}

/* ----------------------------------------------------- */
/* [레벨업 카드 스타일] */
/* ----------------------------------------------------- */
#level-up-modal, #game-over-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 20, 30, 0.65); 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    pointer-events: auto; 
    z-index: 900;
}

#upgrade-options { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; perspective: 1000px; margin-top:20px;}

.upgrade-card {
    width: 220px; 
    height: auto; 
    min-height: 280px;
    padding-top:42px;
    border-radius: 6px;
    background: #2b2b35;
    border: 2px solid #444; 
    box-shadow: 0 7px 25px rgba(200,200,200,0.015); 
    display: flex; flex-direction: column; align-items: center;
    text-align: center; cursor: pointer;
    transition: transform 0.1s;
    position: relative;
    overflow: visible;
    animation: slideUp 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    opacity: 0; transform: translateY(50px);
}

@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

.upgrade-card:hover { transform: translateY(-5px); filter: brightness(1.1); }

/* 레벨업 카드 단축키 아이콘 */
.shortcut-icon {
    position: absolute;
    bottom: -20px;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    background: #1a1a24;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ccc;
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 0 #111, inset 0 2px 0 rgba(255,255,255,0.1);
    transition: all 0.1s;
    z-index: 10;
}

.upgrade-card:hover .shortcut-icon {
    border-color: #ffd700; color: #ffd700; box-shadow: 0 4px 0 #886600, inset 0 2px 0 rgba(255,255,255,0.2); transform: translateY(-2px);
}

.card-icon-container { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center; position:absolute; top:-32px; left:calc(50% - 32px); }
.card-icon { width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)); }
.card-header-info { display:flex; width:100%; flex-direction:column; justify-content:center; align-items:center; }
.card-header-info h3 { display:flex; width:100%; justify-content:center; align-items:center; font-size:16px; color: #ffffff; letter-spacing:-0.75px; margin:0 0 8px; padding:10px 0; border:4px solid #e3e3e3; font-weight:700; }
.card-level { font-size: 14px; margin-bottom: 4px; font-weight: bold; }
.card-divider { width: 100%; height: 2px; background: rgba(255,255,255,0.1); margin: 4px 0; }
.stat-main {display:flex; width:100%; justify-content:center; align-items:center; text-align:center; font-size:12px; color:#fff; margin:4px 0; font-weight:600; }
.card-sub-info { display:flex; width:100%; min-height:68px; background: rgba(0,0,0,0.55); padding:4px 6px; box-sizing:border-box; justify-content:center; align-items:center; text-align:center; flex-direction:column; }
.stat-total { font-size: 12px; color: #ddd; line-height:1.4; word-break:keep-all; }
.stat-note { font-size: 11px; color: #aaa; margin-top: 4px; line-height:1.4; word-break:keep-all;}
.card-lore { display:flex; flex-direction:row; justify-content:center; align-items:center; font-size: 11px; color: #777777; line-height: 1.4; margin-top:8px; width: 100%; font-style: normal; word-break:keep-all; padding:0 12px; box-sizing:border-box; }

.card-combat { border-color:rgba(255,154,162,0.85); background: linear-gradient(180deg, rgba(101,38,38,0.85) 0%, rgba(43,43,53,0.85) 100%); }
.card-combat .card-icon-container { background: #5e3a3a; border-color: #FF9AA2; }
.card-combat h3 { background-color: rgba(146,92,92,0.75); }
.card-combat .stat-main { color: #FF9AA2; }
.card-survival { border-color: rgba(181,234,215,0.85); background: linear-gradient(180deg, rgba(38,101,38,0.85) 0%, rgba(43,43,53,0.85) 100%); }
.card-survival .card-icon-container { background: #3a5e45; border-color: #B5EAD7; }
.card-survival h3 { background-color: rgba(92,146,92,0.75); }
.card-survival .stat-main { color: #B5EAD7; }
.card-utility { border-color: rgba(199,206,234,0.85); background: linear-gradient(180deg, rgba(42,42,101,0.85) 0%, rgba(43,43,53,0.85) 100%); }
.card-utility .card-icon-container { background: #3a3a5e; border-color: #C7CEEA; }
.card-utility h3 { background-color: rgba(92,92,146,0.75); }
.card-utility .stat-main { color: #C7CEEA; }

.banish-btn { position:absolute; top: 8px; right:12px; font-size:13px; background: #333; color: #bbb; border: 1px solid #555; padding: 4px 8px; cursor: pointer; border-radius: 4px; z-index: 20; }
.banish-btn:hover { background: #500; color: #fff; border-color: #f55; }

#reroll-btn {
    margin-top: 50px !important; padding: 15px 40px !important; font-size: 20px !important;
    background: #2b2b35; border: 3px solid #FF9AA2; color: #fff; border-radius: 12px;
    cursor: pointer; box-shadow: 0 5px 0 #d4767e; transition: transform 0.1s;
}
#reroll-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
#reroll-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #d4767e; }
#reroll-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #555; box-shadow: 0 5px 0 #333; }

#game-over-title { font-size: 60px; color: #cc3333; margin-bottom: 20px; text-shadow: 0 0 30px #500; }
#reward-summary { background: #0a1a0a; border: 1px solid #224422; padding: 20px 40px; margin-bottom: 30px; text-align: right; color: #88aa88; font-size: 18px; line-height: 1.8; }
#reward-summary span { color: #fff; font-weight: bold; }
#reward-summary .bonus span { color: #aaddaa; }
#reward-summary .total span { color: #ffd700; font-size: 24px; }

#game-tooltip {
    position: absolute; z-index: 600; background: rgba(5,15,5,0.95); border: 1px solid #448844; border-radius: 5px;
    padding: 10px; pointer-events: none; white-space: nowrap; z-index: 950;
}
#g-tooltip-title { color: #ffd700; font-size: 14px; margin-bottom: 5px; }
#g-tooltip-desc { color: #ccc; font-size: 12px; }

/* ----------------------------------------------------------- */
/* [일시정지/상태창 (PC Default)] */
/* ----------------------------------------------------------- */
#status-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 10, 0, 0.9); backdrop-filter: blur(5px);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    pointer-events: auto; z-index: 900;
    padding-top: 20px; padding-bottom: 20px;
}
#status-modal h2 { margin-top:8px; margin-bottom:8px; font-size: 24px; letter-spacing:0.25px; color:#eee;}

.settings-tabs { display: flex; gap: 12px; margin-bottom: 8px; border-bottom: 2px solid #224422; width: 90%; max-width: 600px; justify-content: center; }
.settings-tab { background: transparent; color: #88aa88; border: none; font-size: 16px; padding: 8px 16px; cursor: pointer; transition: 0.2s; font-weight: bold; }
.settings-tab:hover { color: #fff; }
.settings-tab.active { color: #22cc88; border-bottom: 3px solid #22cc88; text-shadow: 0 0 10px rgba(34,204,136,0.5); }

.tab-content { width: 90%; max-width: 750px; display: none; flex-direction: column; padding-bottom: 30px; }
.tab-content.active { display: flex; }

.status-layout { display: flex; width: 100%; height: auto; gap: 15px; }
.status-left, .status-right { flex: 1; background: rgba(15, 25, 15, 0.8); border-radius: 8px; padding: 16px; border: 1px solid #335533; overflow: visible !important; height: auto !important; }
.status-left {flex:1.5;}
.status-right {flex:1;}

.status-panel-title { color: #aaddaa; margin-top: 0; border-bottom: 1px solid #335533; padding-bottom: 8px; margin-bottom: 12px; font-size:16px;}

.item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start; padding-bottom: 60px; }
.grid-item { position: relative; width: 48px; height: 48px; background: #112211; border: 2px solid #446644; border-radius: 6px; display: flex; justify-content: center; align-items: center; cursor: help; transition: 0.2s; }
.grid-item.special { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.3); }
.grid-item:hover { border-color: #ffd700; transform: scale(1.1); z-index: 50; }
.grid-item img { width: 36px; height: 36px; image-rendering: pixelated; }
.grid-item .item-lv { position: absolute; bottom: -6px; right: -6px; background: #000; color: #ffd700; font-size: 11px; padding: 2px 4px; border-radius: 4px; font-weight: bold; border: 1px solid #666; }

.stat-bar-row { position:relative; display: flex; align-items: center; gap: 8px; margin-bottom:6px;}
.stat-bar-row.tooltip-target { cursor: help; }
.stat-tooltip { position: absolute; top: 120%; left: 50%; transform: translateX(-50%); width: 220px; background: rgba(0, 15, 0, 0.95); border: 1px solid #22cc88; color: #ddd; padding: 10px; border-radius: 6px; font-size: 11px; z-index: 1000; display: none; pointer-events: none; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.9); line-height: 1.4; }
.stat-bar-row.tooltip-target:hover .stat-tooltip { display: block; }

.grid-tooltip { position: absolute; top: 120%; left: 50%; transform: translateX(-50%); width: 200px; background: rgba(0, 10, 0, 0.95); border: 2px solid #22cc88; color: #eee; padding: 12px; border-radius: 8px; font-size: 12px; z-index: 1000; display: none; pointer-events: none; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.grid-item:hover .grid-tooltip { display: block; }
.grid-tooltip h4 { margin: 0 0 8px 0; color: #ffd700; font-size: 15px; border-bottom: 1px solid #335533; padding-bottom: 4px; }

/* 게임 설정 탭 */
.settings-group { margin-bottom: 20px; background: rgba(15, 25, 15, 0.8); padding: 20px; border-radius: 8px; border: 1px solid #335533; }
.settings-group h3 { margin-top: 0; color: #ffd700; border-bottom: 1px solid #446644; padding-bottom: 8px; margin-bottom: 15px; font-size: 18px; }
.slider-row { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; }
.slider-row label { width: 60px; font-size: 15px; color: #ccc; }
.slider-row input[type="range"] { flex: 1; accent-color: #22cc88; cursor: pointer; }
.checkbox-row, .radio-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; color: #ddd; cursor: pointer; }
.checkbox-row input, .radio-row input { accent-color: #22cc88; transform: scale(1.3); cursor: pointer; }

/* 바닥 고정 버튼 영역 */
.status-btnbox { display: flex; width: 100%; max-width: 400px; gap: 15px; padding-top: 15px; flex-shrink: 0; justify-content:center; box-sizing:border-box;}
#resume-btn, #quit-btn { flex: 1; padding: 15px; font-size: 18px; background: #1a2a1a; border: 2px solid #446644; color: #fff; cursor: pointer; border-radius: 8px; font-weight: bold; transition: 0.2s;}
#resume-btn:hover { background: #228844; border-color: #22cc88; }
#quit-btn:hover { background: #aa3333; border-color: #ff5555; }

/* ----------------------------------------------------------- */
/* 확인 팝업 스타일 공통 */
/* ----------------------------------------------------------- */
#quit-confirm-modal, #disassemble-confirm-modal, #inventory-full-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1100;
}
.confirm-content {
    background: #152215; border: 2px solid #cc3333; border-radius: 12px;
    padding: 25px; width: 320px; text-align: center; box-shadow: 0 0 30px rgba(204, 51, 51, 0.3);
}
.confirm-content h3 { color: #ff5555; margin-top: 0; margin-bottom: 15px; font-size: 22px; }
.confirm-content p { color: #ccc; font-size: 13px; line-height: 1.5; margin-bottom: 25px; }
.confirm-buttons { display: flex; gap: 10px; }
.confirm-buttons button {
    flex: 1; padding: 12px; background: #223322; border: 1px solid #446644;
    color: #fff; cursor: pointer; border-radius: 6px; font-weight: bold; font-size: 16px; transition: 0.2s;
}
#quit-confirm-btn:hover, #disassemble-confirm-btn:hover { background: #cc3333; border-color: #ff5555; color: #fff; }
#quit-cancel-btn:hover, #disassemble-cancel-btn:hover, #inventory-full-ok-btn:hover { background: #228844; border-color: #22cc88; color: #fff; }

/* 스테이지 입장 메시지 */
#stage-announcement {
    position: absolute; top: 35%; left: 0; width: 100%; text-align: center;
    font-size: 48px; font-weight: 900; z-index: 900; pointer-events: none;
    opacity: 0; letter-spacing: 3px; font-family: 'Noto Sans KR', sans-serif; transform: scale(0.8);
}
@keyframes announce-fade { 0% { opacity: 0; transform: scale(0.8); } 15% { opacity: 1; transform: scale(1.1); } 20% { transform: scale(1.0); } 80% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.2); } }
.announce-normal { color: #ffffff; text-shadow: 0 0 10px #88cc88, 0 0 20px #22aa22; animation: announce-fade 4s ease-out forwards; }
.announce-hard { color: #ffcc00; text-shadow: 0 0 10px #ff6600, 0 0 20px #ff2200; border-top: 2px solid rgba(255, 100, 0, 0.5); border-bottom: 2px solid rgba(255, 100, 0, 0.5); background: linear-gradient(90deg, transparent, rgba(255,100,0,0.2), transparent); padding: 20px 0; animation: announce-fade 4s ease-out forwards; }
.announce-nightmare { color: #ff0000; text-shadow: 2px 2px 0px #000, 0 0 15px #ff0000; font-style: italic; animation: announce-fade 4s ease-out forwards, glitch-anim 0.2s infinite; }
.announce-hell { color: #d0aaff; text-shadow: 0 0 10px #8800ff, 0 0 30px #440088; background: radial-gradient(circle, rgba(60,0,100,0.6) 0%, transparent 70%); padding: 40px 0; animation: announce-fade 4s ease-out forwards; }

@keyframes glitch-anim { 0% { transform: translate(0,0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, -2px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(2px, 2px); } 100% { transform: translate(0,0); } }

/* 보스 HUD 스타일 */
#boss-hud { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 60%; max-width: 600px; display: flex; flex-direction: column; align-items: center; z-index: 50; pointer-events: none; }
#boss-name { font-size: 18px; color: #ff4444; font-weight: 900; text-shadow: 0 0 10px #000; margin-bottom: 5px; letter-spacing: 2px; }
#boss-hp-bar-bg { width: 100%; height: 20px; background: #300; border: 2px solid #500; border-radius: 10px; overflow: hidden; box-shadow: 0 0 15px rgba(255, 0, 0, 0.3); }
#boss-hp-bar { width: 100%; height: 100%; background: linear-gradient(90deg, #800, #f00); transition: width 0.2s; }

/* 퀘스트 HUD 스타일 */
#quest-hud { position: absolute; right: 20px; top: 40%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; pointer-events: none; z-index: 100; }
.quest-item { display: flex; flex-direction: column; align-items: flex-end; transition: all 0.5s ease; background: radial-gradient(circle at right, rgba(0,0,0,0.5) 0%, transparent 80%); padding: 10px; border-radius: 8px; }
.quest-item.completed { opacity: 0; transform: translateX(50px) scale(0.9); }
.quest-title { font-size: 16px; color: #f2e2a0; font-weight: bold; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; text-shadow: 1px 1px 2px #000, 0 0 5px rgba(242, 226, 160, 0.5); }
.quest-obj { font-size: 13px; color: #b0e0e6; display: flex; flex-direction:row; justify-content:flex-start; align-items:center; gap: 2px; line-height:1; text-shadow: 1px 1px 2px #000; }
.ui-particle { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 1000; box-shadow: 0 0 8px currentColor; }

/* 몬스터 도감 스타일 */
#bestiary-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 850; }
#bestiary-modal-content { background: #0a150a; border: 2px solid #22cc88; border-radius: 12px; width: 90%; max-width: 950px; height: 80%; max-height: 750px; display: flex; flex-direction: column; padding: 25px; box-sizing: border-box; box-shadow: 0 0 30px rgba(34,204,136,0.3); position: relative; }
#bestiary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#bestiary-header h2 { font-size: 32px; color: #22cc88; margin: 0; text-shadow: 0 0 15px #005522; }
#bestiary-unlocked-count { font-size: 20px; color: #ffd700; text-shadow: 0 0 10px #886600; font-weight: bold; }
.bestiary-tabs { display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; }
.bestiary-tabs button { padding: 8px 18px; background: #112211; border: 2px solid #335533; min-width:124px; color: #88cc88; font-size: 15px; font-weight: bold; cursor: pointer; border-radius: 8px; transition: 0.2s; }
.bestiary-tabs button:hover { border-color: #22cc88; }
.bestiary-tabs button.active { background: #22cc88; color: #003300; border-color: #22cc88; box-shadow: 0 0 15px rgba(34,204,136,0.3); }
#bestiary-viewport { flex: 1; overflow: auto; background: #050a05; border: 1px solid #1a2a1a; border-radius: 10px; position: relative; padding: 20px; }
#bestiary-content { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.bestiary-stage-section { background: rgba(50,100,50,0.05); border: 1px solid #224422; border-radius: 12px; padding: 25px; }
.bestiary-stage-section h3 { color: #88ee88; border-bottom: 2px solid #224422; padding-bottom: 10px; margin-top: 0; text-align: center; font-size: 22px; }
.bestiary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
.monster-card { width: 100%; max-width: 320px; height: 80px; background: #0f1f0f; border: 2px solid #335533; border-radius: 8px; display: flex; flex-direction:row; align-items: center; justify-content: flex-start; padding:8px; box-sizing:border-box; gap:12px; position: relative; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }
.monster-card canvas { width: 54px; height: 54px; image-rendering: pixelated; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5)); border: 2px solid #45532e; border-radius:8px; overflow:hidden; }
.monster-name { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; font-size: 16px; color: #cfc; text-align: center; font-weight: bold; word-break:keep-all;}
.monster-card.locked { background: #050a05; border-color: #1a2a1a; box-shadow: none; }
.monster-card.locked canvas { display: none; }
.monster-card.locked .monster-name { color: #555; order:2;}
.locked-q { display:flex; width:58px; height:58px; justify-content:center; align-items:center; font-size: 32px; font-weight: 700; color:#FFFFFF; border:1px solid #575757; border-radius:10px; order:1;}
#close-bestiary-btn { padding: 12px 40px; font-size: 18px; background: transparent; border: 2px solid #446644; color: #88cc88; cursor: pointer; font-weight: bold; margin-top: 20px; align-self: center; transition: 0.2s; border-radius: 8px; }
#close-bestiary-btn:hover { background: #335533; color: #fff; }

/* 몬스터 상세 팝업 */
#monster-detail-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 900; display: flex; justify-content: center; align-items: center; }
.md-content { background: #0a150a; border: 2px solid #22cc88; border-radius: 12px; width: 340px; padding: 25px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 0 30px rgba(34,204,136,0.3); }
#md-image-container { width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; background: #050a05; border-radius: 10px; border: 1px solid #1a2a1a; margin-bottom: 15px; }
#md-name { color: #88ff88; font-size: 26px; margin: 0 0 15px 0; text-align: center; }
.md-divider { color: #558855; font-size: 14px; margin-bottom: 15px; font-weight: bold; }
#md-stats-container { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
.md-diff-block { background: #112211; border: 1px solid #224422; border-radius: 6px; padding: 10px; text-align: center; }
.md-diff-block h4 { margin: 0 0 5px 0; font-size: 16px; }
.md-stats { font-size: 13px; color: #ccc; }
.md-diff-block.locked { background: #050a05; border-color: #111; }
#md-close-btn { padding: 10px 30px; font-size: 16px; background: transparent; border: 2px solid #446644; color: #88cc88; cursor: pointer; border-radius: 6px; font-weight: bold; }
#md-close-btn:hover { background: #22cc88; color: #000; border-color: #22cc88; }

/* 데이터 모달 */
#data-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 5, 0, 0.95); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.data-content { background: #112211; border: 2px solid #22cc88; border-radius: 12px; padding: 25px; width: 85%; max-width: 450px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 0 30px rgba(34, 204, 136, 0.2); }
.data-content h2 { color: #88ff88; margin: 0; text-align: center; }
#data-textarea { width: 100%; height: 120px; background: #050a05; color: #fff; border: 1px solid #446644; border-radius: 6px; padding: 10px; font-family: monospace; font-size: 11px; resize: none; box-sizing: border-box; }
#data-textarea:focus { outline: none; border-color: #22cc88; }
.data-buttons { display: flex; gap: 10px; }
.data-buttons button, #data-close-btn { flex: 1; padding: 12px; background: #224422; border: 1px solid #448844; color: #fff; cursor: pointer; border-radius: 6px; font-weight: bold; }
.data-buttons button:hover, #data-close-btn:hover { background: #22cc88; color: #000; border-color: #22cc88; }

/* 각성 별 UI */
#awaken-stars-container { position: absolute; top: -10px; left: 2px; display: flex; z-index: 10; }
.awaken-star { position: relative; width: 14px; height: 14px; display: flex; justify-content: center; align-items: center; line-height:1; }
.awaken-star:last-child { margin-left:-2px; }
.awaken-star .circle-shape { position: absolute; width: 100%; height: 100%; background-color: #ffffff; border-radius: 50%; box-shadow: 0 0 8px #ffffff; opacity: 0; }
.awaken-star .star-img { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)); opacity: 0; }
@keyframes popCircle { 0% { transform: scale(0); opacity: 1; } 40% { transform: scale(1.5); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes popStar { 0% { transform: scale(0); opacity: 0; } 49% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.5) rotate(15deg); opacity: 1; filter: brightness(2) drop-shadow(0 0 4px #fff); } 75% { transform: scale(0.8) rotate(-5deg); opacity: 1; filter: brightness(1.2); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.awaken-star.animating .circle-shape { animation: popCircle 1.5s ease-in-out forwards; }
.awaken-star.animating .star-img { animation: popStar 1.5s ease-in-out forwards; }

/* --- 신규 아샤릴 구매 모달 및 버튼 스타일 --- */
#open-buy-asharil-btn {
    padding: 6px 12px;
    background: #1a0a2a;
    border: 1px solid #aa66ff;
    color: #d0aaff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: 0.2s;
}
#open-buy-asharil-btn:hover {
    background: #331155;
    color: #fff;
    box-shadow: 0 0 10px rgba(170,102,255,0.5);
}

#buy-asharil-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1200;
}

/* 패치노트 모달 스타일 */
#patch-note-modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 2000;
}
.patch-note-content {
    background: #0a150a; border: 2px solid #22cc88; border-radius: 12px;
    width: 90%; max-width: 600px; height: 80%; max-height: 700px;
    display: flex; flex-direction: column; padding: 25px; box-sizing: border-box;
    box-shadow: 0 0 30px rgba(34,204,136,0.3);
}
.patch-note-content h2 { color: #22cc88; margin-top: 0; border-bottom: 1px solid #224422; padding-bottom: 10px; text-align: center; }
#patch-note-body { flex: 1; overflow-y: auto; color: #ddd; font-size: 14px; line-height: 1.6; padding: 10px; text-align: left; }
#patch-note-close-btn { margin-top: 20px; padding: 12px; background: #224422; border: 1px solid #448844; color: #fff; cursor: pointer; border-radius: 6px; font-weight: bold; font-size: 16px; }
#patch-note-close-btn:hover { background: #22cc88; color: #000; }

/* ========================================================== */
/* [신규] 업적 시스템 디자인 */
/* ========================================================== */
#achieve-btn { border-color: #ffd700; color: #ffd700; }
#achieve-btn:hover { background: #332200; border-color: #ffea00; color: #fff; box-shadow: 0 0 20px rgba(255,215,0,0.5); }

.achieve-item {
    display: flex; justify-content: space-between; align-items: center; padding: 15px;
    background: #111a11; border: 1px solid #334433; border-radius: 8px; transition: 0.2s;
}
.achieve-item.completed { border-color: #22cc88; background: rgba(34,204,136,0.1); }
.achieve-item.rewarded { opacity: 0.6; filter: grayscale(0.5); }
.achieve-info { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.achieve-title { font-size: 18px; color: #fff; font-weight: 900; }
.achieve-desc { font-size: 13px; color: #aaa; }
.achieve-progress-wrap { width: 60%; height: 6px; background: #000; border-radius: 3px; overflow: hidden; margin-top: 5px; border: 1px solid #333; }
.achieve-progress-bar { height: 100%; background: #ffd700; transition: width 0.3s; }

.achieve-action { margin-left: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 120px; }
.achieve-reward-text { font-size: 14px; font-weight: bold; }
.achieve-reward-text.souls { color: #ffd700; text-shadow: 0 0 5px rgba(255,215,0,0.4); }
.achieve-reward-text.asharil { color: #d0aaff; text-shadow: 0 0 5px rgba(170,102,255,0.4); }

.achieve-claim-btn {
    padding: 8px 15px; font-size: 14px; font-weight: bold; border-radius: 6px; cursor: pointer; border: none;
    background: linear-gradient(180deg, #ffea00, #ccaa00); color: #000; box-shadow: 0 0 10px rgba(255,215,0,0.5);
    animation: pulseGlow 1.5s infinite;
}
.achieve-claim-btn:hover { filter: brightness(1.2); }
.achieve-claimed-mark { color: #22cc88; font-weight: bold; font-size: 14px; }
.achieve-locked-mark { color: #555; font-size: 14px; font-weight: bold; }

@keyframes pulseGlow {
    0% { box-shadow: 0 0 5px rgba(255,215,0,0.5); transform: scale(1); }
    50% { box-shadow: 0 0 15px rgba(255,215,0,0.8); transform: scale(1.05); }
    100% { box-shadow: 0 0 5px rgba(255,215,0,0.5); transform: scale(1); }
}

/* ========================================================== */
/* [신규] 일괄 분해 UI 및 범용 모달 스타일 (PC & Base) */
/* ========================================================== */

/* 일괄 분해 버튼 */
.batch-dis-btn { 
    background: #ff4444; color: #fff; border: none; padding: 5px 12px; 
    border-radius: 4px; font-weight: bold; cursor: pointer; 
    font-size: 12px; box-shadow: 0 0 5px rgba(255,68,68,0.5); transition: 0.2s;
}
.batch-dis-btn:hover { background: #ff6666; transform: scale(1.05); }

/* 모달 레이어 배경 */
.modal-layer { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); display: flex; justify-content: center; 
    align-items: center; z-index: 1001; 
}

/* 경고창 모달 컨텐츠 */
.warning-modal-content { 
    background: #1a0a0a; border: 2px solid #ff4444; border-radius: 8px; 
    padding: 25px; width: 80%; max-width: 320px; text-align: center; 
    box-shadow: 0 0 20px rgba(255,68,68,0.4); box-sizing: border-box;
}
.warning-title { color: #ff4444; margin-top: 0; font-size: 22px; }
.warning-desc { color: #ddd; font-size: 14px; margin-bottom: 25px; line-height: 1.5; }
.highlight-yellow { color: #ffea00; }

/* 모달 하단 버튼 그룹 */
.modal-btn-group { display: flex; justify-content: center; gap: 15px; }

.danger-btn { 
    background: #ff4444; color: #fff; border: none; padding: 10px 20px; 
    border-radius: 6px; cursor: pointer; font-weight: bold; width: 45%; transition: 0.2s; box-sizing: border-box;
}
.danger-btn:hover { background: #ff6666; }

.cancel-btn { 
    background: #444; color: #fff; border: none; padding: 10px 20px; 
    border-radius: 6px; cursor: pointer; font-weight: bold; width: 45%; transition: 0.2s; box-sizing: border-box;
}
.cancel-btn:hover { background: #555; }

/* ----------------------------------------------------- */
/* [MOBILE OPTIMIZATION] */
/* ----------------------------------------------------- */
@media screen and (max-width: 968px) {
    #mobile-controls { display: block; }
    body, html, #ui-layer, #char-select-screen, #shop-layer, #asharil-shop-layer, #status-modal, #level-up-modal, #game-over-modal, #blessing-detail-modal, #achieve-modal-layer { touch-action: pan-y !important; -webkit-overflow-scrolling: touch; }
    #char-select-screen, #shop-layer, #asharil-shop-layer, #status-modal, .dungeon-ui-wrapper, #achieve-modal-layer { overflow-y: auto !important; padding-bottom: 50px; }
    #char-list, .shop-column, .status-content, .status-left, .status-right, #bestiary-viewport, .craft-layout, .equip-layout, #achieve-list-container { overflow-y: auto !important; touch-action: pan-y !important; }

    .shortcut-icon { display: none !important; }
    .game-title { font-size: 40px; margin-top: 30px; }
    #total-souls-display, #total-asharil-display { font-size: 16px !important; padding: 8px 12px !important; }
    .button-container { flex-direction: column; gap: 15px; }
    #start-btn, #shop-btn, #bestiary-btn, #install-btn, #data-btn, #achieve-btn { padding: 12px 30px; font-size: 16px; }
    
    .dungeon-ui-wrapper { flex-direction: column; width: 95%; height: 90%; max-height: none; padding-bottom:12px;}
    .dungeon-left-panel { border-right: none; border-bottom: 2px solid #1a2a1a; flex: auto; padding: 10px; }
    #dungeon-preview-container { height: 180px; }
    #dungeon-title { font-size: 20px; }
    .dungeon-right-panel { padding: 10px; flex: auto; }
    .dungeon-list-item { padding: 8px 10px; margin-bottom: 5px; }
    .dungeon-list-icon { font-size: 18px; margin-right: 10px; width: 20px; }
    .dungeon-list-name { font-size: 14px; }
    #dungeon-action-panel { flex-direction: column; }
    #dungeon-enter-btn, #dungeon-back-btn { padding: 12px; font-size: 16px; }
    
    #char-select-screen { padding:0 15px 15px;}
    #char-select-header { padding:0 15px; top:15px; }
    #char-select-header h2 { font-size: 22px; }
    #char-top-section { min-height: 250px; height:45%;}
    #char-image-wrapper { width: 100%; height: 120%; }
    #char-dot-canvas { width: 64px; height: 64px; right:5px; bottom:40px; }
    .char-nav-btn { font-size: 30px; padding: 5px; }
    .char-tag { font-size: 10px; padding: 3px 8px; }
    #char-bottom-section { flex:1; padding: 12px; max-width: 100%; border-width: 1px; }
    #char-name-display { font-size: 20px; margin-bottom: 5px; }
    #char-desc-display { font-size: 11px; margin-bottom: 10px; }
    .char-tabs-header { margin-bottom: 10px; }
    .char-tab-btn { font-size: 13px; padding: 8px 0; }
    .stats-layout { flex-direction: row; gap: 8px; padding-bottom:0;}
    .radar-wrapper { width: 140px; height: 140px; flex: 0 0 140px; margin:15px auto; }
    .stat-bar-label { width: 70px; font-size: 12px; }
    .stat-bar-value { width: 45px; font-size: 12px; }
    .passive-box, .evo-box { padding: 10px; gap: 10px; }
    .passive-icon, .evo-icon { width: 40px; height: 40px; font-size: 20px; }
    .passive-title, .evo-title { font-size: 13px; }
    .passive-desc, .evo-desc { font-size: 11px; }
    #char-select-confirm-btn { font-size: 15px; padding: 12px; margin-top: 10px; }

    /* 모바일 대장간 UI 최적화 */
    .craft-layout { flex-direction: column; }
    .craft-list { overflow:hidden; gap:8px; width: 100%; height: auto; flex-direction: row; flex-wrap:wrap; border-right: none; border-bottom: 2px solid #331144; padding:8px; box-sizing:border-box;}
    .craft-item { flex: 1; padding: 16px 4px; font-size: 12px; }
    .craft-detail { padding: 12px; box-sizing: border-box;}
    .craft-preview-box { width: 80px; height: 80px; margin-bottom: 12px;}
    .craft-preview-box canvas { width: 52px; height: 52px;}
    .craft-cost-box {gap:8px; font-size:14px; margin-bottom:12px; padding:6px 12px;}
    .craft-rate-btn {width:16px; height:16px; font-size:10px;}
    #craft-execute-btn {padding:8px 24px; font-size:14px; font-weight:700;}
    .equip-paperdoll { padding: 10px; }
    .equip-row { gap: 10px; }
    .equip-slot { width: 50px; height: 50px; }
    #equip-inventory-grid { grid-template-columns: repeat(5, 1fr); }

    #shop-header, #asharil-header { margin-top: 10px; flex-direction: row; padding: 10px; }
    #shop-header h2, #asharil-header h2 { font-size: 20px; }
    #shop-souls, #asharil-currency { font-size: 14px; }
    #shop-nodes-layer { column-gap: 40px; row-gap: 50px; grid-auto-columns: 44px; grid-auto-rows: 44px; }
    .shop-node { width: 44px; height: 44px; font-size: 20px; }
    .shop-node .lvl-badge { right: -5px; bottom: -5px; font-size: 9px; padding: 1px 4px; }
    #shop-tooltip { width: 90%; max-width: 320px; }

    #bestiary-modal-content { width: 95%; height: 90%; padding: 15px; }
    #bestiary-header { margin-bottom: 15px; flex-direction: row; padding: 10px; box-sizing:border-box;}
    #bestiary-header h2 { font-size: 20px; }
    #bestiary-unlocked-count {font-size: 16px;}
    .bestiary-tabs { margin-bottom: 15px; flex-wrap: wrap; gap: 5px; }
    .bestiary-tabs button { padding: 6px 8px; font-size: 12px; min-width: 94px; }
    #bestiary-viewport { padding: 15px; }
    #close-bestiary-btn { padding: 10px 30px; font-size: 16px; margin-top: 15px; }
    
    .upgrade-card { width: 150px; height: auto; min-height: 220px; padding-top:32px; }
    .card-icon-container {width:48px; height:48px; top:-24px; left:calc(50% - 24px);}
    .card-icon {width:32px; height:32px;}
    .banish-btn {top:2px; right:4px;}
    .card-header-info h3 {font-size:14px; font-weight:600; padding:6px 0; margin:0 0 4px;}
    .card-level {font-size:13px; margin-bottom:2px;}
    .stat-main {font-size:11px; margin:2px 0;}
    .card-sub-info {padding:2px 4px; min-height:80px;}
    .stat-total {font-size:11px;}
    .stat-note {font-size:8px;}
    .card-lore {margin:4px 0; font-size:8px;}

    #status-modal { padding-top: 15px; padding-bottom: 50px; }
    .tab-content { width: 95%; margin-bottom: 0; padding-bottom: 20px; }
    .status-layout { flex-direction: column; }
    .status-btnbox {justify-content:center; padding:0 8px;}
    #resume-btn, #quit-btn { padding:12px 8px; margin: 0; font-size: 14px; }
    .status-left {flex:auto; overflow:visible !important;}
    .status-right {flex:220px; overflow:visible !important;}
    .item-grid {grid-template-columns:repeat(5, 1fr);}
    
    .settings-group { padding: 15px; margin-bottom: 15px; }
    .settings-group h3 { font-size: 16px; margin-bottom: 12px; }
    .slider-row label { font-size: 13px; width: 50px; }
    .checkbox-row, .radio-row { font-size: 13px; margin-bottom: 12px; }
    .confirm-content { width: 85%; padding: 20px; box-sizing: border-box; }
    .confirm-content h3 { font-size: 18px; }

    #hud-top-right { top: 15px; right: 15px; gap: 3px; }
    #timer-display { font-size: 16px; order: 2; }
    #ingame-souls { font-size: 12px; order: 3; }
    #ingame-asharil { font-size: 12px; order: 4; }
    #difficulty-display { font-size: 10px; order: 5; }
    #pause-btn { display: flex; width: 32px; height: 32px; font-size: 14px; order: 1; border: 1px solid #fff; }

    #hud-top-left { top: 15px; left: 15px; }
    #level-display { font-size: 14px; margin-bottom: 2px; }
    #hud-upgrades { flex-direction: row; flex-wrap: wrap; width: 140px; gap: 2px; }

    #floating-dash-container { display: none; }
    #stage-announcement { font-size:20px; letter-spacing:-0.25px; top: 45%; width: 90%; left: 5%; }
    #boss-hud { top: 120px; width: 80%; }
    #boss-name { font-size: 14px; }
    #boss-hp-bar-bg { height: 14px; }
    
    #quest-hud { right: 10px; top: 30%; gap: 6px; }
    .quest-item {padding:6px;}
    .quest-title { font-size: 10px; margin-bottom:3px; gap:1px;}
    .quest-obj { font-size: 8px; gap:1px;}
    .bestiary-grid { grid-template-columns: repeat(3, 1fr); }
    .monster-card { flex-direction:column; height:auto; }
    .monster-card canvas { width: 48px; height: 48px; }
    .monster-name {font-size:11px;}
    .locked-q {width:48px; height:48px; font-size:18px;}

    #shop-modal-content, #asharil-modal-content { width: 95%; height: 90%; padding: 15px; }
    .shop-tabs { gap: 5px; margin-bottom: 15px; flex-wrap: wrap; }
    .shop-tabs button { padding: 6px 8px; font-size: 12px; min-width:94px;}
    #close-shop-btn, #close-asharil-btn { padding: 10px 30px; font-size: 16px; margin-top: 15px; }
    
    .shop-select-content h2 {font-size:18px; margin-bottom:15px;}
    .shop-select-content {width:90%; left:5%; padding:16px; box-sizing:border-box;}
    .shop-select-buttons {margin-bottom:15px; gap:12px;}
    .shop-select-buttons button {width:120px; padding:12px 8px; font-size:14px;}

    /* 패치노트 모달 (모바일 대응) */
    .patch-note-content { width: 95%; height: 80%; padding: 15px; }
    
    /* 업적화면 */
    .achieve-info {gap:4px;}
    .achieve-title {font-size:14px;}
    .achieve-desc {font-size:11px;}
    .achieve-action {min-width:40px; margin-left:10px; gap:4px;}
    .achieve-reward-text {font-size:12px;}
    .achieve-claimed-mark {font-size:12px;}
    .achieve-locked-mark {font-size:12px;}
    .achieve-claim-btn {padding:6px 12px; font-size:10px;}

    /* 장비함 일괄분해 */
    .batch-dis-btn { padding: 4px 10px; font-size: 11px; }
    
    .warning-modal-content { width: 90%; padding: 20px 15px; }
    .warning-title { font-size: 18px; }
    .warning-desc { font-size: 13px; margin-bottom: 20px; }
    .danger-btn, .cancel-btn { padding: 8px 10px; font-size: 13px; }
}