/* ============================================================
   Guess the Painter — Phase 3: In-game Solo
   redesign-game.css — scoped under .gtp to preserve legacy styles.
   2026-05 redesign branch.
   ============================================================ */

/* ----- Screen reset (solo new-style game) ----- */
#screen-game.gtp-solo-active {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   HUD
   ============================================================ */
.gtp-game-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 6px 24px 0;
  flex-shrink: 0;
  gap: 16px;
}
.gtp-game-hud > .gtp-hud-left { justify-self: start; }
.gtp-game-hud > .gtp-wildcards { justify-self: center; }
.gtp-game-hud > .gtp-hud-right { justify-self: end; }
/* Right cluster: lives on the right, brand stays on the left */
.gtp-hud-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Left: back arrow + logo + lives */
.gtp-hud-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gtp-hud-back {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-3);
  padding: 6px 4px;
  line-height: 1;
  transition: color 160ms ease;
}
.gtp-hud-back:hover { color: var(--ink); }

/* Center: lives label + 3 heart pips */
.gtp-lives {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gtp-lives-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.gtp-lives-pips {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
  Heart pip: CSS-only heart via rotated square + two pseudo-element circles.
  Filled = solid var(--red). Empty = outline var(--ink-4), opacity 0.55.
  14×14px square rotated -45deg; ::before = left circle, ::after = top circle.
*/
.gtp-life-pip {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: 0 0 14px;
  transform: rotate(-45deg);
  border-radius: 0;
  transition: opacity 280ms ease, transform 280ms ease;
}

/* Filled state */
.gtp-life-pip.is-filled {
  background: var(--red);
  border: none;
  opacity: 1;
}

/* Empty state */
.gtp-life-pip:not(.is-filled) {
  background: transparent;
  border: 1.5px solid var(--ink-4);
  opacity: 0.55;
}

/* Left circle (::before) */
.gtp-life-pip::before,
.gtp-life-pip::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.gtp-life-pip.is-filled::before,
.gtp-life-pip.is-filled::after {
  background: var(--red);
  border: none;
}

.gtp-life-pip:not(.is-filled)::before,
.gtp-life-pip:not(.is-filled)::after {
  background: var(--paper);
  border: 1.5px solid var(--ink-4);
}

/* ::before = left circle offset */
.gtp-life-pip::before {
  left: -7px;
  top: 0;
}

/* ::after = top circle offset */
.gtp-life-pip::after {
  left: 0;
  top: -7px;
}

/* Drain animation — spec: scale(1) → scale(1.3) → scale(1) */
@keyframes gtp-heart-drain {
  0%   { transform: rotate(-45deg) scale(1);    }
  50%  { transform: rotate(-45deg) scale(1.3);  }
  100% { transform: rotate(-45deg) scale(1);    opacity: 0.55; }
}
.gtp-life-pip.is-draining {
  animation: gtp-heart-drain 280ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Right: streak counter */
.gtp-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.gtp-streak-dot {
  color: var(--ochre-deep);
  font-size: 9px;
}
.gtp-streak[hidden],
.gtp-streak.gtp-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================
   WILDCARDS ROW
   ============================================================ */
.gtp-wildcards {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.gtp-wildcard-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--ink);   /* thin black border */
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  /* All glyphs render at one consistent size so ½ ⟳ ✦ +20 read evenly */
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(28,26,23,0.08);
}
.gtp-wildcard-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(28,26,23,0.15);
}
.gtp-wildcard-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(28,26,23,0.08);
}

/* CSS-only tooltip via data-tooltip attribute */
.gtp-wildcard-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  transition-delay: 0ms;
  z-index: 50;
}
.gtp-wildcard-btn:hover:not(:disabled)::after {
  opacity: 1;
  transition-delay: 200ms;
}

