/* ══ ラップ解析の画面の見た目（#69・2026-08-25 に切り出した）══
 *
 * ⚠⚠ **前は index.html と tools/lapcheck.html の2か所に写しがあった。**
 *   lapcheck 側に「ここを直したら index.html も直すこと」と書いてあったが、
 *   2026-08-25 に index.html だけ直して、**道具が実物と違う画面を出した**
 *   （表の幅を広げたのに、道具では 640px のままだった）。
 *   → **1つのファイルにして、両方から読む。**
 */
  #analysis{top:10px;left:10px;width:min(640px,calc(100vw - 380px));display:none;
    max-height:calc(100vh - 20px);overflow-y:auto;z-index:7;
    font-variant-numeric:tabular-nums}
  #analysis h3{font-size:11px;margin:14px 0 5px;color:#9aa2b5;letter-spacing:.06em}
  #analysis h3:first-child{margin-top:0;font-size:13px;color:#e8eaf0}
  #analysis .u{color:#9aa2b5;font-size:11.5px;font-weight:400}
  #analysis table{width:100%;border-collapse:collapse}
  #analysis td{padding:3px 0;border-bottom:1px solid #222735;vertical-align:top}
  #analysis table:not(.an-legs) td:last-child{text-align:right;padding-left:12px}
  /* 記録を選ぶ帯。自己ベストが先頭(listRuns が速い順に返す) */
  #analysis .an-runs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:4px}
  #analysis .an-run{padding:4px 9px;line-height:1.25;text-align:left}
  #analysis .an-run small{display:block;font-size:9.5px;opacity:.7}
  /* レッグの表。**行ごと押せる**ので、押せることが見て分かるようにする */
  #analysis .an-legs td{padding:4px 6px 4px 0;font-size:12px}
  /* 選んだ行は左に帯が出る(.an-leg.on)。**番号がその下に隠れない**よう空ける */
  #analysis .an-legs td:first-child{white-space:nowrap;padding-left:6px}
  /* ふだんの4列(番号・ラップ・順・ミス)は幅を中身に合わせ、数字を右に揃える(2026-09-28) */
  #analysis .an-legs.simple{width:auto;min-width:55%}
  #analysis .an-legs.simple td{padding-right:22px}
  #analysis .an-legs.simple td:not(:first-child){text-align:right}
  #analysis .an-head td{color:#9aa2b5;font-size:10.5px;border-bottom:1px solid #2b3040}
  #analysis .an-leg{cursor:pointer}
  #analysis .an-leg:hover{background:#1b2130}
  #analysis .an-leg.on{background:#1e2a44;box-shadow:inset 2px 0 0 #5b9cff}
  /* 順位の欄(Lap Center と同じ位置)。**ベストラップだけ色を変える** */
  #analysis .an-rank{width:1.6em;text-align:right;font-size:11px;color:#9aa2b5}
  /* ★ 相対値(C-1-7)。**ラップより一段弱く**出す — 毎回読むのはラップとミスで、
     相対値は「他のレッグ・他の大会と比べる」ときに見る欄。 */
  #analysis .an-legs td.an-rel{text-align:right;width:2.4em;color:#9fb4d6;
    font-size:11.5px}
  #analysis .an-rank.top{color:#38c172;font-weight:700}
  #analysis .an-rank.top2{color:#6fce9a}
  #analysis .an-rank.top3{color:#a6dcc0}
  /* 選んだレッグの下に出す細かい数字。**押したときだけ**(欄を増やさない) */
  #analysis .an-detail td{background:#182031;font-size:11.5px;
    color:#c8cee0;padding:5px 6px 7px 0}
  /* 「?」— 一度分かれば済む説明の開け閉め。**見出しの右端に小さく** */
  #analysis .an-q{float:right;width:20px;height:20px;padding:0;line-height:1;
    border-radius:50%;font-size:12px;color:#9aa2b5}
  #analysis .an-q.on{background:#5b9cff;border-color:#5b9cff;color:#0b1020;
    font-weight:700}
  /* 「自分 / 全員」の切り替え */
  #analysis .an-tabs{display:flex;gap:0;border:1px solid #2b3040;border-radius:7px;
    overflow:hidden;margin-bottom:8px}
  #analysis .an-tab{flex:1;border:0;border-radius:0;border-left:1px solid #2b3040;
    padding:6px 4px}
  #analysis .an-tab:first-child{border-left:0}
  #analysis .an-tab.on{background:#5b9cff;color:#0b1020;font-weight:700}
  /* ── 全員のスプリットリスト(Lap Center 方式)──────────────────
     **横に長い。**紙地図を隠さないために枠は広げず、**表の中で左右に送る**。
     左の3列は貼り付けて動かさない(送っても誰の行か分かるように) */
  #analysis .an-wide{overflow-x:auto;border:1px solid #222735;border-radius:7px}
  #analysis.wide{width:calc(100vw - 380px)}
  /* ⚠ **数字を詰める**。レッグの欄は「1:06 (3)」で、順位はかっこ書きなので一段小さくてよい */
  #analysis .an-all{width:auto;min-width:100%;white-space:nowrap;font-size:11px}
  #analysis .an-all .u{font-size:9.5px}
  #analysis .an-all td{padding:2px 5px 2px 4px;border-bottom:1px solid #222735;
    text-align:right}
  #analysis .an-all .an-head td{position:sticky;top:0;background:#151a25;
    color:#9aa2b5;font-size:10.5px;z-index:2}
  #analysis .an-all .s1,#analysis .an-all .s2,#analysis .an-all .s3{
    position:sticky;background:#12161f;z-index:1}
  /* ★ 累計の段(#69)。**ラップより一段弱く**出す — 毎回読むのはラップで、
     累計は「そこまでで勝っているか」を確かめるときに見る欄。 */
  #analysis .an-all .tot{color:#9fb4d6}
  /* ★ レッグの見出しは押せる(C-1-1 並べ替え)。**押せると分かる形**にする */
  #analysis .an-all .an-sort{cursor:pointer;user-select:none}
  #analysis .an-all .an-sort:hover{color:#e8eaf0;background:#1d2431}
  #analysis .an-all .an-sort.on{color:#5b9cff}
  #analysis .an-all .s1{left:0;width:2em}
  #analysis .an-all .s2{left:2.4em;text-align:left;min-width:4.5em}
  #analysis .an-all .s3{left:7.4em;box-shadow:1px 0 0 #2b3040}
  #analysis .an-all .an-head .s1,#analysis .an-all .an-head .s2,
  #analysis .an-all .an-head .s3{background:#151a25;z-index:3}
  #analysis .an-all-row,#analysis .an-all-row2{cursor:pointer}
  #analysis .an-all-row:hover td,#analysis .an-all-row2:hover td{background:#1b2130}
  #analysis .an-all-row.on td,#analysis .an-all-row2.on td{background:#1e2a44}
  /* 自分の行(名前が入っていない記録)は色を変える */
  #analysis .an-all-row.mine .s2,#analysis .an-all-row.mine .s3{color:#ff9d3c;
    font-weight:700}
  /* ★★ **上位3つまで色を付ける**(C-1-7・2026-08-26)。
     Lap Center は 1位/2位/3位 を赤の3段階で塗っている(`#fcc`/`#fdd`/`#fee`)。
     ⚠ Oria は速い方を緑にしているので**色は緑のまま**、濃さだけ3段にする
     (色を赤に替えると、地図の軌跡の速さの色と食い違う)。 */
  #analysis .an-all td.best{color:#38c172;font-weight:700}
  #analysis .an-all td.best2{color:#6fce9a}
  #analysis .an-all td.best3{color:#a6dcc0}
  #analysis .an-all-row2 td{padding-top:0;border-bottom:1px solid #2b3040}
  /* ★ 2026-09-28 シンプルにした: いちばん上のタイムの1行と「詳しく」 */
  #analysis .an-top{font-size:13px;margin:8px 0 4px}
  #analysis .an-top b{font-size:22px;font-weight:800;margin-right:4px}
  #analysis .an-more{display:block;width:100%;margin-top:10px;padding:6px 0;border:1px solid #2b3040;
    border-radius:8px;background:#161b26;color:#c8cee0;font-size:12px;cursor:pointer}
  #analysis .an-more:hover{border-color:#4a5470}
  #analysis .an-note{color:#c8cee0;font-size:11.5px;line-height:1.7;margin-top:7px;
    background:#161b26;border:1px solid #222735;border-radius:7px;padding:7px 9px}
  /* 前提から外れているときの断り。**数字より先に目に入る色にする** */
  #analysis .warn-box{border-color:#5a4416;background:#241d10;color:#ffcf7a}
  /* 速さの色の見本。courseview.js の speedColor がそのまま入る */
  #analysis .an-scale{display:flex;height:9px;border-radius:5px;overflow:hidden;
    margin-bottom:3px}
  #analysis .an-scale span{flex:1}

