/* The portal opens as an arcade title screen, before the ordinary site navigation. */
.title-screen.hero{height:100svh;min-height:640px;max-height:1080px;position:relative;overflow:hidden;background:#060d27;border:0;isolation:isolate}
.title-backdrop,.title-shade,.title-sparks,.title-cast,.title-wipe{position:absolute;inset:0;pointer-events:none}
.title-backdrop{background:url('assets/arcade-title-bg.webp') center 55%/cover no-repeat;image-rendering:pixelated;z-index:-4;animation:title-reveal 1.2s ease-out both}
.title-shade{z-index:-3;background:linear-gradient(0deg,#060e29 0%,transparent 20%,#060e2930 75%,#050c20aa 100%)}
.title-screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,transparent 0 3px,#02092318 3px 4px);box-shadow:inset 0 0 0 6px #0a1535,inset 0 0 0 8px #59719066}
.title-hud{position:absolute;top:max(27px,env(safe-area-inset-top));left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;gap:15px;font-family:var(--pixel);font-size:17px;color:#b2d9ea;letter-spacing:.08em;z-index:6}.title-hud b{color:#f5d284;font-weight:500;margin-left:12px}.sound-toggle{background:#0a1b3baa;border:1px solid #61839b;color:#b5c9dd;border-radius:0;font-family:var(--pixel);font-size:12px;letter-spacing:.08em;padding:8px 11px;min-height:38px;display:flex;align-items:center;gap:9px}.sound-toggle[aria-pressed=true]{color:#fbe59d;border-color:#d2b965}.sound-toggle:hover{background:#213554}.sound-icon{font-family:monospace;font-size:18px}.title-content{position:relative;margin:0 auto;padding-top:clamp(95px,12.5svh,145px);width:min(980px,86%);text-align:center;z-index:3}.title-opening{font-family:var(--display);font-size:14px;font-weight:400;letter-spacing:.22em;color:#dee7e7;margin:0 0 22px;text-shadow:2px 2px #07182f}.title-logo#hero-heading{width:min(900px,100%);height:min(25svh,240px);margin:0 auto;line-height:1;animation:logo-entrance .9s cubic-bezier(.18,.67,.27,1) both;filter:drop-shadow(2px 0 0 #ffdf9a) drop-shadow(-2px 0 0 #ffdf9a) drop-shadow(0 -2px 0 #ffdf9a) drop-shadow(0 3px 0 #ffdf9a) drop-shadow(0 9px 0 #59233f) drop-shadow(0 16px 0 #050c28)}.title-logo img{width:100%;height:100%;object-fit:contain}.title-subtitle{display:flex;align-items:center;justify-content:center;gap:24px;position:relative;margin:-1px 0 0}.title-subtitle strong{font-family:var(--pixel);font-size:clamp(36px,4vw,57px);font-weight:700;line-height:1.15;letter-spacing:.16em;color:#ffe59b;text-shadow:0 3px #a35957,0 6px #4b2147,3px 6px #07122e}.title-subtitle>span{color:#8de5ed;font-family:var(--pixel);font-size:23px;text-shadow:3px 3px #183a5b}.title-jp{font-family:var(--display);color:#c8d6e5;font-size:12px;letter-spacing:.24em;margin:16px 0 0;text-shadow:2px 2px #07142e}.title-menu{display:flex;flex-direction:column;align-items:center;margin-top:clamp(35px,6.5svh,75px);gap:23px}.press-start{display:flex;align-items:center;justify-content:center;gap:24px;color:#fff1ad;padding:13px 30px;min-height:98px;position:relative;text-shadow:3px 3px #74414e,5px 5px #04112e;outline-offset:8px;background:#06133080;border-top:2px solid #839cc344;border-bottom:2px solid #839cc344;transition:background .2s,transform .2s}.press-start:before,.press-start:after{content:'';width:9px;height:9px;position:absolute;left:0;top:-2px;border-left:2px solid #91b5c6;border-top:2px solid #91b5c6}.press-start:after{left:auto;top:auto;right:0;bottom:-2px;border:0;border-right:2px solid #91b5c6;border-bottom:2px solid #91b5c6}.press-start>span:nth-child(2){display:flex;align-items:center;flex-direction:column;gap:8px}.press-start strong{font-family:var(--pixel);font-weight:600;line-height:1;font-size:42px;letter-spacing:.09em;animation:start-breathe 2.8s ease-in-out infinite}.press-start small{font-family:var(--display);font-size:12px;font-weight:400;letter-spacing:.12em;color:#deebeb;text-shadow:2px 2px #07172f}.start-arrow{font-family:var(--pixel);font-size:18px;color:#8be3df;animation:cursor-nudge 1.4s steps(2,end) infinite}.start-arrow.right{animation-direction:reverse}.press-start:hover{background:#234667bd;transform:translateY(-3px)}.press-start:hover strong{animation:none;color:#fff9d3}.title-guide{font-family:var(--display);font-size:14px;font-weight:400;color:#d9dde0;display:flex;gap:10px;align-items:center;min-height:44px;padding:3px 18px;text-shadow:2px 2px #07152a}.title-guide>span{color:#f6d58d;border:1px solid #9b9f9b;font-family:var(--pixel);font-size:17px;width:24px;height:24px;display:grid;place-items:center;background:#0d2442;line-height:1}.title-guide:hover{color:#ffdf93}.title-cast{z-index:2}.cast{position:absolute;bottom:142px;animation:cast-float 4s ease-in-out infinite;isolation:isolate}.cast img{position:relative;object-fit:contain;width:100%;height:100%;filter:drop-shadow(4px 6px 0 #070d29aa)}.cast-appa{left:6.5%;width:clamp(150px,18vw,250px);height:clamp(155px,19vw,260px);animation-delay:-.7s}.cast-appa img{image-rendering:pixelated}.cast-senpai{right:1%;width:clamp(270px,29vw,420px);height:clamp(170px,19vw,265px);animation-delay:-2.1s}.cast-shadow{position:absolute;width:70%;height:18px;left:15%;bottom:3px;background:#030a2399;box-shadow:8px 0 #030a2355,-8px 0 #030a2355;z-index:-1}.cast-name{position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);color:#95bdd0;font-family:var(--pixel);font-size:12px;letter-spacing:.14em;background:#08172e88;padding:2px 13px}.title-bottom{position:absolute;bottom:max(27px,env(safe-area-inset-bottom));left:5%;right:5%;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:25px;z-index:6}.title-free{font-family:var(--pixel);font-size:22px;color:#e4cf8e;letter-spacing:.08em;line-height:1.3}.title-free small{font-family:var(--display);font-size:9px;color:#a4bdc5;display:block;margin-top:6px;letter-spacing:.06em}.title-credit{font-family:var(--pixel);font-size:12px;color:#829db3;letter-spacing:.06em;white-space:nowrap}.title-skip{justify-self:end;font-family:var(--display);font-size:11px;color:#a2bed3;padding:12px 0 4px;min-height:40px}.title-skip:hover{color:#ffe7a5}.title-sparks{z-index:1;overflow:hidden}.title-sparks i{position:absolute;bottom:-20px;width:3px;height:3px;background:#fbe9ae;box-shadow:3px 0 #ddb76988,0 3px #ddb76988;animation:mote-rise 12s linear infinite;left:16%}.title-sparks i:nth-child(2){left:22%;animation-delay:-7s;animation-duration:14s;background:#8ad8e6}.title-sparks i:nth-child(3){left:39%;animation-delay:-4s;animation-duration:17s}.title-sparks i:nth-child(4){left:75%;animation-delay:-11s;animation-duration:13s}.title-sparks i:nth-child(5){left:57%;animation-delay:-6s;animation-duration:15s;background:#7ecde1}.title-sparks i:nth-child(6){left:85%;animation-delay:-3s;animation-duration:11s}.title-sparks i:nth-child(7){left:9%;animation-delay:-9s;animation-duration:18s}.title-sparks i:nth-child(8){left:65%;animation-delay:-13s;animation-duration:20s;background:#aed2ee}.title-sparks i:nth-child(9){left:45%;animation-delay:-15s;animation-duration:21s}.title-sparks i:nth-child(10){left:29%;animation-delay:-5s;animation-duration:13s}.title-sparks i:nth-child(11){left:92%;animation-delay:-16s;animation-duration:17s}.title-sparks i:nth-child(12){left:70%;animation-delay:-9s;animation-duration:12s}.title-wipe{z-index:10;background:#08142c;opacity:0;transition:opacity .28s ease-in;visibility:hidden}.is-starting .title-wipe{opacity:1;visibility:visible}.is-starting .press-start{transform:scale(1.04)}.is-offscreen *{animation-play-state:paused!important}.site-header{border-top:2px solid #6e8c9c;box-shadow:none}.games-section #games-heading:focus{outline:none}
@keyframes start-breathe{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes cursor-nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes cast-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mote-rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}85%{opacity:.8}100%{transform:translate(24px,-90svh);opacity:0}}
@keyframes logo-entrance{from{opacity:0;transform:translateY(-22px) scale(1.06)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes title-reveal{from{opacity:.35}to{opacity:1}}
@media(max-height:800px) and (min-width:761px){.title-screen.hero{min-height:610px}.title-content{padding-top:85px}.title-opening{margin-bottom:16px;font-size:12px}.title-logo#hero-heading{height:22svh;min-height:130px}.title-subtitle strong{font-size:44px}.title-jp{margin-top:12px;font-size:11px}.title-menu{margin-top:32px;gap:13px}.press-start{min-height:87px;padding-top:10px;padding-bottom:10px}.press-start strong{font-size:38px}.cast{bottom:110px}.cast-appa{width:170px;height:180px;left:5%}.cast-senpai{width:310px;height:195px;right:0}.title-bottom{bottom:21px}}
@media(max-width:1050px) and (min-width:761px){.title-content{width:85%}.title-logo#hero-heading{height:22svh}.title-subtitle strong{font-size:44px}.cast-appa{left:2%;width:150px;height:158px}.cast-senpai{right:-4%;width:280px;height:185px}.press-start{gap:19px;padding-left:22px;padding-right:22px}.press-start strong{font-size:36px}}
@media(max-width:760px){.title-screen.hero{height:100svh;min-height:640px;max-height:1000px}.title-screen:after{box-shadow:inset 0 0 0 4px #0a1535,inset 0 0 0 5px #59719066}.title-backdrop{background-position:center center;background-size:auto 100%}.title-shade{background:linear-gradient(0deg,#050e29 0%,#060e2944 18%,transparent 55%,#06102b55 100%)}.title-hud{top:max(20px,env(safe-area-inset-top));left:22px;right:22px;font-size:12px;letter-spacing:.04em}.title-hud b{display:block;margin:2px 0 0;color:#97c8d7;font-size:10px;letter-spacing:.16em}.sound-toggle{font-size:10px;min-height:37px;padding:7px 9px;gap:6px}.sound-icon{font-size:15px}.title-content{padding-top:clamp(95px,16svh,160px);width:calc(100% - 37px);position:relative}.title-opening{font-size:11px;letter-spacing:.1em;margin-bottom:20px}.title-logo#hero-heading{height:auto;min-height:0;width:100%;aspect-ratio:1400/377;filter:drop-shadow(1px 0 #ffdf9a) drop-shadow(-1px 0 #ffdf9a) drop-shadow(0 -1px #ffdf9a) drop-shadow(0 2px #ffdf9a) drop-shadow(0 5px #59233f) drop-shadow(0 9px #050c28)}.title-subtitle{gap:11px;margin-top:7px}.title-subtitle strong{font-size:clamp(27px,8vw,43px);letter-spacing:.09em;text-shadow:0 2px #a35957,0 4px #4b2147,2px 4px #07122e}.title-subtitle>span{font-size:15px}.title-jp{font-size:9px;letter-spacing:.13em;margin-top:12px}.title-menu{margin-top:clamp(113px,20svh,190px);gap:15px}.press-start{min-height:87px;padding:11px 18px;gap:16px;width:min(342px,100%);background:#061330ba}.press-start strong{font-size:clamp(27px,8.4vw,37px);letter-spacing:.06em}.press-start small{font-size:11px;letter-spacing:.1em}.start-arrow{font-size:14px}.title-guide{font-size:12px;min-height:42px;gap:9px}.title-guide>span{width:21px;height:21px;font-size:15px}.title-cast{z-index:2;top:calc(clamp(95px,16svh,160px) + 23vw + 100px);height:135px;bottom:auto}.cast{bottom:0}.cast-appa{width:104px;height:108px;left:calc(50% - 123px)}.cast-senpai{width:193px;height:125px;right:calc(50% - 158px)}.cast-shadow{height:10px;bottom:2px}.cast-name{font-size:9px;bottom:-15px;padding:1px 7px}.title-bottom{bottom:max(20px,env(safe-area-inset-bottom));left:24px;right:24px;grid-template-columns:1fr auto;gap:12px}.title-free{font-size:17px}.title-free small{font-size:8px;margin-top:4px}.title-credit{font-size:9px;align-self:center;text-align:right}.title-skip{grid-column:1/-1;justify-self:center;padding:4px;min-height:30px;font-size:9px;color:#9ab6c9;display:none}.title-sparks i{width:2px;height:2px}}
@media(max-width:760px) and (max-height:720px){.title-screen.hero{min-height:570px}.title-content{padding-top:85px}.title-opening{margin-bottom:15px;font-size:10px}.title-menu{margin-top:120px;gap:10px}.title-cast{top:calc(85px + 23vw + 79px);height:110px}.cast-appa{width:88px;height:92px;left:calc(50% - 110px)}.cast-senpai{width:168px;height:108px;right:calc(50% - 139px)}.press-start{min-height:78px}.title-guide{font-size:11px}.title-bottom{bottom:18px}.title-free{font-size:15px}.title-credit{font-size:8px}.title-jp{margin-top:9px}}
@media(max-width:365px){.title-hud{left:18px;right:18px}.title-content{width:calc(100% - 30px)}.title-opening{font-size:10px}.title-subtitle strong{font-size:26px}.title-subtitle{gap:9px}.title-jp{font-size:8px;letter-spacing:.08em}.press-start{gap:11px;padding-left:12px;padding-right:12px;width:calc(100% - 12px)}.press-start strong{font-size:28px}.press-start small{font-size:10px}.title-bottom{left:20px;right:20px}.title-credit{font-size:8px}}
@media(prefers-reduced-motion:reduce){.title-screen *,.title-screen:after{animation:none!important;transition:none!important}.title-wipe{display:none}.press-start strong{opacity:1}}
.press-start strong{white-space:nowrap}
@media(max-width:365px){.press-start strong{font-size:26px;letter-spacing:.03em}.press-start{gap:10px;padding-left:10px;padding-right:10px}}
@media(max-height:480px) and (min-width:481px){
 .title-screen.hero{height:100svh;min-height:340px;max-height:none}
 .title-hud{top:14px;left:22px;right:22px;font-size:11px}.title-hud b{display:inline;margin-left:8px;font-size:10px}.sound-toggle{min-height:30px;padding:4px 8px;font-size:9px}
 .title-content{padding-top:53px;width:65%}.title-opening{display:none}.title-logo#hero-heading{height:26svh;min-height:0;max-height:110px;width:100%;aspect-ratio:auto}
 .title-subtitle{margin-top:4px;gap:12px}.title-subtitle strong{font-size:27px}.title-subtitle>span{font-size:14px}.title-jp{margin-top:6px;font-size:8px}
 .title-menu{margin-top:15px;gap:3px}.press-start{min-height:60px;padding:7px 15px;width:auto;gap:18px}.press-start strong{font-size:27px}.press-start small{font-size:9px}.press-start>span:nth-child(2){gap:5px}.start-arrow{font-size:12px}.title-guide{min-height:30px;font-size:10px}.title-guide>span{width:17px;height:17px;font-size:12px}
 .title-cast{inset:0;height:auto}.cast{bottom:63px}.cast-appa{left:3%;width:86px;height:90px}.cast-senpai{right:0;width:160px;height:100px}.cast-name{font-size:8px;bottom:-14px}
 .title-bottom{bottom:15px;left:24px;right:24px;grid-template-columns:1fr auto}.title-free{font-size:13px}.title-free small,.title-skip{display:none}.title-credit{font-size:8px}
}