/* A quiet KTV table scene; the cup and its orbit carry the waiting state. */
.match-preview { position:relative; display:flex; flex-direction:column; align-items:center; width:min(100%,520px); min-height:min(660px,calc(100svh - 40px)); margin:auto; padding:18px 16px 12px; color:#f1edff; text-align:center; }
.match-preview-stage { position:relative; flex-shrink:0; display:grid; place-items:center; width:min(100%,320px); height:230px; margin:0 auto 10px; isolation:isolate; }
.match-preview-stage::before { content:''; position:absolute; z-index:-1; inset:10px -12px 0; border-radius:50%; background:radial-gradient(ellipse at 50% 75%,#48bfc31b,transparent 65%); }
.match-preview-stage::after { content:''; position:absolute; z-index:-1; width:176px; height:27px; bottom:28px; border-radius:50%; background:#060b1ba1; box-shadow:0 0 35px 8px #0d1226; }
.match-preview-stage img { position:relative; z-index:1; width:166px; height:170px; margin-top:-8px; object-fit:contain; filter:drop-shadow(0 13px 12px #040715a3); }
.match-preview-stage.is-rolling img { transform-origin:50% 80%; animation:match-preview-shake 950ms ease-in-out both; }
.match-preview-stage.is-rolling::after { animation:match-preview-shadow 950ms ease-in-out both; }
.match-preview-halo { position:absolute; z-index:0; width:270px; height:270px; bottom:-77px; border:1.5px solid #74d5df37; border-top:2px solid #a1f6f1c9; border-left-color:#7ae2e488; border-radius:50%; transform:rotateX(70deg); box-shadow:0 0 18px #64bfc529,inset 0 0 14px #67d4da1f; animation:match-preview-orbit 5s linear infinite; }
.match-preview-heading { margin:0; }
.game-lobby .match-preview-heading h2 { margin:0; color:#f1edff; font-size:clamp(27px,6vw,33px); line-height:1.3; font-weight:750; letter-spacing:.5px; }
.game-lobby .match-preview-heading p { margin:11px 0 0; color:#aaa5c4; font-size:12px; line-height:1.5; }
.match-preview-summary { display:flex; flex-direction:column; gap:8px; width:100%; margin:26px 0 22px; }
.match-preview-summary>strong { color:#cebfec; font-size:14px; line-height:1.4; font-weight:600; }
.game-lobby .match-preview-summary p { margin:0; color:#ada9c5; font-size:12px; line-height:1.5; }
.match-preview-summary b { padding:0 3px; color:#92e7e6; font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; }
.match-preview-rules { width:min(100%,380px); border-top:1px solid #b2a6d226; text-align:left; }
.match-preview-rules summary { display:flex; align-items:center; justify-content:space-between; min-height:45px; gap:12px; padding:10px 3px; color:#b2aec9; font-size:12px; line-height:1.5; list-style:none; cursor:pointer; }
.match-preview-rules summary::-webkit-details-marker { display:none; }
.match-preview-rules summary span { flex-shrink:0; width:7px; height:7px; margin-right:4px; border-right:1.5px solid #a8a6c0; border-bottom:1.5px solid #a8a6c0; transform:rotate(45deg); }
.match-preview-rules[open] summary span { transform:rotate(225deg); }
.game-lobby .match-preview .lobby-opening-rules { margin:0 0 12px; padding:7px 3px 8px; border:0; border-radius:0; background:transparent; }
.game-lobby .match-preview .lobby-opening-rules h3 { margin-bottom:8px; font-size:12px; }
.game-lobby .match-preview .lobby-opening-rules ul { color:#c7c0db; font-size:11px; }
.game-lobby .match-preview .lobby-opening-rules p { font-size:10px; }
.match-preview-actions { display:grid; place-items:center; width:100%; min-height:50px; margin:22px 0 0; }
.match-preview-actions button { width:min(100%,260px); min-height:48px; padding:12px 20px; border:1px solid #bca5da66; border-radius:13px; color:#e2d7f5; background:#27213c; font-size:14px; font-weight:600; cursor:pointer; }
.match-preview-actions>span { color:#aaa5c4; font-size:13px; }
.match-preview-actions button:focus-visible,.match-preview-rules summary:focus-visible { outline:2px solid #7ae2e4; outline-offset:4px; }
.game-lobby .match-preview-footnote { margin:17px 0 0; color:#9893ae; font-size:10px; line-height:1.6; }
.match-preview.is-paused .match-preview-halo { animation-play-state:paused; }
@keyframes match-preview-orbit { from { transform:rotateX(70deg) rotateZ(0deg); } to { transform:rotateX(70deg) rotateZ(360deg); } }
@keyframes match-preview-shake { 0%,100% { transform:translate(0,0) rotate(0deg); } 12% { transform:translate(-7px,-7px) rotate(-7deg); } 26% { transform:translate(9px,-12px) rotate(8deg); } 42% { transform:translate(-10px,-10px) rotate(-8deg); } 58% { transform:translate(8px,-8px) rotate(7deg); } 72% { transform:translate(-4px,-5px) rotate(-4deg); } 86% { transform:translate(2px,-2px) rotate(2deg); } }
@keyframes match-preview-shadow { 0%,100% { transform:scale(1); opacity:1; } 26%,58% { transform:scale(.9); opacity:.7; } }
@media (hover:hover) { .match-preview-actions button:hover { border-color:#c5b3e2; background:#302742; }.match-preview-rules summary:hover { color:#ddd4ef; } }
@media (max-width:350px),(max-height:640px) { .match-preview { min-height:0; padding:5px 12px 12px; }.match-preview-stage { height:176px; width:min(100%,280px); margin-bottom:6px; }.match-preview-stage img { width:133px; height:136px; }.match-preview-stage::after { width:143px; bottom:22px; height:23px; }.match-preview-halo { width:225px; height:225px; bottom:-66px; }.game-lobby .match-preview-heading h2 { font-size:27px; }.game-lobby .match-preview-heading p { margin-top:8px; font-size:11px; }.match-preview-summary { margin:20px 0 17px; gap:6px; }.match-preview-actions { margin-top:15px; }.game-lobby .match-preview-footnote { margin-top:13px; } }
@media (prefers-reduced-motion:reduce) { .match-preview-halo { animation:none; border-color:#74d5df66; border-top-color:#a1f6f1c9; }.match-preview-stage.is-rolling img,.match-preview-stage.is-rolling::after { animation:none; } }

/* Matching shares the bright lounge, while keeping the two-second shake and cancellation controls. */
.game-lobby .lobby-step-matching { background:linear-gradient(#f6ddfa70,#f4ddf5d9 58%,#fae9f8); }
.game-lobby .match-preview { color:#673080; padding-top:24px; }
.game-lobby .match-preview-stage::before { background:radial-gradient(ellipse at 50% 75%,#d97ade38,transparent 67%); }
.game-lobby .match-preview-stage::after { background:#a779b854; box-shadow:0 0 30px 9px #d6b2e369; }
.game-lobby .match-preview-stage img { filter:drop-shadow(0 10px 8px #8c589156); }
.game-lobby .match-preview-halo { border-color:#ce8cdf80; border-top-color:#fff3b9; border-left-color:#efb6fc; box-shadow:0 0 17px #d982e545,inset 0 0 15px #f6d7ff71; }
.game-lobby .match-preview-heading h2 { color:#6e328f; font-size:31px; font-weight:900; text-shadow:0 2px 0 #fff; }
.game-lobby .match-preview-heading p { color:#94669f; }
.game-lobby .match-preview-summary { margin:23px 0 20px; }
.game-lobby .match-preview-summary>strong { color:#8552a1; font-size:16px; font-weight:800; }
.game-lobby .match-preview-summary p { color:#9e72a9; }.game-lobby .match-preview-summary b { color:#a74bae; font-size:24px; }
.game-lobby .match-preview-rules { border-top-color:#d4b4df8c; }
.game-lobby .match-preview-rules summary { color:#8c5fa1; }
.game-lobby .match-preview-rules summary::before { content:'!'; width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border:1px solid #ce9ce0; border-radius:50%; background:#fff3fd; color:#9658b1; font-weight:900; }
.game-lobby .match-preview-rules summary span { margin-left:auto; border-color:#b182c3; }
.game-lobby .match-preview .lobby-opening-rules h3 { color:#8945a1; }.game-lobby .match-preview .lobby-opening-rules ul { color:#86608e; }.game-lobby .match-preview .lobby-opening-rules p { color:#a07aaa; }
.game-lobby .match-preview-actions button { min-height:49px; border:1px solid #f3d0ff; border-radius:18px; color:#fff6ff; background:linear-gradient(#c785eb,#9850c4); box-shadow:inset 0 2px 2px #e6b1fa,0 3px 0 #8550a5; font-weight:800; }
.game-lobby .match-preview-actions>span { color:#a477af; }
.game-lobby .match-preview-footnote { color:#a079ac; }
@media (max-height:640px) { .game-lobby .match-preview { padding-top:10px; }.game-lobby .match-preview-heading h2 { font-size:27px; }.game-lobby .match-preview-summary { margin:17px 0; } }