/* Section styles: champion: belt spotlight reveal, medallion stage "champion-medallion", fight-night strip.
   Unlayered, so it overrides css/base.css. Every selector is scoped under [data-section="champion"]. */

/* ------------------------------------------------------------ intro grid: name (sticky on wide screens) + belt */
[data-section="champion"] .champion__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px) clamp(28px, 5vw, 88px);
  align-items: start;
}
@media (min-width: 700px) {
  [data-section="champion"] .champion__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
[data-section="champion"] .champion__copy {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  align-content: start;
}
@media (min-width: 700px) {
  [data-section="champion"] .champion__copy { position: sticky; top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); padding-top: clamp(8px, 4vw, 64px); }
}
[data-section="champion"] .champion__name { margin-top: 2px; }
[data-section="champion"] .champion__line { margin-top: clamp(6px, 1vw, 14px); max-width: 30ch; }

/* ------------------------------------------------------------ belt: B&W everywhere, colour + gold under the light */
[data-section="champion"] .champion__belt {
  --sx: 33%;
  --sy: 40%;
  --sr: 220px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  aspect-ratio: var(--ar, 3 / 4);
  background: #050505;
  border-radius: var(--radius);
  touch-action: pan-y;
}
[data-section="champion"] .champion__belt > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 48% 32%);
}
[data-section="champion"] .champion__belt-bw { filter: grayscale(1) contrast(1.22) brightness(.42); }
[data-section="champion"] .champion__belt-color {
  filter: saturate(1.25) contrast(1.08) brightness(1.08);
  -webkit-mask-image: radial-gradient(circle var(--sr) at var(--sx) var(--sy), #000 0%, #000 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle var(--sr) at var(--sx) var(--sy), #000 0%, #000 34%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, 0) 100%);
}
/* gold light in the spot (soft-light keeps skin tones, warms the metal) */
[data-section="champion"] .champion__glint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle var(--sr) at var(--sx) var(--sy), rgba(255, 210, 130, .42) 0%, rgba(201, 165, 90, .18) 45%, rgba(201, 165, 90, 0) 100%);
  mix-blend-mode: soft-light;
}
[data-section="champion"] .champion__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(201, 165, 90, .26);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 -120px 120px -60px rgba(5, 5, 5, .55);
}
/* short landscape phones: every picture fits inside the screen height (height drives the width) */
@media (orientation: landscape) and (max-height: 520px) {
  [data-section="champion"] .champion__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  [data-section="champion"] .champion__copy { position: static; padding-top: 0; }
  [data-section="champion"] .champion__belt { --h: calc(100svh - var(--nav-h) - 32px); height: var(--h); width: calc(var(--h) * .75); max-width: 100%; justify-self: end; }
}

