/* ================================================================
   Acronyms — game-specific styles
   Shared design system (tokens, panels, buttons, pills, inputs,
   summary shell, share row) lives in games.css.
   ================================================================ */

/* ---- Acronym display — big centred letters ---- */
.acronym-display {
  text-align: center;
  padding: 1rem 0 .5rem;
}
.acronym-letters {
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--brand);
  line-height: 1.1;
  display: block;
}
.acronym-display .pub-pill {
  margin-top: .6rem;
  text-transform: capitalize;
}
/* Helper line directly under the acronym stays centred with it. */
.acronym-display + p { text-align: center; }

/* ---- Typing input row ---- */
.type-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.type-row .pub-btn { flex: 0 0 auto; }
.type-input {
  flex: 1;
  min-width: 200px;
  border-radius: var(--r-sm);
  border: 2px solid var(--line-input);
  padding: .7rem .85rem;
  background: var(--qa-option-bg);
  color: var(--qa-option-text);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s ease, background .15s ease;
}
.type-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.type-input:disabled { opacity: .6; }
.type-input.input-correct {
  border-color: color-mix(in srgb, var(--qa-correct) 65%, transparent);
  background: color-mix(in srgb, var(--qa-correct) 10%, transparent);
}
.type-input.input-incorrect {
  border-color: color-mix(in srgb, var(--qa-incorrect) 65%, transparent);
  background: color-mix(in srgb, var(--qa-incorrect) 10%, transparent);
}

/* ---- Hint box ---- */
.hint-box {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--r-sm);
  padding: .75rem .85rem;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.5;
  display: none;
}
.hint-box.hint-visible { display: block; }
.hint-box strong {
  display: block;
  margin-bottom: .25rem;
  font-weight: 700;
  color: var(--brand);
}
.hint-countdown {
  font-size: .8rem;
  color: var(--p-secondary);
  text-align: center;
}

/* ---- Answer feedback ---- */
.answer-correct,
.answer-incorrect {
  border-radius: var(--r-sm);
  padding: .75rem .85rem;
  font-weight: 700;
  font-size: .9rem;
}
.answer-correct {
  background: color-mix(in srgb, var(--qa-correct) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--qa-correct) 32%, transparent);
  color: var(--qa-correct);
}
.answer-incorrect {
  background: color-mix(in srgb, var(--qa-incorrect) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--qa-incorrect) 32%, transparent);
  color: var(--qa-incorrect);
}
.answer-correct .answer-detail,
.answer-incorrect .answer-detail {
  display: block;
  font-weight: 400;
  font-size: .875rem;
  margin-top: .25rem;
  color: var(--p-secondary);
}