@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  /* Romanian diacritics (ă, ș, ț and friends) live outside the base latin set. */
  font-family: "Poppins";
  src: url("fonts/poppins-ext.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --ink: #16171d;
  --paper: #fff8ec;
  --paper-chip: rgba(255, 248, 236, 0.94);

  /* Fixed, contrast-checked secondary-text colors (added 2026-09-26,
     /impeccable audit) -- replace `opacity` used to fake a "muted" look on
     --ink/--card-1 text, which measured under WCAG AA's 4.5:1 on --paper at
     several real sizes/viewports. Each is a tint from its own source hue,
     never a plain gray, picked to clear 4.5:1 with a small safety margin
     (not just barely at the line): --ink-muted ~4.9:1, --card-1-text ~5.2:1
     against --paper. Use these for TEXT specifically; --ink/--card-1
     themselves are unchanged for borders, backgrounds, and other non-text
     uses. */
  --ink-muted: #6f6c6c;
  --card-1-text: #ad4464;

  /* poster-marker card colors, cycled per question */
  --card-0: #ffc53d; /* sun */
  --card-1: #ff5c8a; /* bubblegum */
  --card-2: #2fc1e0; /* sky */
  --card-3: #3fd17b; /* grass */
  --card-4: #ff7a3d; /* tangerine */
  --card-5: #8a63f2; /* grape */

  --shadow-ink: 6px 6px 0 var(--ink);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}

.screen {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* "safe center", not plain "center" (added 2026-09-26, alongside
     overflow-y below): confirmed live that plain "center" plus overflow
     clips symmetrically and scrolling can never reach the true start of
     overflowing content -- scrollTop stays 0 while the header sits at
     -124px, permanently unreachable. "safe" falls back to start-alignment
     only once content overflows, so the same scrollbar this story adds
     can actually reach everything. The plain "center" line stays right
     before it, deliberately: Safari added "safe"/"unsafe" only at 18
     (confirmed against caniuse) -- an older Safari treats the WHOLE
     "safe center" declaration as invalid and drops it, which would fall
     back to justify-content's own initial value ("normal", i.e.
     flex-start) and stop centering entirely on every screen, not just
     this overflow case. Keeping plain "center" as the line immediately
     before means an older engine that can't parse the second declaration
     simply keeps the first one it already applied, same as today. */
  justify-content: center;
  justify-content: safe center;
  /* Centered flex content with no overflow handling was silently
     unreachable past the viewport edge on a short/landscape screen
     (confirmed live on the start screen at 844x390) -- nothing scrolled,
     so clipped content had zero path back into view. auto is a no-op
     whenever content actually fits (every screen at ordinary sizes), and
     a real escape hatch everywhere it doesn't. */
  overflow-y: auto;
}

.screen[hidden] {
  display: none;
}

/* ---------- Start screen ---------- */

.start-screen {
  background: var(--paper);
  padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  gap: 2.25rem;
  text-align: center;
}

/* Added 2026-09-26: was a lone absolutely-positioned toggle floating over
   the centered content -- confirmed live, on a short/landscape viewport
   (visually verified via a real browser render, not just CSS reasoning)
   the vertically-centered stack overflowed past the top of the screen and
   collided with it, with no way to scroll to the clipped content. Putting
   the logo, eyebrow, and toggle in one real flex row reserves their own
   space in the document flow, so nothing can ever sit on top of anything
   else, at any viewport size -- not just a special case for short
   screens. */
.start-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 780px;
}

.start-logo {
  flex: none;
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
}

.eyebrow {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--ink);
  opacity: 0.7;
}

