/* ===== 기본 리셋 & SF 색상 팔레트 ===== */
:root {
  --bg-dark: #0a0e1a;
  --bg-space: #0f1428;
  --panel-bg: #151a30;
  --panel-bg-light: #1c2240;
  --panel-border: #2a3460;
  --accent-neon: #00e5ff;
  --accent-gold: #f5c842;
  --accent-pink: #ff6baa;
  --accent-green: #39ff7e;
  --accent-purple: #b388ff;
  --text-main: #d0daf0;
  --text-dim: #7888aa;
  --text-bright: #eaf0ff;
  --stat-hp: #ff6b6b;
  --stat-mp: #6ec6f7;
  --stat-atk: #f5c842;
  --stat-def: #39ff7e;
  --stat-spd: #ff6baa;
  --stat-luk: #b388ff;
  --pixel-font: 'Press Start 2P', 'Galmuri11', monospace;
  --ui-font: 'Galmuri11', 'Press Start 2P', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-dark); font-family: var(--ui-font); color: var(--text-main); overflow: hidden; }

/* ===== 마을 제목 ===== */
.village-title {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 100;
  background: rgba(10,14,26,0.75); backdrop-filter: blur(10px);
  padding: 10px 28px; border-radius: 40px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 0 30px rgba(0,229,255,0.1);
  animation: titleFloat 3s ease-in-out infinite;
}
.title-icon { font-size: 24px; }
.title-text {
  font-family: var(--pixel-font); font-size: 16px;
  color: var(--accent-neon); text-shadow: 0 0 20px rgba(0,229,255,0.5);
  letter-spacing: 4px;
}
@keyframes titleFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* ===== 전체화면 맵 ===== */
.map-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.map-bg { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: brightness(1.0) saturate(1.15); }

/* ===== 파티클 ===== */
.particles { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.particle { position: absolute; width:4px; height:4px; border-radius:50%; opacity:0; animation: floatP 5s ease-in-out infinite; }
.particle.cyan { background: var(--accent-neon); box-shadow: 0 0 8px 3px rgba(0,229,255,0.4); }
.particle.gold { background: var(--accent-gold); box-shadow: 0 0 8px 3px rgba(245,200,66,0.4); }
.particle.pink { background: var(--accent-pink); box-shadow: 0 0 8px 3px rgba(255,107,170,0.3); }
@keyframes floatP {
  0% { opacity:0; transform:translateY(10px) scale(0.5); }
  25% { opacity:0.8; }
  50% { opacity:0.5; transform:translateY(-20px) scale(1); }
  75% { opacity:0.3; }
  100% { opacity:0; transform:translateY(-40px) scale(0.3); }
}

/* ===== NPC ===== */
.npc {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; z-index: 2; transition: transform 0.2s, filter 0.2s;
  transform: translate(-50%,-50%);
}
.npc:hover { transform: translate(-50%,-50%) scale(1.12); z-index:10; filter: drop-shadow(0 0 12px rgba(0,229,255,0.5)); }
.npc:hover .npc-name { opacity:1; transform:translateY(-6px); background:rgba(0,229,255,0.15); border-color:var(--accent-neon); }
.npc-name {
  font-family: var(--pixel-font); font-size:11px; color: var(--text-bright);
  background: rgba(10,14,26,0.9); padding:6px 12px; border-radius:6px;
  white-space: nowrap; margin-bottom:6px; opacity:0.9;
  transition: all 0.25s; border:1px solid var(--accent-neon);
  text-shadow:0 1px 3px #000; backdrop-filter:blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.npc-img {
  width:120px; height:120px; object-fit:contain; image-rendering:pixelated;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7));
  animation: npcB 2.5s ease-in-out infinite;
}
#npc-0 .npc-img{animation-delay:0s} #npc-1 .npc-img{animation-delay:.25s}
#npc-2 .npc-img{animation-delay:.5s} #npc-3 .npc-img{animation-delay:.75s}
#npc-4 .npc-img{animation-delay:1s} #npc-5 .npc-img{animation-delay:.12s}
#npc-6 .npc-img{animation-delay:.37s} #npc-7 .npc-img{animation-delay:.62s}
#npc-8 .npc-img{animation-delay:.87s} #npc-9 .npc-img{animation-delay:1.12s}
@keyframes npcB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.npc.clicked .npc-img { animation: npcC 0.3s ease; }
@keyframes npcC { 0%{transform:scale(1)} 50%{transform:scale(1.25);filter:brightness(1.6)} 100%{transform:scale(1)} }

