/* Ikari no Ken: Tempest — layered, offline title artwork supplied by Dylan. */
#boot-screen{background:#000}
#boot-screen .boot-logo{filter:none;clip-path:inset(0 2px 0 0);mix-blend-mode:screen}
#main-menu:is([data-screen=title],[data-screen=main]){background:#000}
#main-menu:is([data-screen=title],[data-screen=main]) .mm-art,
#main-menu:is([data-screen=title],[data-screen=main]) .mm-rain,
#main-menu:is([data-screen=title],[data-screen=main]) .mm-flash{display:none}
#main-menu:is([data-screen=title],[data-screen=main]) .mm-shade{background:linear-gradient(90deg,#000 0%,#0009 28%,transparent 47%,transparent 95%,#0005);z-index:1}
#main-menu:is([data-screen=title],[data-screen=main]) .mm-grain{opacity:.06;z-index:1}
#main-menu .ik-backdrop{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#main-menu:is([data-screen=title],[data-screen=main]) .ik-backdrop{display:block}
#main-menu .ik-aura{position:absolute;inset:0;background:radial-gradient(ellipse at 53% 100%,#87132c18,transparent 56%)}
#main-menu .ik-cast{position:absolute;left:38%;right:-1%;top:0;bottom:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
#main-menu .ik-figure{position:absolute;pointer-events:none}
#main-menu .ik-figure img{display:block;width:100%;height:100%;object-fit:contain}
#main-menu .ik-aldan{width:140%;aspect-ratio:1783/1982;left:3%;top:-8%;opacity:.4;z-index:0}
#main-menu .ik-raiku{width:40%;aspect-ratio:500/707;left:3%;bottom:-12%;z-index:1}
#main-menu .ik-reito{width:52%;aspect-ratio:697/797;left:15%;bottom:-7%;z-index:2}
#main-menu .ik-neon{width:66%;aspect-ratio:757/1026;right:1%;bottom:-29%;z-index:3}
#main-menu[data-screen=title] .ik-aldan img{animation:ik-shadow-rise 1.8s .05s both}
#main-menu[data-screen=title] .ik-raiku img{--entry-x:-65px;animation:ik-warrior-enter 1.05s .2s cubic-bezier(.16,.85,.22,1) both}
#main-menu[data-screen=title] .ik-reito img{--entry-x:45px;animation:ik-warrior-enter 1.1s .4s cubic-bezier(.16,.85,.22,1) both}
#main-menu[data-screen=title] .ik-neon img{--entry-x:110px;animation:ik-warrior-enter 1.15s .6s cubic-bezier(.16,.85,.22,1) both}
#main-menu .ik-slash{position:absolute;left:5%;top:57%;width:38%;height:2px;opacity:0;background:linear-gradient(90deg,transparent,#d62d38,#f6bbc1,transparent);transform:rotate(-13deg);box-shadow:0 0 18px #c9243980}
#main-menu[data-screen=title] .ik-slash{animation:ik-sword-trace .85s .75s both}
#main-menu #mm-title{padding:0;display:block;z-index:2}
#main-menu .ik-title-copy{position:absolute;left:5.5%;top:50%;transform:translateY(-50%);width:30%;max-width:510px;display:flex;align-items:center;flex-direction:column;gap:13px}
#main-menu .ik-title-logo{display:block;width:100%;height:auto;clip-path:inset(0 2px 0 0);mix-blend-mode:screen;animation:ik-logo-enter 1.2s .65s cubic-bezier(.16,.85,.22,1) both}
#main-menu #mm-title .mm-prompt{margin:0;gap:18px;width:100%;animation:ik-prompt-enter .6s 1.45s both}
#main-menu #mm-title .mm-press{display:block;font:clamp(10px,1.3vw,18px)/1.6 var(--font-key);letter-spacing:.09em;color:#df333c;text-shadow:0 0 15px #b6152844;animation:ik-prompt-pulse 2.6s 2.1s ease-in-out infinite;padding:10px 3px;white-space:nowrap}
#main-menu #mm-title .mm-press::before,#main-menu #mm-title .mm-press::after{display:none}
#main-menu #mm-title.loading .mm-press{font-size:clamp(8px,1vw,13px);opacity:.65;animation:none}
#main-menu #mm-title .mm-load{width:65%;height:2px;background:#ffffff0a;border:0}
#main-menu #mm-title .mm-load i{background:linear-gradient(90deg,transparent,#be2937,#efd8d8)}
#main-menu #mm-title .mm-foot{position:absolute;bottom:21px;left:5.5%;right:4%;width:auto;font:10px var(--font-body);letter-spacing:.15em;color:#6f6670;animation:ik-prompt-enter .7s 1.7s both}
#main-menu #mm-main{padding:0 5.5%;z-index:2;align-items:center}
#main-menu #mm-main .mm-side{flex:0 0 33%;max-width:440px;min-width:285px;gap:3px;position:relative}
#main-menu #mm-main .mm-mark{width:100%;max-width:410px;margin:0 0 clamp(8px,2vh,24px);filter:none;clip-path:inset(0 2px 0 0);mix-blend-mode:screen}
#main-menu #mm-main .mm-item{padding:12px 14px 12px 19px;min-height:64px;clip-path:none;background:linear-gradient(90deg,#000b,#0000);border:0;border-left:2px solid #5d263233;border-bottom:1px solid #ffffff09;gap:13px;isolation:isolate}
#main-menu #mm-main .mm-item::before{background:linear-gradient(90deg,#b61c2b2b,#681a1810,transparent);transform:scaleX(0)}
#main-menu #mm-main .mm-item.focus,#main-menu #mm-main .mm-item:hover{transform:translateX(8px);border-left-color:#df333c}
#main-menu #mm-main .mm-item:hover:not(.focus){transform:none;border-left-color:#5d263233}
#main-menu #mm-main .mm-item.focus::before{transform:scaleX(1)}
#main-menu #mm-main .mm-item strong,#main-menu #mm-main .mm-item.go strong{font:600 clamp(22px,2.2vw,34px)/1.05 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#d8d5d8;text-shadow:none}
#main-menu #mm-main .mm-item small{font-size:11px;letter-spacing:.09em;color:#817b86;margin-top:4px;text-transform:none}
#main-menu #mm-main .mm-item.focus strong{color:#fff}
#main-menu #mm-main .mm-item.focus small{color:#b89ca5}
#main-menu #mm-main .mm-item .mm-glyph{width:23px;height:auto;flex:0 0 23px;font-size:18px;transform:none;border:0;background:none;box-shadow:none;animation:none;color:#7f3745}
#main-menu #mm-main .mm-item .mm-glyph b{transform:none}
#main-menu #mm-main .mm-item.focus .mm-glyph{transform:none;border:0;background:none;color:#ed3d4b;box-shadow:none}
#main-menu #mm-main .mm-prev{display:block;position:absolute;bottom:54px;right:5%;padding:0;pointer-events:none;opacity:.6}
#main-menu .ik-menu-motto{font:12px/1.6 var(--font-body);letter-spacing:.25em;color:#94858d;text-align:right;margin:0}
#main-menu .ik-menu-motto b{color:#bc8f9c;font-weight:500}
#main-menu[data-screen=main] .ik-cast{transform:translateX(3%);filter:brightness(.8)}
#main-menu[data-screen=main] .mm-hints{background:linear-gradient(0deg,#000b,transparent)}
@keyframes ik-shadow-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ik-warrior-enter{from{opacity:0;transform:translate(var(--entry-x),24px)}to{opacity:1;transform:none}}
@keyframes ik-logo-enter{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

@keyframes ik-sword-trace{0%{opacity:0;transform:translateX(-60%) rotate(-13deg) scaleX(.3)}35%{opacity:.9}100%{opacity:0;transform:translateX(55%) rotate(-13deg) scaleX(1.1)}}
@keyframes ik-prompt-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes ik-prompt-pulse{0%,100%{opacity:1}50%{opacity:.7}}
@media(max-height:760px){
 #main-menu #mm-main .mm-side{min-width:260px;gap:1px}
 #main-menu #mm-main .mm-mark{max-width:300px;margin-bottom:4px}
 #main-menu #mm-main .mm-item{padding:8px 10px 8px 16px;min-height:51px}
 #main-menu #mm-main .mm-item strong,#main-menu #mm-main .mm-item.go strong{font-size:25px}
 #main-menu #mm-main .mm-item small{font-size:10px;margin-top:2px}
 #main-menu #mm-main .mm-prev{bottom:50px}
}
@media(max-width:1000px){
 #main-menu .ik-title-copy{left:4%;width:33%}
 #main-menu .ik-cast{left:34%;right:-9%}
 #main-menu #mm-main .mm-side{flex-basis:36%;min-width:265px}
 #main-menu #mm-main .mm-item small{max-width:260px}
 #main-menu #mm-title .mm-foot{font-size:9px}
}
@media(max-width:800px){
 #main-menu .ik-title-copy{left:4%;width:39%}
 #main-menu .ik-cast{left:31%;right:-25%}
 #main-menu #mm-main{flex-direction:row;justify-content:flex-start}
 #main-menu #mm-main .mm-side{flex:0 0 40%;width:auto;min-width:245px}
 #main-menu #mm-main .mm-prev{display:none}
}
#main-menu.ik-reduced-motion .ik-figure img,#main-menu.ik-reduced-motion .ik-title-logo,
#main-menu.ik-reduced-motion #mm-title .mm-prompt,#main-menu.ik-reduced-motion #mm-title .mm-foot,
#main-menu.ik-reduced-motion #mm-title .mm-press{animation:none!important;opacity:1;transform:none;filter:none}
#main-menu.ik-reduced-motion .ik-slash{display:none}
@media(prefers-reduced-motion:reduce){
 #main-menu .ik-figure img,#main-menu .ik-title-logo,#main-menu #mm-title .mm-prompt,#main-menu #mm-title .mm-foot,#main-menu #mm-title .mm-press{animation:none!important;opacity:1;transform:none;filter:none}
 #main-menu .ik-slash{display:none}#main-menu .ik-cast{transition:none}
 #main-menu #mm-main [data-in]{animation:none!important;opacity:1;transform:none}
}

/* Main menu composition: logo, five clean choices and the supplied crest. */
#main-menu .ik-menu-cloud{display:none;position:absolute;left:0;bottom:-21.5vh;width:48vw;height:auto;pointer-events:none;z-index:2;mask-image:linear-gradient(90deg,#000 40%,transparent 80%);-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 80%)}
#main-menu[data-screen=main] .ik-menu-cloud{display:block;animation:ik-cloud-enter 1.2s .15s both}
#main-menu[data-screen=main] .ik-aura,#main-menu[data-screen=main] .mm-grain{display:none}
#main-menu[data-screen=main] .mm-shade{background:linear-gradient(90deg,#000 0%,#0009 28%,transparent 43%)}
#main-menu[data-screen=main] .ik-cast{inset:0;transform:none;filter:none}
#main-menu[data-screen=main] .ik-aldan{width:139vh;left:42%;top:-8.5vh;opacity:.62}
#main-menu[data-screen=main] .ik-raiku{width:47.2vh;left:36.2%;bottom:-13vh}
#main-menu[data-screen=main] .ik-reito{width:61.9vh;left:45.8%;bottom:-9.2vh}
#main-menu[data-screen=main] .ik-neon{width:77.8vh;right:0;bottom:-33.5vh}
#main-menu #mm-main{padding:0;align-items:stretch}
#main-menu #mm-main .mm-side{position:absolute;left:5%;top:5.7%;width:26.2%;max-width:none;min-width:0;gap:0;flex:none}
#main-menu #mm-main .mm-mark{width:100%;max-width:none;margin:0 0 7.2vh;flex:none}
#main-menu #mm-main .mm-item{width:100%;height:8.6vh;min-height:44px;padding:0 0 0 7.8vw;gap:0;background:none;border:0;border-radius:0;clip-path:none;transform:none;transition:color .15s;isolation:auto}
#main-menu #mm-main .mm-item::before,#main-menu #mm-main .mm-item::after{display:none}
#main-menu #mm-main .mm-item:is(.focus,:hover,:focus-visible){transform:none;background:none;border:0;outline:none}
#main-menu #mm-main .mm-item strong,#main-menu #mm-main .mm-item.go strong{font:400 clamp(23px,4.45vh,52px)/1.2 var(--font-body);letter-spacing:.025em;text-transform:uppercase;color:#d4d1d3;text-shadow:none;white-space:nowrap}
#main-menu #mm-main .mm-item.focus strong,#main-menu #mm-main .mm-item:focus-visible strong{color:#ef9800}
#main-menu #mm-main .mm-item small{display:none}
#main-menu #mm-main .mm-item .mm-glyph,#main-menu #mm-main .mm-item.focus .mm-glyph{display:block;position:absolute;left:0;top:50%;width:7.2vw;height:auto;max-width:132px;transform:translateY(-50%);opacity:0;visibility:hidden;border:0;background:none;box-shadow:none;animation:none;transition:opacity .15s}
#main-menu #mm-main .mm-item.focus .mm-glyph,#main-menu #mm-main .mm-item:focus-visible .mm-glyph{opacity:1;visibility:visible}
#main-menu #mm-main .mm-prev,#main-menu[data-screen=main] .mm-hints{display:none!important}
#main-menu #mm-options .mm-head h2,#main-menu #mm-controls .mm-head h2{font-family:var(--font-body);text-shadow:none}
#main-menu #mm-options .mm-opt2 strong{font-family:var(--font-body);font-weight:400;text-transform:uppercase}
/* Keep the illustrated menu clean; the saved CRT setting still applies in battle. */
body.menu-open:has(#main-menu[data-screen=main]:not([hidden])) #crt-overlay{display:none}
@keyframes ik-cloud-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(max-height:640px){
 #main-menu #mm-main .mm-mark{margin-bottom:5vh}
 #main-menu #mm-main .mm-item{height:9.2vh}
}
@media(max-width:800px){
 #main-menu #mm-main .mm-side{left:4%;width:34%;min-width:0}
 #main-menu #mm-main .mm-item{padding-left:9vw}
 #main-menu #mm-main .mm-item strong,#main-menu #mm-main .mm-item.go strong{font-size:clamp(20px,3.8vh,30px)}
 #main-menu #mm-main .mm-item .mm-glyph{width:8vw}
 #main-menu .ik-menu-cloud{width:45vw}
}
#main-menu.ik-reduced-motion .ik-menu-cloud{animation:none!important;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#main-menu .ik-menu-cloud{animation:none!important;opacity:1;transform:none}}

/* One splash from the first paint; its artwork becomes the main menu. */
body.menu-open #start-screen{visibility:hidden;pointer-events:none}
body.menu-open:has(#main-menu:is([data-screen=title],[data-screen=main]):not([hidden])) #crt-overlay{display:none}
#main-menu .ik-handoff-logo{position:absolute;z-index:5;pointer-events:none;transform-origin:top left;mix-blend-mode:screen;clip-path:inset(0 2px 0 0)}
#main-menu .ik-title-logo,#main-menu #mm-main .mm-mark{aspect-ratio:495/228}
#main-menu.ik-handoff .ik-figure{transform-origin:top left;will-change:transform,opacity}
#main-menu.ik-handoff #mm-main .mm-mark{animation:none!important;opacity:0}
#main-menu.ik-handoff #mm-title{transform:none;transition:opacity .24s ease,visibility 0s .24s}
#main-menu.ik-handoff #mm-title .ik-title-logo{visibility:hidden}
#main-menu.ik-handoff #mm-main{transition:none;opacity:1;transform:none}
#main-menu #mm-main.on .mm-item{animation:ik-menu-reveal .42s cubic-bezier(.22,.75,.2,1) both;animation-delay:calc(.22s + var(--i)*.055s)}
@keyframes ik-menu-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#main-menu.ik-reduced-motion #mm-main.on .mm-item{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#main-menu #mm-main.on .mm-item{animation:none;opacity:1;transform:none}}

/* Decode first, then animate transform/opacity without full-size blur repaints. */
#main-menu.ik-intro-pending .ik-figure img,#main-menu.ik-intro-pending .ik-title-logo,
#main-menu.ik-intro-pending #mm-title .mm-prompt,#main-menu.ik-intro-pending #mm-title .mm-foot{animation:none!important;opacity:0!important}
#main-menu.ik-intro-pending .ik-slash{animation:none!important;opacity:0}
#main-menu.ik-intro-running .ik-figure img,#main-menu.ik-intro-running .ik-title-logo{will-change:transform,opacity}
#main-menu.ik-intro-complete .ik-figure img,#main-menu.ik-intro-complete .ik-title-logo,
#main-menu.ik-intro-complete #mm-title .mm-prompt,#main-menu.ik-intro-complete #mm-title .mm-foot{animation:none!important;opacity:1;transform:none;filter:none}