/* Arena matchmaking: the same cream, mint and soft toy materials as the lobby. */
.match-overlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:12px;background:#263e3c85;backdrop-filter:blur(7px);color:#244e4c;font-family:Nunito,sans-serif;isolation:isolate}
.match-overlay *{box-sizing:border-box}.match-overlay img{object-fit:contain;pointer-events:none}.match-sheet{position:relative;width:100%;max-width:580px;height:min(92dvh,830px);max-height:calc(100dvh - 24px);border-radius:30px;background:#f8f2e5;box-shadow:0 18px 70px #203b4530;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;padding:30px 24px 22px;text-align:center}.match-sheet::-webkit-scrollbar{display:none}.match-sheet h2,.match-sheet h3,.match-sheet p{margin:0}.match-sheet header>span{font-size:10px;font-weight:900;letter-spacing:2px;color:#87927e}.match-sheet h2{font-size:31px;font-weight:900;line-height:1.15;margin:10px 0}.match-subtitle{font-size:14px;color:#789085;line-height:1.45;min-height:40px}.match-stage{position:relative;display:grid;place-items:center;flex:1;min-height:290px;padding:25px 0 45px}.match-island{position:absolute;width:85%;height:290px;left:7.5%;bottom:-28px;opacity:.2;filter:blur(1px)}.match-pair{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:22px;position:relative;z-index:1}.match-player{min-width:0;background:#e4f1e3;border:1px solid #d0e4d0;border-bottom:5px solid #c7dbc8;border-radius:24px;min-height:218px;padding:20px 7px 17px;display:flex;align-items:center;flex-direction:column;justify-content:center}.match-player.is-rival{background:#f9e9db;border-color:#efdbca}.match-player .identity-badge{display:block;position:relative;width:112px;height:112px;margin:0 auto 14px;flex:none}.match-player .identity-level{font-size:14px;width:29px;height:27px;min-width:0;line-height:24px;bottom:-1px}.match-player small{font-size:9px;font-weight:900;letter-spacing:1px;color:#7b9382;line-height:1.4}.match-player h3{font-size:18px;font-weight:900;line-height:1.2;margin-top:5px;max-width:100%;overflow-wrap:anywhere}.match-vs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-7deg);display:grid;place-items:center;width:49px;height:49px;z-index:3;background:#ffda62;border:4px solid #fff7df;border-radius:18px;box-shadow:0 4px 0 #ddbe6935;font-size:21px;font-weight:1000;color:#927034}.match-mystery{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:#fff6e7;position:relative;margin:0 auto 14px}.match-mystery>b{font-size:58px;font-weight:900;color:#dab177;animation:match-bob 2s ease-in-out infinite}.match-mystery>i{position:absolute;inset:-2px;border:3px dashed #e2c695;border-radius:50%;animation:match-spin 16s linear infinite}.match-mystery>span{position:absolute;width:22px;height:25px;background:#85d4c2;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);top:4px;right:4px;animation:match-bob 2s ease-in-out infinite reverse}.match-status{min-height:101px;padding:5px 8px 17px;position:relative}.match-status>b{display:block;font-size:15px;font-weight:900}.match-status time{display:inline-block;color:#8ba294;font-variant-numeric:tabular-nums;margin-left:7px}.match-status p{font-size:12px;line-height:1.55;color:#7b8d83;max-width:340px;margin:12px auto 0}.match-dots{display:flex;justify-content:center;gap:6px;margin-bottom:13px}.match-dots i{display:block;width:9px;height:10px;background:#5ebd9f;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);animation:match-dot 1.2s ease-in-out infinite}.match-dots i:nth-child(2){animation-delay:.15s;background:#ffcf60}.match-dots i:nth-child(3){animation-delay:.3s;background:#f59887}.match-ready{display:inline-flex;align-items:center;gap:6px;background:#d9eddd;border:1px solid #bdddc7;color:#3b876f;border-radius:12px;padding:8px 16px;font-size:14px;font-weight:900}.match-actions{display:grid;gap:9px;flex:none;min-height:105px;align-content:end}.match-actions button{font-family:inherit;font-weight:900;font-size:18px;width:100%;min-height:53px;border-radius:17px;cursor:pointer;padding:12px 14px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s}.match-primary{background:#ffda61;border:1px solid #efc34a;border-bottom:5px solid #dda931;color:#385440;box-shadow:inset 0 1px 0 #fff6ca}.match-secondary{background:#e7eee0;border:1px solid #d8e1d1;border-bottom:4px solid #cddbc9;color:#547c65}.match-actions .match-link{min-height:40px;padding:5px;background:transparent;border:0;font-size:14px;color:#859185}.match-count{display:grid;place-items:center;width:27px;height:27px;background:#efbd4380;border-radius:50%;font-size:16px;font-variant-numeric:tabular-nums}.match-actions>p{font-size:12px;color:#7d9084;line-height:1.5}.match-actions button:active{transform:translateY(2px)}.match-actions button:focus-visible{outline:3px solid #43b293;outline-offset:4px}.match-overlay[data-phase=found] .is-rival{border-color:#99cfb4;background:#e1f1e8;animation:match-found .4s cubic-bezier(.2,.8,.3,1.25)}.match-overlay[data-phase=found] .match-vs{background:#ffcf54;animation:match-vs .4s ease-out}.match-error{display:grid;place-items:center;width:42px;height:42px;margin:auto;background:#f2d9cb;color:#b87556;border-radius:50%;font-size:27px;font-weight:900}
@keyframes match-spin{to{transform:rotate(360deg)}}@keyframes match-bob{50%{transform:translateY(-5px)}}@keyframes match-dot{50%{transform:translateY(-5px);opacity:.5}}@keyframes match-found{from{transform:translateY(10px) scale(.92);opacity:.3}to{transform:none;opacity:1}}@keyframes match-vs{from{transform:translate(-50%,-50%) rotate(-7deg) scale(.7)}to{transform:translate(-50%,-50%) rotate(-7deg) scale(1)}}
@media(max-width:599px){.match-overlay{padding:0}.match-sheet{max-width:none;height:100dvh;max-height:100dvh;border-radius:0;padding:calc(32px + env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom))}.match-sheet h2{font-size:29px}.match-player{min-height:215px}.match-player .identity-badge,.match-mystery{width:106px;height:106px}.match-pair{gap:18px}.match-player h3{font-size:17px}.match-vs{width:43px;height:43px;font-size:18px}.match-stage{min-height:285px}}
@media(max-height:730px) and (max-width:599px){.match-sheet{padding-top:22px}.match-stage{min-height:235px;padding:15px 0}.match-player{min-height:200px}.match-status{min-height:84px;padding-bottom:8px}.match-actions{min-height:92px}.match-subtitle{font-size:12px;min-height:30px}}
@media(max-height:520px) and (min-width:600px){.match-sheet{max-width:800px;padding:20px;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto 1fr auto;gap:8px 24px}.match-sheet>header{grid-column:2}.match-sheet h2{font-size:25px;margin:6px 0}.match-subtitle{font-size:12px;min-height:0}.match-stage{grid-column:1;grid-row:1/4;min-height:0;padding:0;align-self:center}.match-player{min-height:207px}.match-player .identity-badge,.match-mystery{width:92px;height:92px}.match-status{grid-column:2;min-height:0;padding:6px 0}.match-status p{font-size:11px;margin-top:6px}.match-actions{grid-column:2;min-height:0;gap:4px}.match-actions button{min-height:44px;font-size:16px;padding:8px}.match-actions .match-link{min-height:30px}.match-island{height:220px;bottom:-35px}}
@media(prefers-reduced-motion:reduce){.match-overlay *{animation:none!important;transition:none!important}.match-overlay{backdrop-filter:none}}
.match-overlay .identity-disc{background:#d2ecdf;box-shadow:none}.match-overlay .identity-frame{filter:drop-shadow(0 2px 1px #b5a57955)}.match-overlay .identity-level{background:#ffdf83;border-color:#e6be5c;border-radius:8px;color:#4c603b;box-shadow:0 2px 0 #baa06455;padding:0}.match-overlay .identity-level>span{color:#4c603b;text-shadow:none}.match-overlay .identity-level>i{background:#a8ddbd;box-shadow:none}