/* ------------------------------------------------------------ medallion case + fist portrait */
[data-section="champion"] .champion__duo {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(48px, 7vw, 112px);
  align-items: end;
}
@media (min-width: 640px) {
  [data-section="champion"] .champion__duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
[data-section="champion"] .champion__case {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(60% 48% at 50% 46%, rgba(201, 165, 90, .16), rgba(201, 165, 90, 0) 70%),
    radial-gradient(70% 22% at 50% 100%, rgba(217, 28, 28, .12), rgba(217, 28, 28, 0) 70%),
    linear-gradient(180deg, #0d0c0b 0%, #070707 100%);
}
/* corner ticks: a display case */
[data-section="champion"] .champion__case::before,
[data-section="champion"] .champion__case::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-color: rgba(201, 165, 90, .6);
  border-style: solid;
}
[data-section="champion"] .champion__case::before { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
[data-section="champion"] .champion__case::after { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
[data-section="champion"] .champion__medallion {
  --ar: 1 / 1;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
html[data-stage="off"] [data-section="champion"] .champion__medallion { cursor: auto; }
[data-section="champion"] .champion__poster { object-fit: contain; }
[data-section="champion"] .champion__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(12px, 2vw, 20px);
  transform: translateX(-50%);
  padding: 8px 12px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--bone);                     /* type: .hint (on a plate here, so bone, not mute) */
  pointer-events: none;
}
[data-section="champion"] .champion__hint-arrows { color: var(--gold); }
/* the hint is for touch; a fine pointer gets the cursor label. No 3D = nothing to drag. */
html[data-pointer="fine"] [data-section="champion"] .champion__hint,
html[data-stage="off"] [data-section="champion"] .champion__hint,
html.no-js [data-section="champion"] .champion__hint { display: none; }

[data-section="champion"] .champion__fist { margin: 0; }
@media (orientation: landscape) and (max-height: 520px) {
  [data-section="champion"] .champion__duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  [data-section="champion"] .champion__case { width: min(100%, calc(100svh - var(--nav-h) - 32px)); justify-self: center; }
  [data-section="champion"] .champion__fist { --h: calc(100svh - var(--nav-h) - 32px); height: var(--h); width: calc(var(--h) * .8); max-width: 100%; justify-self: center; }
}
[data-section="champion"] .champion__fist::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: inherit;
}

/* ------------------------------------------------------------ fight-night film strip */
[data-section="champion"] .champion__reel { margin-top: clamp(56px, 8vw, 128px); }
[data-section="champion"] .champion__strip {
  --edge: max(var(--safe-l), calc((100% - var(--maxw)) / 2));
  margin-top: 0;
  scroll-padding-inline: var(--edge);
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  outline-offset: -2px;
}
[data-section="champion"] .champion__strip.is-dragging { cursor: grabbing; }
[data-section="champion"] .champion__strip:focus-visible { outline: 2px solid var(--bone); }
[data-section="champion"] .champion__strip .strip__track {
  gap: clamp(10px, 1.2vw, 16px);
  padding: 40px var(--edge);
  padding-right: max(var(--safe-r), calc((100% - var(--maxw)) / 2));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0 10px, rgba(237, 232, 223, .13) 10px 22px, rgba(0, 0, 0, 0) 22px) 0 8px / 34px 11px repeat-x,
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0 10px, rgba(237, 232, 223, .13) 10px 22px, rgba(0, 0, 0, 0) 22px) 0 calc(100% - 8px) / 34px 11px repeat-x,
    #0a0a0b;
  border-block: 1px solid var(--line);
}
[data-section="champion"] .strip__frame {
  position: relative;
  width: clamp(220px, 70vw, 380px);
}
/* landscape phones: one whole frame (3:4 photo + its number) fits between the nav and the bottom edge */
@media (orientation: landscape) and (max-height: 520px) {
  [data-section="champion"] .strip__frame { width: min(240px, 40vw, calc((100svh - var(--nav-h) - 84px) * .75)); }
  [data-section="champion"] .champion__strip .strip__track { padding-block: 32px; }
}
[data-section="champion"] .strip__frame > .media {
  border-radius: 1px;
  background: #000;
  transition: box-shadow .5s var(--ease-out);
}
[data-section="champion"] .strip__frame img {
  filter: grayscale(1) brightness(.62) contrast(1.12);
  transform: scale(1.001);
  transition: filter .6s var(--ease-out), transform .9s var(--ease-out);
  -webkit-user-drag: none;
  pointer-events: none;
}
[data-section="champion"] .strip__no {
  position: absolute;
  left: 2px;
  top: -19px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .12em;
  color: var(--gold);
  pointer-events: none;
}
/* full colour + slight zoom: hover (fine pointer), tap / keyboard (.is-on) */
@media (hover: hover) and (pointer: fine) {
  [data-section="champion"] .strip__frame:hover img { filter: none; transform: scale(1.06); }
  [data-section="champion"] .strip__frame:hover > .media { box-shadow: 0 0 0 1px rgba(201, 165, 90, .7); }
  [data-section="champion"] .champion__strip.is-dragging .strip__frame:hover img { transform: scale(1.03); }
}
[data-section="champion"] .strip__frame.is-on img { filter: none; transform: scale(1.06); }
[data-section="champion"] .strip__frame.is-on > .media { box-shadow: 0 0 0 1px rgba(201, 165, 90, .7); }

[data-section="champion"] .champion__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
[data-section="champion"] .champion__nav {
  display: inline-grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bone);
  font-size: 18px;
  line-height: 1;
  transition: background-color .25s, border-color .25s, color .25s, opacity .25s;
}
[data-section="champion"] .champion__nav:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  [data-section="champion"] .champion__nav:not(:disabled):hover { background: var(--blood); border-color: transparent; color: var(--white); }
}
[data-section="champion"] .champion__nav:not(:disabled):active { background: var(--blood-deep); color: var(--white); }
[data-section="champion"] .champion__bar {
  position: relative;
  flex: 1;
  height: 2px;
  margin-inline: 10px;
  background: var(--line-2);
  overflow: hidden;
}
[data-section="champion"] .champion__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: scaleX(.04);
}
[data-section="champion"] .champion__count {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  color: var(--mute);
}
[data-section="champion"] .champion__count-cur { font-weight: 500; color: var(--bone); }
.no-js [data-section="champion"] .champion__controls { display: none; }

/* reduced motion: frames in colour, no zoom */
[data-motion="reduced"] [data-section="champion"] .strip__frame img { filter: grayscale(.35) brightness(.85); transform: none !important; }