@charset "UTF-8";
/* Storm, burning horizon and fractured rock, drawn entirely with CSS. */
:root{--accent:#3a91ff;--rgb:58,145,255}
.shell{background:#080c16}
.battle-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-3;background:radial-gradient(ellipse at 19% 35%,#244c7180,transparent 48%),linear-gradient(175deg,#07101f 8%,#172538 40%,#66342d 67%,#100d14 90%)}
.battle-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#03071180,transparent 22%,transparent 65%,#03050cb3),linear-gradient(90deg,transparent 35%,#05081478 75%);z-index:6}
.battle-clouds{position:absolute;inset:-12%;opacity:.8;background:radial-gradient(ellipse at 15% 23%,#080d19 3%,transparent 27%),radial-gradient(ellipse at 52% 20%,#030711 9%,transparent 32%),radial-gradient(ellipse at 82% 37%,#0a1020 3%,transparent 28%),radial-gradient(ellipse at 35% 40%,#4d719333,transparent 31%);animation:cloud-drift 28s ease-in-out infinite alternate}
.battle-glow{position:absolute;inset:22% -12% -15%;background:radial-gradient(ellipse at 25% 56%,#ffd38c9c,transparent 13%),radial-gradient(ellipse at 22% 67%,#ff69277a,transparent 33%),radial-gradient(ellipse at 78% 53%,#ff59353b,transparent 29%);filter:blur(14px)}
.battle-lightning{position:absolute;top:0;width:12%;height:57%;background:linear-gradient(#96d8ff,#e4f9ff 50%,#71adf7);clip-path:polygon(66% 0,53% 26%,67% 24%,40% 53%,53% 50%,16% 100%,34% 61%,21% 65%,49% 33%,37% 35%,57% 0);opacity:.66;filter:drop-shadow(0 0 12px #bce8ff)}
.lightning-left{left:12%;transform:rotate(7deg)}
.lightning-right{right:6%;height:43%;width:8%;transform:rotate(-15deg);opacity:.34}
.battle-ridge{position:absolute;inset:39% -2% 0;background:linear-gradient(160deg,#293345,#10141e 52%);clip-path:polygon(0 42%,5% 31%,8% 34%,13% 13%,16% 17%,18% 8%,21% 38%,27% 43%,31% 33%,37% 53%,43% 40%,49% 56%,55% 30%,61% 40%,66% 21%,69% 25%,73% 4%,76% 14%,80% 36%,84% 28%,90% 37%,94% 16%,100% 28%,100% 100%,0 100%)}
.ridge-far{opacity:.7;filter:blur(1px)}
.ridge-near{inset:50% -3% 0;transform:scaleX(-1);background:linear-gradient(165deg,#292129 3%,#0c111b 53%,#070a12);clip-path:polygon(0 28%,5% 42%,10% 29%,14% 50%,18% 44%,23% 64%,29% 54%,33% 72%,39% 59%,45% 79%,51% 70%,58% 77%,63% 60%,67% 66%,73% 39%,77% 48%,82% 29%,85% 32%,89% 10%,93% 17%,96% 0,100% 12%,100% 100%,0 100%)}
.battle-ground{position:absolute;inset:76% -25% -40%;transform:perspective(380px) rotateX(55deg);transform-origin:center top;background:linear-gradient(127deg,transparent 45%,#ffa76b80 45.2%,#ff572630 45.6%,transparent 46%),linear-gradient(43deg,transparent 55%,#e886534d 55.2%,transparent 55.7%),repeating-conic-gradient(from 12deg at 48% -10%,#0c111c 0deg 19deg,#604033 19.2deg 19.5deg,#080e18 19.7deg 37deg);box-shadow:0 -2px 55px #ff804636}
.battle-embers{position:absolute;inset:0;z-index:5}
.battle-embers i{position:absolute;left:var(--x,15%);bottom:-5%;width:3px;height:8px;border-radius:50%;background:#ffcf8c;box-shadow:0 0 7px #ff6327,0 0 16px #ff6327;transform:rotate(25deg);animation:ember-rise var(--duration,8s) linear infinite;animation-delay:var(--delay,-3s)}
.battle-embers i:nth-child(2){--x:24%;--delay:-6s;--duration:11s}.battle-embers i:nth-child(3){--x:36%;--delay:-1s;--duration:7s}.battle-embers i:nth-child(4){--x:48%;--delay:-5s;--duration:10s}.battle-embers i:nth-child(5){--x:59%;--delay:-2s;--duration:8s}.battle-embers i:nth-child(6){--x:70%;--delay:-9s;--duration:12s}.battle-embers i:nth-child(7){--x:81%;--delay:-4s;--duration:9s}.battle-embers i:nth-child(8){--x:93%;--delay:-7s;--duration:10s}.battle-embers i:nth-child(9){--x:5%;--delay:-4s;--duration:11s}.battle-embers i:nth-child(10){--x:30%;--delay:-8s;--duration:13s}.battle-embers i:nth-child(11){--x:64%;--delay:-3s;--duration:7s}.battle-embers i:nth-child(12){--x:85%;--delay:-6s;--duration:8s}
@keyframes ember-rise{0%{transform:translate3d(0,0,0) rotate(25deg);opacity:0}12%{opacity:.9}75%{opacity:.6}100%{transform:translate3d(65px,-80vh,0) rotate(55deg);opacity:0}}
@keyframes cloud-drift{to{transform:translate3d(3%,2%,0) scale(1.06)}}
.background-grid{opacity:.18}.speed-slashes{opacity:.38}
.stage-atmosphere{background:radial-gradient(ellipse at 57% 40%,rgba(var(--rgb),.18),transparent 61%)}
.art-region{inset:72px 4% calc(var(--hud-height,300px) + 52px) 12%;mask-image:none;clip-path:none;overflow:visible}
.art-image{object-fit:contain;opacity:1;filter:drop-shadow(0 12px 10px #0009) drop-shadow(0 0 23px rgba(var(--rgb),.25))}
.art-region:before,.art-shade{display:none}
.echo-art{inset:10% 38% 32% -15%;opacity:.09}.echo-art img{object-fit:contain}
.character-hud{gap:13px}
h1{flex-direction:column;align-items:flex-start;gap:0;font-size:clamp(38px,4.5vw,82px);letter-spacing:-.8px}
h1 .surname{font-family:"Arial Narrow",Arial,sans-serif;font-size:.27em;font-weight:700;letter-spacing:.15em;line-height:1.5}
.name-jp{gap:12px;margin-top:2px}.name-jp>span:first-child{font-family:inherit;font-size:22px;letter-spacing:2px}.name-jp>span:last-child{font-size:10px;letter-spacing:.3px}
.attributes{background:linear-gradient(110deg,#060b14f2,#0c1320cf);backdrop-filter:blur(8px)}
.selector{padding-top:72px;padding-bottom:16px;justify-content:flex-start;background:linear-gradient(90deg,transparent,#070c1659)}
.selector-heading{margin-bottom:16px}.selector h2{font-size:clamp(24px,2.9vw,52px)}
.eyebrow{margin-top:10px;letter-spacing:3px}
.shell .roster{--roster-columns:6;grid-template-columns:repeat(var(--roster-columns),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);flex:1;min-height:240px;max-height:51vh;gap:11px 9px;padding:2px 8px}
.shell .character-card{height:auto;min-height:0;max-height:none;background:radial-gradient(ellipse at 50% 38%,#3c516477,transparent 77%),linear-gradient(155deg,#1a2533e8,#0b101bfa);border-color:#8a9eaf66}
.shell .character-card img{width:100%;height:100%;margin:0;padding:6px 3px 27px;object-fit:contain;transform:skewX(7deg);filter:brightness(.84) saturate(.8);opacity:1}
.shell .character-card.active img{filter:brightness(1.06);transform:skewX(7deg) scale(1.035)}
.card-image-wrap:after{background:linear-gradient(0deg,#040813 0,#040813c9 15%,transparent 32%)}
.shell .card-details{left:2px;right:2px;bottom:8px;justify-content:center}
.shell .card-details strong{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:clamp(9px,.79vw,14px);font-style:normal;font-weight:700;letter-spacing:-.3px;white-space:nowrap;text-align:center}
.shell .card-details small{display:none}
.shell .card-marker{top:4px;left:4px;font-size:14px;padding:2px 4px}
.shell .card-no{top:5px;right:5px;font-size:8px;color:#c0c9d4}
.roster-caption{padding:10px 8px;font-size:10px}
.selection-readout{min-height:91px;margin-top:13px;padding:11px 17px}
.readout-main{margin-top:5px;gap:10px}.readout-main strong{font-size:clamp(16px,1.75vw,30px);letter-spacing:.3px}.readout-main>span{font-size:10px;letter-spacing:0}.readout-bottom{margin-top:8px}
.selection-readout .readout-image{object-fit:contain;left:45%;width:60%;opacity:.3}
.select-hint{margin-top:10px;font-size:10px}
.versus-picking .selection-readout{display:none}
.shell .versus-picks{margin-bottom:14px}
.selected-seal{top:11%;right:5%}
/* The same arena remains visible behind the two fighters. */
.vs-stage{background:#080c16}.vs-stage>.battle-scene{z-index:-2}
.vs-fighter{background:radial-gradient(ellipse at 50% 40%,rgba(var(--fighter-rgb),.16),transparent 68%)}
.vs-fighter-art{inset:8% 9% 29%;mask-image:none}
.vs-fighter-art img{object-fit:contain;filter:drop-shadow(0 12px 14px #0009) drop-shadow(0 0 26px rgba(var(--fighter-rgb),.3));opacity:1}
.vs-fighter-wash,.vs-fighter-right .vs-fighter-wash{background:linear-gradient(0deg,#050813ec,transparent 48%)}
.vs-nameplate{bottom:5%}.vs-given{font-size:clamp(37px,6vw,108px);letter-spacing:0}.vs-surname{font-size:clamp(15px,2vw,32px)}
.vs-japanese{font-family:inherit;font-size:clamp(17px,2vw,26px);letter-spacing:2px}
.vs-cutin-image img{object-fit:contain;filter:drop-shadow(0 0 20px rgba(var(--fighter-rgb),.55))}
@media(min-width:761px) and (max-height:800px){
  .selection-readout{display:none}.shell .roster{max-height:none}.selector{padding-top:62px}.character-hud{gap:9px;bottom:30px}.attributes{padding:10px 14px}.style-heading{padding-bottom:8px;margin-bottom:8px}.profile{font-size:11px}.quote{font-size:12px}.stat{gap:8px}.art-region{top:66px;bottom:calc(var(--hud-height,300px) + 43px)}.character-type{margin-bottom:5px}
}
@media(min-width:761px) and (max-width:1100px){
  .selector{padding-left:2%;padding-right:5%}.shell .roster{gap:9px 6px}.shell .card-details strong{font-size:9px;letter-spacing:-.6px}.shell .card-marker{font-size:12px}.shell .character-card img{padding:9px 1px 25px}.name-jp{flex-wrap:wrap;gap:5px}.name-jp>span:first-child{font-size:20px}.name-jp .jp-divider{display:none}.name-jp>span:last-child{width:100%;font-size:10px}.art-region{left:10%;right:4%}.attributes .quote-block{display:none}
}
@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .shell{min-height:620px}.shell .main{grid-template-rows:minmax(145px,1fr) auto}
  .shell .art-region{inset:6px 12% 76px;mask-image:none;clip-path:none}
  .shell .art-image{object-fit:contain}.echo-art{display:none}
  .shell .character-info{bottom:7px!important;left:7%;right:7%}
  h1{font-size:clamp(25px,7.5vw,44px);flex-direction:row;align-items:baseline;gap:.22em;letter-spacing:-.5px}h1 .surname{display:none}
  .name-jp{margin:1px 0 0;gap:8px;flex-wrap:nowrap}.name-jp>span:first-child{font-size:16px;letter-spacing:1px}.name-jp>span:last-child{font-size:9px;letter-spacing:0}.jp-divider{width:14px}
  .character-type{display:none}.shell .selector{padding:6px 4% 4px;background:linear-gradient(180deg,#060c1466,#060c14df)}
  .shell .selector-heading{margin:0 5px 9px}.selector h2{font-size:19px;letter-spacing:2px}
  .shell .roster{--roster-columns:5;grid-template-columns:repeat(var(--roster-columns),minmax(0,1fr));grid-auto-rows:auto;flex:none;min-height:0;max-height:none;gap:7px 8px;padding:2px 5px}
  .shell .character-card{height:clamp(53px,8.1dvh,79px);min-height:0;max-height:none}
  .shell .character-card img{padding:2px 1px 17px;transform:skewX(4deg)}.shell .character-card.active img{transform:skewX(4deg) scale(1.025)}
  .shell .card-details{bottom:4px;left:0;right:0}.shell .card-details strong{font-size:clamp(8px,2.25vw,11px);letter-spacing:-.4px}
  .shell .card-marker{font-size:11px;top:3px;left:3px;padding:1px 3px}.shell .card-no{font-size:7px;top:4px;right:4px}
  .shell .versus-picks{margin-bottom:8px}.shell .roster-caption{padding:6px 5px 0;font-size:9px}
  .selected-seal{top:8%;right:6%}.selected-seal strong{font-size:31px}
  .shell.confirmed .art-region{inset:45px 7% 90px}
  .vs-fighter-art{inset:13% 4% 36%}.vs-nameplate{bottom:5%}.vs-given{font-size:clamp(22px,5.8vw,44px)}.vs-surname{font-size:clamp(10px,2.8vw,18px);letter-spacing:.4px}.vs-japanese{font-size:clamp(12px,3.2vw,18px);letter-spacing:0}.vs-quote{font-size:10px}.vs-style{font-size:8px}.vs-player{font-size:8px}
}
@media(max-width:760px) and (max-height:710px){
  .shell{min-height:590px}.shell .character-card{height:52px}.shell .roster{gap:6px 8px}.shell .selector-heading{margin-bottom:6px}.shell .roster-caption{display:none}.selector h2{font-size:17px}
}
@media(max-width:760px) and (max-height:620px){
  .shell{height:auto;min-height:100dvh;padding-bottom:120px}.shell .main{flex:none;grid-template-rows:190px auto}.shell .character-card{height:57px}
}
@media(orientation:landscape) and (min-width:700px) and (max-height:520px) and (pointer:coarse){
  .shell{height:100dvh;min-height:370px}.shell .main{grid-template-columns:43% 57%;grid-template-rows:minmax(180px,1fr);flex:1}.shell .selector{overflow-y:auto}.shell .roster{--roster-columns:6;gap:7px}.shell .character-card{height:61px}.shell.versus-picking .character-card{height:44px}.shell .art-region{inset:0 14% 110px}.shell .selector-heading{margin-bottom:5px}.shell .versus-picks{margin-bottom:8px}.shell.confirmed .main{grid-template-columns:1fr}.vs-fighter-art{inset:8% 12% 27%}.vs-given{font-size:8vh}.vs-surname{font-size:3.5vh}
}
@media(prefers-reduced-motion:reduce){.battle-scene *{animation:none!important}.battle-embers i{bottom:30%;opacity:.45}.battle-embers i:nth-child(2n){bottom:65%}}