/* Used / disabled state */
.gtp-wildcard-btn:disabled,
.gtp-wildcard-btn.gtp-wc-used {
  border-color: var(--ink-4);
  color: var(--ink-4);
  text-decoration: line-through;
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   TIMER (15 s countdown per question)
   ============================================================ */
.gtp-timer-wrap {
  margin: 4px auto 0;
  max-width: 340px;
  width: 100%;
  padding: 0 16px;
  flex-shrink: 0;
  font-family: var(--mono);
  user-select: none;
  box-sizing: border-box;
}
.gtp-timer-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  color: var(--ink);
}
.gtp-timer-value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}
.gtp-timer-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gtp-timer-bar {
  height: 8px;
  margin-top: 8px;
  background: rgba(28,26,23,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.gtp-timer-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 100ms linear, background 200ms ease;
}
.gtp-timer-wrap.is-warning .gtp-timer-value {
  color: var(--red);
  animation: gtp-timer-blink 520ms ease-in-out infinite;
}
.gtp-timer-wrap.is-warning .gtp-timer-bar-fill {
  background: var(--red);
}
@keyframes gtp-timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Hint banner — movement label revealed by Hint wildcard */
.gtp-hint-banner {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ochre-deep);
  text-transform: uppercase;
  padding: 6px 20px 0;
  min-height: 24px;
  flex-shrink: 0;
  transition: opacity 200ms;
}
.gtp-hint-banner:empty { opacity: 0; }

/* ============================================================
   PAINTING AREA + QUESTION + OPTIONS — the slide container
   ============================================================ */
.gtp-game-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* generous bottom padding reserves clearance for the absolute review
     strip so the last option is never hidden behind it */
  padding: 6px 0 58px;
  overflow: hidden;
  min-height: 0;
}

/* Centered content column — painting + question + options all share same 480px column */
.gtp-solo-content {
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* children stretch full-width (painting + option buttons); the question
     and the names are centred via text-align / justify-content, NOT by
     shrinking the column items. */
}

/* Painting frame stretches to fill the column width */
.gtp-solo-content .gtp-painting-frame {
  width: 100%;
}

.gtp-solo-content .gtp-painting-img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* always fit inside the frame, never clip */
  max-height: none;
}

/* Animated slide wrapper */
.gtp-slide-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  will-change: transform, opacity;
  transition:
    transform 700ms cubic-bezier(.4, 0, .2, 1),
    opacity 500ms ease;
}

.gtp-slide-wrap.gtp-exiting {
  transform: translateY(-36px);
  opacity: 0;
}
.gtp-slide-wrap.gtp-entering {
  transform: translateY(36px);
  opacity: 0;
}
.gtp-slide-wrap.gtp-asking {
  transform: translateY(0);
  opacity: 1;
}

/* Painting frame */
.gtp-painting-frame {
  /* Grow to fill the leftover space above the (fixed) question + options so
     the painting is as large as possible; the cap keeps it sane on tall
     screens. object-fit:contain handles portrait vs landscape. */
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  max-height: 58vh;
  margin-bottom: 4px;
  position: relative;
  background: var(--paper-2);
  border-radius: 2px;
  overflow: hidden;
}

.gtp-painting-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

/* Loading spinner inside painting frame */
.gtp-painting-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}

.gtp-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--rule);
  border-top-color: var(--ink-3);
  border-radius: 50%;
  animation: gtp-spin 0.8s linear infinite;
}
@keyframes gtp-spin { to { transform: rotate(360deg); } }

/* Question label */
.gtp-question-label {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
  margin-bottom: 8px;
  flex-shrink: 0;
  line-height: 1.2;
  text-align: center;
}

/* ============================================================
   OPTION BUTTONS
   ============================================================ */
.gtp-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
  width: 100%;
}

.gtp-option-btn {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);     /* thin black frame on each */
  border-radius: 4px;
  padding: 30px 28px;               /* taller box, text size unchanged → more breathing room */
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;          /* centre the painter name */
  gap: 14px;
  font-family: var(--serif);
  font-size: 20px;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

