.matchmaking { color:#f3efe5; border:1px solid #a4f8d829; border-radius:16px; background:radial-gradient(ellipse at 0 100%,#224e443d,transparent 60%),#101c23; overflow:hidden; }
.matchmaking * { box-sizing:border-box; }
.matchmaking [hidden] { display:none!important; }
.matchmaking-heading { display:flex; justify-content:space-between; gap:24px; padding:25px 28px 22px; border-bottom:1px solid #a4f8d81c; align-items:center; }
.matchmaking-eyebrow { display:block; color:#cf9d72; font-size:11px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:7px; }
.matchmaking h2 { margin:0; font:500 29px var(--font-display,Optima,sans-serif); letter-spacing:-.035em; }
.matchmaking-activity { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 18px; font:12px var(--font-ui,sans-serif); color:#a8bdbb; }
.matchmaking-activity strong { font-weight:600; color:#f3efe5; }
.matchmaking-activity [data-estimate] { flex-basis:100%; text-align:right; font-size:11px; color:#91a8a7; }
.matchmaking-live { display:inline-block; width:6px; height:6px; border-radius:50%; background:#a4f8d8; margin-right:7px; box-shadow:0 0 8px #a4f8d844; }
.matchmaking-body { display:grid; grid-template-columns:1fr minmax(260px,.95fr); gap:32px; padding:27px 28px; }
.matchmaking-state { display:flex; align-items:center; gap:25px; align-self:center; min-height:150px; }
.matchmaking-orbit { display:grid; place-items:center; width:82px; height:82px; flex:0 0 82px; border:1px solid #cf9d7277; border-radius:50%; color:#cf9d72; font-size:36px; box-shadow:inset 0 0 0 8px #101c23,inset 0 0 0 9px #a4f8d82a,0 0 35px #a4f8d809; }
.matchmaking-state h3 { margin:0 0 9px; font:500 22px var(--font-display,Optima,sans-serif); letter-spacing:-.02em; color:#f3efe5; }
.matchmaking-state p { margin:0; color:#a4bab7; font:13px/1.6 var(--font-ui,sans-serif); max-width:30ch; }
.matchmaking-state.is-searching .matchmaking-orbit { animation:matchmaking-breathe 2.5s ease-in-out infinite alternate; }
.matchmaking-state.is-matched .matchmaking-orbit { color:#a4f8d8; border-color:#a4f8d8; }
.matchmaking-deck-label { display:grid; gap:9px; color:#c4d3cf; font-size:12px; }
.matchmaking select { width:100%; min-width:0; background:#080f14; color:#f3efe5; border:1px solid #54706b; border-radius:7px; min-height:44px; padding:10px; font:13px var(--font-ui,sans-serif); }
.matchmaking-deck-note { color:#9eb3ae; font-size:11px; line-height:1.5; margin:8px 0 14px; max-height:88px; overflow:auto; }
.matchmaking-preference { display:flex; gap:9px; align-items:center; color:#d3ddd5; font-size:12px; cursor:pointer; }
.matchmaking .matchmaking-preference input { width:17px; height:17px; min-height:0; padding:0; accent-color:#a4f8d8; }
.matchmaking-fallback { font-size:11px; color:#94aaa4; line-height:1.6; margin:8px 0 16px; }
.matchmaking-actions { display:flex; gap:12px; }
.matchmaking-primary,.matchmaking-secondary { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:11px 21px; border:1px solid #a4f8d8; border-radius:7px; font:600 13px var(--font-ui,sans-serif); cursor:pointer; text-decoration:none; }
.matchmaking-primary { background:#a4f8d8; color:#102d25!important; }
.matchmaking-secondary { background:transparent; color:#dce5de; border-color:#57716b; }
.matchmaking-primary:hover { background:#c7ffe8; }
.matchmaking button:disabled { opacity:.5; cursor:wait; }
.matchmaking :focus-visible { outline:2px solid #a4f8d8; outline-offset:4px; }
.matchmaking-error { padding:12px 16px; margin:0 28px 20px; background:#39291f; border:1px solid #cf9d7266; border-radius:7px; color:#f1d9c5; font-size:12px; line-height:1.6; }
.matchmaking-footer { padding:13px 28px; border-top:1px solid #a4f8d816; color:#93aaa3; font-size:10px; line-height:1.6; }
.matchmaking-footer a { color:#a4f8d8; text-decoration:underline; text-underline-offset:3px; }
@keyframes matchmaking-breathe { from { opacity:.55; } to { opacity:1; } }
@media(max-width:720px) { .matchmaking-heading { padding:22px 20px; align-items:start; flex-direction:column; gap:15px; } .matchmaking-activity { justify-content:start; } .matchmaking-activity [data-estimate] { flex-basis:auto; text-align:left; } .matchmaking-body { grid-template-columns:1fr; padding:20px; gap:20px; } .matchmaking-state { min-height:90px; gap:18px; } .matchmaking-orbit { width:65px; height:65px; flex-basis:65px; } .matchmaking-state p { max-width:none; } .matchmaking h2 { font-size:27px; } .matchmaking-actions>* { width:100%; } .matchmaking-error { margin-left:20px; margin-right:20px; } .matchmaking-footer { padding:13px 20px; } }
@media(prefers-reduced-motion:reduce) { .matchmaking *, .matchmaking *::before { animation:none!important; transition:none!important; } }