/* ★ 検査の頁(tools/lapcheck.html)は 3D の上に浮かせないので、
 *   位置と display だけ打ち消す。**中身の見た目は 1つも変えない**。 */
body.lapcheck #analysis{position:static;display:block;max-height:none;
  width:640px;overflow-y:visible}
body.lapcheck #analysis.wide{width:calc(100vw - 420px)}

/* ★ リタイア(DNF)の行。**順位の下に別枠**で、一段弱く出す(C-1-6) */
#analysis .an-all tr.dnf td{color:#8b93a6}
#analysis .an-all tr.dnf .s3{color:#ffb020}
/* ★ 打刻の無いレッグの `X`(C-1-7)。**数字と見間違えない色**にする */
#analysis .an-all tr.dnf .x{color:#ff5f56;font-weight:700}
#analysis .an-all tr.dnf.an-all-row td{border-top:1px solid #2b3040}

/* ══ 走りの再生の帯(C-1-3・2026-08-26)══════════════════════════════
 *
 * ⚠ **`#analysis` の中に閉じ込めない。**#72 で本人が「案イ(紙地図の下)」を
 *   選んだら、帯は解析の欄の外に置くことになるため。
 * ⚠ ここが**唯一の持ち主**。`tools/replaymock.html` もこのファイルを読む
 *   (#69「同じ見た目を2か所に書かない」)。 */
