/* First date games hub. Tokens only (dark mode via tools.css). */
.tool.fdg { gap: 14px; }
.tool .fdg-desc { font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .65); margin-top: -2px; min-height: 44px; }
.tool .fdg-players { display: flex; align-items: center; gap: 8px; }
.tool .fdg-pl-label { font-size: 13px; font-weight: 850; color: rgb(var(--ink) / .5); text-transform: uppercase; letter-spacing: .05em; flex: none; }
.tool .fdg-players input { min-height: 40px; padding: 6px 12px; border-radius: 14px; font-size: 16px; flex: 1 1 0; min-width: 0; }
.tool .fdg-amp { font-weight: 900; color: rgb(var(--ink) / .4); }
.tool .fdg-stage { outline: 0; min-height: 420px; }
.tool .fdg-game, .tool .fdg-tt-write, .tool .fdg-tt-guess, .tool .fdg-q21, .tool .fdg-flags, .tool .fdg-rf-intro, .tool .fdg-rf-live, .tool .fdg-rf-res { display: flex; flex-direction: column; gap: 14px; }
.tool .fdg-note { font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .6); }
.tool .fdg-err { font-size: 15px; font-weight: 800; color: #D93A3A; }
.tool .fdg-err:empty { display: none; }
.tool .fdg-subactions { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: center; }
.tool .fdg-link, .tool .fdg-textbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; background: none; font-size: 15px; font-weight: 800; color: var(--link); border-radius: 12px; }
.tool .fdg-link .tool-icon { width: 18px; height: 18px; }
.tool .fdg-link:focus-visible, .tool .fdg-textbtn:focus-visible, .tool .fdg-lie:focus-visible, .tool .fdg-pick:focus-visible, .tool .fdg-ab:focus-visible, .tool .fdg-vote:focus-visible, .tool .fdg-icon:focus-visible, .tool .fdg-topics button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .fdg-score { text-align: center; font-size: 15px; font-weight: 900; color: rgb(var(--ink) / .7); font-variant-numeric: tabular-nums; white-space: pre; }

/* Two truths: write */
.tool .fdg-tt-rows { display: flex; flex-direction: column; gap: 8px; }
.tool .fdg-tt-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); transition: box-shadow .2s ease, background-color .2s ease; }
.tool .fdg-tt-row.is-lie { box-shadow: inset 0 0 0 2px #D93A3A; }
.tool .fdg-tt-n { flex: none; font-size: 14px; font-weight: 900; color: rgb(var(--ink) / .4); width: 14px; }
.tool .fdg-tt-row input { flex: 1; min-width: 0; box-shadow: none; padding: 8px 4px; background: transparent; }
.tool .fdg-tt-row input:focus-visible { box-shadow: none; }
.tool .fdg-tt-row:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.tool .fdg-tt-row.is-lie:focus-within { box-shadow: inset 0 0 0 2px #D93A3A; }
.tool .fdg-lie { flex: none; min-width: 56px; min-height: 40px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ink) / .45); background: var(--surface-2); transition: background-color .18s ease, color .18s ease, transform .16s ease-out; }
.tool .fdg-lie:active { transform: scale(.94); }
.tool .fdg-lie[aria-checked="true"] { background: #D93A3A; color: #fff; }
.tool .fdg-ideas { display: flex; flex-direction: column; gap: 8px; }
.tool .fdg-ideas-label { font-size: 13px; font-weight: 850; color: rgb(var(--ink) / .5); text-transform: uppercase; letter-spacing: .05em; }
.tool .fdg-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.tool .fdg-topics button { min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 14px; font-weight: 750; color: rgb(var(--ink) / .75); background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); transition: transform .16s ease-out; }
.tool .fdg-topics button:active { transform: scale(.96); }
.tool .fdg-topics .fdg-more { width: 36px; padding: 0; display: grid; place-items: center; }
.tool .fdg-more .tool-icon { width: 18px; height: 18px; }

