.power-panel { background: linear-gradient(180deg, rgba(16,43,77,.92), rgba(7,17,32,.96)); border: 1px solid rgba(232,193,90,.25); border-radius: 18px; box-shadow: var(--shadow-dark); padding: 20px; color: var(--on-dark); }
.panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em; }
.panel-title span { color: var(--gold); font-weight: 800; }
.panel-title b { font-size: 12px; }
.panel-note { margin: 14px 0 0; font-size: 12px; color: var(--on-dark-soft); }
.rating-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; }
.rating-row + .rating-row { border-top: 1px solid rgba(255,255,255,.1); }
.flag { width: 34px; height: 23px; border-radius: 4px; overflow: hidden; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.22); display: inline-flex; }
.flag--large { width: 44px; height: 30px; border-radius: 6px; }
.rating-row__name b { display: block; font-weight: 900; line-height: 1.15; }
.rating-row__name small { display: block; color: var(--on-dark-soft); font-size: 11px; }
.rating-row__score { font-family: var(--font-num); font-size: 32px; color: var(--gold-2); font-weight: 800; line-height: 1; }
.rating-row__track { grid-column: 1 / -1; height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.rating-row__track span { display: block; height: 100%; border-radius: inherit; }

.guide-card { min-height: 196px; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); text-decoration: none; color: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.guide-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,11,22,.1), rgba(5,11,22,.82)); }
.guide-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .25s ease; }
.guide-card:hover img { transform: scale(1.04); }
.guide-card span { font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--gold); font-weight: 800; }
.guide-card b { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; line-height: 1.25; white-space: nowrap; }
.guide-card svg { width: 16px; height: 16px; flex: none; }
.guide-card--soon { cursor: default; }
.guide-card--soon::after { background: linear-gradient(180deg, rgba(5,11,22,.18), rgba(5,11,22,.88)); }
.guide-card--soon b { color: #f3c765; }

.team-card, .break-card, .schedule-card, .team-file, .goods-card, .article-card, .analysis, .disclaimer, .radar-panel { background: #ffffff; color: #101a2a; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(7,17,32,.06); }
.section--dark .team-card, .section--dark .radar-panel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #f8fafc; }
.team-card { overflow: hidden; }
.team-card__bar { height: 6px; }
.team-card__body { padding: 20px; }
.team-card__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.team-card__head h3 { margin: 0; font-size: 19px; line-height: 1.15; }
.team-card__head p { margin: 2px 0 0; font-family: var(--font-label); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.section--dark .team-card__head p { color: var(--on-dark-soft); }
.verdict { margin-left: auto; flex: none; display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.verdict--favorite { background: rgba(232,193,90,.2); color: #9b6f15; border: 1px solid rgba(232,193,90,.42); }
.verdict--strong { background: rgba(34,160,107,.16); color: #13734a; border: 1px solid rgba(34,160,107,.34); }
.verdict--contender { background: rgba(239,139,60,.16); color: #a55314; border: 1px solid rgba(239,139,60,.34); }
.verdict--darkhorse { background: rgba(26,111,196,.14); color: #14518b; border: 1px solid rgba(26,111,196,.3); }
.section--dark .verdict { color: var(--on-dark); }
.team-card__rating { display: flex; align-items: flex-end; gap: 8px; margin: 16px 0 8px; }
.team-card__rating strong { font-family: var(--font-num); font-size: 56px; line-height: .9; }
.team-card__rating span, .team-card__rating em { color: var(--muted); font-family: var(--font-label); font-style: normal; font-weight: 800; }
.team-card__rating em { margin-left: auto; }
.team-card__body > p { margin: 0; color: var(--soft); font-size: 14px; }
.section--dark .team-card__body > p, .section--dark .team-card__rating span, .section--dark .team-card__rating em { color: var(--on-dark-soft); }
.team-card--compact { min-height: 100%; display: flex; flex-direction: column; }
.team-card--compact .team-card__body { flex: 1; display: grid; grid-template-rows: auto auto minmax(3.2em, 1fr) auto; align-content: start; gap: 12px; }
.team-card--compact .team-card__rating { margin: 8px 0 0; }
.team-card--compact .team-card__rating strong { font-size: clamp(42px, 5vw, 54px); }
.team-card__rating--compact { align-items: center; gap: 12px; }
.team-card__rank {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.065);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.team-card__link { align-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 900; text-decoration: none; }
.team-card__link svg { width: 15px; height: 15px; }
.section--dark .team-card__link { color: #6bb4ff; }

.radar-panel { padding: 20px; color: var(--on-dark); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.radar-panel--compare { display: grid; gap: 14px; align-content: start; min-width: 0; }
.radar { display: block; width: 100%; height: auto; overflow: visible; }
.radar__axis-label { font-family: var(--font-jp); font-size: 14px; font-weight: 900; color: #F8FAFC; fill: #F8FAFC; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 4px; stroke-linejoin: round; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
.section--dark .radar-panel .radar__axis-label { color: #F8FAFC; fill: #F8FAFC; stroke: rgba(0,0,0,.65); stroke-width: 5px; font-size: 15px; paint-order: stroke; text-shadow: 0 1px 6px rgba(0,0,0,.75); filter: drop-shadow(0 1px 6px rgba(0,0,0,.75)); }
@media (max-width: 760px) { .section--dark .radar-panel .radar__axis-label { font-size: 14px; stroke-width: 4.5px; } }
.team-file .radar__axis-label { stroke: #fff; fill: var(--soft); font-size: 12px; }
.radar-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; color: var(--on-dark-soft); }
.radar-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.radar-legend i { width: 11px; height: 11px; border-radius: 3px; }
.rating-compare .group-layout { grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 22px; align-items: stretch; }
.rating-compare .team-grid { gap: 14px; align-items: stretch; }
.rating-compare__link { justify-self: start; width: auto; margin-top: 2px; }

.schedule-card { overflow: hidden; }
.schedule-card__head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(26,111,196,.08), transparent); }
.schedule-card__head b { display: block; font-size: 16px; }
.schedule-card__head span, .schedule-card__head small { color: var(--muted); font-size: 12px; }
.match { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; padding: 15px 18px; }
.match + .match { border-top: 1px solid var(--line); }
.match__date { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.match__date b { display: block; font-weight: 900; }
.match__date span, .match__meta span { display: block; color: var(--muted); font-size: 12px; }
.match__teams { display: flex; align-items: center; gap: 8px; font-weight: 900; min-width: 0; white-space: nowrap; }
.match__teams em { font-family: var(--font-num); color: var(--muted); font-style: normal; padding-inline: 2px; }
.match__meta { text-align: left; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.break-card { position: relative; padding: 22px; overflow: hidden; }
.break-card__num { font-family: var(--font-num); font-size: 60px; line-height: .9; font-weight: 800; }
.break-card__unit { margin-left: 4px; color: var(--muted); font-family: var(--font-label); font-weight: 800; }
.break-card h3 { margin: 12px 0 6px; font-size: 17px; }
.break-card p { margin: 0; color: var(--muted); font-size: 13px; }

.team-file { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; padding: 20px; align-items: center; }
.team-file__note { margin: 14px 0; color: var(--soft); }
.team-file__radar { color: var(--soft); }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sw-grid b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink); }
.sw-grid ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 13px; }
.sw-grid li + li { margin-top: 3px; }

.analysis { padding: clamp(24px, 4vw, 38px); border-left: 5px solid var(--blue); background: linear-gradient(180deg, #edf5ff, #fff); }
.analysis h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); }
.analysis p:last-child { margin: 0; color: var(--soft); font-size: clamp(15px, 1.5vw, 17px); }
.broadcast { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 28px; align-items: center; }
.broadcast h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); }
.broadcast p:not(.eyebrow) { color: var(--on-dark-soft); max-width: 58ch; }
.broadcast__cards { display: grid; gap: 10px; }
.broadcast__cards span { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.06); }
.broadcast__cards svg { width: 22px; height: 22px; color: var(--gold); }
.broadcast__cards small { color: var(--on-dark-soft); }

.goods-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 210px; }
.goods-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--tint); color: var(--navy-700); }
.goods-card__icon svg { width: 22px; height: 22px; }
.goods-card h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.goods-card p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }
.goods-card a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 900; }
.goods-card a svg { width: 14px; height: 14px; flex: none; }

.article-card { overflow: hidden; color: var(--ink); text-decoration: none; }
.article-card__thumb { min-height: 150px; position: relative; display: flex; align-items: flex-start; padding: 14px; background: linear-gradient(135deg, var(--navy-700), var(--blue)); color: #fff; }
.article-card__thumb span { background: rgba(5,11,22,.72); color: var(--gold); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 900; }
.article-card__thumb i { position: absolute; inset: 0; display: grid; place-items: center; }
.article-card__thumb svg { width: 54px; height: 54px; }
.article-card > div:last-child { padding: 16px; }
.article-card small { color: var(--muted); }
.article-card h3 { margin: 4px 0 0; font-size: 17px; line-height: 1.45; }

.disclaimer { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); padding: 20px; color: var(--on-dark-soft); }
.disclaimer h2 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; color: var(--on-dark); font-size: 15px; }
.disclaimer h2 svg { width: 16px; height: 16px; flex: none; }
.disclaimer p { margin: 0; font-size: 12.5px; line-height: 1.85; }

