.showcase{--profile-accent:#d4ba72}.showcase .wash{background:linear-gradient(90deg,#102b3610 0%,#102b3660 34%,#112d3bed 59%,#112d3bf7 100%)}.showcase .scene-art{filter:none}.showcase-panel{position:absolute;z-index:4;right:4.5%;top:50%;transform:translateY(-50%);width:43%;color:#f3f4ec;text-align:left}.showcase-panel[hidden],.roster[hidden],.hero-copy[hidden]{display:none}.profile-role{font-size:12px;font-weight:600;letter-spacing:2.3px;color:var(--profile-accent);margin:0 0 12px}.profile-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(38px,4.9vw,76px);font-weight:500;letter-spacing:-1.6px;line-height:1.02;margin:0 0 16px}.profile-story{font-size:15px;line-height:1.8;max-width:490px;color:#c4d0d3;margin:0 0 24px}.skill-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#c5d0d2;margin:0 0 11px}.profile-count{color:var(--profile-accent)}.ability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ability-button{position:relative;min-height:104px;border:1px solid #ffffff28;border-radius:8px;padding:16px 7px 12px;background:linear-gradient(145deg,#ffffff09,#ffffff02);display:flex;align-items:center;flex-direction:column;gap:10px;transition:background .25s,border-color .25s,transform .25s}.ability-button img{width:28px;height:28px;opacity:.75}.ability-button>span:last-child{font-size:12px;font-weight:500}.ability-number{position:absolute;left:10px;top:8px;font-size:9px;letter-spacing:1px;color:#7f999f}.ability-button.chosen{border-color:var(--profile-accent);background:linear-gradient(145deg,#ffffff18,#ffffff03)}.ability-button.chosen img{opacity:1}.ability-button:hover{transform:translateY(-3px);background:#ffffff16}.ability-description{border-left:2px solid var(--profile-accent);padding:0 0 0 15px;margin-top:20px;min-height:86px}.ability-kind{font-size:9px;letter-spacing:2px;color:var(--profile-accent)}.ability-description h3{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:500;margin:3px 0 4px}.ability-description p{font-size:13px;line-height:1.6;color:#bbcbd0;max-width:470px;margin:0}.profile-note{font-size:10px;color:#8ba0a8;margin:20px 0 0;letter-spacing:.25px}.roster{position:absolute;left:5%;bottom:28px;z-index:6;width:40%;text-align:center}.roster-heading{font-size:10px;letter-spacing:2px;text-shadow:0 2px 12px #051b25;display:block;margin-bottom:25px;color:#f5f0d8}.roster-options{display:flex;align-items:center;justify-content:center;gap:22px}.roster-choice{padding:0;display:flex;flex-direction:column;align-items:center;gap:21px;position:relative}.diamond{width:58px;height:58px;transform:rotate(45deg);padding:3px;border:1px solid #ffffff65;background:#102e39dd;transition:border-color .3s,transform .3s,box-shadow .3s}.diamond-inner{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,#36555e,#142f39)}.diamond-inner img{position:absolute;width:225px;height:auto;max-width:none;transform:rotate(-45deg);left:-109px;top:-15px;transform-origin:50% 50%}.roster-tag{font-size:11px;letter-spacing:.4px;color:#ced8da;text-shadow:0 1px 8px #000}.roster-choice[aria-pressed=true] .diamond{border-color:var(--profile-accent);box-shadow:0 0 0 3px #132e37,0 0 0 4px var(--profile-accent),0 8px 20px #0003;transform:rotate(45deg) translate(-3px,-3px)}.roster-choice[aria-pressed=true] .roster-tag{color:var(--profile-accent)}.roster-choice:hover .diamond{border-color:#fff;transform:rotate(45deg) translate(-3px,-3px)}.roster-choice:focus-visible{outline:0}.roster-choice:focus-visible .diamond{outline:3px solid #fff;outline-offset:6px}.showcase .portrait{height:103%;bottom:5%;left:-34%;mask-image:linear-gradient(to bottom,#000 65%,transparent 95%)}.showcase[data-profile=pathfinder] .portrait{height:111%;left:-33%;bottom:5%}.showcase[data-profile=wayfarer] .portrait{height:103%;left:-34%;bottom:4%}.showcase[data-profile=mossback] .portrait{height:68%;width:50%;object-fit:contain;left:0;bottom:24%;mask-image:none}.showcase[data-profile=mossback] .wash{background:linear-gradient(90deg,#15372800,#112d3bf0 61%)}
@media(max-height:800px) and (min-width:761px){.showcase-panel{width:44%;right:3.5%}.profile-role{font-size:10px;margin-bottom:8px}.profile-name{font-size:48px;margin-bottom:10px}.profile-story{font-size:13px;line-height:1.6;margin-bottom:15px}.ability-button{min-height:79px;padding:12px 4px 8px;gap:7px}.ability-button img{width:24px;height:24px}.ability-description{margin-top:12px;min-height:68px}.ability-description h3{font-size:22px}.ability-description p{font-size:12px}.profile-note{margin-top:10px;font-size:9px}.roster{bottom:22px;left:3%;width:43%}.diamond{width:46px;height:46px}.roster-options{gap:20px}.roster-heading{margin-bottom:20px;font-size:9px}.roster-tag{font-size:10px}.roster-choice{gap:17px}}
@media(max-width:760px){.hero:has(.showcase){height:960px;min-height:960px}.showcase .wash{background:linear-gradient(180deg,#102b3600 10%,#112d3b55 28%,#112d3bf7 45%,#112d3b 100%)}.showcase .portrait{height:430px;left:-240px;top:-6px;bottom:auto;mask-image:linear-gradient(to bottom,#000 60%,transparent 95%)}.showcase[data-profile=pathfinder] .portrait{height:450px;left:-230px;top:-10px}.showcase[data-profile=wayfarer] .portrait{height:430px;left:-240px;top:-5px}.showcase[data-profile=mossback] .portrait{height:260px;width:95%;left:2.5%;top:30px;bottom:auto}.showcase-panel{top:456px;left:7%;right:auto;transform:none;width:86%}.profile-name{font-size:44px}.profile-story{font-size:14px;line-height:1.7;margin-bottom:19px}.profile-role{font-size:10px;letter-spacing:1.5px}.ability-button{min-height:90px}.ability-button>span:last-child{font-size:10px}.profile-note{font-size:9px}.roster{left:4%;width:92%;bottom:auto;top:330px}.roster-options{gap:24px}.diamond{width:46px;height:46px}.roster-heading{font-size:9px;margin-bottom:22px}.roster-choice{gap:20px}.roster-tag{font-size:10px}.ability-description{min-height:105px}.profile-story{min-height:95px}}
.diamond{position:relative;overflow:hidden;width:66px;height:66px}
.diamond-inner{position:absolute;width:142%;height:142%;left:-21%;top:-21%;transform:rotate(-45deg);background:radial-gradient(circle at 50% 35%,#4f7279,#142f39)}
.diamond-inner img{transform:none;transform-origin:center;width:260px;height:auto;left:-103px;top:-24px}
.diamond-inner .thumb-pathfinder{left:-116px;top:-16px}
.diamond-inner .thumb-wayfarer{left:-116px;top:-23px}
.diamond-inner .thumb-mossback{width:115%;left:-8%;top:-8%}
.showcase .portrait-layer{mask-image:linear-gradient(90deg,#000 0%,#000 44%,transparent 61%)}
.showcase[data-profile=mossback] .portrait-layer{mask-image:none}
@media(max-height:800px) and (min-width:761px){.diamond{width:50px;height:50px}.diamond-inner img{width:230px;left:-96px;top:-23px}.diamond-inner .thumb-pathfinder{left:-105px;top:-17px}.diamond-inner .thumb-wayfarer{left:-109px;top:-22px}.diamond-inner .thumb-mossback{width:115%;left:-8%;top:-8%}}
@media(max-width:760px){.diamond{width:46px;height:46px}.diamond-inner img{width:220px;left:-95px;top:-23px}.diamond-inner .thumb-pathfinder{left:-101px;top:-17px}.diamond-inner .thumb-wayfarer{left:-105px;top:-22px}.diamond-inner .thumb-mossback{width:115%;left:-8%;top:-8%}.showcase .portrait-layer{mask-image:none}}
.showcase[data-profile=bloom] .portrait{height:88%;width:56%;object-fit:contain;left:-2%;bottom:14%;mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.showcase[data-profile=bloom] .portrait-layer{mask-image:none}
.showcase[data-profile=bloom] .wash{background:linear-gradient(90deg,#21342e00,#172c3aee 61%)}
.diamond-inner .thumb-bloom{width:220%;left:-60%;top:-12%}
@media(max-width:760px){.showcase[data-profile=bloom] .portrait{height:355px;width:115%;left:-7.5%;top:0;bottom:auto}.diamond-inner .thumb-bloom{width:220%;left:-60%;top:-12%}}
/* Responsive art viewport: independent of copy and roster, clipped on every edge. */
.stage.showcase{--art-height:112%;--art-bottom:-12%;--art-center:35%}
.showcase .portrait-layer{inset:0 auto 0 0;width:55%;height:100%;overflow:hidden;mask-image:none;contain:paint}
.showcase .portrait-float{inset:0}
.showcase .portrait,
.showcase[data-profile=pathfinder] .portrait,
.showcase[data-profile=wayfarer] .portrait,
.showcase[data-profile=bloom] .portrait{position:absolute;top:auto;right:auto;bottom:var(--art-bottom);left:var(--art-center);height:var(--art-height);width:auto;max-width:none;max-height:none;object-fit:initial;translate:-50% 0;mask-image:none}
.showcase[data-profile=pathfinder]{--art-height:119%;--art-bottom:-16%;--art-center:32%}
.showcase[data-profile=wayfarer]{--art-height:112%;--art-bottom:-13%;--art-center:32%}
.showcase[data-profile=bloom]{--art-height:94%;--art-bottom:-7%;--art-center:49%}
@media(max-width:760px){
 .stage.showcase{--art-height:111%;--art-bottom:-11%;--art-center:35%;--mobile-art-height:clamp(350px,110vw,435px)}
 .showcase .portrait-layer{width:100%;height:var(--mobile-art-height);top:0;bottom:auto}
 .showcase[data-profile=pathfinder]{--art-height:116%;--art-bottom:-16%;--art-center:33%}
 .showcase[data-profile=wayfarer]{--art-height:111%;--art-bottom:-11%;--art-center:32%}
 .showcase[data-profile=bloom]{--art-height:94%;--art-bottom:-7%;--art-center:50%}
 .roster{top:calc(var(--mobile-art-height) - 105px);bottom:auto}
 .showcase-panel{top:calc(var(--mobile-art-height) + 21px)}
}
@media(max-width:380px){header{gap:8px}.brand{font-size:24px}.brand .star{display:none}nav{gap:9px}nav button{font-size:12px}.profile-name{font-size:39px}.roster-options{gap:18px}}
@media(min-width:761px){.showcase .portrait-layer{width:51%}}
.roster-tag{padding:3px 7px;background:#102d3bd9;border-radius:3px}
/* Restore the luminous promotional direction throughout the experience. */
.stage.showcase .wash,.stage.showcase[data-profile=bloom] .wash{background:linear-gradient(90deg,#f3f8ed00 20%,#edf6ead4 59%,#f5f9eef2 100%)}
.showcase-panel{color:#173e49;text-shadow:0 1px 14px #ffffff50}
.profile-role,.skill-heading,.profile-count,.ability-kind{color:#526a60}
.profile-story,.ability-description p{color:#355460}
.profile-note,.ability-number{color:#5b7076}
.ability-button{color:#244751;background:linear-gradient(145deg,#ffffff8c,#f5fbef3d);border-color:#365b6538;box-shadow:0 3px 14px #31554d08}
.ability-button img{filter:brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(937%) hue-rotate(145deg);opacity:.85}
.ability-button.chosen{border-color:#758c76;background:linear-gradient(145deg,#ffffffcf,#eff5e69c);box-shadow:inset 0 0 0 1px #fff9,0 4px 16px #3b615019}
.ability-button:hover{background:#ffffffc9}
.ability-description{border-left-color:#819379}
.stage.forest .wash{background:linear-gradient(90deg,#edf6e5ed,#edf6e592 44%,transparent 83%)}
.stage.forest .hero-copy{color:#153e43;text-shadow:0 1px 16px #fff8}
.stage.forest .scene-caption{color:#e9f2e9;text-shadow:0 1px 8px #173e49}
.stage.belong-home .hero-copy{background:none;padding:0;color:#123443;top:50%;bottom:auto;transform:translateY(-50%);right:4%;left:auto;width:46%;text-align:center}
.stage.belong-home .hero-copy h1{font-size:clamp(60px,7.7vw,125px);letter-spacing:-3px}
dialog{background:linear-gradient(145deg,#f7faf2fa,#e6f1edf7);color:#173e49;border-color:#ffffffdc}
dialog .eyebrow{color:#66784e}dialog p{color:#425e67}dialog dl div{border-bottom-color:#254f5929}dialog dd{color:#52694e}
@media(max-height:700px) and (min-width:761px){.stage.belong-home .hero-copy h1{font-size:66px}}
@media(max-width:760px){.stage.showcase .wash,.stage.showcase[data-profile=bloom] .wash{background:linear-gradient(180deg,#edf6ea00 10%,#edf6ea80 30%,#edf6eaf5 45%,#f3f8ee 100%)}.stage.belong-home .hero-copy{top:calc(var(--mobile-art-height) + 25px);bottom:auto;transform:none;width:86%;right:7%;padding:0}.stage.belong-home .hero-copy h1{font-size:64px}.hero:has(.belong-home){height:790px;min-height:790px}.stage.forest .wash{background:linear-gradient(transparent,#edf5e9ed 75%)}.stage.forest .hero-copy{background:none}}
.devlog-card:after{background:linear-gradient(transparent,#0a202eea 80%)}
.stage.devlog .scene-art img{object-position:left center;filter:saturate(.6) brightness(.65)}
.stage.devlog .wash{background:linear-gradient(90deg,#0c253940 5%,#102939e8 49%,#102939f7 100%)}
.stage.devlog .hero-copy{color:#eff4ee;top:8%;bottom:auto;right:5%;left:auto;width:45%;transform:none;text-align:left;text-shadow:none}
.stage.devlog .hero-copy h1{font-size:clamp(42px,5.3vw,76px);line-height:.96;letter-spacing:-1px;margin:16px 0}
.stage.devlog .eyebrow{color:#c5d4c2;letter-spacing:2px;font-size:11px}
.stage.devlog .description{font-family:'Manrope',sans-serif;font-size:15px;line-height:1.6;color:#b8cbd2;margin:10px 0}
.stage.devlog .ornament,.stage.devlog .gold-button,.stage.devlog .availability,.stage.devlog .character-label{display:none}
.devlog-process{position:absolute;z-index:4;width:45%;right:5%;top:48%;color:#eff4ee}
.devlog-process[hidden]{display:none}
.devlog-process article{display:flex;gap:19px;padding:14px 0;border-top:1px solid #ffffff20}
.devlog-process article>span{font-size:11px;letter-spacing:1px;color:#b4c69f;padding-top:5px}
.devlog-process h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;margin:0 0 5px}
.devlog-process p{font-size:13px;line-height:1.6;color:#b7cbd1;margin:0;max-width:470px}
@media(max-height:800px) and (min-width:761px){.stage.devlog .hero-copy{top:6%}.stage.devlog .hero-copy h1{font-size:47px;margin:12px 0}.stage.devlog .description{font-size:13px}.devlog-process{top:44%}.devlog-process article{padding:9px 0;gap:14px}.devlog-process h3{font-size:22px}.devlog-process p{font-size:11px;line-height:1.55}}
@media(max-width:760px){.hero:has(.devlog){height:850px;min-height:850px}.stage.devlog .wash{background:linear-gradient(#10293955,#102939e8 35%,#102939 100%)}.stage.devlog .hero-copy{top:70px;right:7%;width:86%;background:none}.stage.devlog .hero-copy h1{font-size:62px}.devlog-process{top:365px;right:7%;width:86%}.devlog-process article{padding:20px 0}.devlog-process p{font-size:14px}}
@media(max-height:800px) and (min-width:761px){.stage.devlog .hero-copy{left:5%;right:auto;width:39%;top:15%}.stage.devlog .wash{background:linear-gradient(90deg,#102939b8,#102939ed 53%)}.devlog-process{top:10%;width:47%;right:4%}.devlog-process article{padding:15px 0}.devlog-process p{font-size:12px}}
/* Let the environment carry the color; keep the readable haze local to the copy. */
.stage.showcase .wash,.stage.showcase[data-profile=bloom] .wash{background:radial-gradient(ellipse at 79% 48%,#d4e4d2cc 0%,#c7daca9c 27%,#b2cebd38 53%,transparent 73%)}
.stage.belong-home .wash{background:radial-gradient(ellipse at 78% 47%,#dce8d8b8 0%,#c8dece75 30%,transparent 65%)}
.stage.showcase .scene-art{filter:none}
.showcase-panel{color:#10343b;text-shadow:0 1px 10px #e6eed780}
.profile-story,.ability-description p{color:#193c42}.profile-role,.skill-heading,.profile-count,.ability-kind{color:#31534d}.profile-note,.ability-number{color:#36594f}
.ability-button{background:#c4d9c74d;border-color:#234f4e45;backdrop-filter:blur(8px);box-shadow:none}
.ability-button.chosen{background:#e4e7c775;border-color:#7b8861;box-shadow:inset 0 0 0 1px #f1e7b838}.ability-button:hover{background:#dbe5ce80}
.stage.belong-home .hero-copy{text-shadow:0 1px 16px #e1ecd6b0}
.stage.forest .wash{background:radial-gradient(ellipse at 20% 48%,#c3d9b9b8, #aecba25c 37%,transparent 72%)}
.stage.village .wash{background:radial-gradient(ellipse at 78% 48%,#d8dfc7bd,#c5d7b775 31%,transparent 69%)}
@media(max-width:760px){.stage.showcase .wash,.stage.showcase[data-profile=bloom] .wash,.stage.belong-home .wash{background:linear-gradient(180deg,transparent 15%,#b4cfb84d 33%,#bfd4bce0 52%,#a9c6b0f2 100%)}.stage.forest .wash,.stage.village .wash{background:linear-gradient(transparent 15%,#bed2b6c9 72%,#afc9b5e0)}.stage.village .hero-copy{background:none}}
.showcase-panel{padding:22px 24px;background:linear-gradient(135deg,#c8dbc8a6,#b3cbbb75);backdrop-filter:blur(16px);border:1px solid #e2ebd738;border-radius:12px;text-shadow:none}
@media(max-height:800px) and (min-width:761px){.showcase-panel{padding:14px 18px}}
@media(max-width:760px){.showcase-panel{padding:0;background:none;backdrop-filter:none;border:0}}
/* A single continuous stage, with editorial copy instead of a floating card. */
.stage.showcase .wash,.stage.showcase[data-profile=bloom] .wash,.stage.belong-home .wash{background:radial-gradient(ellipse at 80% 50%,#d6e1cdba 0%,#c8d8c48c 30%,#bad0bd26 54%,transparent 72%)}
.showcase-panel{padding:0;background:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none}
.profile-name{font-weight:500;letter-spacing:-1.8px}.profile-story{max-width:460px}
.ability-button{border:0;border-top:1px solid #234c4c5c;border-bottom:1px solid #234c4c3b;border-radius:0;background:#d5dfcb24;backdrop-filter:none;box-shadow:none}
.ability-button.chosen{border-color:#647655;background:#dee4c956;box-shadow:inset 0 -2px #7b8861}.ability-button:hover{background:#dbe3cf66;transform:translateY(-2px)}
.ability-description{border-left:0;padding-left:0}.profile-note{color:#39534b}
.stage.showcase .scene-art img{object-position:center}
@media(max-height:800px) and (min-width:761px){.showcase-panel{padding:0}}
@media(max-width:760px){.hero:has(.belong-home){height:960px;min-height:960px}.stage.showcase .wash,.stage.showcase[data-profile=bloom] .wash,.stage.belong-home .wash{background:linear-gradient(180deg,transparent 15%,#b4cfb84d 33%,#bfd4bce0 52%,#a9c6b0f2 100%)}.stage.showcase .scene-art img{object-position:28% center}}
.showcase-panel{width:41%;right:5%}.profile-name{font-size:clamp(38px,4.1vw,60px)}.profile-story{max-width:42ch}.skill-heading,.ability-number{display:none}
.ability-grid{gap:14px;margin-top:24px}.ability-button{min-height:76px;padding:10px 4px 12px;border-top:0;background:none;gap:8px}.ability-button.chosen{background:none;box-shadow:inset 0 -2px #9a8048}.ability-button:hover{background:#dbe3cf33}.ability-button img{width:25px;height:25px}.ability-description{border-top:1px solid #36534b30;padding-top:16px;margin-top:18px}
@media(max-height:800px) and (min-width:761px){.showcase-panel{width:43%;right:4%}.profile-name{font-size:46px}.ability-grid{margin-top:16px}.ability-description{padding-top:10px;margin-top:12px}}
@media(max-width:760px){.showcase-panel{width:86%;right:auto}.profile-name{font-size:42px}.ability-grid{gap:8px}}
@media(min-width:761px){.stage.showcase .wash,.stage.showcase[data-profile=bloom] .wash,.stage.belong-home .wash{background:radial-gradient(ellipse 52% 95% at 82% 51%,#d1decbcc 0%,#c6d8c4a3 42%,#bad0bd26 77%,transparent 100%)}}
/* Feather the overlap instead of cutting the character at the text column. */
@media(min-width:761px){.showcase .portrait-layer{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,#000 0%,#000 44%,#000c 49%,#0005 55%,transparent 63%)}.showcase .portrait-float{width:51%}}
.showcase .portrait,.showcase[data-profile=pathfinder] .portrait,.showcase[data-profile=wayfarer] .portrait,.showcase[data-profile=bloom] .portrait{mask-image:linear-gradient(180deg,#000 0%,#000 86%,#000c 93%,transparent 100%)}
@media(max-width:760px){.showcase .portrait-layer{mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%)}.showcase .portrait-float{width:100%}}
@media(min-width:761px){.stage.showcase .portrait-layer{mask-image:linear-gradient(90deg,#000 0%,#000 44%,#000b 49%,#0004 55%,transparent 63%)}}
@media(max-width:760px){.stage.showcase .portrait-layer{mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%)}}
/* Frosted white reading surface, confined to the right-hand content. */
.stage.showcase .showcase-panel,.stage.belong-home .hero-copy{background:linear-gradient(135deg,#ffffff91,#ffffff52);backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);border:1px solid #ffffffa3;border-radius:18px;box-shadow:0 12px 38px #163d4514,inset 0 1px 0 #ffffff80;padding:30px 32px;text-shadow:none}
.stage.belong-home .hero-copy{padding:38px 28px}
@media(max-height:800px) and (min-width:761px){.stage.showcase .showcase-panel{padding:20px 24px}.stage.belong-home .hero-copy{padding:26px 22px}}
@media(max-width:760px){.stage.showcase .showcase-panel,.stage.belong-home .hero-copy{padding:24px 20px;border-radius:16px}.hero:has(.showcase){height:1030px;min-height:1030px}.stage.belong-home .hero-copy h1{font-size:56px}.stage.showcase .profile-name{font-size:38px}}
/* Full-height frosted right column. */
@media(min-width:761px){.stage.showcase .showcase-panel,.stage.belong-home .hero-copy{top:0;bottom:0;right:0;width:48%;height:100%;transform:none;border-radius:0;border:0;border-left:1px solid #ffffff80;padding:clamp(24px,3vw,46px);display:flex;flex-direction:column;justify-content:center}.stage.showcase .showcase-panel[hidden],.stage.belong-home .hero-copy[hidden]{display:none}.stage.belong-home .hero-copy .gold-button{align-self:center}.stage.belong-home .hero-copy h1{font-size:clamp(60px,7vw,110px)}}
@media(max-width:760px){.stage.showcase .showcase-panel,.stage.belong-home .hero-copy{left:0;right:0;top:var(--mobile-art-height);bottom:0;width:100%;border-radius:0;border:0;border-top:1px solid #ffffff80;padding:30px 7%;}.stage.belong-home .hero-copy{display:flex;flex-direction:column;justify-content:center}.stage.belong-home .hero-copy .gold-button{align-self:center}.stage.belong-home .hero-copy[hidden]{display:none}}
/* Belong keeps the open promotional composition. */
.stage.belong-home .hero-copy{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:0;box-shadow:none;padding:0;height:auto;display:block;top:50%;bottom:auto;right:4%;left:auto;width:46%;transform:translateY(-50%)}
.stage.belong-home .hero-copy[hidden]{display:none}
@media(max-width:760px){.stage.belong-home .hero-copy{top:calc(var(--mobile-art-height) + 25px);bottom:auto;left:auto;right:7%;width:86%;height:auto;padding:0;transform:none}}
/* The glass column provides separation; its characters retain their full silhouette. */
.stage.showcase:not(.belong-home) .portrait-layer,
.stage.showcase:not(.belong-home) .portrait{
 mask-image:none;
 -webkit-mask-image:none;
}
/* Compact character picker, readable against busy artwork. */
.roster{left:4%;bottom:20px;width:43%;padding:16px 16px 13px;border:1px solid #e5efd24d;border-radius:14px;background:linear-gradient(135deg,#12333bdb,#173b40c4);backdrop-filter:blur(14px);box-shadow:0 8px 25px #07282e38}
.roster-heading{font-size:10px;letter-spacing:1.4px;margin-bottom:24px;color:#f4edd6;text-shadow:none}.roster-options{gap:24px}.roster-choice{gap:19px}.roster-tag{background:none;padding:4px 8px;font-size:12px;color:#eef3ed;font-weight:600;text-shadow:none;border-radius:5px}.roster-choice[aria-pressed=true] .roster-tag{background:#ead18b;color:#243c38}.roster-choice[aria-pressed=true] .diamond{box-shadow:0 0 0 2px #1b3b40,0 0 0 3px #ecd48c;border-color:#ffe7a1}.roster-choice[aria-pressed=true]{--profile-accent:#ecd48c}.diamond{border-color:#d9e6d48c}
@media(max-height:800px) and (min-width:761px){.roster{left:3%;width:45%;bottom:14px;padding:12px 10px 9px}.roster-heading{font-size:9px;margin-bottom:19px}.roster-options{gap:21px}.roster-choice{gap:15px}.roster-tag{font-size:11px;padding:3px 7px}}
@media(max-width:760px){.roster{left:4%;width:92%;top:calc(var(--mobile-art-height) - 122px);bottom:auto;padding:12px 8px 9px}.roster-heading{font-size:9px;margin-bottom:18px}.roster-options{gap:23px}.roster-choice{gap:15px}.roster-tag{font-size:11px;padding:3px 6px}}
@media(max-width:350px){.roster-options{gap:18px}.roster-tag{font-size:10px;padding:3px 4px}}
/* The same village notebook, in Devlog's evening palette. */
.stage.devlog .wash{background:radial-gradient(#dce8b907 .8px,transparent .8px),linear-gradient(90deg,#163c3440,#193c35eb 48%,#193c35f7);background-size:9px 9px,100% 100%}.stage.devlog:after{content:'';position:absolute;z-index:5;left:calc(50% - 105px);top:-25px;width:125px;height:300px;background:url('assets/relationship-vine.svg') center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 3px 2px #102a2850)}.stage.devlog .hero-copy h1{font-family:'Trebuchet MS','Manrope',sans-serif;font-weight:700;font-size:clamp(36px,3.8vw,56px);letter-spacing:-1.5px;line-height:1.1;color:#f8f3da}.stage.devlog .eyebrow{display:inline-block;font-family:Georgia,serif;font-style:italic;font-size:13px;letter-spacing:0;background:#b9cf9430;color:#d4e1af;padding:7px 13px;border-radius:40% 45% 35% 30%;transform:rotate(-2deg)}.stage.devlog .description{color:#d0dcc7}.devlog-process article{border-top:1px dashed #cad8aa40;padding:16px 0;gap:16px}.devlog-process article>span{background:#c4d79a26;border-radius:50%;width:29px;height:29px;flex:none;text-align:center;padding-top:7px;color:#dce4b6;transform:rotate(-5deg)}.devlog-process h3{font-family:'Trebuchet MS','Manrope',sans-serif;font-size:21px;font-weight:700;letter-spacing:-.5px;color:#f1efd8;line-height:1.25}.devlog-process p{color:#c4d3bd;line-height:1.75}.devlog-card h2{font-family:'Trebuchet MS','Manrope',sans-serif;font-size:27px;font-weight:700}.devlog-card .card-kicker{font-family:Georgia,serif;font-style:italic;letter-spacing:0}
@media(max-height:800px) and (min-width:761px){.stage.devlog .hero-copy h1{font-size:36px}.stage.devlog:after{left:-32px;width:90px;height:225px}.devlog-process article{padding:12px 0}.devlog-process h3{font-size:18px}.devlog-process p{font-size:12px}.stage.devlog .wash{background:linear-gradient(90deg,#193c35bb,#193c35f2 53%)}}
@media(max-width:760px){.stage.devlog .hero-copy h1{font-size:39px}.stage.devlog:after{left:auto;right:-24px;width:75px;height:180px}.devlog-process{top:345px}.devlog-process h3{font-size:21px}.devlog-process p{font-size:14px}.stage.devlog .wash{background:linear-gradient(#193c3570,#193c35ed 35%,#193c35)}}
@media(max-width:760px){.hero:has(.devlog){height:940px;min-height:940px}.devlog-process{top:310px}}
.stage.devlog .hero-copy h1,.stage.devlog .eyebrow{font-variant:normal;text-transform:none}
/* Four independent floating portraits, without a shared container. */
.roster{background:none;backdrop-filter:none;border:0;box-shadow:none;padding:0;bottom:25px}.roster-heading{display:none}.roster-options{gap:26px}.roster-choice{gap:22px}.diamond{border:2px solid #e3ebdc;background:#153c43;box-shadow:0 5px 16px #051d2c80}.roster-tag{padding:5px 10px;background:#10333eeb;border:1px solid #d1dfd447;border-radius:5px;color:#f8f7ed;box-shadow:0 3px 10px #09222a55;font-size:12px;font-weight:600}.roster-choice[aria-pressed=true] .roster-tag{background:#efd594;color:#183943;border-color:#fff0b6}.roster-choice[aria-pressed=true] .diamond{border-color:#ffe9a4;box-shadow:0 0 0 2px #23434a,0 0 0 3px #f1d58f,0 7px 18px #041e2e80}
@media(max-height:800px) and (min-width:761px){.roster{padding:0;bottom:20px}.roster-options{gap:23px}.roster-choice{gap:19px}.roster-tag{font-size:11px;padding:4px 8px}}
@media(max-width:760px){.roster{padding:0;top:calc(var(--mobile-art-height) - 100px);bottom:auto}.roster-options{gap:22px}.roster-choice{gap:18px}.roster-tag{padding:4px 7px;font-size:11px}}
@media(max-width:350px){.roster-options{gap:15px}.roster-tag{font-size:10px;padding:4px 5px}}
.shell>header .brand{display:block;flex:none;width:clamp(195px,20vw,315px);height:clamp(64px,7vw,85px);padding:0;background:url('assets/monster-girl-valley-logo.png') center/contain no-repeat;font-size:0;line-height:0;text-indent:-9999px;overflow:hidden}
.shell>header .brand .star{display:none}
/* Home: cinematic title treatment over the village, with no boxed promo card. */
.stage.belong-home .wash{background:linear-gradient(90deg,#061c2600 23%,#0b283533 45%,#102b38bd 62%,#0d2636ed 100%)}
.stage.belong-home .hero-copy{z-index:4;left:auto;right:3.5%;top:50%;bottom:auto;width:min(42%,550px);height:auto;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 12px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#f5e9ca;text-shadow:0 2px 14px #031b28a8}
.stage.belong-home .hero-copy[hidden]{display:none}
.stage.belong-home .hero-copy .eyebrow{font:800 11px/1.4 'Nunito','Trebuchet MS',sans-serif;letter-spacing:.25em;color:#f0d89d;margin:0}
.stage.belong-home .hero-copy h1{font-size:0!important;line-height:0;margin:17px 0 0;max-width:none;width:100%;letter-spacing:0}
.stage.belong-home .hero-copy .home-logo{display:block;width:100%;max-width:500px;height:auto;margin:0 auto;filter:drop-shadow(0 5px 13px #00161be0)}
.stage.belong-home .hero-copy .ornament{display:flex;color:#e2c27c;margin:4px 0 0;opacity:.8}
.stage.belong-home .hero-copy .description{font:800 clamp(21px,1.9vw,27px)/1.3 'Nunito','Trebuchet MS',sans-serif;color:#f7f0de;max-width:22ch;margin:17px 0 29px;letter-spacing:-.025em}
.stage.belong-home .hero-copy .gold-button{align-self:center;min-width:205px;min-height:51px;background:linear-gradient(#f9e5ac,#dcb870);border:1px solid #fff1c2;color:#17323a;font:900 16px 'Nunito','Trebuchet MS',sans-serif;box-shadow:0 4px 0 #94754c,0 8px 20px #0319238c;transition:transform .2s,filter .2s}
.stage.belong-home .hero-copy .gold-button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.stage.belong-home .hero-copy [data-demo]{position:relative;display:grid;place-items:center;width:250px;max-width:100%;min-height:56px;padding:15px 48px;gap:0}
.demo-button-label{display:block;width:100%;text-align:center;white-space:nowrap}
.demo-button-arrow{position:absolute;right:17px;top:50%;width:21px;height:21px;transform:translateY(-50%);transition:transform .2s}
[data-demo]:hover .demo-button-arrow{transform:translate(3px,-50%)}
.stage.belong-home .hero-copy .availability{margin:14px 0 0;color:#d7c6a9;font:700 12px 'Nunito','Trebuchet MS',sans-serif}
@media(max-width:1100px) and (min-width:761px){.stage.belong-home .hero-copy{width:48%;right:2%}.stage.belong-home .hero-copy .description{font-size:15px}}
@media(max-width:760px){.shell>header .brand{height:70px}.stage.belong-home .wash{background:linear-gradient(180deg,#0e2c3800 18%,#0e2c3840 37%,#102a39f2 54%,#0d2636 100%)}.stage.belong-home .hero-copy{top:calc(var(--mobile-art-height) + 18px);bottom:auto;left:5%;right:5%;width:90%;height:auto;transform:none;padding:14px 8px 25px}.stage.belong-home .hero-copy .description{font-size:22px;margin:15px 0 24px}.stage.belong-home .hero-copy .home-logo{max-width:390px}.hero:has(.belong-home){height:930px;min-height:930px}}
@media(max-width:360px){.hero:has(.belong-home){height:960px;min-height:960px}}