#campaign-menu {
 position:fixed; inset:0; z-index:35; overflow:auto;
 background:#090969; color:#fff2b2; font:12px/1.6 CampaignArcade,monospace;
}
#campaign-menu[hidden] {display:none}
.campaign-content {
 position:relative; isolation:isolate; width:min(100%,1320px); min-height:100%; margin:auto; text-align:center;
 padding:clamp(18px,4vh,46px) clamp(12px,4vw,52px);
 display:flex; flex-direction:column; align-items:center;
}
.campaign-player figcaption {
 margin:0; text-transform:uppercase; font:clamp(16px,2.6vw,36px)/1.4 CampaignArcade,monospace;
 color:#ffdb84; text-shadow:2px 2px #cc3426,4px 4px #230d29;
}
.campaign-heading {width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.campaign-heading h1 {margin:0; width:23%; line-height:0}
.campaign-heading img {width:100%; display:block; image-rendering:pixelated}
.campaign-heading p {width:24%; margin:0; text-align:left; font-size:clamp(10px,1vw,14px); line-height:1.8}
.campaign-map {display:block; position:absolute; z-index:-1; top:2%; left:50%; transform:translateX(-50%); width:min(42.4%,72vh); height:auto; image-rendering:pixelated}
.campaign-lineup {
 width:min(100%,1060px); margin-top:auto;
 display:grid; grid-template-columns:32% 36% 32%; align-items:end;
}
.campaign-player {margin:0; justify-self:start; width:95%}
.campaign-player figcaption {font-size:clamp(12px,2vw,26px); margin-bottom:6px}
.campaign-player img {display:block; width:100%; image-rendering:pixelated}
.campaign-route {
 display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px;
 padding:4px; margin:0; list-style:none; background:#181334; border:2px solid #6874aa;
}
.campaign-route li {position:relative; min-width:0; background:#202455; border:2px solid #7479a4}
.campaign-route .next {border-color:#ffd963; box-shadow:0 0 0 1px #e48423}
.campaign-hurt,.campaign-guard {display:block; width:100%; aspect-ratio:1; image-rendering:pixelated}
.campaign-hurt {object-fit:cover}
.campaign-hurt {filter:grayscale(1)}
.campaign-guard {
 background:url('assets/campaign/portraits.webp') var(--column) 0% / 600% 1200% no-repeat;
 animation:campaign-guard 2.6s steps(12,jump-none) var(--phase) infinite;
}
@keyframes campaign-guard {from {background-position-y:0%} to {background-position-y:100%}}
@media(prefers-reduced-motion:reduce) {.campaign-guard {animation:none}}
.unknown .campaign-guard {filter:brightness(0) invert(54%) sepia(.35) saturate(2) hue-rotate(195deg)}
.campaign-route strong {
 display:block; padding:5px 0; background:#101035; color:#ffe6a8;
 font:clamp(7px,.85vw,11px)/1.4 CampaignArcade,monospace; overflow-wrap:anywhere;
}
.campaign-route .unknown strong {font:clamp(8px,1vw,13px)/1 CampaignArcade,monospace}
.campaign-route small {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.campaign-actions {display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin-top:22px}
.campaign-actions button {
 cursor:pointer; border:2px solid #8290cc; background:#15154c; color:#fff2c7;
 font:clamp(9px,1vw,13px)/1.5 CampaignArcade,monospace; text-shadow:none; padding:10px 12px;
}
#campaign-start {background:#ffcf6b; color:#251637; border-color:#ffe6a7; text-transform:uppercase}
.campaign-actions button:focus-visible,.campaign-actions button:hover {outline:2px solid white; outline-offset:2px}
.campaign-menu #touch-controls,.campaign-menu #rotate-phone,.campaign-menu .mobile-brand,.campaign-menu #stage-change {display:none!important}
.campaign-return {display:block;margin:12px auto;padding:12px 20px;border:0;background:#f4cd6b;color:#201708;font:bold 13px CampaignArcade,monospace;cursor:pointer}
@media(max-width:700px) {
 .campaign-heading h1 {width:34%}
 .campaign-heading p {width:60%; font-size:9px}
 .campaign-map {position:static; transform:none; width:min(76.8%,43.2vh); margin:auto auto -4vh}
 .campaign-lineup {margin-top:0}
 .campaign-lineup {grid-template-columns:36% 64%}
 .campaign-route {gap:2px;padding:2px}
}
@media(max-height:530px) and (orientation:landscape) {
 .campaign-content {padding:10px 20px}
 .campaign-lineup {width:min(100%,170vh); padding-top:0}
 .campaign-actions {margin-top:8px}
 .campaign-actions button {padding:6px 10px}
}
@media(min-width:701px) {
 .campaign-heading h1 {transform:translate(1.4vw,4.7vh)}
 .campaign-heading p {transform:translate(-2vw,13vh)}
}
.campaign-landmarks {position:absolute;inset:0;pointer-events:none}
.campaign-map img {display:block;width:100%;height:auto}
.campaign-travel {position:absolute;inset:0;width:100%;height:100%;visibility:hidden;overflow:visible}
.campaign-travel.visible {visibility:visible}
.campaign-travel polyline {fill:none;stroke:#bd1830;stroke-width:12;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;filter:drop-shadow(0 3px 1px #fff1b2)}
.campaign-travel circle {fill:#ffed84;stroke:#b51d2e;stroke-width:8;transform-box:fill-box;transform-origin:center}
.campaign-opponent {justify-self:end}
.campaign-opponent img {aspect-ratio:1;object-fit:contain}
.show-opponent .campaign-actions {visibility:hidden}
@media(prefers-reduced-motion:no-preference){
 .show-opponent .campaign-opponent {animation:opponent-enter .4s ease-out both}
 .campaign-travel.visible circle {animation:destination-pulse .6s ease-in-out infinite alternate}
 @keyframes opponent-enter {from {opacity:0}}
 @keyframes destination-pulse {to {transform:scale(1.4)}}
}
@media(max-width:700px){
 .campaign-map {position:relative;top:auto;left:auto}
 .show-opponent .campaign-lineup {grid-template-columns:26% 48% 26%}
 .show-opponent figcaption {font-size:clamp(8px,2vw,13px)}
}
.campaign-ending {position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#08090a;color:#fff0c9}
.ending-frame {position:relative;width:min(100%,calc(133.333333dvh - 208px));aspect-ratio:4/3}
.ending-frame canvas {display:block;width:100%;height:100%;image-rendering:pixelated}
.ending-caption {position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(92vw,760px);margin:12px 0 0;text-align:center;text-wrap:balance;font:clamp(10px,1.4vw,14px)/1.7 CampaignArcade,monospace}
.ending-controls {position:absolute;bottom:4%;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:4px}
.ending-controls[hidden] {display:none}
.ending-controls button {
 padding:12px 16px; border:3px solid #402637; border-radius:0;
 background:#ffd06b; color:#251929; box-shadow:inset 3px 3px #fff1ac,inset -3px -3px #bc782c,3px 3px #211623;
 font:clamp(10px,1.6vw,16px)/1.4 CampaignArcade,monospace; text-transform:uppercase;
 cursor:pointer; white-space:nowrap;
}
body:has(.campaign-ending) :is(#touch-controls,#stage-change,#rotate-phone,.mobile-brand) {display:none!important}

.fight-guide {width:min(540px,92vw);max-height:90dvh;overflow:auto;padding:clamp(20px,4vw,34px);border:1px solid #af8747;border-radius:10px;background:#201a1d;color:#fff0d7;font:11px/1.8 CampaignArcade,monospace;color-scheme:dark}
.fight-guide::backdrop {background:#060509cf}
.fight-guide h2,.fight-guide h3,.fight-guide p {margin:0}
.fight-guide h2 {color:#ffcf70;font-size:20px}
.fight-guide p {margin:5px 0 18px}
.guide-columns {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.guide-columns h3 {color:#f5c979;font-size:16px}
.guide-columns dl {margin:6px 0 18px}
.guide-columns dl div {display:flex;align-items:center;gap:8px;margin:8px 0}
.guide-columns dd {margin:0}
.guide-columns kbd {display:block;min-width:32px;padding:3px;text-align:center;font:11px CampaignArcade,monospace;color:white;border:1px solid #9a825d;border-radius:5px;background:#322e32;white-space:nowrap}
.fight-guide form {text-align:right}
.fight-guide button {padding:9px 20px;border:0;border-radius:4px;background:#ffcf70;color:#231711;font:11px CampaignArcade,monospace;cursor:pointer}
@media(max-width:580px){
 .campaign-actions {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px}
 #campaign-help,#campaign-free {padding:8px 5px;font-size:8px}
 #campaign-start {width:100%;padding:12px 5px;font-size:9px}
 .guide-columns {gap:10px;font-size:9px}
}

.scoreboard {width:min(92vw,520px);max-height:90dvh;overflow:auto;box-sizing:border-box;padding:clamp(16px,3vw,32px);background:#10104c;color:#fff1cc;border:3px solid #ffd46b;font:clamp(9px,1.2vw,12px)/1.7 CampaignArcade,monospace}
.scoreboard::backdrop {background:#07071bbd}
.scoreboard h2,.scoreboard .score-total,.scoreboard .mine,.scoreboard .your-place {color:#ffdb73}
.scoreboard ol {padding:0}
.scoreboard li {display:flex;justify-content:space-between;gap:1em;padding:.4em 0;border-bottom:1px solid #54547e}
.scoreboard input,.scoreboard button {box-sizing:border-box;padding:.7em;border:2px solid #888cb0;font:inherit}
.scoreboard input {display:block;width:100%;margin:.5em 0;color:#fff;background:#202055}
.scoreboard button {cursor:pointer;color:#241b3b;background:#ffd270}

@media (max-width:900px) and (orientation:portrait) {
 #campaign-menu {display:grid;place-items:center;overflow-x:clip}
 #campaign-menu[hidden] {display:none}
 .campaign-content {display:block;container-type:inline-size;width:min(100%,46.21dvh);aspect-ratio:780/1688;min-height:0;padding:0;overflow:hidden}
 .campaign-heading {display:contents}
 .campaign-heading h1 {position:absolute;top:2.5%;left:27%;width:47%;transform:none}
 .campaign-heading p {position:absolute;top:17.5%;left:0;width:100%;text-align:center;transform:none;color:#fff;font:2.12cqw/1.68 CampaignArcade,monospace}
 .campaign-heading p span {display:block;white-space:nowrap}
 .campaign-map {position:absolute;top:24.4%;left:50%;width:107.69%;margin:0;transform:translateX(-50%)}
 .campaign-lineup,.campaign-actions {display:contents}
 .campaign-content:not(.face-off) {--roster-inset:21%;overflow:visible}
 .campaign-route {position:absolute;bottom:23.06%;left:var(--roster-inset);right:var(--roster-inset);width:auto;gap:.5cqw;padding:.5cqw}
 .campaign-route strong,.campaign-route .unknown strong {font-size:2cqw;padding:.7cqw 0}
 .campaign-player {position:absolute;bottom:0;left:calc(50% - 50vw);width:46%;pointer-events:none;z-index:1}
 .campaign-player:not(.campaign-opponent) figcaption {display:none}
 .campaign-opponent {left:auto;right:-4%;width:53%}
 .campaign-actions button {position:absolute;margin:0;z-index:2}
 .campaign-actions :is(#campaign-start,#campaign-free) {right:var(--roster-inset);width:32%;box-sizing:border-box;outline-offset:-3px}
 .campaign-actions #campaign-start {top:79%;height:6.6%;padding:0 2cqw;font-size:2.45cqw}
 .campaign-actions #campaign-free {top:87.2%;height:3.6%;padding:.513cqw 0 0;font-size:1.95cqw}
 .campaign-actions #campaign-help,.campaign-actions #campaign-ranking {top:95%;height:3.2%;padding:0;font-size:1.7cqw}
 .campaign-actions #campaign-help {left:56.6%;width:20%;padding-top:.513cqw}
 .campaign-actions #campaign-ranking {left:77.8%;width:16%;padding-top:.769cqw}
 .campaign-route strong {display:grid;align-content:center;min-height:3em;line-height:1.25}
}

.face-off-vs,.traveling .campaign-actions {visibility:hidden}
.face-off-vs {display:none}
#campaign-menu .face-off {width:100%;height:100dvh;aspect-ratio:auto;display:grid;place-items:center;padding:0;background:#090969;overflow:hidden}
.face-off .campaign-heading,.face-off .campaign-map,.face-off .campaign-actions,.face-off .campaign-route,.face-off > p {display:none}
#campaign-menu .face-off .campaign-lineup {position:relative;display:grid;grid-template-columns:1fr 12% 1fr;align-items:end;gap:0;width:min(94%,135vh);margin:0}
#campaign-menu .face-off .campaign-player {position:static;display:flex;flex-direction:column;align-items:center;width:100%;min-width:0}
#campaign-menu .face-off figcaption {display:block;order:1;margin:1em 0 0;text-align:center;white-space:nowrap;font:clamp(9px,2.5vw,30px)/1.5 CampaignArcade,monospace;color:#ffdb84}
.face-off .campaign-player img {aspect-ratio:1;object-fit:contain;transform:scaleX(-1)}
.face-off .face-off-vs {display:block;visibility:visible;align-self:center;color:#ffda6c;text-shadow:2px 2px #b52c23;font:clamp(16px,4.5vw,54px)/1 CampaignArcade,monospace}

.face-off-logo {display:none}
@media (max-width:900px) and (orientation:portrait) {
 .face-off .face-off-logo {
  display:block;position:absolute;top:19.4%;left:50%;transform:translate(-50%,-50%);
  width:min(28.5vw,14dvh);height:auto;image-rendering:pixelated;
 }
 #campaign-menu .face-off .campaign-lineup {
  position:absolute;inset:64.2% 0 auto;width:100%;grid-template-columns:45% 10% 45%;align-items:start;
 }
 #campaign-menu .face-off .campaign-player {position:relative;inset:auto}
 .face-off .campaign-player img {
  position:absolute;bottom:100%;width:min(72vw,33dvh);max-width:none;height:auto;
 }
 #campaign-menu .face-off figcaption,.face-off .face-off-vs {
  margin:0;padding-top:4.8vw;line-height:1.25;font-size:4.2vw;
 }
 .face-off .face-off-vs {align-self:start}
 #campaign-menu .face-off .long-name figcaption {font-size:3.5vw;line-height:1.5}
}