/* Scoped to .start-header specifically (fixed 2026-09-26, regression from
   the previous commit): .eyebrow is reused as a bare child of a vertical
   .screen flex column on 7 OTHER screens (draw prompt, daily-limit,
   parent gate, paywall, restore, restore-code-reveal) -- flex-grow there
   means "grow to fill the column's height", not "grow along the row" the
   way it does inside .start-header. A bare `.eyebrow { flex: 1 }` made
   every one of those screens balloon the eyebrow to ~225px tall and push
   everything else down into the bottom of the viewport -- confirmed live,
   this was the exact cause of the "huge whitespace" bug on the draw
   prompt screen. min-width: 0 stays scoped here too, for the same reason
   (it only matters for a flex item that's actually being asked to shrink
   below its content size, which again is only true inside the row). */
.start-header .eyebrow {
  flex: 1;
  min-width: 0;
}

.btn-start {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  color: var(--ink);
  background: var(--card-1);
  border: 4px solid var(--ink);
  border-radius: 2rem;
  padding: 0.6em 1.6em;
  box-shadow: var(--shadow-ink);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.btn-start:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
}

.mode-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* Tablet/laptop: a deliberate 2x2 grid instead of flex-wrap's organic
   wrapping (added 2026-09-26) -- confirmed live that flex-wrap left
   unpredictable, lopsided rows at real widths (3-across-plus-1-alone at
   1440px; a clean 2x2 only happened to occur around 1024px by accident).
   768px matches the iPad portrait width, a conventional tablet floor. */
@media (min-width: 768px) {
  .mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 780px;
    margin: 0 auto;
  }
}

.btn-mode {
  font-size: clamp(1.6rem, 5vw, 2.75rem);
  padding: 0.55em 1.1em;
}

.btn-mode-alt {
  background: var(--card-2);
}

.hint {
  margin: 0;
  max-width: 32ch;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  /* Fixed color, not opacity (/impeccable audit, 2026-09-26) -- opacity:
     0.65 on --ink measured 3.8:1 at mobile widths, under WCAG AA's 4.5:1
     minimum. --ink-muted clears it with margin. */
  color: var(--ink-muted);
}

/* ---------- Question stage ---------- */

.stage-screen {
  background: var(--card-0);
  transition: background-color 120ms ease;
  padding: 0;
}

.tap-layer {
  appearance: none;
  border: none;
  margin: 0;
  padding: 6vw;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  height: 100%;
}

.question {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.08;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* JS sets an explicit px font-size to auto-fit each question */
  font-size: 4rem;
}

.timer-ring {
  appearance: none;
  position: relative;
  flex: none;
  width: clamp(72px, 16vw, 140px);
  height: clamp(72px, 16vw, 140px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 90ms ease;
}

.timer-ring:active {
  transform: scale(0.92);
}

.timer-ring[hidden] {
  display: none;
}

.timer-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: no-preference) {
  .timer-ring.timer-idle .timer-ring-fg {
    animation: idle-pulse 1.6s ease-in-out infinite;
  }
}
@keyframes idle-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.timer-ring-bg,
.timer-ring-fg {
  fill: none;
  stroke-width: 10;
}

.timer-ring-bg {
  stroke: rgba(22, 23, 29, 0.15);
}

.timer-ring-fg {
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 0;
}

.timer-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 4.5vw, 2.25rem);
  color: var(--ink);
}

.timer-number.timer-label {
  font-size: clamp(0.9rem, 3vw, 1.4rem);
}

@media (prefers-reduced-motion: no-preference) {
  .timer-number.timer-done {
    animation: pop 200ms ease-out;
  }
}