@media (max-width: 980px) {
  .team-file { grid-template-columns: 1fr; }
  .team-file__radar { max-width: 280px; margin-inline: auto; }
  .broadcast { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .guide-card { min-height: 170px; }
  .match { grid-template-columns: 1fr; gap: 8px; }
  .match__teams { flex-wrap: wrap; }
  .match__meta { text-align: left; }
  .schedule-card__head { align-items: flex-start; flex-direction: column; }
  .sw-grid { grid-template-columns: 1fr; }
  .rating-row__score { font-size: 29px; }
  .team-card__head { flex-wrap: wrap; }
  .verdict { margin-left: 0; }
}







/* 20260607 top radar score labels */
.top-radar-scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.top-radar-scores li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: #dce8f8;
  font-weight: 900;
}
.top-radar-scores span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  font-size: 12px;
}
.top-radar-scores i,
.top-radar-group h3 i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
}
.top-radar-scores b {
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 16px;
  line-height: 1;
}
.top-radar-scores--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.top-radar-scores--compact li { padding: 6px 7px; }
.top-radar-scores--compact span { font-size: 11px; }
.top-radar-scores--compact b { font-size: 14px; }
.top-radar-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.top-radar-group {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.top-radar-group h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: 13px;
}
.team-file__radar {
  display: grid;
  gap: 8px;
  justify-items: center;
}
.team-file__radar .top-radar-scores {
  margin-top: 0;
}
.team-file__radar .top-radar-scores li {
  background: rgba(7,17,32,.045);
  border-color: rgba(7,17,32,.1);
  color: #405064;
}
.team-file__radar .top-radar-scores b {
  color: var(--navy-700);
}
@media (max-width: 760px) {
  .rating-compare .group-layout { grid-template-columns: 1fr; }
  .rating-compare .team-grid { grid-template-columns: 1fr; }
  .rating-compare .radar-panel .radar { width: min(82vw, 300px); margin-inline: auto; }
  .top-radar-groups { grid-template-columns: 1fr; }
  .top-radar-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-file__radar .top-radar-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card--compact .team-card__body { grid-template-rows: auto; }
  .rating-compare__link { width: 100%; }
}

