/* select.css — layout and slot states for the select screen.
   Three zones (headshot / info / full-body) over a 16-slot grid,
   fixed viewport, no scroll. Slot states are pure CSS in Phase 1. */

html,
body {
  height: 100%;
  overflow: hidden;
}

.select-screen {
  position: relative;
  z-index: 1; /* above .select-bg */
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(0.75rem, 2vh, 1.5rem);
  padding: clamp(1rem, 2.5vw, 2.5rem);
}

/* ---- Per-fighter backdrop art ----
   Fighters without a `background` in the JSON simply show the charcoal
   shell. The art is dimmed and scrimmed so the name and panels stay the
   subject; it reads as atmosphere behind them, not competition. */

.select-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}

/* contain, not cover: show the art at its own proportions, centred, rather
   than blowing it up to fill the viewport and cropping the figure. Artwork
   can be any aspect ratio; it is never stretched or cut.
   screen blend drops the black backdrop the art is drawn on, so there is no
   visible rectangle edge against the shell — only the line work shows. */
/* .select-bg .layer img — must out-specify the generic `.layer img` rule
   below, which sets object-fit: cover for the headshot/full-body panels. */
.select-bg .layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* Darkest through the middle, where the name and tagline sit */
.select-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 58% at 50% 48%, rgba(16, 16, 20, 0.92), rgba(16, 16, 20, 0.4) 78%),
    linear-gradient(to bottom, rgba(16, 16, 20, 0.55), transparent 22%, transparent 72%, rgba(16, 16, 20, 0.85));
}

/* ---- Header ---- */

.select-header {
  text-align: center;
}

.select-header {
  position: relative;
}

.select-header h1 {
  font-size: var(--text-header);
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* re-center: tracking adds trailing space */
  color: var(--paper);
}

/* Sound toggle — muted by default, sits out of the way in the corner */

.sound-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.75em;
  color: color-mix(in srgb, var(--paper) 45%, var(--ink));
  transition: color 0.2s ease;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  color: var(--paper);
}

.sound-dot {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sound-toggle[aria-pressed="true"] {
  color: var(--accent);
}

.sound-toggle[aria-pressed="true"] .sound-dot {
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 700px) {
  .sound-toggle {
    position: static;
    transform: none;
    margin: 0.5rem auto 0;
  }
}

/* ---- Stage: the three zones ---- */

.stage {
  display: grid;
  grid-template-columns: minmax(200px, 26%) 1fr minmax(220px, 30%);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: stretch;
  min-height: 0; /* allow panels to shrink inside the fixed viewport */
}

/* Headshot panel (left) — 4:5 frame, image covers */

.panel-headshot {
  align-self: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
}

/* Swap layers — both panels stack two; only .is-active is visible.
   Phase 3 turns the flip into a crossfade. */

.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.layer.is-active {
  opacity: 1;
}

.layer img,
.layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Locked treatment: near-black well with a large "?" over the headshot */

.panel-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(4rem, 10vw, 9rem);
  color: color-mix(in srgb, var(--paper) 14%, var(--ink));
  background: var(--ink-sunken);
  opacity: 0;
  pointer-events: none;
}

.panel-headshot.is-locked .panel-q {
  opacity: 1;
}

.info.is-locked .info-confirm {
  visibility: hidden;
}

/* ---- Motion elements (driven by GSAP in select.js) ---- */

/* Thin accent line that wipes down the headshot panel during a swap */
.sweep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Name letters rise out of a clipped line */
.info-name {
  overflow: hidden;
}

.info-name .word {
  display: inline-block; /* words wrap as units, never mid-word */
}

.info-name .char {
  display: inline-block;
}

/* Full-viewport accent panel that masks navigation on confirm */
.confirm-wipe {
  position: fixed;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  pointer-events: none;
  z-index: 100;
}

/* Expanding accent ring on the confirmed slot */
.slot-ring {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* During confirm, everything but the chosen slot dims and desaturates */
.roster.is-confirming .slot:not(.is-focused) {
  filter: saturate(0) brightness(0.55);
  transition: filter 0.3s ease;
}

/* Full-body panel (right) — fighter over the (future) smoke canvas.
   Source PNGs are opaque, so v1 treats this as a framed image; the
   cutout-vs-mask decision is made at the smoke phase. */

.panel-fullbody {
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
}

.panel-fullbody .smoke-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.panel-fullbody .layer img {
  object-position: top center;
}

/* Ground the figure into the panel until real smoke arrives */
.panel-fullbody::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, transparent 45%);
  pointer-events: none;
}

/* Info block (center) */

.info {
  align-self: center;
  text-align: center;
  display: grid;
  gap: clamp(0.5rem, 1.5vh, 1rem);
  min-width: 0;
}

.info-name {
  font-size: var(--text-name);
  color: var(--paper);
  /* break-word, not anywhere: long names wrap at the space ("VALENTINA /
     SOUZA"), never mid-word. Only a single unbreakable word splits. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Long multi-word names get a step down so they still fit the centre column */
.info-name.is-long {
  font-size: calc(var(--text-name) * 0.68);
}

.info-location {
  color: var(--accent);
}

.info-tagline {
  max-width: 34ch;
  margin-inline: auto;
  color: color-mix(in srgb, var(--paper) 78%, var(--ink));
}

.info-confirm {
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
  color: color-mix(in srgb, var(--paper) 45%, var(--ink));
}

/* ---- Slot grid ---- */

.roster {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: clamp(0.3rem, 0.6vw, 0.6rem);
  justify-content: center;
}

.slot {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink-sunken);
  border: 1px solid var(--hairline);
  padding: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.35); /* dormant: wall of silhouettes */
  transition: filter 0.2s ease;
}

.slot-num {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-family: var(--font-utility);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--paper) 40%, var(--ink));
  pointer-events: none;
}

/* Focused: hover now, arrow-key cursor in Phase 2 (.is-focused) */
.slot:hover,
.slot:focus-visible,
.slot.is-focused {
  border-color: var(--accent);
  transform: scale(1.06);
  z-index: 1;
}

.slot:hover img,
.slot:focus-visible img,
.slot.is-focused img {
  filter: grayscale(0) brightness(1);
}

/* Locked "?" slots — darker still, focusable, never confirmable */

.slot--locked {
  background: var(--ink-sunken);
  display: grid;
  place-items: center;
}

.slot--locked .slot-q {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(1rem, 2.4vw, 2rem);
  color: color-mix(in srgb, var(--paper) 22%, var(--ink));
  transition: color 0.2s ease;
}

.slot--locked:hover .slot-q,
.slot--locked:focus-visible .slot-q,
.slot--locked.is-focused .slot-q {
  color: color-mix(in srgb, var(--paper) 60%, var(--ink));
}

/* ---- Responsive: 8x2 below ~1200px, 4x4 on mobile ---- */

@media (max-width: 1200px) {
  .roster {
    grid-template-columns: repeat(8, 1fr);
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 700px) {
  .select-screen {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .select-header h1 {
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }

  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "headshot fullbody"
      "info info";
    gap: 0.75rem;
  }

  /* Panels fill equal cells; the 4:5 lock returns on wider screens */
  .panel-headshot {
    grid-area: headshot;
    align-self: stretch;
    aspect-ratio: auto;
    height: 100%;
  }

  .panel-fullbody { grid-area: fullbody; }

  .info {
    grid-area: info;
    gap: 0.35rem;
  }

  .info-name { font-size: clamp(1.8rem, 9vw, 2.6rem); }

  .info-confirm { margin-top: 0.25rem; }

  .roster {
    grid-template-columns: repeat(4, 1fr);
    max-width: min(360px, 100%);
  }
}