/* ============================================================
   SHOWCASE — the homepage hero (index.html)
   One live demo fills a dark stage; a strip of cards underneath, floating over the stage's
   lower edge, picks which. Overlays (intro, caption, arrows) sit above the demo's surface and
   let the pointer through everywhere except their links and buttons.
   ============================================================ */
.showcase { --stage-bg: #05090b; --stage-fg: #f3f8fa; --stage-muted: rgba(226, 240, 245, 0.74);
  --strip-overlap: 64px; position: relative; background: var(--surface); }

/* ---------- the stage ---------- */
/* before a demo has drawn (and between demos) the stage is a plain dark gradient */
.showcase-stage { position: relative; overflow: hidden; height: clamp(440px, 74vh, 760px);
  background: radial-gradient(120% 100% at 70% 35%, #10222a, var(--stage-bg) 70%); color: var(--stage-fg);
  isolation: isolate; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.showcase-stage:fullscreen { height: 100vh; }
/* the demo's own layer: a canvas filling the stage, fading in once it has drawn */
.showcase-surface { position: absolute; inset: 0; z-index: 0; touch-action: pan-y; cursor: crosshair;
  opacity: 0; transition: opacity 0.7s ease; }
.showcase-surface.shown { opacity: 1; }
.showcase-surface > canvas { display: block; width: 100%; height: 100%; }
/* scrims, so the text reads over any demo: top-left for the intro, bottom for the caption + strip */
.showcase-stage::before, .showcase-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.showcase-stage::before { background: radial-gradient(75% 70% at 0% 0%, rgba(3, 8, 10, 0.62), transparent 70%); }
.showcase-stage::after { background: linear-gradient(to top, rgba(3, 8, 10, 0.78), rgba(3, 8, 10, 0.25) 26%, transparent 46%); }
.showcase-stage::before { transition: opacity 0.3s ease; }

/* overlays let the pointer through to the demo, apart from their controls */
.showcase-intro, .showcase-caption { position: absolute; z-index: 2; pointer-events: none; }
.showcase-intro a, .showcase-caption a { pointer-events: auto; }

.showcase-intro { top: 0; left: 0; right: 0; max-width: var(--maxw); margin: 0 auto; padding: 44px var(--pad) 0;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.showcase-intro .eyebrow { margin: 0; font-size: 0.74rem; letter-spacing: 0.22em; color: #7fdcf0; }
.showcase-intro h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.03em; line-height: 1.04;
  color: #ffffff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.showcase-intro h1 .accent { color: #6fd6ee; }
.showcase-intro p:last-child { margin: 0; max-width: 44ch; color: var(--stage-muted); font-size: 1.05rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }

/* the caption, bottom left: the topic, how to play with it, and the way into it */
/* in a panel like the Mode and Settings cards, its bottom edge level with theirs */
.showcase-caption { left: calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad)); bottom: calc(var(--strip-overlap) + 26px);
  width: max-content; max-width: min(40ch, calc(100% - 2 * var(--pad)));
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 16px 11px;
  background: rgba(6, 14, 18, 0.66); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.showcase-caption > * { margin: 0; }
.showcase-caption h2 { color: #ffffff; font-size: 1.35rem; letter-spacing: -0.015em; }
.showcase-caption .showcase-hint { font-size: 0.86rem; color: var(--stage-muted); }
.showcase-caption .showcase-more { margin-top: 3px; color: #9fe6f5; font-weight: 600; font-size: 0.88rem; }
.showcase-caption .showcase-more:hover { color: #ffffff; }
/* the caption fades between demos */
.showcase-caption { transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.35s; }
.showcase-caption.changing { opacity: 0; transform: translateY(6px); }

/* interactive mode hands the whole stage to the demo: the title and caption fade right away
   (and come back in automatic or paused), and so does the shading that kept them readable */
.showcase-intro { transition: opacity 0.35s ease, visibility 0.35s; }
.showcase-stage.interactive .showcase-intro,
.showcase-stage.interactive .showcase-caption { opacity: 0; visibility: hidden; }
.showcase-stage::after { transition: opacity 0.35s ease; }
.showcase-stage.interactive::before { opacity: 0; }
.showcase-stage.interactive::after { opacity: 0.45; }

/* previous / next, at either side of the stage */
.showcase-arrow { position: absolute; z-index: 3; top: calc(50% - var(--strip-overlap) / 2); translate: 0 -50%;
  width: 52px; height: 52px; padding: 0; display: grid; place-items: center; font-size: 2rem; line-height: 1;
  color: #ffffff; background: rgba(8, 16, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%;
  box-shadow: none; backdrop-filter: blur(8px); transition: background 0.15s, transform 0.15s; }
.showcase-arrow:hover { background: rgba(14, 116, 144, 0.85); border-color: rgba(255, 255, 255, 0.5); transform: scale(1.06); }
.showcase-arrow.prev { left: 18px; }
.showcase-arrow.next { right: 18px; }
.showcase-full { position: absolute; z-index: 3; top: 14px; right: 14px; width: 38px; height: 38px; padding: 0;
  font-size: 1.1rem; color: #ffffff; background: rgba(8, 16, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm); box-shadow: none; backdrop-filter: blur(8px); }
.showcase-full:hover { background: rgba(14, 116, 144, 0.85); }

/* ---------- automatic mode: a catcher over the demo, with a tip that follows the pointer ---------- */
.showcase-catcher { position: absolute; inset: 0; z-index: 1; cursor: pointer; touch-action: pan-y; }
.showcase-catcher[hidden] { display: none; }
.showcase-tip { position: absolute; left: 0; top: 0; padding: 5px 12px; white-space: nowrap; pointer-events: none;
  font-size: 0.82rem; font-weight: 650; color: var(--heading); background: #ffffff; border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.15s ease; }
.showcase-tip::before { content: "☝ "; }
.showcase-catcher:hover .showcase-tip { opacity: 1; }
@media (hover: none) {   /* no pointer to follow: the tip sits in the middle of the stage */
  .showcase-tip { opacity: 1; left: 50%; top: 40%; translate: -50% 0 !important; }
}

/* ---------- the panel: the Mode and Settings cards side by side, bottom right above the strip ----------
   Both cards are one line high when the settings are hidden. They sit on a shared bottom edge, so
   when the settings unfold (upwards, above their title) neither the title nor the Mode card moves.
   The panel only lays the cards out: it takes no mouse input itself, so the empty space above the
   Mode card and the gap between the cards still reach the demo. Only the cards themselves do. */
.showcase-panel { position: absolute; z-index: 3; bottom: calc(var(--strip-overlap) + 26px);
  right: calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad));
  display: flex; align-items: flex-end; gap: 8px; color: #ffffff; pointer-events: none; }
.showcase-panel[hidden] { display: none; }
.showcase-card { pointer-events: auto; padding: 7px 8px 7px 12px; background: rgba(6, 14, 18, 0.66); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.showcase-card[hidden] { display: none; }
/* over a game's busy tiles the cards need a clear white edge to stand out */
.showcase-stage.immersive .showcase-card, .showcase-stage.immersive .showcase-caption { border-color: rgba(255, 255, 255, 0.85); }
.showcase-settings { width: 290px; }   /* the same width open or closed, so the Mode card stays put */
.showcase-card-title { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7fdcf0; }
/* a card's one line: its title, and a small switch beside it */
.showcase-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* the settings fold out above their title, animating to their full height */
.showcase-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.showcase-settings.open .showcase-fold { grid-template-rows: 1fr; }
.showcase-fold > div { min-height: 0; overflow: hidden; }   /* the wrapper clips, so the controls' padding folds away too */

/* the switch: a row of buttons, the current one lit */
.showcase-switch { display: flex; padding: 2px; gap: 2px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-pill); }
.showcase-panel button { box-shadow: none; }
.showcase-switch button { flex: 0 0 auto; padding: 1px 9px; font-size: 0.7rem; font-weight: 600; line-height: 1.6;
  color: rgba(255, 255, 255, 0.72); background: transparent; border: 0; border-radius: var(--radius-pill); }
.showcase-switch button:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.showcase-switch button[aria-pressed="true"] { background: #1597b8; color: #ffffff; }

/* sliders, tick boxes, choices and buttons */
/* two columns, so the open settings stay short; a row of choices takes the full width.
   The padding keeps focus rings and slider thumbs clear of the fold's clipping edge. */
.showcase-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; align-items: end; padding: 6px 4px 12px 0; }
.showcase-controls > div.showcase-control { grid-column: 1 / -1; }
.showcase-control { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.showcase-control > span { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); }
.showcase-control output { font-variant-numeric: tabular-nums; color: #9fe6f5; font-weight: 600; }
.showcase-control input[type="range"] { width: 100%; margin: 0; padding: 0; height: 18px; border: 0; background: none;
  box-shadow: none; accent-color: #3fc1e0; }
.showcase-check { display: flex; align-items: center; gap: 2px; margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); cursor: pointer; }
.showcase-check input { margin-right: 6px; accent-color: #3fc1e0; }
.showcase-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.showcase-choice button { padding: 3px 9px; font-size: 0.78rem; color: #ffffff; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-pill); }
.showcase-choice button.swatch { width: 26px; height: 26px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.25); }
.showcase-choice button[aria-pressed="true"] { border-color: #ffffff; box-shadow: 0 0 0 2px #1597b8; }
/* every demo's one button is its Reset, in the primary colour */
.showcase-button { align-self: flex-start; padding: 4px 14px; font-size: 0.8rem; font-weight: 600; color: #ffffff;
  background: #1597b8; border: 1px solid #1597b8; border-radius: var(--radius-sm); }
.showcase-button:hover { background: #1bb0d5; border-color: #1bb0d5; }

/* a game's status line and messages, drawn over its canvas */
.showcase-hud { position: absolute; top: 14px; right: 64px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
  pointer-events: none; font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); }
.showcase-hud span { padding: 4px 10px; background: rgba(6, 14, 18, 0.66); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill); backdrop-filter: blur(6px); }
.showcase-hud b { color: #ffffff; font-variant-numeric: tabular-nums; }
.showcase-message { position: absolute; left: 50%; top: 42%; translate: -50% -50%; padding: 10px 22px; pointer-events: none;
  font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 750; letter-spacing: -0.01em; color: #ffffff;
  background: rgba(6, 14, 18, 0.72); border-radius: var(--radius); }
.showcase-message[hidden] { display: none; }
/* while a game is played, drags on a touch screen steer the player rather than scroll the page */
.showcase-stage.immersive.interactive .showcase-surface { touch-action: none; cursor: default; }
@media (max-width: 680px) {
  .showcase-hud { top: 10px; right: 56px; left: 10px; font-size: 0.72rem; }
  .showcase-hud span { padding: 2px 8px; }
}

/* loading / play messages, centred on the stage */
.showcase-status { position: absolute; z-index: 3; left: 50%; top: calc(50% - var(--strip-overlap) / 2); translate: -50% -50%;
  margin: 0; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.92rem; color: #ffffff;
  background: rgba(8, 16, 20, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); }
.showcase-status button { margin-left: 8px; }

/* ---------- the strip of cards, floating over the stage's lower edge ---------- */
.showcase-strip { position: relative; z-index: 4; list-style: none; margin: calc(var(--strip-overlap) * -1) auto 0;
  max-width: calc(var(--maxw) + 2 * var(--pad)); padding: 0 var(--pad) 26px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
/* each card: the picture and name show that demo on the stage; "View topic" at its foot opens the topic */
.showcase-strip li { margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.showcase-thumb { display: flex; flex-direction: column; color: var(--fg); }
.showcase-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #0b1a1f;
  filter: saturate(0.75) brightness(0.92); transition: filter 0.18s ease; }
.showcase-thumb > span { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 0; line-height: 1.3; }
.showcase-thumb strong { color: var(--heading); font-size: 0.88rem; font-weight: 650; }
.showcase-thumb small { color: var(--muted); font-size: 0.76rem; }
.showcase-thumb:hover { text-decoration: none; }
/* the topic link reads as the last line of the card's text, at the same size as the line above it */
.showcase-topic { align-self: flex-start; margin: 7px 10px 9px; font-size: 0.76rem; line-height: 1.3; }
.showcase-strip li:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.showcase-strip li:hover img { filter: none; }
/* the demo on the stage now */
.showcase-strip li:has(> [aria-current]) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint), var(--shadow-lg); transform: translateY(-5px); }
.showcase-thumb[aria-current] img { filter: none; }
.showcase-thumb[aria-current] strong { color: var(--accent-hover); }

/* under the strip: the way into every topic */
/* in the strip's own box, so it lines up with the left edge of the first card */
.showcase-all { display: flex; justify-content: flex-start; width: 100%; box-sizing: border-box;
  max-width: calc(var(--maxw) + 2 * var(--pad)); margin: -8px auto 0; padding: 0 var(--pad) 26px; }
.showcase-all .button { padding: 7px 18px; font-size: 0.92rem; }

@media (max-width: 960px) {
  .showcase { --strip-overlap: 40px; }
  .showcase-caption { bottom: calc(var(--strip-overlap) + 72px); }   /* above the panel, which now spans most of the width */
  /* the strip scrolls sideways, card by card */
  .showcase-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 8px; scrollbar-width: none; }
  .showcase-strip::-webkit-scrollbar { display: none; }
  .showcase-strip li { flex: 0 0 150px; scroll-snap-align: start; }
}
@media (max-width: 680px) {
  .showcase-stage { height: clamp(420px, 78vh, 640px); }
  .showcase-intro { padding-top: 26px; }
  .showcase-intro p:last-child { display: none; }
  .showcase-caption > p { display: none; }
  .showcase-caption { left: 10px; bottom: calc(var(--strip-overlap) + 14px); max-width: calc(100% - 236px); padding: 8px 12px 9px; }   /* clear of the panel */
  .showcase-caption h2 { font-size: 1.15rem; }
  /* a phone: the two cards stack, Settings over Mode, still unfolding upwards */
  .showcase-panel { width: 206px; right: 10px; bottom: calc(var(--strip-overlap) + 14px); flex-direction: column-reverse; align-items: stretch; }
  .showcase-settings { width: auto; }
  .showcase-mode .showcase-card-title { display: none; }
  .showcase-mode .showcase-switch { flex: 1; }
  .showcase-mode .showcase-switch button { flex: 1; padding: 1px 4px; }
  .showcase-controls { grid-template-columns: 1fr; }
  .showcase-arrow { width: 42px; height: 42px; font-size: 1.6rem; top: 36%; }   /* clear of the open settings */
  .showcase-arrow.prev { left: 8px; }
  .showcase-arrow.next { right: 8px; }
  .showcase-strip li { flex-basis: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-caption, .showcase-intro, .showcase-strip li, .showcase-thumb img, .showcase-fold, .showcase-surface { transition: none; }
}