/* ──────────────────────────────────────────────────────────────────────────────
   TRY IT — a playable slice of the Solo game, on the marketing page.

   Every class here is prefixed `gtd-` and nothing outside this file is touched,
   so the 1,151-line styles.css cannot collide with it and the whole feature can
   be removed by deleting two files and one <section>.

   It mirrors the real Solo screen (see the app's ContentView): timer ring →
   progress pill → plate with consonants → yellow clue bar → REVEAL/SKIP →
   QWERTY. Same order, same colours, same shapes. A visitor who plays this and
   then downloads should recognise the screen immediately — that is the entire
   point of putting it here, so "close enough" is not close enough.
   ────────────────────────────────────────────────────────────────────────────── */

.gtd {
  --gtd-navy: #16233d;
  --gtd-navy-deep: #0d1524;
  --gtd-orange: #ff9f0a;
  --gtd-red: #f2452f;
  --gtd-yellow: #ffd21e;
  --gtd-ink: #111223;          /* the app's plate ink */
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  padding: 18px 14px 22px;
  border-radius: 26px;
  background: #0e1728 url('/stage.jpg') center/cover no-repeat;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
/* The stadium beams the app plays over. Cheap CSS rather than the 272KB photo —
   this sits above the fold and must not cost a second of load. */
.gtd::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,33,.55) 0%, rgba(10,18,33,.72) 100%);
  pointer-events: none;
}
.gtd > * { position: relative; }

/* ── Timer ring ─────────────────────────────────────────────────────────────── */
.gtd-ring { position: relative; width: 92px; height: 92px; }
.gtd-ring svg { transform: rotate(-90deg); display: block; }
.gtd-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.gtd-ring .gtd-track { stroke: rgba(255, 255, 255, .13); }
.gtd-ring .gtd-fill  { stroke: var(--gtd-orange); transition: stroke-dashoffset .95s linear, stroke .3s; }
.gtd-ring.gtd-low .gtd-fill { stroke: var(--gtd-red); }
.gtd-ring-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff;
  font-weight: 800; line-height: 1;
}
.gtd-ring-num b { font-size: 30px; letter-spacing: -.5px; }
.gtd-ring-num span { font-size: 11px; opacity: .8; margin-top: 2px; }

/* ── "PLATE 1 OF 4" pill ────────────────────────────────────────────────────── */
.gtd-progress {
  display: flex; align-items: center; gap: 10px;
  background: rgba(10, 18, 33, .72);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px; padding: 9px 16px; margin: 0 auto 14px;
  max-width: 300px;
}
.gtd-progress-label {
  color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 1.4px; white-space: nowrap;
}
.gtd-progress-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.gtd-progress-bar i { display: block; height: 100%; background: var(--gtd-yellow); border-radius: 3px; transition: width .4s ease; }

/* ── The plate ──────────────────────────────────────────────────────────────── */
/* ── Voice mode ─────────────────────────────────────────────────────────────────
   Replaces the keyboard rather than sitting beside it — the app treats keyboard and
   voice as two modes, not two inputs, and a demo showing both at once would teach
   the wrong screen. */
