:root {
  --ink-1000: #060b13;
  --ink-950: #0b1220;
  --ink-900: #101a2b;
  --night-800: #14223a;
  --night-650: #2a3a55;
  --paper-100: #f4f0e6;
  --paper-200: #e8e2d5;
  --paper-300: #d8d2c6;
  --gold-500: #c9a24a;
  --gold-300: #e0c77f;
  --verm-600: #b83a2e;
  --white: #fff;
  --font-ui:
    -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic',
    'Noto Sans JP', sans-serif;
  --font-display: var(--font-ui);
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --radius-1: 4px;
  --radius-2: 8px;
  --shadow-raised: 0 1rem 2.5rem rgb(0 0 0 / 24%);
  --content: 75rem;
  --text: 45rem;
  --header-h: 3.5rem;
  --z-header: 30;
  --z-sticky: 40;
  --z-dialog: 100;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  min-width: 20rem;
  color: var(--paper-100);
  background: var(--ink-950);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.75;
}
body:has(dialog[open]) {
  overflow: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
dl,
dd {
  margin-top: 0;
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2rem, 8.3vw, 3.25rem);
  line-height: 1.35;
}
:focus-visible {
  outline: 3px solid var(--paper-100);
  outline-offset: 3px;
}
.hall :focus-visible {
  outline-color: var(--gold-300);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--paper-100);
  color: var(--ink-950);
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.shell {
  width: min(calc(100% - 2rem), var(--content));
  margin-inline: auto;
}
.section {
  padding-block: var(--s-24);
  border-top: 1px solid rgb(244 240 230 / 10%);
}
.eyebrow {
  margin-bottom: var(--s-3);
  color: var(--gold-300);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.4;
}
.section-header {
  max-width: var(--text);
  margin-bottom: var(--s-12);
}
.section-header h2 {
  margin-bottom: var(--s-4);
}
.section-header > p:last-child {
  color: var(--paper-300);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: 1rem;
  border-bottom: 1px solid rgb(244 240 230 / 10%);
  background: rgb(6 11 19 / 88%);
  backdrop-filter: blur(12px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  line-height: 1;
}
.brand__home {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.brand__home {
  display: flex;
  align-items: center;
}
.brand__home-logo {
  display: block;
  width: auto;
  height: 1.9rem;
}
.brand__home:hover,
.brand__home:focus-visible {
  opacity: 0.8;
}
.brand__gcs-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand__pending {
  padding-left: 0.65rem;
  border-left: 1px solid var(--night-650);
  color: var(--paper-300);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
}
.brand__pending b {
  display: block;
  margin-top: 0.2rem;
  color: var(--gold-300);
  font-size: 0.5rem;
}
.menu-button {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  color: var(--paper-100);
  background: transparent;
  cursor: pointer;
}
.menu-button i {
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform 220ms ease;
}
.menu-button[aria-expanded='true'] i:first-of-type {
  transform: translateY(3.5px) rotate(45deg);
}
.menu-button[aria-expanded='true'] i:last-of-type {
  transform: translateY(-3.5px) rotate(-45deg);
}
.global-nav {
  position: fixed;
  inset: var(--header-h) 0 auto;
  display: none;
  padding: 1rem;
  background: var(--ink-900);
  border-bottom: 1px solid var(--night-650);
}
.global-nav.is-open {
  display: grid;
}
.global-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid rgb(244 240 230 / 10%);
  text-decoration: none;
  font-weight: 700;
}
.global-nav .nav-cta {
  margin-top: 1rem;
  justify-content: center;
  border: 1px solid var(--gold-500);
  color: var(--ink-950);
  background: var(--gold-500);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header-h) + 1.5rem) 0 4.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 48%, rgb(42 58 85 / 50%), transparent 32%),
    linear-gradient(180deg, var(--ink-1000), var(--ink-950));
}
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 12rem;
  background: linear-gradient(transparent, var(--ink-950));
  pointer-events: none;
}
.hero__lines {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(
      115deg,
      transparent 46%,
      var(--gold-500) 46.1%,
      transparent 46.35%
    ),
    linear-gradient(
      65deg,
      transparent 76%,
      var(--night-650) 76.1%,
      transparent 76.35%
    );
}
.hero__content {
  position: relative;
  z-index: 1;
}
.hero__edition {
  margin-bottom: var(--s-6);
  color: var(--paper-300);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.hero h1 {
  margin-bottom: var(--s-4);
  font-size: clamp(2.75rem, 12vw, 4.25rem);
  line-height: 1.16;
}
.hero__lead {
  margin-bottom: var(--s-6);
  color: var(--paper-300);
  font-size: 0.95rem;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: var(--s-4);
}
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 180ms ease,
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}
.button--prominent {
  min-width: min(100%, 16rem);
  min-height: 60px;
  padding: 0.9rem 1.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.button:hover {
  transform: translateY(-2px);
}
.button--primary {
  color: var(--ink-950);
  background: var(--gold-500);
}
.button--line {
  border-color: var(--night-650);
  background: rgb(11 18 32 / 55%);
}
.button--line:hover {
  border-color: var(--gold-500);
}
.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-underline-offset: 0.3em;
}
.hero-player {
  position: relative;
  width: min(78vw, 18rem);
  max-width: 30rem;
  margin-left: auto;
  border: 1px solid var(--night-650);
  background: var(--ink-900);
  box-shadow: var(--shadow-raised);
}
.hero-player::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500) 0 22%, transparent 22%);
}
.hero-player__index {
  position: absolute;
  z-index: 1;
  top: -3.1rem;
  right: -0.2rem;
  color: rgb(244 240 230 / 7%);
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
}
.asset-placeholder {
  display: grid;
  place-content: center;
  aspect-ratio: 4 / 5;
  padding: 1rem;
  color: var(--paper-300);
  text-align: center;
  background:
    repeating-linear-gradient(
      120deg,
      rgb(244 240 230 / 2%) 0 1px,
      transparent 1px 22px
    ),
    radial-gradient(circle at 50% 35%, rgb(201 162 74 / 9%), transparent 30%),
    var(--ink-1000);
}
.asset-placeholder span {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}
.asset-placeholder strong {
  margin-top: 0.3rem;
  color: var(--gold-300);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.player-photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ink-1000);
}
.hero-player__identity {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  padding: 3rem 1.25rem 1.25rem;
  background: linear-gradient(transparent, rgb(6 11 19 / 98%) 40%);
}
.hero-player__identity p {
  margin-bottom: 0.2rem;
  color: var(--paper-300);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
}
.hero-player__identity h2 {
  margin-bottom: 0.6rem;
  font-family: var(--font-ui);
  font-size: 1.65rem;
  line-height: 1.25;
}
.title-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius-1);
  background: rgb(6 11 19 / 88%);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}
.title-badge b {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.title-badge--crown {
  border-color: var(--gold-500);
  color: var(--gold-300);
}
.title-badge--standard {
  border-color: var(--night-650);
  color: var(--paper-300);
}
.hero__scroll {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--paper-300);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
}
.hero__scroll span {
  display: block;
  width: 1px;
  height: 2.25rem;
  background: var(--gold-500);
}

.phase-panel {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 1rem;
  margin-top: -1.5rem;
  padding: 1.25rem;
  border-top: 2px solid var(--gold-500);
  background: var(--night-800);
  box-shadow: var(--shadow-raised);
}
.phase-panel > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--night-650);
}
.phase-panel__label {
  color: var(--paper-300);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}
.phase-panel strong,
.phase-panel time {
  font-size: 0.88rem;
}

.about {
  padding-top: var(--s-32);
}
.fact-list {
  margin: 0;
}
.fact-list > div {
  position: relative;
  min-height: 6.3rem;
  padding: 1.1rem 0 1rem 1.25rem;
  border-top: 1px solid var(--night-650);
}
.fact-list > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4rem;
  height: 2px;
  background: var(--gold-500);
}
.fact-list dt {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
}
.fact-list dd {
  color: var(--paper-300);
  font-size: 0.88rem;
}

.road {
  background: var(--ink-900);
}
.road-list {
  position: relative;
  display: grid;
  gap: 0.75rem;
  margin: 0 0 var(--s-8);
  padding: 0;
  list-style: none;
}
.road-list::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.45rem;
  width: 1px;
  background: var(--gold-500);
}
.road-step {
  position: relative;
  min-height: 9rem;
  padding: 1.35rem 1rem 1.2rem 4.25rem;
  border: 1px solid var(--night-650);
  background: var(--ink-950);
}
.road-step > span {
  position: absolute;
  top: 1rem;
  left: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  color: var(--gold-300);
  background: var(--ink-950);
  font-size: 0.72rem;
  font-weight: 800;
}
.road-step h3 {
  margin-bottom: 0.4rem;
  font-size: 1.2rem;
}
.road-step p {
  margin: 0;
  color: var(--paper-300);
  font-size: 0.9rem;
}
.road-step--strong {
  border-color: rgb(201 162 74 / 55%);
  background:
    linear-gradient(135deg, rgb(201 162 74 / 7%), transparent 55%),
    var(--ink-950);
}
.road__cta {
  width: 100%;
}

.players {
  position: relative;
  background: linear-gradient(180deg, var(--ink-950), var(--ink-1000));
}
.featured-layout {
  display: grid;
  gap: 1rem;
  margin-bottom: var(--s-24);
}
.featured-card {
  position: relative;
  display: grid;
  min-height: 27rem;
  overflow: hidden;
  border: 1px solid var(--night-650);
  background: var(--ink-900);
  text-decoration: none;
}
.featured-card .asset-placeholder {
  grid-area: 1 / 1;
  aspect-ratio: auto;
  min-height: 27rem;
}
.featured-card .player-photo {
  grid-area: 1 / 1;
  min-height: 27rem;
  aspect-ratio: auto;
}
.featured-card:not(.featured-card--compact) > .asset-placeholder {
  place-content: start center;
  padding-top: 7rem;
}
.featured-card__content {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  padding: 7rem 1.25rem 5rem;
  background: linear-gradient(transparent, var(--ink-1000) 48%);
}
.featured-card__slot {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: rgb(244 240 230 / 25%);
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
}
.featured-card h3 {
  margin: 0.65rem 0 0.4rem;
  font-size: 1.8rem;
}
.featured-card p {
  margin-bottom: 0.8rem;
  color: var(--paper-300);
  font-size: 0.9rem;
}
.featured-card__action,
.player-card__action {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.featured-card--compact {
  min-height: 10rem;
  grid-template-columns: 7rem 1fr;
}
.featured-card--compact .asset-placeholder {
  grid-area: 1 / 1;
  min-height: 10rem;
  aspect-ratio: auto;
  border-right: 1px solid var(--night-650);
}
.featured-card--compact .featured-card__content {
  grid-area: 1 / 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  background: none;
}
.featured-card--compact .featured-card__slot {
  top: 0.5rem;
  right: 0.6rem;
  font-size: 2rem;
}
.featured-card--compact h3 {
  font-size: 1.25rem;
}
.featured-card--compact p {
  display: none;
}
.roster-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-top: var(--s-8);
  border-top: 1px solid var(--night-650);
}
.roster-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
}
.data-status {
  max-width: 10rem;
  margin: 0;
  color: var(--paper-300);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: right;
}
.data-status span {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background: var(--gold-500);
}
.player-tools {
  margin-bottom: var(--s-6);
}
.search-field {
  display: block;
}
.search-field input {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--night-650);
  border-radius: var(--radius-1);
  color: var(--paper-100);
  background: var(--ink-950);
}
.search-field input::placeholder {
  color: var(--paper-300);
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.chip {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--night-650);
  border-radius: 99px;
  color: var(--paper-300);
  background: transparent;
  cursor: pointer;
}
.chip.is-active {
  border-color: var(--gold-500);
  color: var(--paper-100);
  background: rgb(201 162 74 / 10%);
}
.result-count {
  margin: 0.75rem 0 0;
  color: var(--paper-300);
  font-size: 0.8rem;
}
.player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.player-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--night-650);
  border-radius: var(--radius-1);
  background: var(--ink-900);
  color: inherit;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.player-card:hover,
