/* ============================================================
   GUESS THE PLAYER — layers on styles.css (dark theme vars).
   ============================================================ */
.gtp-body { --bg-1: #1a2a3a; --bg-2: #0c1722; --bg-3: #07101a; }
.gtp-wrap { max-width: 680px; margin: 0 auto; padding: 14px 18px 60px; text-align: center; }
.screen { display: block; }
.screen[hidden] { display: none; }

/* ---------- start ---------- */
.gtp-h1 { font-family: "Oswald", sans-serif; font-weight: 700; font-size: clamp(30px, 7vw, 52px); letter-spacing: 1px; margin: 18px 0 8px; }
.gtp-sub { color: var(--text-dim); font-size: 16px; max-width: 440px; margin: 0 auto 18px; }
.gtp-beststat { font-size: 15px; color: var(--text); margin-bottom: 18px; }
.gtp-beststat strong { color: #e0a93a; font-family: "Oswald", sans-serif; font-size: 20px; }
.gtp-play { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .5px; padding: 13px 40px; border-radius: 12px; }
.gtp-rules { list-style: none; padding: 0; margin: 26px auto 0; max-width: 420px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.gtp-rules li { font-size: 14px; color: var(--text-dim); line-height: 1.4; }
.gtp-rules strong { color: var(--text); }

/* ---------- play ---------- */
.gtp-streakbar { font-family: "Oswald", sans-serif; font-size: 17px; color: var(--text-dim); margin: 6px 0 12px; }
.gtp-streakbar strong { color: #e0a93a; font-size: 24px; margin-left: 4px; }
.gtp-timer { height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; margin: 0 auto 22px; max-width: 460px; }
.gtp-timer-fill { height: 100%; width: 100%; background: #57c98a; border-radius: 999px; transition: width .1s linear, background .3s; }

/* career path */
.gtp-path { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 8px; margin: 0 auto 26px; max-width: 600px; min-height: 70px; }
.gtp-badge { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .3px; flex: 0 0 auto; }
.gtp-pro { border-radius: 50%; }
.gtp-col { border-radius: 15px; }
.gtp-unk { background: var(--surface); color: var(--text-dim); border-radius: 50%; }
/* real-logo tile (white so any logo reads); fallback to colored abbr badge on error */
.gtp-logobadge { background: #fff; box-shadow: 0 0 0 3px var(--ring), 0 4px 12px rgba(0,0,0,.3); overflow: hidden; }
.gtp-logobadge .gtp-logo { width: 80%; height: 80%; object-fit: contain; display: block; }
.gtp-textbadge { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 3px var(--ring), 0 4px 12px rgba(0,0,0,.3); }
.gtp-arrow { color: var(--text-dim); font-size: 20px; font-weight: 700; }

/* input + autocomplete */
.gtp-inputwrap { position: relative; max-width: 420px; margin: 0 auto; }
#gtpInput { width: 100%; box-sizing: border-box; padding: 14px 16px; font: inherit; font-size: 17px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); text-align: center; }
#gtpInput:focus { outline: none; border-color: var(--accent); }
.gtp-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.gtp-suggest[hidden] { display: none; }
.gtp-sug { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: 15px; padding: 11px 16px; cursor: pointer; }
.gtp-sug:hover, .gtp-sug:active, .gtp-sug.sel { background: var(--accent); color: #04121e; }
.gtp-guessrow { margin: 16px 0 6px; }
.gtp-guessdots { display: inline-flex; gap: 8px; }
.gtp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); display: inline-block; }
.gtp-dot.on { background: #57c98a; }
.gtp-feedback { min-height: 26px; font-size: 15px; font-weight: 600; margin-top: 4px; }
.gtp-feedback.good { color: #57c98a; }
.gtp-feedback.bad { color: #e0564f; }

/* ---------- game over ---------- */
.gtp-over-reason { font-size: 17px; color: var(--text-dim); margin: 20px 0 10px; }
.gtp-over-streak { font-family: "Oswald", sans-serif; font-size: 64px; font-weight: 700; color: #e0a93a; line-height: 1; }
.gtp-over-best { font-size: 14px; color: var(--text-dim); margin: 4px 0 22px; }
.gtp-over-best strong { color: var(--text); }
.gtp-answer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; margin: 0 auto 22px; max-width: 480px; }
.gtp-ans-name { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 22px; margin-bottom: 14px; }
.gtp-ans-path { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 6px; }
.gtp-ans-path .gtp-badge { width: 50px; height: 50px; font-size: 13px; }
.gtp-overbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 480px) {
  .gtp-badge { width: 62px; height: 62px; font-size: 15px; }
  .gtp-cell { width: 76px; }
  .gtp-harrow { height: 62px; font-size: 22px; width: 20px; }
  .gtp-srowd .gtp-darr { width: 76px; }
  .gtp-ans-path .gtp-badge { width: 44px; height: 44px; font-size: 12px; }
}
/* the client asked for noticeably bigger logos on desktop */
@media (min-width: 720px) {
  .gtp-badge { width: 88px; height: 88px; font-size: 20px; }
  .gtp-cell { width: 106px; }
  .gtp-harrow { height: 88px; font-size: 30px; width: 30px; }
  .gtp-srowd .gtp-darr { width: 106px; }
  .gtp-path { max-width: 720px; }
  .gtp-ans-path .gtp-badge { width: 54px; height: 54px; }
}

/* ---------- menu / daily / board (Phase 2) ---------- */
.gtp-menu { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.gtp-play2 { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 11px; }
.gtp-startmsg { color: #e0a93a; font-size: 13.5px; margin: 0 auto 10px; max-width: 360px; }
.gtp-loading { color: var(--text-dim); font-size: 16px; margin: 60px auto; }
/* daily result */
.gtp-daily-head { font-family: "Oswald", sans-serif; font-size: 20px; color: var(--text-dim); margin: 22px 0 6px; }
.gtp-daily-score { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 64px; color: #e0a93a; line-height: 1; }
.gtp-daily-note { font-size: 14px; color: var(--text-dim); margin: 8px 0 18px; }
.gtp-ace { color: #57c98a; font-weight: 600; }
.gtp-daily-answers { max-width: 360px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 6px; }
.gtp-dailyrow { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; text-align: left; font-size: 14px; }
.gtp-dailyrow.ok { border-color: rgba(87,201,138,.45); }
.gtp-dailyrow.no { border-color: rgba(224,86,79,.4); color: var(--text-dim); }
/* leaderboard */
.gtp-boardtitle { font-size: 26px; margin: 2px 0 14px; }
.gtp-bback { display: inline-block; margin: 4px 0 10px; }
.gtp-btabs { display: flex; gap: 8px; justify-content: center; margin: 0 0 14px; flex-wrap: wrap; }
.gtp-btab { background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.gtp-btab.active { background: var(--accent); border-color: var(--accent); color: #04121e; }
.gtp-blist { max-width: 460px; margin: 0 auto; }
.gtp-brow { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; text-align: left; }
.gtp-bhead { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.gtp-brow.me { background: rgba(224,169,58,.12); border-radius: 8px; }
.gtp-bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gtp-empty { color: var(--text-dim); padding: 30px 10px; }

/* ---- multi-league additions: mode select + hints ---- */
.gtp-modes { display: grid; gap: 10px; margin: 18px 0 8px; }
.gtp-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 14px; padding: 14px 16px; cursor: pointer; color: inherit; font: inherit; }
.gtp-mode:hover { border-color: var(--accent); transform: translateY(-1px); }
.gtp-mode .gm-t { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 17px; }
.gtp-mode .gm-s { color: var(--text-dim); font-size: 12.5px; }
.gtp-hintbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 8px 0 4px; min-height: 30px; }
.gtp-hintbtn { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 12.5px; color: var(--accent);
  background: rgba(47,184,255,.12); border: 1px solid rgba(47,184,255,.5); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.gtp-hintbtn:hover { background: rgba(47,184,255,.2); }
.gtp-hintbtn:disabled { opacity: .45; cursor: default; }
.gtp-hint { font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; font-weight: 600; }
.gtp-hint b { color: var(--accent); }

/* start/over layout for the multi-league pages */
.gtp-screen { text-align: center; max-width: 460px; margin: 0 auto; padding: 24px 4px 40px; }
.gtp-screen .gtp-leaguebadge { margin-bottom: 6px; }
.gtp-streakrow { display: flex; gap: 22px; justify-content: center; margin: 14px 0; color: var(--text-dim); font-size: 14px; }
.gtp-streakrow strong { color: var(--text); font-family: "Oswald", sans-serif; font-size: 19px; }
.gtp-ans-pos { color: var(--text-dim); font-weight: 500; font-size: 13px; }
.gtp-guessrow { display: flex; justify-content: center; margin: 12px 0 8px; }

/* daily + over + share */
.gtp-over-stats { display: flex; gap: 22px; justify-content: center; margin: 12px 0; color: var(--text-dim); font-size: 14px; align-items: center; }
.gtp-over-stats strong { color: var(--text); font-family: "Oswald", sans-serif; font-size: 19px; }
.gtp-grid { font-size: 26px; letter-spacing: 4px; }
.gtp-dailyrow { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.gtp-dailyrow.ok { color: var(--text); } .gtp-dailyrow.no { color: var(--text-dim); }
.gtp-sharewrap { margin: 14px 0 4px; }
/* leaderboard v2: primary views + secondary era toggle + YOUR BEST strip */
.gtp-btabs-sub { margin-top: 8px; }
.gtp-btabs-sub .gtp-btab { font-size: 12px; padding: 6px 12px; opacity: .9; }
.gtp-mybest { margin: 10px auto 2px; padding: 9px 16px; max-width: 420px; text-align: center;
  font-size: 14px; color: var(--text); background: rgba(224,169,58,.08);
  border: 1px solid rgba(224,169,58,.4); border-radius: 10px; }
.gtp-mybest strong { color: #ffd166; font-size: 16px; }
.gtp-mytag { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: 1.2px; color: var(--text-dim); margin-right: 6px; }
.gtp-mybest[hidden] { display: none; }
.gtp-lbsignin { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1.2px;
  color: #04121e; background: var(--accent); border: 0; border-radius: 999px; padding: 10px 22px; cursor: pointer; }
.gtp-lbsignin:hover { filter: brightness(1.07); }
.gtp-brow.r1 { background: rgba(255,209,102,.10); }
.gtp-brow.r2 { background: rgba(203,213,225,.08); }
.gtp-brow.r3 { background: rgba(205,127,50,.10); }
.gtp-brow.r1 > span:first-child, .gtp-brow.r2 > span:first-child, .gtp-brow.r3 > span:first-child { font-size: 17px; }

/* signed-out end-screen nudge: save your streak (one tap opens the sign-up modal) */
.gtp-nudge { display: block; margin: 12px auto 2px; padding: 10px 18px; max-width: 420px;
  font: inherit; font-size: 13.5px; color: var(--text); text-align: center; cursor: pointer;
  background: rgba(224,169,58,.10); border: 1px solid rgba(224,169,58,.55); border-radius: 999px; }
.gtp-nudge b { color: #ffd166; }
.gtp-nudge:hover { background: rgba(224,169,58,.18); }
.gtp-nudge[hidden] { display: none; }
.gtp-sharebtn { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #2f93ff, #1c64c8); border: none; border-radius: 12px; padding: 12px 24px; cursor: pointer; }
.gtp-sharebtn:hover { filter: brightness(1.07); }
.gtp-daily-mode { border-left-color: var(--accent) !important; }
.gtp-daily-mode .gm-t { color: var(--accent); }

/* leaderboard + sign-in note */
.gtp-board { max-width: 480px; margin: 0 auto; padding: 16px 6px 50px; }
.gtp-btabs { display: flex; gap: 6px; max-width: 360px; margin: 6px auto 14px; }
.gtp-btab { flex: 1; padding: 8px 6px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.gtp-btab.active { background: rgba(47,184,255,.16); border-color: var(--accent); color: var(--text); }
.gtp-brow { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.05); font-size: 13.5px; }
.gtp-bhead { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border: none; }
.gtp-brow.me { background: rgba(47,184,255,.1); border-radius: 8px; }
.gtp-bname { font-weight: 600; }
.gtp-empty { text-align: center; color: var(--text-dim); padding: 26px 12px; font-size: 14px; }
.gtp-boardlink { display: inline-block; margin-top: 10px; color: var(--accent); background: none; border: none; font: inherit; font-weight: 600; cursor: pointer; }
.gtp-signin-note { margin-top: 14px; color: var(--text-dim); font-size: 13px; text-align: center; }
.gtp-bback { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--text-dim); font: inherit; font-size: 12.5px; padding: 5px 11px; cursor: pointer; }

/* blue Back button (replaces the cramped "✕ Menu") */
.gtp-backbtn { display: block; width: 100%; max-width: 320px; margin: 22px auto 0; padding: 13px;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #2f93ff, #1c64c8); border: none; border-radius: 12px; cursor: pointer; }
.gtp-backbtn:hover { filter: brightness(1.07); }
.gtp-streakbar { justify-content: center; }

/* ---- career-path SNAKE (client mock: right, down, left, down…) ---- */
.gtp-snake { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0 auto; width: fit-content; }
.gtp-srow { display: flex; align-items: flex-start; justify-content: center; gap: 4px; }
/* a short final row hugs the column the down-arrow feeds it from */
.gtp-srow.short.fromleft { justify-content: flex-start; }
.gtp-srow.short.fromright { justify-content: flex-end; }
.gtp-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.gtp-yr { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .6px; color: var(--text-dim); white-space: nowrap; }
.gtp-harrow { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text); flex: 0 0 auto; }
.gtp-srowd { display: flex; width: 100%; }
.gtp-srowd.right { justify-content: flex-end; }
.gtp-srowd.left { justify-content: flex-start; }
.gtp-srowd .gtp-darr { text-align: center; font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
/* one-by-one reveal: delay set inline via --d */
.gtp-cell.pop, .gtp-harrow.pop, .gtp-darr.pop {
  animation: gtpPop .45s cubic-bezier(.2, 1.4, .4, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes gtpPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gtp-cell.pop, .gtp-harrow.pop, .gtp-darr.pop { animation: none; } }

/* ---- snake sizing: scale to the columns actually used ("logos bigger to fit
   mobile" — a 1-2 column path has the width to spare; 3 columns stays tighter).
   Base = phones/tablets, then a small-phone floor and a desktop bump. ---- */
.gtp-snake .gtp-badge { width: 84px; height: 84px; font-size: 19px; }
.gtp-snake .gtp-cell { width: 100px; }
.gtp-snake .gtp-harrow { height: 84px; width: 24px; font-size: 26px; }
.gtp-snake .gtp-srowd .gtp-darr { width: 100px; }
.gtp-snake.gtp-c3 .gtp-badge { width: 72px; height: 72px; font-size: 16px; }
.gtp-snake.gtp-c3 .gtp-cell { width: 86px; }
.gtp-snake.gtp-c3 .gtp-harrow { height: 72px; width: 20px; font-size: 22px; }
.gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 86px; }
@media (max-width: 400px) {
  .gtp-snake .gtp-badge { width: 78px; height: 78px; }
  .gtp-snake .gtp-cell { width: 92px; }
  .gtp-snake .gtp-harrow { height: 78px; }
  .gtp-snake .gtp-srowd .gtp-darr { width: 92px; }
  .gtp-snake.gtp-c3 .gtp-badge { width: 64px; height: 64px; }
  .gtp-snake.gtp-c3 .gtp-cell { width: 76px; }
  .gtp-snake.gtp-c3 .gtp-harrow { height: 64px; width: 16px; }
  .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 76px; }
}
@media (min-width: 720px) {
  .gtp-snake .gtp-badge { width: 96px; height: 96px; font-size: 21px; }
  .gtp-snake .gtp-cell { width: 114px; }
  .gtp-snake .gtp-harrow { height: 96px; width: 28px; font-size: 30px; }
  .gtp-snake .gtp-srowd .gtp-darr { width: 114px; }
  .gtp-snake.gtp-c3 .gtp-badge { width: 84px; height: 84px; }
  .gtp-snake.gtp-c3 .gtp-cell { width: 100px; }
  .gtp-snake.gtp-c3 .gtp-harrow { height: 84px; width: 24px; }
  .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 100px; }
  .gtp-path { max-width: 720px; }
}

/* answer views reuse the snake, compact — keep LAST so it wins the tie */
.gtp-ans-path .gtp-badge { width: 50px; height: 50px; font-size: 13px; }
.gtp-ans-path .gtp-cell { width: 62px; }
.gtp-ans-path .gtp-harrow { height: 50px; font-size: 18px; width: 16px; }
.gtp-ans-path .gtp-srowd .gtp-darr { width: 62px; font-size: 16px; }
.gtp-ans-path .gtp-yr { font-size: 10.5px; }

/* ---- landing hero art (per-league file; hides itself until the art ships) ---- */
.gtp-hero { display: block; width: 100%; max-width: 560px; margin: 4px auto 16px; border-radius: 16px;
  box-shadow: 0 14px 44px rgba(0,0,0,.45); }

/* ---------- BAP-style landing: copy + a live career-path demo ----------
   (sits BELOW the snake tail on purpose — the responsive snake overrides above
   must keep winning; nothing here resizes .gtp-cell/.gtp-harrow/.gtp-darr)

   DOM order IS the mobile order: title → logos → description → steps → CTAs
   (Anthony, 2026-08-11). Desktop re-places the same nodes into two columns with
   explicit grid coordinates, so neither layout needs duplicate markup. */
#gtpStart.gtp-screen { max-width: none; margin-left: 50%; transform: translateX(-50%);
  /* keep clear of Playwire's side rails on wide screens — the hero was butting
     right up against them ("add space from the banners") */
  width: min(960px, calc(100vw - 40px)); }
@media (min-width: 1240px) { #gtpStart.gtp-screen { width: min(960px, calc(100vw - 400px)); } }

.gtp-land { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 26px; align-items: center; align-content: center; text-align: left; margin: 0 auto; }
.gtp-land > .gtp-eyebrow { grid-column: 1; grid-row: 1; }
.gtp-land > .gtp-h       { grid-column: 1; grid-row: 2; }
.gtp-land > .gtp-sub     { grid-column: 1; grid-row: 3; }
.gtp-land > .gtp-steps   { grid-column: 1; grid-row: 4; }
.gtp-land > .gtp-ctas    { grid-column: 1; grid-row: 5; }
/* span 5 EXPLICITLY: with no grid-template-rows the explicit grid has no row
   lines, so `1 / -1` collapsed to row 1 and the demo's height inflated that one
   row — pushing the whole copy column 400px down the page. */
.gtp-land > .gtp-demo    { grid-column: 2; grid-row: 1 / span 5; }

.gtp-eyebrow { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase; margin: 0 0 6px; }
.gtp-land .gtp-h { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; text-transform: uppercase; margin: 0 0 10px; text-align: left; }
.gtp-land .gtp-h .gold { color: #ffd166; }
.gtp-land .gtp-sub { margin: 0 0 14px; text-align: left; max-width: none; font-size: 15px; line-height: 1.5; }
.gtp-steps { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 16px; padding: 0; list-style: none; }
.gtp-steps li { max-width: 150px; }
.gtp-steps .n { display: block; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 19px; color: #ffd166; line-height: 1.1; }
.gtp-steps .t { font-family: "Oswald", sans-serif; font-size: 11.5px; letter-spacing: 1.1px; color: var(--text-dim); text-transform: uppercase; }
.gtp-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.gtp-cta { border: none; border-radius: 13px; padding: 13px 24px; cursor: pointer; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 1.4px; text-transform: uppercase;
  color: #1a1206; background: linear-gradient(180deg, #ffd166, #e0a93a); box-shadow: 0 6px 22px rgba(224, 169, 58, .35); transition: transform .12s, filter .12s; }
.gtp-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.gtp-cta.blue { color: #06121f; background: linear-gradient(180deg, #58c4ff, #2fa8ef); box-shadow: 0 6px 22px rgba(47, 168, 239, .3); }
.gtp-cta.ghost { color: var(--text); background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.gtp-landnote { color: var(--text-dim); font-size: 13px; margin: 0; text-align: left; }
.gtp-demo { display: flex; align-items: center; justify-content: center; }
.gtp-demo .gtp-snake { margin: 0 auto; }

@media (max-width: 900px) {
  /* single column — DOM order rules: title, logos, description, steps, CTAs */
  .gtp-land { grid-template-columns: 1fr; text-align: center; row-gap: 0; }
  .gtp-land > * { grid-column: 1 !important; grid-row: auto !important; }
  .gtp-land .gtp-h, .gtp-land .gtp-sub, .gtp-landnote { text-align: center; }
  .gtp-land .gtp-h { font-size: clamp(26px, 6.4vw, 34px); margin-bottom: 14px; }
  .gtp-land .gtp-sub { margin: 14px 0 16px; }
  .gtp-steps, .gtp-ctas { justify-content: center; }
  .gtp-cta { flex: 1 1 auto; padding: 13px 16px; font-size: 15.5px; }
  .gtp-demo { margin: 2px 0 4px; }
}

/* Demo badges run SMALLER than in-game ones: the hero shows a long career (7-10
   stops) and at the in-game 88px that stack towered over the copy column and left
   a dead gap ("make this tighter"). These selectors are (0,2,0) so they beat the
   plain .gtp-badge sizing in the responsive blocks above. In-game paths untouched. */
.gtp-demo .gtp-badge { width: 62px; height: 62px; font-size: 15px; }
.gtp-demo .gtp-cell { width: 78px; }
.gtp-demo .gtp-harrow { height: 62px; font-size: 20px; width: 18px; }
.gtp-demo .gtp-srowd .gtp-darr { width: 78px; }
.gtp-demo .gtp-yr { font-size: 10.5px; }
@media (max-width: 900px) {
  .gtp-demo .gtp-badge { width: 54px; height: 54px; font-size: 13px; }
  .gtp-demo .gtp-cell { width: 66px; }
  .gtp-demo .gtp-harrow { height: 54px; font-size: 18px; width: 16px; }
  .gtp-demo .gtp-srowd .gtp-darr { width: 66px; }
}

/* ============================================================
   2026-08-12 mock (Anthony): sport backdrops, play-screen chrome,
   placeholder reveal, fill-the-screen layouts.
   ============================================================ */

/* ---- sport backdrops: pure CSS, fixed behind everything (landing + play +
   over — "even on the main landing page"). Kept subtle so text reads. ---- */
.gtp-bg-nfl::before, .gtp-bg-nhl::before, .gtp-bg-nba::before, .gtp-bg-mlb::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* football: Anthony's real stadium photo (NFL FIRST — his call; the other three
   sports keep the CSS art until he confirms this look. Their optimized photos are
   already in the repo as bg-nhl/bg-nba/bg-mlb.jpg — flipping a league over is a
   one-rule change like this one). Dark gradient keeps text readable on the photo. */
.gtp-bg-nfl::before { background:
  linear-gradient(180deg, rgba(5, 10, 7, .62), rgba(4, 9, 6, .86)),
  url("/guesstheplayer/bg-nfl.jpg?v=1") center top / cover no-repeat; }
/* hockey: real arena photo (Anthony's) */
.gtp-bg-nhl::before { background:
  linear-gradient(180deg, rgba(6,16,30,.50) 0%, rgba(5,13,26,.34) 46%, rgba(4,10,20,.74) 100%),
  url("/guesstheplayer/bg-nhl.jpg?v=1") center top / cover no-repeat; }
/* basketball: real arena photo (Anthony's) */
.gtp-bg-nba::before { background:
  linear-gradient(180deg, rgba(14,9,5,.52) 0%, rgba(20,12,5,.30) 48%, rgba(10,6,3,.76) 100%),
  url("/guesstheplayer/bg-nba.jpg?v=1") center top / cover no-repeat; }
/* baseball: real ballpark photo (Anthony's) */
.gtp-bg-mlb::before { background:
  linear-gradient(180deg, rgba(4,10,7,.58), rgba(3,8,6,.88)),
  url("/guesstheplayer/bg-mlb.jpg?v=1") center top / cover no-repeat; }

/* ---- placeholder reveal: slots visible from the start; logo/ring/year fill at --d ---- */
.gtp-cell.reveal .gtp-logobadge {
  animation: gtpRingIn .5s ease both; animation-delay: var(--d, 0ms); }
/* No `opacity: 0` in the base rule, and fill is `backwards`, not `both`. The
   old pair (base opacity 0 + fill both) meant the logo was hidden by the
   stylesheet and only the animation could ever reveal it. If the animation
   never runs, it never does: measured a real case where the browser created
   ZERO animation objects for the page (document.getAnimations().length === 0
   while the tab was backgrounded), leaving every logo stuck at opacity 0 - an
   unplayable board. Reachable on a phone by starting a round and taking a
   notification before the reveal finishes.
   `backwards` fill still applies the `from` keyframe through the stagger delay,
   so the reveal looks identical when animations do run; but when they do not
   run at all, no fill is applied and the base style wins, which is now
   visible. Failure mode flips from "no logos" to "all logos at once". */
.gtp-cell.reveal .gtp-logo, .gtp-cell.reveal .gtp-yr {
  animation: gtpLogoIn .5s ease backwards; animation-delay: var(--d, 0ms); }
@keyframes gtpRingIn {
  from { box-shadow: 0 0 0 3px rgba(255,255,255,.20), 0 4px 12px rgba(0,0,0,.3); }
  to   { box-shadow: 0 0 0 3px var(--ring), 0 4px 12px rgba(0,0,0,.3); } }
@keyframes gtpLogoIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .gtp-cell.reveal .gtp-logobadge { animation: none; }
  .gtp-cell.reveal .gtp-logo, .gtp-cell.reveal .gtp-yr { animation: none; opacity: 1; } }

/* ---- play screen: fill the viewport, mock chrome ---- */
#gtpPlay:not([hidden]) { display: flex; flex-direction: column; justify-content: center;
  max-width: 780px; margin: 0 auto; min-height: calc(100dvh - 240px); padding-bottom: 20px; }
.gtp-playhead { margin: 0 0 8px; }
.gtp-playtitle { font-family: "Oswald", sans-serif; font-weight: 700; font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: 1px; text-transform: uppercase; margin: 0; line-height: 1.1; }
.gtp-playtitle .lg { color: var(--accent); }
.gtp-playsub { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--text-dim); margin: 4px 0 0; }
.gtp-statbar { display: flex; gap: 10px; justify-content: center; margin: 12px 0 16px; }
.gtp-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 128px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 13px; padding: 9px 20px 7px; }
.gtp-stat .ico { font-size: 17px; line-height: 1; }
.gtp-stat .lab { font-family: "Oswald", sans-serif; font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-dim); }
.gtp-stat .val { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 26px; color: #ffd166; line-height: 1.05; }
.gtp-infochips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 10px; }
.gtp-chip { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 10px;
  padding: 7px 13px; font-family: "Oswald", sans-serif; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dim); }
.gtp-chip b { color: var(--text); font-weight: 600; }
.gtp-hintbar { min-height: 48px; display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.gtp-helpbar { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1.5px solid rgba(224,169,58,.55); background: rgba(224,169,58,.08); color: #ffd166;
  border-radius: 12px; padding: 11px 20px; font-family: "Oswald", sans-serif; font-weight: 600;
  font-size: 13.5px; letter-spacing: 1.3px; text-transform: uppercase; transition: filter .12s, transform .12s; }
.gtp-helpbar:hover { filter: brightness(1.15); transform: translateY(-1px); }
.gtp-helpbar .q { color: var(--text-dim); }
.gtp-helpbar .t { color: rgba(255,209,102,.75); font-size: 12px; }
.gtp-hintdots { display: inline-flex; gap: 7px; align-items: center; }
.gtp-hdot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); display: inline-block; }
.gtp-hdot.used { background: #57c98a; box-shadow: 0 0 8px rgba(87,201,138,.5); }
.gtp-timerrow { display: flex; align-items: center; gap: 10px; max-width: 540px; margin: 0 auto 16px; }
.gtp-timerrow .gtp-timer { flex: 1; margin: 0; max-width: none; }
.gtp-tlab { font-size: 14px; line-height: 1; }
.gtp-secs { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 14.5px; color: var(--text-dim);
  min-width: 36px; text-align: right; }

/* ---- end screen: fill the viewport, bigger reveal ("too small" report) ---- */
#gtpOver:not([hidden]) { display: flex; flex-direction: column; justify-content: center;
  max-width: 780px; margin: 0 auto; min-height: calc(100dvh - 240px); padding-bottom: 20px; }
#gtpOver .gtp-over-reason { font-size: clamp(19px, 2.6vw, 24px); color: var(--text); margin: 10px 0 12px; }
#gtpOver .gtp-answer { max-width: 620px; width: 100%; margin: 0 auto 24px; padding: 26px 22px; border-radius: 20px; }
#gtpOver .gtp-ans-name { font-size: clamp(24px, 3vw, 32px); }
#gtpOver .gtp-ans-path .gtp-badge { width: 66px; height: 66px; font-size: 15px; }
#gtpOver .gtp-ans-path .gtp-cell { width: 82px; }
#gtpOver .gtp-overbtns .primary-btn, #gtpOver .gtp-overbtns .ghost-btn {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 16.5px; letter-spacing: 1px;
  text-transform: uppercase; padding: 13px 30px; border-radius: 13px; }
@media (max-width: 480px) {
  .gtp-stat { min-width: 108px; padding: 8px 14px 6px; }
  .gtp-stat .val { font-size: 22px; }
  #gtpPlay:not([hidden]), #gtpOver:not([hidden]) { min-height: calc(100dvh - 200px); }
}

/* mobile polish: keep NEED HELP on one line, give the timer bar contrast on the backdrops */
.gtp-timer { background: rgba(255,255,255,.09); }
@media (max-width: 480px) {
  .gtp-helpbar { font-size: 12px; letter-spacing: .9px; padding: 10px 13px; gap: 7px; white-space: nowrap; }
  .gtp-helpbar .t { font-size: 10.5px; }
  .gtp-chip { padding: 6px 10px; font-size: 10.5px; }
}

/* ============================================================
   2026-08-12 PM punch list (Anthony): bigger game, tighter rhythm.
   Last block on purpose — these override the earlier mock block.
   ============================================================ */

/* ---- desktop: the game is the main feature — make it OWN the screen ---- */
#gtpPlay:not([hidden]) { max-width: 920px; }
@media (min-width: 1000px) {
  .gtp-playtitle { font-size: 42px; }
  .gtp-playsub { font-size: 13px; }
  .gtp-stat { min-width: 150px; padding: 11px 24px 9px; }
  .gtp-stat .val { font-size: 30px; }
  /* in-game path only (#gtpPlay-scoped): landing demo + answer path keep their sizes */
  #gtpPlay .gtp-snake .gtp-badge { width: 108px; height: 108px; font-size: 23px; }
  #gtpPlay .gtp-snake .gtp-cell { width: 128px; }
  #gtpPlay .gtp-snake .gtp-harrow { height: 108px; width: 30px; font-size: 32px; }
  #gtpPlay .gtp-snake .gtp-srowd .gtp-darr { width: 128px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-badge { width: 92px; height: 92px; font-size: 20px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-cell { width: 108px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-harrow { height: 92px; width: 26px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 108px; }
  .gtp-chip { font-size: 12px; padding: 8px 15px; }
  .gtp-helpbar { font-size: 15px; padding: 13px 24px; }
  .gtp-timerrow { max-width: 620px; }
  #gtpPlay .gtp-inputwrap { max-width: 520px; }
}

/* ---- the type box OUTRANKS the back button, everywhere ---- */
#gtpPlay #gtpInput { padding: 17px 18px; font-size: 18px; border-width: 2px; }
#gtpPlay .gtp-backbtn, #gtpOver ~ * .gtp-backbtn { }
.gtp-play .gtp-backbtn {
  display: inline-block; width: auto; margin: 30px auto 0; padding: 8px 20px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: none; }
.gtp-play .gtp-backbtn:hover { color: var(--text); border-color: var(--text-dim); }

/* ---- end screen matches the in-game scale ---- */
#gtpOver .gtp-answer { max-width: 680px; padding: 30px 24px; }
#gtpOver .gtp-ans-name { font-size: clamp(26px, 3.4vw, 38px); }
#gtpOver .gtp-ans-path .gtp-badge { width: 84px; height: 84px; font-size: 18px; }
#gtpOver .gtp-ans-path .gtp-cell { width: 100px; }
@media (max-width: 480px) {
  #gtpOver .gtp-ans-path .gtp-badge { width: 64px; height: 64px; font-size: 14px; }
  #gtpOver .gtp-ans-path .gtp-cell { width: 78px; }
}

/* ---- landing: kill the copy↔logos gap, fill top to bottom ---- */
.gtp-land { column-gap: 14px; }
.gtp-land > .gtp-demo { justify-self: start; }
.gtp-land .gtp-h { font-size: clamp(30px, 4vw, 46px); }
.gtp-land .gtp-sub { font-size: 15.5px; }
.gtp-steps .n { font-size: 21px; }
.gtp-steps .t { font-size: 12px; }
@media (min-width: 901px) {
  .gtp-demo .gtp-badge { width: 74px; height: 74px; font-size: 16px; }
  .gtp-demo .gtp-cell { width: 92px; }
  .gtp-demo .gtp-harrow { height: 74px; font-size: 24px; width: 22px; }
  .gtp-demo .gtp-srowd .gtp-darr { width: 92px; }
}

/* ---- mobile: start high (no dead space over the title), one-line chips,
        bottom rhythm matches the top ---- */
@media (max-width: 900px) {
  #gtpPlay:not([hidden]), #gtpOver:not([hidden]) { justify-content: flex-start; min-height: 0; padding-top: 4px; }
  .gtp-playhead { margin-top: 0; }
  .gtp-statbar { margin: 10px 0 14px; }
  .gtp-path { margin-bottom: 18px; }
}
@media (max-width: 480px) {
  .gtp-infochips { flex-wrap: nowrap; gap: 6px; }
  .gtp-chip { padding: 6px 8px; font-size: 9.5px; letter-spacing: .7px; white-space: nowrap; }
  .gtp-wrap { padding-top: 8px; }
}

/* ============================================================
   2026-08-13 (Anthony): landing must read CENTERED, logos bigger,
   no dead space under the CTAs. Supersedes the earlier landing rules.
   ============================================================ */

/* The two columns now PACK and center as one block. Before this, the demo was
   justify-self:start inside a 6fr column, which left ~390px of empty column to
   the right of the logos — mathematically centered, visually shoved left
   ("still not centered" + his mobile markings). */
.gtp-land { grid-template-columns: minmax(0, 470px) auto; justify-content: center; column-gap: 40px; }
.gtp-land > .gtp-demo { justify-self: center; }

/* bigger game area on the landing — fills more top-to-bottom */
@media (min-width: 901px) {
  .gtp-demo .gtp-badge { width: 96px; height: 96px; font-size: 20px; }
  .gtp-demo .gtp-cell { width: 116px; }
  .gtp-demo .gtp-harrow { height: 96px; font-size: 28px; width: 26px; }
  .gtp-demo .gtp-srowd .gtp-darr { width: 116px; }
  .gtp-demo .gtp-yr { font-size: 12px; }
}

/* kill the dead space between the CTAs and the SEO copy (was ~134px) */
#gtpStart.gtp-screen { padding-top: 10px; padding-bottom: 6px; }
.gtp-body .seo-about { margin-top: 12px !important; }
.gtp-body .seo-about h2 { padding-top: 18px !important; }

@media (max-width: 900px) {
  /* single column: keep the snake visually centred under the copy */
  .gtp-land { grid-template-columns: 1fr; justify-content: stretch; column-gap: 0; }
  .gtp-demo { width: 100%; }
  .gtp-demo .gtp-snake { margin-left: auto; margin-right: auto; }
  .gtp-demo .gtp-badge { width: 66px; height: 66px; font-size: 15px; }
  .gtp-demo .gtp-cell { width: 80px; }
  .gtp-demo .gtp-harrow { height: 66px; font-size: 20px; width: 18px; }
  .gtp-demo .gtp-srowd .gtp-darr { width: 80px; }
  #gtpStart.gtp-screen { padding-bottom: 4px; }
}

/* Demo logo sizing needs to beat `.gtp-snake.gtp-c3 .gtp-badge` (0,3,0) — a 7+ stop
   career renders as .gtp-c3, so the plain .gtp-demo rules above lost the cascade
   and the logos never actually grew. These are (0,4,0). */
@media (min-width: 901px) {
  .gtp-demo .gtp-snake .gtp-badge, .gtp-demo .gtp-snake.gtp-c3 .gtp-badge { width: 96px; height: 96px; font-size: 20px; }
  .gtp-demo .gtp-snake .gtp-cell, .gtp-demo .gtp-snake.gtp-c3 .gtp-cell { width: 116px; }
  .gtp-demo .gtp-snake .gtp-harrow, .gtp-demo .gtp-snake.gtp-c3 .gtp-harrow { height: 96px; width: 26px; font-size: 28px; }
  .gtp-demo .gtp-snake .gtp-srowd .gtp-darr, .gtp-demo .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 116px; }

  /* copy column scales up to MEET the taller logo column — that leftover height was
     the dead space under CURRENT ERA / ALL-TIME, not padding */
  .gtp-land .gtp-h { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 16px; }
  .gtp-land .gtp-sub { font-size: 17px; line-height: 1.6; margin-bottom: 22px; }
  .gtp-steps { gap: 16px 26px; margin-bottom: 24px; }
  .gtp-steps .n { font-size: 24px; }
  .gtp-steps .t { font-size: 12.5px; }
  .gtp-cta { padding: 16px 30px; font-size: 19px; }
  .gtp-eyebrow { font-size: 13px; margin-bottom: 10px; }
}
@media (max-width: 900px) {
  .gtp-demo .gtp-snake .gtp-badge, .gtp-demo .gtp-snake.gtp-c3 .gtp-badge { width: 66px; height: 66px; font-size: 15px; }
  .gtp-demo .gtp-snake .gtp-cell, .gtp-demo .gtp-snake.gtp-c3 .gtp-cell { width: 80px; }
  .gtp-demo .gtp-snake .gtp-harrow, .gtp-demo .gtp-snake.gtp-c3 .gtp-harrow { height: 66px; width: 18px; font-size: 20px; }
  .gtp-demo .gtp-snake .gtp-srowd .gtp-darr, .gtp-demo .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 80px; }
}

/* .gtp-wrap ships 60px of bottom padding — that was most of the remaining dead
   space between the CTAs and the SEO copy. The section below provides its own
   top spacing, so this page doesn't need it. */
.gtp-body .gtp-wrap { padding-bottom: 10px; }

/* Landing DEMO only: the snake hugs short rows to the edge so the path reads
   continuously — correct in-game, but on the decorative hero it left a block of
   empty space beside the last logo (Anthony's mobile markings). Centre the demo's
   short row + its down-arrow so the hero reads as one balanced block. The in-game
   path (#gtpPlay) keeps the true snake alignment. */
/* REVERTED 2026-08-14 ("fix arrows"): centering the short row broke the snake —
   the ↓ still sat over the column the next logo LEFT, so the chain stopped
   connecting. True snake alignment wins over symmetric whitespace: every arrow
   must point at the logo it actually leads to. */

/* ============================================================
   2026-08-14 mock match (Anthony): scoreboard streak box, bigger
   logos, TIME REMAINING bar, highlighted input, chips below it.
   Last block — intentionally overrides everything above.
   ============================================================ */

/* --- compact scoreboard: one box, single divider, big emoji --- */
.gtp-statbar { display: none; }                       /* replaced by .gtp-scoreboard */
.gtp-scoreboard { display: inline-flex; align-items: stretch; gap: 0; margin: 14px auto 20px;
  background: rgba(10,16,24,.55); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 8px; backdrop-filter: blur(4px); }
.gtp-sb { display: flex; align-items: center; gap: 11px; padding: 2px 22px; }
.gtp-sb .ico { font-size: 30px; line-height: 1; }
.gtp-sb .txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.gtp-sb .lab { font-family: "Oswald", sans-serif; font-size: 11px; letter-spacing: 1.7px;
  text-transform: uppercase; color: var(--text-dim); line-height: 1.1; }
.gtp-sb .val { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 30px;
  color: #ffd166; line-height: 1; }
.gtp-sbdiv { width: 1px; background: var(--line); margin: 2px 0; flex: none; }

/* --- top spacing matches the bottom; scoreboard never touches the head --- */
#gtpPlay:not([hidden]) { padding-top: 26px; padding-bottom: 26px; }
.gtp-playhead { margin-bottom: 4px; }

/* --- logos bigger on BOTH desktop and mobile (in-game path only) --- */
#gtpPlay .gtp-snake .gtp-badge, #gtpPlay .gtp-snake.gtp-c3 .gtp-badge { width: 100px; height: 100px; font-size: 22px; }
#gtpPlay .gtp-snake .gtp-cell,  #gtpPlay .gtp-snake.gtp-c3 .gtp-cell  { width: 118px; }
#gtpPlay .gtp-snake .gtp-harrow,#gtpPlay .gtp-snake.gtp-c3 .gtp-harrow{ height: 100px; width: 30px; font-size: 30px; }
#gtpPlay .gtp-snake .gtp-srowd .gtp-darr, #gtpPlay .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 118px; }
@media (min-width: 1000px) {
  #gtpPlay .gtp-snake .gtp-badge, #gtpPlay .gtp-snake.gtp-c3 .gtp-badge { width: 118px; height: 118px; font-size: 25px; }
  #gtpPlay .gtp-snake .gtp-cell,  #gtpPlay .gtp-snake.gtp-c3 .gtp-cell  { width: 138px; }
  #gtpPlay .gtp-snake .gtp-harrow,#gtpPlay .gtp-snake.gtp-c3 .gtp-harrow{ height: 118px; width: 34px; font-size: 34px; }
  #gtpPlay .gtp-snake .gtp-srowd .gtp-darr, #gtpPlay .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 138px; }
}
/* arrows: solid, aligned to the LOGO's centre line (they were floating high
   because .gtp-cell stacks logo + year and the arrow matched the whole cell) */
.gtp-harrow { display: flex; align-items: center; justify-content: center;
  align-self: flex-start; color: var(--text); opacity: .95; font-weight: 700; }
.gtp-srowd { align-items: center; }
.gtp-srowd .gtp-darr { display: flex; align-items: center; justify-content: center;
  height: 26px; color: var(--text); opacity: .95; }
.gtp-cell { justify-content: flex-start; }

/* --- TIME REMAINING bar: label + full-width track + seconds --- */
.gtp-timerrow { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 620px;
  margin: 4px auto 14px; }
.gtp-tlab { font-family: "Oswald", sans-serif; font-size: 11.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.gtp-timerrow .gtp-timer { flex: 1; height: 10px; margin: 0; max-width: none;
  background: rgba(255,255,255,.10); }
.gtp-secs { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 16px;
  color: #57c98a; min-width: 42px; text-align: right; }

/* --- the type box is the call to action: full width, highlighted --- */
#gtpPlay .gtp-inputwrap { width: 100%; max-width: 620px; margin: 0 auto 12px; }
#gtpPlay #gtpInput { width: 100%; padding: 18px 18px; font-size: 18px; text-align: left;
  border: 2px solid rgba(224,169,58,.55); border-radius: 14px;
  background: rgba(10,16,24,.6); box-shadow: 0 0 0 4px rgba(224,169,58,.10); }
#gtpPlay #gtpInput::placeholder { color: rgba(255,255,255,.55); }
#gtpPlay #gtpInput:focus { border-color: #ffd166; box-shadow: 0 0 0 4px rgba(224,169,58,.22); }

/* --- 3 equal info chips BELOW the input --- */
.gtp-infochips { display: flex; gap: 10px; width: 100%; max-width: 620px; margin: 0 auto 6px; flex-wrap: nowrap; }
.gtp-chip { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(10,16,24,.5); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 8px; font-family: "Oswald", sans-serif; font-size: 11.5px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-dim); }
.gtp-chip .ci { font-size: 15px; }
.gtp-chip b { color: var(--text); font-weight: 600; }

/* --- hint bar + its 2 dots sit directly above the timer ---
   ONE ROW on every width (Anthony 2026-08-18: "desktop hints to be shown like
   mobile when theyre clicked and not stacked") — chips render inline beside
   the button, never as a stacked column. */
.gtp-hintbar { flex-direction: row; flex-wrap: nowrap; gap: 8px; justify-content: center; align-items: center; min-height: 64px; margin: 2px 0 10px; }
.gtp-hintdots { order: 0; }
.gtp-hdot { width: 12px; height: 12px; }

/* --- end screen: logos stay the play-screen size, never shrink --- */
#gtpOver .gtp-ans-path .gtp-badge { width: 100px; height: 100px; font-size: 22px; }
#gtpOver .gtp-ans-path .gtp-cell { width: 118px; }
#gtpOver .gtp-answer { max-width: 720px; }
#gtpOver .gtp-scoreboard { margin: 6px auto 18px; }
@media (min-width: 1000px) {
  #gtpOver .gtp-ans-path .gtp-badge { width: 118px; height: 118px; font-size: 25px; }
  #gtpOver .gtp-ans-path .gtp-cell { width: 138px; }
}
@media (max-width: 480px) {
  .gtp-sb { padding: 2px 14px; gap: 9px; }
  .gtp-sb .ico { font-size: 26px; }
  .gtp-sb .val { font-size: 26px; }
  .gtp-chip { padding: 10px 4px; font-size: 9.5px; letter-spacing: .6px; gap: 4px; }
  .gtp-chip .ci { font-size: 13px; }
  .gtp-tlab { font-size: 10px; letter-spacing: 1px; }
  #gtpPlay #gtpInput { padding: 16px 15px; font-size: 17px; }
  /* Phones render the path 3-across (renderPath caps cols at 3 under 900px —
     Anthony 08-15: "maybe we try 3 logos across screen then down", then
     "id still make logos 3 across little bigger"). Budget, measured not
     guessed: 375 viewport − 20 slimmed .gtp-wrap padding − 24 panel padding
     = 331 available; a row is 3 cells + 2 arrows + 4 flex gaps of 4px, so
     3×96 + 2×12 + 16 = 328. Badges went 76 → 82 on his second pass. */
  .gtp-body .gtp-wrap { padding-left: 10px; padding-right: 10px; }
  #gtpPlay, #gtpOver { padding-left: 12px; padding-right: 12px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-badge { width: 82px; height: 82px; font-size: 17px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-cell { width: 96px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-harrow { height: 82px; width: 12px; font-size: 19px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 96px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-yr { font-size: 10px; }
  /* End screen: the answer recap runs SMALLER than the puzzle (the base
     design used 50-66px badges there), and its card adds side padding of its
     own, so it gets its own numbers: 3×74 + 2×12 + 16 gaps = 262, plus the
     card's 16 = 278, well inside the 315. This also fixes a pre-existing
     overflow: the 100px over-screen cells never fit a phone even 2-across
     once the card's old 48px of padding was added. */
  #gtpOverAnswer { padding: 24px 8px; }
  #gtpOver .gtp-snake.gtp-c3 .gtp-badge { width: 62px; height: 62px; font-size: 14px; }
  #gtpOver .gtp-snake.gtp-c3 .gtp-cell { width: 74px; }
  #gtpOver .gtp-snake.gtp-c3 .gtp-harrow { height: 62px; width: 12px; font-size: 17px; }
  #gtpOver .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 74px; }
  #gtpOver .gtp-snake.gtp-c3 .gtp-yr { font-size: 10px; }
  #gtpOver .gtp-ans-path .gtp-badge { width: 62px; height: 62px; font-size: 14px; }
  #gtpOver .gtp-ans-path .gtp-cell { width: 74px; }
  #gtpOver .gtp-ans-path .gtp-harrow { height: 62px; width: 12px; font-size: 17px; }
  #gtpOver .gtp-ans-path .gtp-srowd .gtp-darr { width: 74px; }
}

/* Between the phone shrink (≤480) and tablet room (≥701), the base 118px cells
   still overflow a 3-across row (3×118 + arrows + gaps = 415 vs ~365 usable at
   481px). Narrow band, real devices (Duo/Fold, half-snapped windows). */
@media (min-width: 481px) and (max-width: 700px) {
  #gtpPlay .gtp-snake.gtp-c3 .gtp-badge { width: 90px; height: 90px; font-size: 19px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-cell { width: 104px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-harrow { height: 90px; width: 14px; font-size: 21px; }
  #gtpPlay .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 104px; }
}

/* Mobile typing mode: keyboard open → compact the path so the logos stay visible
   while typing (players were losing sight of what they're guessing). Phone only. */
@media (max-width: 900px) {
  /* "too much space. Cut it in half" (Anthony 08-16, marked screenshot):
     topbar -> title measured 34px (26 panel padding + 8 wrap). Halved.
     :not([hidden]) matches the 26px rule's specificity — a bare #gtpPlay
     loses to it and silently does nothing (found the hard way). */
  #gtpPlay:not([hidden]) { padding-top: 12px; }
  #gtpPlay.gtp-typing .gtp-playhead, #gtpPlay.gtp-typing .gtp-infochips { display: none; }
  /* Streak box GOES AWAY while typing (Anthony: "not a fan when the name box
     comes up it hides the logos. Push the streak box out of the screen or
     hide it when the type box populates") — every pixel it held goes to the
     logos, which is what the player is being quizzed on. */
  #gtpPlay.gtp-typing .gtp-scoreboard { display: none; }
  #gtpPlay.gtp-typing .gtp-snake .gtp-badge, #gtpPlay.gtp-typing .gtp-snake.gtp-c3 .gtp-badge { width: 58px; height: 58px; font-size: 13px; }
  #gtpPlay.gtp-typing .gtp-snake .gtp-cell,  #gtpPlay.gtp-typing .gtp-snake.gtp-c3 .gtp-cell  { width: 70px; }
  #gtpPlay.gtp-typing .gtp-snake .gtp-harrow,#gtpPlay.gtp-typing .gtp-snake.gtp-c3 .gtp-harrow{ height: 58px; width: 16px; font-size: 17px; }
  #gtpPlay.gtp-typing .gtp-snake .gtp-srowd .gtp-darr, #gtpPlay.gtp-typing .gtp-snake.gtp-c3 .gtp-srowd .gtp-darr { width: 70px; height: 16px; }
  #gtpPlay.gtp-typing .gtp-yr { font-size: 9.5px; }
  #gtpPlay.gtp-typing .gtp-path { margin-bottom: 8px; }
  #gtpPlay.gtp-typing .gtp-hintbar { margin: 0 0 6px; }
  #gtpPlay.gtp-typing .gtp-timerrow { margin: 0 auto 8px; }
  #gtpPlay.gtp-typing .gtp-backbtn { display: none; }
}

/* Breathing room around the logos must be SYMMETRIC (Anthony, marked screenshot):
   measured 20px above / 50px below. His instruction: add to the top, trim the
   bottom a little, until they match. The bottom was inflated by .gtp-feedback's
   26px reserve (it holds "❌ Not X — 1 guess left" and must keep its height, or
   the layout jumps when a guess misses) — so the path's own margin absorbs it. */
#gtpPlay .gtp-scoreboard { margin-bottom: 34px; }
#gtpPlay .gtp-path { margin-bottom: 8px; }
#gtpPlay .gtp-feedback { min-height: 26px; margin-top: 0; }

/* Arrow polish (Anthony "fix arrows"): the ↓ must sit in the same column as the
   logo above AND below it, and read as one connected chain. Aligning the row's
   arrow box to the badge width does that; the extra weight makes the direction
   obvious at a glance on a photo background. */
.gtp-srowd { align-items: center; margin: 2px 0; }
.gtp-srowd .gtp-darr { font-size: 26px; font-weight: 800; line-height: 1;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.gtp-harrow { color: #fff; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,.6); }

/* Centre the number under its label (Anthony: "center the streak number on both
   game page and end page"). Both screens share .gtp-scoreboard, so this is one fix. */
.gtp-scoreboard .gtp-sb .txt { align-items: center; }
.gtp-scoreboard .gtp-sb .val { text-align: center; width: 100%; }

/* Streak leaderboard under the game (Anthony: "show leaderboard like we do other
   pages"). Hidden until the RPC returns rows, so it never renders an empty box. */
/* min-height reserves the board's loaded size, and [hidden] keeps the box in
   the layout while the RPC runs (invisible, not display:none) — the board sits
   ABOVE the about text now, so popping in late would shove everything below
   it down, which is exactly the layout movement Anthony told us to kill
   ("Google hates pages that move"). */
/* flex:none is LOAD-BEARING. The board sits as a direct child of the body,
   and .gtp-body is a viewport-height flex column - a flex item may be
   SHRUNK below its content. Normally min-height:auto floors an item at its
   content size, but setting an explicit min-height REPLACES that floor: the
   560px reserve below literally granted the browser permission to crush the
   filled board to exactly 560px, spilling rows under the about text
   (Anthony: "the leaderboard gets cut off"). flex:none opts out of
   shrinking entirely; the 560px then acts only as the pre-load reserve. */
.gtp-lb { max-width: 620px; margin: 26px auto 8px; padding: 0 18px; min-height: 560px; flex: none; }
.gtp-lb[hidden] { display: block; visibility: hidden; }
@media (max-width: 900px) {
  /* "can we some how make it bigger left and right" — the board now spans
     nearly the full phone width. */
  .gtp-lb { padding: 0 6px; }
  .gtp-lb .gtp-brow { padding: 11px 10px; }
}
.gtp-lbtitle { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: .5px; text-transform: uppercase; margin: 0 0 12px; }
.gtp-lb .gtp-blist { background: rgba(10,16,24,.5); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; max-width: none; }
.gtp-lb .gtp-brow { grid-template-columns: 44px 1fr auto; padding: 11px 14px; }
.gtp-lb .gtp-brow.me { background: rgba(224,169,58,.12); }
.gtp-lb .gtp-brow strong { color: #ffd166; font-family: "Oswald", sans-serif; font-size: 17px; }
.gtp-lbnote { color: var(--text-dim); font-size: 12.5px; margin: 10px 0 0; }

/* Autocomplete headshots: the <img> removes itself when the file 404s, so rows
   fall back to plain names until art exists for that player. */
.gtp-sug { display: flex; align-items: center; gap: 10px; }
.gtp-sugface { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: rgba(255,255,255,.08); flex: none; }
.gtp-sugname { flex: 1; text-align: left; }

/* Phone flex ordering for the lower half of the play screen. (The feedback
   message used to be ordered here too; it now lives INSIDE .gtp-inputwrap on
   phones — see the anchored-toast block below.) */
@media (max-width: 900px) {
  #gtpPlay { display: flex; flex-direction: column; }
  #gtpPlay .gtp-inputwrap { order: 9; }
  #gtpPlay .gtp-infochips { order: 10; }
  #gtpPlay .gtp-backbtn { order: 11; }
}

/* Lighter, COLOUR-PRESERVING scrims (Anthony: "should nba and nhl be lighter, show
   the orange court and white ice? kinda like build-a-player.com/bucket"). Their
   backdrop isn't brighter than ours, it just keeps its colour — a neutral black
   wash greys out hardwood and ice alike. So the gradient is now tinted to the
   surface (warm for the court, cold for the rink) and lightest through the middle
   band where the surface actually shows. Text keeps its own scrim below. */
.gtp-bg-nhl .gtp-playhead, .gtp-bg-nba .gtp-playhead,
.gtp-bg-mlb .gtp-playhead, .gtp-bg-nfl .gtp-playhead { text-shadow: 0 2px 10px rgba(0,0,0,.75); }
.gtp-bg-nhl .gtp-land .gtp-h, .gtp-bg-nba .gtp-land .gtp-h,
.gtp-bg-nhl .gtp-sub, .gtp-bg-nba .gtp-sub { text-shadow: 0 2px 10px rgba(0,0,0,.75); }

/* MOBILE: the miss message, take three — anchored ABOVE THE INPUT.
   Take one (in-flow) hid under the keyboard. Take two (viewport-fixed at
   top:132) was visible but wrong in a different way for every keyboard state:
   once the keyboard closed and the play area expanded back, 132px landed on
   the logos (Anthony: "the red x floats to middle of logos after the box
   expands back to regular size"). The one place that's correct in BOTH
   states is directly above the input: it's where the player just typed,
   and it's the exact spot the suggestion list occupies, which hides on
   submit as the verdict appears. JS re-homes #gtpFeedback inside
   .gtp-inputwrap (position:relative) on phones, so this anchors to the box
   itself and moves with it. Desktop keeps the inline message.

   Visibility lessons that MUST survive future edits:
   - never animate opacity here, and never gate visibility on an animation
     running (a stalled animation clock once pinned it invisible at the
     `from` keyframe for good — that was "when u make an error it doesn't
     show it's wrong"). Transform-only animation, opacity stays 1.
   - keep it out of the viewport-fixed business entirely: no safe-area math,
     no z-index war with the header (1300) or the ad band (1200). Inside the
     input wrap only the suggestion list shares the spot, and JS clears the
     verdict the moment typing resumes. */
@media (max-width: 900px) {
  /* The verdict REPLACES the timer row for its 2.6 seconds. Fixed offsets
     kept landing on a different row in every keyboard state (+8 sat on the
     clock keyboard-closed, +44 sat on it keyboard-open, because the rows
     compress) - Anthony's second recording still showed "it covers the
     timer". The one slot that exists in BOTH layouts directly above the
     input is the timer row itself, so the toast now sits exactly there and
     the :has() rule below blanks the timer while the toast is up. Nothing
     is ever covered mid-tick; the clock keeps running and returns when the
     verdict clears. */
  #gtpPlay .gtp-inputwrap .gtp-feedback {
    position: absolute; left: 50%; bottom: calc(100% + 6px);
    transform: translateX(-50%);
    margin: 0; min-height: 0; z-index: 22;
    width: max-content; max-width: 92vw; }
  #gtpPlay:has(.gtp-inputwrap .gtp-feedback:not(:empty)) .gtp-timerrow { visibility: hidden; }
  #gtpPlay .gtp-inputwrap .gtp-feedback:not(:empty) {
    background: rgba(8,14,22,.96); border: 1px solid rgba(224,86,79,.65);
    border-radius: 12px; padding: 11px 16px; font-size: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 1;
    animation: gtpToast .22s ease both; }
  #gtpPlay .gtp-inputwrap .gtp-feedback.good:not(:empty) { border-color: rgba(87,201,138,.7); }
}
@keyframes gtpToast { from { transform: translate(-50%, -10px); }
                      to   { transform: translate(-50%, 0); } }

/* Phones: suggestions open UPWARD. The base .gtp-suggest drops DOWN from the
   input, which on a phone is straight into the keyboard — Anthony's 08-15
   recording shows exactly one orange sliver of the first row peeking under
   the input while everything else hides behind the keys ("Look what happens
   when I type. lol. If we don't figure out this UX ppl won't play").
   Height guard: the locked play panel is --gtp-vvh tall with overflow:hidden,
   so a drop-up that outgrows the space above the input would be CLIPPED at
   the panel's top edge, not scrolled — cap it below that and scroll inside.
   The 150px reserve ≈ input row + margins. Desktop keeps the drop-down. */
@media (max-width: 900px) {
  /* Cap tightened 150 -> 205 reserve: Anthony's recording shows a 6-row list
     slicing the logo circles in half ("logos should show here. Cause they're
     getting cut off"). 205 reserves one compact path row + the input +
     margins, so the puzzle always stays visible above the list. */
  #gtpPlay .gtp-suggest {
    top: auto; bottom: calc(100% + 8px);
    max-height: min(232px, calc(var(--gtp-vvh, 100dvh) - 205px));
    overflow-y: auto;
  }
  /* While the list is OPEN the hint bar and timer are dead weight — hiding
     them hands their ~100px to the logos + list. They return the instant the
     list closes. (Browsers without :has() just keep today's layout.) */
  #gtpPlay.gtp-typing:has(#gtpSuggest:not([hidden])) .gtp-hintbar,
  #gtpPlay.gtp-typing:has(#gtpSuggest:not([hidden])) .gtp-timerrow { display: none; }
  /* The locked panel's flex could crush the path to nothing under a tall
     list; hold room for at least one full row of circles. */
  body.gtp-locked #gtpPlay.gtp-typing .gtp-path { min-height: 96px; }
  /* Tighter rows on phones: more names in the same panel, and the shorter
     panel leaves the compact logos visible above it (pairs with hiding the
     streak box in typing mode). */
  .gtp-sug { padding: 9px 12px; font-size: 14.5px; }
  .gtp-sugface { width: 28px; height: 28px; }
}

/* ---- HINTS on phones: big reveal, zero movement ----
   Two complaints, one mechanism. "U can barely see the hint. At one point I
   didn't even know if I clicked it": the revealed chip was a 13px pill lost
   under the dots. "It also moves the screen": each reveal stacked a new row
   into the column hint bar, shifting everything below it (plus takeHint()
   focused the input, popping the keyboard — fixed in JS).
   On phones the whole bar is ONE ROW at a fixed 64px: chips, then the button
   (which drops its "Need help?" prefix once a chip exists), dots retired
   after the first reveal — all handled in renderHints(). Nothing above or
   below the bar ever moves, and nothing overlaps the logos (a first draft
   floated the chips above the bar, straight over the puzzle).
   Visibility rule (hard-won on the toast): the pop animates TRANSFORM ONLY
   with backwards fill; opacity never leaves 1, so a stalled animation clock
   can shrink a chip but can never hide it. */
.gtp-hintchips { display: contents; }
.gtp-hint {
  font-size: 15px; font-weight: 600; padding: 9px 14px; border-radius: 12px;
  border: 1px solid rgba(224,169,58,.75); background: rgba(16,20,28,.95);
  box-shadow: 0 0 16px rgba(224,169,58,.28), 0 6px 18px rgba(0,0,0,.45);
  white-space: nowrap;
  animation: gtpHintIn .32s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.gtp-hint b { color: #ffd166; font-size: 17px; }
@keyframes gtpHintIn { from { transform: scale(.55); } to { transform: scale(1); } }

/* Make the miss unmistakable: big ✕, the name, and the guesses left on its own line. */
#gtpPlay .gtp-feedback.bad:not(:empty) { color: #ffd9d6; }
#gtpPlay .gtp-feedback.good:not(:empty) { color: #d6ffe6; }
@media (max-width: 900px) {
  #gtpPlay .gtp-feedback:not(:empty) { font-weight: 700; letter-spacing: .2px; line-height: 1.3; }
}

/* ---- LOCK THE SCREEN WHILE TYPING (mobile) ----
   iOS always scrolls a focused input into view; you cannot decline it. That scroll is
   what threw the logos off the top and made the page bounce. So while the keyboard is
   open we freeze the document and turn the play area into a fixed panel sized to the
   VISUAL viewport (--gtp-vvh, published from JS), with the path allowed to shrink into
   whatever room is left. Nothing can scroll, so nothing can move. */
body.gtp-locked { overflow: hidden; position: fixed; inset: 0; width: 100%; }
@media (max-width: 900px) {
  body.gtp-locked #gtpPlay.gtp-typing {
    /* top follows the VISUAL viewport (gtp.js publishes --gtp-vvot): when the
       keyboard opens, iOS shifts the visual viewport down inside the layout
       viewport to expose the input, and a fixed top:0 panel slides up out of
       view with all its padding — in the app that strip is exactly where the
       native ad banner floats ("logos still covered by ad", 2026-08-20). */
    position: fixed; left: 0; right: 0; top: var(--gtp-vvot, 0px); z-index: 40;
    height: var(--gtp-vvh, 100dvh);
    /* padding-top respects the notch: the panel is pinned to the layout
       viewport's top, which sits UNDER the iOS status bar, and the first row
       of logo circles was getting its top sliced off behind it (Anthony:
       "the logos get cut off at the top when u go to type box"). */
    margin: 0; padding: max(12px, env(safe-area-inset-top, 12px)) 14px 6px;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
    overflow: hidden; }
  /* The path takes the leftover space. flex-start, NOT center: with the
     suggestion list open the slot's bottom is covered, and a centered snake
     sinks under it (measured 13px of logo peeking - "logos getting cut off").
     Pinned to the top, the first row is always fully visible. */
  body.gtp-locked #gtpPlay.gtp-typing .gtp-path {
    flex: 1 1 auto; min-height: 0; align-content: flex-start; margin: 0 0 6px; overflow: hidden; }
  body.gtp-locked #gtpPlay.gtp-typing .gtp-hintbar,
  body.gtp-locked #gtpPlay.gtp-typing .gtp-timerrow,
  body.gtp-locked #gtpPlay.gtp-typing .gtp-inputwrap { flex: none; }
  /* keep the site chrome out of the locked panel's way */
  body.gtp-locked .topbar, body.gtp-locked #pw-sticky-top,
  body.gtp-locked .seo-about, body.gtp-locked .gtp-lb, body.gtp-locked .foot { display: none !important; }
}