/* Hover only on devices that truly hover (desktop) — avoids the dark border
   sticking to the last-tapped option on touch screens. */
@media (hover: hover) {
  .gtp-option-btn:hover:not(:disabled) {
    border-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28,26,23,0.10);
  }
}
/* :focus-visible (keyboard) only — a tap/click no longer leaves a dark border. */
.gtp-option-btn:active:not(:disabled),
.gtp-option-btn:focus-visible:not(:disabled) {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28,26,23,0.10);
}

.gtp-option-btn:disabled {
  cursor: default;
}

/* Letter prefix (A/B/C/D) */
.gtp-option-letter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  min-width: 12px;
}

/* Painter name */
.gtp-option-name {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
}

/* Result glyph — absolutely positioned so the name stays centred */
.gtp-option-check {
  font-family: var(--mono);
  font-size: 14px;
  flex-shrink: 0;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 120ms;
}

/* CORRECT flash */
.gtp-option-btn.gtp-correct {
  background: var(--green-flash);
  color: #fff;
  border-color: var(--green-flash);
  transform: scale(1.02);
}
.gtp-option-btn.gtp-correct .gtp-option-letter { color: rgba(255,255,255,0.7); }
.gtp-option-btn.gtp-correct .gtp-option-check { opacity: 1; }

/* WRONG flash */
.gtp-option-btn.gtp-wrong {
  background: var(--red-flash);
  color: #fff;
  border-color: var(--red-flash);
  transform: scale(1.02);
}
.gtp-option-btn.gtp-wrong .gtp-option-letter { color: rgba(255,255,255,0.7); }
.gtp-option-btn.gtp-wrong .gtp-option-check { opacity: 1; }

/* Dimmed (not selected, not correct) after answering */
.gtp-option-btn.gtp-dimmed {
  background: rgba(255,255,255,0.4);
  color: var(--ink-4);
  border-color: var(--rule-soft);
}
.gtp-option-btn.gtp-dimmed .gtp-option-letter { color: var(--ink-4); }

/* 50/50 crossed-out eliminated option */
.gtp-option-btn.gtp-eliminated {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
@keyframes gtp-cross-out {
  0%   { opacity: 1; text-decoration: none; }
  40%  { text-decoration: line-through; color: var(--ink-4); }
  100% { opacity: 0; }
}
.gtp-option-btn.gtp-eliminating {
  animation: gtp-cross-out 320ms ease forwards;
}

/* ============================================================
   GAME OVER SCREEN (redesign tokens applied)
   ============================================================ */
#screen-gameover.gtp-solo-active {
  background: var(--paper);
}

.gtp-gameover-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  flex: 1;
  gap: 16px;
  text-align: center;
}

.gtp-gameover-title {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}

.gtp-gameover-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin: 0;
}

.gtp-gameover-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0;
}

.gtp-stat {
  text-align: center;
  min-width: 64px;
}

.gtp-stat-value {
  font-family: var(--mono);
  font-size: 32px;
  color: var(--ink);
  line-height: 1;
}

.gtp-stat-value.gtp-stat-primary {
  color: var(--ochre-deep);
  font-size: 48px;
}

.gtp-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-top: 4px;
}

.gtp-gameover-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms;
  margin-top: 8px;
}
.gtp-gameover-cta:hover { background: var(--ink-2); }

.gtp-gameover-home {
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms;
}
.gtp-gameover-home:hover { color: var(--ink-2); }

/* ============================================================
   LEADERBOARD SAVE ENTRY (inside game-over)
   ============================================================ */
.gtp-lb-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.gtp-lb-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
}

.gtp-lb-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  outline: none;
  transition: border-color 160ms;
}
.gtp-lb-input:focus { border-color: var(--ochre); }

.gtp-lb-save {
  width: 100%;
  padding: 11px;
  background: var(--ochre);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms;
}
.gtp-lb-save:hover { background: var(--ochre-deep); }
.gtp-lb-save:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 375px) {
  .gtp-painting-frame {
    max-height: 42vh;
  }
  .gtp-option-name {
    font-size: 17px;
  }
  .gtp-question-label {
    font-size: 19px;
  }
}