.gtd-voice { display: flex; gap: 10px; align-items: stretch; }
.gtd-kbback {
  flex: 0 0 60px; border-radius: 15px; border: 2px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.15); color: #fff; font-size: 22px; cursor: pointer;
}
.gtd-bigmic {
  flex: 1; height: 60px; border: 0; border-radius: 15px; cursor: pointer;
  background: linear-gradient(180deg, #cc3333 0%, #e6661a 100%);
  color: #fff; font-weight: 900; letter-spacing: 1px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.gtd-bigmic.gtd-listening {
  background: linear-gradient(180deg, #1acc4d 0%, #008033 100%);
  animation: gtd-pulse 1.15s ease-in-out infinite;
}
.gtd-bigmic-icon { font-size: 20px; }

.gtd-plate {
  position: relative; width: 100%; aspect-ratio: 2 / 1;
  border-radius: 14px; overflow: hidden;
  background: url('/usa_bg.png') center/cover no-repeat;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  display: grid; place-items: center;
}
.gtd-plate-text {
  font-family: 'PlateUSA', 'Arial Black', sans-serif;
  font-size: clamp(56px, 19vw, 96px);
  color: var(--gtd-ink);
  letter-spacing: .02em;
  /* The app's engraved bevel: lit lip up-left, dark wall down-right, seated shadow. */
  text-shadow:
    -1.3px -1.5px 0 rgba(255, 255, 255, .55),
     1.4px  1.6px .5px rgba(0, 0, 0, .55),
     0 3px 5px rgba(0, 0, 0, .32);
  transform: translateY(2%);
}
.gtd-plate.gtd-correct { animation: gtd-pop .45s ease; }
@keyframes gtd-pop { 40% { transform: scale(1.035); } 100% { transform: scale(1); } }

/* ── Clue ───────────────────────────────────────────────────────────────────── */
.gtd-clue {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 14px;
  background: rgba(8, 14, 26, .78); border: 1px solid rgba(255, 255, 255, .07);
  color: var(--gtd-yellow); font-weight: 800; font-size: 15px; line-height: 1.32; text-align: center;
}

/* ── Reveal / Skip ──────────────────────────────────────────────────────────── */
.gtd-actions { display: flex; gap: 10px; justify-content: center; margin: 12px 0 14px; }
.gtd-act {
  border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 800; font-size: 13px;
  color: #1a1205; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.gtd-act:disabled { opacity: .45; cursor: default; }
.gtd-reveal { background: var(--gtd-orange); }
.gtd-skip   { background: var(--gtd-red); color: #fff; }

/* ── Typed guess ────────────────────────────────────────────────────────────────
   NOT a text field. The app renders the guess as plain heavy white text directly
   above the clue, and only once something has been typed (ContentView:1408-1416).
   An input box would be the single most obvious tell that this is a web mock. */
.gtd-typed {
  min-height: 0; text-align: center; color: #fff; font-weight: 800;
  font-size: 26px; letter-spacing: 1px; text-shadow: 0 2px 2px rgba(0,0,0,.5);
  margin-top: 10px;
}
.gtd-typed:empty { display: none; }
.gtd-typed.gtd-wrong { animation: gtd-shake .35s; color: #ff8a7a; }
@keyframes gtd-shake { 25% { transform: translateX(-6px);} 75% { transform: translateX(6px);} }
.gtd-typed.gtd-right { color: #35d07f; }

/* ── Top chrome: home · ring · sound ─────────────────────────────────────────── */
.gtd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gtd-corner {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.75); font-size: 17px; cursor: default;
}

/* ── Status bar ─────────────────────────────────────────────────────────────── */
.gtd-status {
  display: flex; align-items: center; justify-content: space-around;
  margin-top: 12px; padding: 9px 14px; border-radius: 999px;
  background: rgba(8, 14, 26, .72); border: 1px solid rgba(255,255,255,.08);
  color: #fff; font-weight: 800; font-size: 14px;
}
.gtd-status i { font-style: normal; }
.gtd-coin {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gtd-yellow); color: #6b4a00; font-size: 11px; font-weight: 900; vertical-align: -3px;
}
.gtd-play { opacity: .8; }
.gtd-flag { color: var(--gtd-orange); font-size: 14px; }
.gtd-act b { color: inherit; opacity: .85; font-weight: 900; }
.gtd-reveal b { color: #7a4a00; }

/* ── Keyboard ───────────────────────────────────────────────────────────────── */
.gtd-kb { background: var(--gtd-navy); border-radius: 16px; padding: 8px 6px; }
.gtd-kb-row { display: flex; gap: 5px; justify-content: center; margin-bottom: 6px; }
.gtd-kb-row:last-child { margin-bottom: 0; }
.gtd-key {
  flex: 1 1 0; min-width: 0; height: 42px; border: 0; border-radius: 7px;
  background: #fff; color: #12203a; font-weight: 800; font-size: 17px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.gtd-key:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.gtd-key.gtd-util { background: #59616e; color: #fff; flex: 0 0 46px; font-size: 15px; }
.gtd-key.gtd-guess { background: #fff; flex: 0 0 92px; letter-spacing: .5px; }
.gtd-key.gtd-space { flex: 1 1 auto; }

/* ── Finish card ────────────────────────────────────────────────────────────── */
.gtd-done { text-align: center; padding: 26px 12px 12px; }
.gtd-done h3 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.gtd-done p  { color: rgba(255, 255, 255, .78); margin: 0 0 18px; font-size: 15px; }
.gtd-score { color: var(--gtd-yellow); font-weight: 900; font-size: 40px; line-height: 1; margin-bottom: 4px; }
.gtd-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gtd-yellow); color: #3a2a00; text-decoration: none;
  border-radius: 999px; padding: 13px 26px; font-weight: 900; font-size: 16px;
  box-shadow: 0 8px 22px rgba(255, 210, 30, .28); margin-bottom: 12px;
}
.gtd-download:hover { filter: brightness(1.05); }
.gtd-done .gtd-again { display: block; margin: 0 auto; }
.gtd-again {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff;
  border-radius: 999px; padding: 9px 20px; font-weight: 700; cursor: pointer; font-size: 14px;
}

@media (max-width: 380px) {
  .gtd-key { height: 38px; font-size: 15px; }
  .gtd-key.gtd-util { flex-basis: 40px; }
  .gtd-key.gtd-guess { flex-basis: 78px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .gtd-plate.gtd-correct, .gtd-typed.gtd-wrong { animation: none; }
  .gtd-ring .gtd-fill { transition: none; }
}

/* ── Mic (voice input) ──────────────────────────────────────────────────────────
   Rendered only when the browser exposes speech recognition, so it is never a
   button that cannot work. Listening state is a slow red pulse — the same signal
   the app uses, and legible without colour alone because the icon changes too. */
.gtd-key.gtd-mic { background: #59616e; }
.gtd-key.gtd-mic.gtd-listening {
  background: var(--gtd-red);
  animation: gtd-pulse 1.15s ease-in-out infinite;
}
@keyframes gtd-pulse {
  0%, 100% { box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 0 0 rgba(242,69,47,.55); }
  50%      { box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 0 9px rgba(242,69,47,0); }
}
@media (prefers-reduced-motion: reduce) {
  .gtd-key.gtd-mic.gtd-listening { animation: none; }
}