#matching-screen{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    box-sizing:border-box;
    padding:28px 20px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 38%,rgba(108,76,128,.32),transparent 34%),
        linear-gradient(180deg,#171120 0%,#09070d 58%,#030205 100%);
    z-index:99999;
    color:#f1dfaa;
    text-align:center;
    font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
    opacity:0;
    pointer-events:none;
}
#matching-screen::before,
#matching-screen::after{
    content:"";
    position:absolute;
    inset:18px;
    border:1px solid rgba(225,190,101,.55);
    pointer-events:none;
}
#matching-screen::after{
    inset:25px;
    border-color:rgba(225,190,101,.18);
}
#matching-screen.show{
    display:flex !important;
    opacity:1 !important;
    pointer-events:auto !important;
    animation:matchingFadeIn .45s ease both;
}
.matching-crest{
    font-size:62px;
    line-height:1;
    color:#e6c66f;
    text-shadow:0 0 20px rgba(230,198,111,.38);
    margin-bottom:9px;
}
.matching-kicker{
    font-size:11px;
    letter-spacing:4px;
    color:rgba(241,223,170,.66);
    margin-bottom:12px;
}
#matching-screen h1{
    margin:0 0 12px;
    font-size:clamp(30px,6vw,48px);
    letter-spacing:.18em;
    font-weight:500;
}
#matching-opponent-name{
    min-height:26px;
    font-size:18px;
    letter-spacing:.12em;
    color:#fff3c8;
}
#matching-spinner{
    position:relative;
    width:104px;
    height:104px;
    margin:25px 0 22px;
    border:1px solid rgba(230,198,111,.24);
    border-radius:50%;
}
#matching-spinner::before,
#matching-spinner::after,
#matching-spinner span{
    content:"";
    position:absolute;
    border-radius:50%;
}
#matching-spinner::before{
    inset:8px;
    border:3px solid rgba(230,198,111,.15);
    border-top-color:#e6c66f;
    border-right-color:#9d7430;
    animation:matchingSpin 1.25s linear infinite;
}
#matching-spinner::after{
    inset:28px;
    border:1px solid rgba(230,198,111,.7);
    box-shadow:0 0 18px rgba(230,198,111,.25);
}
#matching-spinner span{
    inset:43px;
    background:#e6c66f;
    box-shadow:0 0 16px rgba(230,198,111,.75);
}
#matching-message{
    min-height:25px;
    font-size:15px;
    letter-spacing:.08em;
    color:rgba(255,244,209,.82);
}
.matching-progress-frame{
    width:min(430px,78vw);
    height:7px;
    padding:2px;
    margin-top:19px;
    border:1px solid rgba(230,198,111,.55);
    background:rgba(0,0,0,.42);
}
#matching-progress{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#8d6427,#f0d88b);
    box-shadow:0 0 12px rgba(230,198,111,.44);
    transition:width .8s ease;
}
.matching-seal{
    margin-top:21px;
    padding:7px 17px;
    border:1px solid rgba(230,198,111,.3);
    font-size:11px;
    letter-spacing:.25em;
    color:rgba(241,223,170,.52);
}
@keyframes matchingSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}
@keyframes matchingFadeIn{
    from{opacity:0}
    to{opacity:1}
}