/* Tutorial playground — /testing/tutorial-playground
   ===========================================================================
   Two things live here and they never meet:

     1. The harness chrome (.tps-*), which only exists on the playground page.
     2. The caption looks (.captiontheme-*), which restyle the REAL
        .onboarding-caption element built by main.js. They are scoped to a class
        on <html> that production never sets, so shipping a look means copying
        the block into public/onboarding.css — not flipping a flag.

   The base caption (public/onboarding.css) is the parchment panel with ink
   text — the "Scroll" look from this page, shipped on 2026-08-17 — sized with a
   fluid clamp() so it reads from a 384px phone to a 1920px desktop. The dark
   panel it replaced is still here as `classic`. Every theme below keeps that fluid type and only changes the
   surface, because the type scale is the part that already survives the
   viewport spread in the production numbers. */

/* ── Harness chrome ──────────────────────────────────────────────────────── */
/* The page sits on the game's sky-and-grass backdrop, which the site's own text
   colour was never meant to be read against — hence its own dark surface. */
.tutorial-playground-page {
  max-width: 1500px;
  margin: 12px auto 60px;
  padding: 16px 18px 24px;
  border-radius: 14px;
  background: rgba(12, 16, 22, 0.88);
  color: #eef2f6;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.tutorial-playground-page code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.tutorial-playground-page a {
  color: #ffd23a;
}

.tps-header h2 {
  margin: 0 0 6px;
}

.tps-header p {
  margin: 0 0 8px;
  max-width: 80ch;
  line-height: 1.5;
}

.tps-note {
  opacity: 0.75;
  font-size: 0.92em;
}

.tps-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.tps-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.9em;
}

.tps-field > span,
.tps-field legend {
  font-weight: 700;
  opacity: 0.85;
}

.tps-field select {
  min-width: 320px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font: inherit;
}

.tps-field-viewports {
  border: 0;
  margin: 0;
  padding: 0;
}

.tps-viewport-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tps-viewport-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tps-viewport-btn small {
  opacity: 0.6;
  font-size: 0.8em;
}

.tps-viewport-btn:hover {
  border-color: rgba(255, 210, 58, 0.6);
}

.tps-viewport-btn.is-active {
  border-color: #ffd23a;
  background: rgba(255, 210, 58, 0.14);
}

.tps-data {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.tps-data summary {
  cursor: pointer;
  font-weight: 700;
}

.tps-data-table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.9em;
}

.tps-data-table th,
.tps-data-table td {
  text-align: left;
  padding: 4px 14px 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tps-frame-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.9em;
}

.tps-zoom {
  opacity: 0.6;
}

/* The holder takes the scaled footprint so the page does not keep a
   1920px-wide hole when the frame is shown at 70%. */
.tps-frame-holder {
  overflow: hidden;
}

.tps-frame {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: #6dd3e7;
  display: block;
  /* content-box on purpose. clouds.css sets `* { box-sizing: border-box }`,
     which would make the 1px border eat into the frame — picking the 384px
     phone preset gave the document inside a 382px viewport, and 2px is enough
     to land on the wrong side of a breakpoint. */
  box-sizing: content-box;
}

/* ── Stage ───────────────────────────────────────────────────────────────── */
/* The stage is the game's own board, so it needs almost nothing — just the
   page chrome the game gets from layout.jsx and this page does not have. */
