/* =========================================
   br-live-panel
========================================= */

.br-live-panel {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  font-size: 13px;
  color: #222;
}

.br-live-panel *,
.br-live-panel *::before,
.br-live-panel *::after {
  box-sizing: border-box;
}

/* =========================================
   LIVEヘッダー
========================================= */

.br-live-panel__head {
  margin-bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, #202020, #333);
  color: #fff;
  border: 2px solid #aaaaaa;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

/* 旧titleは非使用 */
.br-live-panel__title {
  display: none;
}

.br-live-panel__current {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: rgba(255,255,255,.96);
}

.br-live-panel__dot {
  flex-shrink: 0;

  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ff1744;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255, 23, 68, .8);
  animation: brLivePanelBlink 1.2s infinite;
}

@keyframes brLivePanelBlink {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }

}

.br-live-panel__live-label {
  flex-shrink: 0;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05em;
  color: #fff;
}

.br-live-panel__race-label {
  margin-left: auto; /* ←コレ重要 */

  text-align: right;
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.96);
}

/* =========================================
   映像
========================================= */

.br-live-panel__video {
  margin-top: 0;
  margin-bottom: 14px;
  background: #000;
  border: 2px solid #aaaaaa;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.br-live-panel__video iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 0 !important;
  transform: scale(1.01);
  transform-origin: center;
}

/* =========================================
   モード切替
========================================= */

.br-live-panel__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}

.br-live-panel__mode {
  appearance: none;
  border: 2px solid #cfd5dc;
  background: #fff;
  color: #222;
  border-radius: 4px;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;

  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease,
    transform .08s ease;
}

.br-live-panel__mode:hover {
  border-color: #58b7ff;
  background: #f4fbff;
}

.br-live-panel__mode:active {
  transform: scale(.98);
}

.br-live-panel__mode.is-active {
  background: linear-gradient(
    180deg,
    #57c0ff,
    #1d9fff
  ) !important;

  border-color: #1695f3 !important;
  color: #fff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.12);
}

/* =========================================
   操作エリア
========================================= */

.br-live-panel__control {
  padding: 0;
}

/* =========================================
   セクション見出し
========================================= */

.br-live-panel__section {
  margin: 14px 0 7px;
  padding: 0;
  border: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: #666;
}

/* =========================================
   場ボタン
========================================= */

.br-live-panel__venues {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* =========================================
   Rボタン
========================================= */

.br-live-panel__races {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

/* =========================================
   共通ボタン
========================================= */

.br-live-panel__venue,
.br-live-panel__race {
  appearance: none;
  border: 2px solid #cfd5dc;
  background: #fff;
  color: #222;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;

  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease,
    transform .08s ease,
    box-shadow .12s ease;
}

.br-live-panel__venue {
  padding: 9px 3px;
  line-height: 1.2;
}

.br-live-panel__race {
  padding: 10px 2px;
}

/* =========================================
   hover
========================================= */

.br-live-panel__venue:hover,
.br-live-panel__race:hover {
  border-color: #58b7ff;
  background: #f4fbff;
}

/* =========================================
   active click
========================================= */

.br-live-panel__venue:active,
.br-live-panel__race:active,
.br-live-panel__mode:active {
  transform: scale(.98);
}

/* =========================================
   active state
========================================= */

.br-live-panel__venue.is-active,
.br-live-panel__race.is-active {
  background: linear-gradient(
    180deg,
    #57c0ff,
    #1d9fff
  ) !important;

  border-color: #1695f3 !important;
  color: #fff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.12);
}

/* =========================================
   disabled
========================================= */

.br-live-panel__venue.is-disabled {
  background: #f3f3f3 !important;
  color: #b8b8b8 !important;
  border-color: #dfdfdf !important;
  cursor: default;
  pointer-events: none;
}

/* =========================================
   SWELL干渉対策
========================================= */

.br-live-panel button {
  min-height: unset;
  box-shadow: none;
}

.br-live-panel iframe {
  max-width: none;
}

.br-live-panel__date {
  margin-bottom: 8px;
}