/* Two truths: guess */
.tool .fdg-picks { display: flex; flex-direction: column; gap: 10px; }
.tool .fdg-pick { position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; border-radius: 22px; text-align: left; background: var(--surface); box-shadow: var(--shadow); font-size: 18px; line-height: 25px; font-weight: 800; color: rgb(var(--ink)); transition: transform .16s ease-out, background-color .25s ease, box-shadow .25s ease; }
.tool .fdg-pick:active { transform: scale(.98); }
.tool .fdg-pick-n { flex: none; width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-size: 14px; font-weight: 900; background: var(--surface-2); color: var(--link); }
.tool .fdg-pick.is-true { background: rgb(31 157 99 / .1); box-shadow: inset 0 0 0 2px rgb(31 157 99 / .5); }
.tool .fdg-pick.is-lie { background: rgb(217 58 58 / .1); box-shadow: inset 0 0 0 2px #D93A3A; }
.tool .fdg-pick.is-picked { transform: scale(1.02); }
.tool .fdg-pick[aria-disabled="true"] { cursor: default; }
.tool .fdg-tag { margin-left: auto; flex: none; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; color: #fff; background: #1F9D63; animation: card-in .3s var(--ease-out) both; }
.tool .fdg-pick.is-lie .fdg-tag { background: #D93A3A; }
.tool .fdg-result { font-size: 17px; line-height: 25px; font-weight: 800; color: rgb(var(--ink)); }
.tool .fdg-result:empty { display: none; }

/* Rapid fire */
.tool .fdg-rf-intro, .tool .fdg-rf-res { align-items: center; text-align: center; padding: 20px 8px; }
.tool .fdg-60 { color: var(--link); }
.tool .fdg-rf-intro .tool-actions, .tool .fdg-rf-res .tool-actions { width: 100%; max-width: 360px; justify-content: center; }
.tool .fdg-rf-top { display: flex; justify-content: space-between; align-items: baseline; }
.tool .fdg-secs { font-size: 32px; line-height: 40px; font-weight: 950; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .fdg-cnt { font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .55); font-variant-numeric: tabular-nums; }
.tool .fdg-bar { height: 8px; border-radius: 4px; background: rgb(var(--ink) / .08); overflow: hidden; }
.tool .fdg-bar span { display: block; height: 100%; background: var(--ramp); border-radius: 4px; transform-origin: left; transition: transform .2s linear; }
.tool .fdg-rf-card { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }
.tool .fdg-rf-card.is-new .fdg-ab { animation: fdg-in .18s var(--ease-out) both; }
@keyframes fdg-in { from { opacity: .3; transform: translateY(6px) scale(.98); } }
.tool .fdg-ab { min-height: 112px; padding: 16px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); font-size: 24px; line-height: 30px; font-weight: 900; letter-spacing: -.01em; color: rgb(var(--ink)); text-wrap: balance; transition: transform .1s ease-out, background-color .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.tool .fdg-ab:active { transform: scale(.96); background: rgb(var(--accent) / .14); }
.tool .fdg-or { text-align: center; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--ink) / .4); }
@media (min-width: 600px) { .tool .fdg-rf-card { grid-template-columns: 1fr auto 1fr; } .tool .fdg-ab { min-height: 180px; } }
.tool .fdg-diffs { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.tool .fdg-diffs li { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px; border-radius: 16px; background: var(--surface); font-size: 15px; line-height: 21px; }
.tool .fdg-diffs b { display: block; font-size: 12px; font-weight: 850; color: rgb(var(--ink) / .5); text-transform: uppercase; letter-spacing: .04em; }

/* Cards: 21 questions and flags */
.tool .fdg-card { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 240px; text-align: left; place-items: stretch; }
.tool .fdg-card-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: -8px -8px 0 0; }
.tool .fdg-count, .tool .fdg-agree { font-size: 13px; font-weight: 850; color: rgb(var(--ink) / .5); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tool .fdg-q { font-size: 24px; line-height: 32px; font-weight: 900; letter-spacing: -.01em; color: rgb(var(--ink)); text-wrap: balance; }
.tool .fdg-turn { font-size: 15px; line-height: 21px; font-weight: 700; color: rgb(var(--ink) / .6); }
.tool .fdg-lead { font-size: 14px; font-weight: 850; color: var(--link); text-transform: uppercase; letter-spacing: .05em; margin-bottom: -6px; }
.tool .fdg-icon { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: none; color: rgb(var(--ink) / .4); transition: transform .16s ease-out, color .15s ease; }
.tool .fdg-icon:active { transform: scale(.88); }
.tool .fdg-icon[aria-pressed="true"] .tool-icon { fill: currentColor; }
.tool .fdg-card.is-end { background: var(--ramp); }
.tool .fdg-card.is-end .fdg-q, .tool .fdg-card.is-end .fdg-turn, .tool .fdg-card.is-end .fdg-count { color: #fff; }
.tool .fdg-nav { flex-direction: row-reverse; justify-content: flex-start; }
.tool .fdg-votes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool .fdg-votes.is-flip { animation: fdg-in .25s var(--ease-out) both; }
.tool .fdg-vote { min-height: 64px; border-radius: 22px; font-size: 18px; font-weight: 900; color: #fff; transition: transform .12s ease-out, filter .15s ease; -webkit-tap-highlight-color: transparent; }
.tool .fdg-vote:active { transform: scale(.96); }
.tool .fdg-vote.is-red { background: #D93A3A; }
.tool .fdg-vote.is-green { background: #1F9D63; }
.tool .fdg-reveal { display: flex; flex-direction: column; gap: 8px; }
.tool .fdg-rv { display: flex; flex-wrap: wrap; gap: 8px; }
.tool .fdg-chip { padding: 8px 14px; border-radius: 16px; font-size: 15px; font-weight: 850; color: #fff; animation: card-in .3s var(--ease-out) both; }
.tool .fdg-chip.is-r { background: #D93A3A; }
.tool .fdg-chip.is-g { background: #1F9D63; }
.tool .fdg-chip + .fdg-chip { animation-delay: .08s; }
.tool .fdg-take { font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .55); }

@media (max-width: 599px) {
  .tool .fdg-q { font-size: 21px; line-height: 29px; }
  .tool .fdg-nav { flex-direction: column; }
  .tool .fdg-pl-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .fdg-rf-card.is-new .fdg-ab, .tool .fdg-votes.is-flip, .tool .fdg-chip, .tool .fdg-tag { animation: none; }
  .tool .fdg-bar span { transition: none; }
}
/* Four games: a 2x2 picker on phones so every game is visible without sideways scrolling */
@media (max-width: 599px) {
  .tool.fdg .fdk-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .tool.fdg .fdk-tabs button { white-space: normal; line-height: 18px; padding: 8px 10px; }
}
/* Round 2: one-row tabs, names toggle, dark cards, best score */
.tool.fdg .fdk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
.tool.fdg .fdk-tabs button { white-space: nowrap; padding: 0 6px; font-size: 14px; }
.tool .fdg-descrow { display: flex; flex-direction: column; gap: 2px; }
.tool .fdg-desc { min-height: 0; }
.tool .fdg-names { align-self: flex-start; min-height: 36px; padding: 0; font-size: 14px; }
.tool .fdg-best { font-size: 14px; font-weight: 850; color: var(--link); }
.tool .fdg-q21 .fdg-subactions .fdg-textbtn { color: rgb(var(--ink) / .6); }
@media (prefers-color-scheme: dark) {
  .tool .fdg-ab, .tool .fdg-pick, .tool .fdg-card { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .14), var(--shadow); }
}
@media (max-width: 599px) { .tool.fdg .fdk-tabs button { font-size: 13px; } }
.tool .fdg-votes { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tool .fdg-vote { font-size: 16px; padding: 0 6px; }
.tool .fdg-vote.is-beige { background: #C9B48A; color: #2A1F0A; }
.tool .fdg-chip.is-b { background: #C9B48A; color: #2A1F0A; }
.tool .fdg-topics button { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tool .fdg-topic-tag { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 850; padding: 4px 8px; border-radius: 10px; background: rgb(var(--accent) / .14); color: var(--link); }
.tool .fdg-321 { font-size: 96px; line-height: 100px; color: var(--link); }
.tool .fdg-speed { font-size: 16px; font-weight: 850; color: rgb(var(--ink) / .8); }
.tool .fdg-rv .fdg-chip { pointer-events: none; }
.tool .fdg-rf-card.is-together .fdg-ab { min-height: 84px; cursor: default; }
.tool .fdg-rf-card.is-together .fdg-ab:disabled { opacity: 1; color: rgb(var(--ink)); }
.tool .fdg-same { grid-template-columns: 1fr 1fr; }
.tool .fdg-diffs li.fdg-split { display: block; font-weight: 800; }
.tool .fdg-stage { min-height: 0; }
.tool .fdg-rf-intro { padding: 8px 0; }
.tool .fdg-vote.is-match { background: rgb(var(--accent)); color: #fff; }
.tool .fdg-vote.is-split { background: var(--surface); color: rgb(var(--ink)); box-shadow: inset 0 0 0 2px rgb(var(--accent) / .4); }
.tool .fdg-q21 .fdg-subactions { gap: 8px; }
.tool .fdg-skip { min-height: 44px; padding: 0 18px; width: auto; }
.tool .fdg-subactions .fdg-link { font-size: 14px; }
/* Round 7: mode switch, scoreboard, flat together labels, tonal same/different, pass screen, video send row */
.tool .fdg-head { display: flex; align-items: center; gap: 12px; }
.tool .fdg-head .fdg-names { align-self: center; flex: none; margin-left: auto; padding: 0 4px; }
.tool .fdg-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 20px; background: rgb(var(--ink) / .06); width: 100%; }
.tool .fdg-seg button { min-height: 38px; padding: 0 10px; border-radius: 16px; font-size: 14px; font-weight: 800; background: transparent; box-shadow: none; color: rgb(var(--ink) / .65); white-space: nowrap; }
.tool .fdg-seg button[aria-pressed="true"] { background: var(--surface); color: rgb(var(--ink)); box-shadow: 0 1px 3px rgb(var(--ink) / .14); }
.tool .fdg-head .fdg-mode { flex: 1 1 auto; width: auto; max-width: 340px; }
.tool .fdg-modenote { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--link); }
.tool .fdg-say { font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .5); font-style: italic; }
.tool .fdg-board { display: flex; align-items: center; gap: 8px; }
.tool .fdg-board-p { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .7); font-variant-numeric: tabular-nums; max-width: 40%; }
.tool .fdg-board-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool .fdg-board-p b { font-size: 17px; font-weight: 950; color: rgb(var(--ink)); }
.tool .fdg-board-p.is-lead { box-shadow: inset 0 0 0 2px rgb(var(--accent) / .55); }
.tool .fdg-board-reset { min-height: 36px; margin-left: auto; font-size: 13px; color: rgb(var(--ink) / .5); }
.tool .fdg-lowkey { align-self: center; font-size: 14px; color: rgb(var(--ink) / .6); }
.tool .fdg-rf-intro .fdg-seg { max-width: 360px; }
/* Together: options are flat labels to read out loud; Same and Different carry equal weight. */
.tool .fdg-rf-card.is-together .fdg-ab-label { display: grid; place-items: center; min-height: 92px; margin: 0; padding: 12px; border-radius: 22px; background: transparent; box-shadow: inset 0 0 0 2px rgb(var(--ink) / .1); text-align: center; }
.tool .fdg-rf-card.is-together.is-new .fdg-ab-label { animation: fdg-in .18s var(--ease-out) both; }
.tool .fdg-cue { text-align: center; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tool .fdg-cue.is-new { animation: fdg-cue 1.4s var(--ease-out) both; }
@keyframes fdg-cue { 0% { opacity: 0; transform: scale(.9); } 15% { opacity: 1; transform: scale(1.05); } 30%, 100% { opacity: 1; transform: none; } }
.tool .fdg-vote.fdg-tonal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgb(var(--accent) / .12); color: var(--link); box-shadow: inset 0 0 0 2px rgb(var(--accent) / .3); }
.tool .fdg-vote.fdg-tonal .tool-icon { width: 20px; height: 20px; }
/* Flags: card sized to its content; pass screen between the two votes */
.tool .fdg-card.fdg-flag { min-height: 0; justify-content: flex-start; gap: 10px; }
.tool .fdg-card.fdg-flag .fdg-lead { margin: 4px 0 -4px; }
.tool .fdg-pass { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 22px; background: rgb(var(--accent) / .1); text-align: center; }
.tool .fdg-pass .tool-actions { justify-content: center; }
.tool .fdg-card { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .06), var(--shadow); }
.tool .fdg-qcard.is-low { min-height: 200px; }
.tool .fdg-q21 .fdg-depth button { min-height: 36px; font-size: 14px; }
/* Video date send row */
.tool .fdg-sendrow { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tool .fdg-sendbtns .fdg-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tool .fdg-sendbtns .fdg-copy .tool-icon { width: 18px; height: 18px; }
.tool .fdg-sent { font-size: 14px; line-height: 20px; font-weight: 750; color: #1F9D63; text-align: center; }
.tool .fdg-sent:empty { display: none; }
/* Two truths: growing text fields, topic chips in one row on phones */
.tool .fdg-tt-row textarea { flex: 1; min-width: 0; resize: none; overflow: hidden; box-shadow: none; padding: 8px 4px; background: transparent; font: inherit; font-size: 16px; line-height: 22px; min-height: 38px; color: rgb(var(--ink)); }
.tool .fdg-tt-row textarea:focus-visible { box-shadow: none; outline: 0; }
.tool .fdg-tt-row { align-items: center; }
/* Tabs carry full names; on phones they may take two lines */
.tool.fdg .fdk-tabs button { white-space: normal; line-height: 17px; min-height: 44px; }
@media (max-width: 599px) {
  .tool.fdg .fdk-tabs button { font-size: 13px; padding: 0 4px; }
  .tool .fdg-topics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
  .tool .fdg-topics::-webkit-scrollbar { display: none; }
  .tool .fdg-topics button { flex: none; max-width: none; }
  .tool .fdg-head { gap: 6px; }
  .tool .fdg-seg button { padding: 0 6px; }
}
@media (prefers-color-scheme: dark) {
  .tool .fdg-seg button[aria-pressed="true"] { background: var(--surface-2); }
  .tool .fdg-rf-card.is-together .fdg-ab-label { background: transparent; box-shadow: inset 0 0 0 2px rgb(var(--ink) / .18); }
}
@media (prefers-reduced-motion: reduce) { .tool .fdg-cue.is-new, .tool .fdg-rf-card.is-together.is-new .fdg-ab-label { animation: none; } }
@media (max-width: 599px) {
  .tool.fdg .fdk-tabs { grid-template-columns: 1fr 1fr; gap: 4px; }
  .tool.fdg .fdk-tabs button { white-space: nowrap; min-height: 40px; font-size: 14px; }
}

/* Reflow at 320 px (WCAG 1.4.10): rows wrap instead of pushing past the screen edge. Wider screens are unchanged. */
@media (max-width: 374px) {
  .tool .fdg-head { flex-wrap: wrap; }
}