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

.onb-input { width: 100%; height: 50px; padding: 0 var(--s-4); background: var(--sampaguita);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text); font-size: 16px; font-weight: 700; }
.onb-input:focus { border-color: var(--vermilion); outline: none; }

/* ── HOME catalog ─────────────────────────────────────────────────────────── */
.hero-tile { display: flex; text-align: left; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-xl);
  background: radial-gradient(120% 120% at 80% 10%, var(--felt-mid), var(--felt-deep) 70%);
  border: 1px solid rgba(231,169,40,.25); box-shadow: var(--shadow-md); overflow: hidden; position: relative; }
.hero-tile__art { position: absolute; right: -6px; bottom: -10px; font-size: 96px; opacity: .16; }
.hero-tile__body { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.hero-tile__play { align-self: flex-start; margin-top: 12px; }

.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.game-tile { position: relative; text-align: left; padding: var(--s-4); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 82%, #000), color-mix(in srgb, var(--accent) 55%, #000));
  border: 1px solid rgba(0,0,0,.15); box-shadow: var(--shadow-sm); min-height: 128px; display: flex; }
.game-tile__art { position: absolute; right: -4px; bottom: -8px; font-size: 62px; opacity: .18; }
.game-tile__body { display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
.game-tile__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--on-felt); }
.game-tile__sub { font-size: 11px; color: rgba(244,236,216,.75); }
.game-tile__play { align-self: flex-start; margin-top: auto; }

/* ── 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(--vermilion); 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: var(--sampaguita); border: 1px solid var(--hairline); box-shadow: var(--shadow-cta); }
@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(--sampaguita), var(--cream-dim)); border: 2px solid var(--hairline);
  box-shadow: var(--shadow-lg); animation: floatIn var(--dur-slow) var(--ease-out) both; }
.result-emblem--win { box-shadow: var(--shadow-gold), var(--shadow-lg); border-color: var(--gold); }
.result-emblem--lose { border-color: var(--line-strong); }