/* ============================================================
   トップのスケジュール表（2026-11-04 代表の依頼）
   時間の軸は「昼を縮めて夜を広げる」案B。中身は tools/gen_schedule.mjs、動きは assets/js/schedule.js。
   トップだけが読む（style.css を変えると全ページの ?v= が変わるので分けた）
   ============================================================ */
.schedule {
  padding: 72px 0 24px;
  --sch-navy: #12306e;
  --sch-line: rgba(13, 78, 163, 0.10);
  --sch-gold1: #ffd23f;
  --sch-gold2: #ffb02a;
  --sch-goldtext: #4d3200;
  --sch-goldedge: #e39a00;
}

/* 種類の色：白い文字が読める濃さ（サイトの札の色相に合わせた） */
.sch-cat-stage { --c1: #6d3fe0; --c2: #a21fb5; }
.sch-cat-taikai { --c1: #c8440e; --c2: #c2186b; }
.sch-cat-taiken { --c1: #0b7fab; --c2: #2563d6; }
.sch-cat-vachapre { --c1: #0f8a5f; --c2: #0b7f7a; }
.sch-cat-stream { --c1: #3a4a8c; --c2: #5a4a9c; }

/* ---- 日付のタブ（大会情報の「開催カレンダー」と同じ見た目） ---- */
.sch-tabs {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.sch-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 2px;
  cursor: pointer;
  color: var(--text-on-light);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
  box-shadow: 0 4px 12px rgba(110, 60, 130, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sch-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(110, 60, 130, 0.2);
}
.sch-tab__date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
}
.sch-tab__m { font-size: 0.72em; }
.sch-tab__dow {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--text-on-light-sub);
}
.sch-tab--sat .sch-tab__dow { color: #1f7fd6; }
.sch-tab--sun .sch-tab__dow { color: #e0303c; }
.sch-tab__n {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--text-on-light-sub);
}
.sch-tab--all .sch-tab__date {
  font-family: var(--font-jp);
  font-size: 0.92rem;
  padding: 3px 0;
}
.sch-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, #e8590c, #d6246e);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(214, 36, 110, 0.35);
}
.sch-tab[aria-selected="true"] .sch-tab__dow,
.sch-tab[aria-selected="true"] .sch-tab__n { color: #fff; }

/* ---- 種類の絞り込み ---- */
.sch-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 16px 0 12px;
}
.sch-filters__label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-on-light);
  margin-right: 4px;
}
.sch-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 13px 6px 11px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  border: 2px solid var(--c1);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
.sch-chip::before { content: "\2713"; font-weight: 900; font-size: 0.85em; }
.sch-chip__n {
  font-family: var(--font-ui);
  font-size: 0.9em;
  line-height: 1.4;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}
.sch-chip[aria-pressed="false"] { color: var(--c1); background: #fff; }
.sch-chip[aria-pressed="false"]::before { content: "\FF0B"; }
.sch-chip[aria-pressed="false"] .sch-chip__n { background: rgba(13, 78, 163, 0.08); }
.sch-chip.is-zero { opacity: 0.5; }
.sch-chip--reset {
  color: var(--text-on-light);
  border-color: rgba(13, 78, 163, 0.4);
  background: #fff;
  padding: 6px 13px;
}
.sch-chip--reset::before { content: none; }
.sch-chip--reset[hidden] { display: none; }
.sch-dice {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 13px 5px 9px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-on-light);
  border: 2px dashed rgba(13, 78, 163, 0.45);
  border-radius: 999px;
  background: #fff;
}
.sch-dice:hover { border-style: solid; }
.sch-dice svg { width: 20px; height: 20px; display: block; }
.sch-dice.is-rolling svg { animation: sch-roll 0.55s ease; }
@keyframes sch-roll {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(200deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---- コアタイムの説明 ---- */
.sch-corenote {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  font-family: var(--font-jp);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--text-on-light);
}
.sch-corenote__pill {
  padding: 3px 14px;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  color: var(--sch-goldtext);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sch-gold1), var(--sch-gold2));
}

/* ---- 表の台紙 ---- */
.sch-board {
  --sch-lab: 112px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(110, 60, 130, 0.14);
}
.sch-jump { display: none; }
.sch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sch-in { position: relative; min-width: 100%; }
.sch-head,
.sch-foot { display: grid; grid-template-columns: var(--sch-lab) minmax(0, 1fr); }
.sch-corner {
  position: sticky;
  left: 0;
  z-index: 8;
  background: #fff;
}
.sch-head .sch-corner { border-bottom: 1.5px solid rgba(13, 78, 163, 0.22); }

/* 時間の目盛り。コアタイムの間は、目盛りの高さいっぱいを金色にする */
.sch-axis {
  position: relative;
  height: 58px;
  border-bottom: 1.5px solid rgba(13, 78, 163, 0.22);
}
.sch-axis__core {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  white-space: nowrap;
  color: var(--sch-goldtext);
  background: linear-gradient(135deg, var(--sch-gold1), var(--sch-gold2));
}
.sch-axis__corelabel {
  position: sticky;
  left: calc(var(--sch-lab) + 8px);
  display: inline-flex;
  gap: 6px;
  padding: 0 4px;
}
.sch-axis__corename {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 0.92rem;
  line-height: 1.2;
}
.sch-axis__coretime {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
}
.sch-axis__zone {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  font-family: var(--font-jp);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-on-light-sub);
}
.sch-tick {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.86rem;
  white-space: nowrap;
  color: var(--text-on-light);
}
.sch-tick--sub { font-weight: 600; font-size: 0.74rem; color: var(--sch-goldtext); }
.sch-tick--first { transform: translateX(3px); }
.sch-tick--last { transform: translateX(calc(-100% - 3px)); }

