/* BigPool UI refresh — play. Uses the shared design language from app.css (Oct 2026).
   Covers: /matchmaking (searching, bye, awaiting round) and the pre-match room in
   matchPage (opponent found → agree terms → Enter table). Not the result page. */

/* ---------- /matchmaking ---------- */
.matchmaking-page { display: grid; place-items: center; }
.mm-card {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(520px, 100%); padding: 26px 26px 22px; border-radius: 22px; text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(110% 60% at 50% 0%, rgba(104,211,145,0.13), transparent 62%), linear-gradient(180deg, #111712, #0b0f0c);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 70px -40px rgba(0,0,0,0.95);
}
.mm-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(104,211,145,0.7) 35%, rgba(217,180,93,0.55) 65%, transparent); }
.mm-card .matchmaking-kicker { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(104,211,145,0.25); background: rgba(104,211,145,0.07); color: var(--green-bright); font: 800 10.5px var(--font-heading); letter-spacing: 1.4px; }
.mm-card h1 { margin: 14px 0 6px; font: 900 clamp(28px, 5vw, 36px)/1.05 BigPoolDisplay, var(--font-heading); letter-spacing: -0.01em; }
.mm-card > p { max-width: 380px; min-height: 0; margin: 0 auto 18px; color: var(--text-soft); font-size: 14px; line-height: 1.55; }
.mm-card .btn { border-radius: 12px; min-height: 48px; }
.mm-card-static .btn { width: 100%; background: linear-gradient(180deg, #86e6a9, var(--green)); box-shadow: 0 14px 30px -14px rgba(104,211,145,0.8), inset 0 1px 0 rgba(255,255,255,0.4); }
.mm-badge { width: 72px; height: 72px; margin: 22px auto 4px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(104,211,145,0.4); background: radial-gradient(circle, rgba(104,211,145,0.18), rgba(10,14,11,0.9)); color: var(--green-bright); font: 900 28px var(--font-heading); box-shadow: 0 0 40px rgba(104,211,145,0.2); }

/* The radar: static grid of rings + crosshair, a rotating sweep, expanding pulse rings and blips. */
.mm-radar {
  position: relative; width: 224px; height: 224px; margin: 18px auto 12px; display: grid; place-items: center; border-radius: 50%;
  background:
    linear-gradient(rgba(104,211,145,0.12), rgba(104,211,145,0.12)) center / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(104,211,145,0.12), rgba(104,211,145,0.12)) center / 100% 1px no-repeat,
    repeating-radial-gradient(circle, transparent 0 36px, rgba(104,211,145,0.13) 36px 37px),
    radial-gradient(circle, rgba(104,211,145,0.08), rgba(104,211,145,0.015) 70%);
  box-shadow: inset 0 0 0 1px rgba(104,211,145,0.22), 0 0 60px -10px rgba(104,211,145,0.18);
}
.mm-ring { position: absolute; inset: 30%; border-radius: 50%; border: 1.5px solid rgba(104,211,145,0.55); opacity: 0; animation: mmRing 3s cubic-bezier(.2,.6,.3,1) infinite; }
.mm-ring:nth-child(2) { animation-delay: 1s; }
.mm-ring:nth-child(3) { animation-delay: 2s; }
.mm-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(104,211,145,0.38), rgba(104,211,145,0.08) 55deg, transparent 90deg); -webkit-mask: radial-gradient(circle, transparent 0 27%, #000 28%); mask: radial-gradient(circle, transparent 0 27%, #000 28%); animation: mmSpin 3.2s linear infinite; }
.mm-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(217,180,93,0.9); opacity: 0; animation: mmBlip 3.2s ease-out infinite; }
.mm-blip:nth-of-type(1) { top: 18%; left: 70%; animation-delay: .35s; }
.mm-blip:nth-of-type(2) { top: 72%; left: 78%; animation-delay: 1.15s; }
.mm-blip:nth-of-type(3) { top: 64%; left: 16%; animation-delay: 2.2s; }
.mm-me { position: relative; z-index: 1; border-radius: 50%; }
.mm-me .avatar { width: 92px; height: 92px; font-size: 26px; border: 0; box-shadow: 0 0 0 3px #0b0f0c, 0 0 0 5px rgba(104,211,145,0.75), 0 0 40px rgba(104,211,145,0.4); }
.mm-you { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mm-you strong { font: 800 15px var(--font-heading); }
.mm-you .rating-chip { height: 24px; }

.mm-card .matchmaking-status { width: min(320px, 100%); min-height: 44px; margin: 0 auto 14px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.mm-card .matchmaking-status b { font: 800 12px var(--font-heading); color: var(--text); text-align: left; }
.mm-card .matchmaking-status time { color: var(--gold); font: 900 16px BigPoolDisplay, var(--font-heading); font-variant-numeric: tabular-nums; }

.mm-tips { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); text-align: left; }
.mm-tips-label { padding: 3px 8px; border-radius: 999px; background: rgba(217,180,93,0.12); color: var(--gold); font: 800 9.5px var(--font-heading); letter-spacing: 1.4px; text-transform: uppercase; }
.mm-tips-track { display: grid; min-height: 38px; align-items: center; }
.mm-tips-track p { grid-area: 1 / 1; margin: 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.45; opacity: 0; animation: mmTip 15s infinite; }
.mm-tips-track p:nth-child(2) { animation-delay: 5s; }
.mm-tips-track p:nth-child(3) { animation-delay: 10s; }
.mm-cancel { width: 100%; border-color: rgba(255,255,255,0.1); color: var(--text-soft); }
.mm-cancel:hover { border-color: rgba(240,125,115,0.4); color: #ffb3ac; background: rgba(240,125,115,0.06); }

@keyframes mmRing { 0% { transform: scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(2.9); opacity: 0; } }
@keyframes mmSpin { to { transform: rotate(360deg); } }
@keyframes mmBlip { 0%, 100% { opacity: 0; transform: scale(.4); } 8% { opacity: 1; transform: scale(1.15); } 40% { opacity: 0; transform: scale(.8); } }
@keyframes mmTip { 0% { opacity: 0; transform: translateY(4px); } 3%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-4px); } }

@media (max-width: 720px) {
  .matchmaking-page { min-height: calc(100dvh - 150px); padding-top: 16px; }
  .mm-card { padding: 22px 16px 16px; border-radius: 20px; }
  .mm-radar { width: 196px; height: 196px; margin-top: 14px; background-size: 1px 100%, 100% 1px, auto, auto; }
  .mm-me .avatar { width: 80px; height: 80px; font-size: 22px; }
  .mm-card h1 { font-size: 28px; }
  .mm-card > p { font-size: 13.5px; }
}

/* ---------- Pre-match room (matchPage before the table opens) ---------- */
.prematch-card {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(620px, 100%); padding: 24px 24px 20px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(120% 60% at 50% 0%, rgba(104,211,145,0.13), transparent 62%), linear-gradient(180deg, #111712, #0b0f0c);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 70px -40px rgba(0,0,0,0.95);
}
.prematch-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(104,211,145,0.7) 35%, rgba(217,180,93,0.6) 65%, transparent); }
.prematch-card.is-pending { background: radial-gradient(120% 60% at 50% 0%, rgba(217,180,93,0.12), transparent 62%), linear-gradient(180deg, #121612, #0b0f0c); }
.prematch-card > .eyebrow { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(104,211,145,0.25); background: rgba(104,211,145,0.07); color: var(--green-bright); letter-spacing: 1.4px; }
.prematch-card > h1 { margin: 12px 0 0; font: 900 clamp(28px, 5vw, 38px)/1 BigPoolDisplay, var(--font-heading); letter-spacing: 0.5px; }

.prematch-card .versus-players { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin: 22px 0 16px; }
.prematch-card .versus-player { gap: 6px; min-width: 0; }
.prematch-card .versus-player .avatar { width: 78px; height: 78px; font-size: 22px; border: 0; box-shadow: 0 0 0 3px #0b0f0c, 0 0 0 5px rgba(217,180,93,0.7), 0 0 30px rgba(217,180,93,0.25); }
.prematch-card .versus-player.is-me .avatar { box-shadow: 0 0 0 3px #0b0f0c, 0 0 0 5px rgba(104,211,145,0.75), 0 0 30px rgba(104,211,145,0.3); }
.prematch-card .versus-player strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; font: 800 15px var(--font-heading); }
.prematch-card .pm-rating { font-size: 12px; }
.prematch-card .pm-rating b { color: var(--gold); font: 800 12.5px var(--font-heading); }
.prematch-card .agent-badge { border-radius: 999px; padding: 4px 8px; letter-spacing: 1px; }
.prematch-card .series-score { min-width: 0; margin-top: 2px; font: 900 30px/1 BigPoolDisplay, var(--font-heading); text-shadow: 0 0 22px rgba(217,180,93,0.3); }
.prematch-card.is-single .series-score { display: none; }
.prematch-card .versus-mark span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(217,180,93,0.45); background: radial-gradient(circle, rgba(217,180,93,0.2), rgba(10,14,11,0.92)); color: var(--gold); font: 900 16px BigPoolDisplay, var(--font-heading); box-shadow: 0 0 30px rgba(217,180,93,0.22); }

.prematch-card .pm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; font-size: 12px; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text-soft); font: 800 11px var(--font-heading); white-space: nowrap; }
.pm-chip em { color: var(--muted); font-style: normal; font-weight: 700; }
.pm-stake { border-color: rgba(217,180,93,0.4); background: rgba(217,180,93,0.08); font-size: 14px; }
.pm-stake .stake-mark .coin { width: 18px; height: 18px; }
.pm-stake .stake-mark small { display: none; }
.pm-free { border-color: rgba(104,211,145,0.3); background: rgba(104,211,145,0.08); color: var(--green-bright); }
.pm-pending { border-color: rgba(217,180,93,0.35); color: var(--gold); }
.prematch-card .pm-chips .status { height: 26px; min-height: 26px; border-radius: 999px; padding: 0 11px; font: 800 10px var(--font-heading); letter-spacing: 1.2px; text-transform: uppercase; }
.prematch-card .pm-chips .status-ready { border-color: rgba(104,211,145,0.3); background: rgba(104,211,145,0.12); color: var(--green-bright); }
.prematch-card .pm-chips .status-negotiating { border-color: rgba(217,180,93,0.3); background: rgba(217,180,93,0.08); color: var(--gold); }

