/* FINDING A MATCH, copied from Eddy's own mockup (2026-11-06). Painted pieces in assets/menu/match-search.
   The column is never wider than 56% of the screen's height, so tablets and wide windows keep the phone proportions;
   inside it every size is in cqw (1% of the column). */
.matchmaking-view{container-type:size;background:#0b1638 url('/assets/menu/match-search/background.webp') center top/cover no-repeat}
.ms-content{position:absolute;top:0;bottom:0;left:50%;width:min(100cqw,56cqh);transform:translateX(-50%);container-type:inline-size;display:flex;flex-direction:column;align-items:center;padding:max(4.6cqw,env(safe-area-inset-top)) 6cqw max(5cqw,env(safe-area-inset-bottom));text-align:center}
.ms-clock{display:flex;align-items:center;gap:2.4cqw;padding:1.1cqw 4.6cqw 1.1cqw 3.4cqw;border:.6cqw solid #eab83d;border-radius:99px;background:linear-gradient(#18306a,#0a173d);box-shadow:0 0 0 .4cqw #081130,inset 0 .4cqw #36579a,0 1cqw 2cqw #0009}
.ms-clock img{width:6.2cqw;filter:drop-shadow(0 .3cqw #0007)}
.ms-clock span{padding-left:2.6cqw;border-left:.3cqw solid #eab83d99;font:400 2.5cqw/1 'Lilita One',sans-serif;letter-spacing:.25cqw;color:#dbe7ff}
.ms-clock b{display:block;font:400 5.3cqw/1 'Lilita One',sans-serif;letter-spacing:.2cqw;color:#fff;margin-bottom:.2cqw}
.ms-heading{margin-top:4.4cqw}
.ms-heading h2{margin:0;font:400 11.8cqw/.94 'Lilita One',sans-serif;letter-spacing:.2cqw;color:#fff4de;-webkit-text-stroke:.3cqw #3b1d07;paint-order:stroke fill;text-shadow:0 .8cqw #b57d3c,0 1.4cqw #2c1505,0 2cqw 3cqw #0009}
.ms-heading strong{display:block;font-weight:400;font-size:1.17em;color:#ffcd2c;text-shadow:0 .8cqw #e38a12,0 1.5cqw #4d2405,0 2.2cqw 3cqw #0009}
.ms-status{margin:1.8cqw 0 0;font:italic 700 3.5cqw 'DM Sans',sans-serif;color:#8ee1ff;text-shadow:0 .3cqw #06163a,0 0 2cqw #1b8fff66}
/* The stage: both stands, the crystal, and the blue waves between them */
.ms-stage{position:relative;flex-shrink:0;width:100cqw;aspect-ratio:100/40;margin-top:auto}
.ms-spot{position:absolute;bottom:4%;width:33%;z-index:1}.ms-you{left:5%}.ms-foe{right:5%}
.ms-pedestal{display:block;width:100%}
.ms-fighter{position:absolute;left:50%;bottom:58%;width:82%;aspect-ratio:1;transform:translateX(-50%);display:grid;place-items:center}
.ms-fighter .ball-art{width:160%;height:160%;max-width:none;filter:drop-shadow(0 1.4cqw 1cqw #000a)}
.ms-bubble{position:absolute;left:50%;bottom:54%;width:70%;aspect-ratio:1;translate:-50% 0;display:grid;place-items:center;animation:ms-float 3s ease-in-out infinite}
.ms-bubble img{position:absolute;inset:0;width:100%;height:100%;opacity:.9;filter:drop-shadow(0 0 2.4cqw #2fc4ff99);animation:ms-glow 2s ease-in-out infinite}
.ms-bubble b{position:relative;font:400 14cqw/1 'Lilita One',sans-serif;color:#7ff2ff;text-shadow:0 .5cqw #0c5aa8,0 0 3cqw #44e3ff;animation:ms-ask 2s ease-in-out infinite}
.ms-tag,.ms-squad h3 span{position:relative;display:inline-block;padding:1.1cqw 5.2cqw 1.3cqw;font:400 4.3cqw/1 'Lilita One',sans-serif;letter-spacing:.2cqw;color:#fff;text-shadow:0 .3cqw #061030;background:linear-gradient(#ffe48a,#d18f1c);clip-path:polygon(2.4cqw 0,calc(100% - 2.4cqw) 0,100% 50%,calc(100% - 2.4cqw) 100%,2.4cqw 100%,0 50%);isolation:isolate}
.ms-tag:before,.ms-squad h3 span:before{content:'';position:absolute;inset:.55cqw;z-index:-1;background:linear-gradient(#1b3672,#0a1840);clip-path:polygon(2.1cqw 0,calc(100% - 2.1cqw) 0,100% 50%,calc(100% - 2.1cqw) 100%,2.1cqw 100%,0 50%)}
.ms-tag{position:absolute;left:50%;bottom:22%;translate:-50% 0;white-space:nowrap}
.ms-beacon{position:absolute;left:50%;bottom:6%;width:18%;translate:-50% 0;z-index:1;filter:drop-shadow(0 0 2.5cqw #27b8ff88);animation:ms-glow 2s ease-in-out infinite}
.ms-ripples{position:absolute;left:50%;bottom:7%;width:0;height:0}
.ms-ripples:before,.ms-ripples:after,.ms-ripples i{content:'';position:absolute;left:0;top:0;translate:-50% -50%;aspect-ratio:3.6;border:1cqw solid #b4f3ff;border-radius:50%;box-shadow:0 0 1.6cqw .5cqw #2ab8ff,inset 0 0 1.6cqw .5cqw #2ab8ff,0 0 5cqw #1a8cff88;pointer-events:none}
.ms-ripples:before{width:32cqw}.ms-ripples:after{width:50cqw;opacity:.65}
.ms-ripples i{width:68cqw;opacity:0;animation:ms-ripple 3s ease-out infinite}.ms-ripples i:nth-child(2){animation-delay:1s}.ms-ripples i:nth-child(3){animation-delay:2s}
.ms-arcs i{position:absolute;left:50%;bottom:22%;width:50%;aspect-ratio:2;margin-left:-25%;border:1cqw solid #a6efff;border-bottom:0;border-radius:999px 999px 0 0;box-shadow:0 -.4cqw 2.6cqw #22b4ffaa,inset 0 .4cqw 2cqw #22b4ff66;-webkit-mask:linear-gradient(#000 45%,transparent);mask:linear-gradient(#000 45%,transparent);transform-origin:50% 100%;opacity:0;pointer-events:none;animation:ms-arc 2.4s ease-out infinite}
.ms-arcs i:nth-child(2){animation-delay:1.2s}
/* Squad, tip and Cancel */
.ms-squad{margin-top:2cqw}
.ms-squad h3{margin:0 0 2.4cqw}.ms-squad h3 span{padding-inline:7cqw;font-size:4.8cqw}
#matchmaking-squad{display:flex;justify-content:center;gap:4.4cqw}
.match-squad-fighter{position:relative;display:block;width:13.6cqw;aspect-ratio:1;border:.7cqw solid #e7b440;border-radius:50%;background:radial-gradient(circle at 50% 45%,var(--fighter-color),#0c1c46 70%);box-shadow:0 0 0 .45cqw #0a1331,inset 0 0 1.6cqw #000a,0 1cqw 1.6cqw #0008}
.match-squad-fighter .ball-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22cqw;height:21cqw;max-width:none;filter:drop-shadow(0 .8cqw .6cqw #00112f88)}
.ms-tip{display:flex;align-items:center;gap:3.6cqw;width:100%;margin-top:3cqw;padding:2.6cqw 4cqw;border:.35cqw solid #6585c6aa;border-radius:3cqw;background:linear-gradient(120deg,#13275bdd,#0a173fdd);box-shadow:inset 0 .3cqw #4a6bb044,0 1cqw 2cqw #0007;text-align:left}
.ms-tip-icon{flex-shrink:0;display:grid;place-items:center;width:10cqw;aspect-ratio:1;border:.35cqw solid #7491cc;border-radius:2cqw;background:#0f1e4a}
.ms-tip-icon img{width:7cqw}
.ms-tip strong{font:400 4.6cqw/1 'Lilita One',sans-serif;letter-spacing:.2cqw;color:#ffcf3a;text-shadow:0 .3cqw #2a1605}
.ms-tip p{margin:1cqw 0 0;font:500 3.6cqw/1.25 'DM Sans',sans-serif;color:#eef3ff}
.ms-cancel{display:block;width:67cqw;min-height:44px;height:12.6cqw;margin-top:3.6cqw;border:.8cqw solid #ffd56a;border-radius:99px;background:linear-gradient(#ff7058,#f22d1f 45%,#c4150f);box-shadow:0 0 0 .6cqw #7a1d0d,inset 0 .8cqw #ffa08a,inset 0 -1.2cqw #9a120b,0 1.4cqw 2cqw #000a;font:400 9.4cqw/1 'Lilita One',sans-serif;letter-spacing:.3cqw;color:#fff4e0;text-shadow:0 .5cqw #8a1a0f}
.ms-cancel:hover{filter:brightness(1.1)}
/* Match found: the bubble flashes and the waves stop */
.loading-complete .ms-bubble{animation:ms-found .45s ease-out both}
.loading-complete .ms-ripples i,.loading-complete .ms-arcs i{animation-play-state:paused}
.online-locked-fighter{display:grid;place-items:center}.online-locked-fighter .ball-art{width:140px;height:125px}.online-match-note{text-align:center;font-size:10px;line-height:1.5;color:#bed8f7;margin:12px 0 2px}
@keyframes ms-ripple{0%{transform:scale(.3);opacity:0}20%{opacity:1}100%{transform:scale(1.05);opacity:0}}
@keyframes ms-arc{0%{transform:scale(.55);opacity:0}20%{opacity:1}100%{transform:scale(1.12);opacity:.12}}
@keyframes ms-float{50%{transform:translateY(-2.2cqw)}}
@keyframes ms-glow{50%{filter:drop-shadow(0 0 4cqw #4fd6ffcc) brightness(1.12)}}
@keyframes ms-ask{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
@keyframes ms-found{50%{transform:scale(1.18);filter:brightness(1.6)}100%{transform:scale(1.06);filter:brightness(1.25)}}
.reduce-motion .matchmaking-view *{animation:none!important}
.reduce-motion .ms-arcs i:first-child{opacity:.7}