body.tutorial-playground-stage {
  min-height: 100vh;
  background: var(--primary-bg, #6dd3e7);
}

/* The navbar slot is present but blank, exactly as the lesson leaves it:
   visibility:hidden keeps the box, and the box is what pushes the board down. */
body.tutorial-playground-stage .navbar {
  visibility: hidden;
}

/* Deliberately NOT resetting body margin/padding, and deliberately NOT hiding
   overflow. mobile.css mobile.css puts 100px of
   side padding on the body above 768x601, and the board — and therefore every
   element the caption anchors to — sits inside it. Zeroing it here moved the
   caption ~57px left of where the game puts it, which is exactly the kind of
   quiet lie this page exists to avoid. */

/* ═══════════════════════════════════════════════════════════════════════════
   Caption looks
   ═══════════════════════════════════════════════════════════════════════════
   Each block restyles .onboarding-caption and its three children:
     .onboarding-caption-progress   "STEP 3 OF 8"
     .onboarding-caption-text       the sentence
     .onboarding-tap-hint           "Tap anywhere to continue"
   plus .onboarding-caption-seg for the stage-5 segmented line, whose bright
   and dim halves have to stay legible in every look.

   Anything that changes the panel's SIZE changes where it lands — main.js
   measures the caption to place it — so each look keeps its padding in the
   same neighbourhood as the shipping one. A theme that doubles the padding
   will move the caption on a 490px-tall embed. */

/* ── Classic — the look that shipped before 2026-08-17 ──────────────────── */
/* Kept so the current parchment caption can still be compared against what it
   replaced. This is a copy of the old .onboarding-caption rules, not a
   reference to them: onboarding.css now holds the parchment look, so the dark
   panel only exists here. */
.captiontheme-classic .onboarding-caption {
  color: #ffe9a8;
  font-family: sans-serif;
  background: rgba(18, 14, 8, 0.84);
  border: 1px solid rgba(255, 210, 58, 0.45);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.captiontheme-classic .onboarding-caption-progress {
  color: #ffd23a;
  opacity: 0.9;
}

.captiontheme-classic .onboarding-tap-hint {
  color: #ffd23a;
}

.captiontheme-classic .onboarding-caption-seg.onboarding-seg-dim {
  opacity: 0.4;
}

.captiontheme-classic .onboarding-caption-seg.onboarding-seg-active {
  color: #fff6cf;
  text-shadow: 0 0 10px rgba(255, 210, 58, 0.55), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ── B · Banner ──────────────────────────────────────────────────────────── */
/* A hanging heraldic banner: deep felt, gold trim, and a notched hem cut with
   a clip-path. The extra bottom padding is the hem — the text still sits in
   the same box, so the panel's usable area is unchanged. */
.captiontheme-banner .onboarding-caption {
  color: #ffeec2;
  font-family: sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  background:
    linear-gradient(180deg, rgba(126, 24, 24, 0.97), rgba(78, 12, 12, 0.97));
  border: 0;
  border-radius: 0;
  padding: 14px 20px 26px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 14px),
    50% 100%, 0 calc(100% - 14px)
  );
}

/* The gold trim, as an inset rule that follows the notch. */
.captiontheme-banner .onboarding-caption::before {
  content: "";
  position: absolute;
  inset: 4px 4px 4px;
  border: 1px solid rgba(255, 210, 58, 0.55);
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 12px),
    50% 100%, 0 calc(100% - 12px)
  );
  pointer-events: none;
}

.captiontheme-banner .onboarding-caption-progress {
  color: #ffd23a;
}

.captiontheme-banner .onboarding-tap-hint {
  color: #ffd98f;
}

/* ── C · Glass ───────────────────────────────────────────────────────────── */
/* Frosted dark glass with a gold hairline. The lightest-touch look: it lets
   the board show through, which suits the later stages where the caption sits
   over a busy board rather than an empty one. Being dark, it has to restate
   every ink colour the shipping parchment panel sets. */
.captiontheme-glass .onboarding-caption {
  color: #fff4d6;
  font-family: sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  background: rgba(16, 20, 28, 0.55);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
  backdrop-filter: blur(9px) saturate(1.2);
  border: 1px solid rgba(255, 210, 58, 0.35);
  border-radius: 12px;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.captiontheme-glass .onboarding-caption-progress {
  color: #ffd876;
  letter-spacing: 0.12em;
}

/* ── D · Slate ───────────────────────────────────────────────────────────── */
/* Flat and modern: near-black card, white text, one gold accent bar down the
   leading edge. No fantasy dressing — the most legible of the set on a small
   phone, which is 15% of players. */
.captiontheme-slate .onboarding-caption {
  color: #f4f6f8;
  font-family: sans-serif;
  background: rgba(14, 16, 20, 0.94);
  border: 0;
  border-left: 4px solid #ffd23a;
  border-radius: 4px;
  padding: 13px 17px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  text-align: left;
  text-shadow: none;
}

.captiontheme-slate .onboarding-caption-progress {
  color: #ffd23a;
  opacity: 0.95;
}

.captiontheme-slate .onboarding-tap-hint {
  color: #9fd8ff;
}

.captiontheme-slate .onboarding-caption-seg.onboarding-seg-active {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 210, 58, 0.5);
}

/* ── E · Plate ───────────────────────────────────────────────────────────── */
/* A bevelled stone plaque — the castle-wall material the game is already made
   of. Heavier than the rest; included because the board's own furniture
   (resource panels, castle) is stone and wood, and a matching caption reads as
   part of the game rather than an overlay on top of it. */
.captiontheme-plate .onboarding-caption {
  color: #fff3d4;
  font-family: sans-serif;
  background:
    linear-gradient(180deg, rgba(96, 92, 86, 0.96), rgba(58, 55, 51, 0.96));
  border: 1px solid rgba(20, 18, 16, 0.9);
  border-radius: 8px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 0 3px rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.85);
}

.captiontheme-plate .onboarding-caption-progress {
  color: #ffd23a;
}

.captiontheme-plate .onboarding-tap-hint {
  color: #ffe08a;
}