/* =========================================================================
 *  삼국지 III 웹 오마주 — 도트 UI 스타일
 *  스테이지 1280x800 (내부 640x400 을 2배) / 모든 수치는 2px 격자
 * ========================================================================= */
@import url('https://cdn.jsdelivr.net/gh/quiple/galmuri/dist/galmuri.css');

:root {
  --navy:      #0a0a70;
  --navy-dk:   #05053c;
  --navy-lt:   #1818a8;
  --brd-hi:    #f0a848;
  --brd:       #b85c18;
  --brd-dk:    #4c1c00;
  --white:     #f8f8f8;
  --cyan:      #48e0f0;
  --yellow:    #f8f000;
  --green:     #38e038;
  --magenta:   #f070d8;
  --orange:    #f0a040;
  --red:       #f04040;
  --gray:      #a8a8b8;
}

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

html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Galmuri14', 'Galmuri11', 'DungGeunMo', monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  color: var(--white);
  cursor: default;
  user-select: none;
}

#viewport { position: fixed; inset: 0; overflow: hidden; }

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 800px;
  background: #000048;
  transform-origin: 0 0;
  overflow: hidden;
  font-size: 28px;
  line-height: 34px;
}

canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── 도트 테두리 패널 (원작의 이중 오렌지 프레임) ───────────────────── */
.panel {
  position: absolute;
  background: var(--navy);
  border: 4px solid var(--brd);
  outline: 2px solid #000;
  box-shadow:
    inset 0 0 0 2px var(--brd-dk),
    inset 0 0 0 4px var(--brd-hi),
    inset 0 0 0 6px var(--brd-dk),
    0 0 0 2px #000;
  padding: 8px 12px;
}

.panel.plain { box-shadow: inset 0 0 0 2px var(--brd-dk), 0 0 0 2px #000; }

/* ── 지도 ──────────────────────────────────────────────────────────── */
#mapwrap { position: absolute; left: 0; top: 44px; width: 1280px; height: 756px; }
#map { width: 1280px; height: 756px; }

/* ── 상단 명령 바 ──────────────────────────────────────────────────── */
#cmdbar {
  position: absolute; left: 0; top: 0; width: 1280px; height: 44px;
  background: var(--navy);
  border-top: 2px solid var(--brd-hi);
  border-bottom: 2px solid var(--brd-hi);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-size: 28px; letter-spacing: 1px;
  z-index: 30;
}
#cmdbar .ci { color: var(--white); }
#cmdbar .ci b { color: var(--white); font-weight: normal; }
#cmdbar .ci.on { background: var(--brd); color: #fff; }
#cmdbar .ci.off { color: #6868a0; }

/* ── 시세 패널 ─────────────────────────────────────────────────────── */
#market { right: 8px; top: 56px; width: 214px; text-align: center; }
#market .ttl { color: var(--cyan); margin-bottom: 2px; }
#market .row { display: flex; justify-content: space-between; padding: 0 4px; }
#market .row span:first-child { color: var(--cyan); }
#market .row span:last-child { color: var(--white); }

/* ── 초상화 패널 ───────────────────────────────────────────────────── */
#facepane { right: 8px; top: 330px; width: 214px; height: 240px; padding: 6px; }
#facepane canvas { width: 190px; height: 220px; }

/* ── 연월 박스 ─────────────────────────────────────────────────────── */
#datebox {
  left: 8px; bottom: 8px; width: 268px; height: 60px;
  background: var(--white); color: #000; border-color: var(--brd);
  display: flex; align-items: center; justify-content: space-around;
  box-shadow: inset 0 0 0 2px var(--brd-dk), 0 0 0 2px #000;
  letter-spacing: 1px;
}

/* ── 메시지 창 ─────────────────────────────────────────────────────── */
#msgbar {
  left: 288px; right: 8px; bottom: 8px; height: 124px;
  padding: 12px 18px; z-index: 25;
}
#msgbar .line { white-space: pre-wrap; }
#msgbar .cur::after {
  content: '_'; color: var(--orange);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── 정사 각주 쪽지 ───────────────────────────────────────────────── */
.annalpane {
  left: 200px; top: 250px; width: 812px; padding: 18px 24px 20px; z-index: 40;
}
.annalpane .hw {
  color: var(--cyan); font-size: 26px; letter-spacing: 2px; margin-bottom: 12px;
}
.annalpane .tx {
  color: #e8e8f8; font-size: 25px; line-height: 36px; white-space: pre-wrap;
}