.player-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-500);
  box-shadow: var(--shadow-raised);
}
.player-card .asset-placeholder {
  aspect-ratio: 4 / 5;
  border-bottom: 1px solid var(--night-650);
}
.player-card .player-photo {
  height: auto;
  border-bottom: 1px solid var(--night-650);
}
.player-card .asset-placeholder span {
  font-size: 0.5rem;
}
.player-card .asset-placeholder strong {
  font-size: 0.55rem;
}
.player-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.player-card__body {
  display: flex;
  min-height: 7.8rem;
  flex: 1;
  flex-direction: column;
  padding: 0.8rem;
}
.player-card__record {
  margin: 0 0 0.25rem;
  color: var(--gold-300);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.player-card h3 {
  margin: 0 0 0.4rem;
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.player-card__action {
  margin-top: auto;
  color: var(--paper-300);
}
.noscript-note {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--night-650);
}

.ranking {
  background: var(--night-800);
}
.ranking-board {
  border: 1px solid var(--night-650);
  background: var(--ink-950);
}
.ranking-board__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--night-650);
  color: var(--paper-300);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}
.ranking-empty {
  display: grid;
  min-height: 22rem;
  place-content: center;
  padding: 2rem;
  text-align: center;
}
.ranking-empty > span {
  color: rgb(201 162 74 / 25%);
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 0.8;
}
.ranking-empty strong {
  margin-top: 1.5rem;
  color: var(--gold-300);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}
.ranking-empty p {
  margin: 0.5rem 0 0;
  color: var(--paper-300);
  font-size: 0.85rem;
}
.ranking-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ranking-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  min-height: 4rem;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--night-650);
}
.ranking-row > b {
  color: var(--paper-300);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.ranking-row > strong {
  color: var(--gold-300);
  font-size: 0.8rem;
}
.ranking-row--top {
  min-height: 6rem;
  background: rgb(201 162 74 / 5%);
}
.ranking-row--top > b {
  color: var(--paper-100);
  font-size: 2rem;
}

.tournament {
  background: var(--ink-950);
}
.tournament-facts {
  margin: 0;
  border-top: 1px solid var(--night-650);
}
.tournament-facts > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  min-height: 4.2rem;
  align-items: center;
  border-bottom: 1px solid var(--night-650);
}
.tournament-facts dt {
  color: var(--paper-300);
  font-size: 0.76rem;
  font-weight: 700;
}
.tournament-facts dd {
  margin: 0;
  font-weight: 700;
}
.tournament-facts small {
  display: block;
  color: var(--paper-300);
  font-weight: 400;
}
.tournament-actions {
  margin-top: 1.5rem;
}
.tournament-actions .button {
  width: 100%;
}

.watch {
  padding-block: var(--s-12);
  border-top: 4px solid var(--night-650);
}
.watch-card {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--night-650);
}
.watch-card h2 {
  margin: 0;
  font-size: 1.8rem;
}
.watch-card p {
  color: var(--paper-300);
}
.watch-status {
  display: inline-block;
  padding-left: 0.8rem;
  border-left: 3px solid var(--night-650);
  font-size: 0.85rem;
}
.watch.is-live-fixture {
  border-top-color: var(--verm-600);
}
.watch.is-live-fixture .watch-status {
  border-left-color: var(--verm-600);
}
.watch.is-live {
  border-top-color: var(--verm-600);
}
.watch.is-live .watch-status {
  border-left-color: var(--verm-600);
}
.button--live {
  color: var(--white);
  background: var(--verm-600);
}

.news-grid {
  display: grid;
  gap: 0.75rem;
}
.news-card {
  display: grid;
  grid-template-columns: 5.3rem 1fr auto;
  min-height: 7rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--night-650);
  text-decoration: none;
}
.news-card:hover {
  background: rgb(244 240 230 / 4%);
}
.news-card time {
  color: var(--paper-300);
  font-size: 0.72rem;
}
.news-card h3 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.news-card > span {
  color: var(--gold-300);
}
.news__all {
  margin-top: 1.5rem;
}

.hall {
  color: var(--ink-950);
  background-color: var(--paper-100);
  background-image: repeating-linear-gradient(
    0deg,
    rgb(11 18 32 / 2%) 0 1px,
    transparent 1px 5px
  );
}
.section-header--paper .eyebrow {
  color: #745916;
}
.section-header--paper > p:last-child {
  color: #3d4652;
}
.champion-grid {
  display: grid;
  gap: 1rem;
}
.champion-card {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  min-height: 12rem;
  border: 1px solid #b9af9d;
  background: rgb(255 255 255 / 35%);
}
.champion-card__edition {
  display: grid;
  place-content: center;
  border-right: 1px solid #b9af9d;
  font-family: var(--font-display);
  text-align: center;
}
.champion-card__edition span {
  color: #645b4d;
  font-family: var(--font-ui);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}
.champion-card__edition strong {
  font-size: 3.25rem;
  line-height: 1;
}
.champion-card__body {
  align-self: center;
  padding: 1rem;
}
.champion-card__body > span {
  color: #745916;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.champion-card h3 {
  margin: 0.35rem 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.champion-card p {
  margin: 0;
  color: #3d4652;
  font-size: 0.8rem;
}
.hall__continuation {
  margin: 2rem 0 0;
  color: #645b4d;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-align: right;
}

.final-cta {
  position: relative;
  padding-block: var(--s-24);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 100%, rgb(201 162 74 / 14%), transparent 48%),
    var(--ink-1000);
}
.final-cta::before {
  content: 'III';
  position: absolute;
  inset: 50% auto auto 50%;
  color: rgb(244 240 230 / 3%);
  font-family: var(--font-display);
  font-size: 22rem;
  line-height: 0.6;
  transform: translate(-50%, -50%);
}
.final-cta__inner {
  position: relative;
  max-width: 46rem;
}
.final-cta h2 {
  margin-bottom: 1rem;
}
.final-cta p:not(.eyebrow) {
  max-width: 32rem;
  margin: 0 auto 2rem;
  color: var(--paper-300);
}
.final-cta .button {
  width: 100%;
  max-width: 24rem;
}

.site-footer {
  padding: 4rem 0 6rem;
  border-top: 1px solid var(--night-650);
  color: var(--paper-300);
  background: var(--ink-1000);
}
.site-footer__grid {
  display: grid;
  gap: 2rem;
}
.site-footer__brand img {
  display: block;
  width: auto;
  height: 3rem;
}
.site-footer__brand {
  margin-bottom: 0.25rem;
  color: var(--paper-100);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
.site-footer__grid > div:first-child > p:nth-child(2) {
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.site-footer__grid > div:first-child > span {
  color: var(--gold-300);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}
.site-footer nav {
  display: grid;
}
.site-footer nav a {
  display: flex;
  min-height: 48px;
  align-items: center;
  border-bottom: 1px solid var(--night-650);
  font-size: 0.88rem;
  text-decoration: none;
}
.site-footer__meta {
  font-size: 0.76rem;
}
.site-footer__copyright {
  width: min(calc(100% - 2rem), var(--content));
  margin: 3rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--night-650);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}
.sticky-action {
  position: fixed;
  z-index: var(--z-sticky);
  inset: auto 1rem max(1rem, env(safe-area-inset-bottom));
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-1);
  color: var(--ink-950);
  background: var(--gold-500);
  box-shadow: var(--shadow-raised);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(140%);
  transition: transform 240ms ease;
}
.sticky-action {
  visibility: hidden;
}
.sticky-action.is-visible {
  transform: none;
  visibility: visible;
}

