/* ============================================================
   三國志風 群雄割拠 — スタイル
   ============================================================ */

:root {
  --bg:          #14100c;
  --bg-2:        #1d1813;
  --panel:       #241d16;
  --panel-2:     #2e251b;
  --line:        #4a3b28;
  --line-soft:   #3a2e20;
  --ink:         #ecdfc6;
  --ink-dim:     #b3a184;
  --ink-faint:   #7d6e57;
  --gold:        #d9b25c;
  --gold-bright: #f0cd80;
  --red:         #c0453a;
  --green:       #6f9f5c;
  --blue:        #5b86bd;
  --shadow:      0 4px 18px rgba(0,0,0,.55);
  --font: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Noto Serif JP", serif;
  --font-ui: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --cell: 50px;   /* 合戦マスの一辺 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15.5px;
  overflow: hidden;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }

.hidden { display: none !important; }

.screen { position: absolute; inset: 0; }

/* ---------- 汎用ボタン ---------- */
.btn {
  background: linear-gradient(#3a2e20, #291f15);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 7px 13px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: linear-gradient(#4b3b28, #34281b); border-color: var(--gold); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(#7a4032, #5a2c22);
  border-color: #a25a44;
  color: #ffe9c9;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(#94503e, #6d372a); border-color: var(--gold-bright); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn.off { opacity: .45; }
.btn-lg { padding: 11px 26px; font-size: 17px; }
.btn-danger { border-color: #8d3a30; }

/* ============================================================
   タイトル画面
   ============================================================ */
#title-screen {
  overflow: auto;
  background:
    radial-gradient(ellipse at 50% -10%, #4a3213 0%, transparent 60%),
    linear-gradient(#1a140e, #0d0a07);
}
.title-inner { max-width: 940px; margin: 0 auto; padding: 34px 20px 60px; text-align: center; }
.game-title {
  font-family: var(--font);
  font-size: 50px;
  letter-spacing: .22em;
  margin: 4px 0 6px;
  color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(217,178,92,.28);
}
.game-title span { display: block; font-size: 27px; letter-spacing: .5em; color: var(--ink-dim); margin-top: 6px; }
.title-sub { color: var(--ink-faint); font-family: var(--font); letter-spacing: .12em; margin: 0 0 22px; }

.title-box {
  background: rgba(36,29,22,.72);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px 20px;
  text-align: left;
  box-shadow: var(--shadow);
}
.title-box h2 {
  font-family: var(--font);
  font-size: 16.5px; letter-spacing: .2em;
  color: var(--gold);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px; margin: 4px 0 12px;
}
.title-box h2:not(:first-child) { margin-top: 22px; }

.scenario-list { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-card {
  flex: 1 1 260px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 4px; padding: 10px 12px; cursor: pointer;
}
.scenario-card:hover { border-color: var(--gold); }
.scenario-card.sel { border-color: var(--gold-bright); background: #40311f; }
.scenario-card b { font-family: var(--font); letter-spacing: .08em; }
.scenario-card p { margin: 6px 0 0; font-size: 13px; color: var(--ink-faint); line-height: 1.55; }

.lord-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 7px;
  max-height: 344px; overflow-y: auto;
  padding-right: 4px;
}
.lord-card {
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  border-radius: 4px;
  padding: 7px 8px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.lord-card:hover { border-color: var(--gold); }
.lord-card.sel { border-color: var(--gold-bright); background: #40311f; box-shadow: inset 0 0 0 1px rgba(240,205,128,.3); }
.lord-card .flag { width: 13px; height: 13px; border-radius: 2px; flex: none; border: 1px solid rgba(0,0,0,.5); }
.lord-card .lc-main { min-width: 0; }
.lord-card .lc-name { font-family: var(--font); font-size: 16px; letter-spacing: .06em; }
.lord-card .lc-sub { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diff-1 { color: #7fb069; } .diff-2 { color: #d9b25c; } .diff-3 { color: #d9805c; } .diff-4 { color: #c0453a; }

.title-actions { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.title-foot { margin-top: 16px; color: var(--ink-faint); font-size: 13px; }
.title-credit {
  margin: 10px 0 0; font-size: 12.5px; color: var(--ink-faint);
  letter-spacing: .04em; line-height: 1.9;
}
.title-credit a { color: var(--gold); text-decoration: none; }
.title-credit a:hover { text-decoration: underline; }
.title-credit .tc-rights { display: block; font-size: 11.5px; opacity: .75; }

/* 本家でない場所で動いているときの案内 */
#mirror-notice {
  position: absolute; right: 12px; bottom: 12px; z-index: 250;
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,16,12,.95);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 8px 10px 8px 14px;
  font-size: 12.5px; color: var(--ink-dim);
  box-shadow: var(--shadow);
  max-width: min(420px, 90vw);
}
#mirror-notice a {
  color: var(--gold-bright); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px;
}
#mirror-notice a:hover { border-color: var(--gold-bright); background: #3a2d1e; }
#mirror-notice button {
  background: none; border: none; color: var(--ink-faint);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
#mirror-notice button:hover { color: var(--ink); }

/* ============================================================
   メイン画面
   ============================================================ */
#main-screen { display: flex; flex-direction: column; }

#topbar {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 6px 12px;
  background: linear-gradient(#2b2218, #1c1610);
  border-bottom: 1px solid var(--line);
  height: 52px;
}
.tb-date { font-family: var(--font); font-size: 20px; color: var(--gold-bright); letter-spacing: .06em; white-space: nowrap; }
.tb-date span + span { margin-left: 6px; }
.tb-force { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.tb-flag { width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,.6); display: inline-block; }
#tb-name { font-family: var(--font); font-size: 18px; letter-spacing: .1em; }
.tb-lord { font-size: 13px; color: var(--ink-faint); }
.tb-stats { display: flex; gap: 14px; font-size: 13.5px; color: var(--ink-dim); margin-left: auto; white-space: nowrap; }
.tb-stats b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.tb-buttons { display: flex; gap: 6px; }

#workspace { flex: 1; display: flex; min-height: 0; }

/* ---------- 地図 ---------- */
#map-pane {
  flex: 1; min-width: 0; position: relative;
  background:
    radial-gradient(ellipse at 45% 40%, #2b2418 0%, #17120d 75%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#map-wrap { position: relative; width: 100%; height: 100%; }
#map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#map-nodes { position: absolute; inset: 0; pointer-events: none; }

.city-node {
  --dot: 24px;                                   /* 印の大きさ。名札はこの下にぶら下がる */
  position: absolute;
  /* 街道の交点に「印」の中心が来るように、名札の分ではなく印の半分だけ上げる */
  transform: translate(-50%, calc(var(--dot) / -2));
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  user-select: none;
}
.city-node.capital { --dot: 27px; }
.city-dot {
  width: var(--dot); height: var(--dot); margin: 0 auto;
  border-radius: 3px;
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(0,0,0,.65); font-weight: bold;
}
.city-node.capital .city-dot { border-radius: 50%; box-shadow: 0 0 0 2px rgba(240,205,128,.55), 0 2px 6px rgba(0,0,0,.6); }
.city-label {
  font-family: var(--font);
  font-size: 14.5px; letter-spacing: .06em;
  margin-top: 2px;
  color: var(--ink);
  text-shadow: 0 0 4px #000, 0 0 3px #000, 1px 1px 0 #000;
  white-space: nowrap;
}
.city-disaster {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 15px; line-height: 1;
  filter: drop-shadow(0 0 4px #000);
  animation: quiver 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes quiver {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

.city-troops { font-size: 12px; color: var(--ink-dim); text-shadow: 0 0 3px #000, 1px 1px 0 #000; font-variant-numeric: tabular-nums; }
.city-node:hover .city-dot { filter: brightness(1.35); }
.city-node.sel .city-dot { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.city-node.target .city-dot { animation: pulse 1s infinite; }
.city-node.acts::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 6px var(--gold-bright);
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,120,90,.8); } 50% { box-shadow: 0 0 0 8px rgba(255,120,90,0); } }

/* 地図が小さく描かれるときは名札を控えめに */
#map-nodes.compact .city-label { font-size: 11.5px; }
#map-nodes.compact .city-troops { display: none; }
#map-nodes.compact .city-node { --dot: 18px; }
#map-nodes.compact .city-node.capital { --dot: 20px; }
#map-nodes.tiny .city-label { font-size: 9.5px; letter-spacing: 0; }
#map-nodes.tiny .city-troops { display: none; }
#map-nodes.tiny .city-node { --dot: 13px; }
#map-nodes.tiny .city-node.capital { --dot: 15px; }
#map-nodes.tiny .city-dot { border-width: 1px; }

#map-legend {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(20,16,12,.82);
  border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 6px 9px;
  font-size: 12.5px; color: var(--ink-dim);
  max-width: 350px; max-height: 160px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 3px 10px;
}
#map-legend .lg { display: flex; align-items: center; gap: 4px; }
#map-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ---------- 右パネル ---------- */
#side-pane {
  flex: none; width: 412px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.panel-empty { padding: 30px 16px; text-align: center; color: var(--ink-faint); font-family: var(--font); }

.p-head {
  padding: 9px 12px;
  background: linear-gradient(#3a2d1e, #2a2016);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.p-head .flag { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.5); }
.p-head h3 { margin: 0; font-family: var(--font); font-size: 21px; letter-spacing: .12em; }
.p-head .owner { font-size: 12.5px; color: var(--ink-faint); margin-left: auto; text-align: right; line-height: 1.4; }

.p-sec { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.p-sec h4 {
  margin: 0 0 7px; font-size: 12.5px; letter-spacing: .18em;
  color: var(--gold); font-weight: normal;
}

.stat-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 13.5px; }
.stat-row .lbl { width: 50px; color: var(--ink-dim); flex: none; }
.stat-row .bar { flex: 1; height: 8px; background: #1a140e; border: 1px solid var(--line-soft); border-radius: 2px; overflow: hidden; }
.stat-row .bar i { display: block; height: 100%; }
.stat-row .val { width: 78px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }

.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 10px; font-size: 13.5px; }
.kv div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line-soft); padding: 2px 0; }
.kv span:last-child { font-variant-numeric: tabular-nums; color: var(--gold); }

/* 武将一覧 */
.off-scroll { max-height: 246px; overflow-y: auto; }
.off-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.off-table th {
  font-weight: normal; color: var(--ink-faint); font-size: 12px;
  border-bottom: 1px solid var(--line-soft); padding: 2px 3px; text-align: right;
}
.off-table th:first-child, .off-table td:first-child { text-align: left; }
.off-table td { padding: 2.5px 3px; text-align: right; border-bottom: 1px dotted #322718; font-variant-numeric: tabular-nums; }
.off-table tr.done { opacity: .42; }
.off-table tr:hover td { background: #33291c; }
.off-name { font-family: var(--font); font-size: 15px; letter-spacing: .04em; white-space: nowrap; }
.badge { font-size: 10.5px; padding: 0 4px; border-radius: 2px; margin-left: 3px; vertical-align: 1px; }
.badge.gov { background: #6b5220; color: #ffe6ad; }
.badge.free { background: #2f4a2c; color: #b9e4a8; }
.badge.cap  { background: #55271f; color: #ffbfae; }
.badge.lord { background: #7d5210; color: #ffe6ad; }
.loy-hi { color: #8cc06e; } .loy-mid { color: #d9b25c; } .loy-lo { color: #d97a5c; } .loy-cr { color: #e0574a; }

/* コマンド */
.cmd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.cmd-grid.wide { grid-template-columns: repeat(3, 1fr); }
.cmd-btn {
  background: linear-gradient(#3a2e20, #291f15);
  border: 1px solid var(--line);
  border-radius: 3px; padding: 7px 2px; cursor: pointer;
  font-family: var(--font); font-size: 15px; letter-spacing: .06em;
}
.cmd-btn:hover:not(:disabled) { background: #4b3b28; border-color: var(--gold); }
.cmd-btn:disabled { opacity: .34; cursor: not-allowed; }
.cmd-btn small { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--ink-faint); letter-spacing: 0; }

/* ---------- ログ ---------- */
#logbar {
  flex: none; height: 96px;
  background: #100d09;
  border-top: 1px solid var(--line);
  overflow-y: auto;
  padding: 5px 12px;
  font-size: 13.5px; line-height: 1.7;
}
#log-list div { border-bottom: 1px dotted #241c12; padding: 1px 0; }
#log-list .lg-mon { color: var(--gold); font-family: var(--font); letter-spacing: .1em; margin-top: 4px; }
#log-list .lg-war { color: #e8917d; }
#log-list .lg-good { color: #9ed07f; }
#log-list .lg-bad { color: #d9736a; }
#log-list .lg-dim { color: var(--ink-faint); }

/* ============================================================
   合戦画面
   ============================================================ */
#battle-screen { display: flex; flex-direction: column; background: #100d09; }
#battle-top {
  flex: none; height: 54px; display: flex; align-items: center;
  padding: 0 14px; gap: 14px;
  background: linear-gradient(#2b2218, #1c1610);
  border-bottom: 1px solid var(--line);
}
.bt-side { display: flex; align-items: center; gap: 8px; flex: 1; font-family: var(--font); font-size: 18px; letter-spacing: .08em; }
.bt-def { justify-content: flex-end; }
.bt-label { font-size: 12px; padding: 2px 7px; border-radius: 2px; font-family: var(--font-ui); }
.bt-atk .bt-label { background: #8d3a2c; color: #ffdfd0; }
.bt-def .bt-label { background: #2f5580; color: #d3e6ff; }
.bt-troops { font-size: 14.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
.bt-center { text-align: center; }
#bt-city { font-family: var(--font); font-size: 19px; color: var(--gold-bright); letter-spacing: .16em; }
#bt-turn { font-size: 12.5px; color: var(--ink-faint); }

#battle-body { flex: 1; display: flex; min-height: 0; }
#battle-field-wrap { flex: 1; overflow: auto; padding: 12px; display: flex; align-items: center; justify-content: center; }
#battle-field {
  display: grid; gap: 1px;
  background: #0b0906;
  border: 2px solid var(--line);
  padding: 1px;
}
.bcell { position: relative; width: var(--cell); height: var(--cell); }
.bcell.t-plain { background: #4d5a35; }
.bcell.t-road  { background: #6b6141; }
.bcell.t-forest{ background: #2f4a2b; }
.bcell.t-mount { background: #5d5140; }
.bcell.t-water { background: #2c4a63; }
.bcell.t-castle{ background: #6d5636; box-shadow: inset 0 0 0 2px rgba(240,205,128,.75); }
.bcell.t-wall  { background: #574733; box-shadow: inset 0 0 0 1px rgba(240,205,128,.32); }
.bcell.reach   { box-shadow: inset 0 0 0 2px rgba(150,215,255,.7); cursor: pointer; }
.bcell.atkable { box-shadow: inset 0 0 0 2px rgba(255,110,80,.85); cursor: pointer; }
.bcell.hov     { filter: brightness(1.25); }
.bcell .terr-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; opacity: .5; }

.bunit {
  position: absolute; inset: 2px;
  border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer;
  border: 2px solid rgba(0,0,0,.6);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9);
  overflow: hidden;
}
.bunit .bu-name { font-family: var(--font); font-size: 13px; line-height: 1.1; letter-spacing: 0; }
.bunit .bu-n { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.bunit .bu-hp { position: absolute; left: 1px; right: 1px; bottom: 0; height: 3px; background: rgba(0,0,0,.6); }
.bunit .bu-hp i { display: block; height: 100%; background: #7fd06a; }
.bunit.done { filter: grayscale(.6) brightness(.65); }
.bunit.sel { outline: 2px solid #ffe08a; outline-offset: 1px; z-index: 3; }
.bunit .bu-type { position: absolute; top: 0; left: 2px; font-size: 9.5px; opacity: .85; }
.bunit .bu-st { position: absolute; top: 0; right: 1px; font-size: 9px; }
/* 城防バーは部隊の上に重ねて常に見えるようにする */
.castle-hp {
  position: absolute; left: 2px; right: 2px; bottom: 1px; height: 5px;
  background: rgba(0,0,0,.7); border: 1px solid rgba(240,205,128,.5);
  border-radius: 2px; overflow: hidden; z-index: 6; pointer-events: none;
}
.castle-hp i { display: block; height: 100%; background: #d9b25c; }
.bcell.t-castle .terr-ic {
  align-items: flex-start; justify-content: flex-start;
  padding: 1px 0 0 2px; font-size: 11px; opacity: .95;
  color: #ffe6ad; text-shadow: 0 1px 2px #000; z-index: 6;
}

#battle-side {
  flex: none; width: 300px; border-left: 1px solid var(--line);
  background: var(--panel); overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.bt-box { border: 1px solid var(--line-soft); border-radius: 4px; padding: 8px; background: var(--panel-2); }
.bt-box h4 { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .16em; color: var(--gold); font-weight: normal; }
.bt-box .bt-empty { color: var(--ink-faint); font-size: 13px; }
.bt-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bt-roster-row { display: flex; align-items: center; gap: 5px; font-size: 13px; padding: 2px 0; border-bottom: 1px dotted #322718; cursor: pointer; }
.bt-roster-row:hover { background: #33291c; }
.bt-roster-row .sq { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.bt-roster-row .nm { font-family: var(--font); font-size: 14.5px; flex: 1; }
.bt-roster-row .tr { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.bt-roster-row.dead { opacity: .35; text-decoration: line-through; }

#battle-log {
  flex: none; height: 84px; overflow-y: auto;
  background: #0b0906; border-top: 1px solid var(--line);
  padding: 4px 12px; font-size: 13.5px; line-height: 1.65;
}
#battle-log .bl-war { color: #e8917d; }
#battle-log .bl-good { color: #9ed07f; }
#battle-log .bl-plot { color: #b79ce0; }
#battle-log .bl-duel { color: #ffcf72; }

/* ============================================================
   モーダル
   ============================================================ */
#modal-layer {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#modal-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  min-width: 340px; max-width: 760px; max-height: 90vh;
  display: flex; flex-direction: column;
}
#modal-title {
  padding: 10px 16px;
  font-family: var(--font); font-size: 19px; letter-spacing: .14em;
  color: var(--gold-bright);
  background: linear-gradient(#3a2d1e, #2a2016);
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
}
#modal-body { padding: 14px 16px; overflow-y: auto; line-height: 1.75; }
#modal-foot { padding: 10px 16px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 8px; }

.pick-list { display: flex; flex-direction: column; gap: 3px; max-height: 380px; overflow-y: auto; }
.pick-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--line-soft);
  border-radius: 3px; background: var(--panel-2); cursor: pointer;
}
.pick-row:hover { border-color: var(--gold); }
.pick-row.sel { border-color: var(--gold-bright); background: #40311f; }
.pick-row.disabled { opacity: .35; cursor: not-allowed; }
.pick-row .pk-name { font-family: var(--font); font-size: 16px; width: 92px; flex: none; }
.pick-row .pk-stats { font-size: 12.5px; color: var(--ink-dim); display: flex; gap: 7px; font-variant-numeric: tabular-nums; }
.pick-row .pk-note { margin-left: auto; font-size: 12.5px; color: var(--gold); }
.pick-row input[type=number] { width: 74px; background: #1a140e; border: 1px solid var(--line); border-radius: 2px; padding: 2px 4px; text-align: right; }
.pick-row select { background: #1a140e; border: 1px solid var(--line); border-radius: 2px; padding: 2px 3px; }

.modal-note { font-size: 13px; color: var(--ink-faint); margin: 8px 0 0; }
.modal-warn { color: #e0917d; }
.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.form-row label { width: 100px; color: var(--ink-dim); font-size: 13.5px; }
.form-row input[type=range] { flex: 1; }
.form-row input[type=number] { width: 100px; background: #1a140e; border: 1px solid var(--line); border-radius: 2px; padding: 4px 6px; text-align: right; }
.form-row select { flex: 1; background: #1a140e; border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; }

/* 見出しと値は同じ端で揃える。3 列目からは数が並ぶので右寄せ */
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank-table th { text-align: right; color: var(--ink-faint); font-weight: normal; font-size: 12.5px; border-bottom: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; }
.rank-table th:nth-child(-n+2), .rank-table td:nth-child(-n+2) { text-align: left; }
.rank-table td { padding: 3px 6px; border-bottom: 1px dotted #2c2317; font-variant-numeric: tabular-nums; text-align: right; }
.rank-table tr.me td { background: #3a2d1e; color: var(--gold-bright); }
.rank-table.rows-link tbody tr { cursor: pointer; }
.rank-table.rows-link tbody tr:hover td { background: #332818; }
.rank-table .flag { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* 並べ替えできる見出し */
.table-scroll { overflow-x: auto; }
.rank-table th.sort-th { cursor: pointer; user-select: none; }
.rank-table th.sort-th:hover { color: var(--gold); }
.rank-table th.sort-th.on { color: var(--gold-bright); border-bottom-color: var(--gold); }
/* 印は幅を固定して、押すたび見出しがずれないようにする */
.sort-mark { display: inline-block; width: 1em; font-size: 10px; color: var(--gold-bright); }

/* 選ぶ列の並んだ行（全員／解除など） */
.row-quick { display: flex; gap: 6px; }

/* 天災の報せ */
.dis-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--line-soft); }
.dis-row:last-of-type { border-bottom: none; }
.dis-icon { font-size: 26px; line-height: 1.2; flex: none; width: 34px; text-align: center; }
.dis-body { min-width: 0; }
.dis-head { font-family: var(--font); font-size: 17px; letter-spacing: .12em; color: #e8917d; }
.dis-tale { margin-top: 2px; line-height: 1.7; }
.dis-lost { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.dis-lost span {
  font-size: 12.5px; color: #d9917d;
  background: rgba(120,50,40,.28); border: 1px solid #6d3a30;
  border-radius: 3px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.dis-died { margin-top: 6px; color: #e0574a; font-family: var(--font); letter-spacing: .06em; }

.help-body h3 { font-family: var(--font); color: var(--gold); font-size: 17px; letter-spacing: .14em; margin: 18px 0 6px; border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.help-body h3:first-child { margin-top: 0; }
.help-body ul { margin: 4px 0; padding-left: 20px; }
.help-body li { margin: 3px 0; }
.help-body code { background: #1a140e; padding: 1px 5px; border-radius: 2px; color: var(--gold); font-size: 13px; }

/* ---------- トースト ---------- */
#toast-layer {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 6px; align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(30,24,17,.96);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 7px 18px;
  font-family: var(--font); letter-spacing: .1em;
  box-shadow: var(--shadow);
  animation: toastIn .22s ease-out;
}
.toast.bad { border-color: var(--red); color: #ffbfb2; }
.toast.good { border-color: var(--green); color: #d3f0c2; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- スクロールバー ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #16110c; }
::-webkit-scrollbar-thumb { background: #40331f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #58472c; }

/* ============================================================
   狭い画面への対応
   1240px 以下 … 詰める
   1000px 以下 … 右パネルを引き出しに、合戦の側面を下段に
    700px 縦長 … 横向きを促す案内を出す
   ============================================================ */

/* 右パネルを閉じるボタン（広い画面では隠す） */
.p-close { display: none; }
#btn-panel { display: none; }

@media (max-width: 1240px) {
  #side-pane { width: 352px; }
  :root { --cell: 44px; }
  .tb-stats { gap: 9px; font-size: 12.5px; }
  #battle-side { width: 268px; }
}

@media (max-width: 1000px) {
  :root { --cell: 38px; }

  /* 上部バーは横スクロールさせて潰さない */
  #topbar { overflow-x: auto; overflow-y: hidden; gap: 12px; }
  #topbar::-webkit-scrollbar { height: 0; }
  .tb-lord { display: none; }
  .tb-stats { margin-left: 12px; }
  .tb-buttons { margin-left: auto; }

  /* 右パネルは地図の上にかぶさる引き出しにする */
  #side-pane {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(400px, 90vw);
    z-index: 20;
    transform: translateX(101%);
    transition: transform .22s ease-out;
    box-shadow: -6px 0 22px rgba(0,0,0,.6);
  }
  #side-pane.open { transform: none; }
  .p-close {
    display: block; margin-left: 8px;
    background: none; border: none; color: var(--ink-dim);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
  }
  .p-close:hover { color: var(--gold-bright); }

  /* 引き出しを開くボタン */
  #btn-panel {
    display: block; position: absolute; right: 12px; bottom: 12px; z-index: 15;
    box-shadow: var(--shadow);
  }

  /* 合戦は側面を下段へ回して盤面に幅を譲る */
  #battle-body { flex-direction: column; }
  #battle-field-wrap { flex: 1; padding: 8px; align-items: flex-start; }
  #battle-side {
    width: 100%; flex: none;
    border-left: none; border-top: 1px solid var(--line);
    flex-direction: row; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    padding: 6px;
  }
  #battle-side .bt-box { flex: none; width: 232px; overflow-y: auto; }
  #bt-actions { order: -1; }        /* 行動は常に左端に */
  #battle-side { height: 156px; }   /* 盤面に高さを譲るため必ず抑える */
  #battle-field-wrap { min-height: 150px; }
  #battle-log { height: 58px; }
  #logbar { height: 74px; }
}

/* 背の低い画面（横向きの携帯など）はさらに詰め、盤面はスクロールで見せる */
@media (max-height: 560px) {
  :root { --cell: 34px; }
  #topbar { height: 46px; }
  #logbar { height: 56px; }
  #battle-top { height: 44px; }
  #battle-side { height: 122px; }
  #battle-log { height: 40px; }
  #bt-city { font-size: 16px; }
  .bt-side { font-size: 15px; }
  .lord-list { max-height: 210px; }
  .title-inner { padding: 16px 16px 30px; }
  .game-title { font-size: 34px; }
  .game-title span { font-size: 19px; margin-top: 2px; }
  .title-sub { margin-bottom: 12px; }
}

/* 縦長の小さな画面 … 横向きを促す */
#rotate-notice {
  position: absolute; inset: 0; z-index: 300;
  background: linear-gradient(#1a140e, #0d0a07);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px 24px; gap: 14px;
}
#rotate-notice .rn-icon { font-size: 52px; }
#rotate-notice h2 {
  font-family: var(--font); color: var(--gold-bright);
  font-size: 21px; letter-spacing: .16em; margin: 0;
}
#rotate-notice p { color: var(--ink-dim); line-height: 1.9; margin: 0; max-width: 30em; }