.tap-layer:focus-visible,
.timer-ring:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .question.pop {
    animation: pop 160ms ease-out;
  }
}
@keyframes pop {
  from {
    transform: scale(0.94);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.btn-end {
  position: absolute;
  top: max(1.25rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  z-index: 2;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--paper-chip);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.6em 1.3em;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

.btn-end:active {
  background: var(--paper);
}

.btn-end:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tap-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.tap-hint.hidden {
  opacity: 0;
}

/* ---------- Icon sprite (Jocuri pictograms) ---------- */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-mode-games {
  background: var(--card-3);
}

/* ---------- Games list & detail screens ---------- */

.games-screen,
.game-detail-screen {
  background: var(--paper);
  justify-content: flex-start;
  padding: 0;
}

.btn-back {
  left: max(1.25rem, env(safe-area-inset-left));
  right: auto;
}

.games-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(max(1.25rem, env(safe-area-inset-top)) + 4rem) max(1.5rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  box-sizing: border-box;
}

.games-title {
  margin: 0 0 1.25rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--ink);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.1rem;
  max-width: 60rem;
  margin: 0 auto;
}

.game-card {
  appearance: none;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  border: 4px solid var(--ink);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-ink);
  padding: 1.1rem 0.75rem;
  cursor: pointer;
  color: var(--ink);
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.game-card:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
}

.game-card-icon {
  flex: none;
  width: clamp(52px, 12vw, 68px);
  height: clamp(52px, 12vw, 68px);
  border-radius: 50%;
  background: var(--paper-chip);
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-card-icon .icon {
  width: 62%;
  height: 62%;
}

.game-card-name {
  margin: 0;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
}

/* ---------- Game detail ---------- */

.game-detail-badge {
  width: clamp(84px, 20vw, 120px);
  height: clamp(84px, 20vw, 120px);
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-detail-badge .icon {
  width: 60%;
  height: 60%;
}

.game-detail-name {
  margin: 0 0 0.35rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--ink);
}

.game-detail-players {
  margin: 0 auto 1rem;
  max-width: 32ch;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: var(--ink);
  opacity: 0.65;
}

.game-detail-description {
  margin: 0 auto 1.75rem;
  max-width: 46ch;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.4;
  color: var(--ink);
}

.steps-title {
  margin: 0 auto 1rem;
  max-width: 46rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  opacity: 0.7;
}

.steps-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.step-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--paper-chip);
  border: 3px solid var(--ink);
  border-radius: 1.1rem;
  padding: 0.7rem 1rem;
}

.step-icon {
  flex: none;
  width: clamp(44px, 10vw, 56px);
  height: clamp(44px, 10vw, 56px);
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon .icon {
  width: 65%;
  height: 65%;
}

.step-text {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}

/* ---------- Desenează (draw) mode ---------- */

.btn-mode-draw {
  background: var(--card-4);
}

.draw-prompt-screen {
  background: var(--paper);
  padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  gap: 2rem;
  text-align: center;
}

.draw-prompt-text {
  margin: 0;
  max-width: 32ch;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink);
  font-size: clamp(1.6rem, 5.5vw, 2.6rem);
}

.draw-canvas-screen {
  background: var(--paper);
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  gap: 1rem;
}

.draw-canvas-caption {
  margin: 0;
  max-width: 40ch;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 2.6vw, 1.3rem);
  color: var(--ink);
  opacity: 0.75;
}

.draw-canvas-wrap {
  position: relative;
  width: min(88vw, 66vh, 640px);
  aspect-ratio: 1 / 1;
}

.draw-surface {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-ink);
  touch-action: none;
}

.btn-finish {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  color: var(--ink);
  background: var(--card-1);
  border: 4px solid var(--ink);
  border-radius: 1.5rem;
  padding: 0.5em 1.4em;
  box-shadow: var(--shadow-ink);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.btn-finish:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn-finish[hidden] {
  display: none;
}

/* ---------- Draw result screen (Story 1.5) ---------- */

.draw-result-screen {
  background: var(--paper);
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  gap: 1rem;
}

.draw-result-waiting,
.draw-result-error {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}

.draw-result-success {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.draw-result-waiting[hidden],
.draw-result-success[hidden],
.draw-result-error[hidden] {
  display: none;
}

.draw-result-message {
  margin: 0;
  max-width: 34ch;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  font-size: clamp(1.25rem, 4.5vw, 1.9rem);
}

.draw-spinner {
  width: clamp(56px, 14vw, 84px);
  height: clamp(56px, 14vw, 84px);
  border-radius: 50%;
  border: 7px solid rgba(22, 23, 29, 0.15);
  border-top-color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .draw-spinner {
    animation: draw-spin 900ms linear infinite;
  }
}

@keyframes draw-spin {
  to {
    transform: rotate(360deg);
  }
}

.draw-art-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: min(92vw, 72vh, 780px);
  aspect-ratio: 1 / 1;
}

.draw-result-main-img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: cover filled the frame but cropped into the actual
     artwork whenever the model's result wasn't square. draw.js now resizes
     #drawArtWrap to match the loaded image's real aspect ratio, so contain
     fills it exactly with no crop and no letterboxing. */
  object-fit: contain;
}