.profile-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--paper-100);
  background: var(--ink-950);
}
.profile-dialog::backdrop {
  background: rgb(0 0 0 / 76%);
}
.profile-dialog__bar {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--night-650);
  background: var(--ink-1000);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
}
.profile-dialog__bar button {
  display: flex;
  min-width: 72px;
  min-height: 44px;
  align-items: center;
  justify-content: end;
  gap: 0.5rem;
  border: 0;
  color: var(--paper-100);
  background: transparent;
  cursor: pointer;
}
.profile-dialog__bar b {
  font-size: 1.5rem;
  font-weight: 400;
}
.profile-dialog__body {
  display: grid;
}
.profile-visual {
  position: relative;
  background: var(--ink-1000);
}
.profile-visual .asset-placeholder {
  min-height: 55vh;
}
.profile-visual .player-photo {
  min-height: 55vh;
}
.profile-record {
  position: absolute;
  inset: auto 1rem 1rem;
  color: var(--paper-300);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.profile-copy {
  padding: 2rem 1rem 4rem;
}
.profile-copy h2 {
  margin: 0.7rem 0 0.15rem;
  font-family: var(--font-ui);
  font-size: 2.2rem;
}
.profile-reading {
  margin-bottom: 1.25rem;
  color: var(--paper-300);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.profile-intro {
  margin: 1.5rem 0;
  padding: 1.25rem 0;
  border-block: 1px solid var(--night-650);
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.profile-copy h3 {
  margin-top: 2rem;
  color: var(--gold-300);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.achievement-list {
  padding-left: 1.25rem;
}
.achievement-list li {
  margin-bottom: 0.6rem;
}
.profile-copy .button {
  margin-top: 1rem;
  width: 100%;
}
.profile-source {
  color: var(--paper-300);
  font-size: 0.75rem;
}
.profile-empty {
  padding: 3rem 1rem;
}
.player-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px solid var(--night-650);
  color: var(--paper-300);
  text-align: center;
}

@media (min-width: 48rem) {
  :root {
    --header-h: 4.5rem;
  }
  .shell {
    width: min(calc(100% - 4rem), var(--content));
  }
  .section {
    padding-block: var(--s-32);
  }
  .menu-button {
    display: none;
  }
  .global-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0;
    background: none;
    border: 0;
  }
  .global-nav a {
    min-height: 44px;
    border: 0;
    color: var(--paper-300);
    font-size: 0.76rem;
  }
  .global-nav a:hover {
    color: var(--paper-100);
  }
  .global-nav .nav-cta {
    margin: 0;
    padding: 0 1rem;
    color: var(--ink-950);
  }
  .brand__home-logo {
    height: 2.4rem;
  }
  .hero {
    min-height: 51.75rem;
    padding-top: 8rem;
  }
  .hero__content {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(22rem, 6fr);
    align-items: center;
    gap: 7%;
  }
  .hero h1 {
    font-size: clamp(4rem, 5vw, 4.6rem);
  }
  .hero__lead {
    font-size: 1.08rem;
  }
  .hero-player {
    width: min(100%, 34rem);
  }
  .asset-placeholder--hero {
    max-height: 42rem;
  }
  .hero-player__identity {
    padding: 8rem 2rem 2rem;
  }
  .hero-player__identity h2 {
    font-size: 2.4rem;
  }
  .hero__scroll {
    right: 2rem;
    bottom: 2rem;
  }
  .phase-panel {
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: center;
    margin-top: -3.25rem;
    padding: 1.25rem 1.5rem;
  }
  .phase-panel > div {
    display: grid;
    gap: 0.15rem;
    padding: 0 1rem;
    border: 0;
    border-right: 1px solid var(--night-650);
  }
  .phase-panel > div:first-child {
    padding-left: 0;
  }
  .section-grid,
  .ranking-layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 8%;
  }
  .section-header--wide {
    display: grid;
    max-width: none;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 8%;
  }
  .section-header--wide > p {
    margin-bottom: 0.5rem;
  }
  .fact-list dt {
    font-size: 2rem;
  }
  .road-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .road-list::before {
    inset: 1.45rem 1.5rem auto;
    width: auto;
    height: 1px;
  }
  .road-step {
    min-height: 18rem;
    padding: 5rem 1.25rem 1.5rem;
  }
  .road-step > span {
    left: 1rem;
  }
  .road-step h3 {
    font-size: 1.25rem;
  }
  .road__cta {
    width: auto;
  }
  .featured-layout {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: start;
    gap: 1.5rem;
  }
  .featured-card {
    min-height: 35rem;
  }
  .featured-card .asset-placeholder {
    min-height: 35rem;
  }
  .featured-card .player-photo {
    min-height: 35rem;
  }
  .featured-card:not(.featured-card--compact) > .asset-placeholder {
    padding-top: 10rem;
  }
  .featured-card__content {
    padding-bottom: 1.25rem;
  }
  .featured-card--compact {
    min-height: 27rem;
    grid-template-columns: 1fr;
  }
  .featured-card--compact .asset-placeholder {
    grid-area: 1 / 1;
    min-height: 27rem;
    border: 0;
  }
  .featured-card--compact .featured-card__content {
    grid-area: 1 / 1;
    align-self: end;
    justify-content: end;
    padding: 5rem 1rem 1rem;
    background: linear-gradient(transparent, var(--ink-1000));
  }
  .featured-card--compact .featured-card__slot {
    font-size: 4rem;
  }
  .featured-card--compact p {
    display: none;
  }
  .player-tools {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) 2fr auto;
    align-items: center;
    gap: 1rem;
  }
  .filter-chips,
  .result-count {
    margin-top: 0;
  }
  .player-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .player-card__body {
    min-height: 9rem;
    padding: 1rem;
  }
  .player-card h3 {
    font-size: 1.4rem;
  }
  .ranking-layout .section-header {
    padding-right: 1rem;
  }
  .ranking-empty {
    min-height: 31rem;
  }
  .tournament-layout {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 8%;
  }
  .tournament-layout .section-header {
    grid-row: span 2;
  }
  .tournament-actions {
    grid-column: 2;
  }
  .tournament-actions .button {
    width: auto;
  }
  .watch-card {
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
  }
  .news-card {
    grid-template-columns: 8rem 1fr auto;
    min-height: 8rem;
    padding-inline: 1.5rem;
  }
  .news-card h3 {
    font-size: 1.05rem;
  }
  .champion-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .champion-card {
    grid-template-columns: 9rem 1fr;
    min-height: 20rem;
  }
  .champion-card__edition strong {
    font-size: 5rem;
  }
  .champion-card__body {
    padding: 2rem;
  }
  .champion-card h3 {
    font-size: 2rem;
  }
  .final-cta .button {
    width: auto;
  }
  .site-footer {
    padding-bottom: 3rem;
  }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .sticky-action {
    display: none;
  }
  .profile-dialog {
    width: min(70rem, calc(100% - 4rem));
    height: min(47.5rem, calc(100% - 4rem));
    margin: auto;
    border: 1px solid var(--night-650);
    box-shadow: var(--shadow-raised);
  }
  .profile-dialog__body {
    grid-template-columns: 42% 58%;
    min-height: calc(100% - 56px);
  }
  .profile-visual .asset-placeholder {
    height: 100%;
    min-height: 0;
  }
  .profile-visual .player-photo {
    height: 100%;
    min-height: 0;
  }
  .profile-copy {
    padding: 3rem;
    overflow: auto;
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .menu-button {
    display: grid;
  }
  .global-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    display: none;
    gap: 0;
    padding: 1rem 2rem;
    background: var(--ink-900);
    border-bottom: 1px solid var(--night-650);
  }
  .global-nav.is-open {
    display: grid;
  }
  .global-nav a {
    min-height: 48px;
    border-bottom: 1px solid rgb(244 240 230 / 10%);
    font-size: 0.875rem;
  }
  .global-nav .nav-cta {
    margin-top: 1rem;
    justify-content: center;
    padding-inline: 1rem;
  }
  .hero__content {
    grid-template-columns: minmax(0, 5.5fr) minmax(20rem, 6.5fr);
    gap: 4%;
  }
  .hero h1 {
    font-size: 2.75rem;
  }
  .hero__lead {
    font-size: 0.95rem;
  }
}

