/* kit base.css — 部品(UI統一規格書 §6)。すべて :where() で特異性 0。ゲーム側の同じ強さのルールが読み込み順で勝つ */

:where(*, *::before, *::after) { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:where(html, body) { margin: 0; height: 100%; }
:where(html) { background: var(--bg-outer); }
:where(body) { background: var(--bg-outer); color: var(--ink); font: var(--fs-base)/1.6 var(--ff); font-synthesis: none; }
/* 筆の書体は、題と窓・板の見出しだけ(本文中の h3 には使わない) */
:where(.full h1, .modal h2, .modal h3, .sheet h2) { font-family: var(--ffb); font-weight: 400; }
:where(a) { color: inherit; }

/* ---------- ボタン(§6.1) ---------- */
:where(button) {
  font: inherit; color: var(--ink); background: var(--paper2);
  border: var(--bd2) solid var(--line); border-radius: var(--r2);
  padding: 6px 10px; min-height: var(--tap); min-width: var(--tap);
  cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
:where(button:hover:not(:disabled)) { background: var(--hover); }
:where(button:disabled) { opacity: .45; cursor: default; }
:where(button:focus-visible, a:focus-visible, [tabindex]:focus-visible) { outline: 3px solid var(--gold); outline-offset: 1px; }
:where(button.on) { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
:where(button.main) { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
:where(button.good) { background: var(--green); color: var(--on-green); border-color: var(--green); }
:where(button.warn) { background: var(--red); color: var(--on-red); border-color: var(--red); }
:where(button.main:hover:not(:disabled), button.good:hover:not(:disabled), button.warn:hover:not(:disabled), button.on:hover:not(:disabled)) { filter: brightness(1.12); }
/* 文中の小さなボタン。見た目は小さく、押せる範囲は広げる */
:where(button.inl) {
  position: relative; min-height: 0; min-width: 0; font-size: var(--fs-s); padding: 1px 8px; margin-left: 6px;
  border: var(--bd1) solid var(--gold-ink); border-radius: var(--r-pill); background: transparent; color: inherit;
}
:where(button.inl)::after { content: ""; position: absolute; inset: -8px -4px; }
:where(.row) { display: flex; gap: 8px; flex-wrap: wrap; }
:where(.row > button) { flex: 1; }
:where(.sub) { font-size: var(--fs-m); color: var(--sub); }
:where(.muted) { color: var(--sub); }
:where(.up) { color: var(--red); }
:where(.down) { color: var(--navy); }

/* ---------- 札(§6.2) ---------- */
:where(.plate) {
  position: absolute; z-index: var(--z-plate); background: var(--paper);
  border: var(--bd2) solid var(--line); border-radius: var(--r1);
  padding: 1px 6px; font-size: var(--fs-xs); line-height: 1.35;
}
:where(#pDate) { left: 5px; top: 5px; }
:where(#pMoney) { right: 5px; top: 5px; text-align: right; }
:where(#pMoney b) { display: block; font-size: var(--fs-l); font-weight: 700; }
:where(#pEvent) { left: 5px; bottom: 5px; max-width: 64%; max-height: 3.2em; overflow: hidden; }
:where(#pEvent em) { font-style: normal; font-weight: 700; }
:where(.plate .d, .d) { font-size: var(--fs-xs); }
:where(.plate .d.p, .d.p) { color: var(--green); }
:where(.plate .d.m, .d.m) { color: var(--red); }
:where(.pop) { position: absolute; z-index: calc(var(--z-plate) + 4); font-weight: 700; font-size: 20px; pointer-events: none; white-space: nowrap; text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper); }
:where(.pop.plus) { color: var(--gold-ink); }
:where(.pop.minus) { color: var(--red); }

/* ---------- チップ(§6.3) ---------- */
:where(.chip) { background: var(--paper); border: var(--bd1) solid var(--line); border-radius: var(--r-pill); padding: 0 8px; white-space: nowrap; font-size: var(--fs-s); }
:where(.chip.navy) { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
:where(.chip.green) { background: var(--green-bg); border-color: var(--green); }
:where(.chip.red) { background: var(--red-bg); border-color: var(--red); }

/* ---------- ログ(§6.4) ---------- */
:where(.ln) { padding: 5px 0; border-bottom: 1px dotted var(--line2); font-size: var(--fs-log); line-height: 1.65; }
:where(.ln small) { display: block; color: var(--sub); font-size: var(--fs-xs); line-height: 1.2; }
:where(.ln.same small) { display: none; }
:where(.ln .m) { float: right; margin-left: 10px; white-space: nowrap; font-weight: 700; }
:where(.ln .m.p) { color: var(--gold-ink); }
:where(.ln .m.n) { color: var(--red); }
:where(.ln.head) { font-weight: 700; margin-top: 8px; border-bottom: 2px solid var(--line2); color: var(--navy); }
:where(.ln.good) { color: var(--green); }
:where(.ln.bad) { color: var(--red); }
:where(.ln.event) { color: var(--navy); font-weight: 700; }
:where(.ln.narr) { font-family: var(--fm); font-style: italic; margin-left: 10px; padding-left: 8px; border-left: 3px solid var(--line2); line-height: 1.9; }
:where(.ln.sum) { background: var(--paper2); font-weight: 700; padding-left: 4px; padding-right: 4px; }
:where(.empty) { color: var(--sub); padding: 14px 4px; text-align: center; font-size: var(--fs-m); }

/* ---------- タブ(§6.5) ---------- */
:where(#tabs) { display: flex; gap: 4px; padding: 2px 5px; border-bottom: var(--bd1) solid var(--line2); overflow-x: auto; flex: none; }
:where(#tabs button) { flex: none; padding: 0 10px; font-size: var(--fs-m); border-width: var(--bd1); border-radius: var(--r1); white-space: nowrap; }

/* ---------- 伺い・機会(§6.6〜6.7) ---------- */
:where(#ukArea) { flex: none; min-height: var(--tap); padding: 6px 8px; position: relative; }
:where(#ukArea.idle) { border-top: 1px dashed var(--line2); color: var(--sub); font-size: var(--fs-s); display: flex; align-items: center; }
:where(#ukArea.ask, #ukArea.res) { border-top: var(--bd2) solid var(--navy); background: var(--navy-bg); }
:where(#ukArea.res) { min-height: 68px; }
:where(.uk h3) { margin: 0 0 2px; font-size: var(--fs-base); color: var(--navy); }
:where(.uk p) { margin: 0 0 6px; font-size: var(--fs-s); color: var(--sub); }
:where(.uk .row) { flex-wrap: nowrap; gap: var(--gap); }
:where(.uk .row button) { padding: 4px 2px; font-size: var(--fs-m); line-height: 1.3; }
:where(.uk .row button small) { display: block; font-size: var(--fs-xs); opacity: .8; }
:where(.uk .resline) { font-size: var(--fs-m); line-height: 1.5; padding-right: 64px; }
:where(.stamp) {
  position: absolute; right: 6px; top: 0; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  color: #b8281c; font: 700 26px/1 var(--fm); transform: rotate(-9deg); opacity: .92; pointer-events: none;
}
:where(.stamp.sy) { border: 4px solid #b8281c; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(184, 40, 28, .35); }
:where(.stamp.sh) { border: 4px solid #b8281c; border-radius: 50%; clip-path: inset(0 42% 0 0); box-shadow: inset 0 0 0 2px rgba(184, 40, 28, .35); justify-content: flex-start; padding-left: 10px; }
:where(.stamp.sn) { border: 4px solid #b8281c; border-radius: var(--r1); width: 52px; height: 52px; box-shadow: inset 0 0 0 2px rgba(184, 40, 28, .35); }
:where(#chances) { display: none; margin: 4px 6px 0; padding: 4px 8px; border: 1px dashed var(--line2); background: var(--gold-bg); font-size: var(--fs-m); }
:where(#chances.show) { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }
:where(#chances.attn) { border: var(--bd2) solid var(--green); background: var(--green-bg); }

/* ---------- 目標・主ボタン・副ボタン・進み方(§6.8〜6.11) ---------- */
:where(#goalLine) { text-align: left; padding: 2px 8px; font-size: var(--fs-s); background: var(--paper); line-height: 1.4; border-width: var(--bd1); }
:where(#goalLine .ok) { color: var(--green); }
:where(#goalLine .no) { color: var(--sub); }
:where(.due) { font-size: var(--fs-s); color: var(--sub); }
:where(.due.soon) { color: #b86a00; font-weight: 700; }
:where(.due.over) { color: var(--red); font-weight: 700; }
:where(#primaryRow) { display: flex; align-items: center; gap: 8px; }
:where(#primary) { flex: none; min-width: 42%; min-height: 46px; font-size: var(--fs-l); font-weight: 600; background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
:where(#primaryHint) { margin: 0; font-size: var(--fs-s); line-height: 1.4; color: var(--sub); }
:where(#acts, #speedBar) { display: flex; gap: 5px; }
:where(#acts button) { flex: 1; position: relative; }
:where(#speedBar) { align-items: center; }
:where(#unitSel) { display: flex; }
:where(#unitSel button) { border-radius: 0; margin-left: -2px; min-width: var(--tap); padding: 6px 7px; }
:where(#unitSel button:first-child) { border-radius: var(--r2) 0 0 var(--r2); margin-left: 0; }
:where(#unitSel button:last-child) { border-radius: 0 var(--r2) var(--r2) 0; }
:where(#speedBtns) { display: flex; gap: 4px; margin-left: auto; }
:where(#speedBtns button) { min-width: var(--tap); padding: 6px 4px; }
:where(.badge) {
  position: absolute; top: -8px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--gold); color: var(--on-gold); font-size: var(--fs-xs); font-weight: 700; line-height: 18px; text-align: center; pointer-events: none;
}

/* ---------- パネル・kv・棒・表(§6.12) ---------- */
:where(.panel) { background: var(--paper); border: var(--bd2) solid var(--line); border-radius: var(--r2); padding: var(--pad) 10px; }
:where(.panel h2) { margin: 0 0 6px; font-size: var(--fs-base); border-bottom: var(--bd1) solid var(--line2); padding-bottom: 3px; letter-spacing: .15em; }
:where(html:not([lang="ja"]) .panel h2) { letter-spacing: .03em; }
:where(.kv) { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
:where(.kv > span:first-child) { color: var(--sub); }
:where(.bar) { height: 9px; background: var(--paper2); margin: 3px 0 6px; overflow: hidden; border-radius: 3px; }
:where(.bar > i) { display: block; height: 100%; background: var(--green); }
:where(.bar.bad > i) { background: var(--red); }
:where(table) { border-collapse: collapse; width: 100%; }
:where(th, td) { padding: 3px 4px; text-align: right; border-bottom: 1px dotted var(--line2); white-space: nowrap; }
:where(th:first-child, td:first-child) { text-align: left; }
:where(th) { font-weight: 400; color: var(--sub); font-size: var(--fs-m); }
:where(td.zero) { color: var(--red); font-weight: 700; }

/* ---------- 窓・板(§6.13) ---------- */
:where(.shade) { position: absolute; inset: 0; z-index: var(--z-layer); background: var(--shade); display: flex; align-items: center; justify-content: center; padding: 12px; }
:where(.shade.sheetwrap) { align-items: flex-end; padding: 0; }
:where(.guard button, .guard a) { pointer-events: none; }
:where(.modal) { width: 100%; max-height: 92%; overflow-y: auto; background: var(--bg); border: var(--bd3) solid var(--line); border-radius: var(--r3); padding: 14px; color: var(--ink); }
:where(.sheet) { width: 100%; max-height: var(--sheet-h, 45%); overflow-y: auto; background: var(--bg); border-top: var(--bd3) solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); color: var(--ink); }
:where(.modal h2, .sheet h2) { margin: 0 0 6px; font-size: var(--fs-l); }
:where(.modal h3, .sheet h3) { margin: 12px 0 2px; font-size: var(--fs-base); }
:where(.sheet h3) { border-bottom: var(--bd1) solid var(--line2); }
:where(.modal p) { margin: 6px 0; }
:where(.modal .row, .sheet .row) { margin-top: 10px; }
:where(.x) { float: right; margin-left: 8px; }

/* ---------- 通知(§6.14) ---------- */
/* 既定(種類なし)は旅籠夜話の通知と同じ見た目。ゲームが自分で #toast を作って出す場合も隠さない(隠すのは hidden 属性のときだけ) */
:where(#toast) {
  position: absolute; left: 50%; top: 46%; transform: translateX(-50%); z-index: var(--z-toast);
  max-width: 86%; padding: 8px 14px; border-radius: 6px; font-size: var(--fs-m);
  background: rgba(36, 57, 92, .95); color: #fff;
}
:where(#toast[hidden]) { display: none; }
:where(#toast.err, #toast.ok, #toast.deal) { background: var(--paper); color: var(--ink); border: var(--bd3) solid var(--red); }
:where(#toast.ok) { border-color: var(--green); }
:where(#toast.deal) { border-color: var(--gold); }
:where(#toast b) { color: var(--red); }
:where(#toast.ok b) { color: var(--green); }
:where(#toast.deal b) { color: var(--gold-ink); }

/* ---------- 導入ガイド(§6.15) ---------- */
:where(#tour) { position: fixed; inset: 0; z-index: var(--z-tour); }
:where(#tour .thole) { position: fixed; border-radius: var(--r3); box-shadow: 0 0 0 9999px rgba(20, 14, 8, .66); outline: 3px solid var(--gold); pointer-events: none; }
:where(#tour .tbub) {
  position: fixed; width: min(360px, calc(100vw - 16px)); background: #24395c; color: #fff;
  border: 2px solid var(--gold); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); font-size: var(--fs-base); line-height: 1.6;
}
:where(#tour .tnav) { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 6px; }
:where(#tour .tn) { font-size: var(--fs-s); color: #cdd7ea; }
:where(#tour button) { background: transparent; color: #fff; border-color: #8fa3c8; font-size: var(--fs-m); }
:where(#tour button.main) { background: var(--gold); color: #2b2118; border-color: var(--gold); }

/* ---------- 札タイル(§6.16) ---------- */
:where(.tilegrid) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
:where(.tile) {
  aspect-ratio: 3 / 4; border: var(--bd2) solid var(--line); border-radius: 4px; background: var(--paper); position: relative;
  padding: 5px; font-size: var(--fs-s); line-height: 1.3; display: flex; flex-direction: column; justify-content: space-between;
}
:where(.tile.back) { background: repeating-linear-gradient(45deg, #24395c 0 6px, #2c456f 6px 12px); color: #cdd7ea; align-items: center; justify-content: center; font-size: 30px; border-color: #14223a; }
:where(.tile.heard) { background: var(--paper2); }
:where(.tile.kfull) { border-color: #c8921c; box-shadow: inset 0 0 0 2px var(--gold); }
:where(.tile .nm) { font-weight: 600; font-size: var(--fs-m); overflow-wrap: anywhere; }
:where(.tile .seal) {
  position: absolute; right: 3px; top: 3px; width: 21px; height: 21px; border: 2px solid #b8281c; color: #b8281c; border-radius: 50%;
  font-size: var(--fs-xs); text-align: center; line-height: 17px; font-weight: 700;
}

/* ---------- 全面画面(§5.3) ---------- */
:where(.full) {
  position: absolute; inset: 0; z-index: var(--z-full); background: #1c1710; color: #f1e7cf;
  display: flex; flex-direction: column; justify-content: safe center; overflow-y: auto; padding: 24px 22px;
}
:where(.full h1) { font-size: 26px; margin: 0 0 4px; letter-spacing: .2em; text-align: center; }
:where(html:not([lang="ja"]) .full h1) { letter-spacing: .05em; font-size: 23px; line-height: 1.3; }
:where(.full .sub) { text-align: center; color: #bfae8a; font-size: var(--fs-s); margin-bottom: 26px; }
:where(.full .col) { display: flex; flex-direction: column; gap: 10px; }
:where(.full button) { background: #3a2e20; color: #f1e7cf; border-color: #8a7452; min-height: 46px; }
:where(.full button.main) { background: var(--red); border-color: var(--gold); color: var(--on-red); }
:where(.full .skip) { position: absolute; right: 12px; top: 12px; min-height: var(--tap); font-size: var(--fs-m); }

/* ---------- 長押し確定(§6.19) ---------- */
:where(.btn.hold) { position: relative; overflow: hidden; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--tap); }
:where(.hold-fill) { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--navy); opacity: .85; pointer-events: none; }
:where(.btn.hold.danger .hold-fill) { background: var(--red); }
:where(.hold-label) { position: relative; }
:where(.hold-hint) { position: relative; display: block; font-size: 14px; color: var(--sub); }
:where(.hold-num) { position: relative; margin-left: 6px; font-size: 14px; }
:where(.btn.hold.holding) { border-color: var(--gold); }

/* ---------- 起動失敗の案内(§4) ---------- */
:where(#bootmsg) {
  position: fixed; inset: 0; z-index: var(--z-boot); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center; background: #1c1612; color: #e8dcc0; font-size: 14px; line-height: 1.7; visibility: hidden;
  animation: kit-bootshow 0s 4s forwards;
}
:where(#bootmsg a) { color: #1c1612; background: #e8b04a; padding: 12px 24px; border-radius: 6px; text-decoration: none; min-height: var(--tap); box-sizing: border-box; }
@keyframes kit-bootshow { to { visibility: visible; } }