@charset "UTF-8";

:root {
  --bg: #070b0b;
  --panel: rgba(12, 21, 20, .96);
  --panel-2: #111d1b;
  --line: rgba(202, 179, 116, .2);
  --line-strong: rgba(218, 191, 117, .42);
  --gold: #d3b267;
  --gold-light: #f0d893;
  --ink: #e8e1ce;
  --muted: #9ba9a1;
  --teal: #77b9ae;
  --red: #c86a56;
  --green: #82b681;
  --blue: #75a8c5;
  --clan: #75a8c5;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-width: 1180px; min-height: 100%; margin: 0; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 10%, #172724 0, #0b1211 38%, #050808 80%),
    var(--bg);
  color: var(--ink);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .14;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px);
  mix-blend-mode: overlay;
}
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
button, kbd { -webkit-user-select: none; user-select: none; }

.game-frame {
  width: min(1460px, calc(100vw - 44px));
  height: min(900px, calc(100vh - 42px));
  min-height: 720px;
  margin: 21px auto;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) 74px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #09110f;
  box-shadow: 0 26px 90px rgba(0,0,0,.58);
}

.game-hud {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(260px,1.45fr) repeat(6,minmax(98px,.75fr)) 90px;
  align-items: stretch;
  background: linear-gradient(115deg, #13201f, #091311 68%);
  border-bottom: 1px solid var(--line-strong);
}
.clan-head { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.clan-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  color: var(--clan);
  border: 1px solid rgba(211,178,103,.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237,225,193,.08), rgba(7,15,14,.94) 72%);
  box-shadow: inset 0 0 0 3px rgba(7,15,14,.72), 0 0 18px color-mix(in srgb, var(--clan) 24%, transparent);
}
.clan-mark svg { width: 37px; height: 37px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.clan-head strong,.clan-head small,.hud-kicker { display: block; }
.hud-kicker { color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.clan-head strong { margin-top: 2px; font-size: 19px; font-weight: 600; letter-spacing: .1em; }
.clan-head small { margin-top: 2px; color: var(--gold); font-size: 9px; letter-spacing: .06em; }
.hud-stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 2px 4px;
  padding: 10px 14px;
  border-left: 1px solid var(--line);
}
.hud-stat span { grid-column: 1/-1; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.hud-stat b { min-width: 0; color: var(--gold-light); font: 500 18px Georgia,serif; white-space: nowrap; }
.hud-stat em { align-self: end; color: var(--muted); font-size: 8px; font-style: normal; }
.hud-stat.last b { font-family: inherit; font-size: 14px; }
.hud-tools { display: flex; align-items: center; justify-content: center; gap: 6px; border-left: 1px solid var(--line); }
.hud-tools button { width: 32px; height: 32px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; }
.hud-tools button:hover { border-color: var(--gold); color: var(--gold-light); }

.play-area { min-height: 0; display: grid; grid-template-columns: 248px minmax(560px,1fr) 310px; }
.command-rail,.side-panel {
  position: relative;
  z-index: 3;
  min-height: 0;
  background: var(--panel);
  backdrop-filter: blur(14px);
}
.command-rail { padding: 18px 14px; border-right: 1px solid var(--line); overflow-y: auto; box-shadow: 14px 0 32px rgba(0,0,0,.24); }
.rail-heading { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.rail-heading small { color: rgba(155,169,161,.55); font: 7px system-ui,sans-serif; }
.monthly-policy { padding: 2px 6px 18px; border-bottom: 1px solid var(--line); }
.monthly-policy h2 { margin: 11px 0 12px; font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: .06em; }
.monthly-policy p { margin: 8px 0 0; color: var(--muted); font: 9px/1.65 system-ui,sans-serif; }
.policy-progress { height: 3px; background: rgba(255,255,255,.07); }
.policy-progress i { display: block; width: 66%; height: 100%; background: var(--gold); box-shadow: 0 0 8px rgba(211,178,103,.38); }
.urgent-report {
  width: 100%;
  min-height: 54px;
  margin: 14px 0;
  display: grid;
  grid-template-columns: 26px 1fr 14px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(200,106,86,.36);
  background: linear-gradient(90deg,rgba(200,106,86,.13),transparent);
  text-align: left;
  cursor: pointer;
}
.urgent-report > i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--red); border-radius: 50%; color: var(--red); font: normal 11px system-ui; }
.urgent-report span small,.urgent-report span strong { display: block; }
.urgent-report span small { color: var(--red); font: 8px system-ui; }
.urgent-report span strong { margin-top: 3px; font-size: 10px; font-weight: 500; }
.urgent-report > b { color: var(--red); font-size: 20px; font-weight: 400; }
.mode-nav { display: grid; gap: 4px; }
.mode-button {
  min-height: 57px;
  display: grid;
  grid-template-columns: 34px 1fr 19px;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.mode-button:hover { background: rgba(255,255,255,.03); }
.mode-button.active { border-color: var(--line); border-left-color: var(--gold); background: linear-gradient(90deg,rgba(211,178,103,.12),transparent); }
.mode-button > i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-light); font-size: 11px; font-style: normal; }
.mode-button span strong,.mode-button span small { display: block; }
.mode-button span strong { font-size: 12px; letter-spacing: .12em; }
.mode-button span small { margin-top: 4px; color: var(--muted); font: 8px system-ui,sans-serif; }
kbd { padding: 2px 4px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255,255,255,.03); color: var(--muted); font: 8px system-ui,sans-serif; }
.order-guide { margin: 18px 6px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.order-guide .rail-heading { margin-bottom: 10px; }
.order-guide .rail-heading b { color: var(--gold); font-size: 9px; }
.order-guide > div:not(.rail-heading) { display: flex; align-items: center; gap: 8px; min-height: 29px; color: var(--muted); font: 9px system-ui,sans-serif; }
.order-guide > div > i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }

.map-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #081110; }
.strategic-map {
  position: absolute;
  inset: 0 0 30px;
  width: auto;
  height: auto;
  overflow: hidden;
  border: 0;
  /* contain 固定。map-stage は画面比で正方形に近くなることがあり、cover だと横が
     最大48%切り取られて九州（佐賀・鹿児島）が枠外へ出る。game.js の MAP_FIT と
     必ず同じ値にすること（ずらすと拠点だけが無言で地図から浮く）。 */
  background: #081b20 url("assets/maps/strategic-japan.png") center / contain no-repeat;
}
.strategic-map::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(circle at 58% 47%,transparent 0 44%,rgba(3,8,8,.54) 100%),linear-gradient(180deg,rgba(2,8,8,.32),transparent 23%,transparent 76%,rgba(3,8,8,.64)); }
.strategic-map::after { content:""; position:absolute; inset:14px; z-index:1; pointer-events:none; border:1px solid rgba(214,193,137,.16); box-shadow:inset 0 0 75px rgba(0,0,0,.38); }
.map-toolbar {
  position: absolute;
  z-index: 9;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(10,19,18,.9);
  box-shadow: 0 8px 26px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
}
.map-layers { display: flex; }
.map-layers button,.map-tool { height: 29px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; white-space: nowrap; }
.map-layers button.active { color: var(--gold-light); background: rgba(211,178,103,.13); box-shadow: inset 0 -1px var(--gold); }
.map-tool { border-left: 1px solid var(--line); }
.map-status { position:absolute; z-index:8; left:0; right:0; bottom:0; height:30px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 13px; border-top:1px solid var(--line); background:#091211; color:var(--muted); font:8px system-ui,sans-serif; }
.map-status > span { display:flex; align-items:center; gap:5px; }
.map-status > span i { width:5px; height:5px; border-radius:50%; background:var(--gold); }
.map-status > span b { color:var(--ink); }
.map-status p { margin:0; }
.map-status small { justify-self:end; color:var(--gold); font-size:8px; }
.node { position:absolute; z-index:3; transform:translate(-50%,-50%); display:grid; grid-template-columns:8px 1fr; align-items:center; gap:5px; min-width:60px; padding:4px 6px; border:1px solid rgba(0,0,0,.64); border-left:2px solid var(--owner); background:rgba(7,15,15,.86); color:#fff; font:600 9px "Yu Mincho",serif; text-shadow:0 1px 2px #000; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.48); cursor:pointer; transition:transform .16s,opacity .18s,background .18s; }
.node:hover,.node.active { z-index:5; transform:translate(-50%,-50%) scale(1.08); background:#142321; border-color:var(--gold); }
.node.active { outline:1px solid var(--gold-light); outline-offset:3px; }
.node i { width:7px; height:7px; display:block; background:var(--owner); border-radius:50%; box-shadow:0 0 7px var(--owner); }
.node .port { color:var(--muted); font-size:7px; }
.route { position:absolute; z-index:2; height:1px; transform-origin:left center; background:linear-gradient(90deg,rgba(211,196,157,.68),rgba(211,196,157,.08)); pointer-events:none; }
.strategic-map[data-layer="clean"] .node,.strategic-map[data-layer="clean"] .route { opacity:0; pointer-events:none; }
.strategic-map[data-layer="route"] .node { opacity:.58; }
.strategic-map[data-layer="route"] .route { height:2px; box-shadow:0 0 6px rgba(240,216,147,.5); }
.strategic-map[data-mode="military"]::before { background:radial-gradient(circle at 64% 50%,rgba(172,56,45,.12),transparent 33%),radial-gradient(circle at 58% 47%,transparent 0 44%,rgba(3,8,8,.58) 100%); }
.strategic-map[data-mode="diplomacy"]::before { background:radial-gradient(circle at 49% 52%,rgba(86,148,136,.14),transparent 38%),radial-gradient(circle at 58% 47%,transparent 0 44%,rgba(3,8,8,.58) 100%); }
.strategic-map.labels-hidden .node { min-width:0; padding:7px; grid-template-columns:7px; border-radius:50%; }
.strategic-map.labels-hidden .node span { display:none; }

.side-panel { overflow-y:auto; padding:18px; border-left:1px solid var(--line); box-shadow:-14px 0 32px rgba(0,0,0,.24); }
.location-panel { min-height:220px; padding-bottom:17px; border-bottom:1px solid var(--line); }
.empty { color:var(--muted); font-size:11px; line-height:1.8; }
.side-title { margin:3px 0 5px; color:var(--gold-light); font-size:24px; font-weight:500; letter-spacing:.12em; }
.side-owner { color:var(--muted); font-size:10px; }
.side-owner i { display:inline-block; width:7px; height:7px; margin-right:5px; background:var(--owner); border-radius:50%; box-shadow:0 0 6px var(--owner); }
.side-image { float:right; width:74px; height:74px; margin:2px 0 8px 10px; border:1px solid var(--line-strong); object-fit:cover; filter:saturate(.58) contrast(1.06); }
.side-note { margin:9px 0; color:var(--muted); font:9px/1.75 system-ui,sans-serif; }
.command-row { clear:both; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding-top:9px; }
.command-row .wide { grid-column:1/-1; }
.command-row button,.sub-button { min-height:34px; border:1px solid var(--line-strong); background:rgba(255,255,255,.025); color:var(--ink); font-size:10px; cursor:pointer; }
.command-row button:hover,.sub-button:hover { border-color:var(--gold); color:var(--gold-light); background:rgba(211,178,103,.08); }
.command-row button.primary { border-color:var(--gold); background:rgba(211,178,103,.14); color:var(--gold-light); box-shadow:inset 0 0 0 1px rgba(211,178,103,.25); }
.intel-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin:15px 0 12px; border-bottom:1px solid var(--line); }
.intel-tabs button { height:32px; border:0; background:transparent; color:var(--muted); font-size:9px; cursor:pointer; }
.intel-tabs button.active { color:var(--gold-light); box-shadow:inset 0 -1px var(--gold); }
.intel-panel { display:none; }
.intel-panel.active { display:block; }
.clans,.chronicle { margin-top:0; }
.clans h2,.chronicle h2 { margin:0 0 7px; color:var(--muted); text-align:left; font-size:8px; font-weight:500; letter-spacing:.16em; }
.faction-row { display:flex; align-items:center; gap:7px; min-height:26px; padding:4px 2px; border-bottom:1px solid rgba(202,179,116,.12); font-size:9px; }
.faction-row i { width:8px; height:8px; flex:none; background:var(--color); border-radius:1px; }
.faction-row b { margin-left:auto; color:var(--muted); font:400 8px system-ui,sans-serif; }
.roster-row { display:flex; align-items:center; gap:8px; padding:6px 2px; border-bottom:1px solid rgba(202,179,116,.12); }
.roster-row img { width:30px; height:38px; flex:none; object-fit:cover; border:1px solid var(--line-strong); filter:saturate(.6); }
.roster-row strong { display:block; font-size:10px; font-weight:500; color:var(--ink); }
.roster-row small { display:block; margin-top:2px; color:var(--muted); font:8px system-ui,sans-serif; }
.chronicle ol { margin:0; padding:0; list-style:none; }
.chronicle li { padding:9px 2px; border-bottom:1px solid rgba(202,179,116,.12); color:var(--muted); font:9px/1.6 system-ui,sans-serif; }
.chronicle time { display:block; margin-bottom:3px; color:var(--gold); font-size:8px; }
.chronicle .event { color:var(--ink); }

.game-footer { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px 0 24px; border-top:1px solid var(--line-strong); background:#091210; }
.turn-forecast,.footer-actions { display:flex; align-items:center; }
.turn-forecast { gap:20px; }
.turn-forecast > span { color:var(--gold); font-size:10px; letter-spacing:.13em; }
.turn-forecast > div { padding-left:17px; border-left:1px solid var(--line); }
.turn-forecast small,.turn-forecast b { display:block; }
.turn-forecast small { color:var(--muted); font:8px system-ui,sans-serif; }
.turn-forecast b { margin-top:3px; color:var(--ink); font:500 10px system-ui,sans-serif; }
.footer-actions { gap:7px; }
.sub-button { min-width:70px; padding:0 10px; }
.end-turn { min-width:245px; height:54px; display:flex; justify-content:space-between; align-items:center; padding:0 13px 0 17px; border:1px solid var(--gold); border-radius:3px; background:linear-gradient(135deg,rgba(211,178,103,.19),rgba(211,178,103,.045)); color:var(--gold-light); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(211,178,103,.1); }
.end-turn:hover { background:linear-gradient(135deg,rgba(211,178,103,.28),rgba(211,178,103,.08)); }
.end-turn span { text-align:left; font-size:15px; font-weight:600; letter-spacing:.12em; }
.end-turn span small { display:block; margin-top:3px; color:var(--muted); font:8px system-ui,sans-serif; letter-spacing:0; }

.start-dialog,.command-dialog { color:var(--ink); border:1px solid var(--line-strong); background:rgba(10,19,18,.98); box-shadow:0 28px 100px #000; }
.start-dialog { width:760px; max-width:calc(100% - 32px); padding:0; grid-template-columns:285px 1fr; }
.start-dialog[open] { display:grid; }
.start-dialog::backdrop,.command-dialog::backdrop { background:rgba(2,6,6,.82); backdrop-filter:blur(4px); }
.title-art { min-height:390px; background:linear-gradient(rgba(6,16,15,.25),rgba(6,16,15,.9)),url("assets/battles/field-battle.webp") center/cover; }
.start-dialog section { padding:27px; }
.start-dialog p { margin:0; color:var(--teal); font-size:9px; letter-spacing:.2em; }
.start-dialog h1 { margin:3px 0 14px; color:var(--gold-light); font-size:34px; font-weight:600; }
.start-dialog h2 { margin:0; font-size:17px; font-weight:500; }
.start-dialog span { display:block; margin-top:7px; color:var(--muted); font:10px/1.75 system-ui,sans-serif; }
.start-dialog h3 { margin:20px 0 7px; color:var(--gold); font-size:11px; }
.scenario-choices,.difficulty-choices { display:grid; gap:5px; }
.faction-choices { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; }
.scenario,.choice { padding:9px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--ink); text-align:left; cursor:pointer; }
.scenario:hover,.choice:hover,.scenario.active,.choice.active { border-color:var(--gold); background:rgba(211,178,103,.08); }
.scenario strong,.scenario small,.choice strong,.choice small { display:block; }
.scenario small,.choice small { margin-top:3px; color:var(--muted); font-size:8px; }
.step-back { margin-top:13px; border:0; background:transparent; color:var(--gold); font-size:9px; cursor:pointer; }
.command-dialog { width:480px; max-width:calc(100% - 32px); padding:22px; }
.command-dialog h2 { margin:3px 0 8px; color:var(--gold-light); font-size:22px; font-weight:500; }
.command-dialog p { color:var(--muted); font:10px/1.75 system-ui,sans-serif; }
.command-options { display:grid; gap:6px; margin:14px 0; }
.command-options button { padding:10px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--ink); text-align:left; cursor:pointer; }
.command-options button:hover { border-color:var(--gold); background:rgba(211,178,103,.07); }
.command-options b,.command-options small { display:block; }
.command-options small { margin-top:3px; color:var(--muted); font-size:8px; }
.dialog-close { float:right; padding:7px 15px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; }
.recruit-card { display:grid; grid-template-columns:92px 1fr; gap:14px; }
.recruit-portrait { width:92px; height:118px; object-fit:cover; border:1px solid var(--line-strong); }
.command-dialog.action-result-dialog { width:min(780px,calc(100% - 32px)); padding:0; overflow:hidden; }
.action-result { position:relative; margin:0; min-height:430px; background:#050a09; }
.action-result::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 38%,rgba(5,10,9,.93) 82%,#050a09 100%),linear-gradient(90deg,rgba(5,10,9,.35),transparent 28%,transparent 72%,rgba(5,10,9,.35)); }
.action-result img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.78) contrast(1.04); }
.action-result figcaption { position:absolute; z-index:2; left:28px; right:28px; bottom:24px; text-shadow:0 2px 12px #000; }
.action-result figcaption p { margin:0 0 5px; color:var(--gold); font-size:8px; letter-spacing:.2em; }
.action-result figcaption h2 { margin:0; color:var(--gold-light); font-size:27px; letter-spacing:.12em; }
.action-result figcaption span { display:block; max-width:620px; margin-top:8px; color:#d7d4c9; font:10px/1.7 system-ui,sans-serif; }
.action-result-dialog > .dialog-close { float:none; width:100%; height:46px; border-width:1px 0 0; background:#0b1514; color:var(--gold-light); }

.fs-toggle { position:fixed; z-index:100; top:10px; right:10px; width:36px; height:36px; border:1px solid var(--line-strong); background:#0b1615; color:var(--gold-light); cursor:pointer; }
.fs-gate { display:none; position:fixed; inset:0; z-index:90; place-items:center; padding:20px; background:rgba(2,6,6,.91); }
.fs-gate-card { max-width:370px; padding:25px; border:1px solid var(--line-strong); background:#0b1514; text-align:center; }
.fs-gate-icon { color:var(--gold); font-size:25px; }
.fs-gate-title { margin:10px 0; color:var(--gold-light); font-size:24px; }
.fs-gate-jp { font-size:12px; }
.fs-gate-en,.fs-gate-rotate { margin-top:7px; color:var(--muted); font:9px system-ui,sans-serif; }
.fs-gate-rotate { display:none; }

@media (max-width: 1280px) {
  .game-frame { width:calc(100vw - 24px); height:calc(100vh - 24px); margin:12px auto; }
  .play-area { grid-template-columns:220px minmax(500px,1fr) 282px; }
  .game-hud { grid-template-columns:minmax(235px,1.35fr) repeat(6,minmax(82px,.7fr)) 78px; }
  .hud-stat { padding-inline:9px; }
  .command-rail { padding-inline:10px; }
}
@media (max-width: 1080px) {
  .game-frame { width:1420px; height:880px; margin-top:12px; transform:scale(var(--frame-scale-x,1),var(--frame-scale-y,1)); transform-origin:top left; }
  body.is-touch .fs-gate { display:grid; }
}
@media (orientation:portrait) { body.is-touch .fs-gate-rotate { display:block; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* 維新の夜明け：和紙・朱印・藍の明るい政局画面 */
:root{--bg:#efe6d3;--panel:#fffaf0;--panel-2:#f3e8d0;--ink:#302e29;--muted:#686251;--gold:#94691e;--gold-light:#785217;--line:#d9c8a6;--line-strong:#b39762;--teal:#276b73;--red:#ad3f2d;--green:#417347;--blue:#366d8f}
body{background:radial-gradient(ellipse at top,#fffdf5,#eee2c9);}
body::before{opacity:.3;background:repeating-linear-gradient(8deg,transparent 0 6px,#b5a1780a 7px);mix-blend-mode:multiply}
.game-frame{background:#fff9ee;border-radius:8px;box-shadow:0 16px 60px #6e55332b;border-top:4px solid #ab402e}
.game-hud{background:linear-gradient(110deg,#fffdf5,#eee1c3);}
.clan-mark{background:#fffbef;box-shadow:inset 0 0 0 3px #e9dcc3}
.clan-mark svg{filter:none}
.command-rail,.side-panel{box-shadow:none;backdrop-filter:none}
.command-rail::before{content:'維新の夜明け / DAWN OF A NEW ERA';display:block;padding:70px 12px 12px;margin:-18px -14px 18px;color:white;font-size:10px;letter-spacing:.1em;text-shadow:0 1px 3px #000;background:linear-gradient(0deg,#253e40d9,transparent),url('assets/history/bakumatsu-hero.webp') center 40%/cover;border-bottom:3px solid #b89448}
.rail-heading small{color:#776f5e}
.mode-button{border-radius:4px;background:#f5eddb;border-color:#e1d1b2}
.mode-button.active{border-left:4px solid #af412c;background:#f9e6cc}
.mode-button:hover,.scenario:hover,.choice:hover{background:#f0dfbc}
.mode-button>i{background:#fffaf0;color:#985c20;font-size:15px}
.map-stage{background:#9cbdc4}
.strategic-map{background-color:#9cbdc4;background-image:linear-gradient(#ffeccc33,#ffeccc33),url('assets/maps/strategic-japan.png');background-blend-mode:screen,normal}
.strategic-map::before,.strategic-map[data-mode='military']::before,.strategic-map[data-mode='diplomacy']::before{background:linear-gradient(180deg,#fff6dd12,transparent)}
.strategic-map::after{box-shadow:none;border-color:#ead8a96b}
.map-toolbar{background:#fffaf1ed;box-shadow:0 4px 18px #25383b33}
.map-status,.game-footer{background:#f6eddb}
.node{color:#253b40;background:#fff9eeed;border-color:#b69d6c;text-shadow:none;box-shadow:0 2px 5px #20383c33;font-size:11px}
.node:hover,.node.active{background:#fff0c5;color:#392f1b}
.route{background:linear-gradient(90deg,#d4b65b,#fbe5a477)}
.side-image{filter:none;border-radius:4px}
.end-turn{background:linear-gradient(120deg,#a9422b,#843621);color:#fff7e7;border-color:#823322;box-shadow:0 4px 12px #9d482333}
.end-turn:hover{background:#b84f32}
.end-turn span small,.end-turn kbd{color:#ffe9c6}
.sub-button,.command-row button{background:#fffaf1}
.start-dialog,.command-dialog{background:#fffaf0;box-shadow:0 24px 80px #5a452d55;border-radius:8px}
.start-dialog{width:1000px;grid-template-columns:48% 52%}
.start-dialog::backdrop,.command-dialog::backdrop{background:#e8d9bcba;backdrop-filter:blur(5px)}
.title-art{position:relative;min-height:520px;background:url('assets/history/bakumatsu-hero.webp') 65% center/cover}
.title-art::after{content:'嘉永六年 ── 新しい時代へ';position:absolute;bottom:30px;left:24px;color:#fff9e6;letter-spacing:.14em;text-shadow:0 2px 8px #000;font-size:18px}
.start-dialog section{padding:36px}
.start-dialog h1{font-size:48px;letter-spacing:.12em;margin:14px 0 24px;color:#273e40}
.start-dialog h2{font-size:23px;line-height:1.5}
.start-dialog span{font-size:13px;line-height:1.9}
.start-dialog p{font-size:11px;color:#a04430}
#step-title{padding-top:72px}
#title-start{margin-top:30px;justify-content:center;font-size:18px;line-height:1.5}
.scenario,.choice{background:#f8efde;border-radius:4px;padding:12px}
.scenario small,.choice small{font-size:10px;line-height:1.6}
.step-back{font-size:11px}
.fs-toggle,.fs-gate-card{background:#fffaf0}
.fs-gate{background:#e8d9bcf0}
.action-result{background:#fffaf0}
.action-result::after{background:linear-gradient(180deg,transparent 30%,#fffaf0f0 83%,#fffaf0)}
.action-result figcaption{text-shadow:none}
.action-result figcaption span{color:#413a2c;font-size:12px}
.action-result-dialog>.dialog-close{background:#f5e8cd;color:#785217}