@media (min-width: 64rem) {
  .player-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Phase 3.2 — Japanese-first editorial revision */
.about {
  padding-top: clamp(6rem, 12vw, 11rem);
  background:
    radial-gradient(circle at 80% 28%, rgb(154 77 255 / 12%), transparent 28%),
    #050712;
}
.about__inner {
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
}
.about .section-header {
  max-width: 60rem;
  margin-bottom: 0;
}
.about .section-header h2 {
  font-size: clamp(2.65rem, 11.2vw, 4rem);
  text-transform: none;
}
.about-poem {
  max-width: 46rem;
}
.about-poem p {
  margin-bottom: 2rem;
  color: var(--paper-200);
  font-size: clamp(1.08rem, 4.8vw, 1.55rem);
  font-weight: 750;
  line-height: 2;
  letter-spacing: 0.025em;
}
.about-poem__closing {
  padding-top: 1rem;
  color: var(--paper-100) !important;
  font-size: clamp(1.7rem, 7vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}
.about .fact-list {
  margin-top: 1rem;
}
.news-top__header h2 {
  font-size: clamp(1.5rem, 6vw, 2rem);
}
.hero__media span {
  letter-spacing: 0.12em;
}
.hero__media strong {
  letter-spacing: 0.05em;
}

@media (min-width: 48rem) {
  .about__inner {
    grid-template-columns: minmax(20rem, 0.8fr) minmax(24rem, 1fr);
    align-items: start;
  }
  .about .fact-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .about-poem p {
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 23rem) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }
  .player-grid {
    gap: 0.5rem;
  }
  .player-card__body {
    padding: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Phase 3.1 — user-reviewed direction: bold gothic / one-image hero / neon spectrum */
:root {
  --ink-1000: #03040a;
  --ink-950: #070916;
  --ink-900: #0c1024;
  --night-800: #111936;
  --night-650: #2a3458;
  --paper-100: #f7f8ff;
  --paper-300: #b9c1da;
  --gold-500: #fff200;
  --gold-300: #fff86a;
  --neon-cyan: #00e7ff;
  --neon-blue: #5865ff;
  --neon-violet: #9a4dff;
  --neon-magenta: #ff2bd6;
  --font-display: var(--font-ui);
}

body {
  background: var(--ink-950);
  font-weight: 500;
}
h1,
h2,
h3 {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: -0.055em;
}
.section {
  position: relative;
  padding-block: clamp(6rem, 12vw, 11rem);
  overflow: hidden;
}
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: max(1rem, calc((100% - var(--content)) / 2));
  width: min(11rem, 38vw);
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--neon-cyan),
    var(--neon-violet),
    var(--neon-magenta)
  );
  box-shadow: 0 0 18px rgb(0 231 255 / 45%);
}
.section-header h2 {
  font-size: clamp(3.25rem, 14vw, 7rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.section-header > p:last-child {
  max-width: 38rem;
  font-weight: 700;
}
.eyebrow {
  color: var(--neon-cyan);
  font-weight: 900;
  letter-spacing: 0.22em;
}

.site-header {
  background: rgb(3 4 10 / 78%);
  border-color: rgb(255 255 255 / 10%);
}
.brand__pending b {
  color: var(--neon-cyan);
}
.global-nav .nav-cta {
  color: #02030a;
  border: 0;
  background: linear-gradient(105deg, var(--neon-cyan), var(--gold-500));
}

.hero {
  display: flex;
  min-height: 92svh;
  align-items: flex-end;
  padding: calc(var(--header-h) + 3rem) 0 clamp(3.5rem, 8vw, 7rem);
  isolation: isolate;
  background: #04050c;
}
.hero::after {
  z-index: -1;
  height: 70%;
  background: linear-gradient(
    0deg,
    #04050c 2%,
    rgb(4 5 12 / 82%) 35%,
    transparent
  );
}
.hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: grid;
  place-content: center;
  color: rgb(255 255 255 / 48%);
  text-align: center;
  background:
    radial-gradient(circle at 72% 25%, rgb(255 43 214 / 40%), transparent 24%),
    radial-gradient(circle at 23% 35%, rgb(0 231 255 / 30%), transparent 28%),
    linear-gradient(135deg, #050716 0%, #111b42 45%, #170526 100%);
}
.hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 28%,
      rgb(0 231 255 / 15%) 28.2%,
      transparent 28.7%
    ),
    linear-gradient(
      65deg,
      transparent 68%,
      rgb(255 43 214 / 18%) 68.2%,
      transparent 68.7%
    );
}
.hero__media span,
.hero__media strong {
  position: absolute;
  right: 1rem;
  display: block;
}
.hero__media span {
  top: 17%;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.hero__media strong {
  top: calc(17% + 1.35rem);
  color: var(--paper-100);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.hero__lines {
  opacity: 0.35;
  background-image: linear-gradient(
    90deg,
    transparent 49.8%,
    rgb(255 255 255 / 8%) 50%,
    transparent 50.2%
  );
  background-size: 5rem 100%;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.hero__content {
  width: min(calc(100% - 2rem), 86rem);
}
.hero__copy {
  max-width: 75rem;
}
.hero h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(3.25rem, 14vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.08em;
  text-shadow: 0 0.08em 0.4em rgb(0 0 0 / 45%);
}
.hero h1 span {
  color: transparent;
  background: linear-gradient(
    100deg,
    var(--neon-cyan),
    #fff 32%,
    var(--neon-magenta) 78%,
    var(--gold-500)
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__lead {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 2rem;
  color: var(--paper-300);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.hero__lead b {
  color: var(--paper-100);
  font-size: clamp(1rem, 4.2vw, 1.4rem);
  letter-spacing: 0.02em;
}
.hero__actions {
  margin: 0;
}
.button--primary {
  position: relative;
  color: #02030a;
  border: 0;
  background: linear-gradient(
    105deg,
    var(--neon-cyan),
    var(--neon-violet) 48%,
    var(--neon-magenta)
  );
  box-shadow: 0 0 28px rgb(0 231 255 / 28%);
}
.hero .button--primary {
  min-width: 13rem;
  color: white;
}
.hero__scroll span {
  background: linear-gradient(var(--neon-cyan), var(--neon-magenta));
}

.news--top {
  position: relative;
  z-index: 5;
  padding: 0;
  border: 0;
  background: #070916;
}
.news-top__inner {
  display: grid;
  gap: 1.25rem;
  padding-block: 2rem;
}
.news-top__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.news-top__header .eyebrow {
  margin: 0;
}
.news-top__header h2 {
  margin: 0;
  font-size: 1.35rem;
}
.news--top .news-grid {
  display: grid;
  gap: 0;
}
.news--top .news-card {
  grid-template-columns: 5.5rem auto 1fr auto;
  min-height: 4.8rem;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-color: rgb(255 255 255 / 13%);
}
.news-card__type {
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--neon-violet);
  border-radius: 99px;
  color: #d9c4ff;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}
.news-card__arrow {
  color: var(--neon-cyan);
}
.news-top__more {
  justify-self: end;
  color: var(--paper-100);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.phase-panel {
  margin-top: 0;
  border: 0;
  border-left: 3px solid var(--neon-cyan);
  background: linear-gradient(100deg, #10182f, #120d2d);
  box-shadow: 0 0 32px rgb(88 101 255 / 12%);
}
.fact-list > div::before {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
}
.fact-list dt {
  font-family: var(--font-ui);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.06em;
}

.road {
  background:
    radial-gradient(circle at 90% 20%, rgb(154 77 255 / 15%), transparent 30%),
    var(--ink-900);
}
.road-list::before {
  background: linear-gradient(
    var(--neon-cyan),
    var(--neon-violet),
    var(--neon-magenta)
  );
  box-shadow: 0 0 15px rgb(0 231 255 / 30%);
}
.road-step {
  border-color: rgb(0 231 255 / 20%);
  background: rgb(3 4 10 / 62%);
}
.road-step > span {
  border-color: var(--neon-cyan);
  color: var(--paper-100);
  box-shadow: 0 0 18px rgb(0 231 255 / 25%);
}
.road-step--strong {
  border-color: rgb(255 43 214 / 45%);
  background: linear-gradient(
    135deg,
    rgb(88 101 255 / 13%),
    rgb(255 43 214 / 9%)
  );
}

.players {
  background:
    radial-gradient(circle at 8% 22%, rgb(0 231 255 / 12%), transparent 25%),
    radial-gradient(circle at 92% 70%, rgb(255 43 214 / 12%), transparent 25%),
    #050712;
}
.player-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.player-card-simple {
  position: relative;
  display: grid;
  min-height: 9rem;
  grid-template-columns: 5.5rem 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 15%);
  background: rgb(12 16 36 / 78%);
}
.player-card-simple::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--neon-cyan),
    var(--neon-violet),
    var(--neon-magenta)
  );
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 220ms ease;
}
.player-card-simple:hover::after {
  transform: scaleX(1);
}
.player-card-simple__number {
  display: grid;
  place-content: center;
  color: transparent;
  border-right: 1px solid rgb(255 255 255 / 12%);
  background: linear-gradient(160deg, var(--neon-cyan), var(--neon-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 2.2rem;
  font-weight: 900;
}
.player-card-simple__body {
  align-self: center;
  padding: 1rem;
}
.player-card-simple h3 {
  margin: 0.35rem 0 0.2rem;
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  line-height: 1;
}
.player-card-simple p {
  margin: 0;
  color: var(--paper-300);
  font-size: 0.82rem;
}
.title-badge {
  min-height: 24px;
  border-color: var(--neon-violet);
  color: var(--paper-100);
  background: rgb(154 77 255 / 12%);
  box-shadow: 0 0 14px rgb(154 77 255 / 16%);
}
.title-badge--crown {
  border-color: var(--gold-500);
  color: var(--gold-300);
}

.ranking {
  background: linear-gradient(140deg, #0d1834, #140a29 75%);
}
.ranking-board {
  border-color: rgb(0 231 255 / 30%);
  background: rgb(3 4 10 / 72%);
  box-shadow: 0 0 36px rgb(0 231 255 / 10%);
}
.ranking-empty > span {
  color: rgb(0 231 255 / 28%);
}
.ranking-empty strong {
  color: var(--neon-cyan);
}
.tournament-facts > div {
  border-color: rgb(255 255 255 / 15%);
}
.watch {
  border-top-color: var(--neon-violet);
  background: linear-gradient(90deg, rgb(0 231 255 / 5%), rgb(255 43 214 / 6%));
}

.hall {
  color: var(--paper-100);
  background-color: #080a18;
  background-image:
    radial-gradient(circle at 80% 20%, rgb(255 43 214 / 11%), transparent 27%),
    linear-gradient(
      125deg,
      transparent 45%,
      rgb(0 231 255 / 8%) 45.2%,
      transparent 45.5%
    );
}
.section-header--paper .eyebrow {
  color: var(--neon-magenta);
}
.section-header--paper > p:last-child {
  color: var(--paper-300);
}
.champion-card {
  border-color: rgb(255 255 255 / 17%);
  background: rgb(12 16 36 / 72%);
}
.champion-card__edition {
  border-color: rgb(255 255 255 / 13%);
}
.champion-card__edition span,
.champion-card p,
.hall__continuation {
  color: var(--paper-300);
}
.champion-card__edition strong {
  color: transparent;
  background: linear-gradient(160deg, var(--neon-cyan), var(--neon-magenta));
  -webkit-background-clip: text;
  background-clip: text;
}
.champion-card__body > span {
  color: var(--neon-cyan);
}
.final-cta {
  background:
    radial-gradient(circle at 20% 80%, rgb(0 231 255 / 20%), transparent 30%),
    radial-gradient(circle at 80% 20%, rgb(255 43 214 / 22%), transparent 28%),
    #03040a;
}
.final-cta::before {
  color: rgb(154 77 255 / 8%);
  font-family: var(--font-ui);
  font-weight: 900;
}

@media (min-width: 48rem) {
  .hero {
    min-height: 56rem;
  }
  .hero__content {
    display: block;
  }
  .hero__copy {
    max-width: 78rem;
  }
  .hero h1 {
    font-size: clamp(7rem, 11vw, 10rem);
  }
  .news-top__inner {
    grid-template-columns: 9rem 1fr auto;
    align-items: start;
    padding-block: 2.5rem;
  }
  .news-top__header {
    display: block;
  }
  .news-top__header h2 {
    font-size: 1.8rem;
  }
  .news-top__more {
    align-self: end;
    padding-bottom: 1rem;
  }
  .player-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .player-card-simple {
    min-height: 12rem;
    grid-template-columns: 7rem 1fr;
  }
  .player-card-simple__number {
    font-size: 3rem;
  }
}

@media (min-width: 64rem) {
  .section-header--wide {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .player-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .player-card-simple h3 {
    font-size: 2.4rem;
  }
}

/* Phase 4 — supplied GCS visual assets */
:root {
  --ink-1000: #02050b;
  --ink-950: #050914;
  --ink-900: #0a1222;
  --night-800: #111c31;
  --night-650: #2b3c59;
  --paper-100: #f6f8ff;
  --paper-200: #e2e8f3;
  --paper-300: #b9c6d8;
  --gold-500: #c8a84f;
  --gold-300: #ebd88e;
  --neon-cyan: #65c9ff;
  --neon-blue: #188ed2;
  --neon-violet: #6847d8;
  --neon-magenta: #9d22c4;
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgb(55 139 194 / 8%), transparent 24rem),
    var(--ink-950);
}

.site-header {
  border-color: rgb(188 213 241 / 14%);
  background: rgb(2 5 11 / 86%);
}

.brand__gcs {
  width: auto;
  height: 1.8rem;
  object-fit: contain;
}

.global-nav .nav-cta,
.button--primary,
.sticky-action {
  color: #fff;
  border-color: rgb(155 202 255 / 38%);
  background: linear-gradient(105deg, #9821c4, #5a43d5 48%, #168dce);
  box-shadow: 0 0.7rem 2rem rgb(45 113 190 / 24%);
}

.section::before {
  background: linear-gradient(
    90deg,
    var(--neon-violet),
    var(--neon-blue),
    #dcecff
  );
  box-shadow: 0 0 18px rgb(101 201 255 / 30%);
}

.hero {
  display: block;
  min-height: 0;
  aspect-ratio: 1080 / 1700;
  margin-top: var(--header-h);
  padding: 0;
  background: #02050b;
}

.hero::after,
.hero__media::before {
  display: none;
}

.hero__media {
  z-index: 0;
  display: block;
  background: #02050b;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news--top {
  border-top: 1px solid rgb(188 213 241 / 16%);
  background: #050914;
}

.news-card__type {
  border-color: #6149db;
  color: #d8d4ff;
}

.news-card__arrow,
.ranking-empty strong {
  color: var(--neon-cyan);
}

.about {
  background:
    radial-gradient(circle at 78% 20%, rgb(87 141 190 / 12%), transparent 30%),
    #050914;
}

.road {
  background:
    radial-gradient(circle at 90% 18%, rgb(104 71 216 / 13%), transparent 28%),
    linear-gradient(180deg, #0a1222, #070c18);
}

.road-list::before {
  background: linear-gradient(var(--neon-cyan), var(--neon-violet));
}

.road-step {
  border-color: rgb(101 201 255 / 20%);
  background: rgb(2 5 11 / 64%);
}

.road-step--strong {
  border-color: rgb(124 97 225 / 50%);
  background: linear-gradient(
    135deg,
    rgb(80 120 190 / 12%),
    rgb(104 71 216 / 10%)
  );
}

.prizes {
  isolation: isolate;
  color: var(--paper-100);
  background:
    radial-gradient(
      circle at 50% 14%,
      rgb(101 201 255 / 16%),
      transparent 24rem
    ),
    radial-gradient(
      circle at 84% 68%,
      rgb(157 34 196 / 10%),
      transparent 26rem
    ),
    #02050b;
}

.prizes::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 18% 0 auto;
  height: 40rem;
  opacity: 0.23;
  background:
    linear-gradient(
      115deg,
      transparent 48%,
      rgb(255 255 255 / 9%) 48.15%,
      transparent 48.4%
    ),
    linear-gradient(
      65deg,
      transparent 60%,
      rgb(101 201 255 / 10%) 60.15%,
      transparent 60.4%
    );
  pointer-events: none;
}

.prizes__header > div:last-child {
  display: grid;
  gap: 0.45rem;
  align-self: end;
}

.prizes__header p {
  margin: 0;
  color: var(--paper-300);
  font-weight: 700;
}

.prizes__header strong {
  color: var(--paper-100);
  font-size: clamp(1.2rem, 4.8vw, 1.8rem);
  line-height: 1.45;
}

.prize-grid {
  display: grid;
  gap: 3rem;
  max-width: 74rem;
  margin-inline: auto;
  perspective: 75rem;
  perspective-origin: 50% 42%;
}

.prize-card {
  --float-duration: 6.8s;
  --float-delay: -1.2s;
  --float-start-y: 0.2rem;
  --float-end-y: -0.7rem;
  --float-start-rotation: -0.35deg;
  --float-end-rotation: 0.45deg;
  --prize-glow: rgb(101 201 255 / 25%);
  position: relative;
  width: min(100%, 26rem);
  margin: 0 auto;
  transform-style: preserve-3d;
}

.prize-card--champion {
  --float-duration: 5.9s;
  --float-delay: -2.4s;
  --float-start-y: 0.1rem;
  --float-end-y: -0.85rem;
  --float-start-rotation: 0.3deg;
  --float-end-rotation: -0.4deg;
  --prize-glow: rgb(224 199 127 / 30%);
}

.prize-card--runner-up {
  --float-duration: 7.2s;
  --float-delay: -4.1s;
  --float-end-y: -0.6rem;
  --float-start-rotation: -0.45deg;
  --float-end-rotation: 0.3deg;
  --prize-glow: rgb(220 236 255 / 23%);
}

.prize-card--third {
  --float-duration: 6.5s;
  --float-delay: -3.2s;
  --float-end-y: -0.72rem;
  --float-start-rotation: 0.45deg;
  --float-end-rotation: -0.25deg;
  --prize-glow: rgb(210 94 76 / 23%);
}

.prize-card__float {
  position: relative;
  z-index: 1;
  margin-bottom: 0.65rem;
  isolation: isolate;
  transform-style: preserve-3d;
  animation: prize-card-float var(--float-duration) ease-in-out infinite;
  animation-delay: var(--float-delay);
  animation-play-state: paused;
}

.prizes.is-motion-active .prize-card__float {
  animation-play-state: running;
  will-change: transform;
}

.prize-card__float::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 10% 5% 6%;
  border-radius: 28%;
  background: var(--prize-glow);
  filter: blur(2.5rem);
  opacity: 0.9;
  transform: translate3d(0, 1rem, -1px) scale(0.94);
  pointer-events: none;
}

.prize-card__image {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --card-scale: 1;
  --shine-x: 50%;
  --shine-y: 24%;
  --glare-opacity: 0.1;
  position: relative;
  overflow: hidden;
  padding: 1px;
  border: 1px solid rgb(188 213 241 / 20%);
  border-radius: clamp(0.9rem, 1.8vw, 1.45rem);
  background: linear-gradient(
    145deg,
    rgb(255 255 255 / 18%),
    rgb(101 201 255 / 4%)
  );
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 42%);
  backface-visibility: hidden;
  transform: translateZ(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    scale3d(var(--card-scale), var(--card-scale), 1);
  transform-style: preserve-3d;
  transition:
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 280ms ease;
}

.prize-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at var(--shine-x) var(--shine-y),
      rgb(255 255 255 / 32%),
      transparent 28%
    ),
    linear-gradient(
      115deg,
      transparent 35%,
      rgb(255 255 255 / 15%) 48%,
      transparent 60%
    );
  mix-blend-mode: screen;
  opacity: var(--glare-opacity);
  transition: opacity 220ms ease;
  pointer-events: none;
}

.prize-card__image.is-tilting {
  --card-scale: 1.018;
  --glare-opacity: 0.42;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 52%);
  transition-duration: 100ms;
}

.prize-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.prize-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.15rem 0;
  border-top: 2px solid var(--neon-cyan);
}

.prize-card figcaption span {
  color: var(--paper-300);
  font-size: 0.78rem;
  font-weight: 800;
}

.prize-card figcaption strong {
  font-size: 1.35rem;
}

.prize-card--champion .prize-card__image {
  border-color: rgb(235 216 142 / 46%);
  box-shadow: 0 1.5rem 4.5rem rgb(176 138 37 / 18%);
}

.prize-card--champion figcaption {
  border-color: var(--gold-300);
}

.prize-card--champion figcaption span,
.prize-card--champion figcaption strong {
  color: var(--gold-300);
}

.prize-card--runner-up figcaption {
  border-color: #dcecff;
}

.prize-card--third figcaption {
  border-color: #d25e4c;
}

@keyframes prize-card-float {
  0%,
  100% {
    transform: translate3d(0, var(--float-start-y), 0)
      rotateZ(var(--float-start-rotation));
  }
  50% {
    transform: translate3d(0, var(--float-end-y), 1.5rem)
      rotateZ(var(--float-end-rotation));
  }
}

.players {
  background:
    radial-gradient(circle at 8% 22%, rgb(55 139 194 / 10%), transparent 25%),
    #070c18;
}

.ranking-board {
  border-color: rgb(101 201 255 / 28%);
  background: rgb(2 5 11 / 76%);
  box-shadow: 0 0 36px rgb(55 139 194 / 9%);
}

.watch {
  border-top-color: var(--neon-violet);
  background: linear-gradient(
    90deg,
    rgb(101 201 255 / 5%),
    rgb(104 71 216 / 7%)
  );
}

.hall {
  background-color: #07101d;
  background-image:
    radial-gradient(circle at 80% 20%, rgb(101 201 255 / 10%), transparent 27%),
    linear-gradient(
      125deg,
      transparent 45%,
      rgb(188 213 241 / 6%) 45.2%,
      transparent 45.5%
    );
}

.champion-card__edition strong {
  background: linear-gradient(160deg, #f5f8ff, #71c8f5 55%, #6949d8);
  -webkit-background-clip: text;
  background-clip: text;
}

.final-cta {
  background:
    radial-gradient(circle at 15% 80%, rgb(101 201 255 / 15%), transparent 30%),
    radial-gradient(circle at 85% 20%, rgb(104 71 216 / 18%), transparent 28%),
    #02050b;
}

.site-footer {
  border-color: rgb(188 213 241 / 14%);
  background: #02050b;
}

.site-footer__gcs-logo {
  width: min(13rem, 70%);
  height: auto;
  margin-top: 0.6rem;
}

@media (max-width: 47.99rem) {
  .site-footer__gcs-logo {
    margin-inline: auto;
  }
}

@media (min-width: 48rem) {
  .hero {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .prize-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .prize-card--champion {
    grid-column: 1 / -1;
    width: min(42%, 27rem);
  }
}

@media (min-width: 64rem) {
  .brand__gcs {
    height: 2.2rem;
  }

  .prize-grid {
    grid-template-areas: 'runner champion third';
    grid-template-columns: 1fr 1.12fr 1fr;
    gap: 2rem;
    padding-top: 2.5rem;
  }

  .prize-card--champion {
    grid-area: champion;
    width: 100%;
    transform: translateY(-2.5rem);
  }

  .prize-card--runner-up {
    grid-area: runner;
    width: 100%;
  }

  .prize-card--third {
    grid-area: third;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prize-card__float {
    animation: none !important;
    transform: none !important;
  }

  .prize-card__image {
    transform: none !important;
  }
}

/* Phase 5 — Japanese TCG tournament hierarchy / dimensional prize stage */
:root {
  --tcg-orange: #ff6426;
  --tcg-lime: #d5f43b;
}

h1,
h2,
h3 {
  letter-spacing: 0;
}

.section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section::before {
  left: 0;
  width: 100%;
  height: 0.38rem;
  background: linear-gradient(
    90deg,
    var(--neon-violet),
    var(--neon-blue) 42%,
    var(--neon-cyan) 68%,
    var(--tcg-orange)
  );
  box-shadow: 0 0 24px rgb(101 201 255 / 28%);
}

.section-header,
.section-header--wide,
.about .section-header {
  display: block;
  max-width: 60rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.section-header--wide > p,
.section-header--wide > div:last-child,
.section-header > p:last-child {
  max-width: 42rem;
  margin-right: auto;
  margin-left: auto;
}

.section-header h2,
.watch-card h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.15rem;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0.035em 0.035em 0 rgb(104 71 216 / 38%);
}

.section-header h2::after,
.watch-card h2::after {
  content: '';
  display: block;
  width: min(13rem, 58%);
  height: 0.42rem;
  margin: 0.26em auto 0;
  background: linear-gradient(
    90deg,
    var(--neon-violet),
    var(--neon-cyan) 60%,
    var(--tcg-orange)
  );
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}

.section-heading__meta {
  display: flex;
  width: max-content;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 0.65rem;
  padding: 0.24rem 1.1rem 0.2rem 0.55rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%);
  color: #030714;
  background: linear-gradient(
    105deg,
    var(--neon-cyan),
    #a7e9ff 72%,
    var(--tcg-lime)
  );
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow: none;
}

.section-heading__meta b {
  min-width: 1.55rem;
  padding-right: 0.5rem;
  border-right: 2px solid rgb(3 7 20 / 34%);
  font-size: 0.9rem;
  letter-spacing: 0;
}

.road .section-heading__meta {
  background: linear-gradient(105deg, var(--tcg-lime), var(--neon-cyan));
}

.prizes .section-heading__meta,
.watch .section-heading__meta {
  color: #fff;
  background: linear-gradient(
    105deg,
    var(--tcg-orange),
    var(--neon-magenta) 62%,
    var(--neon-violet)
  );
}

.players .section-heading__meta {
  color: #fff;
  background: linear-gradient(105deg, var(--neon-blue), var(--neon-violet));
}

.tournament .section-heading__meta {
  color: #fff;
  background: linear-gradient(
    105deg,
    var(--tcg-orange),
    #e62972 58%,
    var(--neon-violet)
  );
}

.hall .section-heading__meta {
  color: #fff;
  background: linear-gradient(
    105deg,
    var(--neon-violet),
    var(--neon-blue),
    var(--neon-cyan)
  );
}

.about__inner {
  display: block;
}

.about-poem {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.about-poem p {
  margin: 0;
  color: var(--paper-100);
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  font-weight: 800;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.news-top__header {
  display: grid;
  gap: 0.28rem;
}

.news-top__mark {
  width: max-content;
  padding: 0.18rem 0.52rem;
  color: #03101a;
  background: var(--neon-cyan);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.news-top__header h2 {
  letter-spacing: 0.02em;
}

.news-card__type {
  border: 0;
  border-radius: 0.15rem;
  color: #fff;
  background: var(--neon-violet);
}

.news-top__more {
  letter-spacing: 0.04em;
}

.button,
.global-nav .nav-cta,
.sticky-action {
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - 0.8rem) 0,
    100% 0.8rem,
    100% 100%,
    0.8rem 100%,
    0 calc(100% - 0.8rem)
  );
}

.road-list::before {
  width: 0.32rem;
  background: linear-gradient(
    var(--tcg-lime),
    var(--neon-cyan),
    var(--neon-violet),
    var(--tcg-orange)
  );
  box-shadow: 0 0 18px rgb(101 201 255 / 35%);
}

.road-step {
  min-height: 8.5rem;
  padding: 1.35rem 1rem 1.2rem 4.4rem;
  border: 2px solid rgb(101 201 255 / 34%);
  clip-path: polygon(
    0 0,
    calc(100% - 1rem) 0,
    100% 1rem,
    100% 100%,
    1rem 100%,
    0 calc(100% - 1rem)
  );
  background: rgb(2 5 11 / 88%);
}

.road-step > span {
  top: 1rem;
  left: 0.72rem;
  width: 2.65rem;
  height: 2.65rem;
  border: 0;
  border-radius: 0.15rem;
  color: #050914;
  background: linear-gradient(135deg, var(--tcg-lime), var(--neon-cyan));
  box-shadow: 0 0 20px rgb(101 201 255 / 28%);
  font-size: 1.15rem;
}

.road-step h3 {
  font-size: 1.22rem;
  letter-spacing: 0.01em;
}

.road-step--strong {
  border-color: rgb(255 100 38 / 62%);
  background:
    linear-gradient(135deg, rgb(255 100 38 / 13%), rgb(104 71 216 / 12%)),
    rgb(2 5 11 / 90%);
}

.road-step--strong > span {
  color: #fff;
  background: linear-gradient(135deg, var(--tcg-orange), var(--neon-magenta));
}

.road__cta {
  display: flex;
  margin-inline: auto;
}

.prizes {
  background:
    radial-gradient(
      circle at 50% 48%,
      rgb(104 71 216 / 22%),
      transparent 27rem
    ),
    radial-gradient(
      circle at 12% 28%,
      rgb(101 201 255 / 10%),
      transparent 22rem
    ),
    radial-gradient(circle at 88% 72%, rgb(255 100 38 / 9%), transparent 24rem),
    #02050b;
}

.prizes__header {
  position: relative;
  z-index: 5;
}

.prizes__header p {
  max-width: none;
  color: var(--paper-100);
  font-size: clamp(1rem, 3vw, 1.25rem);
}

.prize-scene {
  --camera-rx: 0deg;
  --camera-ry: 0deg;
  --camera-tx: 0px;
  --camera-ty: 0px;
  --scene-shine-x: 50%;
  --scene-shine-y: 32%;
  position: relative;
  height: clamp(44rem, 190vw, 54rem);
  margin: -1.25rem auto -1rem;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  perspective: 53rem;
  perspective-origin: 50% 48%;
}

.prize-scene::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 49%;
  left: 50%;
  width: min(52rem, 125%);
  aspect-ratio: 1;
  border: 1px solid rgb(101 201 255 / 24%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 42%,
    rgb(104 71 216 / 12%) 43% 44%,
    transparent 45% 56%,
    rgb(255 100 38 / 9%) 57% 58%,
    transparent 59%
  );
  box-shadow:
    0 0 5rem rgb(104 71 216 / 18%),
    inset 0 0 4rem rgb(101 201 255 / 8%);
  transform: translate3d(-50%, -50%, -16rem) rotateX(66deg);
  pointer-events: none;
}

.prize-scene::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 43% -42% -25%;
  background-image:
    linear-gradient(rgb(101 201 255 / 16%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(101 201 255 / 16%) 1px, transparent 1px);
  background-size: 3.25rem 3.25rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 28%,
    transparent 92%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 28%,
    transparent 92%
  );
  transform: translateZ(-20rem) rotateX(67deg);
  transform-origin: 50% 0;
  pointer-events: none;
}

.prize-scene__stars {
  position: absolute;
  z-index: 0;
  inset: 5% 2%;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 72%) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgb(101 201 255 / 58%) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgb(255 100 38 / 42%) 0 1.2px, transparent 1.7px);
  background-position:
    0 0,
    1.8rem 2.4rem,
    3.2rem 1rem;
  background-size:
    5.5rem 5.5rem,
    7.6rem 7.6rem,
    10rem 10rem;
  transform: translateZ(-14rem) scale(1.14);
  animation: prize-space-drift 18s ease-in-out infinite alternate;
  animation-play-state: paused;
  pointer-events: none;
}

.prize-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translate3d(var(--camera-tx), var(--camera-ty), 0)
    rotateX(var(--camera-rx)) rotateY(var(--camera-ry));
  transform-style: preserve-3d;
}

.prize-card {
  --card-x: 50%;
  --card-y: 49%;
  --card-z: 5.625rem;
  --card-rx: -2deg;
  --card-ry: -7deg;
  --card-rz: 3deg;
  --card-width: clamp(13.25rem, 62vw, 16rem);
  --float-x: 0.2rem;
  --float-y: -0.7rem;
  --float-z: 0.75rem;
  --float-r: 0.6deg;
  --float-duration: 7.4s;
  --float-delay: -2.4s;
  position: absolute;
  z-index: 3;
  top: var(--card-y);
  left: var(--card-x);
  width: var(--card-width);
  margin: 0;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.prize-card--runner-up {
  --card-x: 28%;
  --card-y: 18%;
  --card-z: -6.55rem;
  --card-rx: 5deg;
  --card-ry: 16deg;
  --card-rz: -12deg;
  --card-width: clamp(10.25rem, 46vw, 12.5rem);
  --float-x: 0.4rem;
  --float-y: -0.5rem;
  --float-z: 0.5rem;
  --float-r: -0.4deg;
  --float-duration: 9.3s;
  --float-delay: -4.1s;
  --prize-glow: rgb(220 236 255 / 20%);
  z-index: 1;
}

.prize-card--third {
  --card-x: 72%;
  --card-y: 80%;
  --card-z: -2.8rem;
  --card-rx: -3deg;
  --card-ry: -15deg;
  --card-rz: 10deg;
  --card-width: clamp(10.25rem, 46vw, 12.5rem);
  --float-x: -0.35rem;
  --float-y: -0.8rem;
  --float-z: 0.625rem;
  --float-r: 0.5deg;
  --float-duration: 8.1s;
  --float-delay: -3.2s;
  --prize-glow: rgb(255 100 38 / 20%);
  z-index: 2;
}

.prize-card__pose {
  transform: translateZ(var(--card-z)) rotateX(var(--card-rx))
    rotateY(var(--card-ry)) rotateZ(var(--card-rz));
  transform-style: preserve-3d;
}

.prize-card__float {
  margin: 0;
  transform-style: preserve-3d;
  animation: prize-card-drift var(--float-duration) ease-in-out infinite;
  animation-delay: var(--float-delay);
  animation-play-state: paused;
}

.prize-card__float::before {
  inset: 8% 5% 12%;
  border-radius: 30%;
  background: radial-gradient(circle, var(--prize-glow), transparent 68%);
  box-shadow: 0 1.5rem 4rem var(--prize-glow);
  filter: none;
  opacity: 0.86;
  transform: translate3d(0, 1.2rem, -2rem) scale(0.96);
}

.prize-card__image {
  overflow: hidden;
  border-width: 2px;
  border-radius: clamp(0.85rem, 2vw, 1.4rem);
  box-shadow: 0 1.6rem 3.5rem rgb(0 0 0 / 58%);
  transform: translateZ(0.01px) rotateX(var(--local-rx, 0deg))
    rotateY(var(--local-ry, 0deg));
  transition: box-shadow 260ms ease;
}

.prize-card__image::after {
  background:
    radial-gradient(
      circle at var(--scene-shine-x) var(--scene-shine-y),
      rgb(255 255 255 / 36%),
      transparent 26%
    ),
    linear-gradient(
      115deg,
      transparent 32%,
      rgb(255 255 255 / 15%) 47%,
      transparent 61%
    );
  opacity: 0.2;
}

.prize-card--runner-up .prize-card__image,
.prize-card--third .prize-card__image {
  filter: saturate(0.88) brightness(0.88);
}

.prize-card figcaption {
  position: relative;
  z-index: 4;
  margin-top: 0.7rem;
  padding: 0.58rem 0.72rem 0.52rem;
  border: 1px solid rgb(101 201 255 / 48%);
  border-top-width: 3px;
  clip-path: polygon(
    0 0,
    calc(100% - 0.65rem) 0,
    100% 0.65rem,
    100% 100%,
    0.65rem 100%,
    0 calc(100% - 0.65rem)
  );
  background: rgb(2 5 11 / 88%);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 34%);
  backdrop-filter: blur(8px);
}

.prize-card figcaption span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.prize-card figcaption strong {
  font-size: clamp(1rem, 4vw, 1.3rem);
  letter-spacing: 0.02em;
}

.prizes.is-motion-active .prize-grid,
.prizes.is-motion-active .prize-card__float {
  will-change: transform;
}

.prizes.is-motion-active .prize-card__float,
.prizes.is-motion-active .prize-scene__stars {
  animation-play-state: running;
}

@keyframes prize-card-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateZ(0);
  }
  50% {
    transform: translate3d(var(--float-x), var(--float-y), var(--float-z))
      rotateZ(var(--float-r));
  }
}