.rp{border:1px solid #2b3040;border-radius:8px;padding:8px 9px;margin:8px 0 10px;
  background:#151a25}
.rp .row{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.rp .sp{margin-left:auto;display:flex;gap:0;border:1px solid #2b3040;
  border-radius:6px;overflow:hidden}
.rp .sp button{border:0;border-radius:0;border-left:1px solid #2b3040;
  padding:4px 8px;font-size:11.5px}
.rp .sp button:first-child{border-left:0}
.rp .big{width:5.4em;font-weight:700}
.rp .bar{position:relative;height:16px;margin:2px 0 6px;cursor:pointer}
.rp .bar .tr{position:absolute;left:0;right:0;top:7px;height:3px;
  background:#2b3040;border-radius:2px}
.rp .bar .dn{position:absolute;left:0;top:7px;height:3px;width:0;
  background:#5b9cff;border-radius:2px}
/* レッグの切れ目。**どこで何番か**が帯の上で分かる */
.rp .bar i{position:absolute;top:3px;width:1px;height:11px;background:#4a5468}
.rp .bar b{position:absolute;top:1px;width:13px;height:13px;border-radius:50%;
  background:#5b9cff;box-shadow:0 0 0 3px rgba(91,156,255,.25);margin-left:-6px}
.rp .st{font-size:11.5px;color:#9aa2b5}
.rp .st em{font-style:normal;color:#e8eaf0;font-weight:700}
.rp label{font-size:11.5px;color:#9aa2b5;display:flex;align-items:center;gap:4px;
  cursor:pointer;white-space:nowrap}
/* ★ 帯のボタンは解析の欄の外にも出るので、**色を自分で持つ**
 *   (3Dの上に浮かせたときに、素のボタンの見た目に戻らないように) */
.rp button{font:inherit;color:#e8eaf0;background:#252a36;border:1px solid #2b3040;
  border-radius:6px;padding:5px 9px;cursor:pointer}
.rp button.on{background:#5b9cff;border-color:#5b9cff;color:#0b1020;font-weight:600}
/* ★★ 何人も同時に流すとき(#72③「イ」・2026-09-04)。
 *   Livelox と同じで、**出す人はチェックで選び、名前を押すとその人を追う**。 */
.rp .who{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0 2px}
.rp .who .p{display:flex;align-items:center;gap:5px;font-size:11.5px;
  color:#9aa2b5;cursor:pointer;white-space:nowrap}
.rp .who .p input{margin:0;cursor:pointer}
/* その人の色。**紙地図の線と同じ色**を四角で出す(凡例をここ以外に作らない) */
.rp .who .p i{width:9px;height:9px;border-radius:2px;display:inline-block;
  flex:0 0 auto}
.rp .who .p.sel{color:#e8eaf0;font-weight:700}
.rp .who .p.gone{opacity:.4;cursor:default}
/* 速さのつまみ。**実際の倍率を右に出す**(Livelox と同じ) */
.rp .rate{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:11.5px;color:#9aa2b5}
.rp .rate input[type=range]{width:120px;accent-color:#5b9cff;cursor:pointer}
.rp .rate em{font-style:normal;color:#e8eaf0;font-weight:700;
  min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.rp select{font:inherit;font-size:11.5px;color:#e8eaf0;background:#252a36;
  border:1px solid #2b3040;border-radius:6px;padding:3px 6px;cursor:pointer}
/* ★ 見た目のつまみ(#154 ②(あ)・2026-09-04)。歯車で開け閉めする */
.rp .look{gap:14px;margin:2px 0 6px;border-top:1px solid #2b3040;padding-top:7px}
.rp .lk{gap:6px}
.rp .lk input[type=range]{width:96px;accent-color:#5b9cff;cursor:pointer}
.rp .lk em{font-style:normal;color:#e8eaf0;font-weight:700;min-width:3.2em;
  text-align:right;font-variant-numeric:tabular-nums}

/* ★ 「3Dで見る」のとき(C-4・2026-08-26)。**表だけを畳んで、帯は残す** —
 *   3Dが見えて、しかも操作できる状態にするため。
 *   ⚠ 画面は切り替えない(解析の欄は3Dの上に浮いているだけで、
 *     後ろでは3Dがずっと動いている)。 */
#analysis.folded{width:min(560px,calc(100vw - 380px));max-height:none;
  overflow:visible}
/* ⚠⚠ `!important` が要る。**行内の style に負ける**ため —
 *   `analysisHTML` はボタンの並びなどを `style="display:flex"` で書いており、
 *   行内は id より強い。2026-08-26 に、畳んだのに「閉じる」だけ残って気づいた。 */
#analysis.folded > *{display:none !important}
#analysis.folded > #an-replay{display:block !important;margin:0}