/* Revision 3: steep menu perspective and layered motion from the 22:26 clip. */
#app{--menu-size:clamp(43px,4.1vw,75px)}
.sky-band{clip-path:polygon(0 79%,0 53%,68% 0,100% 0,100% 34%)}
.hero-character{animation:none}
.channel-title{left:65%;top:9%;width:30%;transform:rotate(-16deg) skewX(-5deg);animation:none}
.channel-title h1{font-size:clamp(35px,3.5vw,61px);letter-spacing:-2px}
.channel-title .eyebrow{font-size:10px;letter-spacing:2px}
.coat-flower{position:absolute;left:65%;bottom:5%;width:20vw;height:20vw;color:#ffff27;transform:rotate(12deg);pointer-events:none;filter:drop-shadow(7px 3px #654023);z-index:1}
.main-menu{left:39%;top:23%;width:45%;transform:rotate(-25deg) skewX(-7deg);transform-origin:0 0;gap:0}
.menu-item{--angle:calc(var(--i)*2deg);font-size:var(--menu-size);font-style:italic;line-height:1.12;margin-left:calc(var(--i)*24px);padding:0 10px 0 3px;transform:rotate(var(--angle));transform-origin:0 50%;animation:none;transition:font-size .18s cubic-bezier(.16,.8,.2,1),line-height .18s,translate .18s,color .13s;text-shadow:2px 2px #645638;-webkit-text-stroke:0;color:#fffda8;opacity:.78;overflow:visible}
.menu-item:before{inset:-7% auto -8% -15px;width:65px;max-width:40%;height:auto;background:linear-gradient(135deg,#fff 0 38%,#25eaff 38% 65%,#314aff 65% 80%,#ff35c9 80%);clip-path:polygon(0 0,100% 25%,0 100%);transform:scaleY(.8) skewY(-4deg);opacity:0;box-shadow:none;transition:opacity .13s,transform .2s;filter:drop-shadow(-4px 3px #61ff5d)}
.menu-item.selected{font-size:calc(var(--menu-size)*1.36);line-height:1.06;color:white;opacity:1;transform:rotate(var(--angle));translate:-8px 0;text-shadow:-3px -1px #05d9ff,3px 2px #fa36b4,5px 4px #606526;-webkit-text-stroke:0}
.menu-item.selected:before{opacity:1;transform:scaleY(1) skewY(-4deg);box-shadow:none}
.menu-item.before-active,.menu-item.menu-label{color:#1d2114;opacity:1;text-shadow:2px 1px #ec3c18,-2px -1px #51ed74}
.menu-item.after-active{color:#ffff53;text-shadow:3px 2px #5b5247;opacity:.7}
.menu-item.menu-label{cursor:default;font-size:var(--menu-size);line-height:1.12;pointer-events:none}
.menu-label:before{display:none}
.menu-count,.character-badge,.home-about{display:none!important}
.status-sheet{transform:rotate(-13deg) skewX(-4deg);animation:none}
.party-name,.social-handle,.game-row h3,.track-player h3,.setting-row{font-style:italic}
.detail-watermark{transform:rotate(-14deg) skewX(-5deg)}
.detail-portrait,.detail[data-character="yukiko"] .detail-portrait{display:block;left:-10%;bottom:-26%;width:75%;height:132%;animation:none;opacity:1;transform:none;filter:url(#flat-portrait)}
.detail-portrait img{filter:none!important;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top}
.portrait-repair{position:absolute;inset:0;width:100%;height:100%;display:none}
.detail[data-character="yukiko"] .portrait-repair{display:block}
.detail[data-character="chie"] .detail-portrait{left:-3%;bottom:-25%;height:132%;width:65%;transform:none}
.detail[data-character="yosuke"] .detail-portrait{left:-10%;bottom:-24%;height:132%;width:74%;transform:none}
.detail[data-character="rise"] .detail-portrait{left:-5%;bottom:-23%;height:125%;width:70%;transform:none;filter:none}
.reference-portrait{display:none!important}
.detail-rings,.section-pager{animation:none}
.transition-wipe{background:transparent;transform:none;inset:-30%;overflow:visible;opacity:0}
.transition-wipe:before,.transition-wipe:after,.transition-wipe i{content:'';position:absolute;inset:0;background:#ffed00;transform:translateX(-150%) skewX(-30deg)}
.transition-wipe:after{background:#ffc016;inset:0 15% 0 0}
.transition-wipe i:first-child{background:#fff85f;inset:0 50% 0 45%}
.transition-wipe i:last-child{background:#ffab00;inset:0 10% 0 85%}
.transition-wipe.animate{animation:beam-layer .72s linear both}
.transition-wipe.animate:before{animation:diagonal-beam .52s cubic-bezier(.38,.08,.25,1) both}
.transition-wipe.animate:after{animation:diagonal-beam .52s .035s cubic-bezier(.38,.08,.25,1) both}
.transition-wipe.animate i:first-child{animation:diagonal-beam .55s .015s cubic-bezier(.38,.08,.25,1) both}
.transition-wipe.animate i:last-child{animation:diagonal-beam .55s .06s cubic-bezier(.38,.08,.25,1) both}
#app[data-motion="open"] .hero-character{transition:translate .18s,scale .18s;translate:15vw 5vh;scale:.82}
#app[data-motion="open"] .main-menu{transition:translate .18s,opacity .15s;translate:40vw -12vh;opacity:0}
.bgm-dock{width:320px;bottom:30px;left:28px;padding:0 0 13px;transform:rotate(-5deg) skewX(-3deg);box-shadow:5px 5px #ffb700}
.bgm-dock>p{font-size:18px;font-style:italic;min-height:36px;margin:5px 13px 10px;line-height:1.12}
.bgm-dock-controls{gap:7px;padding:5px 12px 0}
.bgm-dock-controls button{font-size:13px}
.bgm-dock-controls label{font-size:11px}
.bgm-dock-controls input{width:59px}
.bgm-seek{accent-color:var(--yellow);width:calc(100% - 26px);margin:0 13px;height:8px;display:block}
#bgm-counter{font:600 10px var(--sans);letter-spacing:.7px;white-space:nowrap}
#bgm-details{font-size:23px;line-height:18px}
body.boot .hero-character{animation:hero-reveal .65s cubic-bezier(.12,.8,.2,1) both}
body.boot .channel-title{animation:brand-reveal .5s .25s both}
body.boot .menu-item{animation:menu-reveal .42s calc(.19s + var(--i)*.035s) cubic-bezier(.12,.8,.2,1) both}
@keyframes hero-reveal{from{translate:22vw 12vh;scale:.72;opacity:0}to{translate:0 0;scale:1;opacity:1}}
@keyframes menu-reveal{from{translate:45vw -15vh;opacity:0}to{translate:0 0;opacity:1}}
@keyframes brand-reveal{from{opacity:0;translate:12vw -6vh}to{opacity:1;translate:0 0}}
@keyframes diagonal-beam{0%{transform:translateX(-150%) skewX(-30deg)}40%,48%{transform:translateX(0) skewX(-30deg)}100%{transform:translateX(180%) skewX(-30deg)}}
@keyframes beam-layer{0%,85%{opacity:1}100%{opacity:0}}
@media(min-aspect-ratio:19/10){#app{--menu-size:7.6vh}.main-menu{left:40%;top:22%}.channel-title{left:67%;top:10%}.channel-title h1{font-size:6.5vh}.coat-flower{width:29vh;height:29vh;left:66%;bottom:5%}}
@media(max-width:1050px) and (min-width:701px){#app{--menu-size:5.4vw}.main-menu{left:39%;top:28%;width:54%}.menu-item{margin-left:calc(var(--i)*14px)}.channel-title{left:53%;top:15%;width:40%}.channel-title h1{font-size:5vw}.status-sheet,.detail[data-character="yosuke"] .status-sheet,.detail[data-character="rise"] .status-sheet{transform:rotate(-13deg) skewX(-3deg)}}
@media(max-width:700px){#app{--menu-size:clamp(33px,8.2vw,48px)}.channel-title{left:20%;top:12%;width:75%;transform:rotate(-21deg) skewX(-5deg)}.channel-title h1{font-size:12vw}.channel-title .eyebrow{font-size:8px}.main-menu{left:32%;top:32%;width:65%;transform:rotate(-25deg) skewX(-5deg)}.menu-item{margin-left:calc(var(--i)*8px);padding:1px 1px;line-height:1.23;letter-spacing:-1px}.menu-item.selected{font-size:calc(var(--menu-size)*1.29);line-height:1.16}.menu-item.menu-label{line-height:1.23}.menu-item:before{width:43px;left:-10px}.coat-flower{width:38vw;height:38vw;left:58%;bottom:18%;filter:drop-shadow(4px 2px #654023)}.hero-character{left:-46%;height:66%;bottom:11%}.sky-band{clip-path:polygon(0 65%,0 39%,100% 5%,100% 31%)}.status-sheet,.detail[data-character="yosuke"] .status-sheet,.detail[data-character="rise"] .status-sheet{transform:rotate(-12deg) skewX(-3deg);top:31%;left:10%;width:84%;max-height:53%}.detail-portrait,.detail[data-character="yukiko"] .detail-portrait,.detail[data-character="chie"] .detail-portrait,.detail[data-character="yosuke"] .detail-portrait,.detail[data-character="rise"] .detail-portrait{left:-30%;width:119%;height:106%;bottom:-8%;opacity:.65;transform:none}.bgm-dock{left:calc(50% - 160px);bottom:115px;width:320px}.bgm-dock>p{font-size:17px}.key-hints{gap:12px}.section-pager{transform:rotate(-12deg)}}
@media(min-width:701px){.channel-title{left:auto;right:4%;top:13%;width:auto;text-align:right;transform:rotate(-13deg) skewX(-4deg)}.channel-title h1{font-size:2.7vw}}@media(min-width:701px) and (max-height:800px){.status-sheet,.detail[data-character="yosuke"] .status-sheet,.detail[data-character="rise"] .status-sheet{top:26%}.party-panel,.detail[data-character="yosuke"] .party-panel{padding-top:14px;padding-bottom:14px}.party-top{padding-bottom:10px}.party-stats{padding-top:9px}.lower-panel{padding-top:22px;padding-bottom:13px}.social-row{padding-top:7px;padding-bottom:7px}}
.detail[data-character="yosuke"] .detail-portrait{left:1.5%;width:65%;height:112%;bottom:-16%}@media(max-width:700px){.detail[data-character="yosuke"] .detail-portrait{left:-4%;width:104%;height:105%;bottom:-11%}}
.menu-item.after-active{color:#e6dfbe;opacity:.92;text-shadow:1.5px 2px #4a473e,-.5px -.5px #4a473e}