/* 日のページ（/races/<日付>/）の C「六角形の地図」。クラスは kd-（site.css・race.css・ktop.css と重ならない）。色は site.css の変数（明るい配色 10/16）、足りない色はこの節の中だけで決める。
   外部読み込み・インラインの style なし（CSP）。息・粒は JS が動いたときだけ（画面の外・隠れた・止めたら止まる）。止める・順に見る・時間帯・閉じるは JS が出す（hidden） */
.kd { --panel: #fff; --panel-lo: #fbf6f2; --soft: #eee6e0; --grid: #8c7a72; --ink: #6b5f63; --ease: cubic-bezier(.2, .8, .2, 1); margin: 8px 0 26px; font-variant-numeric: tabular-nums; }
.kd [hidden] { display: none !important; }
.kd .ty-two { --ty: #ffb238; --bp: 2.6s; }
.kd .ty-three { --ty: #e8333a; --bp: 1.6s; }
.kd .ty-four { --ty: #ff6fae; --bp: .9s; }
.kd .ty-frag { --ty: #b48cff; --bp: .9s; }
.kd .ty-girls { --ty: #5fd3c6; --bp: 1.6s; }
.kd .ty-unk { --ty: var(--muted); }
.kd .ki-nige { --ki: #e8333a; }
.kd .ki-makuri { --ki: #ffb238; }
.kd .ki-sashi { --ki: #7cc4ff; }
.kd .ki-mark { --ki: #8be08b; }
.kd p, .kd ul, .kd ol { margin: 0; padding: 0; list-style: none; }
.kd h2 { margin: 24px 0 6px; }
.kd h3 { margin: 0; }
.kd button { font: inherit; margin: 0; color: inherit; }
.kd a { text-decoration: none; }
.kd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.kd-lead { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 8px !important; }
.kd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 10px !important; }
.kd-keys { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.kd-key { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-size: 11.5px; font-weight: 700; }
.kd-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ty, var(--ki, var(--muted))); box-shadow: inset 0 0 0 1px rgba(31, 26, 28, .45); }

/* --- 操作（時間帯・順に見る・止める） --- */
.kd-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.kd-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-tab, .kd-tourbtn, .kd-pause { min-height: 44px; padding: 0 14px; border: 1px solid var(--grid); border-radius: 999px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); }
.kd-tab:hover, .kd-tourbtn:hover, .kd-pause:hover { border-color: var(--amber); }
.kd-tab[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.kd-tourbtn { color: var(--amber); }
.kd-pause { margin-left: auto; color: var(--muted); }
.kd button:focus-visible, .kd-btn:focus-visible, .kd-hub:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* --- 舞台: 左に地図・右に札（せまい画面は縦） --- */
.kd-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 639px) {
  .kd h2 { margin-top: 18px; font-size: 1rem; }
  .kd-lead { font-size: 13px; line-height: 1.6; margin-bottom: 6px !important; }
  .kd-legend { font-size: 11px; margin-bottom: 8px !important; }
  .kd-keys { gap: 2px 9px; }
  .kd-key { font-size: 11px; }
  .kd-tab, .kd-tourbtn, .kd-pause { padding: 0 11px; font-size: 12.5px; }
  .kd-tabs { gap: 5px; }
  .kd-hub { min-height: 0; padding: 12px 6%; gap: 4px; margin-bottom: 8px; }
  .kd-hub-date { font-size: 22px; }
}
@media (min-width: 860px) { .kd-stage { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); } }
.kd-left { min-width: 0; }
.kd-hub { position: relative; z-index: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; margin: 0 0 12px; padding: 14px 9%; text-align: center; color: var(--text); background: var(--grid);
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); }
.kd-hub::before { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; bottom: 2px; z-index: -1; background: linear-gradient(180deg, #fff, #fbf6f2); clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); transition: background .3s; }
a.kd-hub:hover::before { background: #fff4e3; }
.kd-hub-date { font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: .02em; }
.kd-hub-date small { margin-left: 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
.kd-hub-lines { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 4px 18px; justify-content: center; text-align: left; }
.kd-hub-lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding-left: 8px; border-left: 2px solid rgba(163, 68, 10, .45); font-size: 12px; line-height: 1.45; color: var(--text); }
.kd-hub-lines li b { font-size: 14px; color: var(--text); }
.kd-hub-lines small { width: 100%; color: var(--amber); font-size: 11px; }
.kd-hub-lines li.kd-hub-h { grid-column: 1 / -1; padding-left: 0; border-left: 0; color: var(--muted); }
.kd-hub-lines i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--ty, var(--muted)); }
.kd-hub-basis { max-width: 92%; font-size: 11px; line-height: 1.45; color: var(--muted); }

/* --- 地図: 時間帯 → 開催の塊（SVG）→ 六角形 --- */
.kd-map { position: relative; }
.kd-slot { margin: 0 0 14px; }
.kd-slot h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 6px; font-size: 1rem; }
.kd-slot h3 small { color: var(--muted); font-size: 12px; font-weight: 500; }
.kd-cup { margin: 0 0 8px; }
.kd-cup-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 2px; font-size: 14px; }
.kd-cup-h b { font-weight: 800; }
.kd-cup-h span:not(.grade) { color: var(--muted); font-size: 12.5px; }
.kd-cl { display: block; width: 100%; height: auto; overflow: visible; }

/* --- 六角形 --- */
.kd-hex { cursor: pointer; outline: none; transition: opacity .3s; }
.kd-hex.is-off { cursor: default; }
.kd-sh, .kd-rg { stroke: var(--ink); stroke-width: .8; }
.kd-sh { fill: var(--ty, var(--muted)); }
.kd-rg { fill: var(--ki, var(--muted)); }
.kd-fl { fill: #fff; transition: fill .25s; }
.kd-hex:hover .kd-fl { fill: #fff4e3; }
.kd-hex.is-sel .kd-fl { fill: #ffe7c4; }
.kd-hex.is-off:hover .kd-fl { fill: #fff; }
.kd-hex.is-cancel .kd-sh, .kd-hex.is-off .kd-sh { fill: #cfc4be; }
.kd-hex.is-cancel .kd-tt, .kd-hex.is-off .kd-rn { fill: var(--ink); }
.kd-hex:focus-visible .kd-sh, .kd-hex.is-sel .kd-sh { stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.kd-hex.is-past { opacity: .7; }
.kd-map.has-sel .kd-hex:not(.is-sel) { opacity: .78; }
.kd-map.has-sel .kd-hex.is-past:not(.is-sel) { opacity: .55; }
.kd-map.has-sel .kd-hex:not(.is-sel):hover, .kd-map.has-sel .kd-hex:not(.is-sel):focus-visible { opacity: 1; }
.kd-rn, .kd-tt, .kd-pc { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.kd-rn { fill: var(--text); font-size: 12px; font-weight: 800; }
.kd-tt { fill: #3a3135; font-size: 9.5px; font-weight: 700; }
.kd-pc { fill: var(--muted); font-size: 8.5px; }
.kd-star { fill: #ffb238; stroke: #3a3135; stroke-width: .6; stroke-linejoin: round; pointer-events: none; }
.kd-dot { fill: var(--red); pointer-events: none; }

/* --- 息・光の粒（JS が動いたときだけ。息は見えている開催, 粒はいちばん多く見えている開催 1 つだけが動く） --- */
.kd.is-live .kd-sh { animation: kd-breath var(--bp, 1.6s) ease-in-out infinite alternate; animation-play-state: paused; }
.kd.is-live .ty-unk .kd-sh, .kd.is-live .is-cancel .kd-sh, .kd.is-live .is-off .kd-sh { animation: none; }
.kd.is-live .kd-dot { animation: kd-glint 1.3s ease-in-out infinite alternate; animation-play-state: paused; }
.kd.is-live .kd-dot.d1 { animation-delay: -.43s; }
.kd.is-live .kd-dot.d2 { animation-delay: -.87s; }
.kd.is-live .kd-cup.is-on .kd-sh, .kd.is-live .kd-cup.is-glow .kd-dot { animation-play-state: running; }
.kd.is-live.is-paused .kd-sh, .kd.is-live.is-paused .kd-dot { animation-play-state: paused !important; }
@keyframes kd-breath { from { opacity: .5; } to { opacity: 1; } }
@keyframes kd-glint { from { opacity: .25; } to { opacity: 1; } }

/* --- 開いた札 --- */
.kd-panel { position: relative; isolation: isolate; min-width: 0; }
.kd-p-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 10px 32px rgba(31, 26, 28, .18); transform-origin: 0 0; }
.kd-p-body { position: relative; display: grid; gap: 12px; padding: 16px; min-width: 0; }
.kd-close { display: none; }
@media (min-width: 860px) {
  .kd-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
  .kd-p-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--grid) transparent; }
}
.kd-p-kick { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); }
.kd-p-kick b { color: var(--amber); font-size: 16px; }
.kd-lab { font-size: 12px; color: var(--muted); margin-bottom: 6px !important; }
.kd-note { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin-top: 6px !important; }
.kd .car { width: 1.9rem; height: 1.9rem; font-size: .95rem; border-radius: 6px; }
.kd-lines li { padding: 7px 0; border-bottom: 1px solid var(--soft); }
.kd-lines li:first-child { padding-top: 0; }
.kd-top, .kd-fol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.kd-fin li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--soft); }
.kd-fin li:first-child { border-top: 0; }
.kd-fin b { flex: none; min-width: 2.2em; color: var(--amber); font-size: 14px; }
.kd-nm { min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }
.kd-kv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px !important; font-size: 13px; color: var(--muted); }
.kd-kv b { color: var(--text); font-size: 14px; }
.kd-chips { display: inline-flex; gap: 4px; }
.kd-marks li { display: grid; grid-template-columns: 22px 2rem minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--soft); }
.kd-marks li:first-child { border-top: 0; }
.kd-mk { text-align: center; font-size: 17px; line-height: 1; color: var(--amber); }
.kd-fn { font-size: 13px; color: var(--muted); }
.kd-fn.is-in { color: var(--amber); font-weight: 800; }
.kd-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.kd-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 12px; border: 1px solid var(--grid); border-radius: 12px; background: var(--panel); color: var(--amber); font-size: 14px; font-weight: 800; line-height: 1.3; text-align: center; }
.kd-btn:hover { background: rgba(255, 178, 56, .2); }
.kd-btn.pri { background: var(--amber-fill); border-color: var(--amber-fill); color: var(--on-amber); }
.kd-tour { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--amber); border-radius: 12px; background: rgba(255, 178, 56, .14); line-height: 1.4; }
.kd-tl { flex: 1 1 130px; color: var(--amber); font-size: 13px; font-weight: 800; }
.kd-tb { display: flex; gap: 6px; }
.kd-tb button { min-height: 44px; min-width: 56px; padding: 0 12px; border: 1px solid var(--grid); border-radius: 10px; background: var(--panel); font-size: 12px; font-weight: 800; cursor: pointer; }
.kd-tb button:hover { border-color: var(--amber); }

/* --- せまい画面: 下からせり上がる札 --- */
.kd-scrim { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 40; background: rgba(31, 26, 28, .45); opacity: 0; pointer-events: none; transition: opacity .35s; }
.kd-scrim.on { opacity: 1; pointer-events: auto; }
.kd-lock { overflow: hidden; }
@media (max-width: 859px) {
  .kd.is-live .kd-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; width: 100%; max-width: 680px; margin: 0 auto; height: min(78vh, 720px); height: min(78dvh, 720px);
    transform: translateY(105%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  .kd.is-live .kd-panel.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  .kd.is-live .kd-p-bg { border-radius: 20px 20px 0 0; }
  .kd.is-live .kd-p-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 60px 16px calc(24px + env(safe-area-inset-bottom)); align-content: start; }
  .kd.is-live .kd-panel::before { content: ""; position: absolute; left: 50%; top: 8px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--grid); z-index: 2; }
  .kd.is-live .kd-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 10px; top: 14px; z-index: 3; min-width: 64px; min-height: 44px; padding: 0 12px; border: 1px solid var(--grid); border-radius: 12px; background: var(--panel); font-size: 13px; font-weight: 800; cursor: pointer; }
}

/* --- 動きを減らす設定: 息・粒・移りなし（止まった色と文字で読める） --- */
@media (prefers-reduced-motion: reduce) {
  .kd *, .kd *::before, .kd-scrim { animation: none !important; transition: none !important; }
}