/* ===== 잠금 NPC 카드 (맵 위 플로팅) ===== */
.locked-card {
  position: absolute; bottom: 24px; right: 24px; z-index: 50;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:24px 32px; background:rgba(15,20,40,0.88); backdrop-filter:blur(10px);
  border:2px solid var(--panel-border); border-radius:16px;
  box-shadow:0 0 40px rgba(0,0,0,.5), 0 0 20px rgba(0,229,255,0.05);
  max-width:280px;
  animation: lockFloat 4s ease-in-out infinite;
}
@keyframes lockFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.locked-icon { font-size:28px; animation:lockP 2s ease-in-out infinite; }
@keyframes lockP { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} }
.locked-name { font-family:var(--pixel-font); font-size:16px; color:var(--text-dim); letter-spacing:6px; }
.locked-silhouette { width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin:4px 0; }
.silhouette-body {
  width:44px; height:52px; background:var(--panel-bg-light);
  border-radius:22px 22px 16px 16px; position:relative; opacity:.5; border:2px dashed var(--panel-border);
}
.silhouette-body::before {
  content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:24px; height:24px; background:var(--panel-bg-light); border-radius:50%; border:2px dashed var(--panel-border);
}
.locked-text { font-family:var(--pixel-font); font-size:7px; color:var(--text-dim); text-align:center; line-height:1.8; }
.locked-subtext { font-size:11px; color:var(--accent-neon); text-align:center; opacity:.8; line-height:1.5; }
.locked-btn {
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  padding:12px 24px; font-family:var(--pixel-font); font-size:9px;
  color:var(--bg-dark); background:linear-gradient(135deg,var(--accent-neon),#00b8d4);
  border:none; border-radius:8px; cursor:pointer; text-decoration:none;
  transition:all .3s; position:relative; overflow:hidden;
  box-shadow:0 0 20px rgba(0,229,255,.3);
}
.locked-btn:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(0,229,255,.5); }
.btn-glow {
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 60%);
  animation:btnG 3s ease-in-out infinite; pointer-events:none;
}
@keyframes btnG { 0%,100%{transform:translate(-30%,-30%);opacity:0} 50%{transform:translate(30%,30%);opacity:1} }

