:root {
  --bg: #141a24;
  --panel: #1c2431;
  --panel2: #243040;
  --line: #33415a;
  --fg: #eef3fa;
  --mut: #9fb0c8;
  --acc: #ffd23f;
  --bad: #ff5470;
  --good: #35d07f;
  --blue: #4aa8ff;
  --r: 14px;
  --tap: 46px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
/* iOS のツールバーで高さが変わるのを避ける */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body {
  background: var(--bg); color: var(--fg);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
  font-size: 15px; line-height: 1.45;
  -webkit-user-select: none; user-select: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
ruby rt { font-size: .5em; color: var(--mut); }

#app {
  height: 100%; display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- ステージ ---------- */
#stage { position: relative; min-height: 0; min-width: 0; background: #6f8ba0; overflow: hidden; }
#cv { display: block; width: 100%; height: 100%; touch-action: none; }

#hud {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; gap: 6px; pointer-events: none;
}
#hud .stat {
  flex: 1 1 0; min-width: 0; text-align: center;
  background: rgba(16, 22, 32, .74); border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px; padding: 4px 2px 3px;
  backdrop-filter: blur(6px);
}
#hud .stat b { display: block; font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
#hud .stat small { display: block; font-size: 10px; color: var(--mut); }
#hud .bad b { color: var(--bad); }
#hud .hurt b { color: #ff9f43; }
#hud .sev b { color: #ff5470; font-size: 17px; }
#hud .sev { border-color: rgba(255,84,112,.45); }
#hud .lite b { color: #ffc93c; font-size: 17px; }
#hud .stat small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .key b { color: var(--acc); }
#hud .key { border-color: rgba(255,210,63,.45); }

#badge {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(16,22,32,.78); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 5px 12px 5px 8px;
  display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px;
  pointer-events: none; backdrop-filter: blur(6px);
}
#badgeFace { font-size: 20px; }

#viewctl { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
#viewctl button {
  width: 40px; height: 40px; border-radius: 12px; font-size: 18px;
  background: rgba(16,22,32,.8); color: var(--fg); border: 1px solid rgba(255,255,255,.13);
}

#mprog {
  position: absolute; left: 50%; transform: translateX(-50%); top: 54px;
  width: min(86%, 380px); height: 22px; border-radius: 999px;
  background: rgba(16,22,32,.8); border: 1px solid rgba(255,255,255,.14);
  overflow: hidden; display: flex; align-items: center;
}
#mprogBar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #4aa8ff, #35d07f); opacity: .55; }
#mprogText { position: relative; width: 100%; text-align: center; font-size: 12px; font-weight: 700; }

.modal {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 11, 16, .68); padding: 16px; z-index: 5;
}
.modal .card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px; width: min(94%, 360px); text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.modal h2 { margin: 0 0 6px; font-size: 17px; }
.modal p.left { text-align: left; line-height: 1.7; }
.modal p.left b { color: var(--acc); }
.modal .big { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.modal .big b { font-size: 44px; color: var(--acc); font-variant-numeric: tabular-nums; }
.modal .big span { font-size: 13px; color: var(--mut); }
.modal p { margin: 4px 0; font-size: 13px; }
.modal p.small { font-size: 11.5px; margin-top: 10px; }
.modal .row { display: flex; gap: 8px; margin-top: 14px; }
.modal .row button { flex: 1; }
.muted { color: var(--mut); }

#toast {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 62px;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92%;
}
#toast div {
  background: rgba(16,22,32,.9); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700;
  animation: pop .25s ease-out;
}
#toast div.bad { border-color: rgba(255,84,112,.7); color: #ffd9e0; }
@keyframes pop { from { transform: translateY(8px) scale(.9); opacity: 0 } }

/* ---------- コントロール ---------- */
#controls {
  background: var(--panel); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}