@keyframes prize-space-drift {
  from {
    transform: translate3d(-0.4rem, -0.25rem, -14rem) scale(1.14);
  }
  to {
    transform: translate3d(0.4rem, 0.3rem, -14rem) scale(1.17);
  }
}

.ranking-board,
.qualification-board {
  border-width: 2px;
}

.ranking-board__head {
  border: 0;
  color: #fff;
  background: linear-gradient(
    100deg,
    var(--neon-blue),
    var(--neon-violet) 68%,
    #7c2fae
  );
  font-weight: 900;
}

.ranking-row > b small {
  margin-left: 0.18rem;
  font-family: var(--font-ui);
  font-size: 0.56rem;
  letter-spacing: 0;
}

.tournament-facts {
  border-top: 3px solid var(--tcg-orange);
}

.tournament-facts dt {
  color: var(--neon-cyan);
  font-weight: 900;
}

.watch-card {
  border-width: 2px;
  border-color: rgb(104 71 216 / 58%);
  background: rgb(2 5 11 / 58%);
}

.watch-card h2 {
  font-size: clamp(2.35rem, 7vw, 4.4rem);
}

.champion-card {
  border-width: 2px;
  border-color: rgb(101 201 255 / 28%);
  box-shadow: inset 0 3px 0 rgb(104 71 216 / 55%);
}