/* 表の本体：背景（昼の色・線・コアタイムの色）の上に棒を重ねる */
.sch-body {
  position: relative;
  padding-top: 6px;
  padding-bottom: 6px;
}
.sch.has-now .sch-body { padding-top: 24px; }
.sch-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sch-lab);
  right: 0;
  pointer-events: none;
}
.sch-bg__day {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(13, 78, 163, 0.035);
}
.sch-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--sch-line);
}
.sch-line--sub { background: rgba(13, 78, 163, 0.05); }
.sch-bg__core {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 210, 63, 0.42) 0 12px, rgba(255, 210, 63, 0.30) 12px 24px);
}
.sch-bg__blank {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-jp);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-on-light-sub);
}
.sch-bg__blank[hidden] { display: none; }
/* コアタイムの両端の線は、棒より上に引く（棒で埋まる日でも範囲が分かるように） */
.sch-edges {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
  border-left: 2.5px solid var(--sch-goldedge);
  border-right: 2.5px solid var(--sch-goldedge);
}
.sch-foot__axis { position: relative; height: 22px; }
.sch-foot .sch-axis__core { align-items: center; padding-top: 0; }
.sch-foot .sch-axis__corename { font-size: 0.74rem; }

/* 今の時刻の線（開催中の日だけ）。--sch-now は軸の左からの割合 */
.sch-now {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--sch-lab) + (100% - var(--sch-lab)) * var(--sch-now, 0));
  width: 2px;
  z-index: 4;
  pointer-events: none;
  background: #e8222e;
}
.sch-now[hidden] { display: none; }
.sch-now__tag {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  font-family: var(--font-jp);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  border-radius: 999px;
  background: #e8222e;
}

