:root{color-scheme:dark;--navy:#0b1421;--ink:#101a28;--white:#f9f8f5;--text:#f0f2f5;--muted:#ced6df;--line:rgba(240,244,250,.27);--gold:#e8d1a9;--font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;background:var(--navy)}
body{font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #f4cb85;outline-offset:4px}
.hero{position:relative;min-height:780px;min-height:max(780px,100svh);display:flex;flex-direction:column;isolation:isolate;overflow:hidden;background:#10213b}
.scene{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;transform:translate3d(0,0,0)}
/* A single, steady background for all games. Carousel animation affects only .feature and .game-actions. */
.scene-photo{position:absolute;inset:-1.5%;width:103%;height:103%;object-fit:cover;object-position:center 52%;opacity:1;transform:scale(1.022)}
/* Balanced gradient: enough contrast behind type, but the volcano and Kraken remain visible. */
.scene-gradients{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,14,25,.69) 0%,rgba(6,16,28,.51) 16%,rgba(7,17,30,.27) 34%,rgba(7,17,30,.075) 52%,rgba(0,0,0,0) 74%),linear-gradient(180deg,rgba(5,13,24,.23) 0%,rgba(5,13,24,.03) 20%,rgba(5,12,23,.02) 66%,rgba(4,12,23,.65) 100%)}
.scene-grain{position:absolute;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.site-header{padding:25px clamp(26px,5vw,96px) 0;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;text-decoration:none;gap:14px;flex-shrink:0}
.brand img{width:59px;height:49px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.2))}
.brand span{font:400 clamp(23px,2vw,34px)/1 var(--serif);letter-spacing:-.055em;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.top-tagline{font-size:10px;letter-spacing:.23em;color:#d7dde8;text-align:right;margin:0;text-shadow:0 2px 10px #121923}
.hero-middle{flex:1;display:flex;align-items:center;padding:42px clamp(26px,5vw,96px) 42px;min-height:0}
.hero-copy{width:min(750px,57vw);max-width:100%;text-shadow:0 2px 15px rgba(3,8,14,.55)}
.studio-label{display:flex;align-items:center;gap:14px;letter-spacing:.39em;font-size:clamp(10px,.91vw,13px);font-weight:650;margin:0 0 17px;color:#edf2f7}
.fine-rule{display:block;flex:0 0 37px;height:1px;background:#d1dce9}
h1{font-weight:750;letter-spacing:-.064em;white-space:nowrap;font-size:clamp(58px,6.25vw,106px);line-height:1.02;margin:0 0 20px;color:#fff}
.studio-description{font-size:clamp(18px,1.52vw,23px);line-height:1.48;color:#e0e7ef;margin:0;letter-spacing:-.025em}
.feature{display:flex;align-items:center;gap:22px;margin-top:43px;transition:opacity .22s ease,transform .22s ease}
.feature.is-switching{opacity:.15;transform:translateY(6px)}
.feature-thumbnail{width:155px;aspect-ratio:1.64/1;object-fit:cover;border:1px solid rgba(238,242,248,.46);border-radius:5px;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.feature-info{min-width:0}
.feature-above{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:650;letter-spacing:.34em;color:#e4eaf0;line-height:1.3}
.status-dot{height:5px;width:5px;border-radius:50%;background:#e2bd83;box-shadow:0 0 7px rgba(255,218,168,.7)}
.feature-info h2{font:italic clamp(36px,3vw,49px)/1.16 var(--serif);letter-spacing:-.035em;margin:6px 0 3px;color:#fff}
.feature-info p{font-size:14px;margin:0;line-height:1.45;color:#f0f0f0}
.platform-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.platform-chips span{font-size:9px;letter-spacing:.10em;font-weight:660;padding:4px 7px;border-radius:3px;background:rgba(9,20,33,.31);border:1px solid rgba(241,247,253,.34)}
.game-actions{display:flex;align-items:center;gap:14px;margin-top:26px;transition:opacity .22s}
.game-actions.is-switching{opacity:.25}
.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border-radius:5px;border:1px solid rgba(239,243,247,.60);min-height:52px;padding:0 23px;font-size:12px;font-weight:700;white-space:nowrap;letter-spacing:.012em;transition:transform .2s,background .2s,border-color .2s,color .2s;text-shadow:none}
.button:hover{transform:translateY(-1px)}.button:active{transform:translateY(1px)}
.button-main{color:#172033;background:#f7f5f1;border-color:#f7f5f1}.button-main:hover{background:#e2e9f0}
.button-outline{color:#f7f8fa;background:rgba(5,13,25,.18)}.button-outline:hover{background:rgba(237,242,247,.16);border-color:#fff}
.button-icon{font-size:17px;line-height:1}.out-arrow{font-size:17px;font-weight:400;line-height:1;margin-left:1px}
.demo-caption{font-size:9px;letter-spacing:.15em;color:#e5e5e5;opacity:.59;margin-top:17px}
.hero-footer{padding:0 clamp(26px,5vw,96px) 26px;display:flex;align-items:center;justify-content:space-between;gap:26px;position:relative;z-index:2}
.slider-controls{display:flex;align-items:center;gap:10px;flex-shrink:0;background:rgba(6,14,25,.14);padding:4px 0;text-shadow:0 2px 12px #111}
.slide-counter{display:flex;gap:9px;align-items:center;font-size:12px;letter-spacing:.11em;margin-right:7px;white-space:nowrap}.slide-counter b{font-weight:650}.slide-counter .slash,#slideTotal{color:#9eabba}
.nav-button{width:32px;height:32px;color:#f6f6f8;background:rgba(10,20,31,.14);border:1px solid rgba(235,241,250,.35);border-radius:50%;display:grid;place-items:center;transition:background .2s}.nav-button:hover{background:rgba(230,237,250,.20)}
.nav-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.progress-items{display:flex;gap:5px}
.progress-item{width:39px;height:23px;display:flex;align-items:center;padding:0;border:0;background:none;position:relative}
.progress-item:before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(245,247,250,.34)}
.progress-fill{height:2px;background:#fff;position:relative;z-index:1;width:0%;pointer-events:none}
.autoplay-toggle{display:flex;align-items:center;gap:7px;border:1px solid rgba(233,240,249,.29);border-radius:100px;background:rgba(6,15,25,.25);color:#d9e2ef;font-size:11px;min-height:30px;padding:0 10px;font-variant-numeric:tabular-nums}
#autoplayIcon{font-size:14px;font-weight:700;min-width:9px}
.footer-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px);justify-content:flex-end;flex-wrap:wrap}
.text-link{border:0;background:none;padding:9px 0;color:#fff;font-size:13px;text-shadow:0 1px 10px #111}.text-link:hover{color:#f3d4a7}
.footer-divider{width:1px;height:22px;background:rgba(234,241,249,.36)}.copyright{font-size:11px;white-space:nowrap;color:#d0d8e4;text-shadow:0 1px 9px #101010}
/* Bottom-sheets for non-game company information */
.layer-overlay{position:fixed;inset:0;z-index:100;background:rgba(3,9,18,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:flex-end;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s}
.layer-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.bottom-sheet{width:min(1180px,calc(100% - 48px));max-height:82svh;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(130deg,#28313e 0%,#161f2d 62%,#121b29 100%);border:1px solid rgba(232,241,255,.2);border-radius:30px 30px 0 0;border-bottom:0;box-shadow:0 -20px 100px rgba(0,0,0,.35);transform:translateY(104%);transition:transform .43s cubic-bezier(.2,.8,.2,1);padding:31px clamp(24px,4vw,55px) 42px;outline:none}
.layer-overlay.open .bottom-sheet{transform:translateY(0)}
.sheet-handle{width:54px;height:5px;background:rgba(245,247,250,.36);border-radius:100px;margin:-15px auto 23px}
.panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.panel-title-row h2{font-size:clamp(28px,2.5vw,40px);line-height:1.15;letter-spacing:-.05em;margin:0 0 21px}
.modal-close{border:0;color:#dce3eb;background:rgba(255,255,255,.04);font-size:30px;font-weight:300;line-height:1;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.modal-close:hover{background:rgba(255,255,255,.13)}
.about-grid{display:grid;grid-template-columns:155px 1px minmax(0,1fr);gap:38px;align-items:center}
.about-grid img{width:138px}.about-divider{height:110px;background:rgba(245,248,252,.3)}
.panel-copy{color:#becada;line-height:1.68;font-size:15px;max-width:820px;margin:0 0 13px}.panel-copy.lead{font-weight:660;color:#f7f9fc}
.contact-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 7px}
.contact-button{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(235,241,250,.37);background:rgba(9,17,29,.19);color:#fff;border-radius:6px;padding:13px 18px;font-size:13px;min-height:49px}.contact-button:hover{background:rgba(255,255,255,.11)}
.panel-small{font-size:12px;color:#8fa0b5;line-height:1.55;margin-top:22px}
/* Game details deliberately differ from a company bottom-sheet: a large, centered dialog. */
.detail-overlay{align-items:center;padding:22px}
.game-modal{width:min(1230px,78vw);max-height:87svh;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(230,237,248,.27);border-radius:18px;background:#111c2b;box-shadow:0 35px 120px rgba(0,0,0,.63);outline:none;transform:translateY(18px) scale(.97);opacity:.55;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.detail-overlay.open .game-modal{transform:translateY(0) scale(1);opacity:1}
.detail-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px 28px;background:rgba(17,27,42,.97);border-bottom:1px solid rgba(233,241,250,.13);backdrop-filter:blur(12px)}
.detail-kicker{color:#9faec4;letter-spacing:.24em;font-weight:630;font-size:10px}
.detail-head h2{font:italic clamp(28px,2.9vw,43px)/1.1 var(--serif);margin:4px 0 0}
.detail-body{padding:24px 28px 32px}
.detail-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(265px,.82fr);gap:26px}
.media-wrap{position:relative;background:#060d16;border-radius:10px;overflow:hidden;border:1px solid rgba(234,240,248,.20);aspect-ratio:16/9}
.media-wrap img,.media-wrap video,.media-wrap iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.media-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(3,11,22,.74);color:#e6ecf4}
.media-placeholder strong{font-size:20px}.media-placeholder span{font-size:13px;color:#c6d0db;max-width:340px}
.media-tabs{display:flex;gap:7px;margin-top:12px}
.media-tab{border:1px solid #526176;background:transparent;color:#cdd8e7;border-radius:5px;padding:8px 15px;font-size:12px;font-weight:640}.media-tab[aria-pressed=true]{background:#e9edf3;border-color:#e9edf3;color:#192638}
.detail-side{display:flex;flex-direction:column;gap:16px}
.detail-side .overview-kicker{letter-spacing:.18em;font-size:10px;color:#a6bad0;font-weight:700}
.detail-side h3{font-size:20px;letter-spacing:-.025em;font-weight:710;margin:5px 0 9px}
.detail-side p{color:#c6d0df;font-size:13px;line-height:1.65;margin:0}
.spec-list{display:grid;gap:12px;padding:15px 0;border-top:1px solid #354356;border-bottom:1px solid #354356}
.spec-row{display:grid;grid-template-columns:85px 1fr;gap:10px;font-size:12px;line-height:1.4}.spec-row span:first-child{color:#9cacbe}.spec-row strong{font-weight:500;color:#eaf0f9}
.detail-tags{display:flex;flex-wrap:wrap;gap:6px}.detail-tags span{font-size:10px;color:#d3e0ef;background:#29394f;border:1px solid #45566c;border-radius:100px;padding:5px 9px}
.store-title{font-size:11px;letter-spacing:.18em;color:#adbed1;margin:0 0 10px;font-weight:700}
.store-buttons{display:flex;flex-wrap:wrap;gap:9px}.store-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(239,244,250,.57);border-radius:6px;background:#e9edf2;color:#142134;padding:11px 13px;font-size:12px;font-weight:700}.store-button:hover{background:#fff}
.detail-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:30px;margin-bottom:12px}.detail-gallery-head h3{font-size:16px;margin:0;letter-spacing:-.015em}.detail-gallery-head span{color:#9baabb;font-size:11px}
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.shot{position:relative;border:2px solid transparent;border-radius:8px;background:#253246;overflow:hidden;padding:0;aspect-ratio:16/9}.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .24s}.shot:hover img{transform:scale(1.05)}.shot.is-selected{border-color:#f5e2b9}.shot:focus-visible{outline-offset:4px}
.detail-note{font-size:11px;color:#8e9eb4;line-height:1.6;margin-top:19px}
.toast{z-index:250;position:fixed;left:50%;bottom:28px;transform:translate(-50%,15px);opacity:0;pointer-events:none;border:1px solid rgba(233,239,249,.4);background:#27354a;padding:13px 20px;border-radius:10px;max-width:calc(100% - 28px);font-size:13px;text-align:center;box-shadow:0 16px 45px rgba(0,0,0,.4);transition:transform .2s,opacity .2s}.toast.show{transform:translate(-50%,0);opacity:1}
body.dialog-open{overflow:hidden}
@media(max-width:1120px){.hero-copy{width:min(650px,65vw)}h1{font-size:clamp(57px,6.3vw,84px)}.top-tagline{display:none}.hero-footer{flex-wrap:wrap;gap:11px}.footer-links{margin-left:auto}.game-modal{width:min(1070px,92vw)}}
@media(max-width:700px){
 .hero{min-height:760px;min-height:100svh}.scene-photo{object-position:67% 50%;inset:0;width:100%;height:100%}.scene-gradients{background:linear-gradient(180deg,rgba(5,13,25,.54) 0%,rgba(5,13,25,.34) 20%,rgba(5,13,25,.49) 40%,rgba(5,13,25,.10) 66%,rgba(4,12,24,.84) 100%),linear-gradient(90deg,rgba(5,12,23,.45) 0%,rgba(5,12,23,.10) 85%)}
 .site-header{padding:20px 20px 0}.brand{gap:9px}.brand img{width:43px;height:39px}.brand span{font-size:23px}
 .hero-middle{padding:55px 21px 30px;align-items:flex-start}.hero-copy{width:100%}.studio-label{font-size:9px;letter-spacing:.27em}.fine-rule{flex-basis:28px}h1{font-size:clamp(48px,11.2vw,66px);white-space:normal}.studio-description{font-size:17px}
 .feature{gap:12px;margin-top:30px}.feature-thumbnail{width:106px}.feature-above{font-size:8px;letter-spacing:.18em}.feature-info h2{font-size:34px}.feature-info p{font-size:12px}.platform-chips{margin-top:7px}
 .game-actions{gap:9px;margin-top:23px;flex-wrap:wrap}.button{min-height:44px;padding:0 13px;gap:8px;font-size:10px}.button-icon{font-size:13px}.demo-caption{font-size:8px;letter-spacing:.08em}
 .hero-footer{margin-top:auto;gap:16px;padding:10px 20px 24px;align-items:flex-start;flex-direction:column}.slider-controls{gap:9px;width:100%;justify-content:space-between}.progress-item{width:30px}.autoplay-toggle{margin-left:auto}.footer-links{justify-content:flex-start;gap:10px 18px;margin:0}.text-link{font-size:12px}.copyright{font-size:10px}.footer-divider{display:none}
 .bottom-sheet{width:100%;max-height:90svh;border-radius:26px 26px 0 0;padding:29px 23px 36px}.about-grid{grid-template-columns:1fr;gap:10px}.about-grid img{width:100px}.about-divider{display:none}.panel-copy{font-size:14px}.contact-buttons{gap:8px}.contact-button{padding:11px 13px;font-size:12px}
 .detail-overlay{padding:7px;align-items:center}.game-modal{width:100%;max-height:96svh;border-radius:13px}.detail-head{padding:18px 18px}.detail-body{padding:17px 16px 26px}.detail-top{grid-template-columns:1fr;gap:19px}.detail-side{gap:15px}.shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.detail-head h2{font-size:31px}.detail-kicker{font-size:9px}.media-tabs{margin-top:9px}.detail-gallery-head{margin-top:26px}.detail-note{font-size:10px}
}
@media(max-height:680px) and (min-width:701px){.hero{min-height:680px}.hero-middle{padding-top:18px;padding-bottom:14px}.feature{margin-top:24px}.game-actions{margin-top:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.scene-photo{transform:none!important}}
[hidden]{display:none!important}