@media (min-height: 900px) {
  /* Tall screens: let the painting use more of the height. */
  .gtp-painting-frame {
    max-height: 64vh;
  }
}

/* ============================================================
   PHONE (≤600px) — fit HUD + painting + question + options +
   review strip on one screen. Without this the brand lockup
   pushed the powerups off the right edge and the absolute
   review pill covered the last answer.
   Placed AFTER the queries above so it wins source-order ties
   (e.g. min-height:800 also matches a tall 375×812 phone).
   ============================================================ */
@media (max-width: 600px) {
  /* HUD: drop the wordmark lockup. Layout stays 3-col so lives sit on the
     right: [back] | [wildcards] | [lives]. */
  /* Two rows: row 1 = back + lives ... score; row 2 = power-ups (centered). */
  .gtp-game-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 14px 2px;
  }
  .gtp-game-hud .gtp-brand { display: none; }
  .gtp-game-hud > .gtp-hud-left { order: 1; flex: 0 0 auto; }
  .gtp-game-hud > .gtp-hud-right { order: 2; flex: 1; justify-content: space-between; }
  .gtp-game-hud > .gtp-wildcards { order: 3; flex: 0 0 100%; justify-content: center; }
  .gtp-hud-left { gap: 8px; }
  .gtp-hud-right { gap: 8px; }
  .gtp-lives { gap: 6px; }
  .gtp-lives-label { font-size: 12px; letter-spacing: 0.1em; }
  .gtp-wildcards { gap: 7px; }
  .gtp .gtp-wildcard-btn { width: 36px; height: 36px; font-size: 14px; }
  .gtp .gtp-wildcard-btn.gtp-wc-time { width: auto; min-width: 52px; padding: 0 9px; font-size: 12px; }

  /* Cap the frame so painting + question + 4 options + strip all fit. */
  .gtp-painting-frame { max-height: 44vh; }
  .gtp-question-label { font-size: 18px; margin-top: 8px; margin-bottom: 8px; }

  /* Tighter option boxes so all four artists are always visible without
     scrolling, even on shorter phones. */
  .gtp-options { gap: 6px; }
  .gtp .gtp-option-btn { padding: 12px 14px; }
  .gtp .gtp-option-name { font-size: 16px; }

  /* Review pill is position:absolute bottom:0 — reserve clearance so the
     last option is never hidden behind it, and slim the strip down. */
  .gtp-game-body { padding-bottom: 50px; }
  .gtp .gtp-review-pill, .gtp-review-pill { padding: 8px 14px; }
}

/* ============================================================
   LEARN MODE — redesign overlay
   ============================================================ */
#screen-learn.gtp-learn {
  background: var(--paper);
  padding: 0;
  gap: 0;
  display: none;
  flex-direction: column;
  /* Scroll the whole screen when content (long style note + big options +
     feedback + Next button) exceeds the viewport, so nothing is ever clipped.
     On tall screens it simply doesn't scroll. */
  overflow-y: auto;
  overflow-x: hidden;
}
#screen-learn.gtp-learn.active { display: flex; }

.gtp-learn-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px 8px;
  border-bottom: 1px solid rgba(184, 137, 58, 0.55);
  flex-shrink: 0;
  gap: 16px;
}
.gtp-learn-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.gtp-learn-brand .gtp-brand-lockup {
  height: 26px;
  width: auto;
  display: block;
}
.gtp-learn-counter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gtp-learn-topbar-right {
  min-width: 80px;
}

/* Learn timer — same component as Solo, just under the topbar */
.gtp-learn-timer-wrap {
  margin: 10px auto 4px;
}

.gtp-learn-container {
  flex: 0 0 auto;            /* grow to content; the screen scrolls if needed */
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  padding: 18px 32px 32px;
  overflow: visible;
  min-height: 0;
}

