/*
  あれなんて車？
  ・ホーム／図鑑の手本は日本の道路標識
    案内標識（一般道は青地に白、高速は緑地に白、板の内側に白い縁取り）、難易度は県道の「ヘキサ」、
    順位は国道の「おにぎり」、補足は白い補助標識。書体は高速道路の標識と同じヒラギノ角ゴ
  ・クイズ画面の手本は運転免許の学科試験
    問題用紙（明朝体の設問）、マークシートの選択肢、赤ペンの丸とバツ
  ・影やグラデーションは使わず、平たい色面と線で作る
*/
:root {
  --bg: #e9eae6;          /* コンクリートの歩道 */
  --asphalt: #2a2c2f;
  --surface: #ffffff;
  --ink: #111214;
  --muted: #5d6066;
  --line: #c9cbc5;
  --sign-blue: #1b4e9b;   /* 一般道の案内標識 */
  --sign-green: #0f6a3f;  /* 高速道路の案内標識 */
  --sign-yellow: #f3c300; /* センターライン */
  --sign-red: #c9241d;
  --sign-white: #ffffff;
  --plate-green: #0d6b3d;
  --paper: #fbfaf4;       /* 問題用紙 */
  --paper-ink: #1f1d18;
  --paper-line: #c7c1ae;
  --redpen: #d22b1f;
  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif;
  --num: "Overpass", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1e20;        /* 夜のアスファルト */
    --asphalt: #0f1011;
    --surface: #26292c;
    --ink: #ecedea;
    --muted: #a3a6ab;
    --line: #3a3e43;
    --paper: #e9e6da;     /* 夜でも問題用紙は紙の色のまま（少し落とす） */
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--jp);
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--sign-yellow); outline-offset: 2px; }

/* ---------- 標識の共通パーツ ---------- */

/* 案内標識: 色面＋内側の白い縁取り。角はわずかに丸い */
.guide {
  color: var(--sign-white);
  border-radius: 10px;
  padding: 18px 22px 18px;
  outline: 2.5px solid var(--sign-white);
  outline-offset: -8px;
}
.guide.blue { background: var(--sign-blue); }
.guide.green { background: var(--sign-green); }
.guide h1 { font-weight: 800; font-size: clamp(32px, 9.5vw, 48px); line-height: 1.2; letter-spacing: 0.02em; }
.guide-kicker { font-weight: 700; font-size: 15px; }
.guide-sub { font-weight: 700; font-size: 15px; margin-top: 2px; }

/* 補助標識: 白地に黒文字、黒い細枠 */
.aux-plate {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: -2px auto 0;
  padding: 4px 14px;
  background: var(--sign-white);
  color: #111214;
  border: 2px solid #111214;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* 見出し: 小さな青看 */
.sign-label {
  display: inline-block;
  margin: 28px 0 12px;
  padding: 4px 16px 3px;
  color: var(--sign-white);
  background: var(--sign-blue);
  border-radius: 6px;
  outline: 1.5px solid var(--sign-white);
  outline-offset: -4px;
  font-size: 16px;
  font-weight: 800;
}
.sign-label.green { background: var(--sign-green); }


/* ヘキサ（都道府県道）とおにぎり（国道） */
.hexa { width: 52px; height: 46px; display: block; }
.hexa-plate { fill: var(--sign-blue); }
.hexa-line { fill: none; stroke: var(--sign-white); stroke-width: 2.4; }
.hexa text { fill: var(--sign-white); font-family: var(--num); font-weight: 800; font-size: 26px; }

.onigiri { width: 40px; height: 40px; display: block; }
.onigiri-plate { fill: var(--sign-blue); stroke: var(--sign-white); stroke-width: 2; }
.onigiri-line { fill: none; stroke: var(--sign-white); stroke-width: 1.6; }
.onigiri text { fill: var(--sign-white); font-family: var(--num); font-weight: 800; }

/* ---------- 走る車の区切り線 ---------- */

.road-divider { margin: 22px -16px 4px; overflow: hidden; }
.lane {
  position: relative;
  height: 46px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 26px, transparent 26px 44px) 0 40px / 100% 3px no-repeat;
}
.runner {
  position: absolute;
  left: 0;
  bottom: 7px;
  width: 64px;
  color: var(--ink);
  animation: drive var(--t) linear var(--d) infinite;
}
.runner .car { width: 100%; height: auto; }
@keyframes drive {
  from { transform: translateX(-80px); }
  to { transform: translateX(min(100vw, 1100px)); }
}
@media (prefers-reduced-motion: reduce) {
  .runner { animation: none; }
  .runner:nth-child(1) { transform: translateX(8vw); }
  .runner:nth-child(2) { transform: translateX(32vw); }
  .runner:nth-child(3) { transform: translateX(56vw); }
  .runner:nth-child(4) { transform: translateX(78vw); }
}
.car { display: block; fill: currentColor; }
.car .car-gap { fill: var(--bg); }

