/* The game video is the background. The user's dim level remains on the vignette. */
#game{background:#000}
#game:not(.arcBattle167) .vignette{background-image:none!important;opacity:1}
#game:not(.arcBattle167) .vignette::after,#soloStage::before,#soloStage::after{content:none!important}

#result#result:not(:has(.matchFinalView.show)){
 background:linear-gradient(90deg,#0b082a44,#0a0b1c55 52%,#09051b15),
 url('Brand/neon-city-v169.webp') center/cover no-repeat,#090717!important;
}
#result#result:not(:has(.matchFinalView.show)) .resultCard{
 width:min(93vw,1660px)!important;min-height:0!important;
 grid-template-columns:minmax(0,1.67fr) minmax(240px,1fr)!important;
 grid-template-rows:auto auto auto;align-items:start;
 gap:clamp(6px,1.35vh,16px) clamp(12px,2.1vw,38px)!important;
 padding:2vh 1.5vw!important;
}
#result#result .arcResultTitle167{
 grid-row:1;min-height:clamp(54px,9.3vh,110px);padding:0 1vw;
 border:0;border-bottom:1px solid #9f54c5;filter:drop-shadow(0 2px 7px #8f2bac9c);
}
#result#result .arcResultTitle167 .arcBrand167{width:clamp(105px,21vw,360px)}
#result#result .arcResultTitle167 h2{font-size:clamp(26px,4vw,76px)}
#result#result .arcResultTitle167 h2 small{color:#e5c3f2}
#result#result:not(:has(.matchFinalView.show)) .resultData{
 grid-column:1;grid-row:2;gap:clamp(5px,.9vh,12px);
}
#result#result .resultTrackHeader,#result#result .resultScoreBox:has(#finalScore),
#result#result .resultJudges,#result#result .arcResultCombo167,#result#result .resultScoreBox:has(#accuracy){
 border:none!important;border-image:none!important;background:var(--result-panel) center/100% 100% no-repeat!important;
 box-shadow:none!important;padding:clamp(5px,1vh,12px) clamp(11px,1.65vw,30px)!important;
}
#result#result .resultTrackHeader,
#result#result .resultScoreBox:has(#finalScore),
#result#result .arcResultCombo167,
#result#result .resultScoreBox:has(#accuracy){--result-panel:url('ResultArt/score-v187.webp')}
#result#result .resultJudges{--result-panel:url('ResultArt/judgement-v187.webp')}
#result#result .resultTrackHeader img{width:clamp(48px,9vh,105px)}
#result#result .resultTrackHeader .resultSong{font-size:clamp(19px,2.7vw,50px)!important}
#result#result .resultScoreBox:has(#finalScore){min-height:clamp(72px,12vh,136px);justify-content:center}
#result#result .resultScoreBox:has(#finalScore) b{font-size:clamp(35px,5.5vw,103px)!important}
#result#result .resultJudges{padding-block:clamp(9px,1.3vh,18px)!important}
#result#result .resultJudge{padding:2px 7px!important}
#result#result:not(:has(.matchFinalView.show)) .resultHero{
 grid-row:2;grid-column:2;align-self:start;min-height:clamp(230px,49vh,570px)!important;margin-top:0;
}
#result#result:not(:has(.matchFinalView.show)) .resultHero::before{
 inset:0;background:url('ResultArt/crest-v187.webp') center/contain no-repeat;
 filter:none;
}
#result#result:not(:has(.matchFinalView.show)) .resultHero::after{top:1%}
#result#result:not(:has(.matchFinalView.show)) #grade{font-size:clamp(84px,12vw,218px)!important}
#result#result .arcResultActions167{grid-column:1/-1;grid-row:3;justify-content:flex-end;gap:1vw}
#result:has(.matchFinalView.show) .arcResultActions167{display:none}
#result#result .arcResultActions167 :is(.again,.arcButton167){
 border:0!important;border-image:none!important;min-height:clamp(44px,8vh,100px);
 background:var(--result-button) center/100% 100% no-repeat!important;
 flex:0 1 29%;font-size:clamp(12px,1.25vw,22px)!important;filter:none;
}
#result#result .arcResultActions167 .arcButton167{--result-button:url('ResultArt/action-v187.webp')}
#result#result .arcResultActions167 .again{--result-button:url('ResultArt/next-v187.webp');order:2}
#result#result .arcResultActions167 .arcButton167:last-child{order:-1}
#result#result .arcResultActions167 button:hover{filter:brightness(1.2)}
@media(max-width:900px){
 #result#result:not(:has(.matchFinalView.show)) .resultCard{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto auto}
 #result#result:not(:has(.matchFinalView.show)) .resultHero{grid-row:2;grid-column:1;min-height:155px!important}
 #result#result:not(:has(.matchFinalView.show)) #grade{font-size:80px!important}
 #result#result:not(:has(.matchFinalView.show)) .resultData{grid-row:3}
 #result#result .arcResultActions167{grid-row:4}
}
#result#result .resultTrackHeader,
#result#result .resultScoreBox:has(#finalScore),
#result#result .resultJudges{padding-inline:clamp(20px,4.5vw,86px)!important}
#result#result .resultTrackHeader{padding-block:clamp(14px,1.9vh,24px)!important}
#result#result .resultScoreBox:has(#finalScore){padding-block:clamp(11px,1.6vh,21px)!important}
#result#result .resultJudges{padding-block:clamp(17px,2.65vh,31px)!important}
#result#result .arcResultCombo167,#result#result .resultScoreBox:has(#accuracy){
 padding:clamp(9px,1.3vh,17px) clamp(15px,2vw,40px)!important;
}
#result#result .resultScoreBox:has(#accuracy) span{font-size:clamp(11px,.9vw,16px)}
#result#result .resultJudges h3{margin:0 0 4px}
/* Keep live content inside the opaque well of each sprite. */
#result#result .resultTrackHeader{padding-block:clamp(22px,2.9vh,42px)!important;min-width:0}
#result#result .resultTrackHeader img{width:clamp(42px,6.5vh,88px)}
#result#result .resultTrackHeader .resultSong{line-height:1.15;overflow-wrap:anywhere}
#result#result .resultScoreBox:has(#finalScore){
 padding-block:clamp(21px,2.9vh,42px)!important;min-height:clamp(110px,14vh,195px);
}
#result#result .resultScoreBox:has(#finalScore) b{font-size:clamp(34px,min(5.5vw,6.6vh),92px)!important;line-height:1}
#result#result .resultJudges{
 padding-block:clamp(24px,3.1vh,45px) clamp(31px,4.4vh,62px)!important;
}
#result#result .resultJudge{line-height:1.15}
#result#result .arcResultCombo167,#result#result .resultScoreBox:has(#accuracy){
 padding:clamp(12px,1.8vh,26px) clamp(23px,3vw,58px)!important;
}
#result#result .arcResultCombo167 b,#result#result #accuracy{
 font-size:clamp(18px,min(3vw,3.6vh),50px)!important;line-height:1
}