.final-cta::before {
  display: none;
}

.final-cta h2 {
  font-size: clamp(2.75rem, 8vw, 5rem);
  letter-spacing: 0.01em;
}

@media (min-width: 48rem) {
  .section-header,
  .section-header--wide,
  .about .section-header {
    display: block;
    max-width: 60rem;
  }

  .about__inner {
    display: block;
  }

  .news-top__header {
    display: grid;
  }

  .road-list {
    gap: 0.75rem;
  }

  .road-list::before {
    inset: 2rem 1.5rem auto;
    width: auto;
    height: 0.32rem;
  }

  .road-step {
    min-height: 14rem;
    padding: 4.75rem 1.1rem 1.35rem;
  }

  .road-step > span {
    top: 1.05rem;
    left: 1rem;
  }

  .prize-scene {
    height: clamp(42rem, 72vw, 48rem);
    margin-top: -2rem;
    perspective: 65.625rem;
  }

  .prize-card--champion {
    --card-x: 50%;
    --card-y: 52%;
    --card-z: 8.75rem;
    --card-rx: -4deg;
    --card-ry: -7deg;
    --card-rz: 2deg;
    --card-width: 18rem;
    grid-column: auto;
    width: var(--card-width);
  }

  .prize-card--runner-up {
    --card-x: 23%;
    --card-y: 38%;
    --card-z: -6.25rem;
    --card-rx: 5deg;
    --card-ry: 17deg;
    --card-rz: -11deg;
    --card-width: 15rem;
    width: var(--card-width);
  }

  .prize-card--third {
    --card-x: 77%;
    --card-y: 41%;
    --card-z: -1.25rem;
    --card-rx: 2deg;
    --card-ry: -16deg;
    --card-rz: 10deg;
    --card-width: 15.5rem;
    width: var(--card-width);
  }
}