/* ---------- header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--asphalt);
  border-bottom: 3px solid var(--sign-yellow);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  padding: 5px 12px 5px;
  background: var(--sign-green);
  color: var(--sign-white);
  border-radius: 6px;
  outline: 1.5px solid var(--sign-white);
  outline-offset: -4px;
  line-height: 1.15;
}
.brand-kicker { font-weight: 700; font-size: 10px; }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: 0.02em; }

.tabs { display: flex; gap: 6px; }
.tab {
  border: 2px solid #8a8d92;
  background: transparent;
  color: #d6d8d4;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
}
.tab[aria-current="page"] { background: var(--sign-white); color: #111214; border-color: var(--sign-white); }

main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 8px;
  flex: 1;
}
/* クイズ中は PC で左右2段組にするので広げる */
main:has(.quiz) { max-width: 1120px; padding-top: 14px; }

.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* ---------- home ---------- */

.hero-text { font-size: 14px; color: var(--muted); margin: 14px 2px 0; }

.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 7px;
  border: 0;
  background: transparent;
  border-radius: 6px;
}
.level .hexa { width: 48px; height: 42px; transition: transform 0.15s ease; }
.level:not([aria-checked="true"]) .hexa-plate { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.level:not([aria-checked="true"]) .hexa-line { stroke: var(--line); }
.level:not([aria-checked="true"]) .hexa text { fill: var(--muted); }
.level[aria-checked="true"] .hexa { transform: scale(1.12); }
.level-name { font-size: 12px; font-weight: 800; }
.level-top { font-family: var(--num); font-size: 11px; font-weight: 700; color: var(--muted); }
.level[aria-checked="true"] { background: var(--surface); box-shadow: inset 0 -3px 0 var(--sign-yellow); }
.level-note { font-size: 13px; color: var(--muted); margin: 10px 2px 0; }
.level-note b { color: var(--ink); }

/* モード: 架空の標識＋モード名。難易度と同じく選択式で、選ばれていないものは白抜き */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mode {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  text-align: left;
}
.mode[aria-checked="true"] { background: var(--surface); box-shadow: inset 0 -3px 0 var(--sign-yellow); }
.mode:disabled { opacity: 0.4; }
.mode-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mode-text b { font-size: 15px; font-weight: 800; }
.mode-text small { font-size: 11.5px; color: var(--muted); }
.mode-text .best em { font-style: normal; font-family: var(--num); font-weight: 800; color: var(--ink); }

.msign { flex: none; width: 48px; height: 48px; transition: transform 0.15s ease; }
.mode[aria-checked="true"] .msign { transform: scale(1.1); }
.msign text { font-family: var(--jp); }
/* 選ばれていない標識は白抜き */
.ms-plate { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.ms-ring { fill: none; stroke: var(--line); stroke-width: 2.2; }
.ms-icon { fill: var(--muted); }
.ms-cut { fill: var(--surface); }
/* 選ばれた標識は本来の色 */
.mode[aria-checked="true"] .ms-plate { stroke: none; }
.mode[aria-checked="true"] .msign-name .ms-plate,
.mode[aria-checked="true"] .msign-rear .ms-plate { fill: var(--sign-yellow); }
.mode[aria-checked="true"] .msign-name .ms-ring,
.mode[aria-checked="true"] .msign-rear .ms-ring { stroke: #111214; }
.mode[aria-checked="true"] .msign-name .ms-icon,
.mode[aria-checked="true"] .msign-rear .ms-icon { fill: #111214; }
.mode[aria-checked="true"] .msign-name .ms-cut,
.mode[aria-checked="true"] .msign-rear .ms-cut { fill: var(--sign-yellow); }
.mode[aria-checked="true"] .msign-rear .ms-tail { fill: var(--sign-red); }
.mode[aria-checked="true"] .msign-maker .ms-plate,
.mode[aria-checked="true"] .msign-newer .ms-plate { fill: var(--sign-blue); }
.mode[aria-checked="true"] .msign-maker .ms-ring,
.mode[aria-checked="true"] .msign-newer .ms-ring { stroke: #fff; }
.mode[aria-checked="true"] .msign-maker .ms-icon,
.mode[aria-checked="true"] .msign-newer .ms-icon { fill: #fff; }
.mode[aria-checked="true"] .msign-maker .ms-cut,
.mode[aria-checked="true"] .msign-newer .ms-cut { fill: var(--sign-blue); }
.msign-emblem .ms-ring { stroke-width: 6; }
.mode[aria-checked="true"] .msign-emblem .ms-plate { fill: #fff; }
.mode[aria-checked="true"] .msign-emblem .ms-ring { stroke: var(--sign-red); }
.mode[aria-checked="true"] .msign-emblem .ms-icon { fill: #111214; }
.mode[aria-checked="true"] .msign-emblem .ms-cut { fill: #fff; }

/* スタート */
.start { margin-top: 26px; }
.start-summary { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 8px; }
.start-summary b { color: var(--ink); }
.start-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.3em;
  overflow: hidden;
  transition: transform 0.1s ease;
}
/* 両端にチェッカーフラッグ */
.start-btn::before,
.start-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  background: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 9px 9px;
}
.start-btn::before { left: 0; }
.start-btn::after { right: 0; }
.start-btn:not(:disabled):active { transform: translateY(2px); }
.start-btn:disabled { opacity: 0.4; }

/* ---------- quiz（学科試験） ---------- */

.quiz-head { display: flex; align-items: center; gap: 10px; }
.quit {
  border: 2px solid var(--ink);
  background: var(--surface);
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
}
.quiz-meta { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.mini-hexa .hexa { width: 28px; height: 24px; }
.counter { font-family: var(--num); font-weight: 700; color: var(--muted); }
.counter b { font-size: 22px; color: var(--ink); }

/* 進み具合: 道路の上を車がゴールに向かって進む */
.progress-road { position: relative; height: 40px; margin: 6px 0 12px; }
.progress-road::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 14px;
  background: var(--asphalt);
  border-radius: 2px;
}
.progress-marks { position: absolute; left: 0; right: 34px; bottom: 10px; display: flex; gap: 6px; padding: 0 4px; }
.progress-marks i { flex: 1; height: 2px; background: #6c6f74; }
.progress-marks i.ok { background: var(--sign-yellow); }
.progress-marks i.ng { background: var(--sign-red); }
.progress-car { position: absolute; bottom: 12px; width: 44px; color: var(--ink); transition: left 0.5s cubic-bezier(.3,.7,.3,1); }
.goal {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 30px;
  height: 14px;
  background: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 7px 7px;
  border-radius: 2px;
}
.goal::after { content: ""; position: absolute; right: 3px; bottom: 14px; width: 2px; height: 20px; background: var(--ink); }

.quiz-body { display: grid; gap: 12px; }
/* 写真は画面の高さに合わせて縮め、選択肢までスクロールせずに見えるようにする */
.quiz-visual .photo,
.quiz-visual .emblem-stage {
  width: min(100%, calc((100dvh - 440px) * 4 / 3));
  min-width: min(100%, 280px);
  margin: 0 auto;
}
.quiz-visual .pair .photo { width: 100%; min-width: 0; aspect-ratio: 1; }

@media (min-width: 860px) {
  .quiz-body { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
  .quiz-visual { position: sticky; top: 76px; }
  .quiz-visual .photo,
  .quiz-visual .emblem-stage { width: min(100%, calc((100dvh - 190px) * 4 / 3)); }
  .quiz-visual .pair { max-width: calc((100dvh - 220px) * 2); margin: 0 auto; }
}

/* 問題用紙 */
.sheet {
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  padding: 14px 16px 14px;
}
.sheet-no {
  font-family: var(--mincho);
  font-weight: 900;
  font-size: 15px;
  padding-bottom: 6px;
  border-bottom: 3px double var(--paper-ink);
}
.sheet-q { font-family: var(--mincho); font-weight: 700; font-size: 17px; line-height: 1.6; margin: 10px 0 12px; }

/* マークシートの選択肢 */
.sheet-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 860px) { .sheet-choices:not(.two) { grid-template-columns: 1fr; } }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 10px;
  border: 1px solid var(--paper-line);
  background: #fff;
  color: var(--paper-ink);
  border-radius: 3px;
  text-align: left;
  transition: background 0.1s ease;
}
.choice:not(:disabled):hover { background: #f3f0e4; }
.choice .mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  border: 1.5px solid #8f8a78;
  border-radius: 50%;
  font-size: 15px;
  color: #8f8a78;
  line-height: 1;
}
.choice .label { font-weight: 800; font-size: 15px; line-height: 1.3; }
.choice .label small { display: block; font-weight: 500; font-size: 11px; color: #6d6858; }
/* 選んだマークは鉛筆で塗りつぶす */
.choice.is-picked .mark { background: #2b2a26; border-color: #2b2a26; color: #fff; }
.choice:disabled:not(.is-correct):not(.is-picked) { opacity: 0.55; }
.redpen {
  position: absolute;
  left: -4px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%) rotate(-8deg);
  fill: none;
  stroke: var(--redpen);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw 0.35s ease-out forwards;
  pointer-events: none;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .redpen { animation: none; stroke-dashoffset: 0; } }

.sheet-after:empty { display: none; }
.sheet-after { margin-top: 12px; }
.result-line { display: flex; align-items: center; gap: 12px; }
/* 判子のような判定 */
.stamp {
  flex: none;
  font-family: var(--mincho);
  font-weight: 900;
  font-size: 17px;
  color: var(--redpen);
  border: 2.5px solid var(--redpen);
  border-radius: 4px;
  padding: 2px 8px;
  transform: rotate(-6deg);
}
.result-line.ng .stamp { color: #3a3833; border-color: #3a3833; }
.answer-info { font-size: 13.5px; line-height: 1.5; min-width: 0; }
.answer-info b { font-size: 15px; }
.answer-info .fine { display: block; }
.fine { font-size: 12.5px; color: var(--muted); }
.sheet .fine { color: #6d6858; }
.link-btn { border: 0; background: none; padding: 0; color: var(--sign-blue); font-weight: 800; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

.next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 13px 18px;
  border: 0;
  background: var(--paper-ink);
  color: #fff;
  border-radius: 3px;
  font-weight: 800;
  font-size: 16px;
}
.next-btn span { font-family: var(--num); font-size: 18px; }
.next-btn:active { transform: translateY(1px); }

.keys { display: none; margin-top: 10px; font-size: 11.5px; color: #6d6858; }
kbd { font-family: var(--num); font-size: 11px; padding: 0 5px; border: 1px solid var(--paper-line); border-bottom-width: 2px; border-radius: 3px; background: #fff; }
@media (hover: hover) and (pointer: fine) { .keys { display: block; } }

/* スマホでは判定と「次へ」を画面下に固定して、スクロールせずに押せるようにする */
@media (max-width: 859px) {
  main:has(.sheet-after:not(:empty)) { padding-bottom: 150px; }
  .sheet-after:not(:empty) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--paper);
    color: var(--paper-ink);
    border-top: 3px double var(--paper-ink);
    animation: rise 0.2s ease-out;
  }
}
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }

/* 写真 */
.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .credit {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.3;
  padding: 3px 8px;
  background: rgb(17 18 20 / 72%);
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top-left-radius: 4px;
}
.photo .credit a { color: #fff; }
.photo .tag {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 12px;
  font-weight: 800;
  padding: 1px 10px;
  border-radius: 3px;
  background: var(--sign-yellow);
  color: #111214;
  border: 2px solid #111214;
}
.zoom {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: rgb(17 18 20 / 62%);
}
.zoom svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

.emblem-stage {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #f6f6f3;
  border: 1px solid var(--paper-line);
}
.emblem { background-repeat: no-repeat; max-height: 66%; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick-label { display: block; font-size: 12px; color: var(--muted); padding: 4px 2px 0; min-height: 1.6em; line-height: 1.4; }

.board-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid #111214;
  background: var(--sign-white);
  color: #111214;
  border-radius: 4px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}
.board-btn.block { display: flex; width: 100%; margin-top: 16px; }

.kind {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 0 6px;
  border-radius: 3px;
  line-height: 1.7;
}
/* ナンバープレートの色: 登録車は白地に緑、軽は黄色地に黒 */
.kind-reg { background: #fff; color: var(--plate-green); box-shadow: inset 0 0 0 1.5px var(--plate-green); }
.kind-kei { background: var(--sign-yellow); color: #111214; box-shadow: inset 0 0 0 1.5px #111214; }

/* ---------- 採点結果 ---------- */

.score-sheet {
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  padding: 16px 18px 18px;
}
.score-sheet .score { position: relative; width: fit-content; margin: 18px auto 10px; font-family: var(--mincho); line-height: 1; }
.score-sheet .score b { font-family: var(--num); font-size: 88px; font-weight: 800; }
.score-sheet .score small { font-size: 20px; font-weight: 700; margin-left: 4px; }
.score-sheet .score .redpen { left: -26px; width: 150px; height: 150px; stroke-width: 4; }
.tally { display: grid; grid-template-columns: repeat(10, 1fr); border: 1px solid var(--paper-line); margin-top: 8px; }
.tally li { text-align: center; font-family: var(--mincho); font-weight: 900; font-size: 18px; padding: 2px 0 4px; border-left: 1px solid var(--paper-line); color: var(--redpen); }
.tally li:first-child { border-left: 0; }
.tally li.ng { color: #3a3833; }
.tally li span { display: block; font-family: var(--num); font-size: 10px; font-weight: 700; color: #8f8a78; border-bottom: 1px solid var(--paper-line); }
.score-sheet .msg { text-align: center; font-family: var(--mincho); font-weight: 700; margin: 14px 0 4px; }
.best-stamp { display: inline-block; margin-right: 10px; font-size: 13px; color: var(--redpen); border: 2px solid var(--redpen); border-radius: 3px; padding: 0 6px; transform: rotate(-5deg); }
.score-sheet .actions { display: grid; gap: 8px; margin-top: 12px; }
.score-sheet .board-btn { width: 100%; border-width: 1px; border-color: var(--paper-line); }

/* ---------- zukan ---------- */

.zukan-sign h1 { font-weight: 800; font-size: 32px; }
.search {
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border: 2px solid #111214;
  border-radius: 4px;
  background: var(--sign-white);
  color: #111214;
  font: inherit;
  font-size: 16px;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.chip {
  border: 2px solid var(--ink);
  background: transparent;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; text-align: left; border: 0; background: none; padding: 0; }
.card .thumb { display: block; aspect-ratio: 4 / 3; background: var(--surface); position: relative; border-radius: 6px; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .rank { position: absolute; left: 4px; top: 4px; }
.card .meta { display: block; padding: 6px 2px 0; }
.card b { display: block; font-size: 14px; font-weight: 800; line-height: 1.35; }
.card small { color: var(--muted); font-size: 12px; }
.noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 12px; }

.emblem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.emblem-card { text-align: center; font-size: 13px; }
.emblem-card b { display: block; margin-top: 4px; }

/* ---------- detail dialog ---------- */

.detail {
  width: min(640px, calc(100% - 20px));
  max-height: calc(100dvh - 20px);
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}
.detail::backdrop { background: rgb(10 11 12 / 70%); }
.detail-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sign-blue);
  color: #fff;
}
.detail-head .onigiri { width: 46px; height: 46px; }
.detail-title { flex: 1; min-width: 0; }
.detail h2 { font-weight: 800; font-size: 24px; line-height: 1.25; }
.detail-title p { font-size: 13px; opacity: 0.9; }
.detail-body { padding: 14px 16px 18px; }
.detail .gen { margin-top: 18px; }
.detail .gen h3 { font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 500; }
.detail .gen h3 span { display: inline-block; font-weight: 800; color: var(--ink); margin-right: 8px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 3px; }
.close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 2px solid #fff;
  background: transparent;
  display: grid;
  place-items: center;
}
.close svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 0; }
.stats div { background: var(--surface); border-radius: 6px; padding: 8px 6px; text-align: center; border: 2px solid var(--line); }
.stats dt { color: var(--muted); font-size: 11px; }
.stats dd { margin: 0; font-family: var(--num); font-weight: 800; font-size: 19px; line-height: 1.3; }
.stats dd small { font-family: var(--jp); font-size: 12px; }

/* ---------- 写真の拡大 ---------- */

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  display: none;
  place-items: center;
  cursor: zoom-out;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgb(8 9 10 / 88%); }
.lightbox figure { margin: 0; max-width: min(1400px, 100%); }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 90px); object-fit: contain; margin: 0 auto; border-radius: 3px; }
.lightbox figcaption { margin-top: 8px; text-align: center; color: #d6d8d4; font-size: 12px; cursor: auto; }
.lightbox figcaption b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.lightbox figcaption a { color: #d6d8d4; }
.lightbox .close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; background: rgb(0 0 0 / 40%); }

/* ---------- footer ---------- */

.footer {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom));
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.7;
}
.footer .road-divider { margin-bottom: 14px; }
.footer p { margin: 0 0 6px; }
.footer a { color: var(--muted); }

@media (max-width: 360px) {
  .brand-name { font-size: 15px; }
  .tab { padding: 3px 9px; }
  .level .hexa { width: 42px; height: 37px; }
}
@media (max-width: 480px) {
  .mode { gap: 8px; padding: 10px 6px; }
  .mode-text b { font-size: 14px; white-space: nowrap; }
  .mode-text small:not(.best) { display: none; }
  .msign { width: 42px; height: 42px; }
}

/* 「新型」枠: 販売台数の難易度とは別物なので、点線で区切って高速道路の緑にする */
.levels { grid-template-columns: repeat(5, 1fr) 1.1fr; }
.level-new { position: relative; margin-left: 4px; }
.level-new::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; border-left: 2px dashed var(--line); }
.level-new .hexa text, .mini-hexa.is-new .hexa text { font-family: var(--jp); font-size: 22px; font-weight: 900; }
.level-new[aria-checked="true"] .hexa-plate, .mini-hexa.is-new .hexa-plate { fill: var(--sign-green); }

.new-badge {
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.8;
  color: #fff;
  background: var(--sign-green);
  border-radius: 3px;
  outline: 1px solid #fff;
  outline-offset: -3px;
}
@media (max-width: 400px) {
  .levels { gap: 2px; }
  .level .hexa { width: 40px; height: 35px; }
  .level-name { font-size: 11px; }
  .level-top { font-size: 9.5px; }
}

.hero-copy { margin: 18px 2px 0; font-size: clamp(17px, 4.6vw, 21px); font-weight: 800; line-height: 1.55; }
.hero-copy + .hero-text { margin-top: 6px; }

/* 最新データのお知らせ: 道路情報板（黒地にオレンジの電光文字）を小さく控えめに */
.info-board {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 10px auto 0;
  padding: 3px 10px;
  background: #1a1b1d;
  border-radius: 3px;
  font-family: "DotGothic16", var(--jp);
  font-size: 12.5px;
  line-height: 1.5;
  color: #f5a142;
  letter-spacing: 0.05em;
}
.info-new { padding-right: 8px; border-right: 1px solid #4a4d52; }