button {
  font: inherit; font-weight: 700; color: var(--fg);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 12px; min-height: var(--tap); cursor: pointer;
}
button:active { transform: scale(.97); }
button.primary { background: linear-gradient(180deg, #3f8ae0, #2f6fbd); border-color: #4c96ea; }
button.ghost { background: transparent; color: var(--mut); }
button.wide { width: 100%; }
button.icon { min-width: var(--tap); font-size: 18px; padding: 6px; }

#bar { display: flex; gap: 6px; padding: 8px; align-items: center; min-width: 0; flex-wrap: nowrap; }
#bar #btnReset { margin-left: auto; font-size: 13px; }
#speeds { display: flex; gap: 4px; }
#speeds button { min-width: 44px; padding: 8px 6px; font-size: 13px; }
#speeds button.on { background: var(--acc); color: #23180a; border-color: var(--acc); }

#tabs { display: flex; gap: 4px; padding: 0 8px 6px; min-width: 0; }
#tabs button { flex: 1 1 0; min-width: 0; font-size: 11.5px; padding: 8px 1px; min-height: 42px; white-space: nowrap; overflow: hidden; }
#tabs button.on { background: #34506f; border-color: #4c7aa8; }

#pages { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0 8px 12px; max-height: 38vh; min-width: 0; }
#pages section { display: flex; flex-direction: column; gap: 8px; }
.note { margin: 2px 0 4px; font-size: 12.5px; color: var(--mut); }
.note.center { text-align: center; padding: 12px 0; }
.presets { display: flex; gap: 8px; min-width: 0; }
.presets button { flex: 1 1 0; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presets button.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }

/* ルールのスイッチ */
.rule {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 10px; min-height: 54px;
}
.rule.on { border-color: #3f7a5a; background: linear-gradient(90deg, #22402f, #243040 60%); }
.rule.off { opacity: .95; }
.rule.disabled { opacity: .38; }
.rule .em { font-size: 22px; width: 26px; text-align: center; flex: none; }
.rule { width: 100%; text-align: left; }
.rule .txt { flex: 1 1 auto; min-width: 0; }
.rule .txt b { display: block; font-size: 14px; }
.rule .txt small { display: block; font-size: 11px; color: var(--mut); }
.rule .sw { flex: none; width: 50px; height: 30px; border-radius: 999px; background: #3a4658; position: relative; transition: background .15s; }
.rule.on .sw { background: var(--good); }
.rule .sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.rule.on .sw::after { transform: translateX(20px); }
/* レンタルモビリティは「安全のルール」でないので、ON を緑にしない */
.rule.rental.on { border-color: #8a6a2e; background: linear-gradient(90deg, #3d3016, #243040 60%); }
.rule.rental.on .sw { background: #f0a63c; }
#rentalNote b { color: #ffd23f; }
/* 歩道のひろさは「ON のほうが安全」なので緑のまま */
.rule.walkw { margin-bottom: 8px; }

/* まちのかたち(道路のパターン)のえらびボタン */
#townList { display: flex; flex-direction: column; gap: 6px; }
.town {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 10px; min-height: 52px;
}
.town.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset;
  background: linear-gradient(90deg, #233247, #243040 60%); }
.town .em { font-size: 22px; width: 26px; text-align: center; flex: none; }
.town .txt { flex: 1 1 auto; min-width: 0; }
.town .txt b { display: block; font-size: 14px; }
.town .txt small { display: block; font-size: 11px; color: var(--mut); line-height: 1.4; }
h3.sec { margin: 6px 0 0; font-size: 13px; color: var(--mut); font-weight: 700; }

/* 数のスライダー */
.cnt { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; }
.cnt .hd { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.cnt .hd b { margin-left: auto; color: var(--acc); font-variant-numeric: tabular-nums; }
.cnt input[type=range] { width: 100%; height: 34px; accent-color: var(--blue); }
/* 制限速度 */
#speedList { display: flex; flex-direction: column; gap: 6px; }
.cnt.spd input[type=range] { accent-color: #ffd23f; }
.cnt.spd .hd b i { font-style: normal; font-size: 10px; font-weight: 700; margin-left: 2px; opacity: .75; }
.cnt.spd .hd rt { font-size: 8px; }
#speedNote .req, #inattNote .req { color: var(--mut); }
#speedNote.warn .req, #inattNote.warn .req { color: #ffd23f; font-weight: 700; }

/* きろく */
.rec { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.rec .top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.rec .top .n { margin-left: auto; font-weight: 800; font-size: 15px; color: var(--acc); }
.rec .em { font-size: 13px; letter-spacing: 1px; }
.rec .barwrap { height: 12px; background: #16202c; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.rec .bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #35d07f, #ffd23f 55%, #ff5470); }
.rec .sub { font-size: 11px; color: var(--mut); margin-top: 3px; }
.rec .nrg { font-size: 11.5px; color: #ff8ea0; margin-top: 2px; font-weight: 700; }
.rec .nrg .lt { color: #ffc93c; }
#result .nrgline { margin: 4px 0 0; font-size: 13px; color: #ff8ea0; }
#result .nrgline b { font-size: 16px; }
#result .nrgline .lt { color: #ffc93c; }
#recMetric { display: flex; gap: 6px; margin-bottom: 6px; }
#recMetric button { flex: 1 1 0; font-size: 12px; }
#recMetric button.on { background: var(--acc); color: #10161f; border-color: var(--acc); }

/* まなぶ */
.lesson { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.lesson.on { border-color: var(--acc); }
.lesson .hd { display: flex; gap: 8px; align-items: center; }
.lesson .no { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #34506f; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.lesson .ti { font-size: 14px; font-weight: 800; }
.lesson p { margin: 6px 0 0; font-size: 12.5px; color: var(--mut); }
.lesson .exp { color: var(--acc); font-weight: 700; }
.lesson button { margin-top: 8px; width: 100%; font-size: 13px; }

/* ---------- 横長・タブレット ---------- */
@media (min-width: 780px) and (min-aspect-ratio: 1/1) {
  #app { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr) 360px; }
  #controls { border-top: none; border-left: 1px solid var(--line); }
  #pages { max-height: none; flex: 1; }
  #hud .stat b { font-size: 22px; }
  #tabs button { font-size: 13px; }
}
@media (min-width: 1200px) { #app { grid-template-columns: minmax(0, 1fr) 400px; } }

/* エラー表示(ふだんは出ない) */
#errbox {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
  background: rgba(120, 10, 24, .94); color: #ffe6ea;
  font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; padding: 6px 8px; max-height: 34vh; overflow: auto;
}