/* Agree terms */
.prematch-card .quick-agreement { gap: 14px; width: 100%; margin: 0 0 16px; padding: 16px; border-radius: 16px; border: 1px solid rgba(217,180,93,0.25); background: radial-gradient(120% 120% at 100% 0%, rgba(217,180,93,0.1), transparent 55%), rgba(255,255,255,0.02); text-align: left; }
.prematch-card .quick-agreement .qa-head { display: grid; gap: 6px; }
.prematch-card .quick-agreement .eyebrow { color: var(--gold); }
.prematch-card .quick-agreement .qa-terms { display: flex; align-items: baseline; gap: 8px; font: 900 24px/1.1 BigPoolDisplay, var(--font-heading); color: var(--text); }
.prematch-card .quick-agreement .qa-terms .stake-mark { align-self: center; }
.prematch-card .quick-agreement .qa-terms .stake-mark .coin { width: 22px; height: 22px; font-size: 11px; }
.prematch-card .quick-agreement .qa-terms em { color: var(--muted); font: 700 13px var(--font-body); font-style: normal; }
.prematch-card .quick-agreement p { color: var(--text-soft); font-size: 13.5px; line-height: 1.5; }
.prematch-card .agreement-readiness { display: flex; flex-wrap: wrap; gap: 6px; }
.prematch-card .agreement-readiness span { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: var(--muted); font: 700 12px var(--font-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prematch-card .agreement-readiness span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.prematch-card .agreement-readiness span.ready { border-color: rgba(104,211,145,0.35); background: rgba(104,211,145,0.08); color: var(--green-bright); }
.prematch-card .agreement-readiness span.ready::before { background: var(--green); box-shadow: 0 0 8px rgba(104,211,145,0.8); }
.prematch-card .quick-agreement-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prematch-card .quick-agreement-actions .btn { min-height: 46px; border-radius: 12px; }
.prematch-card .quick-agreement-actions .btn:first-child { grid-column: 1 / -1; min-height: 50px; font-size: 15px; background: linear-gradient(180deg, #86e6a9, var(--green)); box-shadow: 0 12px 26px -14px rgba(104,211,145,0.8), inset 0 1px 0 rgba(255,255,255,0.4); }
.prematch-card .quick-agreement-actions .btn:only-child { grid-column: 1 / -1; }
.prematch-card .quick-agreement-actions .btn-ghost { border-color: rgba(255,255,255,0.1); }

/* Actions: one primary (Enter table), a quiet secondary row, report as a link. */
.prematch-card .match-entry-actions { display: grid; gap: 10px; margin: 0; justify-content: stretch; }
.prematch-card .match-entry-actions > .btn:not(.pm-report), .prematch-card .match-entry-actions > a.btn { min-height: 56px; border-radius: 14px; font-size: 17px; background: linear-gradient(180deg, #86e6a9, var(--green)); box-shadow: 0 16px 34px -14px rgba(104,211,145,0.85), inset 0 1px 0 rgba(255,255,255,0.4); }
.prematch-card.is-ready .match-entry-actions > a.btn, .prematch-card.is-ready .match-entry-actions > [data-enter-ai-match] { animation: pmReady 2.4s ease-in-out infinite; }
.pm-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.pm-secondary:empty { display: none; }
.pm-secondary .btn { min-height: 44px; border-radius: 12px; }
.pm-secondary .btn-secondary { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.prematch-card .pm-report { justify-self: center; min-height: 0; padding: 4px; border: 0; background: none; color: var(--muted); font: 600 12px var(--font-body); text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.prematch-card .pm-report:hover { background: none; color: var(--text-soft); }
.prematch-card .pm-note, .prematch-card .match-inactivity-note { margin: 12px auto 0; max-width: 460px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.prematch-card .match-inactivity-note { margin-top: 4px; }

/* Opponent found: the two seats slide together and the VS lands. Once per match. */
.prematch-card.is-intro .pm-left { animation: pmInLeft .65s cubic-bezier(.2,.8,.2,1) both; }
.prematch-card.is-intro .pm-right { animation: pmInRight .65s cubic-bezier(.2,.8,.2,1) both; }
.prematch-card.is-intro .versus-mark span { animation: pmVs .55s cubic-bezier(.3,1.6,.5,1) .4s both; }
.prematch-card.is-intro > .eyebrow, .prematch-card.is-intro > h1 { animation: pmFade .5s ease-out both; }
.prematch-card.is-intro .pm-chips, .prematch-card.is-intro .quick-agreement, .prematch-card.is-intro .match-entry-actions { animation: pmFade .5s ease-out .55s both; }
.prematch-card.is-intro::after { content: ""; position: absolute; left: 50%; top: 150px; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid rgba(217,180,93,0.7); z-index: -1; pointer-events: none; animation: pmBurst .9s ease-out .45s both; }

@keyframes pmInLeft { from { opacity: 0; transform: translateX(-40px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pmInRight { from { opacity: 0; transform: translateX(40px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pmVs { from { opacity: 0; transform: scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes pmFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pmBurst { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(6); } }
@keyframes pmReady { 0%, 100% { box-shadow: 0 16px 34px -14px rgba(104,211,145,0.85), inset 0 1px 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 16px 40px -10px rgba(104,211,145,1), 0 0 0 4px rgba(104,211,145,0.14), inset 0 1px 0 rgba(255,255,255,0.4); } }

@media (max-width: 720px) {
  .prematch-page { place-items: start center; padding-top: 16px; }
  .prematch-card { padding: 20px 14px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; }
  .prematch-card .versus-players { gap: 6px; margin: 18px 0 14px; }
  .prematch-card .versus-player .avatar { width: 64px; height: 64px; font-size: 18px; }
  .prematch-card .versus-player strong { font-size: 13.5px; }
  .prematch-card .versus-mark span { width: 44px; height: 44px; font-size: 13px; }
  .prematch-card .series-score { font-size: 24px; }
  .prematch-card .pm-chips { display: flex; gap: 6px; }
  .prematch-card .quick-agreement { padding: 14px 12px; }
  .prematch-card .quick-agreement .qa-terms { font-size: 21px; }
  .prematch-card .agreement-readiness span { padding: 6px 10px; font-size: 11.5px; }
  .prematch-card .quick-agreement-actions .btn:not(:first-child) { font-size: 13px; padding: 0 8px; }
  .prematch-card .quick-agreement-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prematch-card .quick-agreement-actions .btn { width: auto; }
  .prematch-card.is-intro::after { top: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-ring, .mm-blip { animation: none; opacity: 0; }
  .mm-ring:nth-child(1) { opacity: .5; transform: scale(1.6); }
  .mm-sweep { animation: none; }
  .mm-tips-track p { animation: none; }
  .mm-tips-track p:first-child { opacity: 1; }
  .prematch-card.is-intro .pm-left, .prematch-card.is-intro .pm-right, .prematch-card.is-intro .versus-mark span,
  .prematch-card.is-intro > .eyebrow, .prematch-card.is-intro > h1, .prematch-card.is-intro .pm-chips,
  .prematch-card.is-intro .quick-agreement, .prematch-card.is-intro .match-entry-actions,
  .prematch-card.is-ready .match-entry-actions > a.btn, .prematch-card.is-ready .match-entry-actions > [data-enter-ai-match] { animation: none; }
  .prematch-card.is-intro::after { display: none; }
}