.draw-toggle-btn {
  appearance: none;
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: clamp(60px, 16vw, 96px);
  height: clamp(60px, 16vw, 96px);
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 1rem;
  box-shadow: var(--shadow-ink);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.draw-toggle-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.draw-toggle-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.draw-result-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ---------- Free counter (start screen, monetized deploy only) ---------- */

.parent-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.lang-toggle-btn {
  /* Real flex item now (added 2026-09-26), not position:absolute -- see
     .start-header's own comment for why. Reused as-is inside
     .policy-topbar (privacy.html/terms.html), already a real flex row. */
  flex: none;
  appearance: none;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper-chip);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.5em 1em;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

.lang-toggle-btn:active {
  background: var(--paper);
}

.main-legal-links {
  /* A real flex-flow item (not position:absolute) so it reserves its own
     space and can never visually overlap .parent-controls above it, no
     matter how tall that content gets (e.g. a longer free-counter string
     wrapping to two lines on a shorter/zoomed viewport — the bug this
     replaced: an absolutely-positioned bottom bar with no reserved space,
     which the centered stack above it could grow into and collide with).
     margin-top: auto pushes just this item to the bottom of .start-screen's
     centered flex column, while everything above it still centers in
     whatever space remains — the same "pinned near the bottom edge" look
     the old absolute positioning had, without the overlap risk. */
  margin: auto 0 0;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.free-counter {
  appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.6;
  cursor: pointer;
  padding: 0.4em 0.8em;
}

/* ---------- Daily limit / Parent Gate / Paywall ---------- */

.info-screen {
  background: var(--paper);
  padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  gap: 1.5rem;
  text-align: center;
}

.info-text {
  margin: 0;
  max-width: 26ch;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 4.5vw, 2.1rem);
  color: var(--ink);
}

/* Modifier, not a variant of .info-text's own rule (/impeccable audit,
   2026-09-26): .info-text's uppercase treatment is correct for the short
   headline labels it's normally used for ("Abonament activ", "8ish+"), but
   the Restore screen's one instance is a full instructional sentence --
   an all-caps sentence is genuinely harder to read (we recognize words by
   shape, which uppercase removes). Same size/weight/color as .info-text,
   just not shouted. */
.info-text-sentence {
  text-transform: none;
}

.info-subtext {
  margin: 0;
  max-width: 34ch;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--ink);
  opacity: 0.7;
}

.info-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.info-actions .btn-mode,
.paywall-plan {
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  padding: 0.55em 1.1em;
}

.gate-question {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.2rem);
  color: var(--ink);
}

.gate-input {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  text-align: center;
  width: 6rem;
  color: var(--ink);
  background: var(--paper-chip);
  border: 4px solid var(--ink);
  border-radius: 1rem;
  padding: 0.4em;
}

.gate-error {
  margin: 0;
  font-weight: 700;
  /* --card-1-text, not --card-1 (/impeccable audit, 2026-09-26) -- the raw
     card color measured 2.8:1 against --paper, well under WCAG AA's 4.5:1;
     the text-stroke below isn't counted toward contrast ratio. This is the
     actual "wrong answer, try again" message the parent gate depends on. */
  color: var(--card-1-text);
  -webkit-text-stroke: 0.6px var(--ink);
}

