/* ============================================================================
   Dama Pa More — per-screen layout (composed from app.css atoms + tokens).
   ========================================================================== */

/* form input (onboarding, etc.) */
.input {
  width: 100%; height: 48px; padding: 0 var(--s-4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--text-strong); font-size: 16px; font-weight: 600;
}
.input:focus { border-color: var(--hairline); outline: none; }

/* ── BOARD SCREEN ─────────────────────────────────────────────────────────── */
.board-screen { background: linear-gradient(180deg, var(--night-900), var(--night-950)); }
.board-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-3)) var(--s-4) calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
  justify-content: center;
}
.board-hud { display: flex; align-items: center; gap: var(--s-3); }
.board-hud--top { justify-content: space-between; }
.board-hud .chip { flex: none; }

.pod { display: flex; align-items: center; gap: var(--s-2); padding: 6px 12px 6px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); }
.pod--me { border-color: rgba(40,194,160,.35); }
.pod.is-active { box-shadow: 0 0 0 2px var(--brass); border-color: var(--hairline); }
.pod__main { min-width: 0; }
.pod__name { font-weight: 800; font-size: 13px; color: var(--text-strong); line-height: 1; }
.pod__meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-top: 3px; }

.board-actions { display: flex; gap: var(--s-2); justify-content: center; }
.board-actions .btn { flex: 1; }

/* ── MATCHMAKING ──────────────────────────────────────────────────────────── */
.find-pulse { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.find-pulse::before, .find-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--jade); opacity: 0; animation: findPulse 1.8s var(--ease) infinite;
}
.find-pulse::after { animation-delay: .9s; }
.find-pulse__core { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; background: linear-gradient(180deg, var(--surface-3), var(--surface));
  border: 1px solid var(--hairline); box-shadow: var(--shadow-jade); }
@keyframes findPulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }

/* ── RESULTS ──────────────────────────────────────────────────────────────── */
.result-emblem { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
  font-size: 52px; background: radial-gradient(circle at 40% 30%, var(--surface-3), var(--surface));
  border: 2px solid var(--hairline); box-shadow: var(--shadow-lg); animation: floatIn var(--dur-slow) var(--ease-out) both; }
.result-emblem--jade  { box-shadow: var(--shadow-jade),  var(--shadow-lg); border-color: rgba(40,194,160,.5); }
.result-emblem--coral { box-shadow: var(--shadow-coral), var(--shadow-lg); border-color: rgba(242,107,78,.5); }
.result-emblem--brass { box-shadow: var(--shadow-brass), var(--shadow-lg); border-color: var(--hairline); }