/* Art direction: measured focal points, native image ratios, readable mobile compositions. */
.splash-visual{position:absolute;inset:0;overflow:hidden}
.portal-art,.splash-art{object-position:50% 50%;transform-origin:50% 50%;animation-name:centered-breathe}
@keyframes centered-breathe{from{transform:scale(1)}to{transform:scale(1.025)}}
.site-header nav a{min-height:44px;display:inline-flex;align-items:center}
.splash-copy h1,.portal-copy h1{letter-spacing:.045em}
.splash-copy{bottom:17%}.splash-shade,.portal-shade{background:linear-gradient(90deg,#0c100fe6, #0c100f73 30%,transparent 63%),linear-gradient(0deg,#111615b8,transparent 47%),linear-gradient(180deg,#1116159c,transparent 23%)}
.game-splash-art{border:1px solid #ffffff12;border-radius:4px;box-shadow:0 24px 70px #0005;overflow:hidden}
.game-splash-art img{height:auto;aspect-ratio:auto;object-fit:contain;animation:none;transform:none}
.game-splash{padding-bottom:78px;min-height:660px}
.game-splash-copy{min-width:0}.game-splash-copy h1{text-wrap:balance;letter-spacing:.025em;line-height:1.4}
.game-line{text-wrap:pretty;max-width:27em;line-height:1.8}
.square-splash .game-splash-art{width:min(100%,420px);justify-self:center}
.square-splash .game-splash-art img{aspect-ratio:auto}
.theme-light{--bg:#f0ede5;--ink:#31352c;--muted:#656858;--line:#30362a29}
.theme-light .site-header{border-color:#30362a20}.theme-light .game-line{color:#53594a}.theme-light .genre{color:#6c705e}
.theme-light .game-splash:before{opacity:.27}.theme-light .game-splash-art{border-color:#3e45351c;box-shadow:0 24px 60px #3c433016}
.theme-light .primary{background:#343d30;color:#f9f6e9}.theme-light .primary:hover{background:#4a5543}
.theme-light .eyebrow{color:#73714d}.theme-light .simple-intro>p:last-child{color:#4a5042}
.theme-light .game-splash-copy h1{font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif;font-weight:650;letter-spacing:-.015em;font-size:clamp(36px,4vw,60px)}
.theme-light .outline:hover{background:#38432a09}.theme-light .next-game>span{color:#60684d}
.simple-intro{grid-template-columns:.85fr 1.2fr;gap:6%;padding-block:52px}.simple-intro>p:last-child{font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif;font-size:18px;line-height:2;max-width:630px}
.tile-image{background:color-mix(in srgb,var(--accent) 15%,#151a17);border:1px solid #242a2115;border-radius:3px}
.tile-image img{aspect-ratio:auto;height:100%;width:100%;object-fit:contain}
.square-poster .tile-image img{padding:0}.tile-caption h3{line-height:1.6;letter-spacing:.01em}
.all-games .eyebrow{color:#6c654f}.genre-filters button{color:#606659}.tile-number{color:#5e6657}.tile-caption p{color:#59614e}
.tianji-feature-art img{height:auto}.tianji .tianji-panorama img{object-fit:contain;max-height:none;animation-name:centered-breathe}
.tianji .world-intro h2{line-height:1.7}.tianji .world-intro>p{max-width:480px}
.moments{padding-block:78px}.screen-nav{display:flex;align-items:center;gap:12px}.screen-nav .section-note{margin-right:16px}
.screen-nav button{border:1px solid var(--line);border-radius:50%;width:44px;height:44px;flex-shrink:0;font-size:20px;background:transparent}
.screen-nav button:hover{background:var(--accent);color:#20261e}.screen-nav button:disabled{opacity:.3;cursor:default}
.screenshot-track{align-items:flex-start;scroll-behavior:smooth;scroll-padding-left:2px;scrollbar-width:thin;scrollbar-color:#918672 transparent;padding:2px 2px 26px;gap:22px}
.screenshot-track .shot{flex:0 0 auto;max-width:none;border-radius:5px;box-shadow:0 12px 30px #0002;border:1px solid var(--line)}
.shot img{height:auto;max-height:480px;width:auto;max-width:min(78vw,680px);aspect-ratio:auto;object-fit:contain}
.play-panel{gap:35px}.qr{padding:14px;border-radius:4px}.qr img{width:154px;height:154px}
.next-game>img{object-fit:contain;background:#353930;border-radius:3px}.next-game h2{line-height:1.4}
.gallery-page .gallery-heading{padding-top:122px}.gallery-page .section-heading{margin-bottom:32px}
.gallery-page .viewer{border-color:#ccb48426;border-radius:6px;background:radial-gradient(ellipse at 50% 38%,#95835430,transparent 67%),#1b1f1a}
.gallery-page .card-stage{overflow:hidden}.gallery-page .card-object{transform-origin:50% 50%}
.gallery-page .gesture-hint{font-size:13px;color:#b9bbaa}.gallery-page .viewer-controls button{min-height:44px;border-radius:3px;font-size:14px}
.gallery-page .qualities button{min-height:44px;font-size:13px}.gallery-page .selected-info p{font-size:16px;line-height:1.85;color:#bfc3b5}
.gallery-page .selected-info{min-height:0;margin-bottom:25px}.gallery-page .catalog-controls{border-top:1px solid var(--line);padding-top:22px}
.gallery-page .card-tile span{font-size:12px}.gallery-page .card-tile img{height:auto}
.prose{max-width:900px}.prose p{max-width:650px}.prose .eyebrow{margin-bottom:24px}.prose h1{text-wrap:balance}
.art-cards .showcase-card{width:34%;aspect-ratio:2/3;position:relative;flex-shrink:0;overflow:hidden;border-radius:8px;background:#181b16;border:1px solid #baa374;box-shadow:0 25px 45px #0007;transition:transform 1s}
.showcase-card:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#111912cc)}
.art-cards .showcase-card img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:none!important;animation:none!important;border:none;border-radius:0;box-shadow:none}
.showcase-trim{z-index:2}.showcase-name,.showcase-faction{position:absolute;text-align:center;left:0;right:0;z-index:3;font-family:Archive,serif;color:#f6dfaa;text-shadow:0 1px 5px #000}
.showcase-faction{top:4%;font-size:14px}.showcase-name{bottom:4%;font-size:24px}.showcase-glint{position:absolute;inset:0;z-index:4;background:linear-gradient(120deg,transparent 25%,#f3d99823 45%,transparent 65%);pointer-events:none}
.showcase-card:first-child{transform:translate(18%,8%) rotate(-13deg)}.showcase-card:nth-child(2){z-index:2;animation:card-float 7s ease-in-out infinite alternate}.showcase-card:last-child{transform:translate(-18%,8%) rotate(13deg)}
.card-feature:hover .showcase-card:first-child{transform:translate(10%,5%) rotate(-16deg)}.card-feature:hover .showcase-card:last-child{transform:translate(-10%,5%) rotate(16deg)}
[data-offscreen] .showcase-card{animation-play-state:paused!important}
.culture-note,.availability{color:var(--muted)}
@media(min-width:1001px){.splash-copy,.portal-copy{left:5.5%;}.splash-copy h1,.portal-copy h1{font-size:clamp(64px,6.8vw,100px)}.portal-copy{bottom:20%}.hero-vertical,.splash-side{right:4%}}
@media(max-width:1000px) and (min-width:651px){.game-splash{padding-top:145px;min-height:600px}.game-splash-copy h1{font-size:36px}.shot img{height:auto;max-height:420px}.splash-copy h1{font-size:66px}.screen-nav .section-note{display:none}}
@media(max-width:650px){
 .site-header{height:70px;background:#151a16;border-bottom:1px solid #c8bc9925;color:#eeeade}
 .tianji .site-header,.theme-light .site-header{background:var(--bg);color:var(--ink)}
 .site-header .game-brand{font-size:16px;max-width:49%;line-height:1.45;text-wrap:balance}
 .site-header nav{gap:16px}.site-header nav a{font-size:12px}.nav-play{padding:0 0 3px}
 .portal-hero,.sanguo-splash{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding-top:70px;background:#151a16}
 .splash-visual{position:relative;inset:auto;height:clamp(310px,48svh,450px);width:100%;flex-shrink:0}
 .portal-art,.splash-art{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation-name:centered-breathe}
 .splash-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#151a16,transparent 15%),linear-gradient(180deg,#151a1620,transparent 25%);pointer-events:none}
 .splash-shade,.portal-shade{display:none}
 .portal-copy,.splash-copy{position:relative;inset:auto;left:auto;right:auto;bottom:auto;max-width:none;width:100%;text-align:center;padding:19px 6% 0;z-index:1}
 .portal-copy h1,.splash-copy h1{font-size:clamp(44px,12vw,57px);line-height:1.22;letter-spacing:.07em}
 .portal-copy h1 span,.splash-copy h1 small{font-size:21px;letter-spacing:.37em;margin-top:13px;padding-left:.37em}
 .portal-copy .eyebrow,.splash-copy .eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:12px}
 .splash-tagline{font-size:18px;margin:19px 0 22px;letter-spacing:.07em}
 .portal-copy .button{margin-top:24px;min-width:172px}.splash-copy .play-actions{justify-content:center;gap:12px}
 .hero-vertical,.splash-side{display:none}.hero-bottom{position:relative;inset:auto;left:auto;right:auto;bottom:auto;padding:26px 6% 22px;width:100%;font-size:10px}
 .hero-bottom a{padding:8px 0}.sanguo-splash .scroll-cue{position:relative;inset:auto;bottom:auto;left:auto;align-self:flex-start;margin:27px 6% 23px;min-height:32px;display:flex;align-items:center}
 .portal-hero .motion-toggle{position:absolute;bottom:92px;right:5%;font-size:9px;min-height:34px}.sanguo-splash .motion-toggle{bottom:25px;right:6%;font-size:10px;min-height:32px}
 .game-splash{padding:96px 0 38px;gap:30px;min-height:0}.game-splash-art{width:88%;border-radius:4px;box-shadow:0 20px 40px #0003}
 .game-splash-art img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;animation:none;transform:none}
 .square-splash .game-splash-art{width:66%;max-width:290px}.square-splash .game-splash-art img{aspect-ratio:auto}
 .game-splash-copy{text-align:center;padding:0 6%}.game-splash-copy h1{font-size:clamp(29px,8.2vw,37px);text-wrap:balance;letter-spacing:.02em}
 .theme-light .game-splash-copy h1{font-size:clamp(29px,8.2vw,37px)}.game-line{font-size:16px;margin:17px auto 25px;max-width:310px;line-height:1.85}
 .game-splash-copy .play-actions{justify-content:center}.genre{margin-top:23px;font-size:11px}
 .simple-intro{padding:31px 7%;text-align:left;display:block}.simple-intro .eyebrow{font-size:10px;margin:0 0 14px}.simple-intro>p:last-child{font-size:16px;line-height:1.95}
 .world-intro{padding:48px 7%}.world-intro h2{font-size:30px;line-height:1.6}.world-intro>p:not(.eyebrow){margin-top:20px;font-size:16px;line-height:1.95}
 .card-feature{padding:30px 7% 45px;gap:14px}.card-feature-art{width:100%}.art-cards{min-height:300px;max-width:420px;margin:auto}.card-feature-copy h2{font-size:31px}
 .tianji-feature{padding:25px 0 38px}.tianji-feature-copy{padding-top:22px}.tianji-feature h2{font-size:clamp(26px,7.1vw,31px)}
 .tianji-splash{padding-top:91px;padding-bottom:35px}.tianji-panorama{width:100%;margin:0}.tianji-panorama img{width:100%;height:auto;object-fit:contain;max-height:none}
 .tianji-title{margin-top:24px}.tianji-title h2{font-size:31px}.tianji-caption{font-size:11px;margin-top:29px}.tianji .world-intro{padding:45px 7%}
 .all-games{padding:48px 6%}.all-games .section-heading h2{font-size:29px}.games-grid{gap:29px 14px}.tile-image{aspect-ratio:1.45;border-radius:3px}
 .tile-caption{gap:7px;padding-top:12px}.tile-caption h3{font-size:14px;line-height:1.5}.tile-caption p{font-size:11px}.genre-filters{gap:8px 18px;justify-content:space-between}.genre-filters button{font-size:12px}
 .moments{padding:47px 6%}.moments .section-heading{display:block;margin-bottom:23px}.moments .section-heading h2{font-size:29px}
 .screen-nav{margin-top:14px;gap:8px}.screen-nav .section-note{font-size:11px;margin:0 auto 0 0}.screen-nav button{width:44px;height:44px;min-width:44px;font-size:18px}
 .screenshot-track{gap:16px;margin-right:-6vw;padding-right:6vw;align-items:center}.screenshot-track .shot{flex-basis:auto;max-width:none}.shot img{height:auto;max-height:420px;width:auto;max-width:78vw;aspect-ratio:auto}
 .play-panel{margin:0 6%;padding:33px 0;gap:22px}.play-panel h2{font-size:clamp(23px,6.4vw,29px);text-wrap:balance}.play-panel .eyebrow{font-size:10px}.play-panel .button{font-size:13px;padding:12px 15px;gap:14px}
 .qr{padding:10px}.qr img{width:112px;height:112px}.qr figcaption{font-size:10px}.play-panel p:not(.eyebrow){font-size:13px}
 .next-game{padding:26px 6%;gap:15px}.next-game>img{width:83px;height:66px;flex-shrink:0}.next-game h2{font-size:20px}.next-game .eyebrow{font-size:9px}
 .gallery-page .gallery-heading{padding-top:101px}.gallery-page .gallery-heading h1{font-size:32px}.gallery-page .gallery-heading .section-heading{margin-bottom:22px}
 .gallery-page .collector{padding:0 6% 35px}.gallery-page .viewer{padding:12px 10px 20px}.gallery-page .card-stage{height:365px}.gallery-page .card-object{width:210px;height:315px}
 .gallery-page .gesture-hint{font-size:11px}.gallery-page .viewer-controls{gap:8px;margin:12px 0}.gallery-page .viewer-controls button{font-size:13px;padding:8px 12px}.gallery-page .qualities button{font-size:12px}
 .gallery-page .selected-info p{font-size:15px}.gallery-page .catalog-controls{margin-top:20px}.gallery-page .card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 9px}.gallery-page .card-tile span{font-size:12px}
 .prose{padding:110px 7% 60px}.prose h1{font-size:35px;line-height:1.6}.prose h2{font-size:23px}.prose p{font-size:16px;line-height:1.95}.showcase-name{font-size:16px}.showcase-faction{font-size:10px}
}
@media(max-width:360px){.site-header nav{gap:12px}.site-header .game-brand{font-size:14px}.splash-copy .play-actions .button{padding:12px 18px}.qr img{width:96px;height:96px}.qr{padding:8px}.play-panel{gap:16px}.gallery-page .viewer-controls button{padding:8px 9px}.gallery-page .card-object{width:196px;height:294px}.gallery-page .card-stage{height:340px}.shot img{height:auto;max-height:370px}.genre-filters{gap:7px 12px}.genre-filters button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.portal-art,.splash-art,.tianji-panorama img{animation:none;transform:none}.screenshot-track{scroll-behavior:auto}}
