/* Shared look for the u11 guess games (engine-u11-guess-games.js). Tokens only, so dark mode works. */
.tool .g-screen { display: flex; flex-direction: column; }
.tool .g-screen > * { display: flex; flex-direction: column; gap: 16px; }
.tool .g-in { animation: g-in .32s var(--ease-out) both; }
@keyframes g-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Segmented tabs */
.tool .g-tabs { display: flex; padding: 4px; border-radius: 22px; background: rgb(var(--ink) / .06); gap: 4px; }
.tool .g-tabs button {
  flex: 1 1 0; min-height: 40px; padding: 0 12px; border-radius: 18px; font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .78);
  background: transparent; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tool .g-tabs button[aria-selected="true"] { background: var(--surface); color: rgb(var(--ink)); box-shadow: 0 1px 2px rgb(var(--ink) / .08), 0 4px 12px rgb(var(--ink) / .06); }
.tool .g-tabs button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

/* Score header */
.tool .g-scores { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .06); }
.tool .g-score { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 16px; min-width: 0; transition: background-color .2s ease; }
.tool .g-score.is-b { flex-direction: row-reverse; text-align: right; }
.tool .g-score.is-active { background: rgb(var(--accent) / .12); }
.tool .g-score-name { font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.tool .g-score-n { font-size: 24px; line-height: 28px; font-weight: 950; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); flex: none; display: inline-block; }
.tool .g-score-n.is-bump { animation: g-bump .4s var(--ease-out); }
@keyframes g-bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); color: var(--link); } 100% { transform: scale(1); } }
.tool .g-score-vs { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ink) / .35); }

/* Pass-the-phone curtain */
.tool .g-curtain { align-items: center; text-align: center; padding: 32px 16px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.tool .g-curtain .tool-sub { margin: 0; max-width: 360px; }
.tool .g-curtain .btn { min-width: 220px; }
.tool .g-curtain-mark { width: 56px; height: 56px; border-radius: 28px; display: grid; place-items: center; background: rgb(var(--accent) / .14); color: var(--link); }

/* Small round icon button */
.tool .g-icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; flex: none;
  background: transparent; color: rgb(var(--ink) / .6); transition: background-color .15s ease, color .15s ease, transform .2s var(--ease-out);
}
.tool .g-icon-btn:hover { background: rgb(var(--ink) / .06); color: rgb(var(--ink)); }
.tool .g-icon-btn:active { transform: scale(.96); }
.tool .g-icon-btn:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .g-icon-btn .tool-icon { width: 22px; height: 22px; }
.tool .g-fs { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; clip-path: polygon(0 0, 40% 0, 40% 20%, 60% 20%, 60% 0, 100% 0, 100% 40%, 80% 40%, 80% 60%, 100% 60%, 100% 100%, 60% 100%, 60% 80%, 40% 80%, 40% 100%, 0 100%, 0 60%, 20% 60%, 20% 40%, 0 40%); }

/* Eyebrow and pills */
.tool .g-eyebrow { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tool .g-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 850; background: rgb(var(--accent) / .14); color: var(--link); font-variant-numeric: tabular-nums; }

/* Correct-answer pulse */
.tool .g-cheer { animation: g-cheer .5s var(--ease-out); }
@keyframes g-cheer { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Result header */
.tool .g-result-big { font-size: 64px; line-height: 64px; font-weight: 950; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .g-ring { --p: 0; width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
  background: conic-gradient(rgb(var(--accent)) calc(var(--p) * 1%), rgb(var(--ink) / .08) 0); }
.tool .g-ring > div { width: 120px; height: 120px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; }
.tool .g-ring b { display: block; font-size: 40px; line-height: 44px; font-weight: 950; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .g-ring span { font-size: 13px; line-height: 16px; font-weight: 800; color: rgb(var(--ink) / .55); }

/* Fullscreen host view */
.tool.is-full, .tool .is-full { overflow: auto; background: var(--bg); padding: 32px; }

@media (prefers-reduced-motion: reduce) {
  .tool .g-in, .tool .g-score-n.is-bump, .tool .g-cheer { animation: none; }
}

/* The soft CTA shows on start and result screens only, not under every step of a game. */
.tool.is-playing > .tool-cta { display: none; }
/* Stronger secondary text than the kit default so hints pass WCAG AA on the lavender tool background. */
.tool.cq .tool-sub, .tool.nw .tool-sub, .tool.lm .tool-sub { color: rgb(var(--ink) / .74); }
.tool.cq .tool-hint, .tool.nw .tool-hint, .tool.lm .tool-hint, .tool.cq .tool-note, .tool.nw .tool-note, .tool.lm .tool-note { color: rgb(var(--ink) / .7); }
.tool.cq .tool-cta, .tool.nw .tool-cta, .tool.lm .tool-cta { color: rgb(var(--ink) / .72); font-size: 14px; line-height: 20px; }
@media (prefers-color-scheme: dark) {
  .tool.cq input, .tool.nw input, .tool.lm input { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .28); }
  .tool.cq input::placeholder, .tool.nw input::placeholder, .tool.lm input::placeholder { color: rgb(var(--ink) / .55); }
}

.tool.cq .tool-field > .tool-hint, .tool.nw .tool-field > .tool-hint, .tool.lm .tool-field > .tool-hint { margin-top: 2px; }
.tool .g-names { grid-template-columns: 1fr 1fr; }
/* Dark mode: selected segment looks like a selected chip (light fill, dark text), one selected style everywhere. */
@media (prefers-color-scheme: dark) { .tool .g-tabs button[aria-selected="true"] { background: rgb(var(--ink)); color: #12061F; } }