/* Guess the Price - activity styles.
   Rebuilt 2026-10-10 against the owner's designer handoff
   (design/guess-the-price/handoff/ - approved/01..05 + builder-html-css).
   Palette, ratios and sizes follow the handoff; the host SETUP form
   translates the Shadcn/Radix guidance into plain CSS (owner decision:
   no frameworks). The THREE projector screens scope their shell overrides
   to body.game-shell-live.gtp-host-live so Quiz/Reflex chrome is untouched;
   per-screen geometry hangs off body[data-gtp-screen] set by the module.
   PLAYER: approved 04 - 390px design width, keypad removed after submit. */

/* ================= shared tokens (handoff palette) ================= */

.gtp, body.gtp-host-live, body.gtp-player-live, body.gtp-editor-live, body[data-activity="guess_the_price"] {
  --gtp-ink: #08111f;
  --gtp-coral: #ff4a2c;
  --gtp-coral-dark: #de2f1d;
  --gtp-yellow: #ffd322;
  --gtp-yellow-dark: #e4ac00;
  --gtp-yellow-deep: #be7e00;
  --gtp-lock-deep: #c48700;
  --gtp-cream: #fffaf0;
  --gtp-green: #58d45e;
  --gtp-green-dark: #176b17;
  --gtp-blue: #09c8ed;
  --gtp-red: #ff3b24;
  --gtp-divider: #ffc6b8;
  --gtp-radius-sm: 12px;
  --gtp-radius-md: 18px;
  --gtp-radius-lg: 26px;
}

.gtp { box-sizing: border-box; }
.gtp * { box-sizing: border-box; }

.gtp-item-chip {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-chip);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ================= host shell scopes (GTP only) ================= */

