/* VTuber Smash: page styles for the home, game, roster and 404 pages.
   Load after site.css. Every color comes from the tokens in site.css (the swatch buttons take
   the game's own swatch colors from their inline --swatch). These rules lay out page parts and
   adjust a shared component only inside a page part (roster cards, team picks, special cards).

   Sections
    1 shared            2 home hero          3 match steps         4 weapon chips
    5 color box demo    6 community panels   7 For VTubers band    8 game page
    9 roster page      10 404 page */

/* 1. Shared ----------------------------------------------------------------- */

/* Controls that only work with script stay out of the way without it. */
#app:not(.js) .needs-js { display: none; }

/* Inside a stack the gap spaces the heading row. */
.stack > .section-head { margin-bottom: 0; }

.hud-word {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember);
  white-space: nowrap;
}

/* 2. Home hero: the stage scene and the wordmark headline --------------------- */

.hero {
  padding-block: clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--haze);
}

.hero-inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
}
.hero-inner > * { min-width: 0; }

@media (min-width: 1080px) {
  .hero-inner { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
}

.hero-scene { margin: 0; }
.hero-scene .scene-bar { flex-wrap: wrap; row-gap: 0.3rem; }
.hero-scene .scene-title { min-width: 0; }
.hero-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.hero-format { text-transform: none; letter-spacing: 0.04em; }

/* The 16:9 stage: the night sky behind, the main island along the bottom and the VTubers
   standing on its grass line. Every size is a share of the stage, so it scales at any width. */
.hero-stage {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
}

.hero-stage > .hero-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  filter: saturate(0.9) brightness(0.92);
}

/* The island is wider than the stage so its rough ends fall outside; its grass line sits
   3% of the stage height below its top edge. */
.hero-stage > .hero-ground {
  position: absolute;
  left: -4%;
  top: 64%;
  width: 108%;
  max-width: none;
  height: auto;
}

/* The lineup is a zero-height line on the grass. Each VTuber stands on it: --c0 and --step
   place the stance centres, --s is where the stance sits inside each picture, and the
   picture's own 4.6% of empty space under the feet is moved below the line. The boys'
   pictures are 488 wide against 532, so they get 488/532 of the width to stay the same scale. */