.gtp-learn-gallery-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#screen-learn .learn-gallery {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

/* Black CTA matching the home 'Start playing' button (rectangular, ink) */
.gtp-learn-more-btn {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: stretch;          /* full width of the gallery column */
  padding: 18px 32px;           /* same as Start Playing */
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 160ms ease, opacity 160ms ease;
}
.gtp-learn-more-btn:hover:not(:disabled) {
  background: var(--ink-2);
}
.gtp-learn-more-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.gtp-learn-more-icon {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
}

.gtp-learn-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}

.gtp-learn-style-card {
  background: var(--paper-2);
  border-left: 4px solid var(--ochre);
  padding: 16px 22px;
  border-radius: 2px;
}
.gtp-learn-style-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ochre-deep);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gtp-learn-style-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;          /* smaller title — let the body lead */
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.gtp-learn-style-text {
  font-family: var(--serif);
  font-size: 20px;          /* bigger, darker body — the main read */
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.gtp-learn-style-text strong, .gtp-learn-style-text b {
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
}
.gtp-learn-style-text em, .gtp-learn-style-text i {
  font-style: italic;
  color: var(--ochre-deep);
}
/* Long descriptions clamp to a few lines with a See more / See less toggle
   so the style card never grows tall enough to push the options off-screen. */
.gtp-learn-style-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gtp-learn-style-toggle {
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  cursor: pointer;
}
.gtp-learn-style-toggle:hover { color: var(--ink); }
.gtp-learn-style-toggle.hidden { display: none; }

.gtp-learn-question {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-2);
  margin: 2px 0 2px;
  line-height: 1.2;
}

#screen-learn .learn-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Option buttons in Learn inherit option styling */
#screen-learn .learn-options button,
#screen-learn .learn-options .option-btn {
  background: #fff;
  color: var(--ink);
  border: 2px solid rgba(28,26,23,0.55);
  border-radius: 4px;
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 20px;
  transition: background 180ms, border-color 180ms, transform 180ms, box-shadow 180ms;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  #screen-learn .learn-options button:hover:not(:disabled) {
    border-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28,26,23,0.10);
  }
}
#screen-learn .learn-options button:disabled {
  cursor: default;
}

/* Feedback box (correct / wrong) — full width like the option boxes,
   clear green / red tint + border, minimalist. */
