@charset "UTF-8";
@font-face{font-family:"Azure Catch jp";src:url("/assets/fonts/catchphrase-jp.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Azure Catch sc";src:url("/assets/fonts/catchphrase-sc.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Azure Catch tc";src:url("/assets/fonts/catchphrase-tc.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Azure Catch en";src:url("/assets/fonts/catchphrase-en.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Azure Catch en-italic";src:url("/assets/fonts/catchphrase-en-italic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap}

:root{--navy:#07131e;--ink:#102b3b;--cyan:#9ad9eb;--paper:#edf2f3;--line:#7dacc140;--header:116px;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 20px)}body{margin:0;background:var(--navy);color:#f4f8fa;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic","Microsoft JhengHei","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{color:inherit;border:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;object-fit:cover}figure,p{margin:0}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #168eaf;outline-offset:5px}.wrap{width:min(1100px,90%);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;z-index:100;top:-80px;left:16px;background:var(--paper);color:var(--ink);padding:14px}.skip:focus{top:10px}.initial{padding:15vh 8%;min-height:80vh}.initial h1{font-size:48px}.initial a{display:inline-block;margin-top:30px;color:var(--cyan)}
.site-header{position:sticky;top:0;z-index:30;background:var(--navy)}.masthead{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{position:relative;display:block;width:250px;height:40px;overflow:hidden;flex-shrink:0}.brand-logo{position:absolute;top:50%;width:100%;height:auto;transform:translateY(-50%)}.header-actions{display:flex;align-items:center;gap:24px}.button{display:inline-flex;justify-content:center;align-items:center;gap:24px;min-height:50px;padding:14px 22px;background:var(--cyan);color:var(--navy);font-weight:700;font-size:13px;line-height:1.5;transition:background .2s}.button:hover{background:#c3ebf4}.button-small{min-height:38px;padding:9px 16px;font-size:12px;gap:15px}.button-ghost{background:transparent;color:#fff;border:1px solid #7997aa}.button-ghost:hover{background:#183c50}.main-nav{border-block:1px solid var(--line)}.nav-inner{display:flex;justify-content:space-between;height:45px;gap:24px;overflow:auto;scrollbar-width:none}.nav-inner::-webkit-scrollbar{display:none}.main-nav a{display:flex;align-items:center;white-space:nowrap;font-size:12px;position:relative;color:#b6c6d0;min-height:45px}.main-nav a b{font-weight:500}.main-nav a:hover,.main-nav a.active{color:#fff}.main-nav a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--cyan)}
.hero{padding-top:24px}.hero-art{width:min(1100px,100%);margin:auto}.hero-art img{width:100%;height:auto;aspect-ratio:92/43;object-fit:contain}.hero-inner{padding-block:28px 48px;text-align:center}.hero-description{font-size:14px;line-height:1.9;color:#c0ced7;max-width:760px;margin-inline:auto}.hero-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:24px}
.section{padding-block:64px;scroll-margin-top:8px;overflow:hidden}.section-light{background:var(--paper);color:var(--ink);color-scheme:light}.section-dark{background:var(--navy)}h2{font-size:28px;line-height:1.4;margin:0 0 28px;font-weight:600}.section-label{margin-bottom:32px}.story-layout{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}.prose{font-size:14px;line-height:2;color:#405966}.prose p+p{margin-top:20px}.story-visual img{width:100%;height:auto}.system-layout{display:grid;grid-template-columns:1.13fr 1fr;gap:40px;align-items:start}.media-frame img{width:100%;height:auto;aspect-ratio:16/9}.system-features article+article,.mecha-features article+article{margin-top:22px}.system-features p,.mecha-features p{font-size:14px;line-height:1.9;color:#b6c9d4}.section-intro{max-width:820px;font-size:14px;line-height:1.9;color:#4b6470}.character-stage{margin-top:16px;background:#dbe8f5;min-height:180px}.character-stage img{width:100%;height:auto;object-fit:contain;max-height:760px}.text-link{font-size:12px;line-height:1.8;text-decoration:underline;text-underline-offset:4px}.text-link:hover{color:#168ca8}.mecha-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}.spec-note{margin-top:28px;font-size:14px;line-height:1.9;color:#b6c9d4}.gallery-main img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.gallery-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}.gallery-choice{padding:3px;background:transparent;border:2px solid transparent;min-width:0;opacity:.6}.gallery-choice.selected{border-color:#0f7f9d;opacity:1}.gallery-choice:hover{opacity:1}.gallery-choice img{width:100%;height:auto;aspect-ratio:16/9}.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}.product-image{width:100%;max-width:460px;height:auto;margin-bottom:24px}.product-layout dl{margin:0}.product-layout dl>div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.8}.product-layout dl>div:first-child{padding-top:0}.product-layout dt{font-size:12px;color:#9eb8c7}.product-layout dd{margin:0}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:30px;font-size:11px;color:#94adba;border-top:1px solid var(--line)}.site-footer p{line-height:1.8}.mobile-steam{display:none}.noscript{padding:20px;text-align:center}.noscript a{text-decoration:underline}
dialog{background:#0b1c28;color:#fff;border:1px solid #4a7285;padding:22px;width:min(1050px,94vw);max-height:94svh;overflow:auto}dialog::backdrop{background:#020b13e8}body:has(dialog[open]){overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.dialog-header h2{margin:0;font-size:17px}.close-button{padding:10px 14px;border:1px solid #43677a;background:transparent;font-size:12px;display:flex;gap:13px;align-items:center}.close-button span{font-size:22px}dialog video{width:100%;aspect-ratio:16/9;background:#000;display:block}dialog .text-link{display:inline-block;margin-top:15px;color:#b5d8e8}#video-message{font-size:12px;color:#b3cfdb;line-height:1.7;margin-top:10px}#video-message:empty{display:none}
@media(max-width:900px){.header-actions{gap:16px}.story-layout,.system-layout,.mecha-layout{gap:30px}.product-layout{gap:35px}.product-layout dl>div{grid-template-columns:100px 1fr}.nav-inner{gap:20px}.main-nav a{font-size:11px}.section{padding-block:54px}}
@media(max-width:760px){:root{--header:106px}.masthead{height:60px;gap:12px}.brand{width:min(210px,52vw);height:32px}.header-steam{display:none}.header-actions{gap:0}.nav-inner{width:100%;padding-inline:5%;justify-content:flex-start;gap:24px}.main-nav a{font-size:12px}.hero{padding-top:0}.hero-inner{padding-block:22px 36px}.hero-description{font-size:13px;line-height:1.8;text-align:left}.hero-buttons{margin-top:22px;gap:10px}.button{font-size:12px;min-height:48px;padding:13px 18px;gap:14px}.section{padding-block:42px}h2{font-size:25px}.section-label{margin-bottom:25px}.story-layout,.system-layout,.mecha-layout,.product-layout{grid-template-columns:1fr;gap:26px}.prose,.system-features p,.mecha-features p,.section-intro,.spec-note{font-size:13px;line-height:1.9}.character-stage img{max-height:none}.gallery-choices{gap:4px;margin-top:8px}.gallery-choice{padding:1px}.product-image{max-width:460px}.product-layout dl>div{padding:14px 0;grid-template-columns:100px 1fr;gap:15px;font-size:12px}.product-layout dt{font-size:11px}.site-footer{flex-wrap:wrap;padding-block:25px 90px;gap:16px}.site-footer p{font-size:10px}.site-footer .text-link{font-size:11px}.mobile-steam{position:fixed;z-index:35;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:15px 5% calc(15px + env(safe-area-inset-bottom));background:var(--cyan);color:var(--navy);font-size:12px;font-weight:700}dialog{padding:14px}.dialog-header h2{font-size:14px}.close-button{font-size:11px;padding:7px 10px}.dialog-header{gap:10px}dialog .text-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Fine borders and corner details, kept separate from the game artwork. */
.button{position:relative;box-shadow:inset 0 0 0 1px #c9ecf333}
.button:hover{box-shadow:inset 0 0 0 1px #e7faff88}
.media-frame{position:relative;padding:7px;border:1px solid var(--line);background:#0d202d}
.media-frame:before,.media-frame:after{content:"";position:absolute;width:18px;height:18px;pointer-events:none;border-color:#9ad9eb99;border-style:solid}
.media-frame:before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.media-frame:after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.spec-note{border-left:2px solid #82bace;padding:16px 22px;background:#102533}
.carousel{position:relative}
.character-stage{margin-top:28px}
.carousel-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:48px;height:64px;display:grid;place-items:center;background:#07131edb;color:#fff;border:1px solid #aec7d080;box-shadow:0 2px 10px #0002;transition:background .2s,border-color .2s}
.carousel-arrow:hover{background:#17465b;border-color:#b8e7f4}
.carousel-arrow:focus-visible{outline-offset:3px}
.carousel-arrow span{font-family:Arial,sans-serif;font-size:36px;font-weight:400;line-height:1;transform:translateY(-2px)}
.carousel-previous{left:12px}.carousel-next{right:12px}
@media(max-width:760px){.carousel-arrow{width:44px;height:52px}.carousel-previous{left:0}.carousel-next{right:0}.carousel-arrow span{font-size:32px}.spec-note{padding:14px 18px}.media-frame{padding:5px}}

.hero-description br{display:block}

.story-visual{position:relative;padding:6px;border:1px solid #a8bec866}
.story-visual:before,.story-visual:after{content:"";position:absolute;width:18px;height:18px;border-style:solid;border-color:#668b9b;pointer-events:none}
.story-visual:before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.story-visual:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.product-image-link{display:block;width:100%;max-width:460px;margin-bottom:24px;transition:opacity .2s}
.product-image-link .product-image{margin-bottom:0}
.product-image-link:hover{opacity:.86}
.carousel-arrow{width:44px;height:52px;background:#07131e80;border-color:transparent;box-shadow:none;opacity:0;transition:opacity .25s,background .2s}
.carousel-arrow:hover{background:#07131ec4;border-color:transparent}
.carousel-arrow span{font-size:30px}
.carousel.controls-visible .carousel-arrow,.carousel:has(:focus-visible) .carousel-arrow{opacity:1}
@media(max-width:760px){.carousel-arrow{height:48px}.story-visual{padding:5px}}
/* Larger reading sizes and short, source-based feature phrases. */
.hero-description{font-size:17px;line-height:1.9;max-width:820px}
.prose,.section-intro,.system-features p,.mecha-features p,.spec-note{font-size:16px;line-height:1.9}
.prose p+p{margin-top:22px}
.system-features :is(h3,h4),.mecha-features h3{margin:0 0 10px;font-size:20px;line-height:1.5;font-weight:600;color:#e3f1f6}
.system-features ul{margin:0;padding-left:1.15em;color:#b6c9d4;font-size:16px;line-height:1.8}
.system-features li+li{margin-top:7px}
.main-nav a{font-size:14px}.main-nav a b{font-weight:500}
.button{font-size:15px}.button-small{font-size:14px}

.product-layout dl>div{font-size:15px}.product-layout dt{font-size:14px}
.text-link,.site-footer{font-size:13px}
h2{font-size:32px}
@media(max-width:900px){.nav-inner{gap:24px}.main-nav a{font-size:13px}}
@media(max-width:760px){.hero-description,.prose,.section-intro,.system-features p,.mecha-features p,.spec-note,.system-features ul{font-size:15px;line-height:1.85}.system-features :is(h3,h4),.mecha-features h3{font-size:19px}.main-nav a{font-size:13px}.button{font-size:14px}.product-layout dl>div{font-size:14px}.product-layout dt{font-size:13px}.site-footer,.site-footer p,.site-footer .text-link{font-size:12px}h2{font-size:28px}.system-features li+li{margin-top:8px}}

/* Shared game palette: TacticalSurface, TacticalPanel, Accent and Ink. */
:root{--navy:#0e1621;--panel:#172230;--control:#243040;--cyan:#63c2db;--paper:#edf3f7;--ink:#172b3c;--line:#4a667d66;--header:76px;--focus:#4f91a6;--portrait-wash:linear-gradient(#edf4ff 0%,#edf4ff 20%,#ebf4fe 30%,#e8f2ff 40%,#e3eefd 50%,#deeafb 60%,#d7e5f8 70%,#d1dff3 80%,#ccdaee 90%,#c7d6ea 100%);--glass:linear-gradient(130deg,#101722d9 30%,#172d38c7);--rim:#82b8c647;--glow:0 0 9px #c7edff3d}
body{color:#e3f2ff}
a:focus-visible,button:focus-visible,select:focus-visible{outline-color:var(--focus)}
.site-header{background:linear-gradient(110deg,#0e1621f2,#192e3de8);border-bottom:1px solid var(--rim);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.masthead{height:76px}.header-actions{gap:16px}
.brand{height:42px}.brand-logo{width:100%;height:auto}
.button{background:linear-gradient(130deg,#243040c2,#1a3441b8);color:#e3f2ff;border:1px solid var(--rim);box-shadow:inset 0 0 16px #86c2dd08,0 0 12px #8acbe50a;text-shadow:var(--glow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s,box-shadow .2s}
.button:hover{background:linear-gradient(130deg,#314958dc,#234857d4);border-color:#83c2d494;box-shadow:inset 0 0 15px #86c2dd12,0 0 14px #8acbe51a}
.button-ghost{background:#172230a8;color:#c9dce9;border-color:#8297a538}
.button-ghost:hover{background:#263b49cc;border-color:var(--focus)}

.menu-toggle{min-height:40px}

.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;padding:9px;flex-shrink:0}
.menu-toggle span{display:block;width:22px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
.main-nav{position:absolute;top:calc(100% + 8px);right:max(5%,calc((100% - 1100px)/2));width:min(320px,90vw);max-height:calc(100svh - var(--header) - 80px);overflow-y:auto;background:var(--glass);border:1px solid var(--rim);box-shadow:0 16px 40px #0005,inset -15px -15px 30px #63c2db08;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.main-nav[hidden]{display:none}
.nav-inner{display:flex;flex-direction:column;align-items:stretch;width:100%;height:auto;padding:8px;gap:2px;overflow:visible}
.main-nav a{padding:12px 20px;min-height:48px;color:#a6bfd4;font-size:15px;white-space:normal;text-shadow:var(--glow)}
.main-nav a.active,.main-nav a:hover{background:#4f91a61f;color:#e3f2ff}
.main-nav a.active:after{left:5px;top:10px;bottom:10px;right:auto;width:3px;height:auto;background:var(--cyan)}
.main-nav a:focus-visible{outline-offset:-3px}

.hero{background:radial-gradient(ellipse at 50% 85%,#28475b26,transparent 65%),linear-gradient(155deg,#0e1621 0%,#142331 55%,#1b3040 100%)}
.hero-art{position:relative;border:1px solid var(--line)}
.hero-inner{padding-block:34px 52px}
.hero-lead{font-size:clamp(32px,4.6vw,56px);font-weight:800;font-style:italic;letter-spacing:-.025em;line-height:1.2;color:#e3f2ff;text-shadow:0 2px 22px #63c2db26;margin:0 0 18px;text-wrap:balance}
.hero-lead:after{content:"";display:block;width:64px;height:3px;margin:19px auto 0;background:var(--cyan);transform:skewX(-24deg)}
.hero-description{max-width:740px;font-size:18px;line-height:1.8;color:#a6bfd4;text-align:center;text-wrap:pretty}
h2{font-weight:650;letter-spacing:.015em}
.section-dark{background:radial-gradient(ellipse at 100% 100%,#1b394333,transparent 60%),var(--navy)}
.section-dark h2,.section-dark h3{color:#e3f2ff;text-shadow:var(--glow)}
.section-light{background:var(--portrait-wash)}
.hero-lead:after{background:#9eb9c580;box-shadow:0 0 10px #addaff26}
.media-frame{background:var(--glass);border-color:var(--rim);box-shadow:0 0 15px #8acbe50a}
.media-frame:before,.media-frame:after{border-color:#9eb9c566}
.spec-note{background:var(--panel);border-left-color:var(--focus)}
#characters{background:linear-gradient(var(--paper),#edf4ff 200px);padding-bottom:0}
.character-stage{background:transparent;isolation:isolate}
.character-stage:before{content:"";position:absolute;z-index:-1;top:0;bottom:clamp(32px,5vw,64px);left:50%;width:100vw;transform:translateX(-50%);background:var(--portrait-wash)}
.character-stage:after{content:"";display:block;height:clamp(32px,5vw,64px);width:100vw;margin-left:calc(50% - 50vw);background:#c7d6ea}
.character-stage img{max-height:none;clip-path:inset(0 .35% 0 0)}
.carousel{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.carousel img{-webkit-user-drag:none}
/* Narrow visible steppers retain a 44px touch target across the image edge. */
.carousel-arrow{width:44px;height:52px;background:transparent;border:0;box-shadow:none}
.carousel-arrow:before{content:"";position:absolute;inset:0 8px;background:#101e2d94;border:1px solid #b8d9e047;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 10px #addaff0d;z-index:-1}
.carousel-arrow:hover{background:transparent}
.carousel-arrow:hover:before{background:#253e4bd4;border-color:#a3d2df99}
.carousel-arrow span{font-size:25px;text-shadow:var(--glow)}
.carousel-previous{left:-16px}.carousel-next{right:-16px}
.button:after{content:"";position:absolute;right:0;bottom:-1px;width:40%;height:1px;background:linear-gradient(90deg,transparent,#b4deed70);pointer-events:none}
dialog{background:var(--glass);border-color:var(--rim);box-shadow:inset -24px -24px 55px #63c2db0a,0 20px 70px #0007;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
dialog::backdrop{background:#020408b8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dialog-header h2,.close-button{text-shadow:var(--glow)}
.gallery-choice.selected{border-color:var(--focus)}
@media(max-width:760px){
 :root{--header:64px}
 .masthead{height:64px;gap:10px}
 .brand{width:min(210px,45vw);height:34px;flex-shrink:1;min-width:0}
 .header-actions{gap:8px;flex-shrink:0}
 
 .menu-toggle{width:40px}
 .main-nav a{font-size:15px}
 .hero-art{border-inline:0}
 .hero-inner{padding-block:27px 36px}
 .hero-lead{font-size:clamp(29px,7.5vw,42px);margin-bottom:16px}
 .hero-description{font-size:16px;line-height:1.85}
 .hero-buttons{gap:12px}
 .site-footer{padding-block:20px calc(70px + env(safe-area-inset-bottom));gap:10px}
 .mobile-steam{position:fixed;justify-content:center;min-height:52px;padding:13px 5% calc(13px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--rim);background:linear-gradient(130deg,#142332e8,#18323ee8);color:#e3f2ff}
}

/* Capsule header and a single typography/decorative system. */
.site-header{position:fixed;width:100%;transition:background .25s,border-color .25s}
.site-header.over-hero{background:linear-gradient(#0e16217a,transparent);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.over-hero .brand{visibility:hidden}
.header-actions{margin-left:auto}
.hero{padding-top:0}
.hero-art{width:min(1232px,100%);border:0}
.hero-art img{aspect-ratio:1232/706}
.button{gap:12px}
.steam-icon{width:24px;height:24px;object-fit:contain;flex:0 0 24px}

.menu-toggle{width:46px}
.section-label{display:flex;align-items:center;gap:18px;position:relative;padding:0;border:0;font-size:clamp(28px,3.6vw,38px);font-weight:750;font-style:italic;letter-spacing:.035em;line-height:1.35;--title-accent:#8bb2c3;--title-rule:#87b7ce4d}
.section-label:before{content:"";width:5px;height:.78em;flex:0 0 5px;transform:skewX(-14deg);background:var(--title-accent);box-shadow:7px 0 0 -1px var(--title-rule),0 0 12px #a3dbf633}
.section-label:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--title-rule),transparent);margin-left:8px}
.section-light .section-label{--title-accent:#486b85;--title-rule:#6f91ad66;text-shadow:0 1px 0 #fff9}
.keyword{font-weight:700;font-style:italic;color:#e3f2ff;text-shadow:0 0 8px #c7edff24}
.section-light .keyword{color:#203c54;text-shadow:none}
.system-features article,.mecha-features article{position:relative;padding:20px 0 0;border:0;border-top:1px solid var(--line)}
.system-features article:before,.mecha-features article:before{content:"";position:absolute;top:-1px;left:0;width:32px;height:1px;background:#a3c9d580}
.system-features article+article,.mecha-features article+article{margin-top:22px}
.spec-note{border:0;border-top:1px solid var(--line);background:none;padding:20px 0 0;margin-top:28px}
.site-footer{align-items:flex-start;gap:28px}
.footer-credits{max-width:850px}
.steam-attribution{margin-top:8px;font-size:12px;line-height:1.7;color:#94adba}
.site-footer>.text-link{flex-shrink:0}
#trailer-dialog{padding:16px;width:min(1000px,94vw,calc((94svh - 110px)*16/9 + 32px));max-height:94svh}
#trailer-dialog .dialog-header{margin:14px 0 0;min-height:44px}
#trailer-dialog .dialog-header h2{font-size:16px;letter-spacing:.03em}
.media-dialog .close-button{min-height:44px;padding:8px 14px;line-height:1.2}
.media-dialog .close-button span{line-height:1}
@media(max-width:760px){

 .menu-toggle{width:44px}
 .brand{width:min(210px,42vw)}
 .section-label{gap:14px;letter-spacing:.02em}
 .section-label:after{margin-left:2px}
 .hero-buttons .button{padding-inline:14px;gap:10px}
 .site-footer{gap:12px}
 .steam-attribution{font-size:11px}
 #trailer-dialog{padding:10px;width:min(94vw,calc((94svh - 100px)*16/9 + 20px))}
 #trailer-dialog .dialog-header{margin-top:10px;gap:8px}
 #trailer-dialog .dialog-header h2{font-size:14px}
}

/* Keep the mobile overlay above the characters' faces, without cropping the capsule. */
@media(max-width:760px){.hero-art{padding-top:32px;background:linear-gradient(#55758f,#203b55)}}

/* Quiet headings and edge-aligned navigation controls. */
.site-header{border:0}
.site-header.over-hero{background:linear-gradient(110deg,#0e1621e6,#192e3dcc);border:0;box-shadow:none}
.masthead.wrap{width:100%;max-width:none;padding-left:16px;padding-right:62px}
.icon-button{display:flex;align-items:center;justify-content:center;width:46px;height:46px;min-height:46px;padding:0;background:var(--glass);border:1px solid var(--rim);color:#c9dce9;text-shadow:var(--glow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.icon-button:hover{background:var(--control);border-color:var(--focus)}
#menu-toggle{position:absolute;top:0;right:0;gap:5px}

.main-nav{top:54px;right:0}
.main-nav .menu-languages{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:0 20px 14px;padding-top:12px;border-top:1px solid var(--rim)}
.main-nav .menu-languages a{display:block;min-height:44px;padding:10px 0;font-size:14px;white-space:nowrap}
.main-nav .menu-languages a[aria-current="true"]{color:#e3f2ff;text-decoration:underline;text-underline-offset:5px}
.section-label{font-style:normal;font-weight:600;letter-spacing:.02em}
.section-label:before{width:2px;flex-basis:2px;transform:none;box-shadow:0 0 8px #aacbe52e}
.section-light .section-label{color:#294258;--title-accent:#506f87;text-shadow:0 0 8px #86b5d440}
.section-dark .section-label{color:#a6bfd4;--title-accent:#6f8da4;text-shadow:0 0 9px #aacde633}
.keyword{font-style:normal;font-weight:600;text-shadow:none}
.product-layout dl>div{grid-template-columns:max-content minmax(0,1fr);column-gap:24px}
.product-layout dl{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:24px}
.product-layout dl>div{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.product-layout dt{white-space:nowrap}
.mecha-features .spec-note{margin-top:22px;padding:20px 0 0}
.site-footer{position:relative;display:block;width:100%;padding:26px 0 56px}
.footer-credits{max-width:1100px}
.back-to-top{position:absolute;right:0;bottom:0}
#trailer-dialog{padding:0;width:min(1000px,94vw,calc(90svh * 16/9));max-height:94svh;overflow:visible;background:#0e1621;border:1px solid var(--rim)}
#trailer-dialog video{max-height:90svh;object-fit:contain}
.media-dialog .close-button{position:absolute;top:0;right:0;width:46px;height:46px;padding:0;opacity:0;transition:opacity .2s;background:#0e1621c9;z-index:2}
.media-dialog .close-button span{font-size:28px;line-height:1}
.media-dialog:hover .close-button,.media-dialog .close-button:focus-visible{opacity:1}
#video-message:not(:empty){padding:12px 16px;margin:0}
@media(hover:none),(pointer:coarse){.media-dialog .close-button{opacity:1}}
@media(max-width:760px){
 .icon-button{width:44px;height:44px;min-height:44px}
 .masthead.wrap{padding-right:56px}
 .main-nav{top:50px}
 .product-layout dl{column-gap:18px}
 .site-footer{padding:20px 0 calc(56px + env(safe-area-inset-bottom))}
 .back-to-top{bottom:0}
 #trailer-dialog{padding:0;width:min(94vw,calc(90svh * 16/9))}
}

/* Direct manipulation and matching slide transitions for both carousels. */
.carousel-viewport{width:100%;overflow:hidden}
.carousel-track{display:flex;width:100%;transform:translate3d(-100%,0,0);will-change:transform}
.carousel-slide{flex:0 0 100%;min-width:0}
.carousel-slide>a{display:block}
.carousel-slide img{width:100%;height:auto;display:block}
.character-stage{margin-top:8px}
:root{--header:46px}
.masthead{height:46px}
.header-steam{display:flex;flex-shrink:0}
.brand,.header-steam{opacity:1;visibility:visible;transition:opacity .2s,visibility .2s}
.over-hero .brand,.over-hero .header-steam{opacity:0;visibility:hidden}
.main-nav .nav-inner{padding:8px}
.main-nav .menu-languages{grid-template-columns:1fr;gap:0;margin-inline:8px}
.main-nav .menu-languages a{font-size:12px;min-height:38px;padding:9px 20px}
#menu-toggle,.back-to-top{background:#10172266;border-color:#82b8c62b;color:#bcd1dfb8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s}
#menu-toggle:hover,#menu-toggle:focus-visible,#menu-toggle[aria-expanded="true"],.back-to-top:hover,.back-to-top:focus-visible{background:#172230ed;border-color:#82b8c680;color:#e3f2ff}
.section-label:before{width:5px;flex-basis:5px}
.section-light .section-label{color:#294258;text-shadow:0 0 6px #5b809a24}
.section-dark .section-label{color:#b5cddd;text-shadow:0 0 6px #8cc2df4d,0 0 14px #74b9de26}
.site-footer .footer-credits p{font-size:12px;line-height:1.8}
@media(max-width:760px){
 :root{--header:44px}
 .masthead{height:44px}
 .hero-art{padding-top:0;background:none}
 .character-stage{margin-top:6px}
 .site-footer .footer-credits p{font-size:11px}
}

/* System tabs and full-size Steam screenshots. */
.image-preview{display:block;cursor:zoom-in}
#image-dialog{padding:0;width:min(1440px,94vw,calc(90svh * 16/9));max-width:94vw;max-height:94svh;overflow:visible;background:#0e1621;border:1px solid var(--rim)}
#enlarged-image{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:90svh;object-fit:contain}
@media(max-width:760px){
 .masthead.wrap{padding-left:12px}
}

/* Room above every capsule and a full-screen navigation overlay. */
.hero-art{padding-top:var(--header);background:transparent}
.main-nav{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:calc(var(--header) + 20px) 0 24px;border:0;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(120deg,#0e1621ed,#172b38f5);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.main-nav:not([open]){display:none}
.menu-content{width:min(400px,100%);margin-left:auto}
.menu-close{position:fixed;top:0;right:0;z-index:2;font-size:30px}
.main-nav .nav-inner{max-width:none}
.main-nav a{font-size:17px;min-height:50px}
.main-nav .menu-languages a{font-size:14px;min-height:42px}
/* A modest, consistent increase in reading sizes. */
body{font-size:18px}
.hero-lead{font-size:clamp(34px,4.8vw,60px)}
.hero-description{font-size:20px}
.section-label{font-size:clamp(32px,3.8vw,40px)}
.prose,.section-intro,.system-features p,.system-features ul,.mecha-features p,.spec-note{font-size:18px}
.system-features :is(h3,h4),.mecha-features h3{font-size:22px}
.button,.button-small{font-size:17px}
.product-layout dl>div{font-size:17px}.product-layout dt{font-size:16px}
.site-footer .footer-credits p{font-size:14px}
#video-message{font-size:14px}
.carousel-arrow span{font-size:27px}
/* A compact definition control, framed like the site's other HUD controls. */
.section-heading-row{display:flex;align-items:center;gap:24px;margin-bottom:32px}
.section-heading-row .section-label{flex:1;margin:0;min-width:0}
.definition-button{flex-shrink:0;gap:20px;padding:12px 18px;font-weight:500}
.definition-plus{font-size:24px;line-height:1;color:#a8cfde}
.definition-dialog{width:min(680px,92vw);max-width:92vw;padding:48px 40px 40px;max-height:90dvh;background:linear-gradient(130deg,#101722f2,#172d38ed);border:1px solid var(--rim)}
.definition-dialog h2{margin:0 44px 24px 0;font-size:28px;font-weight:600;color:#b5cddd;text-shadow:0 0 6px #8cc2df4d}
.definition-dialog p{font-size:18px;line-height:1.9;color:#c2d4e1;overflow-wrap:break-word}
.definition-dialog .close-button{position:absolute;top:0;right:0;padding:0}
@media(max-width:760px){
 .hero-lead{font-size:clamp(31px,8vw,44px)}
 .hero-description{font-size:18px}
 .prose,.section-intro,.system-features p,.system-features ul,.mecha-features p,.spec-note{font-size:17px}
 .system-features :is(h3,h4),.mecha-features h3{font-size:21px}
 .button,.button-small{font-size:16px}
 .product-layout dl>div{font-size:16px}.product-layout dt{font-size:14px}
 .site-footer .footer-credits p{font-size:13px}
 .section-heading-row{flex-wrap:wrap;gap:18px;margin-bottom:28px}
 .section-heading-row .section-label{flex-basis:100%}
 .definition-dialog{padding:48px 24px 28px}
 .definition-dialog h2{font-size:26px;margin-bottom:20px}
 .definition-dialog p{font-size:17px}
}

/* Quiet text selectors share a fixed cursor slot and an even baseline. */
.character-tabs [role="tab"]:before{content:"";width:5px;height:12px;flex:0 0 5px;background:currentColor;opacity:0}
.character-tabs{display:flex;margin:22px 0 6px}
.character-tabs [role="tab"]{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:transparent;color:#395b74;font-size:18px;font-weight:600;letter-spacing:.065em;text-shadow:0 0 6px #5b809a20}
.character-tabs [aria-selected="true"]:before{opacity:1;box-shadow:0 0 6px #5b809a30}
.mecha-visual .definition-button{margin-top:16px}
/* Leave a small clearance below the header controls so all four edges render. */
#menu-toggle,.header-steam{width:42px;height:42px;min-height:42px}
.main-nav .nav-inner{padding-right:4px}
.main-nav a{padding-right:12px}
.main-nav .menu-languages{margin-right:4px}
.main-nav .menu-languages a{padding-right:12px}
/* Translucent tactical glass; keep the actual artwork fully opaque. */
dialog::backdrop{background:#02040873;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.main-nav{background:linear-gradient(120deg,#0e1621b8,#172b38d1)}
#raiv-dialog,#trailer-dialog,#image-dialog{background:linear-gradient(130deg,#101722d1,#172d38c7);border-color:#8db9c75c;box-shadow:0 20px 65px #0005,inset 0 0 24px #80c4dd09}
#raiv-dialog{padding:0}
.popup-titlebar{display:flex;align-items:center;gap:16px;min-height:44px;padding-left:20px;border-bottom:1px solid #82b8c62e}
.popup-titlebar h2,#raiv-dialog .popup-titlebar h2{flex:1;min-width:0;margin:0;padding:9px 0;font-size:18px;line-height:1.4;font-weight:600;color:#b5cddd;letter-spacing:.025em;text-shadow:0 0 6px #8cc2df33}
#raiv-dialog .popup-titlebar .close-button,#trailer-dialog .popup-titlebar .close-button{position:static;flex:0 0 42px;width:42px;height:42px;min-height:42px;padding:0;opacity:1;border:0;border-left:1px solid #82b8c62e;background:transparent}
#raiv-dialog p{padding:26px 28px 30px}
#trailer-dialog{width:min(1000px,94vw,calc((90svh - 46px) * 16/9));max-height:94svh}
#trailer-dialog video{max-height:calc(90svh - 46px)}
/* Restrained horizon lines and corner highlights echo the game's HUD. */
.section-dark{background-image:radial-gradient(ellipse at 100% 100%,#1b394333,transparent 60%),repeating-linear-gradient(0deg,transparent 0,transparent 47px,#8bcade04 48px),linear-gradient(155deg,#0e1621 0%,#142331 55%,#1b3040 100%);background-color:var(--navy)}
.section-label:before{box-shadow:0 0 8px #aacbe52e,inset 1px 0 #d7f3ff26}
.media-frame{box-shadow:0 0 15px #8acbe50a,inset 0 0 0 1px #8acbe508}
@media(max-width:760px){
 #menu-toggle,.header-steam{width:40px;height:40px;min-height:40px}
 .character-tabs [role="tab"]{font-size:17px}
 .popup-titlebar{padding-left:16px;gap:10px}
 .popup-titlebar h2,#raiv-dialog .popup-titlebar h2{font-size:17px}
 #raiv-dialog p{padding:22px 22px 26px}
}

/* Sequential System groups keep their natural height and alternate on desktop. */
.system-group+.system-group{margin-top:38px}
.system-group-title{margin:0 0 20px;font-size:24px;line-height:1.4;font-weight:600;letter-spacing:.025em;color:#b5cddd}
.system-layout-reverse{grid-template-columns:1fr 1.13fr}
.system-layout-reverse .media-frame{grid-column:2;grid-row:1}
.system-layout-reverse .system-copy{grid-column:1;grid-row:1}
.system-coming{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;margin-top:28px;padding-top:18px;border-top:1px solid #82b8c62e}
.system-coming h3{margin:0;font-size:20px;line-height:1.5;font-weight:500;letter-spacing:.04em;color:#9fb9cb}
.system-coming p{font-size:16px;line-height:1.5;color:#8fa7b8}
.character-tabs{gap:22px;flex-wrap:wrap}
.character-tabs [aria-selected="true"]:before{width:2px;height:8px;flex-basis:2px;opacity:.55;box-shadow:none}
.character-tabs [role="tab"][aria-disabled="true"]{color:#7890a3;opacity:.65;text-shadow:none;font-weight:400;letter-spacing:.025em;cursor:default}
.character-tabs [role="tab"][aria-disabled="true"]:before{display:none}
@media(max-width:760px){
 .system-group+.system-group{margin-top:30px}
 .system-group-title{font-size:22px;margin-bottom:18px}
 .system-layout-reverse{grid-template-columns:1fr}
 .system-layout-reverse .media-frame,.system-layout-reverse .system-copy{grid-column:auto;grid-row:auto}
 .character-tabs{gap:12px}
 .character-tabs [role="tab"]{font-size:15px;gap:7px;letter-spacing:.025em}
 .character-tabs [role="tab"][aria-disabled="true"]{font-size:14px}
}

/* The title stays on the content edge; its lower rule rises into the trailing rule. */
.section-label{gap:0}
.section-label:before{display:none}
.section-title-text{position:relative;margin-right:26px}
.section-title-text:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:linear-gradient(90deg,transparent,var(--title-accent) 10%);opacity:.6}
.section-title-text:before{content:"";position:absolute;left:100%;top:50%;width:26px;height:calc(50% + 4px);background:var(--title-accent);opacity:.6;clip-path:polygon(0 calc(100% - 1px),100% 0,100% 1px,0 100%)}
.section-label:after{margin-left:0;background:linear-gradient(90deg,var(--title-accent),transparent);opacity:.6}
.system-copy{min-width:0}
.system-group-title,.system-coming .system-group-title{margin:0 0 22px;font-size:28px;line-height:1.35;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#c0d8e6;text-shadow:0 0 8px #8cc2df4d,0 0 14px #74b9de20}
.system-group-title:after{display:none}
.system-coming{display:block}
.system-coming .system-group-title{margin-bottom:12px}
.character-tabs [role="tab"]{position:relative}
.character-tabs [role="tab"]:before{display:none}
.character-tabs [aria-selected="true"]:after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:1px;background:#395b7480}
.mecha-visual .definition-button{margin-top:28px}
.product-layout>div:first-child>.button.steam-link{display:flex;width:100%;max-width:460px}
@media(max-width:760px){
 .section-title-text{margin-right:18px}
 .section-title-text:before{width:18px}
 .system-group-title,.system-coming .system-group-title{font-size:24px;letter-spacing:.07em;margin-bottom:18px}
 .system-coming .system-group-title{margin-bottom:12px}
 .mecha-visual .definition-button{margin-top:24px}
}

/* Midpoint reading sizes, with slightly tighter leading. */
body{font-size:17px}
.hero-lead{font-size:clamp(33px,4.7vw,58px);line-height:1.18}
.hero-description{font-size:19px;line-height:1.7}
.section-label{font-size:clamp(30px,3.7vw,39px);line-height:1.3}
.prose,.section-intro,.system-features p,.system-features ul,.mecha-features p,.spec-note{font-size:17px;line-height:1.75}
.system-features :is(h3,h4),.mecha-features h3{font-size:21px;line-height:1.4}
.system-group-title,.system-coming .system-group-title{font-size:26px;line-height:1.3}
.main-nav a{font-size:16px;line-height:1.4}
.main-nav .menu-languages a{font-size:13px}
.button,.button-small{font-size:16px;line-height:1.4}
.product-layout dl>div{font-size:16px;line-height:1.65}
.product-layout dt{font-size:15px}
.site-footer .footer-credits p{font-size:13px;line-height:1.65}
.character-tabs [role="tab"]{font-size:17px}
.definition-dialog p{font-size:17px;line-height:1.75}
.popup-titlebar h2,#raiv-dialog .popup-titlebar h2{font-size:17px;line-height:1.3}
.system-coming p{font-size:15px;line-height:1.4}
#video-message{font-size:13px;line-height:1.6}
@media(max-width:760px){
 .hero-lead{font-size:clamp(30px,7.75vw,43px)}
 .hero-description{font-size:17px}
 .prose,.section-intro,.system-features p,.system-features ul,.mecha-features p,.spec-note{font-size:16px;line-height:1.75}
 .system-features :is(h3,h4),.mecha-features h3{font-size:20px}
 .system-group-title,.system-coming .system-group-title{font-size:23px}
 .button,.button-small{font-size:15px}
 .product-layout dl>div{font-size:15px}
 .product-layout dt{font-size:13.5px}
 .site-footer .footer-credits p{font-size:12px}
 .character-tabs [role="tab"]{font-size:15px}
 .character-tabs [role="tab"][aria-disabled="true"]{font-size:14px}
 .definition-dialog p{font-size:16px}
 .popup-titlebar h2,#raiv-dialog .popup-titlebar h2{font-size:16px}
}

/* Uniform restrained focus, including touch-origin focus. */
a:focus-visible,button:focus-visible,select:focus-visible,.main-nav a:focus-visible,.carousel-arrow:focus-visible{outline:1px solid var(--focus);outline-offset:-1px}
.system-features :is(h3,h4),.mecha-features h3{font-weight:400}
/* A dark, half-transparent thumb over an unobtrusive track. */
html,body,dialog{scrollbar-color:rgba(8,16,27,.5) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(8,16,27,.5);border-radius:4px}
::-webkit-scrollbar-corner{background:transparent}

.system-features article:first-child{border-top:0;padding-top:0}
.system-features article:first-child:before{display:none}

.system-intro{max-width:none;margin-bottom:30px;color:#b6c9d4}

/* Continuous beveled rims retain the original inset and opposite-corner brackets. */
.story-visual,.media-frame{--image-cut:20px;--inner-cut:16px;--frame-line:#8db0c27a;--frame-glow:#8acbe566;--frame-fill:#142331b3;isolation:isolate;border-color:transparent;background:transparent;box-shadow:none}
.story-visual{--frame-line:#54758d99;--frame-glow:#698eae66;--frame-fill:#b7ccdf2e}
.story-visual>.image-preview,.media-frame>.image-preview{clip-path:polygon(0 0,calc(100% - var(--inner-cut)) 0,100% var(--inner-cut),100% 100%,var(--inner-cut) 100%,0 calc(100% - var(--inner-cut)))}
.image-frame-outline{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;z-index:-1;filter:drop-shadow(0 0 4px var(--frame-glow))}
.image-frame-outline path{fill:var(--frame-fill);stroke:var(--frame-line);stroke-width:1;stroke-linejoin:round}
.story-visual:before,.media-frame:before,.story-visual:after,.media-frame:after{width:20px;height:20px;z-index:1;border-color:var(--frame-line);filter:drop-shadow(0 0 4px var(--frame-glow))}
.story-visual:before,.media-frame:before{top:-3px;left:-3px;border-width:3px 0 0 3px}
.story-visual:after,.media-frame:after{bottom:-3px;right:-3px;border-width:0 3px 3px 0}
.story-visual:has(.image-preview:focus-visible),.media-frame:has(.image-preview:focus-visible){--frame-line:var(--focus)}
.section-title-text{margin-right:24px}
.section-title-text:before,.section-title-text:after,.section-label:after{display:none}
.section-title-rule{position:absolute;inset:0;width:100%;height:calc(100% + 6px);overflow:visible;pointer-events:none;mask-image:linear-gradient(90deg,#000 55%,transparent);filter:drop-shadow(0 0 6px #8cc2df4d) drop-shadow(0 0 14px #74b9de26)}
.section-light .section-title-rule{filter:drop-shadow(0 0 6px #5b809a24)}
.section-title-rule path{fill:none;stroke:var(--title-accent);stroke-width:1;stroke-linejoin:round}
.section-title-rule .title-rule-angle{fill:var(--title-accent);stroke:none}
.main-nav .menu-steam{gap:9px}
.main-nav .menu-steam .steam-icon{width:18px;height:18px;opacity:.8}
@media(max-width:760px){.story-visual,.media-frame{--image-cut:14px;--inner-cut:11px}}

/* Serif catchphrases lead the hero; enlarged key words supply the dramatic rhythm. */
.hero-catchphrase{margin:0 0 20px;font-family:"Azure Catch jp","Yu Mincho","Hiragino Mincho ProN",serif;color:#badef1;font-size:clamp(38px,4.25vw,54px);font-weight:600;letter-spacing:.055em;line-height:1.35;text-wrap:balance;text-shadow:0 0 9px #a9daf36b,0 0 22px #8bc8ec3d}
.catch-group{display:inline-block;font-size:.9em;white-space:nowrap}
.catch-key{font-size:1.18em;color:inherit;text-shadow:inherit}
:lang(zh-Hans) .hero-catchphrase{font-family:"Azure Catch sc","Songti SC","SimSun",serif}
:lang(zh-Hant) .hero-catchphrase{font-family:"Azure Catch tc","Songti TC","PMingLiU",serif}
:lang(en) .hero-catchphrase{font-family:"Azure Catch en",Georgia,serif;letter-spacing:.012em}
:lang(en) .catch-group{font-size:.86em}
:lang(en) .catch-outcome{font-family:"Azure Catch en-italic",Georgia,serif;font-size:1em;font-style:italic;color:inherit;text-shadow:inherit}
.hero-lead{width:fit-content;max-width:100%;margin-inline:auto;font-size:clamp(20px,1.9vw,24px);line-height:1.2}
.hero-lead:after{width:100%;height:2px;margin-top:14px}
.section-title-text{margin-right:54px}
@media(max-width:760px){.hero-catchphrase{font-size:30px;letter-spacing:.025em;margin-bottom:18px}.hero-lead{font-size:17px}.section-title-text{margin-right:44px}}
#characters .section-intro{color:#405966}

/* Keep the genre block compact and leave all glow to the narrative catchphrase. */
.hero-lead{line-height:1.1;margin-bottom:8px;text-shadow:none}
.hero-lead:after{margin-top:8px;box-shadow:none}
.hero-description{font-size:16px;line-height:1.3;text-shadow:none}
@media(max-width:760px){.hero-description{font-size:14px}}
.hero-buttons{margin-top:18px}
/* Keep the screenshot unobstructed, with a discoverable corner control. */
#image-dialog{width:min(1440px,94vw,calc(90svh * 16/9));overflow:hidden}
#enlarged-image{max-height:90svh}
#image-dialog .close-button{width:44px;height:44px;min-height:44px;opacity:0;background:#0e1621c9;border:1px solid #82b8c660}
#image-dialog .close-button:hover,#image-dialog .close-button:focus-visible{opacity:1}
@media(hover:none),(any-pointer:coarse){
 #image-dialog .close-button,#image-dialog .close-button:hover{opacity:0;pointer-events:none}
 #image-dialog.touch-controls-visible .close-button,#image-dialog .close-button:focus-visible{opacity:1;pointer-events:auto}
}

/* Unavailable factions keep their muted tabs and explain availability on activation. */
.character-tabs [role="tab"][data-coming-soon]{cursor:pointer}
.site-toast{position:fixed;z-index:80;left:0;top:0;max-width:calc(100vw - 24px);padding:10px 18px;border:1px solid #8db9c75c;background:#102331ed;color:#c6dce9;font-size:15px;line-height:1.4;letter-spacing:.035em;text-align:center;box-shadow:0 8px 28px #0004,0 0 16px #8cc2df18;backdrop-filter:blur(10px);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}
.site-toast.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.site-toast{transition:none}}

/* Steam description clips reuse the existing cut-corner image frames. */
.clip-preview{position:relative}
.clip-preview>.clip-poster,#enlarged-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.clip-poster[hidden]{display:none}
.section-clip{display:block;width:100%;height:auto;aspect-ratio:1170/658;object-fit:cover;pointer-events:none}
#enlarged-video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:90svh;object-fit:contain;background:#08101b}
#image-dialog [hidden]{display:none!important}
#clip-message{position:absolute;left:16px;right:16px;bottom:52px;margin:0;padding:12px;background:#0e1621ed;font-size:14px;line-height:1.5}

/* Blur the paused page separately so live video never enters the backdrop filter. */
#image-dialog.is-video{background:#08101b;backdrop-filter:none;-webkit-backdrop-filter:none}
#image-dialog.is-video::backdrop{background:#02040873;backdrop-filter:none;-webkit-backdrop-filter:none}
body:has(#image-dialog.is-video[open]) #app>:is(.site-header,main,.site-footer){filter:blur(8px)}
#image-dialog.is-video .close-button{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Two stable story pages keep the video beside the copy without text wrapping around it. */
.story-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.story-layout .story-visual{width:100%;margin:4px 0 0}
.story-copy{min-width:0;scroll-margin-top:calc(var(--header) + 20px)}
.story-pages{display:grid;overflow:hidden;touch-action:pan-y pinch-zoom;user-select:none}
.story-page{grid-area:1 / 1;min-width:0;pointer-events:none;transition:transform .24s cubic-bezier(.22,.7,.25,1)}
.story-pages.is-dragging .story-page{transition:none}
.story-page:nth-child(2){transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){.story-page{transition:none}}
.story-page.is-current{pointer-events:auto}
.story-pagination{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:4px}
.story-pagination button{display:grid;place-items:center;min-width:40px;min-height:40px;padding:0;background:transparent;color:#405e73;border:0;opacity:.72;transition:opacity .15s ease}
.story-pagination button:hover,.story-pagination button:focus-visible{opacity:1}
.story-pagination .story-page-bar{width:52px}
.story-page-bar span{display:block;width:100%;height:3px;background:#607c9199;transition:background .15s ease,box-shadow .15s ease}
.story-page-bar[aria-current="page"] span{background:#315e79;box-shadow:0 0 5px #699bb440}
@media(max-width:900px){.story-layout{gap:30px}}
@media(max-width:760px){
 .story-layout{grid-template-columns:1fr;gap:26px}
 .story-layout .story-visual{margin:0}
}

/* Stable screenshot surfaces and story controls matching the image carousels. */
.gallery-main .carousel-viewport{aspect-ratio:16/9;background:#101e2d}
.gallery-main .carousel-slide{aspect-ratio:16/9;background:#101e2d;contain:paint}
.gallery-main .carousel-slide img{height:auto;aspect-ratio:16/9}
@media(hover:hover){.story-reader:hover .carousel-arrow{opacity:1}}

/* Keep each text page within its own paint bounds, including CJK punctuation. */
.story-page{contain:paint;padding-inline:2px;overflow-wrap:anywhere;word-break:normal;hanging-punctuation:none}
.story-page:lang(ja),.story-page:lang(zh){line-break:strict}
@media(max-width:760px){.story-copy{-webkit-text-size-adjust:100%;text-size-adjust:100%}}
.story-reader .carousel-arrow{color:#41627a99}
.story-reader .carousel-arrow:before{background:#38556812;border-color:#54758d14;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.story-reader .carousel-arrow span{text-shadow:none}
.story-reader .carousel-arrow:hover,.story-reader .carousel-arrow:focus-visible{color:#294c65}
.story-reader .carousel-arrow:hover:before,.story-reader .carousel-arrow:focus-visible:before{background:#3855682e;border-color:#54758d40}
.story-reader .carousel-previous{left:-20px}.story-reader .carousel-next{right:-20px}

/* Match the gallery's stable slide surface without changing character artwork. */
.character-stage .carousel-slide{contain:paint}
/* The hit target stays still while only the continuation glyph gently moves. */
.story-continues{display:inline-flex;align-items:center;justify-content:flex-start;vertical-align:middle;min-width:44px;min-height:44px;margin:0;padding:0;background:transparent;border:0;color:#496f89;font-family:Arial,sans-serif;font-size:1.15em;font-weight:600;letter-spacing:-.12em;line-height:1;white-space:nowrap;touch-action:manipulation}
.story-continues span{display:block;margin-inline-start:3px;position:relative;top:-.15em;pointer-events:none;animation:story-continue-pulse 2.6s ease-in-out infinite}
.story-continues:hover,.story-continues:focus-visible{color:#244b67}
@keyframes story-continue-pulse{0%,100%{transform:translateX(-2px);opacity:.65}50%{transform:translateX(3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.story-continues span{animation:none}}