/* Generated gold oni armor and flame ornaments, inspired by the event logo. */
:root{--flame-divider:url('../img/ornaments/flame-divider-pc.webp')}
.hero{border-top:1px solid #c4914844}
.hero-inner{z-index:1}
.champion-ornament{position:absolute;z-index:1;pointer-events:none;width:100%;height:111%;top:-11%;left:-3%;opacity:.83;filter:drop-shadow(0 0 14px #db461f30);animation:gold-breath 7s ease-in-out infinite}
.champion-ornament img{height:100%;width:100%;object-fit:fill}
.champion-visual .orbit{opacity:.16}
.hero-grid{background-image:linear-gradient(90deg,transparent 49.9%,#f2c56b0d 50%,transparent 50.1%)}
.hero-copy h1{filter:drop-shadow(0 2px 14px #ff741622)}
.champion-jp{background-image:linear-gradient(160deg,#fff6d4 5%,#f0c56e 40%,#b87822 50%,#ffe8ac 83%)}
.champion-hall{border-image:linear-gradient(135deg,#dcb76a,#603513,#efce7a) 1;box-shadow:0 3px 20px #0005}
.section-heading{position:relative;border-bottom:0;padding-bottom:78px;margin-bottom:34px;isolation:isolate}
.section-heading:before{content:'';position:absolute;left:0;right:0;bottom:21px;height:1px;background:linear-gradient(90deg,#c39248aa,transparent 30%,transparent 70%,#c39248aa)}
.section-heading:after{content:'';position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:min(620px,85%);height:94px;background:var(--flame-divider) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 9px #dd3d1a26)}
.results{position:relative;isolation:isolate}
.results:before{content:'';position:absolute;inset:35px -100px -30px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 20%,#942a161b,transparent 55%)}
.rank-card{border-width:1px;box-shadow:inset 0 0 26px #b6893c0b,0 6px 20px #0002}
.rank-number{box-shadow:0 0 0 3px #171310,0 0 0 4px #a17c453b,0 5px 16px #0007}
.rank-2 .rank-number{box-shadow:0 0 0 3px #171310,0 0 0 4px #d8e2eb88,0 5px 16px #0007}
.rank-3 .rank-number{box-shadow:0 0 0 3px #171310,0 0 0 4px #ca8b5799,0 5px 16px #0007}
.button{background:linear-gradient(120deg,#a9651820,transparent 45%);border-image:linear-gradient(120deg,#c6934b,#614325,#c6934b) 1}
.button:hover{box-shadow:0 0 23px #b1762326}
.movie-frame{border:1px solid #ae7b35;box-shadow:0 0 0 5px #17100b,0 0 0 6px #7e542c,0 15px 50px #842e141c}
.movie-cover:before{border-color:#d5a24c88;inset:12px;box-shadow:inset 0 0 45px #7d2c111a}
.movie-cover:after{content:'';position:absolute;bottom:6px;left:50%;width:45%;height:70px;transform:translateX(-50%);background:var(--flame-divider) center/contain no-repeat;opacity:.6;pointer-events:none}
.about{padding-top:55px}
.about-copy h2{padding-bottom:22px;border-bottom:1px solid #b9823b66}
.battle-map{border-color:#a37436;box-shadow:0 0 0 4px #17100b,0 0 0 5px #6c4727}
.venue-group h3{background:linear-gradient(90deg,#b7863020,transparent 90%);padding-left:10px;border-bottom-color:#d5a457}
.venue-group h3:after{content:'◆';font-size:9px;color:#b48744;margin-left:5px}
.closing{position:relative;padding-top:102px;background:radial-gradient(ellipse at 50% 20%,#9b3d1828,transparent 65%);border-top:0}
.closing:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(800px,90%);height:108px;background:var(--flame-divider) center/contain no-repeat;pointer-events:none}
@keyframes gold-breath{0%,100%{filter:drop-shadow(0 0 12px #db461f30)}50%{filter:drop-shadow(0 0 22px #ff9a303f)}}
@media(max-width:1000px){.champion-ornament{left:-5%;width:104%}.section-heading:after{width:min(550px,85%)}}
@media(max-width:700px){
 :root{--flame-divider:url('../img/ornaments/flame-divider-sp.webp')}
 .champion-ornament{width:130%;height:111%;left:-34%;top:-7%;opacity:.67}
 .section-heading{padding-bottom:64px;margin-bottom:24px}
 .section-heading:after{width:100%;height:66px;bottom:-5px}
 .section-heading:before{bottom:18px;left:-4px;right:-4px}
 .movie-cover:after{height:38px;width:65%;bottom:0;opacity:.6}
 .movie-cover:before{inset:8px}
 .movie-frame{box-shadow:0 0 0 3px #17100b,0 0 0 4px #7e542c,0 12px 35px #842e141c}
 .about{padding-top:10px}
 .closing{padding-top:76px}.closing:before{height:76px;width:95%}
}
@media(prefers-reduced-motion:reduce){.champion-ornament{animation:none}}
/* Keep the artwork within the hero and fade it away from mobile copy. */
@media(min-width:701px){.champion-ornament{height:101%;top:-1%}}
@media(max-width:700px){
 .champion-ornament{opacity:.76;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#00000018 36%,#000000aa 64%,#000 88%);mask-image:linear-gradient(90deg,transparent 0%,#00000018 36%,#000000aa 64%,#000 88%)}
}

/* Use one shared center for the supplied frame and champion, including parallax. */
.champion-visual{--champion-center-x:50%;--champion-center-y:52%}
.champion-visual .champion-photo{left:var(--champion-center-x);top:var(--champion-center-y);bottom:auto;transform:translate(-50%,-50%) translateX(var(--portrait-x,0px))}
.champion-visual .champion-ornament{left:var(--champion-center-x);top:var(--champion-center-y);width:112%;max-width:800px;height:auto;aspect-ratio:5078/5179;transform:translate(-50%,-50%) translateX(var(--portrait-x,0px));transition:transform .4s ease-out;opacity:.88;-webkit-mask-image:none;mask-image:none}
.champion-ornament img{width:100%;height:100%;object-fit:contain}
@media(max-width:700px){
 .champion-visual{--champion-center-x:44%;--champion-center-y:51%}
 .champion-visual .champion-ornament{width:155%;opacity:.72;-webkit-mask-image:linear-gradient(90deg,transparent,#00000088 38%,#000 64%);mask-image:linear-gradient(90deg,transparent,#00000088 38%,#000 64%)}
}

/* Thick beveled metal frames for the silver and bronze podium cards. */
.rank-card.rank-2{
 border:8px solid #aab6c0;
 border-image:linear-gradient(135deg,#f9fcff 0%,#c3cdd6 16%,#687783 31%,#e8eef3 46%,#a1adb9 61%,#4b5964 78%,#e7eef5 100%) 1;
 box-shadow:inset 0 0 0 1px #ffffff66,inset 0 0 28px #0005,0 0 0 1px #283039,0 9px 25px #0007;
}
.rank-card.rank-3{
 border:8px solid #b77d4d;
 border-image:linear-gradient(135deg,#ffe0b8 0%,#d6a16f 16%,#714224 31%,#efbf8e 46%,#b57b4e 61%,#59331d 78%,#f0c597 100%) 1;
 box-shadow:inset 0 0 0 1px #efc39666,inset 0 0 28px #0005,0 0 0 1px #452b1c,0 9px 25px #0007;
}
.rank-2 .rank-info{border-top:2px solid #929fae}
.rank-3 .rank-info{border-top:2px solid #a76f45}
@media(max-width:700px){
 .rank-card.rank-2,.rank-card.rank-3{border-width:6px}
 .rank-2 .rank-info,.rank-3 .rank-info{border-top:0}
}