.gtp-learn-feedback {
  margin-top: 12px;
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 14px 22px;          /* compact — much shorter box */
  border-radius: 4px;
  position: relative;
  text-align: center;
}
.gtp-learn-feedback.hidden { display: none; }
/* Same vivid fills as the in-game correct/wrong flash, white text. */
.gtp-learn-feedback.is-correct { border-color: var(--green-flash); background: var(--green-flash); }
.gtp-learn-feedback.is-wrong   { border-color: var(--red-flash);   background: var(--red-flash); }
.gtp-learn-feedback.is-correct .gtp-learn-feedback-title,
.gtp-learn-feedback.is-wrong   .gtp-learn-feedback-title,
.gtp-learn-feedback.is-correct .gtp-learn-feedback-artist,
.gtp-learn-feedback.is-wrong   .gtp-learn-feedback-artist { color: #fff; }
.gtp-learn-feedback.is-correct .gtp-learn-readmore,
.gtp-learn-feedback.is-wrong   .gtp-learn-readmore { color: rgba(255,255,255,0.9); }
.gtp-learn-feedback .gtp-learn-readmore:hover { color: #fff; }
.gtp-learn-feedback-eyebrow { display: none; }
/* Icon removed — the verdict reads as text only. */
.gtp-learn-feedback-icon { display: none; }
.gtp-learn-feedback-title {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;             /* bigger */
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
/* (verdict title colour now handled by the white-on-vivid rule above) */
.gtp-learn-feedback-artist {
  font-family: var(--serif);
  font-size: 22px;             /* bigger */
  color: var(--ink);
  margin: 6px 0 8px;
}
.gtp-learn-feedback-artist:empty { display: none; }
.gtp-learn-readmore {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;             /* bigger, more legible */
  color: var(--ochre-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  margin-bottom: 0;
  transition: color 160ms;
}
.gtp-learn-readmore:hover { color: var(--ink); }
.gtp-learn-next-btn {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;                  /* full width, outside the verdict box */
  padding: 18px 32px;           /* same as Start Playing */
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms;
}
.gtp-learn-next-btn:hover { background: var(--ink-2); }
.gtp-learn-next-btn.hidden { display: none; }

/* ----- Responsive: single column under 900px ----- */
@media (max-width: 900px) {
  /* Stack gallery over style + options and let the WHOLE screen scroll.
     Previously the inner container was flex:1 with grid tracks, so its
     scrollHeight never grew past the viewport and the lower options were
     unreachable on phones. Scrolling at the screen level fixes that. */
  #screen-learn.gtp-learn { overflow-y: auto; }
  .gtp-learn-container {
    grid-template-columns: 1fr;
    padding: 16px 20px 24px;
    gap: 18px;
    flex: 0 0 auto;     /* grow to content height instead of clipping */
    overflow: visible;
  }
  .gtp-learn-style-title { font-size: 24px; }
  .gtp-learn-style-text  { font-size: 17px; }
}

/* Phone Learn order: gallery → More works → question → options → feedback →
   Next → style hint. You can answer without reading the hint, so it drops to
   the bottom (the options sit right under More works). */
@media (max-width: 600px) {
  #screen-learn .gtp-learn-style-card { order: 5; margin-top: 6px; }
  /* Shorter gallery tiles + tighter gaps so the paintings + options fit
     without scrolling (the square 2x2 grid was too tall). */
  #screen-learn .learn-gallery { gap: 8px; }
  #screen-learn .learn-gallery-item { aspect-ratio: 4 / 3; }
  .gtp-learn-container { gap: 12px; padding: 12px 18px 20px; }
}

/* ============================================================
   TIME EXTENSION WILDCARD — clock + +20 layout (wider than other wc)
   ============================================================ */
.gtp-wildcard-btn.gtp-wc-time {
  width: auto;
  min-width: 64px;
  padding: 0 14px;
  gap: 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gtp-wc-time-icon {
  font-size: 16px;
  line-height: 1;
}
.gtp-wc-time-text {
  line-height: 1;
}

/* ============================================================
   HINT MODAL — small modal triggered by hint wildcard
   ============================================================ */
.gtp-hint-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.84);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}
.gtp-hint-backdrop.gtp-modal-open {
  opacity: 1;
  pointer-events: auto;
}
.gtp-hint-card {
  background: var(--paper);
  width: min(460px, calc(100vw - 48px));
  border-radius: 6px;
  border-left: 4px solid var(--ochre);   /* echoes the result-modal callout */
  padding: 30px 34px 26px;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 240ms ease-out, opacity 220ms ease-out;
}
.gtp-hint-backdrop.gtp-modal-open .gtp-hint-card {
  transform: scale(1);
  opacity: 1;
}
.gtp-hint-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.gtp-hint-icon {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--ochre-deep);
  flex-shrink: 0;
}
.gtp-hint-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.gtp-hint-body {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px;
}
.gtp-hint-tap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ============================================================
   SPECIFICITY OVERRIDES — beat tokens.css `.gtp button { border:0;
   background:none; padding:0 }` (0,1,1). The single-class rules above
   (0,1,0) lose to it, which silently wiped option/wildcard borders,
   backgrounds and padding. Doubling the .gtp scope (0,2,0) wins.
   ============================================================ */
.gtp .gtp-option-btn {
  background: #fff;
  border: 1px solid rgba(28,26,23,0.45);   /* thinner, softer frame */
  padding: 11px 22px;                        /* compact box, slightly shorter */
}
/* Vivid flash — these win the .gtp button specificity war; use the saturated
   flash colours + white text so correct/wrong read clearly (not pale). */
.gtp .gtp-option-btn.gtp-correct { background: var(--green-flash); border-color: var(--green-flash); color: #fff; }
.gtp .gtp-option-btn.gtp-wrong   { background: var(--red-flash);   border-color: var(--red-flash);   color: #fff; }

.gtp .gtp-wildcard-btn {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 0;
}
.gtp .gtp-wildcard-btn.gtp-wc-time { padding: 0 12px; }
.gtp .gtp-wildcard-btn:disabled,
.gtp .gtp-wildcard-btn.gtp-wc-used {
  border-color: var(--ink-4);
  background: var(--paper);
}

/* Learn option buttons: same specificity fix, thinner border */
.gtp #screen-learn .learn-options button,
#screen-learn.gtp .learn-options button {
  border: 1px solid rgba(28,26,23,0.45);
  background: #fff;
  padding: 9px 18px;
  font-size: 15px;
}
/* Phones: smaller artist boxes (placed after the base override so it wins).
   A min-height was forcing ~54px tall regardless of padding — drop it. */
@media (max-width: 600px) {
  #screen-learn .learn-options { gap: 6px; }
  .gtp #screen-learn .learn-options button,
  #screen-learn.gtp .learn-options button {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 40px;
  }
}
/* More-works + Next: also beat `.gtp button {background:none}` so the ink
   buttons actually render black (they were transparent). */
.gtp .gtp-learn-more-btn, #screen-learn.gtp .gtp-learn-more-btn,
.gtp .gtp-learn-next-btn, #screen-learn.gtp .gtp-learn-next-btn {
  background: var(--ink);
  color: var(--paper);
  /* .gtp prefix (0,2,0) beats `.gtp button { font: inherit }` (0,1,1) so the
     Start-Playing font + padding actually land. Full width, edge to edge. */
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 18px 32px;
  width: 100%;
  justify-content: center;
}
.gtp .gtp-learn-more-btn:hover:not(:disabled),
.gtp .gtp-learn-next-btn:hover { background: var(--ink-2); }
.gtp .gtp-learn-more-btn:disabled { background: var(--ink); opacity: 0.4; }
/* More works is a small secondary button (compact, not a full-width CTA) so
   the gallery + options fit without scrolling. Overrides the shared block
   above (same specificity, later source). */
.gtp .gtp-learn-more-btn, #screen-learn.gtp .gtp-learn-more-btn {
  width: auto;
  align-self: center;
  margin-top: 10px;
  padding: 7px 16px;
  font-size: 10px;
  letter-spacing: 0.14em;
  gap: 7px;
}
.gtp .gtp-learn-more-btn .gtp-learn-more-icon { font-size: 13px; }