/* ===== 모달 ===== */
.modal-overlay {
  display:none; position:fixed; top:0;left:0; width:100%;height:100%;
  background:rgba(5,8,16,.85); backdrop-filter:blur(6px); z-index:1000;
  justify-content:center; align-items:center;
}
.modal-overlay.active { display:flex; }
.modal {
  background:var(--panel-bg); border:2px solid var(--panel-border); border-radius:16px;
  width:500px; max-height:85vh; overflow-y:auto;
  box-shadow:0 0 80px rgba(0,229,255,.08),0 20px 60px rgba(0,0,0,.7);
  animation:mIn .3s ease;
}
@keyframes mIn { from{transform:translateY(20px) scale(.95);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:2px solid var(--panel-border);
  background:linear-gradient(135deg,var(--bg-space),var(--panel-bg));
  border-radius:14px 14px 0 0;
}
.modal-title { display:flex; align-items:center; gap:14px; }
.modal-avatar-img {
  width:44px; height:44px; object-fit:contain; image-rendering:pixelated;
  border-radius:8px; border:2px solid var(--panel-border); background:var(--bg-dark);
}
.modal-name-group { display:flex; flex-direction:column; gap:3px; }
.modal-name { font-family:var(--pixel-font); font-size:12px; color:var(--accent-neon); text-shadow:0 0 10px rgba(0,229,255,.3); }
.modal-role { font-size:11px; color:var(--text-dim); }
.modal-close {
  background:none; border:2px solid var(--panel-border); color:var(--text-dim);
  width:32px; height:32px; border-radius:6px; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.modal-close:hover { background:rgba(255,107,107,.2); border-color:var(--stat-hp); color:var(--stat-hp); }
.modal-intro { display:flex; align-items:center; gap:16px; padding:16px 20px; border-bottom:2px solid var(--panel-border); }
.modal-avatar {
  width:72px; height:72px; background:var(--bg-dark); border:2px solid var(--panel-border);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:inset 0 2px 8px rgba(0,0,0,.4),0 0 12px rgba(0,229,255,.1); overflow:hidden;
}
.avatar-large { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; }
.modal-desc { font-size:13px; color:var(--text-main); line-height:1.7; }
.modal-tabs { display:flex; border-bottom:2px solid var(--panel-border); }
.tab {
  flex:1; background:none; border:none; color:var(--text-dim);
  font-family:var(--pixel-font); font-size:8px; padding:12px 8px;
  cursor:pointer; transition:all .2s; border-bottom:3px solid transparent;
}
.tab:hover { color:var(--text-main); background:rgba(0,229,255,.03); }
.tab.active { color:var(--accent-neon); border-bottom-color:var(--accent-neon); background:rgba(0,229,255,.05); }
.tab-content { padding:20px; min-height:200px; animation:tF .3s ease; }
@keyframes tF { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* 능력치 */
.stat-list{display:flex;flex-direction:column;gap:12px}
.stat-item{display:flex;align-items:center;gap:10px}
.stat-label{font-family:var(--pixel-font);font-size:8px;color:var(--text-main);min-width:72px;text-align:right}
.stat-bar-bg{flex:1;height:14px;background:var(--bg-dark);border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.stat-bar{height:100%;border-radius:2px;transition:width .8s;position:relative}
.stat-bar::after{content:'';position:absolute;top:0;left:0;width:100%;height:50%;background:rgba(255,255,255,.15)}
.stat-bar.hp{background:linear-gradient(90deg,var(--stat-hp),#ff9b9b)}
.stat-bar.mp{background:linear-gradient(90deg,var(--stat-mp),#a0d8f7)}
.stat-bar.atk{background:linear-gradient(90deg,var(--stat-atk),#ffe082)}
.stat-bar.def{background:linear-gradient(90deg,var(--stat-def),#80ffb0)}
.stat-bar.spd{background:linear-gradient(90deg,var(--stat-spd),#ff9ec4)}
.stat-bar.luk{background:linear-gradient(90deg,var(--stat-luk),#d0b8ff)}
.stat-value{font-family:var(--pixel-font);font-size:8px;color:var(--text-dim);min-width:30px}

/* 퀘스트 */
.quest-list{display:flex;flex-direction:column;gap:10px}
.quest-card{background:var(--panel-bg-light);border:1px solid var(--panel-border);border-radius:8px;padding:12px 14px;transition:all .2s}
.quest-card:hover{transform:translateX(4px);border-color:var(--accent-neon);box-shadow:0 0 12px rgba(0,229,255,.1)}
.quest-status{font-family:var(--pixel-font);font-size:7px;margin-bottom:4px}
.quest-status.completed{color:var(--accent-green)} .quest-status.ongoing{color:var(--accent-neon)}
.quest-title{font-size:13px;color:var(--text-bright);margin-bottom:4px;font-weight:bold}
.quest-desc{font-size:11px;color:var(--text-dim);line-height:1.5}

/* 아이템 */
.item-grid{display:flex;flex-wrap:wrap;gap:8px}
.item-badge{background:var(--panel-bg-light);border:1px solid var(--panel-border);border-radius:20px;padding:6px 14px;font-size:12px;color:var(--text-main);display:flex;align-items:center;gap:6px;transition:all .2s;cursor:default}
.item-badge:hover{border-color:var(--accent-neon);background:rgba(0,229,255,.06);transform:translateY(-2px)}
.item-badge .item-icon{font-size:14px}

/* 한마디 */
.quote-section{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 10px}
.quote-bubble{background:var(--panel-bg-light);border:2px solid var(--panel-border);border-radius:16px;padding:24px 28px;position:relative;max-width:380px;text-align:center}
.quote-bubble::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--panel-border)}
.quote-bubble::before{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--panel-bg-light);z-index:1}
.quote-text{font-size:14px;color:var(--text-bright);line-height:1.9;font-style:italic;white-space:pre-wrap}
.quote-avatar-img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* 반응형 */
@media(max-width:520px){.modal{width:95vw;margin:10px}.title-text{font-size:12px}.tab{font-size:7px;padding:10px 4px}.npc-img{width:48px;height:48px}.locked-card{padding:30px 24px}}
.modal::-webkit-scrollbar{width:6px} .modal::-webkit-scrollbar-track{background:var(--bg-dark)} .modal::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:3px} .modal::-webkit-scrollbar-thumb:hover{background:var(--accent-neon)}