:root {
  --bg: #0b0f16;
  --panel: rgba(16, 22, 32, 0.86);
  --line: rgba(150, 180, 210, 0.28);
  --text: #e8eef6;
  --muted: #9fb0c4;
  --accent: #5fb2ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif; }
.hidden { display: none !important; }

#garage {
  max-width: 720px; margin: 0 auto; padding: 24px 18px 60px;
}
#home-link { color: var(--muted); text-decoration: none; font-size: 14px; }
#home-link:hover { color: var(--accent); }
#garage h1 { font-size: 30px; letter-spacing: 0.06em; margin: 18px 0 6px; }
.lead { color: var(--muted); line-height: 1.7; font-size: 14px; margin: 0 0 22px; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; display: grid; gap: 12px;
}
.panel label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.panel select {
  background: #0f1622; color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font-size: 16px;
}
#go {
  margin-top: 4px; padding: 12px; font-size: 15px; font-weight: 600;
  background: var(--accent); color: #04121f; border: 0; border-radius: 8px; cursor: pointer;
}
#go:hover { filter: brightness(1.08); }
.keys { margin-top: 18px; color: var(--muted); font-size: 13px; }
.keys ul { line-height: 1.9; padding-left: 18px; }
.keys b { color: var(--text); }

#fullscreen-btn {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  z-index: 6; width: 32px; height: 32px; padding: 0; border-radius: 6px;
  background: rgba(10,14,20,0.6); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; line-height: 30px; text-align: center;
  cursor: pointer; touch-action: manipulation;
}
#drive { position: fixed; inset: 0; }
#gl, #hud { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { pointer-events: none; }
#topbar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--muted); background: rgba(10, 14, 20, 0.55);
  padding: 4px 10px; border-radius: 999px; pointer-events: none;
}

.panel .check { display: flex; align-items: center; gap: 8px; color: var(--muted); }
/* 2026-09-02: 元は inset:auto 0 0 0 / height:150px で画面下150pxだけの
   ボックスだった。シフト/視点/リセット(設計書§11で必須のタッチボタンだが
   未実装だった)を画面上部に置くため、コンテナ自体を全画面(inset:0)へ
   広げる。既存の子要素(ステア/ペダル)は bottom:* で位置指定しているので
   見た目は変わらない。 */
#touch { position: absolute; inset: 0; pointer-events: none; }
#touch > * { pointer-events: auto; }
#touch-wheel {
  position: absolute; left: 12px; right: 12px; bottom: 96px; height: 44px;
  border: 1px solid var(--line); border-radius: 22px; background: rgba(12, 18, 28, 0.6);
  color: var(--muted); font-size: 12px; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none;
}
#touch button {
  position: absolute; bottom: 16px; width: 96px; height: 68px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(12, 18, 28, 0.72); color: var(--text);
  font-size: 13px; touch-action: none; user-select: none;
}
#touch-brake { left: 12px; }
#touch-gas { right: 12px; }
#touch-hand { right: 120px; width: 74px; height: 52px; font-size: 12px; }

/* ── シフト/視点/リセット/説明(設計書§11「画面ボタン」・2026-09-02追加)──
   画面下は既にステア+3ペダルで埋まっているため、飛行中と同様に画面上部の
   空き(#topbarは中央寄せなので左右は空く)へ置く。MT車のときだけ
   シフトボタンを出す(AT既定では意味を持たないボタンで画面を埋めない)。 */
#touch-top-left {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  display: flex; gap: 4px;
}
/* #touch button { position:absolute; bottom:16px; width:96px; height:68px; }
   が既存のペダル3つ向けの広いセレクタなので、ここの子ボタンにも継承されて
   しまう(座標が競合し高さ0の親の中で画面外へ飛んでいた・2026-09-02発見)。
   position を static に戻して通常のflexレイアウトへ復帰させる。
   MT車ではシフト2つが増えて計5個並ぶため、横667px級の端末では中央の
   #topbar と数px重なっていた(2026-09-02発見)。34px幅+4pxギャップに縮小して
   5個でも195px弱に収め、#topbarとの間隔を確保する。 */
