/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--cream); isolation: isolate;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(212, 181, 99, .28), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(123, 75, 179, .35), transparent 60%),
    linear-gradient(160deg, #1b1438 0%, var(--navy) 45%, #33276a 100%);
  padding: 96px 0 88px;
}
.hero::before { /* light streaks, echoing the official key visual */
  content: ""; position: absolute; inset: -20%; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 80px, rgba(255,255,255,.05) 80px 82px, transparent 82px 180px);
}
.hero-cards { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-cards svg {
  position: absolute; width: 120px; height: auto; aspect-ratio: 63 / 88; border-radius: 6px; color: rgba(212, 181, 99, .75);
  background: radial-gradient(circle at 50% 45%, #463a8c, #1d1640 75%); border: 2px solid rgba(212, 181, 99, .55);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); animation: float 9s ease-in-out infinite;
}
.hero-cards svg:nth-child(1) { right: 8%; top: 14%; transform: rotate(14deg); }
.hero-cards svg:nth-child(2) { right: 22%; top: 52%; width: 90px; transform: rotate(-10deg); animation-delay: -3s; }
.hero-cards svg:nth-child(3) { right: 3%; bottom: 6%; width: 76px; transform: rotate(24deg); animation-delay: -6s; opacity: .7; }
@keyframes float { 50% { translate: 0 -14px; } }
.hero-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .24em; color: var(--gold-lt); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 4px 2px; }
.hero h1 { font-family: var(--f-serif); font-weight: 800; line-height: 1.05; margin: 20px 0 8px; font-size: clamp(30px, 9.2vw, 96px); letter-spacing: .02em; overflow-wrap: normal; }
.hero h1 .l2 { display: block; color: var(--gold-lt); }
.hero-ja { font-family: var(--f-serif); font-size: clamp(16px, 2.4vw, 22px); font-weight: 700; margin: 0; }
.hero-tagline { margin: 24px 0 0; font-size: 17px; max-width: 34em; color: var(--beige); }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 36px 0 32px; border: 1px solid rgba(212,181,99,.4); background: rgba(20, 14, 44, .45); backdrop-filter: blur(4px); width: fit-content; max-width: 100%; }
.facts div { padding: 14px 24px; border-left: 1px solid rgba(212,181,99,.3); }
.facts div:first-child { border-left: 0; }
.facts dt { font-size: 11px; letter-spacing: .16em; color: var(--gold-lt); }
.facts dd { margin: 0; font-family: var(--f-serif); font-weight: 700; font-size: 20px; line-height: 1.4; }
.facts dd small { font-size: 13px; font-family: var(--f-sans); font-weight: 500; margin-left: 4px; }
.facts dd small.sub { display: block; margin-left: 0; font-size: 12px; color: var(--beige); line-height: 1.4; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) {
  .hero { padding: 56px 0 56px; }
  .facts { grid-template-columns: 1fr; width: 100%; }
  .facts div { border-left: 0; border-top: 1px solid rgba(212,181,99,.3); padding: 10px 16px; }
  .facts div:first-child { border-top: 0; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-cards svg:nth-child(2) { display: none; }
}
@media (max-width: 1000px) { .hero-cards { opacity: .35; } }

/* ---------- concept: reasons ---------- */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 64px; padding: 0; list-style: none; counter-reset: r; }
.reasons li { position: relative; background: var(--white); border-top: 3px solid var(--gold); padding: 28px 24px 24px; box-shadow: var(--shadow); counter-increment: r; }
.reasons li::before { content: "0" counter(r); position: absolute; top: 10px; right: 16px; font-family: var(--f-serif); font-weight: 800; font-size: 40px; color: var(--gold-pale); line-height: 1; }
.reasons h3 { position: relative; font-family: var(--f-serif); font-size: 19px; line-height: 1.5; margin: 0 0 10px; color: var(--navy); }
.reasons p { margin: 0; font-size: 15px; }
.reasons em { font-style: normal; font-weight: 700; background: linear-gradient(transparent 62%, var(--gold-pale) 62%); }
@media (max-width: 860px) { .reasons { grid-template-columns: 1fr; } }

/* ---------- concept: figure frame ---------- */
.figure { background: var(--white); border: 1px solid var(--line); padding: 32px; margin: 0 0 40px; box-shadow: var(--shadow); }
.figure > figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 24px; }
.figure > figcaption b { font-family: var(--f-serif); font-size: 20px; color: var(--navy); }
.figure > figcaption span { font-size: 13px; color: var(--ink-sub); }
.fig-no { font-family: var(--f-serif); font-size: 12px; letter-spacing: .2em; color: var(--gold-ink); }
@media (max-width: 640px) { .figure { padding: 20px 16px; margin-inline: -8px; } }

