/* ============================================================
   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;
  font-weight: 700;        /* score in bold */
  color: var(--ink);
  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;
  margin: 12px 0 2px;   /* now sits below the timer (timer on top, power-ups beneath) */
}

.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);
}

/* Icon + label scaffold. Desktop shows the icon (+ hover tooltip); the short
   word label is hidden here and revealed on touch screens (no hover there). */
.gtp-wc-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.gtp-wc-label { display: none; }

/* 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: 12px; }  /* more breathing room between the LIVES label and the hearts */
  .gtp-lives-label { font-size: 12px; letter-spacing: 0.1em; }
  /* Bigger, uniform power-up buttons with a short word under each icon.
     There's no hover on touch, so the label replaces the tooltip. All four
     buttons share the same size — including +20s — to avoid mis-taps.
     Scoped to the SOLO row (full width); the Duel band is too narrow for
     this, so it keeps its compact icons. */
  .gtp-wildcards:not(.gtp-duo-wildcards) { gap: 8px; }
  .gtp .gtp-wildcards:not(.gtp-duo-wildcards) .gtp-wildcard-btn {
    width: 62px;
    height: 54px;
    border-radius: 14px;
    flex-direction: column;
    gap: 3px;
  }
  .gtp .gtp-wildcards:not(.gtp-duo-wildcards) .gtp-wildcard-btn.gtp-wc-time { width: 62px; min-width: 0; padding: 0; }
  .gtp-wildcards:not(.gtp-duo-wildcards) .gtp-wc-icon { font-size: 20px; }
  .gtp-wildcards:not(.gtp-duo-wildcards) .gtp-wc-time .gtp-wc-time-text { display: none; } /* hide inline +20; label carries +20s */
  .gtp-wildcards:not(.gtp-duo-wildcards) .gtp-wc-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
  }
  .gtp-wildcards:not(.gtp-duo-wildcards) .gtp-wildcard-btn::after { display: none; } /* no hover tooltip on touch */

  /* 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; }

  /* ROOT FIX for the reported Android bug ("cannot see / tap option No3 — it's
     covered by a menu"): the review pill was position:absolute bottom:0, so it
     OVERLAID the lower option buttons whenever the browser URL bar shrank the
     usable height. Take it out of absolute positioning and into the flex column
     (it is already the game screen's last child) so it reserves its own height
     and the game body — flex:1 — is laid out entirely ABOVE it. The last answer
     can then never sit under the pill. `.gtp ` prefix beats redesign-modal.css
     (loaded later). Body scrolls if a very short screen still can't fit all. */
  .gtp .gtp-review-pill-wrap { position: static; flex: 0 0 auto; }
  .gtp .gtp-game-body.gtp-pill-visible { padding-bottom: 8px; }
  .gtp-game-body, .gtp-duo-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .gtp .gtp-review-pill, .gtp-review-pill { padding: 8px 14px; }
}

/* Short viewports (Android with the URL bar visible loses a lot of height, esp.
   Firefox): the painting has min-height:200 which, with the HUD + 4 options +
   review pill, overflows a ~640px screen and pushed options past the fold.
   Release the min-height so the painting can shrink, drop the empty hint strip,
   and tighten the HUD/options to reclaim space so all four answers fit above
   the pill without scrolling. Combined with the in-flow pill + body scroll
   above, no option is ever unreachable. Tall phones (>780px) are untouched. */
@media (max-width: 600px) and (max-height: 780px) {
  .gtp-painting-frame { min-height: 0; max-height: 30vh; }
  .gtp-hint-banner:empty { display: none; }
  .gtp-wildcards:not(.gtp-duo-wildcards) { margin: 6px auto 2px; }
  .gtp .gtp-option-btn { padding: 10px 14px; }
  .gtp-options { gap: 5px; }
}

/* ============================================================
   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: 1px solid var(--border, rgba(120,90,50,.22));
  border-left: 5px solid var(--ochre);
  padding: 16px 22px 18px;
  border-radius: 4px;
}
.gtp-learn-style-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ochre-deep);
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Clearer header: upright, darker, larger — reads as a real heading, not a
   faint decorative line. */
.gtp-learn-style-title {
  font-family: var(--serif);
  font-style: normal;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.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: 24px;
  font-weight: 500;
  transition: background 180ms, border-color 180ms, transform 180ms, box-shadow 180ms;
  -webkit-tap-highlight-color: transparent;
}
/* Mark the chosen name green / the correct one green, a wrong pick red —
   directly on the option (no extra verdict box). High specificity so it beats
   the white background set on the base rule above (id + 2 classes). */
#screen-learn .learn-options .option-btn.correct {
  background: var(--green-flash);
  border-color: var(--green-flash);
  color: #fff;
}
#screen-learn .learn-options .option-btn.incorrect {
  background: var(--red-flash);
  border-color: var(--red-flash);
  color: #fff;
}
#screen-learn .learn-options .option-btn:disabled:not(.correct):not(.incorrect) {
  opacity: 0.5;
}
@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. */
/* No verdict box anymore — the green/red now lives on the artist name itself.
   This is just a slim row holding the "Learn more about X" link. */
.gtp-learn-feedback {
  margin-top: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 4px 2px 0;
  border-radius: 0;
  position: relative;
  text-align: left;
}
.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; }
/* Verdict eyebrow / icon / title / artist all removed — the coloured name is
   the verdict now. Only the "Learn more" link remains. */
.gtp-learn-feedback-eyebrow,
.gtp-learn-feedback-icon,
.gtp-learn-feedback-title,
.gtp-learn-feedback-artist { display: none; }
.gtp-learn-readmore {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;             /* bigger, more legible */
  color: var(--ochre-deep);
  letter-spacing: 0.08em;
  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 → question → options → More works → feedback →
   Next → style hint. You can answer without reading the hint, so it drops to
   the bottom. */
@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. Larger artist
   names (were 15/13px — too small per feedback). */
.gtp #screen-learn .learn-options button,
#screen-learn.gtp .learn-options button {
  border: 1px solid rgba(28,26,23,0.45);
  background: #fff;
  padding: 13px 20px;
  font-size: 24px;
}
/* Verdict now lives on the name itself: green for correct, red for a wrong
   pick (these beat the white background above at (1,3,1)). */
.gtp #screen-learn .learn-options button.correct,
#screen-learn.gtp .learn-options button.correct {
  background: var(--green-flash); border-color: var(--green-flash); color: #fff;
}
.gtp #screen-learn .learn-options button.incorrect,
#screen-learn.gtp .learn-options button.incorrect {
  background: var(--red-flash); border-color: var(--red-flash); color: #fff;
}
/* Phones: slightly tighter but still large + legible. */
@media (max-width: 600px) {
  #screen-learn .learn-options { gap: 6px; }
  .gtp #screen-learn .learn-options button,
  #screen-learn.gtp .learn-options button {
    padding: 11px 16px;
    font-size: 20px;
    min-height: 44px;
  }
}
/* 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; }
}