#touch-top-left button, #touch-shift button {
  position: static; bottom: auto;
  width: 34px; height: 32px; border-radius: 6px; padding: 0;
  border: 1px solid var(--line); background: rgba(12, 18, 28, 0.72); color: var(--text);
  font-size: 14px; touch-action: manipulation; user-select: none;
}
#touch-shift { display: none; gap: 4px; }
#touch.mt #touch-shift { display: flex; }
#touch-shift button { font-size: 13px; font-weight: 700; }

/* ── 縦画面ではレースの操作を成立させない ───────────────────────────
   実在のモバイルレースゲーム(Asphalt/Real Racing等)は例外なく横画面固定。
   同じ方針で、縦画面中は操作系を隠して回転案内に切り替える。
   #touch:not(.hidden) は「走行中かつタッチモード」の既存の目印
   (app.js が `el("touch").classList.toggle("hidden", !app.touchMode)` を
   走行開始時にしか呼ばないので、body:has() で安全に判定できる)。 */
#rotate-prompt {
  display: none; position: fixed; inset: 0; z-index: 8; background: var(--bg);
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--text); text-align: center; padding: 24px;
}
@media (orientation: portrait) {
  body:has(#touch:not(.hidden)) #rotate-prompt { display: flex; }
  body:has(#touch:not(.hidden)) #touch { display: none !important; }
}
#rotate-prompt .rotate-icon { font-size: 44px; display: inline-block; animation: rotate-hint 1.6s ease-in-out infinite; }
@keyframes rotate-hint { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
#rotate-prompt p { max-width: 280px; line-height: 1.6; color: var(--muted); font-size: 13px; }
#rotate-prompt button {
  width: min(280px,80vw); padding: 11px; font-size: 15px; font-weight: 600;
  color: #04121f; background: var(--accent); border: none; border-radius: 8px; cursor: pointer;
}

.panel input[type=text] {
  background: #0f1622; color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font-size: 16px;
}
.board { margin-top: 24px; }
.board h2 { font-size: 15px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.board h2 button {
  background: transparent; color: var(--accent); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.board .note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 4px 0 10px; }
.board .note b { color: var(--text); }
#ranking { list-style: none; margin: 0; padding: 0; }
#ranking li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px;
}
#ranking li.empty { color: var(--muted); grid-template-columns: 1fr; }
#ranking .time { font-variant-numeric: tabular-nums; font-weight: 600; }
#ranking .meta { color: var(--muted); font-size: 12px; }

/* ── コース選択のカード(工程10)────────────────────────────── */
.trackcard {
  margin: 18px 0;
  padding: 14px;
  background: rgba(16, 22, 30, 0.72);
  border: 1px solid rgba(120, 150, 180, 0.22);
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(220px, 1fr);
  gap: 16px;
  align-items: start;
}
.trackcard canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.6);
}
.trackmeta h2 { margin: 0 0 6px; font-size: 1.15rem; }
.trackmeta p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.6; color: #c3d0dd; }
.trackmeta dl {
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 0.88rem;
}
.trackmeta dt { color: #8fa3b8; }
.trackmeta dd { margin: 0; color: #eef4fa; }
.trackmeta ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.82rem;
  color: #a9bbcc;
  columns: 2;
}
@media (max-width: 700px) {
  .trackcard { grid-template-columns: 1fr; }
  .trackmeta ul { columns: 1; }
}

/* little-bit: focus-visible(2026-08-29追加)
   キーボード操作でいまどこにいるかが見えないアプリが24中20あった
   (サイト品質棚卸し B-5)。:where() で詳細度0にしてあるので、
   個別に focus スタイルを持つ要素はそちらが勝つ。
   色はサイト共通のアクセント(#e8825a)。明るい地でも暗い地でも見える。 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #e8825a;
  outline-offset: 2px;
}