/* ---------- figure 1: road to worlds ---------- */
.road { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr 0.9fr; align-items: stretch; }
.stage { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; }
.season { position: relative; border: 1px solid var(--line); background: var(--paper); padding: 16px; text-align: center; }
.season .nm { font-family: var(--f-serif); font-weight: 800; font-size: 22px; color: var(--navy); line-height: 1.3; }
.season .pd { font-size: 12px; color: var(--ink-sub); }
.season .rg { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 0 10px; border: 1px solid currentColor; color: var(--navy-3); }
.season.is-focus { background: var(--navy); border-color: var(--gold); outline: 3px solid var(--gold-lt); outline-offset: 3px; }
.season.is-focus .nm, .season.is-focus .pd { color: var(--cream); }
.season.is-focus .rg { color: var(--gold-lt); }
.season.is-focus::before { content: "この大会の対象"; position: absolute; top: -14px; left: 50%; translate: -50% 0; white-space: nowrap; background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 700; padding: 1px 10px; }
.season.is-final { background: linear-gradient(135deg, #2f2560, #241b47); color: var(--gold-lt); border-color: var(--gold); }
.season.is-final .nm { color: var(--gold-lt); }
.season.is-final .pd { color: var(--beige); }
.season.is-final .rg { color: var(--gold-lt); }
.gate { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.gate::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--alert); }
.gate-tag { position: relative; z-index: 1; writing-mode: vertical-rl; background: var(--alert); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .2em; padding: 10px 4px; margin-top: 12px; }
.deck-state { border-radius: var(--radius); padding: 12px 14px; font-size: 13px; line-height: 1.6; background: var(--paper); border: 1px solid var(--line); }
.deck-state.is-full { background: var(--gold-pale); border-color: var(--gold); }
.deck-state.is-risk { background: var(--alert-pale); border-color: rgba(178,58,72,.35); }
.road-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 12px; color: var(--ink-sub); }
.road-legend i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; border: 1px solid; }
.road-legend .lg-full { background: var(--gold-pale); border-color: var(--gold); }
.road-legend .lg-risk { background: var(--alert-pale); border-color: rgba(178,58,72,.35); }
.deck-state { display: flex; align-items: center; }
.lane-label { display: none; }
@media (max-width: 860px) {
  .road { grid-template-columns: 1fr; gap: 0; }
  .stage { grid-template-columns: 42% 1fr; grid-template-rows: auto; gap: 12px; padding: 14px 0; }
  .gate { grid-template-rows: auto; height: 44px; }
  .gate::before { left: 0; right: 0; top: 50%; bottom: auto; border-left: 0; border-top: 2px dashed var(--alert); }
  .gate-tag { writing-mode: horizontal-tb; margin: 0; align-self: center; padding: 2px 12px; }
}

/* ---------- figure 2: focus on season1 ---------- */
.focus { display: grid; grid-template-columns: 1fr 200px; gap: 32px; align-items: center; }
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.venue { border: 1px solid var(--line); padding: 12px 14px; background: var(--paper); }
.venue-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.venue-hd b { font-family: var(--f-serif); font-size: 18px; color: var(--navy); }
.venue-hd time { font-size: 12px; color: var(--ink-sub); }
.venue-status { font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 99px; }
.venue-status.done { background: var(--navy); color: var(--cream); }
.venue-status.todo { border: 1px dashed var(--ink-sub); color: var(--ink-sub); }
.blocks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.block { display: flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 6px; background: var(--white); border: 1px solid var(--line); }
.block .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px dashed var(--silver); }
.block .dot.r1.on { background: var(--gold); border: 0; }
.block .dot.r2.on { background: var(--silver); border: 0; }
.medal {
  position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 30% 25%, #3b3073, var(--navy)); color: var(--cream);
  border: 4px solid var(--gold); box-shadow: 0 0 0 6px var(--gold-pale), var(--shadow);
}
.medal::before { content: ""; position: absolute; right: 100%; top: 50%; width: 32px; border-top: 2px solid var(--gold); }
.medal small { font-size: 11px; letter-spacing: .12em; color: var(--gold-lt); }
.medal strong { font-family: var(--f-serif); font-size: 52px; line-height: 1; }
.medal strong .unit { font-size: 18px; margin-left: 2px; }
.medal .sub { font-size: 12px; margin-top: 4px; }
.focus-note { font-size: 13px; color: var(--ink-sub); margin: 16px 0 0; }
.focus-note .k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; }
.focus-note .k1 { background: var(--gold); } .focus-note .k2 { background: var(--silver); } .focus-note .k0 { border: 1px dashed var(--silver); }
@media (max-width: 860px) {
  .focus { grid-template-columns: 1fr; }
  .venues { grid-template-columns: repeat(2, 1fr); }
  .medal { width: 200px; margin: 0 auto; }
  .medal::before { right: 50%; top: auto; bottom: 100%; width: 0; height: 32px; border-top: 0; border-left: 2px solid var(--gold); }
}
@media (max-width: 420px) { .venues { grid-template-columns: 1fr; } }