@media (min-width: 64rem) {
  .section-header--wide {
    display: block;
    max-width: 60rem;
  }

  .prize-scene {
    height: clamp(43rem, 58vw, 50rem);
    perspective: 75rem;
  }

  .prize-card--champion {
    --card-x: 49%;
    --card-y: 52%;
    --card-z: 11.25rem;
    --card-width: 19rem;
    width: var(--card-width);
    transform: translate(-50%, -50%);
  }

  .prize-card--runner-up {
    --card-x: 25.5%;
    --card-y: 40%;
    --card-z: -9.375rem;
    --card-rx: 5deg;
    --card-ry: 18deg;
    --card-rz: -11deg;
    --card-width: 16.5rem;
    width: var(--card-width);
  }

  .prize-card--third {
    --card-x: 75.5%;
    --card-y: 44%;
    --card-z: -1.25rem;
    --card-rx: 2deg;
    --card-ry: -17deg;
    --card-rz: 10deg;
    --card-width: 17.25rem;
    width: var(--card-width);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prize-grid {
    transform: none !important;
  }

  .prize-card__float,
  .prize-scene__stars {
    animation: none !important;
  }
}

/* Phase 6 — revision brief: aspirational hierarchy, editorial scale, restrained motion */
@property --runner-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.hero {
  isolation: isolate;
  perspective: 75rem;
}

.hero__poster,
.hero__layer-stage,
.hero__ambient {
  position: absolute;
  inset: 0;
}

.hero__poster {
  z-index: 0;
  overflow: hidden;
  transition: opacity 0.7s ease;
}

.hero__poster img {
  animation: none;
}

.hero__layer-stage {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transform-style: preserve-3d;
  transition: opacity 0.65s ease;
}

.hero.has-motion-layers .hero__layer-stage {
  opacity: 1;
}

.hero.has-motion-layers .hero__poster {
  opacity: 0;
  transition: none;
}

.hero-layer {
  --layer-scroll: 0px;
  position: absolute;
  inset: 0;
  transform: translate3d(0, var(--layer-scroll), 0);
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-layer__enter,
.hero-layer picture,
.hero-layer img {
  width: 100%;
  height: 100%;
}

.hero-layer img {
  object-fit: cover;
}

.hero-layer__enter {
  opacity: 0;
}

.hero.has-motion-layers .hero-layer__enter {
  animation: hero-layer-enter 0.9s var(--intro-delay)
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero.is-intro-skipped .hero-layer__enter {
  opacity: 1;
  animation: none;
}

.hero-layer__float {
  display: block;
  transform-origin: 50% 50%;
}

.hero-layer--background .hero-layer__float {
  animation: hero-layer-breathe 19s ease-in-out infinite alternate;
}

.hero-layer--character .hero-layer__float,
.hero-layer--cards .hero-layer__float {
  animation: hero-individual-float var(--float-duration) 2.4s ease-in-out
    infinite alternate;
}

.hero-layer--effects .hero-layer__float {
  animation: hero-layer-glimmer 12s ease-in-out infinite;
}

.hero-layer--logo .hero-layer__float,
.hero-layer--date .hero-layer__float {
  animation: none;
}

.hero.is-motion-paused .hero-layer__enter,
.hero.is-motion-paused .hero-layer__float,
.hero.is-motion-paused .hero__ambient i,
.hero.is-motion-paused .hero__poster img {
  animation-play-state: paused;
}

.hero__ambient {
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.hero.has-motion-layers .hero__ambient {
  opacity: 0.55;
}

[hidden] {
  display: none !important;
}
.qualification-row strong small {
  display: block;
  margin-top: 0.3rem;
  font-weight: 500;
}

.hero__ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 48%,
    transparent 35%,
    rgb(1 3 10 / 34%) 100%
  );
}

.hero__ambient i {
  position: absolute;
  top: -60%;
  width: 18%;
  height: 220%;
  opacity: 0;
  filter: blur(1.4rem);
  transform: rotate(18deg) translate3d(-35vw, 0, 0);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(119 229 255 / 32%),
    transparent
  );
  animation: hero-light-pass 11s ease-in-out infinite;
}

.hero__ambient i:nth-child(1) {
  left: 2%;
  animation-delay: 1.1s;
}
.hero__ambient i:nth-child(2) {
  left: 34%;
  width: 10%;
  animation-delay: 4.6s;
}
.hero__ambient i:nth-child(3) {
  left: 68%;
  width: 15%;
  animation-delay: 8.2s;
}

@keyframes hero-poster-enter {
  from {
    transform: scale(1.06) rotate(0.45deg);
    filter: brightness(0.62) saturate(0.82);
  }
  to {
    transform: scale(1.015) rotate(0);
    filter: brightness(1) saturate(1);
  }
}

@keyframes hero-poster-breathe {
  from {
    transform: scale(1.015);
  }
  to {
    transform: scale(1.035);
  }
}

@keyframes hero-layer-enter {
  from {
    opacity: 0;
    transform: translate3d(var(--intro-x), var(--intro-y), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-individual-float {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, var(--float-y), 0);
  }
}

@keyframes hero-layer-breathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.018);
  }
}

@keyframes hero-layer-float-back {
  from {
    transform: translate3d(-0.15rem, -0.12rem, 0) scale(1.006);
  }
  to {
    transform: translate3d(0.18rem, 0.18rem, 0) scale(1.012);
  }
}

@keyframes hero-layer-float-front {
  from {
    transform: translate3d(-0.28rem, 0.16rem, 0) scale(1.008);
  }
  to {
    transform: translate3d(0.32rem, -0.26rem, 0) scale(1.016);
  }
}

@keyframes hero-layer-glimmer {
  0%,
  70%,
  100% {
    opacity: 0.72;
    filter: brightness(0.9);
  }
  78% {
    opacity: 1;
    filter: brightness(1.28);
  }
}

@keyframes hero-light-pass {
  0%,
  68% {
    opacity: 0;
    transform: rotate(18deg) translate3d(-35vw, 0, 0);
  }
  72% {
    opacity: 0.4;
  }
  86% {
    opacity: 0.12;
  }
  92%,
  100% {
    opacity: 0;
    transform: rotate(18deg) translate3d(75vw, 0, 0);
  }
}

.competition-atmosphere {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050914;
}

.competition-atmosphere__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 28%, rgb(101 201 255 / 10%), transparent 32%),
    radial-gradient(circle at 84% 70%, rgb(104 71 216 / 13%), transparent 35%),
    #050914;
}

.competition-atmosphere__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.68) contrast(1.08);
  transition: opacity 1s ease;
}

.competition-atmosphere.is-video-ready .competition-atmosphere__media video,
.competition-atmosphere.is-poster-ready .competition-atmosphere__media video {
  opacity: 0.24;
}

.competition-atmosphere__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(3 6 15 / 88%),
    rgb(3 7 17 / 72%) 44%,
    rgb(3 6 15 / 92%)
  );
  pointer-events: none;
}

.competition-atmosphere .about,
.competition-atmosphere .road {
  position: relative;
  z-index: 1;
  background: transparent;
}

.section-heading {
  --heading-shift: 0%;
  position: relative;
  display: grid;
  min-height: clamp(7.5rem, 15vw, 11rem);
  place-content: center;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  isolation: isolate;
}

.section-heading__en {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  max-width: 112vw;
  color: rgb(173 214 255 / 8%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(4.6rem, 13vw, 10.5rem);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.045em;
  white-space: nowrap;
  transform: translate(calc(-50% + var(--heading-shift)), -50%);
  -webkit-text-stroke: 0;
  font-synthesis: none;
  pointer-events: none;
}

.section-heading__ja {
  position: relative;
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 5.25rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-shadow: 0 0.12em 0.6em rgb(0 0 0 / 48%);
}

.section-heading__ja::after {
  content: '';
  display: block;
  width: min(12rem, 55%);
  height: 0.32rem;
  margin: 0.28em auto 0;
  background: linear-gradient(
    90deg,
    var(--neon-violet),
    var(--neon-cyan) 65%,
    var(--tcg-orange)
  );
  box-shadow: 0 0 1.2rem rgb(101 201 255 / 30%);
}

.section-heading > p {
  max-width: 48rem;
  margin: 1.25rem auto 0;
  color: var(--paper-300);
  font-weight: 700;
}

.section-heading > p strong {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: var(--paper-100);
  font-size: clamp(1.08rem, 3vw, 1.45rem);
}

.section-heading--about {
  --heading-shift: -4%;
}
.section-heading--road {
  --heading-shift: 4%;
}
.section-heading--prizes {
  --heading-shift: -3%;
}
.section-heading--players {
  --heading-shift: 5%;
}
.section-heading--tournament {
  --heading-shift: -4%;
}
.section-heading--live {
  --heading-shift: 5%;
}
.section-heading--champions {
  --heading-shift: -3%;
}

.section-heading--news {
  min-height: 5rem;
  margin: 0;
  place-content: start;
  text-align: left;
}

.section-heading--news .section-heading__en {
  top: 50%;
  left: 0;
  font-size: clamp(3.8rem, 7vw, 6rem);
  transform: translate(-0.08em, -50%);
}

.section-heading--news .section-heading__ja {
  align-self: center;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.section-heading--news .section-heading__ja::after {
  width: 4rem;
  margin: 0.3rem 0 0;
}

.road__intro {
  max-width: 48rem;
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
  color: var(--paper-200);
  font-size: clamp(1rem, 2.5vw, 1.18rem);
  font-weight: 700;
  line-height: 2;
  text-align: center;
}

.report-feature {
  display: grid;
  gap: 2rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  max-width: 72rem;
  align-items: center;
}
.report-feature__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1rem;
}
.report-feature figure {
  margin: 0;
}
.report-feature img {
  width: 100%;
  height: auto;
  border: 1px solid rgb(150 204 255 / 24%);
}
.report-feature__main {
  grid-column: 1 / -1;
}
.report-feature__detail {
  grid-column: 2;
}
.report-feature figcaption {
  padding-top: 0.4rem;
  color: #a9bdd0;
  font-size: 0.7rem;
}
.report-feature__label {
  color: var(--neon-cyan);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.report-feature h3 {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}
.report-feature__copy p {
  color: var(--paper-300);
  line-height: 1.9;
}
.report-feature__actions {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  text-align: center;
}
.report-feature__copy .button {
  width: fit-content;
  max-width: 100%;
}
.report-feature__copy small {
  display: block;
  color: #a9bdd0;
}
.road-guidance {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 1.5rem;
  border-left: 3px solid var(--neon-cyan);
  background: rgb(40 72 113 / 14%);
}
.road-guidance h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
}
.road-guidance p {
  font-size: 0.88rem;
  color: var(--paper-300);
}
.road-guidance a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 1rem;
  font-size: 0.85rem;
  font-weight: 800;
}
.tournament-date time {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
}
.tournament-date time strong {
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.2;
  color: var(--paper-100);
}
.tournament-date time span {
  font-size: 0.85rem;
}
.champion-card__photo {
  display: block;
  width: 7rem;
  height: auto;
  margin-bottom: 1rem;
  border: 1px solid rgb(150 204 255 / 24%);
}
.champion-card--photo {
  align-self: stretch;
}
@media (min-width: 48rem) {
  .report-feature {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 3rem;
  }
  .champion-grid {
    align-items: stretch;
  }
}

.about__logo {
  width: min(25rem, 76%);
  height: auto;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  filter: drop-shadow(0 0.8rem 2.2rem rgb(224 199 127 / 15%));
}

