/* LIVE ページ: レース場ボタン + 映像タイルのグリッド。角丸なし・罫線中心 (公開ページの方針に合わせる) */
.lv { --lv-text: #102b50; --lv-sub: #53647a; --lv-border: #dce2e9; --lv-primary: #0055ed; --lv-accent: #d92e41; color: var(--lv-text); max-width: 1160px; margin: 0 auto; padding: 16px 16px 32px; }
.lv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lv-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; font-weight: 700; }
.lv-title small { font-size: 14px; font-weight: 500; color: var(--lv-sub); }
body.page-public .lv-dot { width: 10px; height: 10px; border-radius: 50% !important; background: var(--lv-accent); animation: lv-pulse 1.6s infinite; }
@keyframes lv-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lv-dot { animation: none; } }
.lv-tools { display: flex; align-items: center; gap: 8px; }
.lv-layout { display: flex; }
.lv-layout button, .lv-clear {
  min-height: 36px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--lv-text); background: #fff; border: 1px solid var(--lv-border);
}
.lv-layout button + button { border-left: 0; }
.lv-layout button[aria-pressed="true"] { background: var(--lv-primary); border-color: var(--lv-primary); color: #fff; }
.lv-lead { margin: 8px 0 12px; font-size: 13px; color: var(--lv-sub); }

.lv-venues { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.lv-venue {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 48px; padding: 5px 8px; font: inherit; text-align: left; cursor: pointer;
  background: #f5f7fa; color: #7d8a9c; border: 1px solid var(--lv-border); border-top: 4px solid #c3ccd8;
}
.lv-vname { font-size: 15px; font-weight: 700; line-height: 1.3; }
.lv-vsub { font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.lv-venue.is-on { background: #fff; color: var(--lv-text); border-top-color: var(--tz-color, #4aa3f0); }
.lv-venue.is-on .lv-vsub { color: #13834b; font-weight: 700; }
.lv-venue.is-done { background: #fff; color: var(--lv-sub); border-top-color: #9aa5b4; }
.lv-venue.tz-morning { --tz-color: #ffb627; }
.lv-venue.tz-day { --tz-color: #4aa3f0; }
.lv-venue.tz-summer { --tz-color: #ff8fa8; }
.lv-venue.tz-nighter { --tz-color: #5a45b0; }
.lv-venue.tz-midnight { --tz-color: #0b1540; }
.lv-venue:hover { border-color: var(--lv-primary); }
.lv-venue.is-open { background: var(--lv-primary); border-color: var(--lv-primary); color: #fff; }
.lv-venue.is-open .lv-vsub { color: #fff; }
.lv-venue.is-open::after { content: "再生中"; position: absolute; top: 3px; right: 5px; font-size: 9px; font-weight: 700; }
.lv-venue:focus-visible, .lv-layout button:focus-visible, .lv-clear:focus-visible { outline: 3px solid var(--lv-primary); outline-offset: 2px; }

.lv-grid { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.lv-grid[data-cols="1"] { --cols: 1; max-width: 960px; margin-inline: auto; }
.lv-grid[data-cols="2"] { --cols: 2; }
.lv-grid[data-cols="3"] { --cols: 3; }
.lv-tile { border: 1px solid var(--lv-border); background: #000; min-width: 0; }
.lv-tile-head { display: flex; align-items: center; gap: 8px; padding: 0 0 0 10px; background: var(--lv-text); color: #fff; }
.lv-tile-name { font-size: 15px; font-weight: 700; white-space: nowrap; }
.lv-tile-race { font-size: 12px; color: #cfe0ff; text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-tile-btns { margin-left: auto; display: flex; }
.lv-tile-btns button { width: 40px; height: 40px; font-size: 20px; line-height: 1; color: #fff; background: transparent; border: 0; cursor: pointer; }
.lv-tile-btns button:hover { background: rgba(255,255,255,.16); }
.lv-frame { position: relative; aspect-ratio: 16 / 9; }
.lv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lv-empty { margin: 16px 0 0; padding: 40px 16px; text-align: center; font-size: 14px; color: var(--lv-sub); border: 1px dashed #c3ccd8; }
.lv-empty[hidden] { display: none; }
.lv-credit { margin: 16px 0 0; font-size: 12px; line-height: 1.7; color: var(--lv-sub); }
.lv-credit a { color: var(--lv-primary); }

@media (max-width: 900px) {
  .lv-venues { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lv-only-wide { display: none; }
  .lv-grid[data-cols="3"] { --cols: 2; }
}
@media (max-width: 600px) {
  .lv { padding-top: 10px; }
  .lv-title { font-size: 22px; }
  .lv-venues { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .lv-venue { padding: 4px 6px; min-height: 46px; }
  .lv-vname { font-size: 14px; }
  .lv-vsub { font-size: 10px; }
  .lv-venue.is-open::after { display: none; }
  .lv-venue.is-open .lv-vsub::before { content: "再生中 "; font-weight: 700; }
  .lv-grid { gap: 8px; }
  .lv-grid[data-cols="2"] .lv-tile-race { display: none; }
  .lv-grid[data-cols="2"] .lv-tile-btns button { width: 34px; height: 34px; }
}

/* スマホ下部の固定ナビ (トップと同じ並び。トップ側の定義は home.css) */
.page-live .nw-mobile-nav { display: none; }
@media (max-width: 760px) {
  .page-live .nw-mobile-nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 1px solid #dce2e9;
    padding: 4px env(safe-area-inset-right, 0px) calc(4px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
  }
  .page-live .nw-mobile-nav a {
    min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; color: #53647a; font-size: 11px; font-weight: 500; text-decoration: none;
  }
  .page-live .nw-mobile-nav .active { color: #0055ed; }
  body.page-live { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.lv-frame.is-popped::after { content: "別窓で再生中（別窓を閉じるとここに戻ります）"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 13px; color: #cfd8e6; background: #0b1730; }