/* ── 도시 정보 패널 ────────────────────────────────────────────────── */
#citypane { left: 8px; top: 56px; width: 500px; z-index: 20; }
#citypane .hd { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
#citypane .sq { width: 26px; height: 26px; border: 2px solid #000; }
#citypane .off { display: flex; gap: 10px; margin-bottom: 8px; }
#citypane table { border-collapse: collapse; width: 100%; }
#citypane td { padding: 1px 0; }
#citypane td.k { color: var(--white); width: 96px; }
#citypane td.v { text-align: right; width: 148px; color: var(--white); }
#citypane td.g { width: 220px; }
.gauge { position: relative; height: 22px; background: #000030; border: 2px solid #202060; }
.gauge > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.gauge > i.b { background: #38c0e0; }
.gauge > i.r { background: #e04040; }

/* ── 중앙 메뉴 / 리스트 / 대화 ─────────────────────────────────────── */
#center { position: absolute; inset: 0; pointer-events: none; z-index: 90; }
#center > .panel { pointer-events: auto; }

.menu { min-width: 300px; }
.menu .it { padding: 0 10px; color: var(--white); cursor: pointer; }
.menu .it.sel { background: var(--brd); }
.menu .it.dis { color: #6868a0; }
.menu .hd { color: var(--cyan); border-bottom: 2px solid var(--navy-lt); margin-bottom: 4px; }

.speech {
  position: absolute; background: var(--white); color: #000;
  border: 4px solid #000; padding: 10px 18px; white-space: pre-line;
}
.speech::after {
  content: ''; position: absolute; left: -22px; top: 26px;
  border: 10px solid transparent; border-right-color: var(--white);
}

/* ── 리스트(무장/도시 일람) ─────────────────────────────────────────── */
.grid { border-collapse: collapse; width: 100%; font-size: 24px; line-height: 28px; }
.grid th { color: var(--cyan); text-align: right; padding: 0 8px; font-weight: normal; }
.grid th.l, .grid td.l { text-align: left; }
.grid td { padding: 0 8px; text-align: right; }
.grid tr.sel td { background: var(--brd); }
.grid tr.dim td { color: #7878a8; }

/* ── 타이틀 / 군주선택 ─────────────────────────────────────────────── */
#title {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, rgba(0,0,0,0) 2px 4px),
    radial-gradient(120% 90% at 50% 40%, #1c1c9c 0%, #0a0a58 55%, #02021e 100%);
}
#title .box { position: static; padding: 34px 76px 28px; text-align: center; }
#title .big {
  font-size: 96px; line-height: 108px; color: var(--yellow); letter-spacing: 10px;
  text-shadow: 6px 6px 0 #8c2000, 12px 12px 0 rgba(0,0,0,.55);
}
#title .sub { color: var(--cyan); margin-top: 14px; letter-spacing: 4px; font-size: 26px; }
#title .cred { color: #b8b8e8; margin-top: 8px; font-size: 22px; }
#title .hint { color: var(--white); animation: blink 1.4s steps(1) infinite; }
#title .keys { color: #8888c8; font-size: 22px; }

#rulersel { left: 20px; top: 150px; width: 1016px; z-index: 50; }
#rulersel .rw { display: flex; justify-content: center; gap: 8px; }
#rulersel .card { width: 158px; text-align: center; cursor: pointer; padding: 4px; }
#rulersel .card.sel { background: var(--brd); }
#rulersel .card canvas { width: 142px; height: 166px; }
#rulersel .nm { font-size: 24px; line-height: 30px; }
#rulersel .cw { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 22px; }
#rulersel .cw i { width: 22px; height: 22px; border: 2px solid #000; }

/* ── 전투 화면 ─────────────────────────────────────────────────────── */
#warscreen { position: absolute; inset: 0; background: #000; z-index: 70; display: none; }
#warscreen.on { display: block; }
#warmap { position: absolute; left: 0; top: 44px; width: 1280px; height: 648px; }
#warhud {
  position: absolute; left: 0; bottom: 0; width: 1280px; height: 108px;
  background: var(--navy); border-top: 4px solid var(--brd-hi);
  padding: 8px 16px; display: flex; gap: 24px; align-items: flex-start;
}
#warhud .col { font-size: 22px; line-height: 28px; }
#warbar {
  position: absolute; left: 0; top: 0; width: 1280px; height: 44px;
  background: var(--navy); border-bottom: 4px solid var(--brd-hi);
  display: flex; align-items: center; gap: 28px; padding: 0 16px; font-size: 26px;
}
#unitinfo { right: 8px; top: 56px; width: 300px; font-size: 24px; line-height: 30px; z-index: 75; }

.hi { color: var(--cyan); }
.hy { color: var(--yellow); }
.hg { color: var(--green); }
.hm { color: var(--magenta); }
.ho { color: var(--orange); }
.hr { color: var(--red); }
.hw { color: var(--white); }
.hidden { display: none !important; }

/* ── 이벤트 배너 · 열전 ──────────────────────────────────────────── */
.evbanner {
  left: 50%; top: 250px; transform: translateX(-50%);
  padding: 22px 60px; text-align: center;
  background: var(--navy-dk);
}
.evbanner .t {
  font-size: 46px; line-height: 56px; color: var(--yellow); letter-spacing: 6px;
  text-shadow: 4px 4px 0 #8c2000;
}
.biopane {
  left: 24px; top: 46px; width: 1232px; max-height: 726px; overflow: hidden;
  display: flex; gap: 20px; padding: 14px 18px;
}
.biopane canvas { width: 171px; height: 198px; flex: none; }
.biopane .bd { flex: 1; min-width: 0; }
.biopane .nm { font-size: 30px; line-height: 38px; }
.biopane .st { font-size: 21px; line-height: 29px; color: var(--white); margin: 4px 0 2px; }
.biopane .st b { color: var(--yellow); font-weight: normal; }
.biopane .ex { font-size: 20px; line-height: 27px; margin-bottom: 4px; }
.biopane .tx {
  font-size: 22px; line-height: 31px; white-space: pre-line;
  border-top: 2px solid var(--navy-lt); padding-top: 8px; color: #e8e8ff;
}

.biopane .lore {
  margin-top: 8px; padding-top: 6px; border-top: 2px solid var(--brd-dk);
  font-size: 20px; line-height: 27px; color: #ffd9a0; white-space: pre-line;
}
.biopane .lore b { color: var(--orange); font-weight: normal; }

/* =========================================================================
 *  손가락으로 할 때 — html.touch
 *
 *  스테이지(1280x800)는 화면에 맞춰 축소되므로, 폰에서는 배율이 0.5 안팎이 된다.
 *  즉 스테이지 안의 100px 이 실제로는 50px 남짓이다. 그래서
 *   · 스테이지 안의 목표물은 넉넉히 키우고 (짧은 메뉴 · 일람의 줄 · 명령바)
 *   · 진짜로 크기를 보장해야 하는 조작 버튼은 스테이지 밖에 실제 픽셀로 둔다
 * ====================================================================== */

/* 상단 명령 바 — 높이를 키워 위아래 여백을 넓힌다 (글자 크기는 그대로 두어 열이 넘치지 않게) */
html.touch #cmdbar { height: 72px; gap: 18px; }
html.touch #mapwrap { top: 72px; height: 728px; }
html.touch #map { height: 728px; }
html.touch #market, html.touch #citypane { top: 84px; }

/* 짧은 메뉴는 손가락 크기로 키운다 (긴 목록은 화면을 넘기므로 그대로 둔다) */
html.touch .menu.big { min-width: 380px; }
html.touch .menu.big .it {
  min-height: 72px; line-height: 72px; padding: 0 24px; font-size: 32px;
  border-bottom: 2px solid rgba(255,255,255,.08);
}
html.touch .menu.big .hd { min-height: 52px; line-height: 52px; }

/* 일람의 줄 — 한 화면에 담는 줄 수를 줄이고 줄 높이를 키운다(줄 수는 ui.js 가 정한다) */
html.touch .grid { font-size: 26px; line-height: 52px; }
html.touch .grid td, html.touch .grid th { padding: 0 12px; }
html.touch .grid tr.sel td { outline: 2px solid var(--brd-hi); outline-offset: -2px; }

/* 군주 선택 카드 */
html.touch #rulersel .card { padding: 10px 6px; }

/* ── 손가락 버튼 줄 — 필요한 화면 안에 붙는다 ───────────────────────── */
.tbtns { display: none; }
html.touch .tbtns {
  display: flex; gap: 10px; margin-top: 12px; padding-top: 10px;
  border-top: 2px solid var(--navy-lt);
  justify-content: flex-end;
}
.tbtn {
  font-family: inherit; font-size: 26px; line-height: 1;
  min-width: 132px; height: 64px; padding: 0 18px;
  color: var(--white); background: var(--navy-lt);
  border: 2px solid var(--brd-hi); cursor: pointer;
  touch-action: manipulation;
}
.tbtn:active { background: var(--brd); }
.tbtn.ok { border-color: var(--green); }
.tbtn.esc { border-color: var(--red); }
/* 지도에서 도시를 고를 때 쓰는 줄 — 지도 위에 따로 띄운다 (메시지창을 가리지 않게) */
html.touch .citybar { left: 300px; top: 566px; width: 700px; padding: 8px 12px; z-index: 60; }
html.touch .citybar .tbtns { margin-top: 0; padding-top: 0; border-top: none; justify-content: center; }
.citybar { display: none; }
html.touch .citybar { display: block; }
/* 전투 바의 버튼은 작게 */
html.touch #warbar .tbtn { min-width: 104px; height: 40px; font-size: 22px; margin-right: 4px; }

/* ── 숫자판 — 손가락으로 병사 수·금액을 넣는다 ─────────────────────── */
.numpad {
  position: absolute; left: 396px; top: 104px; width: 488px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px;
  z-index: 90;
}
.numpad .np {
  height: 84px;
  font-family: inherit; font-size: 40px; line-height: 1;
  color: var(--white); background: var(--navy-lt);
  border: 2px solid var(--brd-hi); cursor: pointer;
  touch-action: manipulation; padding: 0;
}
.numpad .np.sm { font-size: 28px; }
.numpad .np.ok { border-color: var(--green); }
.numpad .np.esc { border-color: var(--red); }
.numpad .np:active { background: var(--brd); }