/* ---------- watch / schedule ---------- */
.watch { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.when { border: 1px solid rgba(212,181,99,.5); padding: 28px; background: rgba(255,255,255,.03); }
.when-date { font-family: var(--f-serif); font-weight: 800; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; color: var(--gold-lt); }
.when-date small { font-size: .45em; margin-left: 8px; color: var(--cream); }
.when-time { font-size: 18px; font-weight: 700; margin-top: 6px; }
.when-local { font-size: 13px; color: var(--beige); }
.when-venue { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(212,181,99,.3); font-size: 15px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; text-align: center; }
.countdown div { background: rgba(0,0,0,.25); padding: 10px 4px; }
.countdown b { display: block; font-family: var(--f-serif); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 11px; color: var(--beige); letter-spacing: .1em; }
.live-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 4px 12px; background: var(--alert); color: #fff; margin-top: 12px; }
.live-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.live-state.is-ended { background: var(--navy-3); }
.live-state.is-ended::before { display: none; }
.cal { display: flex; flex-wrap: wrap; gap: 8px; }
.cal .btn { min-height: 40px; padding: 6px 16px; font-size: 14px; flex: 1 1 auto; }
.streams { display: grid; gap: 12px; list-style: none; margin: 0 0 28px; padding: 0; }
.stream { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; background: var(--cream); color: var(--ink); padding: 14px 16px; border-left: 4px solid var(--gold); }
.stream-ic { width: 48px; height: 48px; display: grid; place-items: center; background: var(--navy); color: var(--cream); font-weight: 800; font-size: 13px; }
.stream b { display: block; font-size: 16px; color: var(--navy); }
.stream p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-sub); }
.stream .btn { min-height: 40px; padding: 6px 16px; font-size: 14px; }
.stream .pending { white-space: pre-line; font-size: 12px; color: var(--ink-sub); text-align: right; line-height: 1.4; }
.tt { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(212,181,99,.3); }
.tt li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 4px; border-bottom: 1px solid rgba(212,181,99,.2); }
.tt time { font-family: var(--f-serif); font-weight: 700; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.tt .lbl { font-weight: 700; }
.tt .note { display: block; font-size: 12px; color: var(--beige); font-weight: 400; }
.tt .onair { font-size: 10px; font-weight: 700; letter-spacing: .08em; border: 1px solid var(--gold-lt); color: var(--gold-lt); padding: 0 6px; }
.tt li.is-now { background: rgba(212,181,99,.14); }
.tt li.is-now .lbl::after { content: "進行中"; margin-left: 8px; font-size: 11px; background: var(--alert); color: #fff; padding: 1px 6px; }
.watch h3 { font-family: var(--f-serif); font-size: 18px; margin: 0 0 12px; color: var(--gold-lt); }
@media (max-width: 860px) {
  .watch { grid-template-columns: 1fr; }
  .when { padding: 20px 16px; }
  .stream { grid-template-columns: 40px 1fr; }
  .stream-ic { width: 40px; height: 40px; }
  .stream > :last-child { grid-column: 1 / -1; }
  .stream .pending { text-align: left; }
  .stream .btn { width: 100%; }
}

/* ---------- players teaser ---------- */
.progress { max-width: 560px; margin: 0 auto 36px; text-align: center; }
.progress-bar { height: 12px; background: rgba(36,27,71,.12); border-radius: 99px; overflow: hidden; margin: 8px 0; }
.progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--gold)); transition: width 1s; }
.progress b { font-family: var(--f-serif); font-size: 28px; color: var(--navy); }
.center { text-align: center; margin-top: 36px; }