/* ============================================================
   SOLO GAME OVER — redesign skin (screen-gameover gets .gtp.gtp-go)
   ============================================================ */
#screen-gameover.gtp-go {
  background: var(--paper);
}
#screen-gameover.gtp-go .gameover-bg {
  opacity: 0.10;
  filter: grayscale(0.3);
}
#screen-gameover.gtp-go .gameover-container {
  background: transparent;
  box-shadow: none;
  border: 0;
  max-width: 560px;
  margin: 0 auto;            /* centre the block horizontally */
  justify-content: center;   /* and vertically within the screen */
  text-align: center;
}
/* no emoji icon */
#screen-gameover.gtp-go .gameover-icon { display: none; }
/* hide the inline button emojis (🔄 💾) */
#screen-gameover.gtp-go .btn-icon { display: none; }

#screen-gameover.gtp-go .gameover-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 68px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.05;
}
#screen-gameover.gtp-go .gameover-subtitle {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 32px;
}
/* Celebratory entrance for good runs — title pops in with a gold sweep */
#screen-gameover.gtp-go.gtp-go-celebrate .gameover-title {
  color: var(--ochre-deep);
  animation: gtp-go-pop 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#screen-gameover.gtp-go.gtp-go-celebrate .gameover-subtitle {
  animation: gtp-go-rise 620ms ease both 120ms;
}
@keyframes gtp-go-pop {
  0%   { opacity: 0; transform: scale(0.7) rotate(-3deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(0.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes gtp-go-rise {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Stats row — flat, no 3D cards */
#screen-gameover.gtp-go .gameover-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
#screen-gameover.gtp-go .stat-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  padding: 18px 22px;
  flex: 1;
}
#screen-gameover.gtp-go .stat-card:last-child { border-right: 0; }
#screen-gameover.gtp-go .stat-value {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  color: var(--ink);
}
#screen-gameover.gtp-go .stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
/* Leaderboard entry */
#screen-gameover.gtp-go .leaderboard-entry {
  background: var(--paper-2);
  border: 0;
  border-left: 4px solid var(--ochre);
  border-radius: 2px;
  padding: 20px 22px;
  margin-bottom: 24px;
  text-align: left;
}
#screen-gameover.gtp-go .lb-entry-text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 12px;
}
#screen-gameover.gtp-go .lb-input {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  outline: none;
  margin-bottom: 12px;
  box-sizing: border-box;
}
#screen-gameover.gtp-go .lb-input:focus { border-color: var(--ochre); }
/* Buttons — match the rest of the redesign (ink primary + ghost) */
#screen-gameover.gtp-go .gameover-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Shared button geometry (the two real buttons) */
#screen-gameover.gtp-go #btn-save-score,
#screen-gameover.gtp-go #btn-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding: 15px 24px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, color 160ms;
  box-shadow: none;
}
/* Save score = the primary action (ink filled) — nudge people to save. */
#screen-gameover.gtp-go #btn-save-score {
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
}
#screen-gameover.gtp-go #btn-save-score:hover { background: var(--ink-2); border-color: var(--ink-2); }
/* Play again = secondary (transparent / outline). */
#screen-gameover.gtp-go #btn-replay {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
#screen-gameover.gtp-go #btn-replay:hover { background: var(--ink); color: var(--paper); }
/* Home = plain text link (not a button). */
#screen-gameover.gtp-go #btn-home {
  background: none;
  border: 0;
  padding: 8px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms;
}
#screen-gameover.gtp-go #btn-home:hover { color: var(--ink); }

