/* 全部の画面を青基調の昔っぽい見た目にそろえる（設計書 UI-34）: 薄い水色の地・紺の字・青の細い線の表・
   濃い青の見出しの帯。地図の絵の色は変えない */
:root {
  --bg: #e6f0ff;
  --fg: #102a6b;
  --accent: #1f4fa8;
  --navy: #102a6b;
  --panel: #fff;
  --pale: #f4f8ff;
  --border: #6f8fd0;
  --rule: #b7c9f0;  /* 表の行の区切り */
  --head: #c9d9ff;  /* 表の見出しの地 */
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; }
main { padding: 0 16px 24px; max-width: 1100px; margin: 0 auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 16px; background: linear-gradient(#ffffff, #dce8ff); border-bottom: 3px double var(--accent); flex-wrap: wrap; }
.site-header nav { display: flex; gap: 12px; align-items: center; }
.brand { font-weight: bold; color: var(--navy); text-decoration: none; letter-spacing: 0.1em;
  font-family: "MS PMincho", "ＭＳ Ｐ明朝", "Hiragino Mincho ProN", serif; }
a { color: #0000ee; }
a:visited { color: #551a8b; }
.site-header nav a, .site-header nav a:visited, .island-nav a:visited { color: #0000ee; }
form.inline { display: inline; }
.bug-report-open { font-size: 0.85em; }
dialog.bug-report { width: min(480px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid var(--border); background: var(--panel, #fff); color: var(--fg); }
dialog.bug-report::backdrop { background: rgba(0, 0, 0, 0.4); }
.bug-report-form h2 { margin: 0 0 6px; font-size: 1.1em; }
.bug-report-form label { display: block; margin: 8px 0; }
.bug-report-form textarea { display: block; width: 100%; }
.bug-report-status { min-height: 1.4em; margin: 6px 0; font-weight: bold; }
.bug-report-buttons { display: flex; gap: 8px; }
.island-list li { margin: 4px 0; }
.island-list small { margin-left: 8px; color: #6a7aa0; }
.map-wrap { position: relative; border: 1px solid var(--border); background: #1d3f66; }
#island-map { display: block; width: 100%; height: min(82vh, 900px); touch-action: none; cursor: grab; }
.map-buttons { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.map-buttons button { width: 40px; height: 40px; font-size: 20px; }
.muted { color: #6a7aa0; }
.error { color: #c62828; }
.warning { color: #b26a00; display: block; font-size: 0.9em; }
.alerts h2 { color: #b26a00; }
.alerts ul { margin: 0; padding-left: 1.2em; }
.lead { font-size: 1.1em; }
h1 { margin: 16px 0 8px; color: var(--navy); text-shadow: 2px 2px 0 #b7c9f0; }
h2 { font-size: 1.15em; margin: 0 0 8px; }
/* 本文の見出しは濃い青の帯（当時の個人サイトの見出し） */
main h2 { background: var(--accent); color: #fff; padding: 3px 8px; border-left: 8px solid var(--navy); font-size: 1.05em; }
main h2 a, main h2 a:visited { color: #fff; }
main h2 .muted, main h2 .heading-date, main h2 small { color: #dce8ff; }
main h3 { color: var(--navy); border-bottom: 1px dotted var(--border); }
h3 { font-size: 1.05em; margin: 8px 0 4px; }
h4 { font-size: 0.95em; margin: 8px 0 4px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 0; padding: 12px; margin: 12px 0;
  box-shadow: 2px 2px 0 var(--rule); }
button { font: inherit; padding: 4px 10px; min-height: 32px; cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 4px; padding: 8px 20px; }
input, select, textarea { font: inherit; max-width: 100%; }
table.info, table.goods, table.facilities { border-collapse: collapse; width: 100%; background: var(--panel); }
table.info th, table.info td, table.goods th, table.goods td, table.facilities th, table.facilities td {
  text-align: left; padding: 3px 6px; border: 1px solid var(--rule); vertical-align: top; }
table.info th { font-weight: normal; color: var(--navy); background: var(--pale); width: 45%; }
table.goods thead th, table.facilities thead th, table.letters thead th { background: var(--head); color: var(--navy); }
table.goods tbody tr:nth-child(even), table.facilities tbody tr:nth-child(even) { background: var(--pale); }
table.goods td:nth-child(n+2), table.goods th:nth-child(n+2) { text-align: right; }
.table-scroll { overflow-x: auto; }

/* 島の画面 */
.island-header h1 { margin-bottom: 0; }
.island-header p { margin-top: 4px; }
/* 地図も下の表や命令の欄と同じ本文の幅に収める */
.island-layout { margin-inline: 0; }
/* マスの情報の窓。位置は map/main.js が選んだマスのそばに決める */
.tile-popover { position: absolute; z-index: 3; width: min(360px, calc(100% - 16px)); max-height: calc(100% - 16px);
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
.tile-popover[hidden] { display: none; }
.tile-popover #tile-panel { overflow-y: auto; padding: 8px 12px 12px; min-height: 0; }
.tile-popover #tile-panel h3:first-child { margin-top: 0; padding-right: 32px; }
.popover-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; padding: 0; border: 0;
  background: none; font-size: 20px; line-height: 1; color: #4f62a0; border-radius: 4px; z-index: 1; }
.popover-close:hover, .popover-close:focus-visible { background: #eee; color: var(--fg); }
.mark-tools:empty { display: none; }
.mark-tools { margin: 4px 0 6px; }
.mark-buttons { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mark-buttons button { margin: 0; }
.island-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.island-stats .panel { margin: 0; }
.map-tools { margin: 4px 0; }
/* マスの欄から足した命令の結果。地図の左上に重ねて出し、下のマスはそのまま押せるようにする */
.map-notice { position: absolute; z-index: 4; left: 8px; right: 56px; top: 8px; margin: 0; padding: 4px 8px; font-size: 0.9em;
  background: rgba(255, 255, 255, 0.92); border-radius: 4px; pointer-events: none; }
.map-notice:empty { display: none; }
#minimap { position: absolute; left: 8px; bottom: 8px; width: 96px; height: 96px; border: 1px solid rgba(255,255,255,0.6);
  background: #1d3f66; image-rendering: pixelated; cursor: pointer; }
.guide { background: #fffbe6; border: 1px solid #e6d9a6; border-radius: 6px; padding: 8px 12px; margin: 12px 0; }
.guide summary { font-weight: bold; cursor: pointer; }
.actions { border-top: 1px solid var(--rule); padding-top: 6px; margin-top: 8px; }
.actions label { display: block; margin: 4px 0; }
.actions button { margin: 2px 4px 2px 0; }
.budget-hint { display: block; color: #6a7aa0; font-size: 0.8em; }
.budget-guide { margin: 6px 0 0; padding-left: 1.2em; font-size: 0.9em; }
.hint { font-size: 0.85em; color: #4f62a0; }
.marking { background: #fff3e0; border: 1px solid #ffb74d; border-radius: 4px; padding: 6px 8px; }
.order-list { padding-left: 0; list-style: none; }
.order-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.order-list li.late { color: #888; }
.order-list li.divider { color: #b26a00; font-size: 0.85em; border-bottom: 1px dashed #e0b060; }
.order-buttons button { min-width: 32px; padding: 2px 6px; }
.recent li.failed { color: #c62828; }
.log { padding-left: 1.2em; }
.log li { margin: 2px 0; }
.pager { display: flex; gap: 12px; align-items: center; margin: 12px 0; }

/* 世界マップと区画の選択 */
.world-grid { display: grid; grid-template-columns: repeat(var(--grid, 10), minmax(0, 1fr)); gap: 2px; max-width: 960px;
  background: #1d3f66; padding: 2px; border-radius: 4px; }
.world-grid .cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 11px;
  overflow: hidden; text-decoration: none; border: 0; padding: 0; min-height: 0; position: relative; }
.world-grid .sea { background: #2a5a8c; }
.world-grid .island { background: #2f6db5; color: #fff; }
.world-grid .island.mine { outline: 2px solid #ffca28; outline-offset: -2px; z-index: 1; }
/* 島の形は1マス1ピクセルの絵を、ぼかさずに区画いっぱいに広げる */
.world-grid .island-pixels { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.world-grid .cell-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 2px; font-size: 10px;
  line-height: 1.2; background: rgba(0, 0, 0, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.world-grid .free { background: #f0f4f8; cursor: pointer; }
.world-grid .free:hover, .world-grid .free.chosen { background: #ff7043; }
/* 気候帯（フェーズ3-2） */
.world-grid .free.zone-cold, .zone-swatch.zone-cold { background: #dfe9f5; }
.world-grid .free.zone-temperate, .zone-swatch.zone-temperate { background: #e6f2dc; }
.world-grid .free.zone-tropical, .zone-swatch.zone-tropical { background: #f8ecd2; }
.world-grid .free.zone-cold:hover, .world-grid .free.zone-temperate:hover, .world-grid .free.zone-tropical:hover,
.world-grid .free.chosen { background: #ff7043; }
.zone-legend { list-style: none; padding: 0; margin: 8px 0; font-size: 0.9em; }
.zone-legend li { margin: 2px 0; }
.zone-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--border); margin-right: 6px; vertical-align: middle; }

/* 建国 */
.founding-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.founding-map-wrap { max-width: 512px; }
#founding-map { width: 100%; height: auto; aspect-ratio: 1; touch-action: none; display: block; background: #1d3f66; cursor: crosshair; }
.problems { color: #c62828; }
.choices label { margin-right: 16px; display: inline-block; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 2px; }

/* 掲示板 */
.thread-list li { margin: 4px 0; }
.thread-list small { margin-left: 8px; color: #6a7aa0; }
.posts { list-style: none; padding: 0; }
.posts .panel p { margin: 0 0 4px; }
.post-body { overflow-wrap: anywhere; }
textarea { width: 100%; }

/* 手紙 */
table.letters { border-collapse: collapse; width: 100%; }
table.letters th, table.letters td { text-align: left; padding: 3px 6px; border: 1px solid var(--rule); vertical-align: top; }
table.letters tr.unread td { font-weight: bold; }
.badge { display: inline-block; padding: 0 6px; border-radius: 10px; background: #c62828; color: #fff; font-size: 0.8em; }
/* 公電の知らせ。スマホでは下の操作欄とキーボードを避け、上の隅に置く。 */
.letter-notice { position: fixed; z-index: 10; right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom)); width: min(360px, calc(100% - 32px)); }
.letter-notice-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px;
  max-height: 30vh; overflow-y: auto; background: var(--panel); color: var(--fg);
  border: 2px solid var(--accent); box-shadow: 2px 2px 0 var(--rule); }
.letter-notice-card[hidden] { display: none; }
.letter-notice-card a { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }
.letter-notice-card button { flex: 0 0 auto; min-height: 44px; }
.letter-notice-preference label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.letter-notice-preference small { display: block; }
@media (max-width: 760px) {
  .letter-notice { top: max(8px, env(safe-area-inset-top)); bottom: auto;
    right: max(8px, env(safe-area-inset-right)); width: min(360px, calc(100% - 16px)); }
}
/* AI が動かしている国の印（国の一覧と国の画面） */
.ai-mark { display: inline-block; padding: 0 6px; border-radius: 4px; border: 1px solid #1565c0; color: #1565c0; font-size: 0.7em; font-weight: bold; vertical-align: middle; cursor: help; }

/* 手引き */
.rules dt { font-weight: bold; margin-top: 8px; }
.rules dd { margin: 2px 0 0 1em; }

/* 見出しの下のリンクはつながった帯にし、入りきらないときは帯の中を横に送る */
.island-nav { display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; max-width: 100%; margin: 6px 0 4px; }
.island-nav a { flex: 0 0 auto; padding: 8px 12px; min-height: 40px; border: 1px solid var(--border);
  border-right: 0; border-radius: 0; background: var(--panel);
  text-decoration: none; white-space: nowrap; }
.island-nav a:last-child { border-right: 1px solid var(--border); }
.island-nav a:hover { background: var(--pale); }
.island-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.island-nav a[aria-current="page"] { background: var(--accent); color: #fff; }
.page-title { font-size: 0.7em; font-weight: normal; color: #4f62a0; margin-left: 4px; }
/* 見出しに添える日付（箱庭暦） */
.heading-date { font-size: 0.75em; font-weight: normal; color: #6a7aa0; margin-left: 4px; }
#overlay-legend { margin-left: 8px; }

/* 統計の画面 */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.stat-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 0; padding: 8px 10px; min-width: 0;
  box-shadow: 2px 2px 0 var(--rule); }
.stat-tile span { display: block; font-size: 0.8em; color: var(--accent); overflow-wrap: anywhere; }
.stat-tile strong { font-size: 1.25em; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin-bottom: 4px; }
.section-head h2, .section-head h3 { margin: 0; }
.section-head h2 { flex: 1; }  /* 見出しの帯を横いっぱいに（期間の切り替えは右に） */
.chart-range { display: flex; gap: 4px; align-items: center; }
.chart-range button { min-height: 28px; padding: 2px 10px; border: 1px solid var(--border); background: var(--panel); border-radius: 4px; }
.chart-range button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
figure.chart { margin: 0; min-width: 0; --chart-muted: #4f62a0; --chart-grid: #dde7fb; }
figure.chart figcaption { font-weight: bold; font-size: 0.95em; margin-bottom: 4px; }
figure.chart select { max-width: 100%; }
.chart-box { position: relative; }
.chart-box canvas { display: block; width: 100%; touch-action: pan-y; }
.chart-tip { position: absolute; top: 4px; z-index: 2; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; font-size: 0.8em; pointer-events: none; max-width: 75%; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.chart-tip ul, .chart-legend { list-style: none; margin: 0; padding: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.85em; margin-top: 2px; }
.chart-legend button { border: 0; background: none; padding: 2px 0; min-height: 24px; text-align: left; }
.chart-legend button[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
/* 円グラフ: ターンを選ぶつまみと、名前・値・割合の凡例 */
.pie-turn { display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #4f62a0; margin-bottom: 2px; }
.pie-turn span { white-space: nowrap; min-width: 6.5em; }
.pie-turn input { flex: 1; min-width: 0; }
.pie-legend { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.85em; }
.pie-legend li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; border-bottom: 1px solid #f0ede6; }
.pie-legend .pie-value { white-space: nowrap; text-align: right; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
td.num, th.num { text-align: right; white-space: nowrap; }
.loss { color: #c62828; }
.warning-cell { color: #b26a00; }
/* 産業の鎖（フェーズ3-2） */
.chain-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.chain-tier h3 { margin: 4px 0 8px; }
.chain-good { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel); }
.chain-good header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.chain-good dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 2px; }
.chain-good dt { color: #4f62a0; }
.chain-good dd { margin: 0; }
.chain-good.short { border-color: #c0392b; box-shadow: inset 4px 0 0 #c0392b; }
.chain-badge { background: #c0392b; color: #fff; border-radius: 10px; padding: 0 8px; font-size: 0.85em; }
.chain-alert { color: #c0392b; }
.chain-line { margin: 6px 0 0; font-size: 0.9em; }
table.goods tr.chosen td { background: #fff3e0; }
table.money-table td { text-align: right; }
table.money-table tr.group th { font-weight: bold; color: var(--fg); padding-top: 8px; }
table.money-table tr.total th, table.money-table tr.total td { font-weight: bold; border-top: 1px solid var(--border); }
tr.muted-row td { color: #6a7aa0; }
table.report-table { font-size: 0.9em; }
table.report-table td { white-space: nowrap; }
/* 約定の表の売り手、国債の持ち手、銀行の状態は文字なので左に寄せる。数の欄は折り返さない */
table.trades-table td:nth-child(2), table.trades-table th:nth-child(2) { text-align: left; }
table.bonds-table th, table.bonds-table td, table.banks-table th, table.banks-table td, table.budget-table td:nth-child(n+2) { white-space: nowrap; }
table.budget-table td:first-child { min-width: 7em; }
/* 貿易圏の値段と商社の表は列が多いので、字を縦に折り返さず横に送る（.table-scroll の中） */
table.bloc-table th, table.bloc-table td, table.traders-table th, table.traders-table td { white-space: nowrap; }
table.bonds-table td:nth-child(9), table.bonds-table th:nth-child(9) { text-align: left; }
table.banks-table td:nth-child(7), table.banks-table th:nth-child(7) { text-align: left; }
/* 順位・称号・外国の国債の表の、国や持ち手の名前の欄は左に寄せる（フェーズ3-3） */
table.ranking-table td:nth-child(2), table.ranking-table th:nth-child(2),
table.titles-table td:nth-child(-n+4), table.titles-table th:nth-child(-n+4),
table.foreign-bonds-table td:nth-child(2), table.foreign-bonds-table th:nth-child(2) { text-align: left; }
table.ranking-table td:nth-child(3), table.titles-table th, table.titles-table td { white-space: nowrap; }
.plain-list { padding-left: 1.2em; margin: 4px 0; }
.report-layout.with-orders { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.report-orders { margin-top: 12px; }
.bank-action { margin-top: 8px; }
.bank-action h3 { font-size: 1em; }

@media (max-width: 900px) {
  .report-layout.with-orders { display: block; }
}

@media (max-width: 760px) {
  /* マスの情報の窓は、画面の下から出す板にする（狭くて横に出せないため）。上半分で地図を押せる */
  .tile-popover { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 45vh;
    border-radius: 12px 12px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3); }
  #island-map { height: 60vh; }
  .site-header nav { gap: 8px; flex-wrap: wrap; }
  table.facilities { display: block; overflow-x: auto; }
}
/* 地名ラベルの下に隠れた島の形も見られるように、指を乗せたら消す */
.world-grid .cell:hover .cell-name, .world-grid .cell:focus .cell-name { opacity: 0; }

/* 国の公開ページ・賞・近況も、政治と貿易の青い見出しと罫線にそろえる。 */
.country-page, .news-page { overflow-wrap: anywhere; }
.country-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.country-head-body { flex: 1 1 280px; min-width: 0; }
.country-flag { width: 180px; max-width: 100%; height: 120px; object-fit: contain; border: 1px solid var(--border); background: var(--pale); padding: 6px; }
.country-head h2 { margin-top: 0; }
.country-head table.info th { width: 6em; white-space: nowrap; }
.country-honours { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.title-badge { display: inline-block; vertical-align: middle; padding: 2px 6px; border: 1px solid #9baed3;
  background: #edf2ff; color: #263f75; border-radius: 3px; font-size: 0.8rem; font-weight: normal; line-height: 1.4; white-space: nowrap; }
.award-badge { background: #fff5d6; color: #704900; border-color: #bb963d; }
.award-badge[data-award="超繁栄賞"] { background: #ffe9b5; border-color: #b67819; color: #754500; }
.award-badge[data-award="究極繁栄賞"] { background: #f5e4ff; border-color: #ad7bb9; color: #643278; }
.award-badge[data-award="平和賞"] { background: #fce8ed; border-color: #c68b9d; color: #85364f; }
.award-badge[data-award="平穏賞"] { background: #e7f4ed; border-color: #7fa98f; color: #28593c; }
.award-badge[data-award="災難賞"] { background: #fff0e3; border-color: #c89364; color: #7a4316; }
.award-badge[data-award="ターン杯"] { background: #e3f4fb; border-color: #79a5b8; color: #25546a; }
.table-flag { display: inline-block; flex: 0 0 24px; width: 24px; height: 16px; object-fit: contain; vertical-align: middle; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.country-link { display: inline-flex; gap: 7px; align-items: center; max-width: 100%; min-width: 0; }
.country-link > span { min-width: 0; overflow-wrap: anywhere; }
.country-timeline td { padding: 8px 10px; }
.country-timeline td:first-child { width: 13em; font-weight: bold; color: var(--navy); }
table.goods.country-timeline td:nth-child(n+2), table.goods.country-timeline th:nth-child(n+2) { text-align: left; }
.country-page details summary { cursor: pointer; padding: 8px 0; font-weight: bold; }
.country-editor > summary { color: var(--navy); }
.country-editor > summary small { display: block; margin: 4px 0 0 18px; font-weight: normal; color: #4f62a0; }
.country-editor h3 { margin-top: 20px; padding-bottom: 6px; }
.country-editor form, .country-field { display: block; margin-top: 10px; }
.country-editor input:not([type="hidden"]), .country-editor select, .country-page textarea { display: block; width: 100%; min-width: 0; margin-top: 4px; padding: 6px; }
.country-editor fieldset { min-width: 0; margin: 12px 0; border: 1px solid var(--rule); }
.visitor-notes { list-style: none; padding: 0; margin: 12px 0; }
.visitor-notes li { border-bottom: 1px solid var(--rule); padding: 12px 4px; }
.visitor-notes p { margin: 0 0 8px; line-height: 1.7; }
.visitor-notes footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.85em; }
.visitor-compose { padding: 12px; background: var(--pale); border: 1px solid var(--rule); }
.visitor-compose input { display: block; width: 100%; padding: 8px; margin-top: 4px; }
.inline-form { display: inline; }
.link-button { background: none; border: 0; padding: 0 4px; color: #4f62a0; text-decoration: underline; cursor: pointer; font-size: 0.85em; }
.news-feed { list-style: none; padding: 0; margin: 0; }
.news-entry { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--rule); }
.news-entry:last-child { border-bottom: 0; }
.news-mark { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; background: var(--pale); border: 1px solid var(--rule); border-radius: 50%; }
.news-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 0.85em; color: #4f62a0; }
.news-kind { font-weight: bold; color: var(--navy); }
.news-entry p { margin: 8px 0 0; line-height: 1.7; }
.news-entry .country-link { margin-top: 6px; font-size: 0.9em; }
.award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin: 12px 0; }
.award-card { min-width: 0; padding: 12px; border: 1px solid var(--border); border-top: 3px solid var(--accent); background: var(--panel); overflow-wrap: anywhere; }
.award-card h3 { margin: 0 0 10px; padding-bottom: 8px; }
.award-holders { list-style: none; padding: 0; margin: 0; }
.award-holders li { margin: 8px 0; }
.award-holders:has(li) + .award-no-holder { display: none; }
.award-no-holder { font-size: 0.85em; margin: 0; }

/* 記念碑（フェーズ4-1）: 碑文と自作の記念碑の絵 */
.monument-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.monument { min-width: 0; padding: 12px; border: 1px solid var(--rule); background: var(--panel); overflow-wrap: anywhere; }
.monument-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.monument-copy { flex: 1 1 180px; min-width: 0; }
.monument-copy h3 { margin-top: 0; padding-bottom: 6px; }
.monument-copy .hint { margin: 6px 0; }
.inscription {
  margin: 8px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--border);
  background: var(--pale);
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.monument-image {
  display: block;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border: 1px solid var(--border);
  background: #fff;
  object-fit: contain;
}
.monument-placeholder { display: grid; place-items: center; background: linear-gradient(var(--pale), var(--head)); color: #4f62a0; font-size: 48px; }
/* 表やパネルの表示方法にかかわらず、絞り込んだ行と未表示の欄を隠す。 */
[hidden] { display: none !important; }
#island-map:focus-visible { outline: 3px solid var(--fg); outline-offset: -3px; }
.chart-log-link { display: inline-block; margin-top: 0.5em; }
.monument-edit-link { display: block; margin-top: 10px; font-size: 0.85em; }
@media (max-width: 540px) {
  .country-head { gap: 12px; }
  .country-flag { width: 144px; height: 96px; }
  .country-head-body { flex-basis: 100%; }
  .country-timeline { min-width: 360px; }
  .news-entry { gap: 8px; }
}

/* 手引きの図（tools/help_diagrams/diagrams.py が作る SVG）。幅 480 の縦長で、狭い画面では縮む */
figure.diagram { margin: 12px auto; max-width: 480px; }
figure.diagram img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #fff; }
figure.diagram figcaption { font-size: 0.9em; margin-top: 4px; }
figure.diagram details { margin-top: 2px; }
figure.diagram summary { cursor: pointer; color: var(--accent); }