@font-face {
  font-family: 'NeoDGM';
  src: url('../assets/fonts/neodgm.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #14100c;
  color: #e8dcc8;
  font-family: 'NeoDGM', 'DungGeunMo', monospace;
  overflow: hidden;
  image-rendering: pixelated;
}

img, canvas { image-rendering: pixelated; }

.screen { display: none; width: 100vw; height: 100vh; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* ===== 타이틀 ===== */
#screen-title.active { justify-content: center; background: radial-gradient(ellipse at center, #2a1f14 0%, #14100c 70%); }
.title-box { text-align: center; }
#title-art { width: 600px; max-width: 90vw; border: 3px solid #8a6d3b; box-shadow: 0 0 40px #000; }
.title-box h1 { font-size: 52px; color: #ffd966; text-shadow: 3px 3px 0 #7a1f1f, 6px 6px 0 #000; margin-top: 18px; letter-spacing: 8px; }
.subtitle { color: #b8a888; margin: 8px 0 24px; font-size: 18px; }
.title-btn {
  display: block; margin: 10px auto; padding: 12px 60px; font-size: 22px;
  font-family: inherit; background: #3a2c1a; color: #ffd966;
  border: 2px solid #8a6d3b; cursor: pointer;
}
.title-btn:hover:not(:disabled) { background: #5a4326; }
.title-btn:disabled { opacity: 0.4; cursor: default; }

/* ===== 군주 선택 ===== */
#screen-select.active { justify-content: center; }
#screen-select h2 { color: #ffd966; font-size: 30px; margin-bottom: 24px; text-shadow: 2px 2px 0 #000; }
#select-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 760px; }
.ruler-card {
  background: #241c12; border: 2px solid #6a5333; padding: 10px; text-align: center; cursor: pointer;
  transition: transform 0.08s;
}
.ruler-card:hover { border-color: #ffd966; transform: scale(1.06); }
.ruler-card .portrait { margin: 0 auto; }
.ruler-name { margin-top: 8px; font-size: 18px; color: #ffd966; }

/* ===== 초상 ===== */
.portrait {
  background: #111; border: 1px solid #6a5333; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #886; font-size: 20px;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 메인 ===== */
#topbar {
  width: 100%; display: flex; align-items: center; gap: 18px;
  background: #241c12; border-bottom: 2px solid #6a5333; padding: 8px 16px; font-size: 17px;
}
#tb-date { color: #ffd966; font-size: 19px; }
#tb-stats { color: #b8a888; }
.tb-spacer { flex: 1; }
.tb-btn {
  font-family: inherit; font-size: 16px; padding: 6px 16px; cursor: pointer;
  background: #3a2c1a; color: #e8dcc8; border: 2px solid #6a5333;
}
.tb-btn:hover:not(:disabled) { background: #5a4326; }
.tb-btn.primary { background: #6a2c1a; color: #ffd966; border-color: #a55; }
.tb-btn.primary:hover:not(:disabled) { background: #8a3c22; }
.tb-btn:disabled { opacity: 0.5; }

#main-wrap { display: flex; flex: 1; width: 100%; min-height: 0; }
#map-canvas { flex: 1; min-width: 0; height: 100%; object-fit: contain; background: #0a1a2a; cursor: pointer; }
#side-panel {
  width: 340px; background: #1e1710; border-left: 2px solid #6a5333;
  overflow-y: auto; padding: 12px; font-size: 15px;
}

.city-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid #6a5333; padding-bottom: 8px; margin-bottom: 8px; }
.city-title { font-size: 26px; color: #ffd966; }
.city-owner { font-size: 16px; }
.city-stats { margin-bottom: 10px; }
.stat-line { margin: 3px 0; }
.stat-line b { color: #ffd966; }
.stat-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.stat-label { width: 36px; color: #b8a888; }
.bar { flex: 1; height: 10px; background: #0e0a06; border: 1px solid #4a3a24; }
.bar-fill { height: 100%; }
.stat-val { width: 36px; text-align: right; color: #ffd966; }

.sec-title { color: #ffd966; border-bottom: 1px solid #4a3a24; margin: 10px 0 6px; padding-bottom: 3px; font-size: 16px; }
.gen-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 4px; cursor: pointer;
}
.gen-row:hover { background: #2e2418; }
.gen-row.acted { opacity: 0.45; }
.gen-name { min-width: 56px; }
.gen-stat { font-size: 13px; }
.dim { color: #8a7a62; }

.cmd-menu { margin-top: 10px; }
.cmd-group { margin-bottom: 8px; }
.cmd-group-title { color: #c9a86a; font-size: 14px; margin-bottom: 4px; }
.cmd-group-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cmd-btn {
  font-family: inherit; font-size: 15px; padding: 7px 8px; cursor: pointer;
  background: #2e2418; color: #e8dcc8; border: 1px solid #6a5333; text-align: center;
}
.cmd-btn:hover { background: #4a3a24; color: #ffd966; }
.cmd-btn.wide { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.cmd-btn.small { padding: 3px 8px; font-size: 13px; }
.panel-hint { color: #8a7a62; text-align: center; margin-top: 40px; }

#ticker {
  width: 100%; background: #181209; border-top: 2px solid #6a5333;
  height: 84px; overflow: hidden; padding: 6px 16px; font-size: 14px; line-height: 1.4;
}

/* ===== 모달 ===== */
#modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 50;
  align-items: center; justify-content: center;
}
#modal.active { display: flex; }
#modal-box {
  background: #241c12; border: 3px solid #8a6d3b; min-width: 380px; max-width: 620px;
  max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 0 30px #000;
}
#modal-head {
  display: flex; justify-content: space-between; align-items: center;
  background: #3a2c1a; padding: 8px 14px; border-bottom: 2px solid #6a5333;
}
#modal-title { color: #ffd966; font-size: 19px; }
#modal-close { background: none; border: none; color: #b8a888; font-size: 18px; cursor: pointer; font-family: inherit; }
#modal-body { padding: 14px; overflow-y: auto; font-size: 15px; }
#modal-body input[type=range] { width: 100%; margin: 12px 0 6px; }
.num-input {
  width: 100%; font-family: inherit; font-size: 18px; background: #0e0a06; color: #ffd966;
  border: 1px solid #6a5333; padding: 6px; text-align: center;
}
.pick-row {
  display: flex; align-items: center; gap: 10px; padding: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.pick-row:hover { background: #2e2418; }
.pick-row.sel { border-color: #ffd966; background: #3a2c1a; }
.cap-btns { margin-left: auto; display: flex; gap: 4px; }
.gen-detail { display: flex; gap: 14px; }
.stat-table td { padding: 3px 10px 3px 0; }
.stat-table td:nth-child(odd) { color: #b8a888; }
.force-table { border-collapse: collapse; width: 100%; }
.force-table th, .force-table td { border: 1px solid #4a3a24; padding: 5px 10px; text-align: left; font-size: 14px; }
.force-table th { color: #c9a86a; background: #1e1710; }
.log-line { padding: 2px 0; border-bottom: 1px dotted #2e2418; }
.gameover { font-size: 20px; text-align: center; padding: 20px 10px; line-height: 1.6; }
.gameover.win { color: #ffd966; }
.gameover.lose { color: #c86a6a; }

/* ===== 전투 ===== */
#screen-battle.active { justify-content: center; background: #0e0a06; }
#battle-title { font-size: 26px; color: #ffd966; margin-bottom: 10px; text-shadow: 2px 2px 0 #000; }
#battle-canvas { width: min(90vw, 900px); border: 3px solid #8a6d3b; background: #223322; }
#battle-btns { display: flex; gap: 8px; margin: 12px 0; }
.cmd-btn.tactic { font-size: 18px; padding: 10px 26px; }
.cmd-btn.tactic.done { background: #6a2c1a; color: #ffd966; }
#battle-log {
  width: min(90vw, 900px); height: 130px; overflow-y: auto; background: #181209;
  border: 2px solid #4a3a24; padding: 8px 12px; font-size: 14px; line-height: 1.5;
}
.bl-line.fire { color: #ff9955; }
.bl-line.duel { color: #ffd966; }
.bl-line.rout { color: #c86a6a; }
.bl-line.end { color: #ffd966; font-size: 16px; }
.bl-line.big { font-size: 20px; padding: 6px 0; }

/* ===== 토스트 ===== */
#toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: #3a2c1a; border: 2px solid #8a6d3b; color: #ffd966; padding: 10px 24px;
  font-size: 16px; opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 99;
  max-width: 80vw;
}
#toast.show { opacity: 1; }
#toast.error { border-color: #a55; color: #ff9c9c; }