/* VTuber Smash: page styles for Play, News, FAQ, Press, About and For VTubers.
   Linked after site.css on those six pages only. The shared look (panels, scene frames,
   character frames, pills, forms, contact lists, notices) comes from site.css and is
   documented in STYLEGUIDE.md; this file lays those pieces out and adds what only these
   pages need. Every colour comes from the tokens on :root in site.css.

   Sections
    1 shared by these pages   2 play   3 news   4 faq   5 press   6 about   7 for vtubers
    8 reduced motion and forced colours */

/* 1. Shared by these pages ------------------------------------------------- */

/* Overlay pills above a page's h1 */
.head-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Plain lists inside panels */
.info-list { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.2rem; }
.info-list li::marker { color: var(--sakura); }

/* Lists of links in a panel: full-height tap targets */
.link-list { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.link-list a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }

/* Section intros under an h2 */
.section-intro { color: var(--mist); }

/* A side column that stacks its panels */
.info-aside { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }

/* Character frames that stand alone in a column: room for the edge rings */
.solo-frame { width: calc(100% - 12px); max-width: 24rem; margin: 6px auto; }

/* Sticky side lists (News and FAQ contents) sit under the sticky header */
@media (min-width: 960px) {
  .sticky-side { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem); }
}

/* 2. Play ---------------------------------------------------------------------- */

.play-scene .scene-body { background: var(--struct); }

/* #play-slot is where the browser build will go: a 16:9 window. Until then it holds the
   stage art and a standby card. overflow: clip (not hidden) keeps it able to grow taller when
   the card needs the room; on narrow screens it drops the ratio and fits the card. */
.play-slot {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: clip;
  padding: clamp(1.25rem, 4vw, 2.5rem) 1rem;
}

.play-slot-art {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.play-slot-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.play-slot-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--night) 100%);
  opacity: 0.7;
}

.play-slot-vtuber {
  position: absolute;
  left: 4%;
  bottom: 4%;
  z-index: -1;
  width: min(30%, 17rem);
  height: auto;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--signal) 60%, transparent));
}

.play-standby {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 27rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--haze);
  border-radius: var(--radius-panel);
  background: var(--struct);
  background: color-mix(in srgb, var(--struct) 90%, transparent);
  box-shadow: 0 18px 50px var(--shade);
  text-align: center;
}
.play-standby > p { margin-inline: auto; }
.play-standby-title { font-size: var(--step-2); font-weight: 800; line-height: 1.2; color: var(--moon); }
.play-standby .actions { justify-content: center; padding-top: 0.35rem; }

@media (min-width: 720px) {
  .play-slot { place-items: center end; padding-right: 6%; }
  /* Leaves the left side of the window to the VTuber on the floor */
  .play-standby { max-width: min(27rem, 58%); }
}
@media (max-width: 719.98px) {
  .play-slot { aspect-ratio: auto; min-height: 15rem; }
  .play-slot-vtuber { display: none; }
}

/* 3. News ------------------------------------------------------------------------ */

.news-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.news-main { display: grid; gap: 1.5rem; min-width: 0; }
.news-list { display: grid; gap: 2rem; min-width: 0; }
#app:not(.js) .news-status { display: none; }

@media (min-width: 960px) {
  .news-layout { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 2.5rem; }
  .news-toc { grid-column: 2; grid-row: 1; }
  .news-main { grid-column: 1; grid-row: 1; }
}

.news-toc .panel-body { padding: 0; }
.news-toc-list { margin: 0; padding: 0; list-style: none; }
.news-toc-list a {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--haze);
  color: var(--moon);
  text-decoration: none;
}
.news-toc-list li:first-child a { border-top: 0; }
.news-toc-list li:last-child a { border-radius: 0 0 calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px); }
.news-toc-list a:hover { background: color-mix(in srgb, var(--haze) 35%, transparent); }
.news-toc-list a:hover .news-toc-title { color: var(--sakura); text-decoration: underline; }
.news-toc-list a:focus-visible { outline-offset: -3px; }
.news-toc-title { font-weight: 700; line-height: 1.35; }

.news-post {
  min-width: 0;
  background: var(--dusk);
  border: 1px solid var(--haze);
  border-radius: var(--radius-panel);
}
.news-post-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  min-height: 2.25rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--haze);
  border-radius: calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px) 0 0;
  background: var(--strip-bg);
}
.news-post-body { display: grid; gap: 1.5rem; padding: 1.25rem 1.25rem 1.5rem; }
.news-post-text { min-width: 0; }
.news-post-text > * + * { margin-top: 0.9rem; }
.news-post-title { font-size: var(--step-2); }
.news-post-art { width: calc(100% - 12px); margin: 6px; }