/* ---- 日ごとの表 ---- */
.sch-panel { display: none; position: relative; }
.sch-panel.is-active { display: block; }
.sch-g {
  position: relative;
  display: grid;
  grid-template-columns: var(--sch-lab) minmax(0, 1fr);
  border-top: 1px solid rgba(13, 78, 163, 0.14);
}
.sch-g:first-child { border-top: 0; }
.sch-g[hidden] { display: none; }
.sch-panel .sch-g:first-child .sch-g__lab { border-top-left-radius: 8px; }
.sch-g__lab {
  position: sticky;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 5px;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
.sch-g__short { display: none; }
.sch-g__lanes { position: relative; min-width: 0; padding: 5px 0; }
.sch-lane { position: relative; height: 54px; margin-bottom: 4px; }
.sch-lane:last-child { margin-bottom: 0; }
.sch-empty {
  position: relative;
  padding: 44px 16px;
  font-family: var(--font-jp);
  font-weight: 700;
  text-align: center;
  color: var(--text-on-light);
}
.sch-empty[hidden] { display: none; }

/* 棒 */
.sch-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 2px 6px rgba(20, 20, 60, 0.22);
}
.sch-bar:hover { filter: brightness(1.12); }
.sch-bar:focus-visible { outline: 3px solid var(--text-on-light); outline-offset: 2px; }
.sch-bar__txt {
  position: sticky;
  z-index: 5;
  left: var(--sch-lab);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  height: 100%;
  padding: 3px 8px;
  overflow: hidden;
}
.sch-bar__tm {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.15;
  white-space: nowrap;
}
.sch-bar__t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 0.84rem;
  line-height: 1.2;
}
.sch-bar__t small { font-size: 0.86em; font-weight: 700; }
.sch-bar__live {
  display: none;
  margin-left: 6px;
  padding: 0 6px;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 0.62rem;
  line-height: 1.5;
  vertical-align: 1px;
  color: #d3182a;
  border-radius: 999px;
  background: #fff;
}
.sch-bar__live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 3px;
  vertical-align: 1px;
  border-radius: 50%;
  background: #e8222e;
}
.sch-bar.is-live .sch-bar__live { display: inline-block; }
/* 終わりの時刻が無い物は、先を薄くする */
.sch-bar.is-open {
  background: linear-gradient(to right, var(--c1), var(--c2) 60%, color-mix(in srgb, var(--c2) 15%, transparent));
  box-shadow: none;
}
/* 細い棒：開始の時刻だけ。札は出さない */
.sch-bar.is-slim:not(.is-tiny) .sch-bar__end,
.sch-bar.is-slim .sch-bar__live { display: none; }
.sch-bar.is-slim:not(.is-tiny) .sch-bar__txt { padding: 3px 5px; }
/* 名前が棒に入らないときは、棒の右に出す */
.sch-bar.is-tiny .sch-bar__txt {
  position: absolute;
  top: 0;
  left: 100%;
  width: max-content;
  max-width: 240px;
  padding: 0 0 0 6px;
  overflow: visible;
  color: var(--sch-navy);
}
.sch-bar.is-tiny .sch-bar__t { -webkit-line-clamp: 1; }
.sch-bar.is-tiny .sch-bar__tm { color: var(--text-on-light-sub); }

/* ---- 全日程：9日を1枚で ---- */
.sch-ovrow {
  position: relative;
  display: grid;
  grid-template-columns: var(--sch-lab) minmax(0, 1fr);
  width: 100%;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--sch-line);
  background: none;
}
.sch-ovrow:first-child { border-top: 0; }
.sch-ovrow:hover .sch-ovrow__day { background: rgba(255, 58, 168, 0.1); }
.sch-ovrow.is-today .sch-ovrow__day { background: rgba(255, 58, 168, 0.18); }
.sch-ovrow__day {
  position: sticky;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 11px 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-on-light);
  background: #fff;
}
.sch-ovrow__dow {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--text-on-light-sub);
}
.sch-ovrow--sat .sch-ovrow__dow { color: #1f7fd6; }
.sch-ovrow--sun .sch-ovrow__dow { color: #e0303c; }
.sch-ovrow__cells { position: relative; }
.sch-cell {
  position: absolute;
  top: 3px;
  bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 3px;
}
.sch.is-all .sch-bg__day { display: none; }
.sch-allcap,
.sch-tz {
  margin: 12px 0 0;
  font-family: var(--font-jp);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
  color: var(--text-on-light-sub);
}
.sch-allcap[hidden] { display: none; }
.sch-more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 18px 0 0;
}
.sch-more .btn { padding: 11px 26px; font-size: 0.92rem; }

/* ---- 詳しい内容の小窓（reset.css が margin:0 にするので auto を指定） ---- */
.sch-detail {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  font-family: var(--font-jp);
  color: var(--sch-navy);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(30, 20, 70, 0.4);
}
.sch-detail::backdrop { background: rgba(23, 27, 58, 0.5); }
.sch-detail__top {
  padding: 16px 48px 14px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--c1, #6d3fe0), var(--c2, #a21fb5));
}
.sch-detail__cat { margin: 0 0 3px; font-size: 0.76rem; font-weight: 700; line-height: 1.4; }
.sch-detail__dice {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  font-weight: 800;
  color: #c2186b;
  border-radius: 999px;
  background: #fff;
}
.sch-detail__dice[hidden] { display: none; }
.sch-detail__title { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.35; }
.sch-detail__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.sch-detail__body { padding: 14px 18px 18px; font-size: 0.92rem; line-height: 1.7; }
.sch-detail__list { margin: 0 0 12px; }
.sch-detail__list > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px; }
.sch-detail__list > div[hidden] { display: none; }
.sch-detail__list dt { font-weight: 700; color: var(--text-on-light-sub); }
.sch-detail__list dd { margin: 0; }
.sch-detail__openend { margin: -6px 0 12px; font-size: 0.8rem; color: var(--text-on-light-sub); }
.sch-detail__openend[hidden] { display: none; }
.sch-detail__actions { margin: 0; }
.sch-detail__actions .btn { padding: 10px 24px; font-size: 0.92rem; }