body.game-shell-live.gtp-host-live .gs-root {
  background:
    radial-gradient(circle at 50% 46%, rgb(255 120 75 / 45%) 0 12%, transparent 55%),
    linear-gradient(135deg, #ff6240 0%, var(--gtp-coral) 48%, #ff5a36 100%);
}
/* the approved compositions fill the full stage width (the shared shell
   caps hosted heroes at 1280px, which left the reveal at ~2/3 scale) */
body.game-shell-live.gtp-host-live .gs-root .gs-content > * {
  width: 100%;
  max-width: 100%;
}
body.game-shell-live.gtp-host-live {
  /* Owner decision 2026-10-11: the control row follows REFLEX TAP exactly
     (see DEVIATIONS.md) - the full-size logo as in Reflex (clamp(96px,
     10vw, 190px), the shell's own default is overridden by Reflex; GTP
     now matches it) and the shared utility size stays chunky. */
  --gs-logo-width: clamp(96px, 10vw, 190px);
  --gs-util-h: clamp(48px, 4vw, 72px);
}
/* Owner decision 2026-10-11 (overrides approved/02's small-logo control
   row): EVERY GTP screen reuses Reflex's control geometry - the timer and
   Next share ONE footprint, the row top is the Reflex --rz-control-top
   recipe (max of the normal Next row and the logo bottom + gap), and the
   content box starts below the row (Reflex's --gs-content-top recipe).
   The same rule comes from the reflex.css owner correction 2026-09-30:
   same variables, one recipe, so the two games cannot drift. */
body.game-shell-live.gtp-host-live .gs-root {
  --gtp-control-w: clamp(150px, 11vw, 250px);
  --gtp-control-h: clamp(52px, 8vh, 96px);
  --gtp-control-top: max(
    calc(clamp(12px, 1.8vh, 24px) + clamp(48px, 4vw, 68px)),
    calc(var(--gs-logo-bottom) + clamp(10px, 1.4vh, 18px))
  );
  --gs-timer-top: var(--gtp-control-top);
  --gs-action-top: var(--gtp-control-top);
  --gs-content-top: calc(var(--gtp-control-top) + var(--gtp-control-h) + clamp(14px, 2.4vh, 30px));
}
body.game-shell-live.gtp-host-live .gs-timer > *,
body.game-shell-live.gtp-host-live .gs-action > * {
  width: var(--gtp-control-w);
  height: var(--gtp-control-h);
  min-width: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* the Reflex recipe zeroes the padding: the promoted label (End game)
     must fit the footprint on ONE line at every size, like the approved
     Reflex final screen - the base .btn padding made it wrap below 1920 */
  padding: 0;
}
/* the slot hugs the chip exactly (the default slot is wider and would
   centre the chip inward, breaking the edge-offset mirror) */
body.game-shell-live.gtp-host-live .gs-root .gs-timer {
  width: var(--gtp-control-w);
  min-width: 0;
  justify-content: flex-start;
}
/* dark translucent square controls (approved 01/02/05) - the More button
   (End game) keeps its place beside sound and fullscreen (owner rule) */
body.game-shell-live.gtp-host-live .gs-util {
  width: var(--gs-util-h);
  height: var(--gs-util-h);
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 30%);
  background: rgb(159 35 16 / 48%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
}
body.game-shell-live.gtp-host-live .gs-action > * {
  border: 2px solid var(--gtp-ink);
  border-radius: 18px;
  background: linear-gradient(#ffe458, var(--gtp-yellow));
  box-shadow: 0 5px 0 var(--gtp-yellow-deep);
}
/* geometry per screen: EVERY GTP screen's content box starts below the
   control row (the shell reads --gs-content-top). The content BOTTOM is the
   shared shell default (same as Reflex) - owner correction 2026-10-11: the
   final screen must match Reflex's box to the pixel, so no bottom override. */
body.game-shell-live.gtp-host-live .gs-root .gs-content {
  align-items: stretch;
  justify-content: flex-start;
}
/* Owner decision 2026-10-11: screens WITHOUT a timer (reveal, board,
   podium) start their content LEVEL WITH THE NEXT BUTTON (the control-row
   top) - only the guessing screen (which has a timer) starts below the
   full row. */
/* Owner review 2026-10-11: the reveal/board content starts ONE consistent
   gap below the TITLE BAND (estimated from the banner+pill type metrics -
   stable at every size) and never above the Next row's bottom. Pure CSS by
   design: the heading's own position depends on --gs-content-top, so a JS
   measurement of it is circular. */
body.game-shell-live.gtp-host-live[data-gtp-screen="reveal"] .gs-root,
body.game-shell-live.gtp-host-live[data-gtp-screen="board"] .gs-root {
  --gs-content-top: calc(
    clamp(12px, 1.8vh, 24px)
    + clamp(34px, 4.8vw, 96px) * 0.95
    + clamp(30px, 3vw, 54px)
    + clamp(6px, 1vh, 14px)
    + clamp(14px, 2.4vh, 30px)
  );
}
body.game-shell-live.gtp-host-live .gs-action > *:disabled {
  filter: grayscale(1) brightness(0.9);
  color: #5b6472;
}
/* the podium's Next slot keeps the shared footprint on every screen (owner
   decision 2026-10-11): the old 19% top hack is gone - the content box now
   starts below the control row via --gs-content-top, which also clears the
   (empty) action slot's hit area on the complete screen */
.gtp-active__body { position: absolute; inset: 0 0 3%; }

/* ================= host: setup (approved 03, Shadcn translated) ================= */

.gtp-setup { width: 100%; color: #0f172a; }
.gtp-setup-head { position: relative; text-align: center; margin: 6px 0 26px; }
.gtp-setup-title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--gtp-yellow);
  -webkit-text-stroke: clamp(4px, 0.3vw, 5px) var(--gtp-ink);
  paint-order: stroke fill;
  filter: drop-shadow(0 6px 0 var(--gtp-ink));
}
.gtp-setup-title::before,
.gtp-setup-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(26px, 3vw, 64px);
  height: clamp(18px, 2vw, 44px);
  margin-top: calc(-0.5 * clamp(18px, 2vw, 44px));
  background: #ff922b;
  clip-path: polygon(100% 50%, 0 0, 30% 50%, 0 100%);
}
.gtp-setup-title::before { left: calc(-1 * clamp(40px, 4vw, 92px)); }
.gtp-setup-title::after { right: calc(-1 * clamp(40px, 4vw, 92px)); transform: scaleX(-1); }
.gtp-setup-sub { margin: 16px 0 0; font-weight: 950; font-size: 24px; color: #0f172a; }

.gtp-setup-main {
  display: grid;
  grid-template-columns: 354px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.gtp-items-panel {
  padding: 26px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
}
.gtp-item-panel {
  padding: 22px 24px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(380px, 1.15fr);
  gap: 28px;
}
.gtp-panel-title { margin: 0 0 22px; font-weight: 950; font-size: 26px; color: #0f172a; }
.gtp-items { display: grid; gap: 14px; }
.gtp-list-row {
  min-height: 72px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-size: 20px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
}
/* The selected treatment lives in base.css (editor-list-row--selected),
   shared across the three editors and shift-free. */
.gtp-list-num { font-weight: 900; color: #0f172a; font-size: 20px; }
/* Owner 2026-10-13: the item name occupies at most TWO lines, then
   truncates with an ellipsis; the actions never move. */
.gtp-list-name {
  min-width: 0;
  font-weight: 900;
  font-size: 20px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
  max-height: 2.5em;
}
.gtp-add-item {
  min-height: 74px;
  margin-top: 18px;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 900;
  font-size: 21px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
}
.gtp-add-item:hover:not(:disabled) { background: #f8fafc; }
.gtp-add-item:disabled { opacity: 0.5; cursor: default; }
.gtp-photo-col { min-width: 0; }
.gtp-field-col { min-width: 0; }
.gtp-section-label { display: block; margin: 0 0 14px; color: #64748b; font-weight: 900; font-size: 20px; }
.gtp-photo-box {
  width: 100%;
  aspect-ratio: 1 / 1.12;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fffdf7;
  box-shadow: inset 0 0 0 4px #f8fafc;
}
.gtp-photo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gtp-photo > .gtp-photo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gtp-photo-img.gtp-photo-late { animation: gtp-photo-in 200ms ease-out both; }
@keyframes gtp-photo-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gtp-photo-img.gtp-photo-late { animation: none; }
}
.gtp-photo-empty { padding: 24px; color: #64748b; font-weight: 800; text-align: center; }
.gtp-photo-missing { color: #dc2626; font-weight: 900; }
.gtp-photo-actions { margin-top: 14px; display: grid; grid-template-columns: 1fr 0.84fr; gap: 12px; }
.gtp-photo-actions .btn {
  min-height: 54px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
  font-size: 17px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gtp-photo-actions .btn.gtp-danger { border-color: #fecaca; color: #dc2626; }
.gtp-photo-actions .btn.gtp-danger:hover { background: #fef2f2; }
.gtp-photo-actions .gtp-btn-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.gtp-danger { color: #dc2626; }
.gtp-hint { margin: 12px 0 0; color: #64748b; font-size: 16px; line-height: 1.35; }
.gtp-label { display: block; margin: 0 0 8px; color: #0f172a; font-weight: 850; font-size: 18px; }
.gtp-input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 19px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
}
.gtp-textarea { min-height: 118px; padding: 14px 18px; resize: vertical; }
.gtp-input:focus { border-color: #2563eb; outline: 0; box-shadow: 0 0 0 3px rgb(37 99 235 / 18%); }
.gtp-count-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 18px; }
.gtp-count { color: #94a3b8; font-size: 14px; }
.gtp-count-over { color: #dc2626; font-weight: 700; }
.gtp-field-error { color: #dc2626; font-size: 13px; font-weight: 600; margin-top: 4px; }
/* the shared editor puts "How it works" in a second column beside the
   main grid; the approved GTP layout stacks it BELOW (same specificity
   shape as the base rule, loaded later -> wins while GTP is open) */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-body {
  grid-template-columns: minmax(0, 1fr);
}
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how {
  max-width: 480px;
}

/* Owner 2026-10-16: the GTP footer (Save Game / Exit) uses the SHARED
   styling - Quiz is the visual reference. The former GTP-specific yellow
   #db-save design was removed so both editors render identical footer
   buttons (height, width behaviour, colours, radius, states) from the
   shared rules only. */

/* ================= host: live shell context ================= */

.gtp-band-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 40px);
  color: #FFF7ED;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

/* starting */
.gtp-announce {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; height: 100%; text-align: center;
}
.gtp-announce-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 76px);
  color: #FFF7ED;
}
.gtp-ready { font-size: 22px; color: rgba(255, 247, 237, 0.9); }

/* ================= host: active item (approved 02) ================= */

.gtp-guessing {
  display: grid;
  /* the approved proportions: product ~43% centred at ~48.5% of the stage,
     description ~19% to its right */
  grid-template-columns: minmax(0, 27fr) minmax(0, 43fr) minmax(0, 3fr) minmax(0, 19fr) minmax(0, 8fr);
  align-items: stretch;
  height: 100%;
}
/* owner decision 4: with no description the card disappears but the
   product card keeps the SAME column, position and size */
.gtp-guessing.no-desc .gtp-desc-card { visibility: hidden; }
.gtp-photo-card {
  grid-column: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 75%);
  border-radius: var(--gtp-radius-lg);
  background: var(--gtp-cream);
  box-shadow: 0 12px 28px rgb(99 30 10 / 18%);
}
.gtp-photo-card .gtp-photo {
  position: relative;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 4%;
  overflow: hidden;
}
.gtp-photo-card .gtp-photo img {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 92%;
  height: 92%;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.gtp-guess-name {
  padding: 3.5% 5%;
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
  color: var(--gtp-ink);
  overflow-wrap: anywhere;
}
.gtp-name-sm { font-size: clamp(24px, 2.2vw, 40px); }
.gtp-name-md { font-size: clamp(21px, 1.9vw, 34px); }
.gtp-name-lg { font-size: clamp(18px, 1.55vw, 28px); }
.gtp-desc-card {
  grid-column: 4;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 7% 8%;
  border: 2px solid rgb(255 255 255 / 75%);
  border-radius: var(--gtp-radius-lg);
  background: var(--gtp-cream);
  box-shadow: 0 12px 28px rgb(99 30 10 / 18%);
  overflow: visible;
}
.gtp-desc-card__title {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--gtp-red);
  font-weight: 950;
  font-size: clamp(22px, 1.7vw, 32px);
  letter-spacing: 0.02em;
  color: var(--gtp-ink);
  text-transform: uppercase;
}
.gtp-desc-card__body {
  margin: 0;
  min-height: 0;
  font-weight: 800;
  line-height: 1.3;
  color: var(--gtp-ink);
  overflow-wrap: break-word;
  word-break: normal;
}
.gtp-desc-sm { font-size: clamp(18px, 1.8vw, 28px); }
.gtp-desc-md { font-size: clamp(17px, 1.55vw, 24px); }
.gtp-desc-lg { font-size: clamp(17px, 1.35vw, 21px); }
/* At the smallest projector a full 240-character description stays at the
   17px body floor; the card reflows its padding/header instead of shrinking
   the text. */
@media (max-height: 600px) {
  .gtp-desc-card--long { padding: 4% 5%; }
  .gtp-desc-card--long .gtp-desc-card__title { margin: 0 0 8px; padding-bottom: 6px; }
  .gtp-desc-card--long .gtp-desc-card__body { font-size: 17px; line-height: 1.25; }
}

/* stopwatch + seconds: the approved 02 chip at readable room scale */
.gtp-timer {
  min-width: 0; text-align: center;
  font-family: var(--font-body);
  font-size: clamp(24px, 2.9vw, 56px);
  font-weight: 900;
  color: var(--gtp-ink);
  display: inline-flex; align-items: center; gap: clamp(10px, 0.9vw, 16px);
}
.gtp-timer .gtp-timer-ic { width: clamp(32px, 3vw, 58px); height: clamp(32px, 3vw, 58px); }
body.game-shell-live.gtp-host-live .gs-timer > * {
  font-family: var(--font-body);
  /* the numeral fits the fixed capsule (mirror of Next) */
  font-size: min(3rem, calc(var(--gtp-control-w) / 3.4));
  font-weight: 900;
  color: var(--gtp-ink);
  border-radius: 18px;
  border: 2px solid var(--gtp-ink);
  background: #fffaf0;
  padding: 0 clamp(10px, 1vw, 18px);
  box-shadow: 0 5px 0 var(--gtp-yellow-deep);
  white-space: nowrap;
  overflow: hidden;
}
.gtp-timer.low .gtp-timer-num { color: #B91C1C; }
.gtp-timer-unit { font-size: 0.6em; margin-left: 2px; }

/* ================= host: reveal (approved 01) ================= */

.gtp-results { position: relative; width: 100%; min-height: 100%; }
.gtp-results__heading {
  position: absolute;
  /* Owner decision 2026-10-11 follow-up (Reflex fully): the title band
     ("GUESS THE PRICE" + bursts + Item x of y pill) lives in the TOP BAND
     like Reflex's "Round x of y" pill - between the logo and the
     utilities, ABOVE the control row - while the content box starts below
     the row. The heading's containing box is the content box, which now
     begins at --gs-content-top, so the title is offset back up by exactly
     that amount (landing at the logo's own top band). */
  top: calc(clamp(12px, 1.8vh, 24px) - var(--gs-content-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(48%, 900px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 1vh, 14px);
  z-index: 6;
}
.gtp-banner {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: clamp(3px, 0.26vw, 5px) var(--gtp-ink);
  paint-order: stroke fill;
  /* Owner review round 4 item 3: text-shadow (glyphs only) replaces the
     filter: the chunky ink shadow stays on the LETTERING while the thin
     burst dashes beside it render shadow-free, as in the approved. */
  text-shadow: 0 8px 0 var(--gtp-ink);
}
.gtp-banner::before,
.gtp-banner::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(30px, 3vw, 60px);
  height: clamp(22px, 2.2vw, 42px);
  margin-top: calc(-0.5 * clamp(22px, 2.2vw, 42px));
  background: var(--gtp-yellow);
  clip-path: polygon(0 50%, 60% 0, 44% 45%, 100% 50%, 44% 55%, 60% 100%);
}
.gtp-banner::before { left: calc(-1 * clamp(42px, 4.2vw, 82px)); }
.gtp-banner::after { right: calc(-1 * clamp(42px, 4.2vw, 82px)); transform: scaleX(-1); }
.gtp-item-pill {
  padding: clamp(6px, 0.5vw, 10px) clamp(24px, 2.2vw, 40px);
  border: 2px solid var(--gtp-ink);
  border-radius: 999px;
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(16px, 1.6vw, 28px);
  box-shadow: 0 4px 0 rgb(8 17 31 / 18%);
}
.gtp-results__body {
  position: absolute;
  inset: 0 0 3%;
  display: grid;
  grid-template-columns: minmax(0, 20fr) minmax(0, 80fr);
  gap: 2%;
}
.gtp-product-card {
  /* One product card, two rows: the complete title above, then the
     uncropped image. */
  align-self: start;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 75%);
  border-radius: var(--gtp-radius-lg);
  background: var(--gtp-cream);
  box-shadow: 0 12px 28px rgb(99 30 10 / 18%);
}
.gtp-product-card .gtp-photo { min-height: 0; display: grid; place-items: center; padding: 5%; }
.gtp-product-card .gtp-photo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; display: block; }
.gtp-product-card .gtp-item-name {
  margin: 0;
  padding: 5% 6%;
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
  color: var(--gtp-ink);
  overflow-wrap: anywhere;
}
.gtp-chart-panel { position: relative; min-width: 0; height: 100%; }
.gtp-top5 {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(44%, 620px);
  padding: clamp(6px, 0.6vw, 12px) 1rem;
  border-radius: 14px;
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(14px, 1.35vw, 25px);
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
  z-index: 5;
}
.gtp-price-banner {
  position: absolute;
  top: 10.5%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(46%, 650px);
  padding: clamp(7px, 0.7vw, 14px) 1.25rem;
  border-radius: 14px;
  background: var(--gtp-green);
  color: var(--gtp-ink);
  font-weight: 950;
  font-family: var(--font-body);
  font-size: clamp(19px, 2vw, 38px);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgb(16 85 22 / 28%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
}
.gtp-chart { position: absolute; inset: 0; }
.gtp-plot {
  position: absolute;
  inset: 26% 4.5% 18% 0;
  border-bottom: 4px solid #fff;
}
.gtp-bars {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.38vw, 8px);
}
.gtp-col {
  position: relative;
  flex: 1 1 0;
  max-width: 18px;
  min-width: 3px;
  height: var(--h, 0%);
  display: flex;
  flex-direction: column-reverse;
  border-radius: 999px 999px 2px 2px;
  overflow: hidden;
}
.gtp-seg { display: block; width: 100%; height: calc(var(--sh, 0) * 1%); }
.gtp-seg.u { background: var(--gtp-yellow); }
.gtp-seg.e { background: var(--gtp-green); }
.gtp-seg.o { background: var(--gtp-blue); }
.gtp-col-empty { background: rgb(255 255 255 / 25%); height: 4px !important; }
.gtp-cap {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  background: var(--gtp-ink); color: var(--gtp-cream);
  font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 8px;
  white-space: nowrap;
}
.gtp-line {
  position: absolute; top: 0; bottom: 0; left: var(--x, 48%);
  width: clamp(5px, 0.5vw, 10px);
  margin-left: calc(-0.5 * clamp(5px, 0.5vw, 10px));
  background: var(--gtp-green);
  border-radius: 999px 999px 0 0;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 20%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}
.gtp-line::after {
  content: '';
  position: absolute; top: 32%; left: 50%;
  width: clamp(18px, 1.6vw, 26px); height: clamp(18px, 1.6vw, 26px);
  transform: translate(-50%, -50%);
  border: 5px solid var(--gtp-yellow);
  border-radius: 50%;
  background: var(--gtp-green);
  box-shadow: 0 0 0 3px var(--gtp-ink);
}
.gtp-rings { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.gtp-ring {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: clamp(16px, 1.15vw, 24px); height: clamp(16px, 1.15vw, 24px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gtp-ink);
  border: 4px solid var(--gtp-yellow);
  box-shadow: 0 0 0 3px #fff;
}
.gtp-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.gtp-leader { stroke: #fff; stroke-width: 3px; stroke-linecap: round; }
.gtp-tags { position: absolute; inset: 0; pointer-events: none; }
.gtp-tag {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 20%);
  transform: translateX(-50%);
  width: clamp(160px, 19vw, 280px);
  padding: clamp(7px, 0.7vw, 12px) clamp(9px, 0.85vw, 15px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7rem;
  align-content: center;
  border: 2px solid var(--gtp-cream);
  border-radius: 16px;
  background: linear-gradient(120deg, #152234, var(--gtp-ink));
  color: #fff;
  box-shadow: 0 7px 15px rgb(8 17 31 / 24%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gtp-tag-rank {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--gtp-yellow);
  font-weight: 950;
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1;
}
.gtp-tag-name, .gtp-tag-price {
  font-weight: 900;
  font-size: clamp(14px, 1.35vw, 23px);
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtp-exact {
  position: absolute;
  right: 0.55rem; top: 50%;
  transform: translateY(-50%);
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  background: var(--gtp-green);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(11px, 1vw, 17px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.gtp-others {
  position: absolute;
  left: 4%; right: 4%;
  top: calc(100% + 4px);
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  font-weight: 900;
  font-size: clamp(11px, 0.95vw, 16px);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgb(8 17 31 / 16%);
}
/* callout anchors are fixed (approved 01) via --x/--y set by the module;
   only the reveal stagger is CSS */
.gtp-tag:nth-child(1) { transition-delay: 0ms; }
.gtp-tag:nth-child(2) { transition-delay: 120ms; }
.gtp-tag:nth-child(3) { transition-delay: 240ms; }
.gtp-tag:nth-child(4) { transition-delay: 360ms; }
.gtp-tag:nth-child(5) { transition-delay: 480ms; }
.gtp-axis { position: absolute; left: 0; right: 4.5%; bottom: 8%; height: 8%; }
.gtp-axis-label {
  position: absolute; left: var(--x, 0%); transform: translateX(-50%);
  top: 10%;
  color: #fff;
  font-weight: 950;
  font-size: clamp(13px, 1.3vw, 25px);
  white-space: nowrap;
}
.gtp-axis-label::before {
  content: '';
  position: absolute; top: -0.55rem; left: 50%;
  width: 3px; height: 0.55rem;
  background: #fff;
}
.gtp-axis-label.gtp-axis-first { transform: translateX(0); }
.gtp-axis-label.gtp-axis-last { transform: translateX(-100%); }
.gtp-wayover-col {
  position: absolute;
  right: 0; bottom: 22%; top: 26%;
  width: 4.2%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  border-left: 3px dashed #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #fff;
  padding-bottom: 0.4rem;
}
.gtp-wayover-plus { color: #fff; font-weight: 950; font-size: clamp(12px, 1.05vw, 18px); }
.gtp-wayover-plus b { font-size: inherit; }
.gtp-wayover-bar {
  width: clamp(8px, 0.7vw, 13px);
  height: clamp(26px, 2.6vw, 46px);
  margin: 4px 0;
  border-radius: 999px 999px 2px 2px;
  background: var(--gtp-blue);
}
.gtp-wayover-label {
  font-weight: 950; font-size: clamp(10px, 0.95vw, 16px);
  text-align: center; text-transform: uppercase; line-height: 1.05;
}
.gtp-stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  min-height: 6%;
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 18px;
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(14px, 1.4vw, 27px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* the staged reveal: data-stage is driven from the server timestamp.
   Geometry is FIXED once built; only opacity animates in place. */
.gtp-chart[data-stage="0"] .gtp-seg,
.gtp-chart[data-stage="1"] .gtp-seg { background: #d8d2c4; }
.gtp-line,
.gtp-tag,
.gtp-rings,
.gtp-leaders,
.gtp-price-banner,
.gtp-stats,
.gtp-wayover-col { opacity: 0; }
.gtp-chart[data-stage="2"] .gtp-line,
.gtp-chart[data-stage="3"] .gtp-line,
.gtp-chart[data-stage="4"] .gtp-line { opacity: 1; }
.gtp-chart[data-stage="2"] .gtp-wayover-col,
.gtp-chart[data-stage="3"] .gtp-wayover-col,
.gtp-chart[data-stage="4"] .gtp-wayover-col { opacity: 1; }
.gtp-chart[data-stage="3"] .gtp-rings,
.gtp-chart[data-stage="4"] .gtp-rings,
.gtp-chart[data-stage="3"] .gtp-leaders,
.gtp-chart[data-stage="4"] .gtp-leaders { opacity: 1; }
.gtp-chart[data-stage="3"] .gtp-tag,
.gtp-chart[data-stage="4"] .gtp-tag { opacity: 1; }
.gtp-results:has(.gtp-chart[data-stage="4"]) .gtp-stats { opacity: 1; }
.gtp-chart-panel:has(.gtp-chart[data-stage="2"]) .gtp-price-banner,
.gtp-chart-panel:has(.gtp-chart[data-stage="3"]) .gtp-price-banner,
.gtp-chart-panel:has(.gtp-chart[data-stage="4"]) .gtp-price-banner {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================= board + podium (owner decision: keep current) ================= */

.gtp-board { display: flex; flex-direction: column; gap: clamp(10px, 1.4vh, 20px); height: 100%; align-items: center; }
.gtp-board-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 58px);
  color: #FFF7ED;
  text-shadow: 0 3px 0 rgba(160, 34, 12, 0.35);
}
.gtp-board-rows { width: min(1180px, 84vw); display: flex; flex-direction: column; gap: clamp(6px, 0.8vh, 12px); overflow: hidden; }
.gtp-board-empty { color: rgba(255, 247, 237, 0.9); font-size: 20px; }
.gtp-board-rows .rh-lb-row {
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  border-radius: clamp(12px, 1vw, 18px);
  font-size: clamp(18px, 1.5vw, 30px);
  padding: clamp(8px, 1vh, 16px) clamp(14px, 1.4vw, 26px);
  box-shadow: 0 4px 0 rgba(160, 34, 12, 0.22);
}
.gtp-board-rows .lb-rank { color: #B45309; font-size: clamp(20px, 1.6vw, 32px); min-width: 3ch; }
.gtp-board-rows .lb-name { color: var(--gtp-ink); }
.gtp-board-rows .lb-time { color: var(--gtp-ink); font-size: clamp(20px, 1.6vw, 32px); }
.gtp-board-rows .lb-arrow { color: var(--gtp-ink); font-size: clamp(16px, 1.3vw, 24px); opacity: 1; transform: none; }
.gtp-board-rows .lb-arrow.up { color: #15803D; }
.gtp-board-rows .lb-arrow.down { color: #DC2626; }
.gtp-board-rows .lb-arrow.new { color: #0E7490; }

/* The final screen is the SHARED Reflex composition (owner correction
   2026-10-11): the markup is reflex-host.js buildPodium's and the CSS is
   reflex.css's FINAL WINNER SCREEN rules - do not restyle it here. */

/* ================= player (approved 04, 390px design width) ================= */


/* Shared Leave footer: the player root ends on its main control, so the
   footer sits exactly 16px below it in every game. */
body.player.gtp-player-live .gtp-player { padding-bottom: 0; }
.gtp-player {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1.2vh, 12px);
  width: min(100%, 390px);
  margin: 0 auto;
  height: 100%;
  min-height: 0;
  padding: 2px 4px;
  text-align: center;
  box-sizing: border-box;
}
.gtp-player .gtp-item-chip {
  margin-top: 2px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgb(255 255 255 / 20%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.gtp-player-ready { margin-top: 20vh; font-size: 22px; color: rgba(255, 247, 237, 0.9); }
.gtp-player-name {
  margin: 0;
  min-height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(18px, 5.8vw, 26px);
  color: #fff;
  line-height: 1.05;
  text-shadow: 0 3px 0 var(--gtp-coral-dark);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.gtp-amount {
  width: 100%;
  min-height: 118px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 22px;
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(48px, 15vw, 70px);
  line-height: 1;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
  overflow: hidden;
}
.gtp-keypad {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(44px, 1fr));
  gap: clamp(4px, 1vh, 9px);
}
.gtp-key {
  min-height: 60px;
  border: 0; border-radius: 14px;
  background: linear-gradient(#fff, #fff4f2);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgb(123 24 10 / 16%);
}
.gtp-key:active { transform: translateY(1px); box-shadow: none; }
.gtp-key-dark { background: var(--gtp-ink); color: #fff; }
.gtp-lock {
  width: 100%;
  flex: 0 0 auto;
  min-height: 44px;
  margin-top: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(#ffdf28, #ffd009);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: 27px;
  box-shadow: 0 5px 0 var(--gtp-lock-deep);
}
.gtp-lock.btn.primary {
  background: linear-gradient(#ffdf28, #ffd009);
  color: var(--gtp-ink);
  box-shadow: 0 5px 0 var(--gtp-lock-deep);
}
.gtp-lock.btn.primary:active { background: #f5c518; }
.gtp-lock:disabled, .gtp-lock.btn.primary:disabled { opacity: 0.55; }

.gtp-locked-card {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 0 1 auto;
  margin-top: 0;
  padding: 34px 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  border-radius: 26px;
  background: var(--gtp-cream);
  box-shadow: 0 12px 28px rgb(99 30 10 / 18%);
}
.gtp-locked-card .gtp-bit {
  position: absolute;
  width: 14px; height: 14px; border-radius: 4px;
  transform: rotate(38deg);
}
.gtp-locked-card .gtp-bit:nth-child(1) { left: 12%; top: 14%; background: #FFD322; }
.gtp-locked-card .gtp-bit:nth-child(2) { right: 11%; top: 22%; background: #09C8ED; width: 12px; height: 12px; }
.gtp-locked-card .gtp-bit:nth-child(3) { left: 17%; bottom: 16%; background: #58D45E; width: 12px; height: 12px; transform: rotate(-24deg); }
.gtp-locked-card .gtp-bit:nth-child(4) { right: 15%; bottom: 12%; background: #FFFAF0; width: 15px; height: 9px; transform: rotate(58deg); }
.gtp-check {
  width: 140px; height: 140px;
  display: grid; place-items: center;
  border: 8px solid #fff;
  border-radius: 50%;
  background: var(--gtp-green);
  color: #fff;
  font-size: 80px; font-weight: 950;
  box-shadow: 0 7px 14px rgb(28 120 35 / 25%);
}
.gtp-locked-label { color: var(--gtp-red); font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.05; }
.gtp-locked-amount { color: var(--gtp-ink); font-weight: 950; font-size: 68px; line-height: 1; }
.gtp-look { margin-top: 0; color: #fff; font-weight: 950; font-size: clamp(20px, 5.8vw, 29px); line-height: 1.08; text-align: center; }
.gtp-player:has(.gtp-locked-card) { justify-content: space-evenly; }
.gtp-player:has(.gtp-locked-card) .gtp-look { margin-top: 0; }
.gtp-waiting { margin: 0; color: rgb(255 255 255 / 92%); font-size: 18px; }

.gtp-result-card {
  width: 100%;
  margin-top: 32px;
  padding: 32px 22px 22px;
  border-radius: 26px;
  background: var(--gtp-cream);
  text-align: center;
  box-shadow: 0 12px 28px rgb(99 30 10 / 18%);
}
.gtp-result-line { display: block; }
.gtp-result-label { display: block; color: var(--gtp-red); font-family: var(--font-display); font-weight: 900; font-size: 25px; line-height: 1; }
.gtp-result-value { display: block; margin: 8px 0 20px; color: var(--gtp-ink); font-weight: 950; font-size: 59px; line-height: 1; }
.gtp-result-divider {
  height: 4px;
  margin: 5px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--gtp-divider);
}
.gtp-accurate {
  margin-top: 16px;
  padding: 15px;
  border-radius: 18px;
  background: #e4f4be;
  color: var(--gtp-green-dark);
  font-weight: 950;
  font-size: 48px;
  line-height: 1;
}
.gtp-accurate small { display: block; margin-top: 7px; font-size: 22px; }
.gtp-result-missed { color: rgb(8 17 31 / 70%); font-weight: 950; font-size: 24px; padding: 12px 0; }
.gtp-standing-card, .gtp-complete-card {
  width: 100%;
  margin-top: 40px;
  padding: 26px 22px;
  border-radius: 26px;
  background: var(--gtp-cream);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  box-shadow: 0 12px 28px rgb(99 30 10 / 18%);
}
.gtp-standing-line { font-weight: 950; font-size: 28px; color: var(--gtp-ink); }
.gtp-complete-title { font-family: var(--font-display); font-size: 38px; color: var(--gtp-ink); }
.gtp-complete-sub { color: rgb(8 17 31 / 70%); font-size: 17px; }

/* ================= instructions (approved 05, GTP-scoped) ================= */
/* host.js stamps body[data-activity] while the instruction page is open:
   the shared screen is re-proportioned for the GTP deck only (larger
   centred logo, title beneath it, cards at ~44% height) */

body.instruction-live[data-activity="guess_the_price"] .ins-logo { width: clamp(160px, 20vw, 384px); }
body.instruction-live[data-activity="guess_the_price"] .ins-title {
  top: clamp(150px, 29vh, 313px);
  font-size: clamp(30px, 5vw, 80px);
  -webkit-text-stroke: 4px var(--gtp-ink);
  paint-order: stroke fill;
}
body.instruction-live[data-activity="guess_the_price"] .ins-burst { top: calc(clamp(150px, 29vh, 313px) + 22px); }
body.instruction-live[data-activity="guess_the_price"] .ins-list { top: clamp(280px, 40vh, 432px); width: min(94vw, 1800px); }
body.instruction-live[data-activity="guess_the_price"] .ins-card {
  min-height: clamp(230px, 46vh, 497px);
  background: #fffaf0;
}
/* Owner 2026-10-13 (master artwork library): the deck shows the APPROVED
   final PNG artwork from the central library (the step-2 composite has
   the hand pressing the 8 baked in - no overlay). Identical visual slots
   for all four: one shared slot height, contain, bottom-aligned - the
   same model as the Reflex Tap and Quiz decks. */
body.instruction-live[data-activity="guess_the_price"] .ins-illus {
  width: min(100%, 430px);
  height: clamp(160px, 17vw, 270px);
}
body.instruction-live[data-activity="guess_the_price"] .ins-illus .gtp-deck-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 16px rgb(99 30 10 / 22%));
}
/* approved 05: large coloured number badges and bold captions */
body.instruction-live[data-activity="guess_the_price"] .ins-num { font-size: clamp(24px, 2.4vw, 44px); }
body.instruction-live[data-activity="guess_the_price"] .ins-copy {
  font-size: clamp(18px, 2vw, 34px);
  font-weight: 900;
  /* owner review round 2: the approved two-line balance ("Enter your /
     best guess", "Lock it in / before time's up") - no single-line
     captions, no orphaned words */
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
/* the title's lettering always sits ABOVE the side bursts (owner review:
   the sparkle must never overlap the title) and the bursts move outward */
body.instruction-live[data-activity="guess_the_price"] .ins-title { z-index: 2; }
body.instruction-live[data-activity="guess_the_price"] .ins-burst { z-index: 1; }
/* owner review 2026-10-10 (item 2): the bursts are pinned near the viewport
   edges - the centred title (which never reaches them) stays letter-clear */
body.instruction-live[data-activity="guess_the_price"] .ins-burst:first-of-type { left: clamp(18px, 4vw, 110px); }
body.instruction-live[data-activity="guess_the_price"] .ins-burst:last-of-type { right: clamp(18px, 4vw, 110px); }
/* owner review 2026-10-10 (item 2): How to Play carries the same sunburst +
   confetti treatment as every other GTP screen - the shared stage-light
   tunnel is hidden for this activity only (round 3: the body wears the
   SAME unblended sunburst as the game screens so the rays stay crisp) */
body.instruction-live[data-activity="guess_the_price"] {
  background:
    url("/website-assets/key-assets/guess-the-price/background-sunburst-16x9.svg") center / cover no-repeat,
    #FF4A2C;
}
body.instruction-live[data-activity="guess_the_price"] .ins-tunnel { display: none; }
/* owner review round 3: the shared stage slab is opaque coral - make it
   transparent so the body's sunburst rays show exactly like the other
   GTP screens */
body.instruction-live[data-activity="guess_the_price"] .instruction-stage { background: transparent; }
/* the deco layer paints above the stage slab (which is z45) so the
   confetti reads exactly like the other GTP screens */
body.instruction-live[data-activity="guess_the_price"] .gtp-deco { z-index: 60; }
/* owner review 2026-10-10 (item 2): illustrations fill the card art area
   (owner 2026-10-13: the shared slot sizing now lives in the master
   artwork block near the top of this file - width min(100%,430px),
   fixed slot height, contain/center-bottom) */
/* comic burst strokes (playful pass, item 3): the shared small sparkle
   SVG is hidden and the burst art is drawn as the background */
body.instruction-live[data-activity="guess_the_price"] .ins-burst svg { display: none; }
body.instruction-live[data-activity="guess_the_price"] .ins-burst {
  width: clamp(60px, 6vw, 112px);
  height: clamp(44px, 4.4vw, 84px);
  background: url("/website-assets/key-assets/guess-the-price/decor-comic-burst-strokes.svg") center / contain no-repeat;
}

/* ================= PLAYFUL PASS (owner brief 2026-10-10) =================
   Confetti + doodles, sunburst, comic title bursts, chunky pressable
   buttons, floating cards, glossy bars and motion juice - Guess the Price
   ONLY (every rule is scoped to gtp- classes or body gtp states, so Quiz
   and Reflex and the shared shell chrome for them are untouched). */

/* ---------- sunburst + stage glow (host + player) ---------- */

body.game-shell-live.gtp-host-live .gs-root,
body.player.gtp-player-live .gs-root {
  background:
    url("/website-assets/key-assets/guess-the-price/background-sunburst-16x9.svg") center / cover no-repeat,
    #FF4A2C;
}
body.game-shell-live.gtp-host-live .gs-root .gs-rays {
  opacity: 0.95;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 214, 120, 0.20) 0deg 5deg, rgba(255, 214, 120, 0) 5deg 14deg);
}

/* ---------- static four-corner confetti (GTP only) ---------- */

/* The shell's own scattered edge pieces are replaced by the curated GTP
   layer. This hides only the shell layer on GTP screens. */
body.game-shell-live.gtp-host-live .gs-root .gs-confetti,
body.player.gtp-player-live .gs-root .gs-confetti { display: none; }

.gtp-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.gtp-deco .gtp-piece { position: absolute; display: block; line-height: 0; }
.gtp-deco .gtp-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gtp-deco .p-ul-star, .gtp-deco .p-ur-star,
.gtp-deco .p-ll-star, .gtp-deco .p-lr-star {
  width: clamp(42px, 4.2vw, 76px);
  height: clamp(42px, 4.2vw, 76px);
}
.gtp-deco .p-ul-sparkle, .gtp-deco .p-ur-sparkle,
.gtp-deco .p-ll-sparkle, .gtp-deco .p-lr-sparkle {
  width: clamp(26px, 2.6vw, 44px);
  height: clamp(26px, 2.6vw, 44px);
}
.gtp-deco .p-ul-dash, .gtp-deco .p-ur-dash,
.gtp-deco .p-ll-dash, .gtp-deco .p-lr-dash {
  width: clamp(40px, 3.6vw, 66px);
  height: clamp(18px, 1.6vw, 30px);
}
.gtp-deco .p-ul-dot, .gtp-deco .p-ur-dot,
.gtp-deco .p-ll-dot, .gtp-deco .p-lr-dot {
  width: clamp(13px, 1.2vw, 20px);
  height: clamp(13px, 1.2vw, 20px);
}
.gtp-deco .p-lr-squiggle, .gtp-deco .p-ll-squiggle {
  width: clamp(56px, 5vw, 92px);
  height: clamp(22px, 2vw, 34px);
}

/* projector corners: the wide calm gap between the top chrome and the
   cards, plus the bottom corners beside the card and stats. */
.gtp-deco .p-ul-star { left: 17%; top: 4%; transform: rotate(-8deg); }
.gtp-deco .p-ul-sparkle { left: 23%; top: 9%; }
.gtp-deco .p-ul-dash { left: 19%; top: 12%; }
.gtp-deco .p-ul-dot { left: 26%; top: 7%; }
.gtp-deco .p-ur-star { right: 18%; top: 4%; transform: rotate(9deg); }
.gtp-deco .p-ur-sparkle { right: 16%; top: 9%; }
.gtp-deco .p-ur-dash { right: 14%; top: 12%; }
.gtp-deco .p-ur-dot { right: 20%; top: 7%; }
.gtp-deco .p-ll-sparkle { left: 7%; bottom: 9%; }
.gtp-deco .p-ll-dot { left: 9%; bottom: 5%; }
.gtp-deco .p-ll-dash { left: 4%; bottom: 12%; }
.gtp-deco .p-ll-star { left: 2%; bottom: 4%; transform: rotate(-12deg); }
.gtp-deco .p-lr-star { right: 0.5%; bottom: 4%; transform: rotate(8deg); }
.gtp-deco .p-lr-squiggle { right: 0.2%; bottom: 10%; }
.gtp-deco .p-lr-dot { right: 3%; bottom: 5%; }
.gtp-deco .p-lr-dash { right: 1%; bottom: 12%; }

/* On the reveal the product card fills the lower-left column; move that
   cluster below the card so no piece touches it. */
body[data-gtp-screen="reveal"] .gtp-deco .p-ll-star { left: 2%; bottom: 2%; }
body[data-gtp-screen="reveal"] .gtp-deco .p-ll-sparkle { left: 7%; bottom: 8%; }
body[data-gtp-screen="reveal"] .gtp-deco .p-ll-dash { left: 4%; bottom: 6%; }
body[data-gtp-screen="reveal"] .gtp-deco .p-ll-dot { left: 9%; bottom: 4%; }

/* On the reveal the stats bar occupies the bottom-right band. The
   lower-right cluster sits beneath it, scaled only enough to keep the
   clear-zone rule at 1024x576. */
body[data-gtp-screen="reveal"] .gtp-deco .p-lr-star {
  right: 0.5%; bottom: 0.5%;
  width: clamp(14px, 1.6vw, 26px); height: clamp(14px, 1.6vw, 26px);
}
body[data-gtp-screen="reveal"] .gtp-deco .p-lr-squiggle {
  right: 0.5%; bottom: 0.5%;
  width: clamp(24px, 3vw, 52px); height: clamp(8px, 1vw, 16px);
}
body[data-gtp-screen="reveal"] .gtp-deco .p-lr-dot {
  right: 1%; bottom: 0.5%;
  width: clamp(8px, 0.9vw, 14px); height: clamp(8px, 0.9vw, 14px);
}
body[data-gtp-screen="reveal"] .gtp-deco .p-lr-dash {
  right: 0.5%; bottom: 0.5%;
  width: clamp(20px, 2.4vw, 40px); height: clamp(8px, 0.9vw, 14px);
}

/* phone: exactly eight pieces, four corners, the centre 70% clear. The
   lower pieces sit below the primary action/Leave stack. */
body.player.gtp-player-live .gtp-deco .p-ul-sparkle { left: 2%; top: 3%; width: clamp(24px, 7vw, 34px); height: clamp(24px, 7vw, 34px); }
body.player.gtp-player-live .gtp-deco .p-ul-dash { left: 5%; top: 8%; width: clamp(34px, 10vw, 46px); height: clamp(16px, 4.6vw, 22px); }
body.player.gtp-player-live .gtp-deco .p-ur-star { right: 2%; top: 3%; width: clamp(30px, 8.5vw, 42px); height: clamp(30px, 8.5vw, 42px); transform: rotate(9deg); }
body.player.gtp-player-live .gtp-deco .p-ur-dot { right: 8%; top: 9%; width: clamp(11px, 3vw, 15px); height: clamp(11px, 3vw, 15px); }
body.player.gtp-player-live .gtp-deco .p-ll-squiggle { left: 1%; bottom: 3%; width: clamp(54px, 16vw, 76px); height: clamp(20px, 6vw, 28px); }
body.player.gtp-player-live .gtp-deco .p-ll-star { left: 2%; bottom: 1%; width: clamp(28px, 8vw, 38px); height: clamp(28px, 8vw, 38px); transform: rotate(-12deg); }
body.player.gtp-player-live .gtp-deco .p-lr-dash { right: 2%; bottom: 1%; width: clamp(34px, 10vw, 46px); height: clamp(16px, 4.6vw, 22px); }
body.player.gtp-player-live .gtp-deco .p-lr-sparkle { right: 5%; bottom: 3%; width: clamp(22px, 6.5vw, 30px); height: clamp(22px, 6.5vw, 30px); }

/* ---------- comic title bursts (not small arrows) ---------- */

.gtp-banner::before,
.gtp-banner::after {
  width: clamp(60px, 6vw, 112px);
  height: clamp(44px, 4.4vw, 84px);
  margin-top: calc(-0.5 * clamp(44px, 4.4vw, 84px));
  background: url("/website-assets/key-assets/guess-the-price/decor-comic-burst-strokes.svg") center / contain no-repeat;
  clip-path: none;
}
.gtp-banner::before { left: calc(-1 * clamp(70px, 7vw, 130px)); }
.gtp-banner::after { right: calc(-1 * clamp(70px, 7vw, 130px)); transform: scaleX(-1); }

/* ---------- chunky pressable buttons ---------- */

body.game-shell-live.gtp-host-live .gs-action > * {
  border: 3px solid var(--gtp-ink);
  border-radius: 20px;
  background: linear-gradient(#ffe458, var(--gtp-yellow));
  box-shadow: 0 7px 0 var(--gtp-yellow-deep), 0 14px 22px rgb(77 30 0 / 22%);
}
body.game-shell-live.gtp-host-live .gs-action > *:active:not(:disabled) {
  transform: translateY(6px) scale(0.99);
  box-shadow: 0 1px 0 var(--gtp-yellow-deep);
}
body.game-shell-live.gtp-host-live .gs-util {
  border-radius: 16px;
  border: 2px solid rgb(255 255 255 / 55%);
  background: linear-gradient(rgb(178 42 20 / 92%), rgb(140 30 14 / 92%));
  color: #fff;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 25%), 0 4px 0 rgb(120 22 6 / 55%);
}
body.game-shell-live.gtp-host-live .gs-util:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgb(255 255 255 / 25%), 0 1px 0 rgb(120 22 6 / 55%); }

.gtp-lock, .gtp-lock.btn.primary {
  border: 3px solid var(--gtp-ink);
  border-radius: 20px;
  background: linear-gradient(#ffe458, #ffd009);
  box-shadow: 0 7px 0 var(--gtp-lock-deep), 0 12px 20px rgb(77 30 0 / 20%);
}
.gtp-lock:active:not(:disabled), .gtp-lock.btn.primary:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--gtp-lock-deep);
}
.gtp-key {
  border: 2px solid #e8d9cf;
  border-bottom: 0;
  background: linear-gradient(#ffffff, #fff1ec);
  box-shadow: 0 4px 0 rgb(123 24 10 / 22%), 0 8px 14px rgb(123 24 10 / 12%);
}
.gtp-key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgb(123 24 10 / 22%); }
.gtp-key-dark { background: linear-gradient(#1b2a40, var(--gtp-ink)); color: #fff; border-color: #0a1424; }
.gtp-key-dark:active { box-shadow: 0 1px 0 rgb(8 17 31 / 45%); }
body.instruction-live[data-activity="guess_the_price"] .ins-next {
  border: 3px solid var(--gtp-ink);
  border-radius: 18px;
  background: linear-gradient(#ffe458, var(--gtp-yellow));
  box-shadow: 0 7px 0 var(--gtp-yellow-deep), 0 12px 20px rgb(77 30 0 / 22%);
}
body.instruction-live[data-activity="guess_the_price"] .ins-next:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 var(--gtp-yellow-deep); }
body.instruction-live[data-activity="guess_the_price"] .ins-util {
  border-radius: 14px;
  background: linear-gradient(rgb(178 42 20 / 92%), rgb(140 30 14 / 92%));
  color: #fff;
  border: 2px solid rgb(255 255 255 / 55%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 25%), 0 4px 0 rgb(120 22 6 / 55%);
}
body.instruction-live[data-activity="guess_the_price"] .ins-util:hover { background: linear-gradient(rgb(190 48 24 / 92%), rgb(150 34 16 / 92%)); }

/* ---------- floating cards (soft deep shadows) ---------- */

.gtp-product-card, .gtp-desc-card, .gtp-photo-card, .gtp-locked-card, .gtp-result-card,
.gtp-standing-card, .gtp-complete-card, .gtp-setup .gtp-photo-box {
  box-shadow: 0 18px 38px rgb(99 30 10 / 30%), 0 6px 14px rgb(99 30 10 / 18%);
}
.gtp-tag { box-shadow: 0 10px 22px rgb(8 17 31 / 34%), 0 4px 0 rgb(8 17 31 / 22%); }
body.instruction-live[data-activity="guess_the_price"] .ins-card {
  border: 2px solid rgb(255 255 255 / 80%);
  box-shadow: 0 16px 34px rgb(120 25 8 / 32%);
}

/* ---------- glossy bars, glowing rings, big price dot ---------- */

.gtp-seg { box-shadow: inset 0 2px 0 rgb(255 255 255 / 45%); }
.gtp-col { border-radius: 999px 999px 3px 3px; }
.gtp-ring {
  border-width: 4px;
  box-shadow: 0 0 0 3px #fff, 0 0 16px 5px rgb(255 211 34 / 55%), 0 3px 0 rgb(8 17 31 / 25%);
}
.gtp-line::after {
  width: clamp(26px, 2.2vw, 38px);
  height: clamp(26px, 2.2vw, 38px);
  border-width: 6px;
  box-shadow: 0 0 0 4px var(--gtp-ink), 0 0 18px 6px rgb(88 212 94 / 55%);
}
.gtp-tag-rank { font-size: clamp(26px, 2.6vw, 42px); }

/* ---------- phone: bold 3D keys + confetti bits on the locked card ---- */

.gtp-check { box-shadow: 0 10px 22px rgb(28 120 35 / 35%), 0 0 0 10px rgb(255 255 255 / 35%); }
.gtp-locked-card .gtp-bit { width: 16px; height: 16px; }

/* ---------- motion juice (never under reduced motion) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Owner review round 4 (item 3): the redrawn thin-dash burst strokes
     get a quick ONE-TIME flash outward as the title appears - never
     replayed by polling (the banner/bursts rebuild only on state change),
     and disabled under reduced motion. translate only, so the mirrored
     burst keeps its scaleX(-1). */
  @keyframes gtp-burst-flash {
    0% { opacity: 0; translate: var(--burst-dx, 0px) 0; }
    45% { opacity: 1; translate: var(--burst-dx-out, 3px) 0; }
    100% { opacity: 1; translate: 0 0; }
  }
  .gtp-banner::before, .gtp-banner::after {
    animation: gtp-burst-flash 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
  .gtp-banner::before { --burst-dx: -14px; --burst-dx-out: 8px; }
  .gtp-banner::after { --burst-dx: 14px; --burst-dx-out: -8px; }
  body.instruction-live[data-activity="guess_the_price"] .ins-burst {
    animation: gtp-burst-flash 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
  body.instruction-live[data-activity="guess_the_price"] .ins-burst:first-of-type { --burst-dx: -14px; --burst-dx-out: 8px; }
  body.instruction-live[data-activity="guess_the_price"] .ins-burst:last-of-type { --burst-dx: 14px; --burst-dx-out: -8px; }
  .gtp-banner { animation: gtp-bounce-in 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
  @keyframes gtp-bounce-in {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
  }
  .gtp-photo-card, .gtp-product-card, .gtp-desc-card, .gtp-locked-card {
    animation: gtp-pop-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  }
  @keyframes gtp-pop-in {
    from { transform: scale(0.94) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
  }
  /* The result card is mounted once per result; this is its only entrance.
     No loop, no poll restart, and it ends fully opaque. */
  .gtp-result-card { animation: gtp-result-in 280ms ease-out both; }
  @keyframes gtp-result-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
  }
  .gtp-chart[data-stage="2"] .gtp-col { animation: gtp-grow 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both; transform-origin: 50% 100%; }
  @keyframes gtp-grow {
    from { transform: scaleY(0.25); opacity: 0.55; }
    to { transform: scaleY(1); opacity: 1; }
  }
  .gtp-chart[data-stage="3"] .gtp-tag { animation: gtp-tag-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
  @keyframes gtp-tag-pop {
    from { scale: 0.82; }
    to { scale: 1; }
  }
  .gtp-chart[data-stage="2"] .gtp-line::after { animation: gtp-pulse 0.7s ease 0.25s 1 both; }
  @keyframes gtp-pulse {
    0% { transform: translate(-50%, -50%) scale(0.4); }
    55% { transform: translate(-50%, -50%) scale(1.25); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }
  .gtp-check { animation: gtp-pop-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
  body.instruction-live[data-activity="guess_the_price"] .ins-card { animation: gtp-pop-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  body.instruction-live[data-activity="guess_the_price"] .ins-card:nth-child(2) { animation-delay: 0.07s; }
  body.instruction-live[data-activity="guess_the_price"] .ins-card:nth-child(3) { animation-delay: 0.14s; }
  body.instruction-live[data-activity="guess_the_price"] .ins-card:nth-child(4) { animation-delay: 0.21s; }
}


/* ================= reduced motion ================= */

@media (prefers-reduced-motion: reduce) {
  .gtp-price-banner, .gtp-line, .gtp-tag, .gtp-stats,
  .gtp-rings, .gtp-leaders, .gtp-wayover-col { transition: none; }
  .gtp-key:active { transform: none; }
}
/* short phones (360x640 and 320x568): tighten so the keypad + Lock always
   clear the shell's Leave control, with the 48px minimum touch target */
@media (max-height: 700px) {
  .gtp-player { gap: 6px; }
  .gtp-player-name { font-size: clamp(16px, 5vw, 21px); min-height: 2.05em; }
  .gtp-keypad { gap: 5px; margin: 6px 0; }
  .gtp-key { min-height: 48px; font-size: 22px; }
  .gtp-amount { min-height: 68px; font-size: clamp(30px, 10vw, 40px); }
  .gtp-lock { min-height: 48px; font-size: 18px; }
  .gtp-locked-card { min-height: 260px; margin-top: 16px; padding: 20px 16px; }
  .gtp-check { width: 92px; height: 92px; font-size: 52px; border-width: 6px; }
  .gtp-locked-label { font-size: 22px; }
  .gtp-locked-amount { font-size: 44px; }
  .gtp-look { font-size: 20px; }
  .gtp-result-card { margin-top: 20px; padding: 22px 18px 16px; }
  .gtp-result-value { font-size: 40px; margin: 4px 0 12px; }
  .gtp-result-label { font-size: 18px; }
  .gtp-accurate { font-size: 34px; padding: 10px; }
  .gtp-accurate small { font-size: 16px; }
  .gtp-result-divider { margin: 3px 0 10px; }
  .gtp-item-chip { padding: 3px 10px; font-size: 12px; }
}

/* ================= projector size guards ================= */

@media (max-height: 800px) {
  .gtp-banner { font-size: clamp(30px, 3.4vw, 54px); }
  .gtp-top5 { font-size: 14px; }
  .gtp-price-banner { font-size: clamp(18px, 1.7vw, 26px); }
  .gtp-tag { width: clamp(150px, 20vw, 250px); padding: 6px 9px; column-gap: 0.5rem; }
  .gtp-tag-rank { font-size: clamp(18px, 2vw, 26px); }
  .gtp-tag-name, .gtp-tag-price { font-size: clamp(12px, 1.3vw, 17px); }
  .gtp-stats { font-size: clamp(13px, 1.3vw, 18px); }
  .gtp-axis-label { font-size: clamp(12px, 1.2vw, 18px); }
}

/* ================= editor fits ONE page (owner 2026-10-12) =================
   The GTP editor must not scroll at 1920x1080. Everything below is scoped to
   this page only (gtp-editor-live) - the Quiz and Reflex editors are
   untouched. The field/photo/list shadows are flattened too: at zoom the
   stacked drop-shadows read as stray hairlines (owner screenshot
   2026-10-12, "formatting is off"). */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-chrome { gap: 0.3rem; padding-bottom: 0.2rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-heading { margin: 0; font-size: 1.35rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-sub { display: none; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-card { padding: 0.55rem 0.85rem; gap: 0.45rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-title { font-size: 0.82rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-grid { gap: 0.5rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-field > span { font-size: 0.75rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-field .field { box-shadow: none; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card { padding: 0.5rem 0.85rem 0.15rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { padding: 0.4rem 0 0.6rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how { padding: 0.55rem 0.9rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how h3 { font-size: 0.85rem; margin: 0 0 0.2rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how li, html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how p { font-size: 0.75rem; line-height: 1.35; }
.gtp-setup-head { margin: 0 0 8px; }
.gtp-setup-title { font-size: clamp(26px, 2.6vw, 44px); -webkit-text-stroke: clamp(3px, 0.22vw, 4px) var(--gtp-ink); filter: drop-shadow(0 4px 0 var(--gtp-ink)); }
.gtp-setup-title::before, .gtp-setup-title::after { width: clamp(18px, 2vw, 40px); height: clamp(12px, 1.4vw, 28px); margin-top: calc(-0.5 * clamp(12px, 1.4vw, 28px)); }
.gtp-setup-title::before { left: calc(-1 * clamp(28px, 2.6vw, 56px)); }
.gtp-setup-title::after { right: calc(-1 * clamp(28px, 2.6vw, 56px)); }
.gtp-setup-sub { margin: 4px 0 0; font-size: 15px; }
.gtp-setup-main { gap: 10px; }
.gtp-items-panel { padding: 12px 12px 14px; border-radius: 16px; }
.gtp-panel-title { font-size: 17px; margin: 0 0 8px; }
.gtp-list-row { min-height: 46px; font-size: 15px; border-radius: 11px; box-shadow: none; }
.gtp-list-num, .gtp-list-name { font-size: 15px; }
.gtp-add-item { min-height: 46px; margin-top: 10px; font-size: 16px; border-radius: 11px; box-shadow: none; }
.gtp-item-panel { padding: 12px 14px 14px; gap: 16px; grid-template-columns: minmax(260px, 0.92fr) minmax(360px, 1.08fr); border-radius: 16px; }
.gtp-photo-box { height: clamp(190px, 26vh, 275px); width: auto; margin: 0 auto; aspect-ratio: 1 / 1.12; box-shadow: none; }
.gtp-section-label { font-size: 13px; margin: 0 0 6px; }
.gtp-photo-actions { margin-top: 8px; }
.gtp-photo-actions .btn { min-height: 40px; font-size: 14px; box-shadow: none; }
.gtp-hint { margin: 5px 0 0; font-size: 12.5px; }
.gtp-label { margin: 0 0 3px; font-size: 13.5px; }
.gtp-input { min-height: 40px; font-size: 15px; padding: 0 12px; border-radius: 8px; box-shadow: none; }
.gtp-textarea { min-height: 64px; padding: 8px 12px; }
.gtp-count-row { min-height: 13px; }
.gtp-count { font-size: 14px; }
.gtp-field-error { font-size: 11px; }

/* editor one-page compaction, round 2 (owner 2026-10-12): the last ~150px */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-card { padding: 0.35rem 0.75rem; gap: 0.3rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-field .field { min-height: 38px; padding: 0 10px; font-size: 14px; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card { padding: 0.35rem 0.75rem 0.1rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { padding: 0.3rem 0 0.4rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how { padding: 0.45rem 0.75rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how ul, html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: 0; padding: 0; }
.gtp-item-panel { padding: 10px 12px 12px; gap: 14px; }
.gtp-item-panel .gtp-section-label:first-child { margin: 0 0 4px; font-size: 12px; }
.gtp-photo-box { height: clamp(180px, 24vh, 252px); }
.gtp-photo-actions { margin-top: 6px; }
.gtp-photo-actions .btn { min-height: 36px; }
.gtp-hint { margin: 4px 0 0; font-size: 12px; }
.gtp-label { margin: 0 0 2px; font-size: 13px; }
.gtp-input { min-height: 38px; font-size: 14.5px; }
.gtp-textarea { min-height: 56px; }
.gtp-count-row { min-height: 10px; }
.gtp-setup-head { margin: 0 0 4px; }
.gtp-setup-main { gap: 8px; }

/* editor one-page compaction, final trim (owner 2026-10-12): the last ~30px */
.gtp-photo-box { height: clamp(170px, 22vh, 238px); }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { padding: 0.25rem 0 0.2rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card { padding: 0.3rem 0.75rem 0.05rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how { padding: 0.35rem 0.75rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-setup-chrome { padding-bottom: 0; }

/* last 15px (owner 2026-10-12) */
.gtp-setup-main { gap: 6px; }
.gtp-item-panel { padding: 10px 12px 8px; }
.gtp-list-row { min-height: 44px; }
.gtp-add-item { min-height: 44px; margin-top: 8px; }
.gtp-hint { margin: 3px 0 0; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { padding: 0.25rem 0 0; }

/* 10px (owner 2026-10-12) */
.gtp-photo-box { height: clamp(165px, 21vh, 226px); }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-card { gap: 0.25rem; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card { padding: 0.28rem 0.75rem 0; }

/* final (owner 2026-10-12) */
.gtp-textarea { min-height: 48px; }
.gtp-count-row { min-height: 8px; }
.gtp-hint { margin: 2px 0 0; }

/* the appearance card is the last 10px (owner 2026-10-12) */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card { margin-top: 2px; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card .db-field .field { min-height: 34px; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card .db-basics-title { font-size: 0.78rem; }

/* the real topbar is 71px; the shared min-height assumes 61 (off by 10 =
   a guaranteed 10px scroll on a full page). Scoped here; noted for a
   shared fix in a future release. */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-main-ui { min-height: calc(100vh - 71px); }

/* ================= layout correction (owner 2026-10-12, spec) =================
   Structure only - colors, typography, wording, borders, controls and every
   behaviour are unchanged. The horizontal-overflow culprits were:
     - .gtp-setup-main's FIXED 354px list column, and
     - .gtp-item-panel's hard minimums minmax(300px/380px), later 260px/360px
   Together they forced a ~1030px floor: below that, the editor's controls
   overflowed the card and the viewport. base.css already applies
   * { box-sizing: border-box } (verified, base.css:249), so no global
   box-sizing change is needed here. */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-workspace,
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #activity-mount,
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card,
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions {
  width: min(100% - 32px, 1440px);
  margin-inline: auto;
  box-sizing: border-box;
}
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #host-main-ui { align-items: start; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-body { width: 100%; min-width: 0; }
.gtp-setup { width: 100%; min-width: 0; }
.gtp-setup-main { display: grid; grid-template-columns: minmax(280px, 354px) minmax(0, 1fr); gap: 12px; align-items: start; }
.gtp-items-panel { min-width: 0; }
.gtp-item-panel { display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.gtp-photo-col, .gtp-field-col { min-width: 0; }
.gtp-photo-col > *, .gtp-field-col > * { min-width: 0; }
.gtp-photo-box { width: auto; max-width: 100%; margin: 0 auto; }
.gtp-photo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gtp-label, .gtp-input, .gtp-textarea, .gtp-count-row, .gtp-hint { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

@media (max-width: 1199.98px) {
  /* preserve list|editor while it fits; stack photo above the form */
  .gtp-item-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gtp-photo-col { width: 100%; max-width: 520px; margin-inline: auto; }
  .gtp-photo-box { height: clamp(180px, 30vh, 340px); }
}
@media (max-width: 767.98px) {
  /* everything stacks vertically; 16px page padding comes from the
     min(100% - 32px, 1440px) container above */
  .gtp-setup-main { grid-template-columns: minmax(0, 1fr); }
  .gtp-items-panel { width: 100%; }
  .gtp-photo-actions { grid-template-columns: minmax(0, 1fr); }
  html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how ul, html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how ul, html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .setup-how ol { grid-template-columns: minmax(0, 1fr); }
  .gtp-list-row { grid-template-columns: 30px minmax(0, 1fr) auto auto; padding: 0 12px; }
}

/* ================= owner 2026-10-12: illustrated How it works + panel 33% narrower ================= */

/* 1. Items panel (owner 2026-10-16): clamp(390px, 32vw, 420px) - wide
   enough for a two-line item name plus the three 44px row controls;
   below 1100px the panel stacks above the editor. */
.gtp-setup-main { grid-template-columns: clamp(304px, 25vw, 328px) minmax(0, 1fr); gap: 18px; align-items: start; }
.gtp-items-panel, .gtp-item-panel, .gtp-item-panel > * { min-width: 0; }
@media (max-width: 1099.98px) {
  .gtp-setup-main { grid-template-columns: minmax(0, 1fr); }
}

/* 2. "How the Game works" (owner 2026-10-13 master artwork library): the
   approved component renders from the central library
   (/website-assets/key-assets/guess-the-price-how-the-game-works/) with
   its own scoped stylesheet (gtp-how-it-works.css: .gtp-how__title /
   __steps / __step / __visual / __image / __caption, container queries
   920/560). The legacy illustrated-section rules that used to live here
   were removed with the superseded SVG artwork. */

/* 3. Compression so 1920x1080 stays ONE page with the new section. */
.gtp-setup-title { font-size: clamp(24px, 2.3vw, 38px); }
.gtp-photo-box { height: clamp(150px, 19vh, 196px); }

/* 4. The Game title counter (module-inserted) reads like the other counts. */
.gtp-title-count { margin-top: 3px; }

/* the mount's own clamp padding inset the setup from the container edges
   (base.css:2413) - zeroed here; plus the last compression for one page */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #activity-mount { padding-left: 0; padding-right: 0; }
.gtp-setup-title { font-size: clamp(24px, 2.15vw, 34px); }
.gtp-photo-box { height: clamp(140px, 17vh, 178px); }
.gtp-setup-main { gap: 14px; }
.gtp-list-row, .gtp-add-item { min-height: 42px; }
.gtp-hint { font-size: 12px; }
.gtp-items-panel { padding: 10px 12px; }
.gtp-item-panel { padding: 10px 12px 8px; }
.gtp-title-count { margin-top: 2px; font-size: 14px; }

/* final 60px for the one-page fit (owner 2026-10-12) */
.gtp-setup-title { font-size: clamp(24px, 2vw, 30px); }
.gtp-setup-head { margin: 0 0 2px; }
.gtp-photo-box { height: clamp(132px, 15.5vh, 164px); }
.gtp-textarea { min-height: 42px; }
.gtp-label { margin: 0 0 1px; }
.gtp-count-row { min-height: 6px; }
.gtp-setup-main { gap: 12px; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { padding: 0.2rem 0 0; }

/* last 40px (owner 2026-10-12) */
.gtp-photo-box { height: clamp(124px, 14vh, 150px); }
.gtp-item-panel { padding: 8px 12px 6px; }
.gtp-items-panel { padding: 8px 12px; }
.gtp-list-row, .gtp-add-item { min-height: 40px; }
.gtp-hint { line-height: 1.25; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-appearance-card { padding: 0.25rem 0.75rem 0; }

/* last 25px (owner 2026-10-12) */
.gtp-items-panel { padding: 8px 12px 6px; }
.gtp-photo-actions { margin-top: 4px; }
.gtp-section-label { margin: 0 0 4px; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) .db-basics-card { padding: 0.3rem 0.7rem; }
.gtp-photo-box { height: clamp(118px, 13.4vh, 144px); }

/* last 22px (owner 2026-10-12): compact title band (the page keeps its
   "Create Guess the Price" chrome heading and the new illustrated steps) */
.gtp-setup-title { font-size: clamp(22px, 1.8vw, 26px); }
.gtp-setup-sub { margin: 2px 0 0; font-size: 13px; }
.gtp-setup-head { margin: 0; }
.gtp-count-row { min-height: 4px; }
.gtp-textarea { min-height: 38px; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { padding: 0; }

/* final 10px (owner 2026-10-12) */
.gtp-photo-box { height: clamp(110px, 12.4vh, 133px); }

/* final 10px, take 2 (owner 2026-10-12): the form column governs the row */
.gtp-input { min-height: 34px; }

/* the empty photo prompt reads better at this box size (owner flow) */
.gtp-photo-empty { padding: 8px; font-size: 13px; }

/* owner 2026-10-12: the uploader is a FULL-WIDTH landscape 16:9 area
   (the four how-images size by the shared --instruction-image-height) */
.gtp-photo-box {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  margin: 0;
  cursor: pointer;
}
.gtp-photo-img { width: 100%; height: 100%; object-fit: contain; }
.gtp-photo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 8px; }
@media (max-width: 767.98px) {
  .gtp-photo-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ================= owner 2026-10-12 final: gaps, buttons ================= */
/* the gap after the instruction section is the package's own 56px bottom
   margin (gtp-how-it-works.css); --expanded-section-gap keeps the action
   bar's own top gap */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) { --expanded-section-gap: 18px; }
/* the same gap above the action bar (measured 0px before) */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions { padding-top: var(--expanded-section-gap, 18px); }
/* Replace/Remove: 60% of the measured 70px is 42px, floored at the 48px
   accessible touch target (the owner's own floor rule) */
.gtp-photo-actions .btn { height: 48px; min-height: 48px; padding-block: 4px; }

/* ================= owner 2026-10-12 round 2 ================= */
/* 2. the photo preview frame follows the ORIGINAL image's orientation;
   the empty state stays full-width 16:9 */
.gtp-photo-box.is-landscape { width: 100%; aspect-ratio: var(--gtp-photo-ratio); height: auto; }
.gtp-photo-box.is-portrait { width: min(72%, 340px); aspect-ratio: var(--gtp-photo-ratio); height: auto; margin-inline: auto; }
.gtp-photo-box.is-square { width: min(82%, 380px); aspect-ratio: var(--gtp-photo-ratio); height: auto; margin-inline: auto; }
.gtp-photo-box .gtp-photo-img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }

/* ================= owner 2026-10-12 round 3 ================= */
/* 16px after the game subtitle */
.gtp-setup-sub { margin: 2px 0 16px; }
/* 4. at least 32px below the timer helper (the field column's last hint) */
.gtp-field-col .gtp-hint:last-child { margin-block-end: 32px; }
/* 2. bounded photo frames (3/4 .. 16/9): portrait 78%/360, landscape full */
.gtp-photo-box.is-portrait { width: min(78%, 360px); }
.gtp-photo-box.is-landscape { width: 100%; }

/* ================= owner 2026-10-13: item reorder + photo/name alignment ================= */

/* 1. Item row (owner 2026-10-16): [number] [name] [up][down][remove]
   at the shared list-row geometry - 70px min-height, 30px number,
   7px/8px/10px padding, 6px gaps - so a two-line name stays readable
   beside the three 44px controls. The old `>` chevron is gone from the
   DOM; Up, Down and Delete ride the shared .editor-list-row__actions
   group and wear the ONE shell defined in base.css. Boundary buttons
   render with the REAL disabled attribute (muted, in place, never
   hover-hidden). The name column keeps min-width: 0 + the two-line
   clamp, so long names can never overlap the controls or push Delete
   out of the row. */
.gtp-list-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 7px 8px 7px 10px;
  column-gap: 6px;
}

/* 2. The photo box's top border sits EXACTLY on the Item name input's top
   border: both columns carry an identical label row (same height, line
   height and bottom spacing) above the control. No per-column offset,
   transform or negative margin exists. When the columns stack (at
   1199.98px and below) the rows keep the same metrics in normal flow. */
.gtp-photo-col .gtp-section-label:first-child,
.gtp-field-col > .gtp-label:first-child {
  display: flex;
  min-height: 24px;
  margin: 0 0 8px;
  align-items: center;
  line-height: 24px;
}

/* Owner setup corrections 2026-10-13: the contextual instruction paragraph
   below the artwork and directly above the editor. */
.gtp-setup-hint {
  margin: 0 0 14px;
  color: var(--color-text-muted, #64748b);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
}

/* ================= results redesign (owner approved 2026-11-02) =================
   Scope: the Guess the Price reveal only. The banner, combined Top 5 panel
   and a real count axis replace the floating callouts; the approved shell,
   logo, product card, heading, controls and background are untouched. Every
   selector below is rooted at .gtp-results so no other screen can inherit it. */

body.game-shell-live.gtp-host-live[data-gtp-screen="reveal"] .gs-root {
  --gs-content-top: calc(
    var(--gtp-control-top)
    + var(--gtp-control-h)
    + clamp(10px, 1.6vh, 20px)
  );
}

.gtp-results .gtp-results__body { inset: 0 0 3%; }

.gtp-results .gtp-chart-panel {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(7px, 1.1vh, 14px);
}

/* ---------- actual price: first and loudest result ---------- */
.gtp-results .gtp-price-banner {
  position: static;
  justify-self: center;
  transform: none;
  width: auto;
  min-width: min(46%, 600px);
  max-width: 92%;
  min-height: 0;
  padding: clamp(4px, 0.55vh, 8px) clamp(18px, 1.8vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 22px);
  border: 3px solid var(--gtp-ink);
  border-radius: clamp(14px, 1.15vw, 22px);
  background: var(--gtp-green);
  color: var(--gtp-ink);
  box-shadow: 0 7px 0 var(--gtp-green-dark);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
}
.gtp-results .gtp-chart-panel .gtp-price-banner { opacity: 0; transform: translateY(-6px); }
.gtp-results .gtp-price-label {
  font-family: var(--font-body);
  font-weight: 950;
  font-size: clamp(14px, 1.15vw, 22px);
  letter-spacing: 0.035em;
  line-height: 1;
}
.gtp-results .gtp-price-value {
  font-family: var(--font-display);
  font-weight: 950;
  font-size: clamp(31px, 3.5vw, 64px);
  letter-spacing: -0.035em;
  line-height: 0.9;
}
.gtp-results .gtp-chart-panel:has(.gtp-chart[data-stage="2"]) .gtp-price-banner,
.gtp-results .gtp-chart-panel:has(.gtp-chart[data-stage="3"]) .gtp-price-banner,
.gtp-results .gtp-chart-panel:has(.gtp-chart[data-stage="4"]) .gtp-price-banner {
  opacity: 1;
  transform: none;
}

/* ---------- one combined Top 5 panel, one neutral card treatment ---------- */
.gtp-results .gtp-top5 {
  position: static;
  transform: none;
  width: 100%;
  min-width: 0;
  padding: clamp(5px, 0.65vh, 9px) clamp(8px, 0.8vw, 14px);
  border: 2px solid var(--gtp-ink);
  border-radius: clamp(14px, 1.2vw, 20px);
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  box-shadow: 0 6px 0 rgb(8 17 31 / 18%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}
.gtp-results .gtp-chart-panel:has(.gtp-chart[data-stage="3"]) .gtp-top5,
.gtp-results .gtp-chart-panel:has(.gtp-chart[data-stage="4"]) .gtp-top5 { opacity: 1; }
.gtp-results .gtp-top5-title {
  margin: 0 0 clamp(3px, 0.45vh, 6px);
  color: var(--gtp-ink);
  font-family: var(--font-body);
  font-weight: 950;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.gtp-results .gtp-top5-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(4px, 0.55vw, 10px);
  min-width: 0;
}
.gtp-results .gtp-top5-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 290px;
  padding: clamp(4px, 0.5vh, 7px) clamp(8px, 0.65vw, 12px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--gtp-name-h, auto) auto auto;
  align-items: start;
  gap: clamp(5px, 0.5vw, 9px);
  border: 2px solid var(--gtp-ink);
  border-radius: clamp(10px, 0.9vw, 15px);
  background: var(--gtp-cream);
  color: var(--gtp-ink);
  text-align: left;
  text-transform: none;
  box-shadow: 0 3px 0 rgb(8 17 31 / 15%);
}
.gtp-results .gtp-top5-card--first { border-width: 3px; box-shadow: 0 4px 0 rgb(8 17 31 / 20%); }
.gtp-results .gtp-top5-rank {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: clamp(29px, 2.25vw, 44px);
  height: clamp(29px, 2.25vw, 44px);
  display: grid;
  place-items: center;
  border: 2px solid var(--gtp-ink);
  border-radius: 50%;
  background: #efe9dc;
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1;
}
.gtp-results .gtp-top5-name {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-width: 0;
  max-width: 100%;
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(17px, 1.02vw, 20px);
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtp-results .gtp-top5-price {
  display: block;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  color: #d92d1b; /* approved red family, darkened to 4.65:1 on cream */
  font-weight: 950;
  font-size: clamp(17px, 1.1vw, 22px);
  line-height: 1.13;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtp-results .gtp-top5-diff {
  display: block;
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  color: var(--gtp-ink);
  font-weight: 900;
  font-size: clamp(17px, 0.9vw, 19px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-self: start;
}
.gtp-results .gtp-top5-diff--exact {
  padding: 0 0.35em;
  border: 1px solid var(--gtp-ink);
  border-radius: 5px;
  background: var(--gtp-green);
  font-size: clamp(17px, 0.76vw, 17px);
  letter-spacing: 0.02em;
}

/* ---------- distribution: heading, count axis, taller truthful plot ---------- */
.gtp-results .gtp-chart {
  position: static;
  inset: auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(2px, 0.35vh, 5px);
}
.gtp-results .gtp-chart-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1vw, 16px);
  color: #fff;
}
.gtp-results .gtp-chart-title {
  margin: 0;
  min-width: 0;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 950;
  font-size: clamp(14px, 1.02vw, 20px);
  line-height: 1.05;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtp-results .gtp-legend {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.7vw, 13px);
  color: #fff;
  font-weight: 950;
  font-size: clamp(14px, 0.78vw, 15px);
  text-transform: uppercase;
}
.gtp-results .gtp-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.gtp-results .gtp-legend-dot {
  width: clamp(8px, 0.65vw, 12px);
  height: clamp(8px, 0.65vw, 12px);
  border: 1px solid rgb(8 17 31 / 45%);
  border-radius: 3px;
}
.gtp-results .gtp-legend-under { background: var(--gtp-yellow); }
.gtp-results .gtp-legend-over { background: var(--gtp-blue); }
.gtp-results .gtp-chart-body {
  --gtp-yaxis-w: clamp(32px, 3vw, 56px);
  --gtp-wayover-w: clamp(44px, 4vw, 68px);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--gtp-yaxis-w) minmax(0, 1fr) var(--gtp-wayover-w);
  grid-template-rows: clamp(22px, 2.4vh, 30px) minmax(0, 1fr) clamp(22px, 2.4vh, 30px);
  column-gap: clamp(5px, 0.55vw, 10px);
}
.gtp-results .gtp-chart-marker {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  position: relative;
  left: var(--x, 50%);
  transform: translateX(-50%);
  max-width: 100%;
  padding: 1px 7px;
  border: 2px solid var(--gtp-ink);
  border-radius: 7px;
  background: var(--gtp-green);
  color: var(--gtp-ink);
  font-weight: 950;
  font-size: clamp(14px, 0.8vw, 16px);
  line-height: 1.15;
  white-space: nowrap;
  opacity: 0;
  z-index: 6;
}
.gtp-results .gtp-chart[data-stage="2"] .gtp-chart-marker,
.gtp-results .gtp-chart[data-stage="3"] .gtp-chart-marker,
.gtp-results .gtp-chart[data-stage="4"] .gtp-chart-marker { opacity: 1; }
.gtp-results .gtp-yaxis {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-width: 0;
  min-height: 0;
  color: #fff;
}
.gtp-results .gtp-yaxis-label {
  position: absolute;
  right: 0;
  bottom: var(--y, 0%);
  transform: translateY(50%);
  color: #fff;
  font-weight: 900;
  font-size: clamp(14px, 0.8vw, 16px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gtp-results .gtp-plot-wrap {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  min-width: 0;
  min-height: 0;
}

.gtp-results .gtp-plot {
  position: absolute;
  inset: 0;
  border-bottom: 0;
}
.gtp-results .gtp-plot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: #fff;
}
.gtp-results .gtp-chart[data-way-over="0"] .gtp-chart-body {
  grid-template-columns: var(--gtp-yaxis-w) minmax(0, 1fr);
}
.gtp-results .gtp-line::after { content: none; display: none; }
.gtp-results .gtp-line-dot {
  position: absolute;
  top: clamp(20px, 2.2vh, 24px);
  left: 50%;
  width: clamp(18px, 1.6vw, 26px);
  height: clamp(18px, 1.6vw, 26px);
  transform: translate(-50%, -50%);
  border: 5px solid var(--gtp-yellow);
  border-radius: 50%;
  background: var(--gtp-green);
  box-shadow: 0 0 0 3px var(--gtp-ink);
  z-index: 4;
}
.gtp-results .gtp-grid { position: absolute; inset: 0; pointer-events: none; }
.gtp-results .gtp-gridline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--y, 0%);
  border-top: 1px solid rgb(255 255 255 / 22%);
}
.gtp-results .gtp-bars {
  position: absolute;
  inset: 0;
  gap: clamp(1px, 0.22vw, 5px);
}
.gtp-results .gtp-col { max-width: 22px; }
.gtp-results .gtp-axis {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
}
.gtp-results .gtp-axis-label {
  top: 4px;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1;
}
.gtp-results .gtp-wayover-col {
  grid-column: 3;
  grid-row: 2 / span 2;
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: end;
  border-left: 2px dashed #fff;
  padding: 0 0 1px 4px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gtp-results .gtp-wayover-stack {
  align-self: end;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
}
.gtp-results .gtp-wayover-plus { font-size: clamp(14px, 1vw, 17px); line-height: 1.05; }
.gtp-results .gtp-wayover-label {
  justify-self: center;
  font-size: clamp(14px, 0.8vw, 16px);
  line-height: 1;
}
.gtp-results .gtp-stats {
  position: static;
  inset: auto;
  min-height: 0;
  padding: clamp(3px, 0.45vh, 7px) clamp(8px, 1vw, 16px);
  border-radius: clamp(12px, 1vw, 18px);
  font-size: clamp(17px, 1.05vw, 24px);
  line-height: 1.1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ---------- projector-height guard: keep every row, no clipping ---------- */
@media (max-height: 800px) {
  .gtp-results .gtp-chart-panel { gap: 5px; }
  .gtp-results .gtp-price-banner {
    padding: 3px clamp(13px, 1.5vw, 20px);
    border-width: 2px;
    box-shadow: 0 4px 0 var(--gtp-green-dark);
    gap: clamp(7px, 0.9vw, 13px);
  }
  .gtp-results .gtp-price-label { font-size: clamp(14px, 1.05vw, 16px); }
  .gtp-results .gtp-price-value { font-size: clamp(26px, 2.9vw, 42px); }
  .gtp-results .gtp-top5 { padding: 3px clamp(6px, 0.7vw, 10px); border-width: 2px; box-shadow: 0 4px 0 rgb(8 17 31 / 18%); }
  .gtp-results .gtp-top5-title { margin-bottom: 2px; font-size: clamp(14px, 0.95vw, 15px); }
  .gtp-results .gtp-top5-row { gap: 4px; }
  .gtp-results .gtp-top5-card { padding: 3px 8px; gap: 5px; border-width: 2px; }
  .gtp-results .gtp-top5-card--first { border-width: 2px; }
  .gtp-results .gtp-top5-rank {
    width: clamp(27px, 2.05vw, 34px);
    height: clamp(27px, 2.05vw, 34px);
    font-size: clamp(17px, 0.98vw, 17px);
  }
  .gtp-results .gtp-top5-name { font-size: clamp(17px, 1vw, 17px); }
  .gtp-results .gtp-top5-price { font-size: clamp(17px, 1.05vw, 17px); }
  .gtp-results .gtp-top5-diff { font-size: clamp(17px, 0.9vw, 17px); }
  .gtp-results .gtp-top5-diff--exact { font-size: clamp(17px, 0.76vw, 17px); }
  .gtp-results .gtp-chart-title { font-size: clamp(14px, 0.9vw, 15px); }
  .gtp-results .gtp-legend { font-size: clamp(14px, 0.78vw, 15px); }
  .gtp-results .gtp-chart-body {
    --gtp-yaxis-w: clamp(32px, 2.8vw, 40px);
    --gtp-wayover-w: clamp(44px, 3.8vw, 52px);
    grid-template-rows: 22px minmax(0, 1fr) 22px;
    column-gap: 5px;
  }
  .gtp-results .gtp-chart-marker { padding: 0 5px; border-width: 1px; font-size: clamp(14px, 0.8vw, 16px); }
  .gtp-results .gtp-yaxis-label { font-size: clamp(14px, 0.8vw, 16px); }
  .gtp-results .gtp-axis-label { top: 3px; font-size: clamp(14px, 0.9vw, 17px); }
  .gtp-results .gtp-wayover-label { font-size: clamp(14px, 0.8vw, 16px); }
  .gtp-results .gtp-stats { padding: 2px 8px; font-size: clamp(17px, 0.95vw, 17px); }
}

@media (prefers-reduced-motion: reduce) {
  .gtp-results .gtp-price-banner,
  .gtp-results .gtp-top5,
  .gtp-results .gtp-wayover-col,
  .gtp-results .gtp-stats { transition: none; }
}