@media (min-width: 720px) {
  .news-post-body.has-art { grid-template-columns: minmax(0, 1fr) 12.5rem; align-items: start; }
}
@media (max-width: 719.98px) {
  .news-post-art { display: none; }
}

.news-post-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.news-post-links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.news-permalink { font-size: var(--step--1); }
.news-permalink a { color: var(--mist); }
.news-permalink a:hover { color: var(--sakura); }

/* 4. FAQ ---------------------------------------------------------------------------- */

.faq-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; }
}

.faq-toc .panel-body { padding-block: 0.4rem 0.6rem; }
.faq-groups { display: grid; gap: 3rem; min-width: 0; max-width: 52rem; }
.faq-group > h2 { margin-bottom: 1.1rem; }
.faq-list { display: grid; gap: 0.75rem; }

.faq-item {
  min-width: 0;
  background: var(--dusk);
  border: 1px solid var(--haze);
  border-radius: var(--radius-panel);
}
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.7rem 1rem;
  border-radius: calc(var(--radius-panel) - 1px);
  color: var(--moon);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
/* The plus that turns into a minus, drawn in the accent */
.faq-item > summary::after {
  content: "";
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  background:
    linear-gradient(var(--sakura), var(--sakura)) center / 100% 2px no-repeat,
    linear-gradient(var(--sakura), var(--sakura)) center / 2px 100% no-repeat;
}
.faq-item[open] > summary::after { background-size: 100% 2px, 2px 0; }
.faq-item > summary:hover { background: color-mix(in srgb, var(--haze) 35%, transparent); }
.faq-item[open] { border-color: color-mix(in srgb, var(--sakura) 40%, var(--haze)); }
.faq-item[open] > summary {
  border-bottom: 1px solid var(--haze);
  border-radius: calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px) 0 0;
  background: var(--strip-bg);
}
.faq-answer { display: grid; gap: 0.75rem; padding: 1rem 1rem 1.15rem; }
.faq-answer > * { margin: 0; }

/* 5. Press ------------------------------------------------------------------------ */

.press-facts .kv { gap: 0.65rem 1.25rem; }
@media (max-width: 419.98px) {
  .press-facts .kv { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .press-facts .kv dd + dt { margin-top: 0.6rem; }
}

.press-desc { max-width: 54rem; }
.press-text > * + * { margin-top: 0.9rem; }
.press-short { font-size: var(--step-1); line-height: 1.55; }

.press-art-list { margin: 0; padding: 0; list-style: none; }
/* Frames in a row share one height, so the file lines under them line up. */
.press-art-item { display: grid; grid-template-rows: 1fr auto auto; gap: 0.85rem; }
.press-art-item .frame { margin: 6px; }
.press-art-item .meta { padding-inline: 6px; }

.press-stage-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) {
  .press-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-stage-wide { grid-column: 1 / -1; }
}
.press-stage-grid .scene-body > a { display: block; }
.press-stage-grid .scene-body img { width: 100%; height: auto; }
/* A checkerboard behind art with a transparent background */
.press-transparent {
  background-color: var(--night);
  background-image: repeating-conic-gradient(var(--dusk) 0% 25%, transparent 0% 50%);
  background-size: 24px 24px;
}
.press-strip { padding: 1.5rem 1rem; }

/* 6. About -------------------------------------------------------------------------- */

.about-intro { align-items: center; }
.about-intro .solo-frame { max-width: 26rem; }
.about-pillars .panel-body { display: grid; gap: 0.75rem; align-content: start; }
.about-pillars .panel-body > * + * { margin-top: 0; }

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

.creator-terms {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .creator-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .creator-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.creator-term {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--haze);
  border-left: 4px solid var(--sakura);
  border-radius: var(--radius-control);
  background: var(--dusk);
}
/* A single term takes the whole row; its text keeps the reading measure. */
.creator-term:only-child { grid-column: 1 / -1; }
.creator-term h3 { font-size: var(--step-0); line-height: 1.35; }
.creator-term p { color: var(--mist); font-size: var(--step--1); }

.apply-form { max-width: none; }
#app:not(.js) .apply-form { display: none; }
.apply-head { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }

/* 8. Reduced motion and forced colours ------------------------------------------ */

@media (forced-colors: active) {
  .faq-item > summary::after { content: "+"; width: auto; height: auto; background: none; font-weight: 800; }
  .faq-item[open] > summary::after { content: "-"; }
  .creator-term,
  .news-post,
  .faq-item { border: 1px solid CanvasText; }
}