/* 20260607 final explicit theme lock */
.wc-section-dark {
  background-color: #07111f !important;
  color: #f8fafc !important;
}
.section--dark.wc-section-dark,
.rating-compare.wc-section-dark {
  background-color: #07111f !important;
  background-image:
    radial-gradient(circle at 78% 8%, rgba(232,193,90,.10), transparent 32%),
    linear-gradient(180deg, #07111f 0%, #081a2f 58%, #07111f 100%) !important;
  color: #f8fafc !important;
}
.wc-section-light {
  background-color: #f4f7fb !important;
  color: #101a2a !important;
}
.wc-card-dark,
.wc-section-dark .team-card,
.wc-section-dark .radar-panel,
.wc-section-dark .disclaimer {
  background-color: #10233a !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.14) !important;
}
.wc-section-dark .section-head h2,
.wc-section-dark h2,
.wc-section-dark h3 {
  color: #f8fafc !important;
}
.wc-section-dark .section-head p:last-child,
.wc-section-dark p,
.wc-section-dark small,
.wc-section-dark li {
  color: #cbd5e1 !important;
}
.wc-section-dark .team-card__rating strong {
  color: inherit;
}

/* 20260607 component palettes for actual light/dark modes */
@media (prefers-color-scheme: light) {
  .team-card,
  .break-card,
  .schedule-card,
  .team-file,
  .goods-card,
  .article-card,
  .analysis,
  .radar-panel {
    background-color: #ffffff !important;
    background-image: none;
    color: #101a2a !important;
    border-color: #dbe5f0 !important;
    box-shadow: 0 8px 24px rgba(7,17,32,.08) !important;
  }
  .section--dark .team-card,
  .section--dark .radar-panel,
  .wc-section-dark .team-card,
  .wc-section-dark .radar-panel,
  .wc-card-dark,
  .disclaimer {
    background-color: #10233a !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
  }
  .team-card__body > p,
  .team-file__note,
  .goods-card p,
  .article-card small,
  .analysis p:last-child {
    color: #405064 !important;
  }
}

@media (prefers-color-scheme: dark) {
  .team-card,
  .break-card,
  .schedule-card,
  .team-file,
  .goods-card,
  .article-card,
  .analysis,
  .radar-panel,
  .disclaimer,
  .wc-card-dark {
    background-color: #10233a !important;
    background-image: none !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
  }
  .break-card h3,
  .goods-card h3,
  .article-card h3,
  .analysis h2,
  .team-card h3,
  .team-file h3 {
    color: #f8fafc !important;
  }
  .team-card__body > p,
  .team-card__rating span,
  .team-card__rating em,
  .team-card__head p,
  .team-file__note,
  .goods-card p,
  .article-card small,
  .analysis p:last-child,
  .schedule-card__head span,
  .schedule-card__head small,
  .match__meta,
  .match__meta span,
  .sw-grid ul {
    color: #cbd5e1 !important;
  }
  .schedule-card__head,
  .match,
  .article-card > div:last-child {
    border-color: rgba(255,255,255,.12) !important;
  }
  .goods-card__icon,
  .article-card__thumb span,
  .verdict,
  .top-radar-scores li,
  .top-radar-group {
    background-color: rgba(255,255,255,.07) !important;
    color: #eaf2ff !important;
    border-color: rgba(255,255,255,.14) !important;
  }
  .team-file__radar .top-radar-scores li {
    background-color: rgba(255,255,255,.07) !important;
    color: #dce8f8 !important;
  }
  .team-file__radar .top-radar-scores b {
    color: #f3c765 !important;
  }
}

/* 20260607 color-mode correction: dark mode must not leave light section canvases white */
@media (prefers-color-scheme: dark) {
  body.page-top .wc-section-light,
  body.page-top .section--light.wc-section-light,
  body.page-top .section--tint.wc-section-light {
    background-color: #07111f !important;
    background-image:
      radial-gradient(circle at 18% 0%, rgba(26,111,196,.12), transparent 30%),
      linear-gradient(180deg, #07111f 0%, #081a2f 58%, #07111f 100%) !important;
    color: #f8fafc !important;
  }

  body.page-top .wc-section-light .section-head h2,
  body.page-top .wc-section-light h2,
  body.page-top .wc-section-light h3 {
    color: #f8fafc !important;
  }

  body.page-top .wc-section-light .section-head p:last-child,
  body.page-top .wc-section-light p,
  body.page-top .wc-section-light small,
  body.page-top .wc-section-light li,
  body.page-top .wc-section-light em,
  body.page-top .wc-section-light .source-note,
  body.page-top .wc-section-light .data-note {
    color: #cbd5e1 !important;
  }
}

/* 20260607 top rating compare: match Group F detail dark card typography in light mode too */
body.page-top .rating-compare .team-card,
body.page-top .rating-compare .radar-panel {
  background: #10233a !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}

body.page-top .rating-compare .team-card h3,
body.page-top .rating-compare .top-radar-group h3,
body.page-top .rating-compare .section-head h2 {
  color: #f8fafc !important;
}

body.page-top .rating-compare .team-card__head p,
body.page-top .rating-compare .team-card__body > p,
body.page-top .rating-compare .team-card__rating span,
body.page-top .rating-compare .team-card__rating em,
body.page-top .rating-compare .radar-legend,
body.page-top .rating-compare .top-radar-scores li,
body.page-top .rating-compare .top-radar-scores span,
body.page-top .rating-compare .section-head p:last-child {
  color: #cbd5e1 !important;
}

body.page-top .rating-compare .team-card__rating--compact strong,
body.page-top .rating-compare .top-radar-scores b {
  color: #f3c765 !important;
}

body.page-top .rating-compare .verdict,
body.page-top .rating-compare .top-radar-group,
body.page-top .rating-compare .top-radar-scores li {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.14) !important;
}

body.page-top .rating-compare .team-card__link {
  color: #6bb4ff !important;
}

/* 20260608 light mode final: top page non-feature bands stay white */
@media (prefers-color-scheme: light) {
  body.page-top,
  body.page-top #root {
    background: #ffffff !important;
    color: #101a2a !important;
  }

  body.page-top .section--light.wc-section-light,
  body.page-top .section--tint.wc-section-light,
  body.page-top .wc-section-light {
    background: #ffffff !important;
    background-image: none !important;
    color: #101a2a !important;
  }

  body.page-top .section--dark.wc-section-dark,
  body.page-top .section--navy.wc-section-dark,
  body.page-top .rating-compare.wc-section-dark,
  body.page-top .page-footer.wc-section-dark {
    background-color: #07111f !important;
    color: #f8fafc !important;
  }

  body.page-top .wc-section-light :is(.team-card, .break-card, .schedule-card, .team-file, .goods-card, .article-card, .analysis, .radar-panel) {
    background: #ffffff !important;
    color: #101a2a !important;
    border-color: #dbe5f0 !important;
  }

  body.page-top .wc-section-light :is(h2, h3, .section-head h2) {
    color: #101a2a !important;
  }

  body.page-top .wc-section-light :is(p, small, li, em, .section-head p:last-child, .source-note, .data-note, .team-card__body > p, .team-file__note, .goods-card p, .article-card small, .analysis p:last-child) {
    color: #405064 !important;
  }
}