/* 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%);
}
.gtp-list-row.selected {
  border: 2px solid #f5c400;
  background: linear-gradient(90deg, #fff8ca, #fffdf1);
  font-weight: 900;
}
.gtp-list-num { font-weight: 900; color: #0f172a; font-size: 20px; }
.gtp-list-name { min-width: 0; font-weight: 900; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtp-list-chevron { color: #64748b; font-size: 20px; line-height: 1; }
.gtp-list-remove {
  border: 0; background: transparent; cursor: pointer;
  color: #94a3b8; font-size: 18px; line-height: 1;
  padding: 4px 8px; border-radius: 8px;
}
.gtp-list-remove:hover { background: #fee2e2; color: #dc2626; }
.gtp-list-remove:disabled { opacity: 0.35; cursor: default; }
.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-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: 13px; }
.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;
}

/* the mock-up's primary action: Sunshine Yellow save (owner review).
   Scoped to the GTP editor so Quiz/Reflex keep their own primary; the
   selector matches the specificity of base.css's db-shell #db-save rule
   (same shape, loaded later -> wins while the GTP editor is open). */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-save {
  min-height: 70px;
  border: 2px solid var(--gtp-ink);
  border-radius: 14px;
  background: linear-gradient(#ffe458, var(--gtp-yellow));
  color: var(--gtp-ink);
  box-shadow: 0 5px 0 var(--gtp-yellow-deep);
  font-size: 24px;
  font-weight: 950;
}
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-save:hover { filter: brightness(1.04); }

/* ================= 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: minmax(0, 1fr) 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-photo-card .gtp-photo {
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 4%;
}
.gtp-photo-card .gtp-photo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gtp-guess-name {
  padding: 3.5% 5%;
  font-weight: 950;
  font-size: clamp(24px, 2.4vw, 44px);
  line-height: 1.05;
  text-align: center;
  color: var(--gtp-ink);
  overflow-wrap: anywhere;
}
.gtp-desc-card {
  grid-column: 4;
  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: hidden;
}
.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;
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 34px);
  line-height: 1.4;
  color: var(--gtp-ink);
  overflow-wrap: anywhere;
}
/* 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 {
  /* sized to the photo + its name (owner review 2026-10-10): a landscape
     photo makes a shorter card - no empty bands; portrait/square fill */
  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: block; padding: 5%; }
.gtp-product-card .gtp-photo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
.gtp-product-card .gtp-item-name {
  margin: 0;
  padding: 5% 6%;
  font-weight: 950;
  font-size: clamp(18px, 1.65vw, 32px);
  line-height: 1.05;
  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) ================= */

.gtp-player {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  width: min(100%, 390px);
  margin: 0 auto;
  height: 100%;
  padding: 4px 4px 8px;
  text-align: center;
}
.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 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 6.4vw, 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%;
  margin: 12px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 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%;
  min-height: 68px;
  margin-top: auto;
  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: 390px;
  margin-top: 40px;
  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: var(--gtp-yellow); }
.gtp-locked-card .gtp-bit:nth-child(2) { right: 11%; top: 22%; background: var(--gtp-blue); width: 12px; height: 12px; }
.gtp-locked-card .gtp-bit:nth-child(3) { left: 17%; bottom: 16%; background: #7ED957; width: 12px; height: 12px; transform: rotate(-24deg); }
.gtp-locked-card .gtp-bit:nth-child(4) { right: 15%; bottom: 12%; background: #FF922B; 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: auto; color: #fff; font-weight: 950; font-size: 29px; line-height: 1.08; text-align: center; }
.gtp-waiting { margin: 8px 0 14px; 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;
}
body.instruction-live[data-activity="guess_the_price"] .ins-illus {
  width: min(92%, 340px);
  height: auto;
}
body.instruction-live[data-activity="guess_the_price"] .ins-illus .gtp-step-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 16px rgb(99 30 10 / 22%));
}
/* owner handoff: the supplied keypad-pointing-hand.png sits over the phone
   (2.5x the previous hand: half the illustration box), tip on the 8 */
body.instruction-live[data-activity="guess_the_price"] .gtp-step {
  position: relative;
  display: block;
}
body.instruction-live[data-activity="guess_the_price"] .gtp-step-hand {
  position: absolute;
  left: 44.2%;
  top: 57.7%;
  width: 50%;
  height: auto;
  transform: rotate(-1deg);
  transform-origin: 18.5% 8.5%;
  pointer-events: none;
}
/* 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("assets/background-sunburst-16x9.svg") center / cover no-repeat,
    linear-gradient(135deg, #ff6240 0%, var(--gtp-coral) 48%, #ff5a36 100%);
}
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 */
body.instruction-live[data-activity="guess_the_price"] .ins-illus { width: min(100%, 430px); height: auto; }
/* 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("assets/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("assets/background-sunburst-16x9.svg") center / cover no-repeat,
    linear-gradient(135deg, #ff6240 0%, var(--gtp-coral) 48%, #ff5a36 100%);
}
/* the approved phone screens sit on a deeper, flatter coral */
body.player.gtp-player-live .gs-root {
  background:
    url("assets/background-sunburst-16x9.svg") center / cover no-repeat,
    #F0381F;
  background-blend-mode: multiply;
}
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);
}

