/* Ki vagyok? (whoami) — prefix wa- */
.board-frame.wa-frame {
  width: min(520px, 100cqw);
  display: flex; flex-direction: column; gap: 12px;
  touch-action: manipulation;               /* the page must scroll over the clue list */
}
.wa-frame input, .wa-frame .wa-suggest { user-select: text; -webkit-user-select: text; }

/* --- Progress --------------------------------------------------------------------- */
.wa-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.wa-count { font-weight: 500; font-size: .9rem; color: var(--muted); }
.wa-dots { display: flex; gap: 7px; }
.wa-dots i {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14);
  transition: background-color .25s, transform .35s var(--ease-spring), box-shadow .25s;
}
.wa-dots i.now { background: #fff; transform: scale(1.2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--game) 40%, transparent); }
.wa-dots i.ok { background: var(--good); }
.wa-dots i.bad { background: var(--danger); }

/* --- Finished people ------------------------------------------------------------------ */
.wa-done { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wa-done[hidden] { display: none; }
.wa-person {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
  background: color-mix(in srgb, var(--good) 11%, #1c1c1e);
}
.wa-person.wa-gave { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 9%, #1c1c1e); }
.wa-person.wa-pop { animation: wa-pop .5s var(--ease-spring); }
@keyframes wa-pop { from { transform: scale(.94); opacity: 0; } }
.wa-person-ico {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good); color: #000; font-weight: 650; font-size: .9rem;
}
.wa-gave .wa-person-ico { background: var(--danger); }
.wa-person-body { min-width: 0; line-height: 1.3; }
.wa-person-body b { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.wa-years { color: var(--muted); font-weight: 450; white-space: nowrap; }
.wa-desc { display: block; font-size: .86rem; color: rgba(255, 255, 255, .78); }
.wa-badge {
  display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 550; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent);
}
.wa-gave .wa-badge { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* --- The mystery card --------------------------------------------------------------------- */
.wa-card {
  position: relative; overflow: hidden;
  padding: 14px 14px 12px; border-radius: 22px;
  background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.wa-card[hidden] { display: none; }
/* A soft spotlight behind the avatar. */
.wa-card::before {
  content: ""; position: absolute; inset: -40% 40% 55% -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--game) 26%, transparent), transparent);
}
.wa-card > * { position: relative; z-index: 1; }
.wa-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wa-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 1.5rem; color: #fff;
  background: var(--game);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 4px color-mix(in srgb, var(--game) 22%, transparent);
  animation: wa-breathe 2.4s ease-in-out infinite alternate;
}
@keyframes wa-breathe { to { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 7px color-mix(in srgb, var(--game) 12%, transparent); } }
.wa-card-title { display: flex; flex-direction: column; line-height: 1.2; }
.wa-card-title b { font-weight: 600; font-size: 1.2rem; letter-spacing: -.03em; }
.wa-card-title small { color: var(--muted); font-weight: 450; font-size: .8rem; }

.wa-clues { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.wa-clues li {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px;
  border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: .97rem; line-height: 1.4;
}
.wa-clues li.wa-new { animation: wa-in .5s var(--ease-out); }
@keyframes wa-in { from { opacity: 0; transform: translateY(-6px) scale(.98); background: color-mix(in srgb, var(--game) 35%, transparent); } }
.wa-clue-n {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  font-size: .74rem; font-weight: 600; color: #fff; background: color-mix(in srgb, var(--game) 45%, transparent);
}
.wa-wrong { margin-top: 10px; font-size: .84rem; line-height: 1.6; color: var(--muted); }
.wa-wrong[hidden] { display: none; }
.wa-wrong-label { font-weight: 550; }
.wa-wrong s {
  display: inline-block; padding: 0 8px; margin: 0 2px; border-radius: 999px;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); text-decoration-thickness: 1.5px;
}

/* --- Guess input with suggestions ----------------------------------------------------------- */
.wa-form { display: flex; gap: 8px; align-items: stretch; }
.wa-form[hidden] { display: none; }
.wa-form.wa-shake { animation: fx-shake .42s cubic-bezier(.36, .07, .19, .97); }
.wa-field { position: relative; flex: 1; min-width: 0; }
.wa-frame .wa-input {
  width: 100%; height: 100%; min-height: 48px;
  font-size: max(16px, 1.02rem); font-weight: 550; color: #fff; /* below 16px iOS zooms in on focus */
  background: var(--field); border-radius: 999px; padding: 12px 18px;
}
.wa-frame .wa-input::placeholder { color: rgba(255, 255, 255, .4); }
.wa-frame .wa-input:focus { border-color: color-mix(in srgb, var(--game) 80%, #fff); box-shadow: 0 0 0 4px var(--accent-soft); background: rgba(255, 255, 255, .1); }
.wa-input:disabled { opacity: .6; }
.wa-go { flex: none; min-width: 84px; font-size: 1rem; font-weight: 600; }
/* Opens upwards: on a phone the keyboard covers whatever is below the input. */
.wa-suggest {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 5px; list-style: none;
  max-height: min(290px, 42svh); overflow-y: auto; overscroll-behavior: contain;
  background: #2c2c2e; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  box-shadow: 0 -14px 40px -12px rgba(0, 0, 0, .7);
  transform-origin: bottom center; animation: wa-up .22s var(--ease-out);
}
@keyframes wa-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.wa-suggest[hidden] { display: none; }
.wa-suggest li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background-color .12s;
}
.wa-suggest li[aria-selected="true"] { background: color-mix(in srgb, var(--game) 30%, transparent); }
.wa-s-name { font-weight: 450; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-s-name b { font-weight: 650; color: #fff; }
.wa-suggest small { flex: none; font-size: .76rem; color: var(--muted); font-style: italic; }
.wa-suggest li.wa-tried { opacity: .5; cursor: default; }
.wa-suggest .wa-none { color: var(--muted); font-weight: 500; cursor: default; justify-content: center; }

.wa-msg { min-height: 1.3em; margin: -4px 0 -6px; text-align: center; font-size: .88rem; font-weight: 550; color: var(--danger); opacity: 0; transition: opacity .2s; }
.wa-msg.wa-msg-on { opacity: 1; }

/* --- Clue / give-up buttons ---------------------------------------------------------------- */
.wa-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wa-actions[hidden] { display: none; }
.wa-actions .btn[hidden] { display: none; }
.wa-actions .btn { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 550; }
.wa-actions .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.wa-more { gap: 8px; }
.wa-cost {
  padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent);
}
.wa-actions .wa-giveup { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.wa-actions .wa-giveup:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 22%, transparent); }

@media (max-width: 380px) {
  .wa-card { padding: 12px 11px 10px; }
  .wa-clues li { font-size: .92rem; padding: 8px 9px; }
  .wa-go { min-width: 66px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-person.wa-pop, .wa-clues li.wa-new, .wa-form.wa-shake, .wa-avatar { animation: none; }
}
/* The shared shine stays put once it stops (repeating tile / tall boxes leave a grey band): fade it out. */