/* SOFTBACK GAMES — editorial refresh v6 | accessible, responsive, restrained */
:root{--v6-navy:#111e30;--v6-navy2:#192b42;--v6-cream:#f6f3ec;--v6-soft:#eeeae2;--v6-gold:#caa778;--v6-ink:#17283a;--v6-teal:#5da6a4}
html{scroll-padding-top:96px}body{background:var(--v6-cream);color:var(--v6-ink);overflow-x:hidden}
button,a,select{ -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #66c5ca;outline-offset:4px}
.container{max-width:1200px}.site-header{height:86px;background:rgba(14,26,42,.96);box-shadow:0 9px 28px rgba(6,14,26,.12)}
.site-header .brand-lockup{background:transparent;border:none;padding:0;border-radius:0;box-shadow:none}
.site-header .brand:hover .brand-lockup{background:transparent;transform:none}.site-header .brand-lockup img{width:220px;filter:brightness(0) invert(1);max-height:62px}
.desktop-nav a{font-size:13px;letter-spacing:.01em}.desktop-nav a:hover{color:#efd2a6}
.lang-select{border-radius:11px;background-color:#172941;border-color:rgba(230,215,186,.21);height:43px;min-width:113px}
.header-contact{border-radius:11px}.site-header .reading-progress{position:absolute;bottom:-1px;height:2px;width:100%;pointer-events:none;left:0}.reading-progress>span{height:100%;display:block;width:0;background:linear-gradient(90deg,#dab787,#7cc6c1)}
.site-header .brand{z-index:2}.mobile-nav{box-shadow:0 16px 26px #0d1a2b30}
/* hero */
.hero{padding:100px 0 110px;background:#112036;min-height:718px}
.hero:before{background:radial-gradient(ellipse at 67% 19%,rgba(108,148,150,.16),transparent 45%),radial-gradient(ellipse at 5% 98%,rgba(196,150,98,.10),transparent 52%)}
.hero:after{opacity:.38}.hero-grid{gap:56px;align-items:center}
.hero-copy{position:relative;z-index:2}.hero-brand-signature{border-radius:12px;border:1px solid rgba(220,198,162,.22);padding:7px 17px 7px 8px;background:rgba(255,255,255,.035);max-width:max-content}
.signature-icon{width:50px;height:50px;border-radius:10px;background:#f8f3e9}.signature-icon img{height:46px;width:46px}
.hero h1{font-weight:800;letter-spacing:-.068em;line-height:1.12;font-size:clamp(49px,5.1vw,81px);margin:19px 0 22px}
.hero h1 span{color:#e2c08e}.hero-description{font-size:16px;line-height:1.92;max-width:510px;color:#c4d0da}
.hero-buttons{margin-top:32px}.button{border-radius:12px;min-height:47px}.button-primary{background:#d2b183;color:#13243a;box-shadow:0 10px 26px #050f1e40}.button-primary:hover{background:#ead0a8;color:#0e2034}
.hero-note{font-size:11px;letter-spacing:.05em;color:#9dacbb}
.hero-art{padding:14px 10px 34px 10px;isolation:isolate}.hero-art:before{content:"";position:absolute;inset:30px -23px 25px 44px;z-index:-1;background:radial-gradient(ellipse,#4d819c3f,transparent 73%);filter:blur(20px)}
.hero-art-main{border:5px solid #e0d0b92b;border-radius:27px;aspect-ratio:1.09;box-shadow:0 30px 67px rgba(3,10,19,.38),0 0 0 1px #dac6a235;overflow:hidden}
.hero-art-main>img{object-position:57% center;filter:saturate(.83) brightness(.87)}.hero-art-shade{background:linear-gradient(180deg,transparent 35%,rgba(10,20,37,.88))}
.hero-art-label{left:34px;bottom:34px}.hero-art-label small{color:#e5c6a2}.hero-art-label strong{font-size:clamp(41px,4vw,64px);letter-spacing:.04em}.hero-art-label span{color:#d5e0e5}
.floating-token{box-shadow:0 16px 39px #0005}.floating-token-a{background:#f0dcb9}.floating-token-b{background:#2d5b70}
.hero-visual-caption{font-size:10px;color:#9fb0be}
.strip{background:#e9e3d8;border-bottom:1px solid #dbd3c5}.strip-inner>span{color:#4c5d6c;letter-spacing:.11em}
/* hierarchy */
.section{padding-top:100px;padding-bottom:100px}.section-head{margin-bottom:39px}.section-head h2,.studio-layout h2{font-size:clamp(36px,4.3vw,56px);line-height:1.18;letter-spacing:-.06em}
.section-head h2 em,.studio-layout h2 em{color:#b18d5b}.section-head p{line-height:1.8;color:#6b7885}
.section-label{color:#93774f}.projects-section{background:#f7f5ef}.project-grid{gap:26px}.project-card{border-radius:22px;border:1px solid #e7e0d5;box-shadow:0 8px 25px rgba(29,45,60,.045);background:#fffdf8}
.project-visual{aspect-ratio:1.72;background:#20354d}.project-visual:after{background:linear-gradient(180deg,rgba(5,13,29,.06),transparent 40%,rgba(5,13,29,.48))}.project-visual img{filter:saturate(.85)}
.project-card:hover .project-visual img{transform:scale(1.045);filter:saturate(.97)}.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(25,42,60,.13)}
.project-number{position:absolute;left:22px;top:19px;z-index:2;border:1px solid rgba(255,255,255,.45);background:rgba(14,26,42,.50);backdrop-filter:blur(10px);border-radius:100px;color:white;font-weight:800;font-size:11px;padding:8px 11px;letter-spacing:.13em}
.project-overlay{right:17px;bottom:16px;left:auto;letter-spacing:.1em;background:#10233b9c;border:1px solid #ffffff44;padding:8px 11px;border-radius:8px;backdrop-filter:blur(12px)}
.project-body{padding:26px 29px 25px}.project-body h3{font-size:30px;font-weight:800;letter-spacing:-.048em}.project-body p{font-size:14px;color:#667483;line-height:1.82;min-height:49px}.project-category{color:#ab8455}.project-status{border-radius:7px;font-size:11px;line-height:1.35;background:#f5efe4;color:#906f48;padding:6px 9px}.project-foot{border-top:1px solid #ece6dc;margin-top:19px;padding-top:15px}.project-foot>span:first-child{font-size:12px;color:#79828c}.small-arrow{border-radius:10px}
.project-card[hidden]{display:none!important}.project-filter{border-radius:13px;background:#eeebe5}.filter-chip{border-radius:10px}.filter-chip.active{background:#1a314b;color:#fff;box-shadow:0 4px 11px #192b4225}
.project-note{font-size:12px;color:#7e8992}
/* shared section typography */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:#a08158;display:inline-flex;align-items:center;gap:11px;text-transform:uppercase}
.eyebrow b{display:block;width:27px;height:1px;background:#c6a67f}.eyebrow.muted{color:#8495a4;font-size:10px}
.new-section-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:36px}
.new-section-head h2,.roadmap-head h2,.process-intro h2,.faq-intro h2{font-size:clamp(33px,4.1vw,54px);letter-spacing:-.065em;line-height:1.19;font-weight:800;margin:15px 0 16px}
.new-section-head p,.roadmap-head p,.process-intro p{color:#6c7885;font-size:14px;line-height:1.91;max-width:660px;margin:0}
/* cinematic art gallery */
.feature-theatre{padding:106px 0 104px;background:#eae6dd;position:relative;overflow:hidden}
.feature-theatre:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#697c8b17 1px,transparent 1px);background-size:24px 24px;opacity:.27;pointer-events:none}
.feature-theatre .container{position:relative}
.scene-stage{position:relative;height:clamp(410px,43vw,580px);border-radius:22px;overflow:hidden;background:#203249;border:7px solid rgba(255,255,255,.76);box-shadow:0 20px 53px #13263d30}
.scene-stage-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%;filter:saturate(.76) brightness(.82);transition:opacity .22s ease,transform .6s ease}
.scene-stage:hover .scene-stage-image{transform:scale(1.025)}.scene-stage-glaze{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,19,36,.83),rgba(9,21,36,.23) 58%,transparent 90%),linear-gradient(0deg,rgba(9,21,36,.5),transparent 52%)}
.scene-stage-content{position:absolute;left:clamp(22px,5vw,72px);bottom:clamp(28px,5vw,68px);color:#fff;max-width:550px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;z-index:1}
.scene-stage-kicker{border:1px solid #ffffff5a;border-radius:5px;padding:8px 11px;font-size:10px;font-weight:800;letter-spacing:.15em;color:#f0dcb9;background:rgba(12,24,40,.34)}
.scene-stage-title{font-size:clamp(48px,7vw,96px);letter-spacing:-.06em;line-height:1;font-weight:850;text-shadow:0 5px 28px #0d172780}
.scene-stage-title>span{font-size:.35em;color:#eccd91;vertical-align:top}
.scene-stage-caption{font-size:15px;color:#e5e5df;font-weight:550;letter-spacing:-.01em}
.stage-link{display:inline-flex;gap:25px;align-items:center;text-decoration:none;border-radius:9px;background:#f4e6cc;color:#15263c;font-size:13px;font-weight:800;padding:14px 19px;transition:background .2s,transform .2s}
.stage-link:hover{background:#fff7e7;transform:translateX(3px)}
.scene-stage-count{position:absolute;bottom:30px;right:38px;color:#fff;font:500 22px Georgia,serif;letter-spacing:.09em}.scene-stage-count span{opacity:.55;font-size:14px}
.scene-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:20px}
.scene-thumb{display:flex;align-items:center;gap:13px;cursor:pointer;padding:9px;text-align:left;background:rgba(255,255,255,.60);border:1px solid #ddd6ca;border-radius:13px;min-width:0;color:#26394b;transition:box-shadow .18s,background .18s,border-color .18s}
.scene-thumb:hover{background:#fff}.scene-thumb.is-active{background:#fff;border-color:#a78f6d;box-shadow:0 3px 0 #bca17c}
.scene-thumb img{width:101px;height:66px;object-fit:cover;border-radius:8px;filter:saturate(.78)}.scene-thumb>span{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:800;line-height:1.3}
.scene-thumb small{font-size:10px;color:#aa8959;letter-spacing:.14em}
/* at a glance */
.roadmap-section{padding:100px 0;background:#f1eee7;border-top:1px solid #e6e0d4}
.roadmap-head{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:32px}.roadmap-orbit{font-size:115px;color:#d6bc92;line-height:1;opacity:.62}
.status-list{background:#fffdf8;border:1px solid #e3dacd;border-radius:20px;padding:11px 29px;box-shadow:0 15px 32px #2a3c5510}
.status-item{min-height:96px;display:grid;grid-template-columns:46px 96px minmax(150px,1fr) auto 32px;align-items:center;gap:23px;padding:13px 0;text-decoration:none;color:#193048;border-bottom:1px solid #ece5d9}
.status-item:last-child{border:0}.status-index{color:#b59d7c;font:italic 20px Georgia,serif}.status-art{height:62px;width:96px;border-radius:9px;display:block;overflow:hidden;background:#213855}
.status-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .2s}.status-item:hover img{transform:scale(1.08)}
.status-name{display:flex;flex-direction:column;gap:5px}.status-name strong{font-size:17px;letter-spacing:-.03em}.status-name small{font-size:11px;color:#7a8996}
.status-pill{border-radius:100px;background:#f1ede5;border:1px solid #e4dacb;color:#786c59;padding:7px 12px;font-size:11px;font-weight:700;text-align:center;max-width:165px}
.status-arrow{font-size:21px;color:#ad916b;transition:transform .2s}.status-item:hover .status-arrow{transform:translate(3px,-3px)}.roadmap-note{font-size:12px;color:#768291;margin:14px 4px 0}
/* creative approach */
.process-section{padding:109px 0 112px;background:#f8f6f0}
.process-intro{max-width:780px;margin-bottom:35px}.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.process-card{background:#fffdf9;border:1px solid #e6dfd4;border-radius:18px;padding:34px 34px 39px;min-height:267px;box-shadow:0 12px 27px rgba(26,38,51,.037)}
.process-card:nth-child(2){background:#eef2ef}.process-card:nth-child(3){background:#f4f0e8}
.process-number{display:flex;align-items:center;justify-content:space-between;color:#b18c5a;font:italic 28px Georgia,serif}
.process-number span{font-size:24px;color:#c2ab88}.process-card h3{margin:51px 0 9px;color:#17293e;font-size:22px;letter-spacing:-.04em}.process-card p{color:#647483;font-size:13px;line-height:1.95;margin:0}
/* studio section */
.studio-showcase{padding:112px 0;background:linear-gradient(145deg,#0f2033,#1e3447 67%,#203b45)}
.studio-layout{gap:75px}.values-grid article{border-radius:16px;border-color:#ffffff26;background:#fff9}.values-grid article h3{font-size:21px}.values-grid article p{line-height:1.85}
.brand-identity{background:#ece7dc;padding:98px 0}.brand-identity-card{border-radius:26px;box-shadow:0 20px 48px #1a2c3d12;border-color:#ded4c4}.brand-identity-art{min-height:365px;background:linear-gradient(145deg,#fefcf6,#e9e2d4)}.brand-identity-art img{width:min(100%,370px)}
/* faq */
.faq-section{background:#eaece9;padding:95px 0 104px}.faq-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px}.faq-intro h2{margin-bottom:20px}.faq-asterisk{font-size:110px;color:#c7ac7e;opacity:.55;line-height:1;margin:25px 0}
.faq-list{border-top:1px solid #cad1cc}.faq-item{border-bottom:1px solid #cad1cc}.faq-item summary{list-style:none;display:flex;gap:19px;align-items:center;cursor:pointer;padding:24px 3px;font-size:15px;font-weight:770;line-height:1.5;color:#1d3544}
.faq-item summary::-webkit-details-marker{display:none}.faq-index{color:#ab895c;font:italic 15px Georgia,serif}.faq-plus{margin-left:auto;font-size:25px;font-weight:300;transition:transform .2s}.faq-item[open] .faq-plus{transform:rotate(45deg)}
.faq-item p{max-width:590px;color:#5a6e75;font-size:14px;line-height:1.92;padding:0 48px 24px;margin:0}
/* contact + footer */
.contact-section{background:#f8f6f0;padding:90px 0 116px}.contact-panel{background:linear-gradient(120deg,#d5b98e,#ece0ca);border:1px solid #ccb387;border-radius:24px;padding:55px 57px;box-shadow:0 15px 40px #29334810}.contact-panel h2{font-size:clamp(28px,3.5vw,43px)}
.site-footer{padding-top:70px;padding-bottom:40px;background:#101e31}.footer-layout{gap:40px}.footer-brand .brand-lockup{background:#f6f0e6;border:0;padding:8px 14px;box-shadow:none}.footer-brand .brand-lockup img{width:240px}.footer-bottom{border-color:#ffffff22}
.back-to-top{position:fixed;bottom:23px;right:23px;z-index:90;text-decoration:none;display:grid;place-items:center;width:44px;height:44px;background:#f9edda;color:#22354a;border:1px solid #ceb182;border-radius:13px;box-shadow:0 8px 20px #1e2d3f24;font-size:25px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s,transform .2s}.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
/* detail pages */
.detail-hero{background:linear-gradient(145deg,#f5f0e8,#e8e5df);padding:48px 0 106px}.detail-grid{grid-template-columns:.82fr 1.18fr;gap:56px}
.detail-intro h1{font-size:clamp(49px,5.1vw,76px);letter-spacing:-.06em}.detail-kicker{font-size:clamp(23px,2.2vw,33px);color:#b18755}.detail-desc{font-size:15px;line-height:1.96}
.detail-picture{border-radius:24px;border:7px solid #fff;aspect-ratio:1.25;box-shadow:0 24px 55px #14243f2a}.detail-picture>img{filter:saturate(.84)}
.detail-concept-note{color:#8f8577;font-size:11px;margin-top:25px;line-height:1.65}
.detail-features{background:#fffdf9}.detail-feature-grid{gap:19px}.detail-feature{border-radius:17px;border-color:#e5ddd2;background:#faf8f3;padding:28px}.detail-feature:hover{transform:translateY(-2px)}
.detail-how{background:#e9ebe8}.detail-how li{padding:21px 4px;border-color:#ccd1ca}.detail-how li span{color:#ad916a}.detail-gallery{background:#f8f5ee}.gallery-grid img{border-radius:18px;border:5px solid #fff;box-shadow:0 15px 32px #172d4217;filter:saturate(.78)}
.detail-info{background:#f8f6f0;padding:91px 0}.info-layout dl{border-radius:16px;border-color:#e4ddd0;box-shadow:0 12px 35px #172d420b}
.related-section{padding:106px 0;background:#eae6dd}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.related-card{text-decoration:none;color:#1a3045;background:#fffcf6;border:1px solid #ded7cb;border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 24px #15293e0d}
.related-card:hover{transform:translateY(-5px);box-shadow:0 15px 29px #15293e20}.related-art{position:relative;aspect-ratio:1.6;overflow:hidden;background:#14253e}.related-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.78)}
.related-jump{position:absolute;right:15px;top:13px;background:#fffaf0;color:#1c354c;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font-size:21px}
.related-card>div:last-child{padding:23px 23px 27px}.related-category{color:#a28a6d;font-size:10px;letter-spacing:.07em;font-weight:800}.related-card h3{margin:10px 0 7px;font-size:22px;letter-spacing:-.05em}.related-card p{color:#6e7b85;font-size:12px;line-height:1.7;margin:0}
/* responsive */
@media(max-width:1100px){.hero-grid{gap:34px}.hero h1{font-size:clamp(48px,5.5vw,68px)}.scene-thumb img{width:76px}.status-item{gap:13px}.faq-layout{gap:40px}}
@media(max-width:920px){.hero{padding:67px 0 88px;min-height:0}.hero-art-main{aspect-ratio:1.65}.hero-grid{gap:22px}.feature-theatre,.roadmap-section,.process-section,.faq-section,.related-section{padding:78px 0}.roadmap-orbit{font-size:65px}.new-section-head{align-items:start}.scene-stage{height:480px}.faq-layout{grid-template-columns:1fr;gap:16px}.faq-asterisk{display:none}.faq-intro h2{margin-bottom:0}.studio-showcase{padding:85px 0}.brand-identity{padding:75px 0}.related-grid{gap:11px}}
@media(max-width:700px){.site-header{height:69px}.site-header .brand-lockup img{width:165px}.hero-brand-signature{font-size:11px}.hero{padding:53px 0 76px}.hero h1{font-size:clamp(43px,10vw,66px)}.hero-description{font-size:14px}.hero-art-main{aspect-ratio:1.36}.hero-art{padding:10px 3px 26px}.hero-art-label strong{font-size:40px}.new-section-head{display:block;margin-bottom:26px}.new-section-head h2,.roadmap-head h2,.process-intro h2,.faq-intro h2{font-size:clamp(31px,8vw,42px)}.feature-theatre,.roadmap-section,.process-section,.faq-section,.related-section{padding:64px 0}.scene-stage{height:412px;border-width:4px;border-radius:17px}.scene-stage-content{left:22px;bottom:33px;gap:13px;right:18px}.scene-stage-title{font-size:56px}.scene-stage-count{right:20px;bottom:17px;font-size:17px}.scene-stage-caption{font-size:12px}.scene-controls{gap:7px;margin-top:12px}.scene-thumb{padding:5px;display:block;border-radius:9px}.scene-thumb img{width:100%;height:62px}.scene-thumb>span{gap:2px;font-size:10px;padding:5px 2px}.scene-thumb small{font-size:8px}.process-grid{grid-template-columns:1fr;gap:12px}.process-card{min-height:0;padding:24px 25px 27px}.process-card h3{margin:20px 0 8px}.roadmap-head{margin-bottom:22px}.roadmap-orbit{display:none}.status-list{padding:4px 16px}.status-item{grid-template-columns:25px 68px minmax(0,1fr) 22px;gap:10px;min-height:87px}.status-art{width:68px;height:52px}.status-pill{display:none}.status-name strong{font-size:14px}.status-name small{font-size:10px}.status-index{font-size:14px}.project-grid{gap:16px}.project-visual{aspect-ratio:1.66}.project-body{padding:21px 22px 23px}.project-body h3{font-size:25px}.project-body p{min-height:0}.project-number{left:12px;top:12px;padding:6px 9px}.studio-showcase{padding:72px 0}.brand-identity{padding:63px 0}.faq-item summary{font-size:13px;padding:21px 0;gap:12px}.faq-item p{padding:0 19px 23px 27px;font-size:13px}.contact-panel{padding:31px 24px}.contact-section{padding:65px 0 81px}.related-grid{grid-template-columns:1fr;gap:16px}.related-art{aspect-ratio:1.95}.related-card>div:last-child{padding:20px 22px}.detail-hero{padding:27px 0 66px}.detail-picture{aspect-ratio:1.5}.detail-intro h1{font-size:51px}.detail-info{padding:65px 0}.back-to-top{right:12px;bottom:13px;width:40px;height:40px}}
@media(max-width:390px){.site-header .brand-lockup img{width:137px}.scene-stage{height:386px}.scene-stage-title{font-size:45px}.scene-stage-kicker{font-size:8px}.scene-thumb img{height:48px}.scene-thumb>span{font-size:9px}.hero-art-label{left:15px}.hero-art-label strong{font-size:32px}.project-overlay{font-size:9px}.lang-select{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep the adopted navy / teal / gold official logotype legible, not monochrome. */
.site-header .brand-lockup{background:#fbf6ec;border:1px solid rgba(223,196,153,.68);border-radius:11px;padding:5px 9px;box-shadow:0 2px 12px #07111e22}
.site-header .brand:hover .brand-lockup{background:#fffdf9;transform:translateY(-1px)}
.site-header .brand-lockup img{width:184px;filter:none;max-height:56px}
@media(max-width:700px){.site-header .brand-lockup{padding:4px 6px;border-radius:8px}.site-header .brand-lockup img{width:146px;max-height:48px}}
@media(max-width:390px){.site-header .brand-lockup img{width:133px}}