/* Chrono Vista — 画面（M1）。地球儀の外は星空（stars.js が canvas に描き、回転に追従）。 */
:root {
  --bg: #04070f;
  --fg: #cdd6e3;
  --dim: #6f7f95;
  --accent: #7fc4ff;
  --panel: rgba(8, 14, 26, 0.82);
  --tl-w: 190px;
}
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  overflow: hidden;
}
#stars { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg); }
#map { position: absolute; top: 0; bottom: 0; left: 0; right: var(--tl-w); background: transparent; }

/* 上部 */
:root { --top-h: 44px; }
#top {
  position: absolute; top: 0; left: 0; right: var(--tl-w);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 14px;
  background: linear-gradient(to bottom, rgba(4,7,15,.9), rgba(4,7,15,.4) 70%, rgba(4,7,15,0));
  pointer-events: none;
}
#top > * { pointer-events: auto; }
.brand { font-size: 1.05rem; letter-spacing: .25em; font-weight: 600; white-space: nowrap; }
.brand span { font-size: .7rem; letter-spacing: .05em; color: var(--dim); margin-left: .5em; }
.search { display: flex; gap: 4px; }
.search input {
  width: 260px; max-width: 26vw; padding: 5px 8px; border-radius: 6px; border: 1px solid #2c3a52;
  background: var(--panel); color: var(--fg); font: inherit; font-size: .85rem;
}
.search input.bad { border-color: #d06060; }
.search { position: relative; }
.results {
  position: absolute; top: 34px; left: 0; width: 360px; max-height: 60vh; overflow: auto; z-index: 7;
  background: var(--panel); border: 1px solid #2c3a52; border-radius: 8px; backdrop-filter: blur(6px); font-size: .82rem;
}
.results[hidden] { display: none; }
.results .r-head { padding: 4px 10px; color: var(--dim); font-size: .7rem; letter-spacing: .1em; border-bottom: 1px solid #2c3a52; }
.results .r-item { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #1c2638; display: flex; gap: 8px; align-items: baseline; }
.results .r-item:hover { background: rgba(127,196,255,.12); }
.results .r-item .r-name { font-weight: 600; color: #fff; }
.results .r-item .r-sub { color: var(--dim); font-size: .72rem; }
.results .r-item.out .r-name { color: #c9b27a; }
.results .r-empty { padding: 8px 10px; color: var(--dim); }
.dim { color: var(--dim); font-size: .75rem; }
.err { color: #e08080; }
.search button, .tbtn, .panel button {
  padding: 5px 10px; border-radius: 6px; border: 1px solid #2c3a52; background: var(--panel);
  color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer;
}
.search button:hover, .tbtn:hover, .panel button:hover { border-color: var(--accent); }
#status { font-size: .8rem; color: var(--dim); }
/* 年や場所を変えて読み込みが起きているときの表示（0.2 秒以上かかるときだけ出す）。loading.js */
#loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 40; display: none; align-items: center; gap: .6rem;
  padding: .55rem 1.1rem; border-radius: 999px; font-size: 1rem; background: rgba(10,16,28,.88); color: #e8eef8; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 2px 12px rgba(0,0,0,.45); pointer-events: none; }
#loading.on { display: flex; }
#loading i { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #e6c25c; border-radius: 50%; animation: cv-spin .8s linear infinite; }
@keyframes cv-spin { to { transform: rotate(360deg); } }
/* マウスを載せた場所の地域名（hover.js）。国名 ＋ 行政区画 */
#hover { position: fixed; z-index: 35; display: none; max-width: 320px; padding: .35rem .6rem; border-radius: 6px; pointer-events: none;
  background: rgba(10,16,28,.88); color: #f6efe0; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 2px 10px rgba(0,0,0,.4); font-size: .85rem; line-height: 1.35; }
#hover.on { display: block; }
#hover .hv-country { font-weight: 600; }
#hover .hv-region { color: #c9c2ad; font-size: .78rem; }

/* ジャンルチップ */
#genres {
  position: absolute; top: var(--top-h); left: 14px; right: var(--tl-w); display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none;
}
.chip {
  pointer-events: auto; font: inherit; font-size: .72rem; padding: 2px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--c, #888); background: rgba(8,14,26,.7); color: var(--dim);
}
.chip.on { background: var(--c, #888); color: #0b1220; font-weight: 600; }
.ping {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--accent);
  animation: ping 1.2s ease-out forwards; pointer-events: none;
}
@keyframes ping { from { transform: scale(1); opacity: 1; } to { transform: scale(5); opacity: 0; } }

/* カード（仕様書 §5） */
.card {
  position: absolute; top: calc(var(--top-h) + 34px); left: 14px; z-index: 6; width: 380px; max-width: calc(100vw - var(--tl-w) - 28px);
  max-height: calc(100vh - var(--top-h) - 70px); overflow: auto; background: var(--panel); border: 1px solid #2c3a52; border-radius: 10px;
  backdrop-filter: blur(8px); font-size: .86rem; box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.card[hidden] { display: none; }
.card .c-head { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 6px; }
.card .c-title { font-size: 1.05rem; font-weight: 600; color: #fff; line-height: 1.25; flex: 1; }
.card .c-sub { color: var(--dim); font-size: .75rem; margin-top: 2px; }
.card .c-close { background: none; border: none; color: var(--dim); font-size: 1.1rem; cursor: pointer; }
.card .c-photo { position: relative; background: #0a1020; min-height: 60px; }
.card .c-photo img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.card .c-photo .c-tag { position: absolute; right: 6px; top: 6px; font-size: .65rem; background: rgba(0,0,0,.65); padding: 1px 6px; border-radius: 3px; }
.card .c-photo .c-credit { font-size: .62rem; color: var(--dim); padding: 2px 8px; }
.card .c-body { padding: 8px 12px; line-height: 1.55; }
.card .c-body p { margin: .3em 0; }
.card .c-status { color: var(--accent); font-size: .78rem; padding: 0 12px 6px; }
.card .c-status.err { color: #e08080; }
.card .c-row { display: flex; gap: 6px; padding: 4px 12px; flex-wrap: wrap; }
.card .c-row button, .card .c-faq button { font: inherit; font-size: .75rem; padding: 3px 8px; border-radius: 6px; border: 1px solid #2c3a52; background: transparent; color: var(--fg); cursor: pointer; }
.card .c-row button:hover, .card .c-faq button:hover { border-color: var(--accent); }
.card .c-row button.primary { background: var(--accent); color: #0b1220; font-weight: 600; }
.card .c-links { padding: 4px 12px 8px; font-size: .72rem; color: var(--dim); }
.card .c-links a { color: var(--accent); text-decoration: none; margin-right: 8px; }
.card .c-faq { border-top: 1px solid #2c3a52; padding: 8px 12px; }
.card .c-faq h4 { margin: 0 0 6px; font-size: .8rem; color: var(--dim); letter-spacing: .05em; }
.card .faq-item { border-bottom: 1px dashed #24304a; padding: 4px 0; }
.card .faq-q { cursor: pointer; font-weight: 600; }
.card .faq-q::before { content: 'Q. '; color: var(--accent); }
.card .faq-a { display: none; padding: 4px 0 2px 1.2em; color: var(--fg); }
.card .faq-item.open .faq-a { display: block; }
.card .faq-meta { font-size: .65rem; color: var(--dim); padding-left: 1.2em; }
.card .faq-meta button { font-size: .65rem; padding: 0 5px; margin-left: 4px; }
.card .c-ask { display: flex; gap: 6px; padding: 8px 12px 10px; }
.card .c-ask input { flex: 1; font: inherit; font-size: .85rem; padding: 5px 8px; border-radius: 6px; border: 1px solid #2c3a52; background: rgba(0,0,0,.3); color: var(--fg); }
.card .c-ask button { font: inherit; padding: 5px 10px; border-radius: 6px; border: 1px solid #2c3a52; background: var(--accent); color: #0b1220; cursor: pointer; }
.card .c-answer { padding: 0 12px 8px; white-space: pre-wrap; }
.card .c-answer .who { color: var(--accent); font-size: .72rem; }

/* 書き込み・シンギュラリティ・クイズ（M4） */
.tbtn.on { background: var(--accent); color: #0b1220; border-color: var(--accent); font-weight: 600; }
.editor { top: calc(var(--top-h) + 34px); left: auto; right: calc(var(--tl-w) + 14px); width: 340px; }
.editor .e-head { display: flex; align-items: center; gap: 8px; }
.editor .e-head .dim { flex: 1; }
.editor .e-close, .quiz .q-close { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1rem; }
.editor input, .editor textarea, .editor select { font: inherit; font-size: .85rem; width: 100%; box-sizing: border-box; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid #2c3a52; border-radius: 4px; padding: 3px 6px; }
.editor label { display: block; }
.editor .e-row { display: flex; gap: 8px; align-items: center; }
.editor .e-row label { flex: 1; }
.editor .e-save { background: var(--accent); color: #0b1220; font-weight: 600; }
.sg-panel {
  position: absolute; right: calc(var(--tl-w) + 14px); bottom: 40px; z-index: 5; width: 260px;
  background: var(--panel); border: 1px solid #2c3a52; border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(6px); font-size: .8rem;
}
.sg-panel[hidden] { display: none; }
.sg-pct { font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; }
.sg-pct span { font-size: 1rem; margin-left: 2px; }
.sg-sub { color: var(--dim); font-size: .72rem; margin-bottom: 6px; }
.sg-row { margin: 2px 0; }
body.sg-mode #stars { background: radial-gradient(ellipse at 50% 60%, #0a1836 0%, var(--bg) 70%); }
.sg-flash { position: fixed; inset: 0; pointer-events: none; z-index: 20; background: radial-gradient(circle, rgba(127,196,255,.45), rgba(127,196,255,0) 70%); animation: sgflash .9s ease-out forwards; }
@keyframes sgflash { from { opacity: 1; } to { opacity: 0; } }
.quiz { top: calc(var(--top-h) + 34px); left: auto; right: calc(var(--tl-w) + 14px); width: 360px; }
.quiz .q-head { display: flex; align-items: center; gap: 10px; }
.quiz .q-head .dim { flex: 1; text-align: right; }
.quiz .q-q { font-size: .95rem; font-weight: 600; margin: 6px 0; }
.quiz .q-weak { font-size: .7rem; color: #e0a458; border: 1px solid #e0a458; border-radius: 3px; padding: 0 4px; }
.quiz .q-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.quiz .q-choice { display: block; width: 100%; text-align: left; margin: 3px 0; }
.quiz .q-choice:disabled { opacity: .6; }
.quiz input { font: inherit; font-size: .85rem; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid #2c3a52; border-radius: 4px; padding: 3px 6px; }
.quiz .q-ok-msg { color: #8fd48f; font-weight: 600; }
.quiz .q-ng-msg { color: #e08080; }
.quiz .q-final { font-size: 2rem; font-weight: 700; color: var(--accent); }
.quiz .q-final span { font-size: 1rem; color: var(--dim); }
.quiz .q-list { max-height: 40vh; overflow: auto; font-size: .78rem; margin: 6px 0; }
body.quiz-hide-year .tl-year, body.quiz-hide-year .tl-label, body.quiz-hide-year #snapshot { visibility: hidden; }   /* ぼかしでは桁数が読めるので消す */
/* 年当ての問題中はバー（カーソル線と時代帯）も隠す。バーの位置で年が分かってしまう（ユーザー指摘 2026-09-26） */
body.quiz-hide-year .tl-canvas { visibility: hidden; }
body.quiz-hide-year #timeline { pointer-events: none; }
body.quiz-hide-year #timeline::after { content: '?'; position: absolute; left: 0; right: 0; top: 45%; text-align: center; font-size: 3rem; color: var(--dim); }
body.future #map { box-shadow: inset 0 0 120px rgba(127,196,255,.15); }
body.future #stars { background: radial-gradient(ellipse at 50% 40%, #0c1b3d 0%, var(--bg) 70%); }
/* 演出: カードの開閉、時代の切替の光 */
.card.pop { animation: cardpop .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cardpop { from { transform: translateY(8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.tl-label.glow { animation: glow .8s ease-out; }
@keyframes glow { from { text-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent); } to { text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .card.pop, .tl-label.glow, .sg-flash, .ping { animation: none; } }
body.no-motion .card.pop, body.no-motion .tl-label.glow, body.no-motion .sg-flash, body.no-motion .ping { animation: none; }
.card .c-note { border-top: 1px solid #2c3a52; padding: 8px 12px; }
.card .c-note h4 { margin: 0 0 4px; font-size: .8rem; color: var(--dim); letter-spacing: .05em; }
.card .c-note textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .82rem; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid #2c3a52; border-radius: 4px; padding: 4px 6px; }
.card .c-note .n-text { white-space: pre-wrap; background: rgba(255,209,102,.08); border-left: 3px solid #ffd166; padding: 4px 8px; margin: 4px 0; }
.card .c-note img { max-width: 100%; border-radius: 4px; margin-top: 4px; }
.card .c-sg { border-top: 1px solid #2c3a52; padding: 8px 12px; font-size: .8rem; }
.card .c-sg b { color: var(--accent); }

/* 層・設定パネル */
.panel {
  position: absolute; top: calc(var(--top-h) + 4px); left: 14px; z-index: 5; width: 320px; max-height: calc(100vh - var(--top-h) - 40px); overflow: auto;
  background: var(--panel); border: 1px solid #2c3a52; border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: .85rem; backdrop-filter: blur(6px);
}
.panel[hidden] { display: none; }
.panel label { display: flex; align-items: center; gap: 6px; }
.panel .lp-head { margin-top: 6px; color: var(--dim); font-size: .75rem; letter-spacing: .1em; border-bottom: 1px solid #2c3a52; }
.panel select { font: inherit; background: var(--panel); color: var(--fg); border: 1px solid #2c3a52; border-radius: 4px; }
.panel .gen-settings { display: flex; flex-direction: column; gap: 4px; }
.panel .gen-settings input { font: inherit; font-size: .8rem; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid #2c3a52; border-radius: 4px; padding: 2px 6px; }
.panel .key-row input { flex: 1; min-width: 0; }
.panel .key-row button { padding: 2px 6px; font-size: .75rem; }

/* タイムライン（右サイド・縦） */
#timeline {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--tl-w);
  display: flex; flex-direction: column;
  background: linear-gradient(to left, rgba(6,10,20,.95), rgba(6,10,20,.75));
  border-left: 1px solid #1f2a3d; user-select: none;
}
.tl-top { padding: 10px 10px 4px; }
.tl-year { font-size: 1.7rem; font-weight: 600; letter-spacing: .05em; color: #fff; line-height: 1.1; }
.tl-label { font-size: .78rem; color: var(--accent); min-height: 2.4em; line-height: 1.2; margin-top: 2px; }
.tl-controls { display: flex; gap: 4px; margin-top: 6px; }
.tl-controls button {
  padding: 2px 8px; border-radius: 4px; border: 1px solid #2c3a52; background: transparent; color: var(--fg); cursor: pointer; font: inherit;
}
.tl-controls button:hover { border-color: var(--accent); }
.tl-canvas { flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; cursor: ns-resize; touch-action: none; }   /* min 0: canvas の属性の高さで伸び続けない */
.tl-help { font-size: .62rem; color: var(--dim); padding: 4px 8px 6px; line-height: 1.3; }

/* 凡例・出典 */
#legend {
  position: absolute; left: 8px; bottom: 26px; display: flex; gap: 12px; align-items: center;
  font-size: .7rem; color: var(--fg); background: var(--panel); padding: 3px 8px; border-radius: 4px;
}
#legend .lg { display: inline-block; width: 22px; height: 0; border-top: 2px solid #f2e8d2; margin-right: 4px; vertical-align: middle; }
#legend .lg-dash { border-top-style: dashed; }
#legend .lg-dot { border-top-style: dotted; }
#snapshot { color: var(--dim); }
#credits {
  position: absolute; left: 8px; bottom: 6px;
  font-size: .65rem; color: var(--dim); background: var(--panel); padding: 2px 8px; border-radius: 4px;
}
.maplibregl-ctrl-group { background: var(--panel); }
.maplibregl-ctrl-group button { filter: invert(.85); }
.maplibregl-ctrl-attrib { display: none; }
.maplibregl-ctrl-bottom-right { bottom: 30px; right: 8px; }

.brand-mark { height: 22px; width: 22px; border-radius: 6px; vertical-align: -5px; margin-right: 6px; }

/* 起動画面（Kataribe と同じ構成）。app.js が地図の準備後にフェードで消す */
#splash { position: fixed; inset: 0; z-index: 1000; background: #0a172b; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif; color: #8fa3bf; transition: opacity .6s ease; }
#splash img { width: 540px; max-width: 70vw; height: auto; border-radius: 12px; }
#splash .sp-line { margin-top: 1.2rem; font-size: 1.05rem; letter-spacing: .05em; }
#splash .sp-copy { margin-top: 1rem; font-size: 1rem; color: #5f7290; }
#splash.hide { opacity: 0; pointer-events: none; }
#splash.err { color: #e08a8a; }

.panel .lp-grip { font-size: .8rem; color: var(--dim); letter-spacing: .1em; padding-bottom: 4px; border-bottom: 1px solid #2c3a52; user-select: none; }
.card .c-head { user-select: none; }

/* ===== レスポンシブ（C2。仕様改定案 05 §3: スマホ 〜767 / タブレット 768〜1199 / PC 1200〜）。responsive.js が body[data-layout] を付ける ===== */
:root { --app-h: 100vh; --bnav-h: 56px; --tl-h: 96px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
/* ホーム画面から起動した iPhone は状態バーの下まで画面が伸びる（apple-mobile-web-app-status-bar-style）ので、上のバーに安全領域の余白を取る（2026-10-31 実機） */
#top { padding-top: calc(6px + var(--safe-t)); }
#splash { padding-top: var(--safe-t); }
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }
html, body { height: var(--app-h); }
#map, #timeline, #stars { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#bnav[hidden] { display: none; }
#bnav { display: none; }
#nowebgl { position: fixed; inset: 0; z-index: 1001; display: none; align-items: center; justify-content: center; text-align: center; padding: 24px; background: #0a172b; color: #cdd6e3; line-height: 1.7; }
#nowebgl.on { display: flex; }
.menu-top, .menu-tools, .menu-year { display: none; }
#update { position: fixed; left: 50%; bottom: calc(var(--bnav-h) + var(--safe-b) + 12px); transform: translateX(-50%); z-index: 45; display: none; gap: 10px; align-items: center;
  padding: 8px 14px; border-radius: 999px; background: rgba(10,16,28,.92); color: #e8eef8; border: 1px solid rgba(255,255,255,.18); font-size: .85rem; box-shadow: 0 2px 12px rgba(0,0,0,.45); }
#update.on { display: flex; }
#update button { font: inherit; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #0b1220; cursor: pointer; }
#update button.later { background: transparent; color: var(--dim); border-color: transparent; padding: 3px 4px; }
body[data-layout="pc"] #update, body[data-layout="tablet"] #update { bottom: 40px; }
/* スマホでは横タイムラインの上に出す（タイムラインを覆わない） */
body[data-layout="phone"] #update { bottom: calc(var(--tl-h) + var(--bnav-h) + var(--safe-b) + 10px); }
body[data-layout="phone"].tl-hidden #update { bottom: calc(var(--bnav-h) + var(--safe-b) + 10px); }

/* --- タブレット（768〜1199px、C2-2）: PC と同じ配置を狭く。右の縦タイムライン 150px、入力欄は短く、カード・パネルは 320px --- */
@media (max-width: 1199px) {
  :root { --tl-w: 150px; }
  .search input { width: 200px; max-width: 30vw; }
  .results { width: min(360px, 80vw); }
  .card { width: 340px; }
  .editor, .quiz { width: 320px; }
  .tl-help { display: none; }
  .tl-year { font-size: 1.4rem; }
  .chip { font-size: .7rem; }
}

/* --- スマホ（〜767px、C2-1）: 下に横タイムライン＋ナビ、カードはシート、道具とジャンルはメニューへ --- */
@media (max-width: 767px) {
  :root { --tl-w: 0px; --top-h: 44px; }
  body { -webkit-text-size-adjust: 100%; }
  #map { right: 0; bottom: calc(var(--tl-h) + var(--bnav-h) + var(--safe-b)); }
  body.tl-hidden #map { bottom: calc(var(--bnav-h) + var(--safe-b)); }
  #top { right: 0; flex-wrap: nowrap; gap: 6px; padding: calc(6px + var(--safe-t)) 8px 6px; }   /* 上は状態バーの安全領域の分（短縮形で上書きしない） */
  .brand { font-size: .9rem; letter-spacing: .1em; }
  .brand span { display: none; }
  #top .search:first-of-type { flex: 1; min-width: 0; }
  #top .search input { width: 100%; max-width: none; font-size: 16px; }   /* 16px 未満だと iOS が拡大する */
  .results { position: fixed; left: 8px; right: 8px; width: auto; top: calc(var(--top-h) + 2px); max-height: 50vh; }
  #status { display: none; }
  #layersBtn { position: relative; width: 40px; height: 34px; padding: 0; overflow: hidden; color: transparent; white-space: nowrap; flex: 0 0 auto; }
  #layersBtn::before { content: '☰'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fg); font-size: 1.15rem; }
  #genres { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 4px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #genres::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; font-size: .78rem; padding: 4px 10px; }
  /* タイムライン: 画面下の横バー（左が過去）。年と帯名は左、再生は右 */
  #timeline { top: auto; left: 0; right: 0; bottom: calc(var(--bnav-h) + var(--safe-b)); width: auto; height: var(--tl-h);
    border-left: 0; border-top: 1px solid #1f2a3d; background: linear-gradient(to top, rgba(6,10,20,.97), rgba(6,10,20,.85)); }
  body.tl-hidden #timeline { display: none; }
  .tl-top { display: flex; align-items: center; gap: 8px; padding: 3px 10px 0; }
  .tl-year { font-size: 1.15rem; line-height: 1.2; }
  .tl-label { flex: 1; min-height: 0; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  .tl-controls { margin: 0; }
  .tl-controls button { padding: 2px 8px; font-size: .8rem; }
  .tl-canvas { cursor: ew-resize; }
  .tl-help { display: none; }
  body.quiz-hide-year #timeline::after { top: 30%; font-size: 2rem; }
  /* 下のナビ */
  #bnav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bnav-h) + var(--safe-b)); padding-bottom: var(--safe-b); z-index: 30;
    display: flex; background: rgba(6,10,20,.97); border-top: 1px solid #1f2a3d; }
  #bnav[hidden] { display: none; }
  #bnav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: var(--dim); font: inherit; font-size: .62rem; padding: 4px 0; min-width: 0; }
  #bnav button.on { color: var(--accent); }
  #bnav .bn-icon { font-size: 1.25rem; line-height: 1; }
  #bnav .bn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* カード: 下から出るシート。半分（52%）⇔ 全画面（.full）。見出しのつまみ */
  .card { top: auto !important; left: 0 !important; right: 0 !important; bottom: calc(var(--bnav-h) + var(--safe-b)); width: auto; max-width: none; max-height: 52%;
    border-radius: 16px 16px 0 0; border-bottom: 0; z-index: 25; box-shadow: 0 -8px 30px rgba(0,0,0,.5); font-size: .92rem; }
  .card.full { max-height: calc(var(--app-h) - var(--top-h) - var(--bnav-h) - var(--safe-b)); }
  .card .c-head { padding-top: 16px; touch-action: none; cursor: grab; }
  .card .c-head::before { content: ''; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #3b4a63; }
  .card { position: absolute; }
  .card .c-photo img { max-height: 200px; }
  .card.pop { animation: sheetup .28s cubic-bezier(.2,.9,.3,1); }
  @keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
  /* パネル（メニュー・書き込み・クイズ・シンギュラリティ）もシート */
  .panel, .sg-panel { top: auto !important; left: 0 !important; right: 0 !important; bottom: calc(var(--bnav-h) + var(--safe-b)); width: auto; max-height: 70%;
    border-radius: 16px 16px 0 0; border-bottom: 0; z-index: 26; font-size: .95rem; }
  .panel label { padding: 3px 0; }
  .panel input[type=checkbox] { width: 18px; height: 18px; }
  .panel .lp-grip { cursor: default; }
  .sg-panel { max-height: 40%; }
  .menu-top { display: block; }
  .menu-tools { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
  .menu-tools .tbtn { font-size: .85rem; }
  .menu-year { display: block; }
  .menu-year .search { display: flex; gap: 4px; }
  .menu-year .search input { flex: 1; width: auto; max-width: none; font-size: 16px; }
  /* 凡例・出典・地図の操作ボタン */
  #legend { display: none; }
  #credits { bottom: calc(var(--tl-h) + var(--bnav-h) + var(--safe-b) + 4px); left: 4px; font-size: .55rem; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.tl-hidden #credits { bottom: calc(var(--bnav-h) + var(--safe-b) + 4px); }
  .maplibregl-ctrl-bottom-right { bottom: calc(var(--tl-h) + var(--bnav-h) + var(--safe-b) + 6px); right: 6px; }
  body.tl-hidden .maplibregl-ctrl-bottom-right { bottom: calc(var(--bnav-h) + var(--safe-b) + 6px); }
  #hover { display: none !important; }      /* 指の位置に浮き出しは出せない */
  #splash img { max-width: 80vw; }
  #loading { font-size: .9rem; }
}
/* 画面が低い横向きのスマホ: タイムラインを薄く */
@media (max-width: 767px) and (max-height: 420px) {
  :root { --tl-h: 64px; --bnav-h: 44px; }
  .tl-top { padding-top: 1px; }
  .tl-year { font-size: 1rem; }
  #bnav .bn-label { display: none; }
}