/* Fighting-game opening: painted ensemble, one Start affordance, then modes. */
.front-door.title-landing{height:100dvh;min-height:0;padding:0;overflow:hidden;background:linear-gradient(180deg,#06101d25 0%,transparent 33%,transparent 72%,#05101aaf 100%),url('assets/front-door-v69/illustration3.png') center 44%/cover no-repeat;isolation:isolate}
.title-brand{position:absolute;top:3.6%;left:0;right:0;text-align:center;color:#f6eddb;pointer-events:none;text-shadow:0 3px 15px #03101c,0 0 45px #0c152a;z-index:2}.title-crest{display:inline-block;color:#f2c78e;font:24px Georgia;margin-right:15px;vertical-align:middle}.title-brand h1{display:inline-block;font:clamp(43px,7vw,105px)/1.1 Georgia;letter-spacing:clamp(5px,1.1vw,18px);margin:0;vertical-align:middle}.title-brand>span:last-child{display:block;margin-top:8px;font-size:10px;letter-spacing:7px;color:#ead6b1}
.title-start-wrap{position:absolute;bottom:7%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}.title-start{background:none;border:1px solid transparent;color:#fff1ca!important;padding:12px 45px;font:600 clamp(23px,2.5vw,34px)/1.2 'Segoe UI'!important;letter-spacing:10px;text-shadow:0 2px 8px #000,0 0 22px #ffd19e77;animation:title-start-pulse 2.8s ease-in-out infinite;cursor:pointer;min-width:220px;border-radius:3px}.title-start:hover{color:#fff!important;text-shadow:0 0 22px #ffdf94}.title-start:focus-visible{outline:1px solid #e0c08366!important;outline-offset:6px!important}.title-start:disabled{cursor:wait}.title-start-wrap>small{font-size:10px;color:#b5c1c4;letter-spacing:2px;text-shadow:0 1px 8px #000}
@keyframes title-start-pulse{0%,100%{opacity:.85}50%{opacity:1}}
.title-dust{position:absolute;inset:0;pointer-events:none;z-index:1}.title-dust i{position:absolute;left:calc(7% + var(--i)*7.4%);top:85%;width:2px;height:2px;border-radius:50%;background:#ffc39e;box-shadow:0 0 8px #ff783b;opacity:0;animation:title-dust-drift calc(7s + var(--i)*.3s) linear infinite;animation-delay:calc(var(--i)*-.73s)}
@keyframes title-dust-drift{0%{transform:translate3d(0,0,0);opacity:0}20%,60%{opacity:.65}100%{transform:translate3d(45px,-58vh,0);opacity:0}}
.mode-backdrop{position:absolute;inset:0;background:#04111ed9;backdrop-filter:blur(7px);z-index:3;animation:mode-appear .3s ease-out}.mode-dialog{position:absolute;z-index:4;width:min(1120px,calc(100% - 70px));left:50%;top:50%;transform:translate(-50%,-50%);animation:mode-appear .4s ease-out}.mode-dialog>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.mode-dialog h2{font:clamp(26px,3vw,43px) Georgia;color:#e9e5d3;margin:8px 0 0}.mode-close{width:42px;height:42px;border:1px solid #9aaab355;background:#10222eb3;border-radius:50%;font-size:27px!important;color:#d3e4e9!important}
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.mode-card{display:flex;flex-direction:column;align-items:center;position:relative;min-height:385px;padding:0 20px 25px;border:1px solid #d4ad6c66;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#243b37,#101d29);box-shadow:0 20px 40px #0005;color:#ede3c5!important;transition:transform .22s,border-color .22s,box-shadow .22s}.mode-card:hover{transform:translateY(-8px);border-color:#e5c78e;box-shadow:0 20px 50px #0008,0 0 28px #f0c57b22}.mode-card.versus{border-color:#ab759977;background:linear-gradient(150deg,#392a3f,#111e31)}.mode-card.guardians{border-color:#79afb777;background:linear-gradient(150deg,#2b4248,#121e2d)}
.mode-art{display:flex;width:calc(100% + 40px);height:185px;position:relative;overflow:hidden;flex-shrink:0}.mode-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#12242a 0%,transparent 65%)}.versus .mode-art:after{background:linear-gradient(0deg,#242233 0%,transparent 65%)}.guardians .mode-art:after{background:linear-gradient(0deg,#1b303b 0%,transparent 65%)}.mode-art img{height:100%;width:100%;object-fit:cover;object-position:center 48%;filter:saturate(.85);transition:transform .4s}.versus .mode-art img{width:50%;object-position:center 35%}.guardians .mode-art img{width:33.333%;object-position:center 40%}.mode-card:hover .mode-art img{transform:scale(1.045)}
.mode-symbol{position:relative;margin-top:-25px;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;border:1px solid #d6bf8755;background:radial-gradient(circle,#304742,#142831);box-shadow:0 6px 16px #0005;color:#e5d5ad}.mode-symbol svg{width:51px;height:51px}.versus .mode-symbol{background:radial-gradient(circle,#553845,#1b2232);color:#ffbba9;border-color:#d9a19655}.guardians .mode-symbol{background:radial-gradient(circle,#365b5d,#142732);color:#b8eeef;border-color:#a0d9d955}.mode-card strong{font:29px Georgia;margin-top:20px}.mode-card small{font-size:12px;color:#9db5b5;margin-top:10px}.mode-card>b{font-size:23px;color:#d4ba88;margin-top:14px;font-weight:400}
@keyframes mode-appear{from{opacity:0}to{opacity:1}}
@media(max-width:800px){.mode-dialog{width:calc(100% - 34px)}.mode-grid{gap:12px}.mode-card{min-height:310px;padding:0 12px 18px}.mode-art{height:130px;width:calc(100% + 24px)}.mode-card strong{font-size:22px}.mode-card small{font-size:10px}.mode-symbol{width:65px;height:65px}.mode-symbol svg{width:43px;height:43px}.title-brand>span:last-child{letter-spacing:4px}.title-crest{font-size:19px;margin-right:8px}}
@media(max-width:580px){.front-door.title-landing{min-height:500px;background-position:center center}.title-brand{top:7%}.title-brand h1{font-size:41px;letter-spacing:4px}.title-crest{display:block;margin:0 0 10px}.title-start-wrap{bottom:10%}.mode-dialog{max-height:calc(100dvh - 40px);overflow:auto;scrollbar-width:thin;padding:0 2px}.mode-dialog>header{margin-bottom:17px}.mode-dialog h2{font-size:25px}.mode-grid{grid-template-columns:1fr;gap:13px}.mode-card{min-height:137px;padding:21px 16px 21px 115px;align-items:flex-start;justify-content:center}.mode-art{position:absolute;inset:0 auto 0 0;width:120px;height:100%;opacity:.5}.mode-symbol{position:absolute;left:27px;top:50%;transform:translateY(-50%);margin:0;width:64px;height:64px}.mode-card strong{margin:0;font-size:25px}.mode-card small{font-size:11px;margin-top:9px}.mode-card>b{position:absolute;right:15px;bottom:15px;margin:0}.mode-close{flex-shrink:0}}
@media(max-height:650px) and (min-width:581px){.mode-card{min-height:280px}.mode-art{height:115px}.mode-card strong{margin-top:12px}.mode-dialog>header{margin-bottom:15px}.title-start-wrap{bottom:4%}}
@media(prefers-reduced-motion:reduce){.title-start,.title-dust i,.mode-dialog,.mode-backdrop{animation:none}.title-start{opacity:1}.title-dust{display:none}.mode-card,.mode-art img{transition:none}}
@media(max-height:550px){.front-door.title-landing{min-height:0}.title-brand h1{font-size:clamp(36px,5vw,65px)}.title-brand{top:3%}.title-brand>span:last-child{margin-top:4px}.title-start-wrap{bottom:3%}.mode-dialog{max-height:calc(100dvh - 24px);overflow:auto;scrollbar-width:thin}.mode-dialog h2{font-size:26px}.mode-dialog>header{margin-bottom:13px}}
@media(max-height:450px) and (min-width:581px){.mode-card{min-height:210px;padding-bottom:12px}.mode-art{height:70px}.mode-symbol{width:49px;height:49px;margin-top:-16px}.mode-symbol svg{width:33px;height:33px}.mode-card strong{font-size:24px;margin-top:9px}.mode-card small{margin-top:6px}.mode-card>b{margin-top:8px}.mode-dialog>header .kicker{display:none}}

/* Daylight pixel-art title: leave the mountain peak visible. */
.front-door.title-landing{background-image:linear-gradient(180deg,transparent 0%,transparent 76%,#102934a6 100%),url('assets/front-door-v69/illustration3.png');background-position:center,center 44%;background-color:#aacddd}
.title-brand{top:3.5%;left:3.5%;right:auto;text-align:left;text-shadow:0 2px 0 #eaf5f0bb,0 3px 12px #d8eef1aa;color:#18333d}
.title-brand h1{font-size:clamp(37px,4.3vw,70px);letter-spacing:clamp(4px,.65vw,10px)}
.title-crest{color:#294650;font-size:22px;margin-right:10px}
.title-brand>span:last-child{color:#294650;letter-spacing:4px;margin-top:5px;text-align:center;font-weight:600}
.title-start{background:#10232f;border:2px solid #ffe2a3;border-radius:4px;color:#fff5d9!important;box-shadow:0 4px 0 #07131d,0 8px 24px #06131c80;padding:14px 46px;text-shadow:0 2px 0 #07131d;font-weight:700!important}
.title-start:hover{background:#203e4f;border-color:#fff4d5;text-shadow:0 2px 0 #07131d;box-shadow:0 4px 0 #07131d,0 0 22px #ffe2a355}
.title-start:focus-visible{outline:3px solid #fff4d5!important;outline-offset:5px!important}
.title-start-wrap>small{color:#fff3d5;background:#10232fec;padding:5px 10px;border-radius:3px;text-shadow:none}
@media(max-width:580px){
 .front-door.title-landing{background-size:100% 100%,auto 100%;background-position:center,center}
 .title-brand{left:0;right:0;top:3%;text-align:center}
 .title-brand h1{font-size:36px;letter-spacing:4px}
 .title-crest{display:none}
 .title-brand>span:last-child{font-size:9px;letter-spacing:3px}
}
@media(max-aspect-ratio:1/1){
 .front-door.title-landing{background-size:100% 100%,100% auto;background-position:center,center 46%;background-image:linear-gradient(180deg,#d0e8ef00 0%,#aacddd00 64%,#406373 100%),url('assets/front-door-v69/illustration3.png')}
}

/* Moonlit title: preserve central mountain and seven aura paths. */
.front-door.title-landing{background-color:#07172f;background-position:center,center center}
.title-brand{color:#fff2d6;text-shadow:0 2px 0 #061125,0 3px 14px #04112bcc}
.title-crest,.title-brand>span:last-child{color:#ebdcb8}
@media(max-aspect-ratio:1/1){.front-door.title-landing{background-image:linear-gradient(180deg,#07172f00 0%,#07172f00 64%,#051125 100%),url('assets/front-door-v69/illustration3.png');background-position:center,center 46%}}

/* Original commissioned portrait: contain every character, ambient surround. */
.front-door.title-landing{background:#092337;isolation:isolate}
.front-door.title-landing::before{content:'';position:absolute;inset:-30px;background:url('assets/front-door-v69/illustration3.png') center 26%/cover no-repeat;filter:blur(20px) brightness(.4) saturate(.8);z-index:-2;pointer-events:none}
.front-door.title-landing::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#041929c7,transparent 68%);z-index:-1;pointer-events:none}
.title-art{position:absolute;inset:0 0 0 35%;pointer-events:none;z-index:0;overflow:hidden}
.title-art img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.title-light{position:absolute;inset:0;background:linear-gradient(125deg,transparent 25%,#fff2c312 42%,transparent 60%);animation:title-daylight 9s ease-in-out infinite;mix-blend-mode:screen}
@keyframes title-daylight{0%,100%{opacity:.15}50%{opacity:.65}}
.title-brand{left:5%;right:auto;top:30%;width:30%;text-align:center;color:#fff4d9;text-shadow:0 2px 6px #001321}
.title-brand h1{font-size:clamp(34px,3.8vw,64px);letter-spacing:clamp(2px,.42vw,7px)}
.title-crest{display:block;margin:0 0 16px;font-size:32px;color:#e7ce95}
.title-brand>span:last-child{margin-top:16px;font-size:10px;letter-spacing:4px;color:#d6e8e7}
.title-start-wrap{left:5%;right:auto;bottom:27%;width:30%;gap:12px}
.title-dust i{left:calc(4% + var(--i)*5.3%);width:3px;height:3px;background:#e5fff4;box-shadow:0 0 10px #b7ffd0;animation-duration:calc(10s + var(--i)*.5s)}
.title-dust i:nth-child(3n){background:#ffdca1;box-shadow:0 0 9px #ffb47c}
.title-dust i:nth-child(3n + 1){background:#b0eaff;box-shadow:0 0 9px #82d9ff}
@media(max-aspect-ratio:5/4){
 .title-art{inset:0}
 .title-brand{top:3%;left:0;right:0;width:auto}
 .title-brand h1{font-size:clamp(33px,6vw,60px);letter-spacing:4px}
 .title-crest{display:none}
 .title-brand>span:last-child{margin-top:7px;font-size:9px;letter-spacing:3px}
 .title-start-wrap{left:0;right:0;bottom:3%;width:auto}
 .title-start{font-size:25px!important;padding:10px 35px}
 .front-door.title-landing::after{background:linear-gradient(180deg,#071d3866,transparent 19%,transparent 78%,#061628aa)}
}
@media(prefers-reduced-motion:reduce){.title-light{animation:none;opacity:.15}}

/* Landscape fills the viewport; prioritize the three lower fighters. */
@media(orientation:landscape){
 .title-art{inset:0}
 .title-art img{object-fit:cover;object-position:center 76%}
 .front-door.title-landing::after{z-index:1;background:linear-gradient(180deg,#041626aa 0%,#04162608 24%,transparent 70%,#0416269c 100%)}
 .title-brand{top:3%;left:4%;right:auto;width:auto;text-align:left}
 .title-brand h1{font-size:clamp(34px,4.2vw,68px)}
 .title-crest{display:inline-block;margin:0 10px 0 0;font-size:24px}
 .title-brand>span:last-child{margin-top:8px;text-align:center}
 .title-start-wrap{left:0;right:0;bottom:4%;width:auto}
}

/* Mirror only the painting in landscape, never the title or controls. */
@media(orientation:landscape){.title-art img{transform:scaleX(-1)}.front-door.title-landing::before{transform:scaleX(-1)}}
.title-atmosphere{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.title-atmosphere svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#d9fff2;stroke-width:2;stroke-linecap:round;opacity:.2}
.title-atmosphere path{stroke-dasharray:8 92;stroke-dashoffset:110;animation:title-breeze 9s linear infinite}
.title-atmosphere path:nth-child(2){animation-delay:-3s;animation-duration:12s;stroke-width:3;opacity:.65}
.title-atmosphere path:nth-child(3){animation-delay:-7s;animation-duration:14s;opacity:.5}
@keyframes title-breeze{0%{stroke-dashoffset:110;opacity:0}15%,70%{opacity:.8}100%{stroke-dashoffset:-10;opacity:0}}
.title-light{background:linear-gradient(115deg,transparent 12%,#fff4c528 18%,transparent 24%,transparent 33%,#fff2cf15 36%,transparent 40%);animation-duration:11s;opacity:.3}
.title-dust i{left:calc(2% + var(--i)*3.5%);width:4px;height:4px;box-shadow:0 0 5px #d7ffe5,0 0 14px #97eec299;animation-name:title-mote-float;animation-delay:calc(var(--i)*-.63s)}
.title-dust i:nth-child(4n){width:2px;height:2px}
@keyframes title-mote-float{0%{transform:translate3d(-40px,12vh,0);opacity:0}18%{opacity:.75}55%{transform:translate3d(65px,-24vh,0);opacity:.55}85%{opacity:.7}100%{transform:translate3d(150px,-70vh,0);opacity:0}}
.title-leaves{position:absolute;inset:0;pointer-events:none}
.title-leaves i{position:absolute;left:-30px;top:calc(8% + var(--leaf)*10%);width:10px;height:5px;border-radius:80% 0 80% 0;background:#b9cc87;box-shadow:inset 0 -1px #617c64;animation:title-leaf-drift calc(16s + var(--leaf)*1.3s) linear infinite;animation-delay:calc(var(--leaf)*-2.9s);opacity:0}
.title-leaves i:nth-child(3n){background:#d0ad78}
@keyframes title-leaf-drift{0%{transform:translate3d(-30px,0,0) rotate(-25deg);opacity:0}10%,80%{opacity:.6}50%{transform:translate3d(52vw,-50px,0) rotate(160deg)}100%{transform:translate3d(110vw,60px,0) rotate(330deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.title-atmosphere,.title-dust{display:none}.title-light{animation:none;opacity:.12}}

/* Original landscape direction; title sits over the open upper-left sky. */
@media(orientation:landscape){
 .title-art img,.front-door.title-landing::before{transform:none}
 .title-brand{top:2.5%;left:2.5%;right:auto;width:auto;max-width:32%;text-align:left;padding:12px 18px 14px;background:linear-gradient(135deg,#071d32ed,#0e2b40c9);border-left:2px solid #e4cc91;border-radius:2px;box-shadow:0 5px 22px #07152330}
 .title-brand h1{font-size:clamp(25px,3vw,48px);letter-spacing:clamp(2px,.32vw,5px)}
 .title-crest{font-size:18px;margin-right:6px}
 .title-brand>span:last-child{font-size:8px;letter-spacing:3px;margin-top:7px;color:#e4dbc4}
}

/* Original Togarashi/Eri face-off clip in Multiplayer mode art. */
.mode-art video{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;pointer-events:none}
.versus .mode-art:after{background:linear-gradient(0deg,#242233 0%,#24223300 38%)}
.mode-card:hover .mode-art video{filter:brightness(1.08)}
@media(prefers-reduced-motion:reduce){.mode-card:hover .mode-art video{filter:none}}

/* Red title lettering directly on the artwork, without a panel. */
.title-brand{background:none;border:0;border-radius:0;box-shadow:none}
.title-brand h1{color:#f14439;text-shadow:0 2px 0 #350b12,0 0 8px #071523aa}
@media(orientation:landscape){
 .title-brand{background:none;border:0;border-radius:0;box-shadow:none;padding:12px 18px 14px}
 .title-brand>span:last-child{color:#fff0d6;text-shadow:0 1px 3px #061427,0 0 6px #061427}
}

/* Original cream title, directly on the artwork. */
.title-brand h1{color:#fff4d9;text-shadow:0 2px 6px #001321,0 0 8px #07152380}

.guardians .mode-art img.guardians-cover{width:100%;object-position:center top;filter:none}
@media(max-width:580px){.guardians .mode-art img.guardians-cover{object-fit:contain;object-position:center}}

/* Landscape camera loop: climb slowly, hold, then return. */
@media(orientation:landscape){
 .title-art img{animation:title-camera-pan 36s ease-in-out infinite}
}
@keyframes title-camera-pan{
 0%,8%{object-position:center 76%}
 44%,56%{object-position:center 32%}
 92%,100%{object-position:center 76%}
}
@media(prefers-reduced-motion:reduce){.title-art img{animation:none;object-position:center 76%}}