/* ブラ天 シミュレーター共通: 配色・基本・部隊の入力欄 (battle.html / optimize.html) */
/* ゲーム (ブラウザ三国志天) の画面に寄せた見た目: 木目の茶色の地、羊皮紙の面、赤い雲模様の帯、金の縁取り。
   ゲームと同じく、OS のダークモードでも同じ色にする */
:root {
  color-scheme: light;
  --wood: #4a3729; --wood-dark: #33261d;                 /* 地 (枠の茶色) */
  --band: #a8262b; --band-dark: #8f1e23;                 /* 赤い帯 */
  --paper: #fffaf0; --sheet: #f4ead6; --sheet-2: #ebdfc5; /* 入力欄 / 面 / 一段濃い面 */
  --ink: #3b3127; --ink-soft: #7a6852; --rule: #d3c19f;
  --attack: #2a8cc7; --attack-dark: #1d6a9c; --attack-tint: #dcebf3;   /* 自部隊 (青) */
  --defend: #d23f2f; --defend-dark: #a82c20; --defend-tint: #f5dcd3;   /* 敵部隊 (赤) */
  --brass: #c8962e; --gold: #e6b54a; --good: #4f8f1c; --warn: #b8660f; --draw: #9a8e7c;
  /* 文字は見出し・本文・数字ともゲームに近い丸ゴシック (M PLUS Rounded 1c) にそろえる [ユーザー指定 2026-10-19] */
  --f-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --f-body: var(--f-display);
  --f-num: var(--f-display);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --r: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; color: var(--ink); font: 15px/1.6 var(--f-body);
  background: var(--wood-dark) radial-gradient(ellipse at 50% -10%, #5e4634 0%, var(--wood) 45%, var(--wood-dark) 100%) fixed;
  padding-block: 0 var(--s-6);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 1100px; margin: 0 auto; display: grid; gap: var(--s-4); }

/* 上の見出し: ゲームの「報告書詳細」と同じく、羊皮紙の題字の帯と、赤い雲模様の帯の上にページのタブ */
.gm-head { margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.gm-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-4);
  padding: 8px max(16px, env(safe-area-inset-left, 0px)) 6px; background: linear-gradient(#fbf5e8, #f1e6cf);
  border-bottom: 1px solid #c9b48e;
}
.gm-title h1 { margin: 0; font: 800 20px/1.3 var(--f-display); letter-spacing: 0.12em; color: #4a3a2c; }
.gm-title .sub { margin: 0; color: var(--ink-soft); font-size: 12px; }
.gm-tabs {
  display: flex; gap: 6px; padding: 10px max(16px, env(safe-area-inset-left, 0px)) 0; overflow-x: auto;
  background:
    radial-gradient(circle at 12px 18px, rgba(255, 255, 255, 0.07) 0 9px, transparent 10px) 0 0 / 44px 30px,
    repeating-linear-gradient(135deg, var(--band) 0 14px, var(--band-dark) 14px 28px);
  border-bottom: 3px solid var(--wood);
}
.gm-tabs a {
  flex: 0 0 auto; min-width: 6em; text-align: center; padding: 7px 16px 6px; border-radius: 9px 9px 0 0; text-decoration: none;
  background: linear-gradient(#f3e8d0, #e3d3b2); color: #5a4434; font: 700 15px var(--f-display); letter-spacing: 0.1em;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.gm-tabs a:hover { background: linear-gradient(#fbf3e2, #ecdfc2); }
.gm-tabs a[aria-current="page"] { background: var(--wood); color: #fff; box-shadow: inset 0 3px 0 var(--gold); }
main.wrap { padding-top: var(--s-4); }

/* 羊皮紙の面 (各ページの .panel / .side / .result などが使う) */
.side, .panel, .result, details.report, .skillbar, .hit, .steps, .vs {
  border-color: #b99a6a !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.25);
}
h2 { color: var(--ink); }
a { color: var(--attack-dark); }
footer, footer a { color: #d8c8a8 !important; }

input[type="number"], input[type="text"], select {
  width: 100%; font: 14px var(--f-num); color: var(--ink); background: var(--paper);
  border: 1px solid #c9b48e; border-radius: 4px; padding: 5px 6px; min-width: 0;
}
select { font-family: var(--f-body); }
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.field { display: grid; gap: 2px; min-width: 0; }
.field > span { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.04em; }
button.run {
  font: 700 14px var(--f-body); padding: 7px 22px; cursor: pointer; border-radius: 999px; letter-spacing: 0.06em;
  background: linear-gradient(#ffe48a, #f0b93a 55%, #d99a1f); color: #4a3216; border: 1px solid #a8761c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #8a5f16;
}
button.run:hover { filter: brightness(1.05); }
button.run:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 #8a5f16; }
button.run:disabled { opacity: 0.5; cursor: default; }
button.ghost {
  font: 500 13px var(--f-body); padding: 5px 14px; cursor: pointer; border-radius: 999px;
  background: linear-gradient(#fffaf0, #efe2c6); color: #5a4434; border: 1px solid #b39a72;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
button.ghost:hover { border-color: #8a6f52; color: var(--ink); }
button.ghost:disabled { opacity: 0.5; cursor: default; }
.error { color: var(--defend); font-size: 13px; margin: 0; }

/* 部隊 */
.side { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; min-width: 0; }
.side > h2 { margin: 0; padding: var(--s-2) var(--s-4); font: 600 15px var(--f-display); letter-spacing: 0.2em; color: #fff; }
.side.a > h2 { background: linear-gradient(90deg, var(--attack-dark), var(--attack) 60%, #5bb4e4); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.side.b > h2 { background: linear-gradient(90deg, var(--defend-dark), var(--defend) 60%, #ec6d55); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.team-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-3) var(--s-4) 0; }
.gen { margin: var(--s-3) var(--s-4) 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-2); }
.gen:last-child { border-bottom: 0; margin-bottom: var(--s-2); }
.gen-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
/* 武将の顔アイコン (ui/team-form.js の iconHtml / iconEl) */
.gicon {
  display: inline-block; flex: none; vertical-align: middle; border-radius: 4px;
  background: url("../img/generals.webp") no-repeat; box-shadow: 0 0 0 1px rgba(90, 68, 52, 0.45);
}
.gicon.none { background: var(--sheet-2); box-shadow: none; }
.gicons { display: inline-flex; gap: 2px; vertical-align: middle; }
.role { font: 600 12px var(--f-display); letter-spacing: 0.1em; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.a .role { color: var(--attack); } .b .role { color: var(--defend); }
.role.leader { color: #fff !important; }
.a .role.leader { background: var(--attack); border-color: var(--attack); }
.b .role.leader { background: var(--defend); border-color: var(--defend); }
.apt { font: 600 13px var(--f-num); color: var(--ink-soft); white-space: nowrap; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.grow { display: grid; grid-template-columns: 70px 90px minmax(0, 1fr); gap: var(--s-2); align-items: end; }
.enh { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; padding-bottom: 4px; }
.enh label { white-space: nowrap; cursor: pointer; }
.pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--s-2); align-items: end; }
.pts .left { display: grid; gap: 4px; justify-items: start; font: 12px var(--f-num); color: var(--ink-soft); white-space: nowrap; }
.pts .left.over span { color: var(--defend); font-weight: 600; }
.ptbtn {
  font: 600 11px var(--f-num); padding: 3px 6px; cursor: pointer; border-radius: 4px;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); white-space: nowrap;
}
.ptbtn:hover { color: var(--ink); border-color: var(--ink-soft); }
.pts .field .ptbtn { justify-self: stretch; }
.stats { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); padding: var(--s-1) var(--s-2); border-radius: 4px; font-size: 12px; color: var(--ink-soft); }
.a .stats { background: var(--attack-tint); } .b .stats { background: var(--defend-tint); }
.stats b { font: 600 13px var(--f-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.utext { margin: 0; font-size: 12px; color: var(--ink-soft); }
.utext b { color: var(--ink); font-weight: 500; }

footer { font-size: 12px; color: var(--ink-soft); display: grid; gap: var(--s-1); }
footer p { margin: 0; max-width: 80ch; }

@media (max-width: 420px) {
  .skills { grid-template-columns: 1fr; }
  .grow { grid-template-columns: 64px 80px minmax(0, 1fr); }
  .pts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pts .left { grid-column: 1 / -1; grid-auto-flow: column; align-items: center; justify-content: start; gap: var(--s-3); }
}

/* スキルの選択 (段階的に開くメニュー。ui/team-form.js の SkillPicker) */
button.skillpick {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 4px; cursor: pointer; text-align: left;
  font: 14px var(--f-body); color: var(--ink); background: var(--paper);
  border: 1px solid #c9b48e; border-radius: 4px; padding: 5px 6px;
}
button.skillpick > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.skillpick::after { content: "▾"; color: var(--ink-soft); font-size: 11px; }
button.skillpick.empty > span { color: var(--ink-soft); }
.sp-col {
  position: absolute; z-index: 1000; min-width: 12em; max-width: min(22em, calc(100vw - 16px));
  max-height: min(70vh, 480px); overflow-y: auto; padding: 4px;
  background: var(--sheet); color: var(--ink); border: 1px solid #b99a6a; border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.sp-title { padding: 4px 10px 2px; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.06em; }
.sp-item {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; text-align: left; cursor: pointer;
  padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: 14px var(--f-body);
}
.sp-item small { font-size: 11px; line-height: 1.4; color: var(--ink-soft); }
.sp-item:hover, .sp-item:focus-visible, .sp-item.sp-open { background: var(--attack-tint); outline: none; }
.sp-branch { flex-direction: row; justify-content: space-between; gap: 12px; }
.sp-branch::after { content: "›"; color: var(--ink-soft); }
.sp-has > span::after, .sp-cur > span::after { content: " ●"; color: var(--brass); font-size: 10px; vertical-align: 1px; }
.sp-cur { font-weight: 700; }
.sp-back { color: var(--ink-soft); font-size: 13px; }

/* 部隊の上の「プリセットを呼び出す / プリセットとして保存」 */
.presetbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.presetbar select { flex: 1 1 14em; width: auto; }
.presetbar a { font-size: 13px; color: var(--ink-soft); }
.side > .presetbar { margin: var(--s-3) var(--s-4) 0; }
@media (max-width: 600px) {
  .gm-head { position: static; }
  .gm-title .sub { display: none; }
  .gm-tabs { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .gm-tabs a { flex: 1 1 0; min-width: 0; padding: 6px 2px 5px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
}