/* Editorial pacing: pale introduction, blue journey, dark prize / ranking stages. */
.heading-art {
  width: min(100%, 36rem);
  margin-inline: auto;
  line-height: 1;
}
.heading-art img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.heading-art::after {
  display: none;
}
.heading-art--about {
  width: min(100%, 31rem);
}
.heading-art--road {
  width: min(100%, 37rem);
}
.heading-art--ranking {
  width: min(100%, 39rem);
}
.final-cta .heading-art {
  width: min(100%, 32rem);
}
.gcs-ranking-page .heading-art {
  margin-block: 3rem 2rem;
}
.section-art .scattered-card {
  width: clamp(80px, 13vw, 190px);
  opacity: 0.15;
  z-index: -1;
  filter: saturate(0.8);
}
.section-art {
  isolation: isolate;
}
.section-art .scattered-card--1 {
  left: 2%;
  top: 2%;
  transform: rotate(-18deg);
}
.section-art .scattered-card--2 {
  right: -3%;
  top: 12%;
  width: clamp(120px, 18vw, 260px);
  transform: rotate(22deg);
  opacity: 0.2;
}
.section-art .scattered-card--3 {
  left: -4%;
  top: 45%;
  width: clamp(100px, 16vw, 220px);
  transform: rotate(12deg);
}
.section-art .scattered-card--4 {
  right: 5%;
  top: 54%;
  transform: rotate(-25deg);
}
.section-art .scattered-card--5 {
  left: 15%;
  bottom: 1%;
  width: clamp(65px, 9vw, 130px);
  transform: rotate(28deg);
  opacity: 0.1;
}
.section-art .scattered-card--6 {
  right: 16%;
  bottom: 3%;
  width: clamp(65px, 10vw, 150px);
  transform: rotate(-12deg);
  opacity: 0.1;
}
.section--light .section-art .scattered-card {
  mix-blend-mode: multiply;
  opacity: 0.12;
}
.road .section-art .scattered-card--1,
.hall .section-art .scattered-card--1 {
  top: 16%;
}
.players .section-art .scattered-card--4 {
  top: 66%;
}
.prizes .section-art .scattered-card {
  opacity: 0.18;
}
@media (max-width: 600px) {
  .heading-art {
    width: 94%;
  }
  .section-art .scattered-card {
    opacity: 0.1;
  }
  .section-art .scattered-card--2 {
    right: -12%;
  }
  .section-art .scattered-card--3 {
    left: -12%;
  }
  .section-art .scattered-card--5,
  .section-art .scattered-card--6 {
    display: none;
  }
  .section--light .section-art .scattered-card {
    opacity: 0.08;
  }
}
.section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.section > .shell {
  position: relative;
  z-index: 1;
}
.section-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.section-art img {
  position: absolute;
  max-width: none;
  height: auto;
  user-select: none;
}
.section-art__character {
  width: clamp(440px, 48vw, 800px);
  opacity: 0.24;
  filter: saturate(0.85);
}
.section-art__character--left {
  left: -60px;
  mask-image:
    linear-gradient(to right, #000 55%, transparent 100%),
    linear-gradient(to bottom, #000 75%, transparent);
  mask-composite: intersect;
}
.section-art__character--right {
  right: -60px;
  mask-image:
    linear-gradient(to left, #000 55%, transparent 100%),
    linear-gradient(to bottom, transparent, #000 12%);
  mask-composite: intersect;
}
.section-art__card {
  width: clamp(170px, 24vw, 340px);
  opacity: 0.12;
  border-radius: 16px;
}
.section-art__card--right {
  right: -70px;
  bottom: 100px;
  transform: rotate(17deg);
}
.section-art__card--left {
  left: -100px;
  top: 220px;
  transform: rotate(-18deg);
}
.section.section--light {
  --paper-100: #15233b;
  --paper-200: #253753;
  --paper-300: #3d506a;
  color: #15233b;
  background:
    radial-gradient(ellipse at 90% 20%, #dddcf3 0, transparent 55%),
    linear-gradient(135deg, #f9fafc, #e7f1f5);
}
.competition-atmosphere .section.about.section--light {
  background:
    radial-gradient(ellipse at 0 20%, #dcecf1, transparent 60%),
    linear-gradient(135deg, #fbfcff, #eeebf6);
}
.section--light .section-heading__en {
  color: rgb(56 70 108 / 8%);
}
.section--light .section-heading__ja {
  color: #15233b;
  text-shadow: none;
}
.section--light .section-art__character {
  opacity: 0.2;
  mix-blend-mode: multiply;
}
.section--light .section-art__card {
  opacity: 0.12;
  mix-blend-mode: multiply;
}
.section--light .report-feature__label {
  color: #514194;
}
.section--light .report-feature figcaption,
.section--light .report-feature__copy small {
  color: #43536a;
}
.section--light .button--line {
  color: #253753;
  background: rgb(255 255 255 / 65%);
  border-color: #7989a5;
}
.section--light .button--line:hover {
  background: #fff;
}
.section--light .report-feature img {
  border-color: #b7bfd2;
  box-shadow: 0 16px 45px #26345320;
}
.section--light .about-poem {
  color: #253753;
}
.prizes.section--light {
  background:
    radial-gradient(ellipse at 50% 50%, #fff7dd, transparent 50%),
    linear-gradient(135deg, #e9eef8, #f9fafc 50%, #e9e5f6);
}
.section--light .prize-slide figcaption {
  color: #29344a;
  background: #ffffffcf;
}
.section--light .prize-slide--champion figcaption span,
.section--light .prize-slide--champion figcaption strong {
  color: #775314;
}
.section--light .prize-showcase__controls {
  color: #253753;
}
.section--light .prize-showcase__status strong {
  color: #6444b5;
}
.section--light .prize-showcase__arrow {
  color: #253753;
  background: #ffffffc9;
  border-color: #73809a;
}
.section--light .prize-showcase__dots button {
  background: #9ba6bd;
}
.section--light .prize-showcase__dots button.is-current {
  background: #6444b5;
}
.league-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  margin: 0 0 2rem;
  list-style: none;
}
.league-choices li {
  padding: 1.6rem 1.25rem;
  border: 1px solid #616288;
  border-top: 3px solid #9d90d1;
  background: linear-gradient(135deg, #172238ed, #161325ed);
}
.league-choices span {
  font-size: 0.8rem;
  color: #c0b4e5;
}
.league-choices h3 {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0.65rem 0;
}
.league-choices p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #ccd2e1;
  margin: 0;
}
.gcs-invitation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 58rem;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ad945c;
  background: linear-gradient(100deg, #252035ed, #17131deb);
}
.gcs-invitation img {
  width: 170px;
  height: auto;
  flex-shrink: 0;
}
.gcs-invitation span {
  color: #e5c97e;
  font-size: 0.9rem;
}
.gcs-invitation h3 {
  font-size: 1.5rem;
  margin: 0.5rem 0;
}
.gcs-invitation p {
  margin: 0;
  color: #ddd6c7;
  line-height: 1.8;
}
.road .road-guidance {
  border-left-color: #b1a1d7;
  background: #121b2edb;
}
.tournament.section--light .tournament-facts {
  background: #ffffffde;
  border: 1px solid #b9c4d4;
  padding: 0.5rem 1.5rem;
}
.tournament .tournament-facts > div {
  border-color: #ccd4de;
}
.tournament .tournament-facts dt,
.tournament .tournament-facts dd,
.tournament .tournament-facts dd small,
.tournament .tournament-facts time,
.tournament .tournament-date time strong,
.tournament .tournament-date time span {
  font-size: 1rem;
  line-height: 1.8;
  color: #253753;
}
.tournament .tournament-facts dt {
  font-weight: 700;
}
.tournament .tournament-facts dd,
.tournament .tournament-date time strong {
  font-weight: 400;
}
.tournament .tournament-facts dd small {
  display: block;
  color: #506079;
}
.tournament .tournament-date time {
  gap: 0.35rem;
}
@media (max-width: 900px) {
  .league-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .section--light .section-art__character {
    opacity: 0.16;
  }
  .section-art__card {
    opacity: 0.07;
  }
  .league-choices {
    gap: 0.65rem;
  }
  .league-choices li {
    padding: 1.2rem 0.8rem;
  }
  .league-choices h3 {
    font-size: 1rem;
  }
  .league-choices p {
    font-size: 0.85rem;
  }
  .gcs-invitation {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem;
  }
  .gcs-invitation h3 {
    font-size: 1.25rem;
  }
  .tournament.section--light .tournament-facts {
    padding: 0.25rem 1rem;
  }
}

.competition-atmosphere .road.section--light {
  background: linear-gradient(155deg, #c6d6e5, #dcd9eb 60%, #b2bfd5);
}
.road.section--light::before {
  height: 1px;
  background: #99acc255;
  box-shadow: none;
}
.road.section--light .road__intro {
  color: #283d58;
}
.league-route {
  position: relative;
  max-width: 56rem;
  margin: 0 auto 2.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
.league-route li {
  position: relative;
  display: grid;
  grid-template-columns: 14rem 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 78px;
  padding: 0.9rem 1.7rem;
  background: #f8faffed;
  border: 1px solid #8b9db4;
  border-left: 4px solid #7773a9;
  box-shadow: 0 5px 20px #3144620a;
}
.league-route li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  width: 10px;
  height: 10px;
  border-right: 2px solid #687393;
  border-bottom: 2px solid #687393;
  transform: translateX(-50%) rotate(45deg);
}
.league-route h3 {
  font-size: 1.25rem;
  margin: 0;
  color: #22344c;
}
.league-route p {
  margin: 0;
  font-size: 0.95rem;
  color: #40536e;
  line-height: 1.7;
}
.league-route .league-route__goal {
  background: linear-gradient(100deg, #1d2031, #30273b);
  border-color: #d9bd75;
  min-height: 112px;
}
.league-route__goal img {
  width: 150px;
  height: auto;
  justify-self: center;
}
.league-route__goal span {
  color: #efd694;
  font-weight: 800;
  font-size: 1.2rem;
}
.league-route__goal p {
  color: #ded9e9;
  margin-top: 0.35rem;
}
.prizes {
  background:
    radial-gradient(ellipse at 50% 50%, #2a2116 0, transparent 52%), #030407;
}
.players {
  background:
    radial-gradient(ellipse at 95% 70%, #362345, transparent 62%),
    linear-gradient(150deg, #080a13, #181b31);
}
.players::before {
  height: 1px;
  background: #aa8fbe55;
  box-shadow: none;
}
.tournament.section--light {
  background: linear-gradient(115deg, #dee5e8, #f4f3ed 70%, #e0dedc);
}
.hall {
  background:
    radial-gradient(ellipse at 0 80%, #143a48, transparent 65%), #080f1b;
}
.prize-slide {
  position: relative;
}
.prize-award-title {
  display: block;
  width: 95%;
  height: auto;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 4px 15px #dfb35140);
}
.prize-warrior-title {
  display: block;
  width: 84%;
  height: auto;
  margin: 0 auto 1.5rem;
  filter: invert(1);
  opacity: 0.7;
}
.prize-showcase__track {
  align-items: flex-start;
}
@media (max-width: 600px) {
  .league-route li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    min-height: 80px;
  }
  .league-route h3 {
    font-size: 1.08rem;
  }
  .league-route p {
    font-size: 0.86rem;
  }
  .league-route .league-route__goal {
    grid-template-columns: 90px 1fr;
    gap: 0.8rem;
  }
  .league-route__goal img {
    width: 90px;
  }
  .league-route__goal span {
    font-size: 0.98rem;
  }
}

/* Heading rule: English / Japanese artwork / supporting text in normal flow.
   No overlaps, section-specific shifts or absolute centering. */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 0;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.section-heading .section-heading__en {
  position: static;
  z-index: auto;
  transform: none;
  max-width: 100%;
  white-space: normal;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: #aab7d157;
  margin: 0;
  order: 0;
}
.section-heading .heading-art {
  margin: 0;
  width: auto;
  max-width: 100%;
  order: 1;
}
.section-heading .heading-art img {
  width: auto;
  max-width: 100%;
  height: clamp(48px, 7vw, 88px);
  object-fit: contain;
}
.section-heading .heading-art--ranking img {
  height: clamp(88px, 12vw, 150px);
}
.section-heading > p {
  margin: 0;
  max-width: 48rem;
  order: 2;
}
.final-cta .section-heading > p {
  margin: 0;
  max-width: 48rem;
}
.section--light .section-heading__en {
  color: #46597966;
}
.section-heading--news {
  align-items: flex-start;
  text-align: left;
  margin-bottom: 0;
  gap: 0.4rem;
}
.section-heading--news .section-heading__en {
  font-size: 1.3rem;
}
.section-heading--news .section-heading__ja {
  font-size: 1.5rem;
}
.section-heading--news .section-heading__ja::after {
  display: none;
}
.report-feature__photos {
  display: block;
}
.competition-atmosphere .road {
  background:
    radial-gradient(ellipse at 100% 75%, #20132e, transparent 70%), #070a10;
}
.road .road__intro {
  color: #d8dfec;
}
.league-route li {
  --league: #d85a40;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--league), #15151e 45%);
  border-left: 5px solid var(--league);
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--league), #10121c 84%),
    #10121cee 75%
  );
  box-shadow:
    inset 0 1px #ffffff0c,
    0 7px 25px #0002;
}
.league-route .league-route__first {
  --league: #f16b4e;
}
.league-route .league-route__beginner {
  --league: #a2db62;
}
.league-route .league-route__main {
  --league: #64cce9;
}
.league-route .league-route__master {
  --league: #bb8be6;
}
.league-route h3 {
  color: var(--league);
  padding-left: 0.6rem;
  border-left: 1px solid color-mix(in srgb, var(--league), transparent 65%);
}
.league-route p {
  color: #d5dcea;
}
.league-route li:not(:last-child)::after {
  border-color: #a193bc;
}
.league-route .league-route__goal {
  --league: #e6c877;
  border-color: #bc9956;
}

/* Keep cards in the lower half, outside the portrait head zone. */
.section-art .scattered-card--1 {
  top: auto;
  bottom: 1%;
  left: 0;
}
.section-art .scattered-card--2 {
  top: auto;
  bottom: 0;
  right: 2%;
}
.section-art .scattered-card--3 {
  top: auto;
  bottom: 20%;
  left: 2%;
}
.section-art .scattered-card--4 {
  top: auto;
  bottom: 18%;
  right: 2%;
}
.section-art .scattered-card--5 {
  bottom: 3%;
  left: 22%;
}
.section-art .scattered-card--6 {
  bottom: 2%;
  right: 22%;
}
.road .section-art .scattered-card--1,
.hall .section-art .scattered-card--1,
.players .section-art .scattered-card--4 {
  top: auto;
}
.official-events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin: 2rem 0;
  text-align: left;
}
.official-event-card {
  display: block;
  min-width: 0;
  border: 1px solid #566078;
  background: #101522;
  color: #fff;
  text-decoration: none;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.official-event-card:hover {
  transform: translateY(-4px);
  border-color: #b291e7;
}
.official-event-card:focus-visible {
  outline: 3px solid #bca0f0;
  outline-offset: 4px;
}
.official-event-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: contain;
  background: #080b12;
}
.official-event-card > div {
  padding: 1.2rem;
}
.official-event-card span {
  display: inline-block;
  font-size: 0.75rem;
  color: #d7c0ff;
  border: 1px solid #8464b0;
  padding: 0.15rem 0.5rem;
}
.official-event-card time {
  display: block;
  color: #c2cee0;
  font-size: 0.9rem;
  margin-top: 0.8rem;
}
.official-event-card h3 {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0.6rem 0;
}
.final-cta .official-event-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #c2cee0;
}
.final-cta__inner {
  max-width: 1200px;
}
@media (max-width: 650px) {
  .official-events {
    grid-template-columns: 1fr;
  }
  .section-art .scattered-card--3,
  .section-art .scattered-card--4 {
    bottom: 10%;
  }
  .section-heading {
    gap: 0.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .official-event-card {
    transition: none;
  }
}

/* Slow spectrum transitions; decorative layers never receive pointer events. */
section.section::before {
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 2;
  background: linear-gradient(
    100deg,
    #ab63f3,
    #55baff,
    #72e5d4,
    #f1d087,
    #ec8fc9,
    #ab63f3
  );
  background-size: 300% 100%;
  box-shadow: 0 0 20px #b48af333;
  animation: section-spectrum 18s ease-in-out infinite alternate;
}
@keyframes section-spectrum {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
.section-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 4% 20%, #bb79ff26, transparent 60%),
    radial-gradient(ellipse at 94% 42%, #64dce323, transparent 58%),
    radial-gradient(ellipse at 30% 95%, #efaa6f1c, transparent 60%);
}
/* Independent cells retain clearance while seeded offsets, rotations and sizes
   vary the composition across sections without jumping on every page load. */
.section-art .card-field {
  position: absolute;
  inset: auto 0 12px;
  height: 360px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 40px 12px;
  padding: 14px 5%;
  z-index: -1;
  align-items: center;
  justify-items: center;
}
.section .section-art .card-field .scattered-card {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 76px;
  object-fit: contain;
  opacity: 0.15;
  transform: translate(var(--scatter-x, 0px), var(--scatter-y, 0px))
    rotate(var(--card-angle, -12deg)) scale(var(--scatter-scale, 1));
}
.card-field .scattered-card--2 {
  --card-angle: 16deg;
}
.card-field .scattered-card--3 {
  --card-angle: -8deg;
}
.card-field .scattered-card--4 {
  --card-angle: 12deg;
}
.card-field .scattered-card--5 {
  --card-angle: -16deg;
}
.card-field .scattered-card--6 {
  --card-angle: 8deg;
}
.section--light .section-art .card-field .scattered-card {
  opacity: 0.1;
}
.section-art .section-art__character {
  top: auto;
  bottom: 260px;
  max-height: calc(100% - 300px);
  object-fit: contain;
  object-position: bottom;
}
.section-art .section-art__character[data-portrait='okita'] {
  width: clamp(700px, 70vw, 1080px);
  height: auto;
  left: 0;
  top: 64px;
  bottom: auto;
  max-height: none;
}

/* Broad rotating light behind the cutout figures and title; no borrowed artwork. */
.hero-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
.hero-orbit::before,
.hero-orbit::after {
  content: '';
  position: absolute;
  width: 150vmax;
  height: 150vmax;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(
    from 15deg,
    transparent 0deg,
    #ab8dff33 35deg,
    #dddcffbb 49deg,
    transparent 72deg,
    transparent 164deg,
    #68d9ff70 193deg,
    transparent 221deg,
    transparent 294deg,
    #ffd79f66 319deg,
    transparent 342deg
  );
  mask-image: radial-gradient(circle, #000 2%, #000b 26%, transparent 60%);
  animation: hero-orbit-turn 32s linear infinite;
}
.hero-orbit::after {
  width: 95vmax;
  height: 95vmax;
  opacity: 0.7;
  background:
    radial-gradient(ellipse at 65% 33%, #e5efffb3, transparent 18%),
    radial-gradient(ellipse at 27% 67%, #b69cfa80, transparent 25%);
  animation-duration: 23s;
  animation-direction: reverse;
}
.hero.has-motion-layers .hero__ambient {
  opacity: 0.7;
}
.hero.is-motion-paused .hero-orbit::before,
.hero.is-motion-paused .hero-orbit::after {
  animation-play-state: paused;
}
@keyframes hero-orbit-turn {
  to {
    transform: rotate(360deg);
  }
}

/* Center arrows on the displayed card, leaving its award/name artwork above. */
.prize-showcase {
  --slide-width: min(66vw, 28rem);
}
.prize-showcase > .prize-showcase__arrow {
  position: absolute;
  z-index: 5;
  top: var(--prize-arrow-y, 60%);
  translate: 0 -50%;
  width: clamp(44px, 6vw, 68px);
  height: clamp(52px, 7vw, 80px);
  border: 0;
  background: transparent;
  font-size: 0;
  color: #eed8a1;
  filter: drop-shadow(0 2px 8px #000);
  padding: 10px;
}
.prize-showcase > [data-prize-prev] {
  right: calc(50% + var(--slide-width) / 2 + 4px);
}
.prize-showcase > [data-prize-next] {
  left: calc(50% + var(--slide-width) / 2 + 4px);
}
.prize-showcase__arrow::before {
  content: '';
  width: 22px;
  height: 22px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}
.prize-showcase__arrow[data-prize-prev]::before {
  transform: rotate(-135deg);
}
.prize-showcase > .prize-showcase__arrow:hover {
  color: #fff4d5;
  background: #b1976020;
}
.prize-showcase > .prize-showcase__arrow:focus-visible {
  outline: 2px solid #eed8a1;
  outline-offset: 2px;
}
.prize-showcase__controls {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}
@media (min-width: 48rem) {
  .prize-showcase {
    --slide-width: min(46vw, 31rem);
  }
}
@media (max-width: 767px) {
  .section-art .card-field .scattered-card--5,
  .section-art .card-field .scattered-card--6 {
    display: none;
  }
  .section-art .card-field {
    height: 280px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 7%;
    gap: 24px 26px;
  }
  .section .section-art .card-field .scattered-card {
    max-width: 96px;
    max-height: 68px;
    opacity: 0.1;
  }
  .section-art .section-art__character {
    --portrait-bottom: 230px;
    width: min(88vw, 380px);
    bottom: var(--portrait-bottom);
    max-height: calc(100% - var(--portrait-bottom) - 80px);
    opacity: 0.14;
  }
  .section-art .section-art__character--left {
    left: 2%;
  }
  .section-art .section-art__character--right {
    right: 2%;
  }
  .about .section-art__character--left {
    --portrait-bottom: 360px;
  }
  .road .section-art__character--left {
    --portrait-bottom: 390px;
  }
  .players .section-art__character--left {
    --portrait-bottom: 360px;
  }
  .section-art .section-art__character[data-portrait='okita'] {
    width: min(116vw, 660px);
    height: auto;
    left: 0;
    top: 150px;
    bottom: auto;
    max-height: none;
    opacity: 0.18;
  }
  .hall .section-art__character--right {
    right: 0;
  }
  .section-heading .heading-art img {
    height: clamp(36px, 10.5vw, 48px);
  }
  .section-heading .heading-art--ranking img {
    height: clamp(72px, 21vw, 96px);
  }
  .hero-orbit::before {
    opacity: 0.7;
  }
  .prize-showcase > .prize-showcase__arrow {
    padding: 8px;
    width: 44px;
  }
  .prize-showcase__arrow::before {
    width: 18px;
    height: 18px;
  }
  .prize-showcase > [data-prize-prev] {
    right: calc(50% + var(--slide-width) / 2);
  }
  .prize-showcase > [data-prize-next] {
    left: calc(50% + var(--slide-width) / 2);
  }
}
@media (prefers-reduced-motion: reduce) {
  section.section::before,
  .hero-orbit::before,
  .hero-orbit::after {
    animation: none;
  }
}

/* Mobile portraits: reserve a clear face area between heading and content.
   JS aligns each source image's face to this space rather than its outer bounds. */
@media (max-width: 767px) {
  .section.has-mobile-portraits > .shell > .section-heading {
    margin-bottom: 190px;
  }
  .section.has-mobile-portraits .section-art .section-art__character {
    width: var(--mobile-portrait-width);
    height: auto;
    max-height: none;
    left: var(--mobile-portrait-left);
    right: auto;
    top: var(--mobile-portrait-top);
    bottom: auto;
    opacity: 0.36;
    mix-blend-mode: normal;
    mask-image: radial-gradient(
      ellipse at var(--face-x) var(--face-y),
      #000 0 18%,
      #0008 36%,
      transparent 69%
    );
    mask-composite: add;
  }
  .section--light.has-mobile-portraits .section-art .section-art__character {
    opacity: 0.48;
    mix-blend-mode: multiply;
  }
  .section.has-mobile-portraits .section-art__character[data-portrait='okita'] {
    opacity: 0.42;
  }
}

@media (min-width: 768px) {
  .road .section-art__character[data-portrait='takasugi'] {
    left: -110px;
  }
  .road .section-art__character[data-portrait='yoshida'] {
    right: -110px;
  }
}

/* About keeps the heading and logo together instead of reserving a portrait row. */
.about > .about__inner > .section-heading {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 767px) {
  .about.has-mobile-portraits > .shell > .section-heading {
    margin-bottom: 1.5rem;
  }
}

/* Desktop prize cards: keep the complete section within one viewport.
   The award and warrior names already appear in the supplied card artwork, so
   the separate title images are omitted here to avoid showing them twice. */
@media (min-width: 48rem) {
  .prizes {
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(0.75rem, 2svh, 1.25rem);
  }
  .prizes .section-heading {
    gap: clamp(0.3rem, 0.8svh, 0.5rem);
    margin-bottom: clamp(0.5rem, 1.2svh, 0.75rem);
  }
  .prizes .section-heading__en {
    font-size: clamp(1.15rem, 2.4svh, 1.45rem);
  }
  .prizes .section-heading .heading-art img {
    height: clamp(2.5rem, 6.5svh, 3.25rem);
  }
  .prizes .section-heading > p {
    font-size: clamp(0.82rem, 2svh, 1rem);
    line-height: 1.45;
  }
  .prize-showcase {
    --slide-width: min(26rem, calc(60svh * 1890 / 2639));
  }
  .prize-award-title,
  .prize-warrior-title {
    display: none;
  }
  .prize-showcase__track {
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
  }
}

/* Desktop ranking: keep the heading, the top 5 and the link within one viewport.
   Sized in svh so short laptop screens compress instead of overflowing. */
.players__ranking-link {
  display: flex;
  width: max-content;
  margin-left: auto;
}

@media (min-width: 48rem) {
  .players {
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(1.5rem, 4svh, 3.5rem);
  }
  .players .section-heading {
    min-height: 0;
    gap: clamp(0.3rem, 0.8svh, 0.5rem);
    margin-bottom: clamp(0.6rem, 1.6svh, 1.25rem);
  }
  .players .section-heading .heading-art--ranking img {
    height: clamp(56px, 11svh, 120px);
  }
  .players .section-heading > p {
    margin-top: clamp(0.4rem, 1.2svh, 1rem);
    font-size: clamp(0.8rem, 1.8svh, 1rem);
    line-height: 1.5;
  }
  .players .gcs-ranking-status {
    margin: 0;
    font-size: clamp(0.72rem, 1.5svh, 0.85rem);
    line-height: 1.5;
  }
  .players .gcs-ranking-list {
    margin: clamp(0.5rem, 1.5svh, 1.1rem) 0 clamp(0.75rem, 2svh, 1.5rem);
    gap: clamp(0.35rem, 1svh, 0.8rem);
  }
  .players .gcs-rank-card {
    min-height: clamp(46px, 7.5svh, 72px);
    padding-block: clamp(0.35rem, 1svh, 0.8rem);
  }
  .players .gcs-rank-card--1 {
    min-height: clamp(62px, 10.5svh, 104px);
  }
  .players .gcs-rank-card--2,
  .players .gcs-rank-card--3 {
    min-height: clamp(54px, 9svh, 88px);
  }
  .players .gcs-rank-card__rank {
    font-size: clamp(1.3rem, 3svh, 2rem);
  }
  .players .gcs-rank-card--1 .gcs-rank-card__rank {
    font-size: clamp(1.9rem, 4.6svh, 3.2rem);
  }
  .players .gcs-rank-card__name {
    font-size: clamp(0.95rem, 2svh, 1.2rem);
  }
  .players .gcs-rank-card--1 .gcs-rank-card__name,
  .players .gcs-rank-card--2 .gcs-rank-card__name,
  .players .gcs-rank-card--3 .gcs-rank-card__name {
    font-size: clamp(1.1rem, 2.6svh, 1.6rem);
  }
  .players .gcs-rank-card__points {
    font-size: clamp(1.3rem, 3svh, 2rem);
  }
}

/* Desktop road: keep the heading, the five league steps and the CTA within one
   viewport. Sized in svh so short laptop screens compress instead of overflowing. */
@media (min-width: 48rem) {
  .road {
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(1.25rem, 3.5svh, 3rem);
  }
  .road .section-heading {
    gap: clamp(0.25rem, 0.8svh, 0.6rem);
    margin-bottom: clamp(0.5rem, 1.6svh, 1.25rem);
  }
  .road .section-heading__en {
    font-size: clamp(1.15rem, 2.4svh, 1.6rem);
  }
  .road .section-heading .heading-art img {
    height: clamp(2.5rem, 6.5svh, 3.5rem);
  }
  .road .road__intro {
    margin-bottom: clamp(0.75rem, 2.2svh, 1.75rem);
    font-size: clamp(0.85rem, 1.9svh, 1.05rem);
    line-height: 1.7;
  }
  .league-route {
    gap: clamp(0.75rem, 1.8svh, 1.1rem);
    margin-bottom: clamp(0.75rem, 2.4svh, 1.75rem);
  }
  .league-route li {
    min-height: 0;
    padding-block: clamp(0.4rem, 1.3svh, 0.9rem);
  }
  .league-route h3 {
    font-size: clamp(1rem, 2.2svh, 1.25rem);
  }
  .league-route p {
    font-size: clamp(0.82rem, 1.8svh, 0.95rem);
    line-height: 1.6;
  }
  .league-route .league-route__goal {
    min-height: 0;
    padding-block: clamp(0.45rem, 1.5svh, 1rem);
  }
  .league-route__goal img {
    width: clamp(6rem, 14svh, 9.375rem);
  }
  .league-route__goal span {
    font-size: clamp(0.95rem, 2.2svh, 1.2rem);
  }
  .league-route__goal p {
    margin-top: 0.2rem;
  }
  .league-route li:not(:last-child)::after {
    top: calc(100% + 2px);
    width: 8px;
    height: 8px;
  }
}