.road-pyramid {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
  max-width: 60rem;
  margin: 0 auto 3rem;
  padding: 0;
  list-style: none;
}
.road-tier {
  --cut-top: 10%;
  --cut-bottom: 0%;
  --tier-color: #26374f;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch;
  column-gap: clamp(1.5rem, 5vw, 4rem);
  position: relative;
  min-height: 6rem;
}
.road-tier::before {
  content: '';
  grid-area: 1 / 1;
  background: linear-gradient(
    110deg,
    var(--tier-color),
    color-mix(in srgb, var(--tier-color), #fff 22%)
  );
  clip-path: polygon(
    var(--cut-top) 0,
    calc(100% - var(--cut-top)) 0,
    calc(100% - var(--cut-bottom)) 100%,
    var(--cut-bottom) 100%
  );
}
.road-tier__copy {
  grid-area: 1 / 2;
  align-self: center;
  position: relative;
  padding: 0.8rem 0;
  text-align: left;
}
.road-tier__copy::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 0.6rem);
  width: clamp(0.8rem, 3vw, 2.5rem);
  height: 1px;
  background: color-mix(in srgb, var(--tier-color), #fff 30%);
}
.road-tier__copy > span {
  display: block;
  color: #98afc8;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.road-tier h3 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.1rem, 2.3vw, 1.7rem);
  line-height: 1.35;
}
.road-tier p {
  margin: 0.4rem 0 0;
  color: var(--paper-300);
  font-size: 0.88rem;
  line-height: 1.7;
}
.road-tier--beginner {
  --cut-top: 20%;
  --cut-bottom: 10%;
  --tier-color: #23597a;
}
.road-tier--main {
  --cut-top: 30%;
  --cut-bottom: 20%;
  --tier-color: #365cba;
}
.road-tier--master {
  --cut-top: 40%;
  --cut-bottom: 30%;
  --tier-color: #7340b9;
}
.road-tier--gcs {
  --cut-top: 50%;
  --cut-bottom: 40%;
  --tier-color: #c49a3e;
}
.road-tier--gcs h3 {
  color: #f5d887;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
}
.road-tier--gcs .road-tier__copy > span {
  color: #e0c77f;
}
.road__cta {
  width: fit-content;
  max-width: 100%;
  min-width: 17rem;
  padding-inline: 2rem;
}
@media (max-width: 47.99rem) {
  .road-tier {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    column-gap: 1rem;
    min-height: 5rem;
  }
  .road-tier__copy {
    padding: 0.35rem 0;
  }
  .road-tier h3 {
    font-size: 1rem;
  }
  .road-tier--gcs h3 {
    font-size: 1.25rem;
  }
  .road-tier:not(.road-tier--gcs) .road-tier__copy > span {
    display: none;
  }
  .road-tier p {
    font-size: 0.76rem;
  }
  .road-tier__copy::before {
    width: 0.7rem;
    right: calc(100% + 0.25rem);
  }
  .road__cta {
    width: 100%;
    min-width: 0;
  }
  .news--top .news-card {
    grid-template-columns: auto 1fr auto;
    gap: 0.3rem 0.65rem;
    min-height: 5rem;
  }
  .news--top .news-card time {
    grid-column: 1;
  }
  .news--top .news-card__type {
    justify-self: start;
  }
  .news--top .news-card h3 {
    grid-column: 1 / 3;
    grid-row: 2;
    font-size: 0.88rem;
  }
  .news--top .news-card__arrow {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

.reveal-ready [data-reveal],
.reveal-ready [data-road-pyramid] [data-road-tier] {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}

.reveal-ready [data-reveal].is-inview {
  opacity: 1;
  transform: translateZ(0);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-ready [data-road-pyramid].is-inview [data-road-tier] {
  opacity: 1;
  transform: translateZ(0);
  transition:
    opacity 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-ready [data-road-pyramid].is-inview [data-road-tier]:nth-child(1) {
  transition-delay: 0s;
}
.reveal-ready [data-road-pyramid].is-inview [data-road-tier]:nth-child(2) {
  transition-delay: 0.13s;
}
.reveal-ready [data-road-pyramid].is-inview [data-road-tier]:nth-child(3) {
  transition-delay: 0.26s;
}
.reveal-ready [data-road-pyramid].is-inview [data-road-tier]:nth-child(4) {
  transition-delay: 0.39s;
}
.reveal-ready [data-road-pyramid].is-inview [data-road-tier]:nth-child(5) {
  transition-delay: 0.52s;
}

.prize-showcase {
  --slide-width: min(76vw, 28rem);
  position: relative;
  margin-inline: auto;
}

.prize-showcase__viewport {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.prize-showcase__viewport::-webkit-scrollbar {
  display: none;
}
.prize-showcase__viewport:active {
  cursor: grabbing;
}
.prize-showcase__viewport.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.prize-showcase__viewport img {
  -webkit-user-drag: none;
  user-select: none;
}

.prize-showcase__track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 5vw, 4rem);
  width: max-content;
  padding: 3rem
    max(
      0px,
      calc((var(--prize-viewport-width, 100vw) - var(--slide-width)) / 2)
    )
    4.5rem;
}

.prize-slide {
  flex: 0 0 var(--slide-width);
  width: var(--slide-width);
  min-width: 0;
  max-width: var(--slide-width);
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  perspective: 75rem;
  opacity: 1;
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.45s ease;
}

.js .prize-slide:not(.is-current) {
  opacity: 0.54;
  transform: scale(0.88);
}

.prize-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

.prize-showcase .prize-card__image {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 25%;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 2px solid rgb(181 216 255 / 28%);
  border-radius: clamp(1rem, 2.5vw, 1.5rem);
  background: #08101d;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 52%);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.32s ease;
}

.prize-showcase .prize-card__image::after {
  content: none;
}

.prize-showcase .prize-card__image.is-tilting {
  box-shadow:
    0 2.6rem 6rem rgb(0 0 0 / 62%),
    0 0 2.5rem rgb(101 201 255 / 13%);
  transition-duration: 0.08s;
}

.prize-showcase .prize-card__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.prize-card__foil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.1;
  background:
    radial-gradient(
      circle at var(--shine-x) var(--shine-y),
      rgb(255 255 255 / 76%) 0 2%,
      rgb(95 220 255 / 28%) 11%,
      transparent 30%
    ),
    repeating-linear-gradient(
      118deg,
      transparent 0 9%,
      rgb(84 229 255 / 12%) 12%,
      rgb(255 73 211 / 15%) 14%,
      transparent 18%
    ),
    conic-gradient(
      from 210deg at var(--shine-x) var(--shine-y),
      transparent,
      rgb(86 226 255 / 30%),
      rgb(184 96 255 / 28%),
      rgb(255 196 74 / 24%),
      transparent 58%
    );
  background-size:
    100% 100%,
    220% 220%,
    145% 145%;
  background-position:
    center,
    var(--shine-x) var(--shine-y),
    center;
  mix-blend-mode: screen;
  transition:
    opacity 0.25s ease,
    background-position 0.08s linear;
  pointer-events: none;
}

.prize-card__image.is-tilting .prize-card__foil {
  opacity: 0.27;
}

.prize-card__image.is-shining .prize-card__foil {
  animation: prize-foil-pass 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.prize-slide--champion .prize-card__image {
  border-color: rgb(245 218 130 / 62%);
  box-shadow:
    0 2rem 5.5rem rgb(178 136 27 / 18%),
    0 0 2rem rgb(224 199 127 / 12%);
}

.prize-slide figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-top: 3px solid var(--neon-cyan);
  background: rgb(5 10 22 / 82%);
}

.prize-slide figcaption span {
  color: var(--paper-300);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.prize-slide figcaption strong {
  justify-self: end;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
}

.prize-slide--champion figcaption {
  border-color: var(--gold-300);
}

.prize-slide--champion figcaption span,
.prize-slide--champion figcaption strong {
  color: var(--gold-300);
}
.prize-slide--third figcaption {
  border-color: #d25e4c;
}

.prize-showcase__controls {
  display: grid;
  grid-template-columns: 3rem auto 1fr 3rem;
  max-width: 34rem;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
}

.prize-showcase__arrow {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(101 201 255 / 48%);
  color: #fff;
  background: rgb(3 8 18 / 82%);
  font-size: 1.8rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    opacity 0.2s ease;
}

.prize-showcase__arrow:hover,
.prize-showcase__arrow:focus-visible {
  border-color: var(--neon-cyan);
  background: rgb(31 70 117 / 74%);
}

.prize-showcase__arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.prize-showcase__status {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 900;
}

.prize-showcase__status strong {
  color: var(--neon-cyan);
  font-size: 1.45rem;
}

.prize-showcase__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
}

.prize-showcase__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.prize-showcase__dot::before {
  content: '';
  width: 2.4rem;
  height: 0.28rem;
  background: rgb(184 213 240 / 23%);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.prize-showcase__dot.is-current::before {
  background: linear-gradient(90deg, var(--neon-violet), var(--neon-cyan));
  box-shadow: 0 0 0.8rem rgb(101 201 255 / 42%);
}

@keyframes prize-foil-pass {
  from {
    opacity: 0.06;
    background-position:
      center,
      -80% 50%,
      center;
  }
  45% {
    opacity: 0.3;
  }
  to {
    opacity: 0.1;
    background-position:
      center,
      180% 50%,
      center;
  }
}

.qualification-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: -1.25rem auto 2rem;
}

.qualification-badges span,
.qualification-badges strong {
  padding: 0.38rem 0.72rem;
  border: 1px solid rgb(101 201 255 / 32%);
  color: var(--paper-300);
  background: rgb(3 8 18 / 72%);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.qualification-badges strong {
  border-color: var(--gold-300);
  color: var(--gold-300);
  box-shadow: 0 0 1rem rgb(224 199 127 / 14%);
}

.qualification-row > strong {
  color: var(--gold-300);
}

.button,
.global-nav .nav-cta,
.sticky-action,
.news-top__more {
  overflow: hidden;
  isolation: isolate;
}

.button,
.global-nav .nav-cta,
.news-top__more {
  position: relative;
}

.news-top__more {
  min-height: 2.75rem;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgb(101 201 255 / 25%);
  clip-path: polygon(
    0 0,
    calc(100% - 0.55rem) 0,
    100% 0.55rem,
    100% 100%,
    0.55rem 100%,
    0 calc(100% - 0.55rem)
  );
}

.button::after,
.global-nav .nav-cta::after,
.sticky-action::after,
.news-top__more::after {
  --runner-angle: 0deg;
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 2px;
  clip-path: inherit;
  opacity: 0;
  background: conic-gradient(
    from var(--runner-angle),
    transparent 0 72%,
    rgb(255 255 255 / 95%) 80%,
    var(--neon-cyan) 86%,
    var(--neon-magenta) 91%,
    transparent 98%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover::after,
  .global-nav .nav-cta:hover::after,
  .sticky-action:hover::after,
  .news-top__more:hover::after {
    opacity: 1;
    animation: button-border-orbit 0.9s linear;
  }
}

.button:focus-visible::after,
.global-nav .nav-cta:focus-visible::after,
.sticky-action:focus-visible::after,
.news-top__more:focus-visible::after {
  opacity: 1;
  animation: button-border-orbit 0.9s linear;
}

@keyframes button-border-orbit {
  to {
    --runner-angle: 360deg;
  }
}

@media (min-width: 48rem) {
  .news-top__inner {
    grid-template-columns: 12rem minmax(0, 1fr) auto;
  }

  .tournament-layout > .section-heading {
    grid-row: span 2;
    align-self: start;
  }

  .prize-showcase {
    --slide-width: min(46vw, 31rem);
  }

  /* The carousel viewport stays full-width on desktop as well. */
}

@media (prefers-reduced-motion: reduce) {
  .hero__poster img,
  .hero-layer,
  .hero-layer__enter,
  .hero-layer__float,
  .hero__ambient i,
  .prize-card__foil,
  .button::after,
  .global-nav .nav-cta::after,
  .sticky-action::after,
  .news-top__more::after {
    animation: none !important;
  }

  .hero-layer {
    transform: none !important;
    transition: none;
  }

  .hero__ambient {
    display: none;
  }

  .reveal-ready [data-reveal],
  .reveal-ready [data-road-pyramid] [data-road-tier] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .prize-showcase__viewport {
    scroll-behavior: auto;
  }

  .prize-showcase .prize-card__image {
    transform: none !important;
    transition: none;
  }

  .button:focus-visible::after,
  .global-nav .nav-cta:focus-visible::after,
  .sticky-action:focus-visible::after,
  .news-top__more:focus-visible::after {
    opacity: 1;
    background: var(--neon-cyan);
  }
}