/* ---- ヒーローのボタン（「更新情報」と同じ形。ラベルは金色） ---- */
.hero__news--schedule .hero__news-label {
  color: var(--sch-goldtext, #4d3200);
  background: linear-gradient(135deg, #ffd23f, #ffb02a);
}

/* ---- 幅が狭いと 20:00 の目盛りは 19:00・21:00 とぶつかる ---- */
@media (max-width: 900px) {
  .sch-tick--eve { display: none; }
}

/* ---- 棒の名前が読めない幅では横に動かす。最初は夜の位置（JS） ---- */
@media (max-width: 700px) {
  .sch-in { min-width: 880px; }
  .sch-tick--eve { display: inline; }
  .sch.is-all .sch-tick--eve { display: none; }
  .sch.is-all .sch-in { min-width: 0; }
  .sch-jump {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 10px;
    font-family: var(--font-jp);
    font-size: 0.74rem;
    color: var(--text-on-light-sub);
    border-bottom: 1px solid var(--sch-line);
  }
  .sch.is-all .sch-jump { display: none; }
  .sch-jump__hint { margin-right: auto; }
  .sch-jump button {
    padding: 2px 12px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-on-light);
    border: 1.5px solid rgba(13, 78, 163, 0.35);
    border-radius: 999px;
    background: #fff;
  }
  .sch:not(.has-dayprog) .sch-jump button { display: none; }
  .sch-axis__zone,
  .sch-bg__blank { display: none; }
}

/* ---- スマホ幅 ---- */
@media (max-width: 768px) {
  .schedule { padding: 48px 0 12px; }
  .sch-board { --sch-lab: 72px; }
  .sch-tabs { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
  .sch-tab { padding: 7px 0; border-radius: 9px; }
  .sch-tab--all {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
  }
  .sch-tab__date { font-size: 0.98rem; }
  .sch-tab__m { display: none; }
  .sch-tab__n { font-size: 0.72rem; }
  .sch-tab__n small { display: none; }
  .sch-tab--all .sch-tab__n small { display: inline; }
  .sch-filters { justify-content: flex-start; gap: 6px; }
  .sch-filters__label { width: 100%; margin: 0; }
  .sch-chip { font-size: 0.78rem; padding: 5px 10px 5px 8px; }
  .sch-dice { font-size: 0.78rem; padding: 4px 11px 4px 7px; }
  .sch-corenote { font-size: 0.8rem; }
  .sch-g__lab { font-size: 0.68rem; padding: 4px 2px; }
  .sch-g__name { display: none; }
  .sch-g__short { display: inline; }
  .sch-bar__t { font-size: 0.78rem; }
  .sch-ovrow__day { padding: 9px 4px; font-size: 0.78rem; gap: 3px; }
  .sch-cell { font-size: 0.76rem; }
  /* 全日程は横に動かさず幅に収める。目盛りは要るものだけ */
  .sch.is-all .sch-tick--minor,
  .sch.is-all .sch-tick--sub,
  .sch.is-all .sch-axis__coretime { display: none; }
  .sch.is-all .sch-axis__corename { font-size: 0.72rem; }
  .sch.is-all .sch-tick { font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sch-tab { transition: none; }
  .sch-tab:hover { transform: none; }
  .sch-dice.is-rolling svg { animation: none; }
}