.hero-lineup {
  --c0: 11%;
  --step: 25%;
  --fw-girl: 33%;
  --fw-boy: calc(var(--fw-girl) * 0.9173);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32.2%;
  z-index: 1;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-fig {
  --fw: var(--fw-girl);
  position: absolute;
  bottom: 0;
  left: calc(var(--c0) + var(--i, 0) * var(--step) - var(--s, 0.45) * var(--fw));
  z-index: calc(20 - var(--i, 0));
  width: var(--fw);
}
.hero-fig > img { width: 100%; height: auto; transform: translateY(4.6%); }

.hero-fig.sig-rosette { --s: 0.499; }
.hero-fig.sig-lilac { --s: 0.383; }
.hero-fig.sig-marina { --s: 0.503; }
.hero-fig.sig-aurelia { --s: 0.339; }
.hero-fig.sig-ren { --s: 0.411; --fw: var(--fw-boy); }
.hero-fig.sig-noa { --s: 0.367; --fw: var(--fw-boy); }
.hero-fig.sig-briar { --s: 0.444; --fw: var(--fw-boy); }
.hero-fig.sig-jet { --s: 0.355; --fw: var(--fw-boy); }

/* Phones show the first four; the caption's "See all eight" link stands in for the rest. */
.hero-fig:nth-child(n+5) { display: none; }

@media (min-width: 640px) {
  .hero-lineup { --c0: 7.7%; --step: 12.03%; --fw-girl: 21.5%; }
  .hero-fig:nth-child(n+5) { display: block; }
}

.hero-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.hero-see-all { font-weight: 700; white-space: nowrap; }

@media (min-width: 640px) {
  .hero-see-all { display: none; }
}

.hero-copy { display: grid; gap: 1.1rem; justify-items: start; }
.hero-copy > * { min-width: 0; }
.hero-title { text-shadow: 0 2px 0 var(--struct); }
.hero-copy .actions { padding-block: 0.5rem; }

/* 3. How a match works ------------------------------------------------------ */

.steps { margin: 0; padding: 0; }
.step { display: flex; flex-direction: column; }
.panel-title .step-num { color: var(--sakura); }
.steps-note { margin-top: 1.5rem; color: var(--mist); }

/* 4. Weapon chips ----------------------------------------------------------- */

.weapon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.weapon-chips > li { min-width: 0; }

.weapon-chip {
  display: grid;
  gap: 0.1rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem 0.55rem 0.85rem;
  border: 1px solid var(--haze);
  border-left: 4px solid var(--signal);
  border-radius: var(--radius-control);
  background: var(--dusk);
  color: var(--moon);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.weapon-chip:hover {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 10%, var(--dusk));
  color: var(--moon);
  text-decoration: none;
}
.weapon-chip-type { font-weight: 800; line-height: 1.25; }
.weapon-chip-user {
  color: var(--mist);
  font-size: var(--step--2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.weapon-chip-open { --signal: var(--mist); border-left-style: dashed; }

/* 5. Color box demo (home) -------------------------------------------------- */

.colors-split { align-items: center; }

.colors-demo { container-type: inline-size; }

.colors-demo-body {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.25rem;
  background:
    radial-gradient(80% 70% at 30% 65%, color-mix(in srgb, var(--haze) 60%, transparent), transparent 75%),
    var(--night);
}

@container (min-width: 470px) {
  .colors-demo-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.colors-frame { width: 100%; max-width: 22rem; justify-self: center; }
.colors-frame .frame-art img {
  filter:
    drop-shadow(0 0 2px var(--signal))
    drop-shadow(0 0 9px color-mix(in srgb, var(--signal) 60%, transparent));
}

.colors-controls { display: grid; gap: 0.85rem; justify-items: start; }

.swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.swatch {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--struct);
  border-radius: var(--radius-control);
  background: var(--swatch, var(--mist));
  box-shadow: 0 0 0 1px var(--haze);
  forced-color-adjust: none;
  transition: box-shadow 0.15s ease;
}
.swatch:hover { box-shadow: 0 0 0 1px var(--mist); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--moon); }
.swatch:focus-visible { outline-offset: 6px; }

.colors-status { min-height: 1.65em; color: var(--mist); font-size: var(--step--1); }

.colors-copy h3 + p { margin-top: -0.5rem; }

/* 6. Community panels: the title link covers the whole panel ---------------- */

.community-head { margin-bottom: 0; }

.community-panel { position: relative; transition: border-color 0.15s ease; }
.community-panel:hover { border-color: var(--sakura); }
.community-panel .panel-title a { color: var(--moon); text-decoration: none; }
.community-panel .panel-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-panel);
}
.community-panel .panel-title a:focus-visible { outline: none; }
.community-panel .panel-title a:focus-visible::after { outline: 3px solid var(--sakura); outline-offset: 3px; }

.community-go {
  color: var(--sakura);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.community-panel:hover .community-go { text-decoration-thickness: 2px; }

/* 7. For VTubers band ------------------------------------------------------- */

.creators-band {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--night) 92%, transparent) 0%,
      color-mix(in srgb, var(--night) 84%, transparent) 100%),
    url("../../stage/stage_background.webp") center 35% / cover no-repeat var(--night);
}

.creators-inner { display: grid; gap: 1.25rem; align-items: center; }
.creators-inner > * { min-width: 0; }

@media (min-width: 900px) {
  .creators-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem; }
}

.creators-plate { --signal: var(--sakura); padding-right: 2.25rem; }
.creators-plate .lower-third-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.15;
}
.creators-text { color: var(--moon); }

/* 8. Game page -------------------------------------------------------------- */

.toc-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.toc-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.25rem 0.8rem;
  border: 1px solid var(--haze);
  border-radius: var(--radius-control);
  background: var(--night);
  color: var(--moon);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}
.toc-list a:hover { border-color: var(--sakura); color: var(--moon); }

.game-split { align-items: center; }

.team-figure { display: grid; gap: 1.1rem; margin: 0; }
.team-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
}
.team-pick .frame-art { padding: 0.6rem 0.6rem 1.2rem; }
.team-pick .lower-third { margin: -1.3rem 0.5rem 0.7rem; padding: 0.35rem 1.2rem 0.4rem 0.6rem; }
.team-pick .lower-third-name { font-size: var(--step-0); }