.restore-input {
  width: min(20rem, 80vw);
  text-align: left;
  font-size: 1.2rem;
}

/* Turnstile widget target (Story 6.3) — empty and hidden until
   window.LIMIT.getHumanToken actually renders a widget into it (see
   monetize.js); reserves no visible space before then. */
.turnstile-container {
  display: flex;
  justify-content: center;
  margin: 0.25rem 0;
}

.turnstile-container[hidden] {
  display: none;
}

.text-link-btn {
  appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  text-decoration: underline;
  color: var(--ink);
  opacity: 0.7;
  cursor: pointer;
  padding: 0.4em 0.8em;
}

.paywall-legal-links {
  display: flex;
  gap: 1rem;
  margin: 0;
}

/* ---------- Legal pages (privacy.html, terms.html) ---------- */
/* Unlike the app's .screen (fixed, full-viewport, single card at a time),
   these are normal scrolling documents — plain page flow, not the SPA's
   screen-switching system. Body copy uses the system font stack rather than
   Poppins: the self-hosted Poppins file only has a 700 (bold) weight (see
   the @font-face rules above), which suits the app's short shouted card
   text but reads poorly at paragraph length; headings still use Poppins so
   the page still feels like part of the same product. */

.policy-page {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

.policy-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
    max(3rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.policy-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.policy-back {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  color: var(--ink);
  opacity: 0.7;
}

.policy-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Added 2026-09-26 for privacy.html/terms.html, then reused as-is above
   every other in-app screen's own .eyebrow (index.html) -- one shared
   class rather than a near-duplicate per context. Reuses the same
   icon-192.png mark the start screen's .start-logo shows. display:block +
   margin auto centers it under text-align:center (a normal img is
   inline, so text-align alone doesn't center IT, only inline content). */
.brand-logo {
  display: block;
  margin: 0 auto 1rem;
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
}

/* Retargeted from ".policy-content h1" (/impeccable audit, 2026-09-26):
   the real <h1> lives in .policy-header (privacy.html/terms.html, both
   languages), a SIBLING of .policy-card.policy-content, not a descendant
   -- the old selector never matched anything, so this heading has been
   rendering at the browser's unstyled default this whole time. */
.policy-header h1 {
  margin: 0 0 0.4rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--ink);
}

.policy-updated {
  margin: 0;
  font-size: 0.9rem;
  /* Fixed color, not opacity (/impeccable audit, 2026-09-26) -- opacity:
     0.6 measured a severe 1.8:1 live against --paper, far under WCAG AA's
     4.5:1. --ink-muted clears it with margin. */
  color: var(--ink-muted);
}

.policy-card {
  background: var(--paper-chip);
  border: 3px solid var(--ink);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 5vw, 2.75rem);
}

.policy-content h2 {
  margin: 2rem 0 0.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}

.policy-content h2:first-child {
  margin-top: 0;
}

.policy-content p,
.policy-content li {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  max-width: 38rem;
}

.policy-content ul {
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
}

.policy-content a {
  color: var(--ink);
}

.policy-content strong {
  font-weight: 700;
}

.policy-footnote {
  text-align: center;
  margin: 2rem 0 0;
}

/* The restore code shown once at purchase (#restoreCodeReveal) and re-shown
   on #subscriptionInfo (#restoreCodeRevealValue / #subscriptionInfoCode) —
   large and letter-spaced so it's easy to read back when writing it down. */
.restore-code-display {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--paper-chip);
  border: 4px solid var(--ink);
  border-radius: 1rem;
  padding: 0.5em 0.9em;
}

.paywall-plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.paywall-plan {
  line-height: 1.3;
}

.paywall-price {
  display: inline-block;
  margin-top: 0.2em;
  font-size: 0.55em;
  text-transform: none;
  letter-spacing: 0;
}