/* Game over on phones — large but not overwhelming (placed after the base
   rules so it wins source-order ties at equal specificity). */
@media (max-width: 600px) {
  #screen-gameover.gtp-go .gameover-title { font-size: 44px; }
  #screen-gameover.gtp-go .stat-value { font-size: 32px; }
  #screen-gameover.gtp-go .gameover-container { padding: 24px 20px; }
}

/* ============================================================
   DUEL RESULT — minimal redesign skin (winner name + score only),
   mirrors the solo game over. Buttons use the shared ink/outline scheme.
   ============================================================ */
#screen-duel-result.gtp-duelend-screen { background: var(--paper); }
#screen-duel-result.gtp-duelend-screen.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
#screen-duel-result .gameover-bg { opacity: 0.10; filter: grayscale(0.3); }
.gtp-duelend {
  position: relative;
  z-index: 1;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
}
.gtp-duelend-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 6px;
}
.gtp-duelend-name {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 8px;
}
.gtp-duelend-name:empty { display: none; }
.gtp-duelend-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin: 0 0 32px;
}
.gtp-duelend-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* .gtp prefix beats `.gtp button` reset so font/padding/colour all land. */
.gtp .gtp-duelend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding: 15px 24px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.gtp .gtp-duelend-btn.primary { background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }
.gtp .gtp-duelend-btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.gtp .gtp-duelend-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.gtp .gtp-duelend-btn.ghost:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 600px) {
  .gtp-duelend-title { font-size: 44px; }
}