/* Narrow screens: one teammate per row, the picture beside the name plate. */
@media (max-width: 519.98px) {
  .team-strip { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .team-pick { flex-direction: row; align-items: center; }
  .team-pick .frame-art { flex: none; width: 7.5rem; padding: 0.4rem 0.4rem 0.6rem; }
  .team-pick .lower-third { margin: 0 0.75rem 0 0; align-self: center; }
}

.overtime-list { display: grid; gap: 0.4rem; margin: 0; padding-left: 1.4rem; }
.overtime-list li::marker { color: var(--sakura); }

.weapon-grid { margin: 0; padding: 0; }
.weapon-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-width: 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--haze);
  border-left: 4px solid var(--signal);
  border-radius: var(--radius-panel);
  background: var(--dusk);
}
.weapon-card-type { font-size: var(--step-1); }
.weapon-card-user {
  color: var(--mist);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.weapon-card .kv { font-size: var(--step--1); }
.weapon-card-open { --signal: var(--mist); border-left-style: dashed; }

.specials-grid { margin: 0; padding: 0; }
.special-card {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-width: 0;
  padding: 1rem 1rem 1.15rem 0;
  border: 1px solid var(--haze);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(110% 80% at 0% 0%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 65%),
    var(--night);
}
.special-card .lower-third { border-radius: 0; }
.special-card > p { padding-left: 1rem; color: var(--mist); font-size: var(--step--1); }

.box-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.box-list li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--haze);
  border-radius: var(--radius-control);
  background: var(--dusk);
  font-size: var(--step--1);
  font-weight: 700;
}

.modes-list { margin: 0; padding: 0; }

.controls-split { align-items: start; }
.controls-split .table-wrap th[scope="row"] { font-weight: 500; }
.controls-group th {
  background: color-mix(in srgb, var(--haze) 45%, transparent);
  color: var(--mist);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overtime-panel { align-self: center; }

/* Color boxes and Make your own share a band: a rule between them on wide screens. */
@media (min-width: 900px) {
  .pair-split { align-items: stretch; }
  .pair-split > section + section { padding-left: 2rem; border-left: 1px solid var(--haze); }
}

.look-split { align-items: start; }
.look-edge { display: grid; gap: 1.5rem; margin: 0; }
.look-edge > * { min-width: 0; }
.look-frame { margin: 0.5rem; }

@media (min-width: 560px) and (max-width: 899.98px), (min-width: 1100px) {
  .look-edge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.edge-legend { display: grid; gap: 0.65rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.edge-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem; }
.edge-chip { width: 2rem; height: 0.8rem; border-radius: 2px; }
.edge-chip-struct { background: var(--struct); box-shadow: 0 0 0 1px var(--haze); }
.edge-chip-blend { --signal: var(--sig-noa); background: color-mix(in srgb, var(--struct) 50%, var(--signal)); }
.edge-chip-signal { --signal: var(--sig-noa); background: var(--signal); box-shadow: 0 0 8px var(--signal); }

.look-scene { margin: 0; }

.game-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.game-next p { font-size: var(--step-1); font-weight: 700; }

/* 9. Roster page ------------------------------------------------------------ */

.roster-head { margin-bottom: 0; }
.roster-filter { display: grid; gap: 0.6rem; }
.roster-count { color: var(--mist); font-size: var(--step--1); }

.roster-grid { margin: 0; padding: 0; }
.roster-item { display: flex; min-width: 0; }
/* The floor glow sits under the VTuber's feet, so the special's text below stays on plain night. */
.roster-card {
  flex: 1 1 auto;
  background:
    radial-gradient(90% 34% at 50% 48%, color-mix(in srgb, var(--signal) 22%, transparent), transparent 72%),
    linear-gradient(180deg, var(--dusk), var(--night));
}
.roster-special { display: grid; gap: 0.3rem; padding: 0 1rem 1.15rem; }
.roster-special p { max-width: none; }
.roster-special .label { margin-right: 0.3rem; }

/* Placeholder slots, laid out like a pick grid: 4 across, 8 across on wide screens. */
.coming-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 960px) {
  .coming-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1rem; }
}
.coming-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  border: 1px dashed color-mix(in srgb, var(--mist) 45%, var(--haze));
  border-radius: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--haze) 35%, transparent) 14px 15px),
    var(--night);
}
.coming-label {
  color: var(--mist);
  font-family: var(--font-utility);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roster-make { align-items: center; }

/* 10. 404 page -------------------------------------------------------------- */

.lost-head { display: grid; align-items: center; min-height: min(70vh, 40rem); }
.lost-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* An opaque ground keeps the ember text at 4.5:1 or better over the bright parts of the stage art. */
.lost-pills .pill-error { background: var(--night); background: color-mix(in srgb, var(--ember) 10%, var(--night)); }