/* ---------- confetti + doodles layer (GTP-rendered, full stage) ---------- */

.gtp-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.gtp-deco span {
  position: absolute; display: block; opacity: 0.95;
  background: var(--c, #FFC926);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* the decor-* assets from ASSET-BRIEF.md, tinted per instance via --c */
.gtp-deco .d-strip { width: 26px; height: 12px; -webkit-mask-image: url("assets/decor-confetti-yellow.svg"); mask-image: url("assets/decor-confetti-yellow.svg"); }
.gtp-deco .d-dot { width: 13px; height: 13px; -webkit-mask-image: url("assets/decor-dot-yellow.svg"); mask-image: url("assets/decor-dot-yellow.svg"); }
.gtp-deco .d-diamond { width: 15px; height: 15px; transform: rotate(45deg); -webkit-mask-image: url("assets/decor-confetti-yellow.svg"); mask-image: url("assets/decor-confetti-yellow.svg"); }
.gtp-deco .d-star { width: 28px; height: 28px; -webkit-mask-image: url("assets/decor-star-yellow.svg"); mask-image: url("assets/decor-star-yellow.svg"); }
.gtp-deco .d-sparkle { width: 30px; height: 30px; -webkit-mask-image: url("assets/decor-sparkle-yellow.svg"); mask-image: url("assets/decor-sparkle-yellow.svg"); }
.gtp-deco .d-squiggle { width: 70px; height: 26px; -webkit-mask-image: url("assets/decor-squiggle-yellow.svg"); mask-image: url("assets/decor-squiggle-yellow.svg"); }
/* curated placement: the reading area (centre 30-70%) stays clear */
.gtp-deco span:nth-child(1) { left: 2%; top: 5%; }
.gtp-deco span:nth-child(2) { right: 29%; top: 10%; }
.gtp-deco span:nth-child(3) { left: 0.5%; top: 10%; }
.gtp-deco span:nth-child(4) { left: 1%; top: 78%; }
.gtp-deco span:nth-child(5) { left: 0.5%; top: 80%; }
.gtp-deco span:nth-child(6) { left: 0.5%; top: 92%; }
.gtp-deco span:nth-child(7) { right: 30%; top: 12%; }
.gtp-deco span:nth-child(8) { right: 5.5%; top: 62%; }
.gtp-deco span:nth-child(9) { right: 1.5%; top: 41%; }
.gtp-deco span:nth-child(10) { right: 4.5%; top: 62%; }
.gtp-deco span:nth-child(11) { right: 2%; top: 84%; }
.gtp-deco span:nth-child(12) { right: 7%; top: 94%; }
.gtp-deco span:nth-child(13) { left: 12%; top: 3%; }
.gtp-deco span:nth-child(14) { right: 22%; top: 8%; }
.gtp-deco span:nth-child(15) { left: 17%; bottom: 3%; }
.gtp-deco span:nth-child(16) { right: 18%; bottom: 4%; }
.gtp-deco span:nth-child(17) { right: 28%; top: 16%; }
.gtp-deco span:nth-child(18) { right: 9%; top: 47%; }
.gtp-deco span:nth-child(19) { right: 24%; top: 11%; }
.gtp-deco span:nth-child(20) { right: 3%; top: 51%; }
.gtp-deco span:nth-child(21) { left: 21%; top: 9%; }
.gtp-deco span:nth-child(22) { right: 22%; top: 12%; }
.gtp-deco span:nth-child(23) { left: 24%; bottom: 0.5%; }
.gtp-deco span:nth-child(24) { right: 25%; bottom: 0.5%; }
.gtp-deco span:nth-child(25) { left: 23%; top: 2%; }
.gtp-deco span:nth-child(26) { right: 29%; bottom: 2%; }
.gtp-deco span:nth-child(27) { left: 20%; top: 2.5%; }
.gtp-deco span:nth-child(28) { right: 27%; top: 2.5%; }
.gtp-deco span:nth-child(29) { left: 21%; top: 1.5%; }
.gtp-deco span:nth-child(30) { right: 22%; top: 2.5%; }
.gtp-deco span:nth-child(31) { left: 33%; bottom: 0.5%; }
.gtp-deco span:nth-child(32) { right: 34%; bottom: 0.5%; }
.gtp-deco span:nth-child(33) { left: 44%; bottom: 1.5%; }
.gtp-deco span:nth-child(34) { right: 45%; bottom: 0.5%; }
.gtp-deco span:nth-child(35) { left: 13%; top: 38%; }
.gtp-deco span:nth-child(36) { right: 3%; top: 46%; }
.gtp-deco span:nth-child(37) { left: 1%; top: 66%; }
.gtp-deco span:nth-child(38) { right: 6%; top: 68%; }
.gtp-deco span:nth-child(39) { left: 8.5%; top: 4%; }
.gtp-deco span:nth-child(40) { right: 16%; top: 13%; }
.gtp-deco span:nth-child(41) { left: 16%; top: 12%; }
.gtp-deco span:nth-child(42) { right: 24%; top: 10%; }
.gtp-deco span:nth-child(43) { left: 38%; bottom: 0.6%; }
.gtp-deco span:nth-child(44) { right: 39%; bottom: 0.6%; }

/* ---------- 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("assets/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 decision 2026-10-10 (motion audit): the confetti DRIFTS on the
     projector only - the phone never runs gtp-drift and no infinite
     animation is declared here; the HOST module stamps it inline (see
     ensureDeco in guess-the-price-host.js). */
  @keyframes gtp-drift {
    from { translate: 0 -6px; }
    to { translate: 0 8px; }
  }
  /* 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, .gtp-result-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; }
  }
  .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-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); }
  .gtp-product-card .gtp-item-name { font-size: clamp(15px, 1.5vw, 22px); }
}

/* ================= 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) #db-setup-actions .btn { min-height: 42px; }
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: 11px; }
.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) #db-setup-actions .btn { min-height: 38px; font-size: 14px; }
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 save bar buttons close the page (owner 2026-10-12) */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions .btn { padding: 0.5rem 1.1rem; font-size: 15px; }

/* 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: minmax(300px, 355px) - the recovered space goes to the
   editor; below 1100px the panel stacks above the editor. */
.gtp-setup-main { grid-template-columns: minmax(300px, 355px) 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 it works: the four EXISTING step images (same assets as the
   game's How to Play deck), one bordered section, equal cards. */
.gtp-how {
  margin: 0 0 10px;
  padding: 10px 14px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 8%);
  box-sizing: border-box;
}
.gtp-how-title { margin: 0 0 8px; font-weight: 950; font-size: 17px; color: #0f172a; }
.gtp-how-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gtp-how-card { display: grid; grid-template-rows: auto minmax(0, auto); gap: 5px; justify-items: center; min-width: 0; }
.gtp-how-img { width: 100%; height: clamp(54px, 7.4vh, 92px); object-fit: contain; display: block; }
.gtp-how-caption { font-size: 12.5px; font-weight: 850; color: #0f172a; text-align: center; line-height: 1.25; }
@media (max-width: 1199.98px) {
  .gtp-how-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .gtp-how-list { grid-template-columns: minmax(0, 1fr); }
}

/* 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); }
.gtp-how { margin-bottom: 8px; }

/* 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-how-img { height: clamp(50px, 6.6vh, 80px); }
.gtp-how { padding: 8px 12px 9px; margin-bottom: 6px; }
.gtp-how-title { margin: 0 0 6px; font-size: 16px; }
.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: 10.5px; }

/* final 60px for the one-page fit (owner 2026-10-12) */
.gtp-how-img { height: clamp(48px, 6vh, 72px); }
.gtp-how-card { gap: 4px; }
.gtp-how { padding: 7px 12px 8px; }
.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-how-img { height: clamp(46px, 5.6vh, 66px); }
.gtp-how { padding: 6px 12px 6px; }
.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-how-caption { font-size: 12px; }
.gtp-how-list { gap: 8px; }
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) #db-setup-actions .btn { min-height: 34px; }
.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 and
   the four how-images sit in 4:3 media boxes (their spec equivalents) */
.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; }
.gtp-how-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
@media (max-width: 767.98px) {
  .gtp-photo-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ================= owner 2026-10-12 final: artwork, captions, gaps, buttons ================= */
.gtp-how-media { position: relative; width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; min-width: 0; }
.gtp-how-media .gtp-how-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gtp-how-phone { position: relative; display: block; height: 100%; aspect-ratio: 1 / 1; max-width: 100%; }
.gtp-how-phone .gtp-how-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gtp-how-hand { position: absolute; left: 44.2%; top: 57.7%; width: 50%; height: auto; transform: rotate(-1deg); transform-origin: 18.5% 8.5%; pointer-events: none; }
.gtp-how-caption { margin-top: 12px; font-size: clamp(18px, 1.35vw, 22px); font-weight: 800; line-height: 1.2; text-align: center; color: #0f172a; }
/* the gap after How it works = exactly 3 x the measured 6px */
html body.host.gtp-editor-live:not(.game-shell-live):not(.lobby-live):not(.instruction-live) { --expanded-section-gap: 18px; }
.gtp-how { margin-bottom: var(--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 ================= */
/* 1. every instruction card: an EQUAL-height media row so all four
   captions start on the same line; the illustrations scale inside it */
.gtp-how-card { grid-template-rows: clamp(210px, 18vw, 290px) auto; }
.gtp-how-media { height: 100%; aspect-ratio: auto; }
.gtp-how-media .gtp-how-img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.gtp-how-phone { height: 100%; aspect-ratio: 1 / 1; }
.gtp-how-caption { align-self: start; margin-top: 12px; }
/* 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; }