/* =========================================================================
   Ludic Media Studio — v2 Gaming Studio (v2/games.html ONLY)
   Loaded after sections.css, audience.css and site.css via
   V.page(..., css=["css/games.css"]) in _build/build_v2_games.py.

   Two page-local components, both `gx-`:
     * the level select ("Choose your game"), on a black band;
     * the play loop — one turn of the Decision Game that works with NO
       script: two radio inputs sit before the phone in the DOM, and sibling
       selectors (~) move the meters, show the deltas and reveal the debrief.
       A reset button is "Play again".

   Same rules as every stylesheet here: no ID selectors, only the documented
   breakpoints, black / white / yellow / cream only, never white on yellow.
   ========================================================================= */

:root {
  --gx-shadow: 0.5rem 0.5rem 0 var(--black);
  --gx-meter-h: 5.5rem;
}

/* ---------- the level select -------------------------------------------- */
/* A phone gets a sideways game menu; 48rem up, a grid joined by a dashed
   track along the cards' top edges. The scroller is a labelled region that
   takes focus, so the sideways scroll works from the keyboard too. */
.gx-levels-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1.25rem 0.25rem var(--space-xs);
}
.gx-levels-scroll:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.gx-levels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 84%);
  gap: var(--space-md);
}
@media (min-width: 48rem) {
  .gx-levels-scroll { overflow: visible; scroll-snap-type: none; padding: 1.25rem 0 0; }
  .gx-levels {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }
}
@media (min-width: 64rem) { .gx-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gx-levels__hint {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
@media (min-width: 48rem) { .gx-levels__hint { display: none; } }

.gx-level {
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--black);
  color: var(--white);
  border: 3px solid var(--yellow);
}
/* The track between levels. */
@media (min-width: 48rem) {
  .gx-level:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 100%;
    width: calc(var(--space-lg) + 3px);
    border-top: 3px dashed var(--yellow);
  }
}
@media (min-width: 64rem) {
  .gx-level:nth-child(odd)::after { display: none; }
  .gx-level:not(:nth-child(3n))::after {
    content: "";
    display: block;
    position: absolute;
    top: -3px;
    left: 100%;
    width: calc(var(--space-lg) + 3px);
    border-top: 3px dashed var(--yellow);
  }
}
.gx-level__n {
  position: absolute;
  top: -1.0625rem;
  left: var(--space-sm);
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  background: var(--yellow);
  color: var(--black);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.gx-level__n span { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.gx-level__media { background: var(--white); border-bottom: 3px solid var(--yellow); }
.gx-level__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gx-level__media--contain img { object-fit: contain; padding: 0.5rem; }
.gx-level__text { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; padding: var(--space-sm) var(--space-sm) var(--space-md); }
.gx-level__title { font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-snug); }
.gx-level__on { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.gx-level__on li {
  padding: 0.0625rem 0.5rem;
  border: 1.5px solid var(--yellow);
  color: var(--yellow);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gx-level__body { font-size: var(--text-sm); line-height: var(--leading-mid); }
.gx-level__stats { display: grid; gap: 0.375rem; padding-top: 0.75rem; border-top: 1px solid var(--dark-grey); }
.gx-level__stat { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.gx-level__stat dt { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.gx-level__stat dd { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); }
.gx-level__more { margin-top: auto; padding-top: 0.25rem; }
.gx-level__more .arrow-link,
.gx-level__more .arrow-link:hover { color: var(--yellow); font-weight: 700; }

/* ---------- the play loop ------------------------------------------------ */
.gx-loop { display: grid; gap: var(--space-xl); }
@media (min-width: 64rem) {
  .gx-loop { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-xl); align-items: center; }
}
.gx-loop__play { display: grid; justify-items: center; gap: var(--space-sm); }
.gx-play { width: 100%; max-width: 23rem; }
.gx-play__set { min-width: 0; margin: 0; padding: 0; border: 0; }

/* The phone. */
.gx-phone { padding: 0.625rem; background: var(--black); border-radius: 2.25rem; box-shadow: var(--gx-shadow); }
@media (min-width: 48rem) { .gx-phone { transform: rotate(-1.5deg); } }
.gx-phone__screen {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 1rem 1rem;
  background: var(--white);
  color: var(--black);
  border-radius: 1.75rem;
}
.gx-phone__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gx-phone__game { font-size: var(--text-xs); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.gx-phone__turn { padding: 0.0625rem 0.5rem; background: var(--yellow); font-size: var(--text-xs); font-weight: 800; }
.gx-phone__brief { font-size: var(--text-xs); line-height: var(--leading-mid); color: var(--ink-muted); }
.gx-phone__card {
  padding: 1rem;
  background: var(--black);
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: var(--leading-snug);
}
.gx-phone__hint { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* The two moves: labels for the hidden radios. */
.gx-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.gx-move {
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 0.625rem 0.5rem;
  border: 2px solid var(--black);
  background: var(--white);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: var(--leading-snug);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.gx-move:hover { background: var(--yellow); }
.gx-move__arrow { font-size: var(--text-lg); line-height: 1; }
.gx-play__input--a:checked ~ .gx-phone .gx-move--a,
.gx-play__input--b:checked ~ .gx-phone .gx-move--b { background: var(--black); color: var(--yellow); }
.gx-play__input--a:focus-visible ~ .gx-phone .gx-move--a,
.gx-play__input--b:focus-visible ~ .gx-phone .gx-move--b { outline: 3px solid var(--black); outline-offset: 2px; box-shadow: 0 0 0 5px var(--yellow); }

/* The four scores. Each meter carries its own heights inline:
   --h0 before a move, --ha after move a, --hb after move b. */
.gx-meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; padding-top: 1.75rem; }
.gx-meter { --h0: 50%; --ha: 50%; --hb: 50%; --h: var(--h0); position: relative; display: grid; justify-items: center; gap: 0.375rem; }
.gx-play__input--a:checked ~ .gx-phone .gx-meter { --h: var(--ha); }
.gx-play__input--b:checked ~ .gx-phone .gx-meter { --h: var(--hb); }
.gx-meter__track {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 2.25rem;
  height: var(--gx-meter-h);
  overflow: hidden;
  background: var(--cream);
  border: 2px solid var(--black);
}
.gx-meter__fill { width: 100%; height: var(--h); background: var(--black); transition: height 0.7s cubic-bezier(.2, .7, .2, 1); }
.gx-meter__label { font-size: var(--text-xs); font-weight: 700; }
.gx-meter__d {
  display: none;
  position: absolute;
  top: -1.625rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.375rem;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-size: var(--text-xs);
  font-weight: 900;
  white-space: nowrap;
}
.gx-meter__d--neg { background: var(--black); color: var(--white); }
.gx-play__input--a:checked ~ .gx-phone .gx-meter__d--a,
.gx-play__input--b:checked ~ .gx-phone .gx-meter__d--b { display: block; }

/* The debrief, and "Play again". */
.gx-result { display: none; padding: 0.625rem 0.75rem; background: var(--cream); border-left: 4px solid var(--black); font-size: var(--text-sm); line-height: var(--leading-mid); }
.gx-result strong { font-weight: 800; }
.gx-result--none { display: block; background: none; border-left-style: dashed; color: var(--ink-muted); }
.gx-play__input:checked ~ .gx-phone .gx-result--none { display: none; }
.gx-play__input--a:checked ~ .gx-phone .gx-result--a,
.gx-play__input--b:checked ~ .gx-phone .gx-result--b { display: block; }
.gx-again {
  display: none;
  justify-self: center;
  padding: 0.375rem 1.125rem;
  border: 2px solid var(--black);
  border-radius: var(--v2-radius-pill);
  background: var(--yellow);
  color: var(--black);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
}
.gx-again:hover,
.gx-again:focus-visible { background: var(--black); color: var(--yellow); }
.gx-play__input:checked ~ .gx-phone .gx-again { display: block; }
.gx-loop__caption { max-width: 23rem; font-size: var(--text-xs); font-weight: 600; line-height: var(--leading-mid); text-align: center; }

/* The loop itself: four steps that read 1-2-3-4 in the source and sit
   clockwise in a 2 x 2 from 48rem, with arrows in the gaps and the replay
   mark in the middle. */
.gx-ring-wrap { position: relative; }
.gx-ring { display: grid; gap: var(--space-lg); padding-top: 1.125rem; }
@media (min-width: 48rem) {
  .gx-ring { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
  .gx-step--3 { grid-column: 2; grid-row: 2; }
  .gx-step--4 { grid-column: 1; grid-row: 2; }
}
.gx-step {
  position: relative;
  padding: var(--space-sm) var(--space-sm) var(--space-sm);
  background: var(--white);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: var(--gx-shadow);
}
.gx-step__n {
  position: absolute;
  top: -1.25rem;
  left: var(--space-sm);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  font-weight: 900;
}
.gx-step__title { margin-top: 0.375rem; font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-snug); }
.gx-step__body { margin-top: 0.375rem; line-height: var(--leading-mid); }
.gx-step__eg { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 2px solid var(--black); font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-mid); }
@media (min-width: 48rem) {
  .gx-step::after {
    position: absolute;
    display: grid;
    place-items: center;
    color: var(--black);
    font-size: var(--text-xl);
    font-weight: 900;
    line-height: 1;
  }
  .gx-step--1::after { content: "\2192"; content: "\2192" / ""; top: 0; bottom: 0; right: calc(-1 * var(--space-lg) - 3px); width: var(--space-lg); }
  .gx-step--2::after { content: "\2193"; content: "\2193" / ""; left: 0; right: 0; bottom: calc(-1 * var(--space-xl) - 3px); height: var(--space-xl); }
  .gx-step--3::after { content: "\2190"; content: "\2190" / ""; top: 0; bottom: 0; left: calc(-1 * var(--space-lg) - 3px); width: var(--space-lg); }
  .gx-step--4::after { content: "\2191"; content: "\2191" / ""; left: 0; right: 0; top: calc(-1 * var(--space-xl) - 3px); height: var(--space-xl); }
}
.gx-ring__center { display: none; }
@media (min-width: 48rem) {
  .gx-ring__center {
    position: absolute;
    top: calc(50% + 0.5625rem);
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--black);
    color: var(--yellow);
    transform: translate(-50%, -50%);
  }
  .gx-ring__icon { width: 1.875rem; height: 1.875rem; }
}
.gx-loop__after {
  margin-top: var(--space-lg);
  padding: 0.75rem 1rem;
  background: var(--black);
  color: var(--yellow);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: var(--leading-snug);
}