:root{--gold:#e8c767;--ink:#10100e;--muted:#b9b8b0;--line:#5f502d;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:#050605;color:#f7f6ef;font-family:'Noto Sans KR','Noto Sans',Arial,sans-serif;line-height:1.65}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button{border:0;background:none}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{line-height:1.22;word-break:keep-all;overflow-wrap:anywhere}button{text-align:start}.site-shell{max-width:1440px;width:calc(100% - 112px);margin:0 auto;border-inline:1px solid #272620;box-shadow:0 0 100px #b99a3a0b}.header{height:84px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:#0c0d0beF;position:relative;z-index:10;border-bottom:1px solid #65532b}.brand{display:flex;align-items:center;gap:16px;white-space:nowrap}.brand b{font-family:Oswald,'Arial Narrow',sans-serif;font-size:29px;font-weight:700;line-height:1.3;border:2px solid var(--gold);border-radius:2px;color:var(--gold);padding:0 6px;letter-spacing:-1px}.brand span{font-family:Oswald,Arial,sans-serif;font-size:13px;letter-spacing:6px;color:var(--gold)}.desktop-nav{display:flex;align-items:center;gap:23px;font-size:13px;font-weight:700}.desktop-nav a,.desktop-nav button{padding:8px 0;position:relative}.desktop-nav a:hover,.desktop-nav button:hover{color:var(--gold)}.header-actions{display:flex;align-items:center;gap:5px}select{width:105px;border:0;background:#111;color:#eee;padding:8px;font-size:12px;cursor:pointer}.menu-toggle{display:none;font-size:25px}.hero{min-height:650px;position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;background:url('assets/hero.png') 65% center/cover;z-index:-2}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050806c9 0%,#05080655 30%,transparent 60%),linear-gradient(0deg,#06080485,transparent 25%);z-index:-1}.hero-word{position:absolute;top:0;left:40px;font-family:Oswald,Impact,sans-serif;font-size:clamp(70px,10vw,155px);font-weight:700;line-height:1.2;letter-spacing:-5px;color:#d1b75922;z-index:-1}.hero-copy{padding:82px 46px;max-width:630px}.eyebrow{font:700 11px/1.4 'Noto Sans KR',sans-serif;letter-spacing:3px;color:var(--gold);margin-bottom:14px}h1{font-weight:900;font-size:clamp(42px,4.6vw,70px);letter-spacing:-3px;text-shadow:0 3px 30px #0008}h1 span:last-child{color:#fff}.intro{max-width:355px;margin:23px 0 27px;font-size:16px;color:#e4e4db}.buttons{display:flex;gap:13px;align-items:center;flex-wrap:wrap}.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:12px 22px;border-radius:4px;font-size:13px;font-weight:800;line-height:1.5;text-align:center;transition:filter .2s,transform .2s}.btn:hover{filter:brightness(1.12);transform:translateY(-2px)}.gold{background:linear-gradient(115deg,#f8df8e,#d3a639);color:#19170f;border:1px solid #ffe69b;box-shadow:0 3px 18px #edbd3320}.outline{border:1px solid #c9aa51;color:#efe9d4;background:#0c0d0b77}.video-link{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}.play-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;background:#050806aa;color:white;font-size:16px;padding-left:3px}.slide-note{position:absolute;bottom:25px;left:46px;display:flex;gap:9px;align-items:center;font-size:11px}.slide-note span{color:#a8a99e}.slide-note i{height:2px;width:80px;background:linear-gradient(90deg,var(--gold) 40%,#aaa5 40%);margin:0 8px}.slide-note small{letter-spacing:2px;color:#c8c8b8}.coin{min-height:290px;display:grid;grid-template-columns:1.1fr 1fr;border-block:1px solid #9c7d37;background:#080906;overflow:hidden}.coin-art{background:url('assets/coin.png') center 47%/cover;min-height:290px;position:relative}.coin-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 75%,#080906)}.coin-copy{display:flex;flex-direction:column;justify-content:center;padding:32px 35px}.coin-copy .eyebrow{margin-bottom:9px}.coin-slogan{font-size:clamp(16px,1.8vw,24px);font-weight:800}.coin h2{font-size:clamp(28px,3.2vw,46px);color:var(--gold);font-weight:900;letter-spacing:-1px;margin:5px 0 25px}.coin .btn{font-size:12px;padding:11px 16px;gap:12px}.worlds{padding:36px 30px 38px;background:radial-gradient(ellipse at bottom left,#57401920,transparent 65%),#10110f}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-heading .eyebrow{margin-bottom:8px}.section-heading h2{font-size:clamp(25px,2.8vw,38px);font-weight:900;letter-spacing:-1.5px}.section-heading>p{font-size:12px;max-width:300px;color:#bfbfb3}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.game-card{border:1px solid #a2853b;border-radius:5px;overflow:hidden;background:linear-gradient(130deg,#1a1b17,#0c0e0b);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}.game-card:hover{transform:translateY(-4px);border-color:#ffe293}.game-picture{display:block;position:relative;width:100%;aspect-ratio:1.12;background-image:url('assets/games.png');background-size:300% 100%;background-repeat:no-repeat;overflow:hidden}.game-peperta{background-position:0% 50%}.game-zombie{background-position:50% 50%}.game-ashen{background-position:100% 50%}.game-picture:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#040604f2 0%,#07080722 65%,transparent)}.game-overlay{position:absolute;inset:auto 22px 20px;z-index:1}.game-overlay h3{font-size:clamp(24px,2.8vw,38px);font-weight:900;letter-spacing:-1.5px;text-shadow:0 2px 10px #000}.peperta-title{color:#f4d573}.ashen-title{font-family:'Noto Serif KR',Georgia,serif;letter-spacing:-2px}.game-overlay p{font-size:12px;margin:8px 0 12px;color:#deded6;min-height:2em}.game-overlay>span{font-size:12px;font-weight:800}.status{padding:18px 20px;min-height:150px;border-top:1px solid #a2853b;flex:1}.status>small{font-size:10px;color:#ddc16d;font-weight:700}.status h4{font-size:17px;line-height:1.5;margin:5px 0 8px;font-weight:800}.status>p{font-size:11px;color:#a7a99e}.badges{display:flex;gap:7px;flex-wrap:wrap}.badge{border-radius:4px;border:1px solid;font-size:10px;padding:2px 7px}.done{color:#b5e49b;border-color:#5e9144;background:#33552333}.making{color:#edcb61;border-color:#9c7d2e;background:#7c5f1933}.chapter-track{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;margin-top:12px}.chapter-track i{height:9px;background:#32352f;border:1px solid #494c45;border-radius:2px}.chapter-track i:first-child{background:#74bd50;border-color:#a6e976}.chapter-track i:nth-child(2){background:#7b6728;border-color:#f1cb61}.guides{position:relative;isolation:isolate;display:flex;justify-content:flex-end;background:#f3ecdc;color:#181a16;min-height:330px;overflow:hidden;padding:38px 30px}.guide-art{position:absolute;inset:0 68% 0 0;background-image:url('assets/hero.png');background-size:auto 125%;background-position:39% 57%;filter:saturate(.9);z-index:-1;mask-image:linear-gradient(90deg,black 75%,transparent)}.guide-content{width:72%}.guides .eyebrow{color:#a2702b;margin-bottom:7px}.guides h2{font-weight:900;font-size:clamp(23px,2.5vw,34px);letter-spacing:-1.2px}.guide-intro{font-size:12px;color:#57594d;margin:9px 0 20px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.guide-card{background:#fff9edb8;border:1px solid #d3b87f;padding:13px;border-radius:4px;min-width:0;color:#202219}.guide-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.guide-label h3{font-size:15px;font-weight:900}.guide-label>span{color:#9b7028}.portrait-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.portrait-row i{height:83px;border:1px solid #d2b66f;border-radius:3px;background-image:url('assets/characters.png');background-size:650% auto;background-position-y:59%}.portrait-row i:nth-child(1){background-position-x:3%}.portrait-row i:nth-child(2){background-position-x:34%}.portrait-row i:nth-child(3){background-position-x:65%}.portrait-row i:nth-child(4){background-position-x:96%}.battle-preview{height:83px;background:linear-gradient(90deg,#06100766,#06100755),url('assets/hero.png') center 70%/cover;display:flex;align-items:center;justify-content:center;gap:10px;color:white;font-size:12px}.battle-preview .play-icon{width:35px;height:35px;font-size:12px}.news{padding:30px;display:grid;grid-template-columns:1fr 1.65fr;gap:30px;background:#0c0e0b}.news h2{font-size:23px;font-weight:800}.news .eyebrow{margin-bottom:10px}.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.news-grid :is(button,a){padding:0;display:flex;flex-direction:column;gap:4px}.news-grid strong{font-size:12px}.news-grid :is(button,a)>span{color:#a9ac9e;font-size:10px}.news-image{height:80px;width:100%;background-size:cover;border:1px solid #514730;border-radius:3px}.n1{background-image:url('assets/hero.png');background-position:65% 15%}.n2{background-image:url('assets/coin.png');background-position:center}.n3{background-image:url('assets/games.png');background-size:300% 100%;background-position:right}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 30px;border-top:1px solid #413a25;font-size:10px;color:#a5a799}footer .brand b{font-size:22px}footer .brand span{font-size:10px;letter-spacing:4px}dialog{width:min(880px,calc(100% - 30px));max-height:90dvh;border:1px solid #c5a44d;border-radius:10px;padding:26px;background:#12150f;color:#f2f1e8;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#030503d9;backdrop-filter:blur(7px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dialog-top .eyebrow{margin:0}.dialog-top button{font-size:24px;width:44px;height:44px;border:1px solid #7d6b3d;border-radius:50%}#detail-body h2{font-size:32px;margin:15px 0}#detail-body p{font-size:15px;color:#d3d6c8;margin:15px 0;white-space:pre-line}#detail-body .modal-art{height:270px;border-radius:5px;background-image:url('assets/games.png');background-size:300% 100%;background-position:left}#detail-body .full-characters{width:100%;border-radius:5px}#detail-body .notice{font-size:12px;color:#aeb497;border-top:1px solid #494f36;padding-top:15px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;z-index:99;background:#111;padding:10px}#mobile-nav{padding:14px 24px;border-bottom:1px solid #6b5731;display:flex;gap:16px;flex-wrap:wrap}#mobile-nav[hidden]{display:none}
@media(min-width:1800px){.site-shell{margin:24px auto 40px;border:1px solid #3e3824;border-radius:6px;overflow:clip}}
@media(max-width:1150px){.site-shell{width:calc(100% - 56px)}.header{padding:0 24px;gap:16px}.desktop-nav{gap:13px;font-size:11px}.brand{gap:10px}.brand span{font-size:11px;letter-spacing:4px}.hero{min-height:570px}.hero-copy{padding-inline:30px;max-width:510px}.hero h1{font-size:53px}.coin-copy{padding:24px}.worlds{padding-inline:22px}.game-overlay{inset-inline:16px}.status{padding:14px}.guide-content{width:76%}}
@media(max-width:800px){.site-shell{width:100%;border:0}.header{height:67px;padding:0 20px}.brand b{font-size:25px}.brand span{font-size:10px;letter-spacing:4px}.desktop-nav{display:none}.header-actions select{width:92px}.menu-toggle{display:block}.hero{min-height:620px;align-items:flex-end}.hero-art{background-position:66% center}.hero:after{background:linear-gradient(0deg,#020702fa,#03070388 40%,transparent 80%)}.hero-word{font-size:86px;left:20px;top:8px}.hero-copy{padding:220px 24px 76px;max-width:100%;width:100%}.hero h1{font-size:47px;letter-spacing:-2px}.intro{font-size:14px;max-width:300px;margin:16px 0 22px}.hero .eyebrow{font-size:10px}.slide-note{bottom:24px;left:24px}.coin{grid-template-columns:1fr}.coin-art{min-height:230px;background-position:center 48%}.coin-art:after{background:linear-gradient(0deg,#080906,transparent 25%)}.coin-copy{padding:10px 24px 30px;text-align:center;align-items:center}.coin-slogan{font-size:17px}.coin h2{font-size:36px;margin-bottom:22px}.coin .buttons{justify-content:center}.coin .btn{padding:11px 16px}.worlds{padding:28px 18px 30px}.section-heading{display:block;margin-bottom:20px}.section-heading h2{font-size:29px;letter-spacing:-1px}.section-heading>p{margin-top:10px;max-width:100%;font-size:12px}.game-grid{grid-template-columns:1fr;gap:20px}.game-picture{aspect-ratio:1.65;background-size:300% auto;background-position-y:35%}.game-overlay{inset:auto 20px 17px}.game-overlay h3{font-size:32px}.game-overlay p{margin:7px 0;min-height:0;font-size:12px}.status{min-height:112px;padding:14px 19px}.status h4{font-size:17px}.chapter-track{max-width:360px}.guides{padding:30px 20px;background:#f4ebd9}.guide-art{opacity:.15;inset:0;background-position:center}.guide-content{width:100%}.guides h2{font-size:28px}.guide-intro{font-size:13px}.guide-grid{grid-template-columns:1fr;gap:15px}.guide-label h3{font-size:18px}.portrait-row i{height:110px}.battle-preview{height:145px}.news{grid-template-columns:1fr;padding:28px 20px;gap:20px}.news h2{font-size:24px}.news-grid{gap:10px}.news-image{height:80px}.news-grid strong{font-size:12px}.news-grid :is(button,a)>span{font-size:10px}footer{padding:23px 20px;flex-wrap:wrap;gap:14px}footer .brand{width:100%}#detail-body h2{font-size:25px}#detail-body .modal-art{height:220px}dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Text-free production artwork; original proportions stay intact. */
.game-picture{background-size:300% auto}.guide-art{background-image:url('assets/characters.png');background-size:400% auto;background-position:33.333% center}.portrait-row i{background-size:400% 100%;background-position-y:center}.portrait-row i:nth-child(1){background-position-x:0%}.portrait-row i:nth-child(2){background-position-x:33.333%}.portrait-row i:nth-child(3){background-position-x:66.666%}.portrait-row i:nth-child(4){background-position-x:100%}
body:lang(ar){font-family:'Noto Sans Arabic','Noto Sans KR',sans-serif}body:lang(th){font-family:'Noto Sans Thai','Noto Sans KR',sans-serif}
@media(max-width:380px){.header{padding-inline:13px;gap:8px}.header .brand{gap:8px}.header .brand b{font-size:21px}.header .brand span{font-size:8px;letter-spacing:2.5px}.header-actions>span{display:none}.header-actions select{width:73px;padding:7px 3px;font-size:11px}.menu-toggle{font-size:23px;padding:4px}.hero h1{font-size:39px}.hero-copy{padding-inline:20px}.slide-note{left:20px}.coin .btn{padding:10px 12px;font-size:11px;gap:8px}}
.battle-preview{background-image:linear-gradient(90deg,#06100733,#06100722),url('assets/battle.png');background-position:center;background-size:cover}#detail-body .guide-illustration{width:100%;border-radius:6px;display:block;margin:18px 0}
.n3{background-size:300% auto}.portrait-row i{background-size:400% auto}
/* Approved mockup header: compact bar, centered navigation, discreet locale/account controls. */
.header{height:56px;padding:0 4.3%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;background:#080a08;border-bottom:1px solid #5a4a2780}
.header>.brand{justify-self:start;gap:15px}.header .brand b{font-size:30px;line-height:1.15;border-width:1.5px;padding:0 6px;border-radius:2px;letter-spacing:-.6px}.header .brand span{font-size:12px;letter-spacing:5px;line-height:1}
.desktop-nav{justify-self:center;gap:28px;font-size:12px;font-weight:700;white-space:nowrap}.desktop-nav>a:first-child:after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--gold)}
.header-actions{justify-self:end;display:flex;align-items:center;gap:20px;min-width:0}.locale-picker{position:relative;display:flex;align-items:center;gap:6px;min-height:36px;color:#f3f3e9;font-size:12px;font-weight:600;direction:ltr;flex-shrink:0}.locale-picker .globe-icon{width:19px;height:19px}.chevron-icon{width:10px;height:10px}.locale-picker select{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;cursor:pointer}.locale-picker:focus-within{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}.locale-picker option{color:#f7f6ed;background:#12140f}.account-divider{width:1px;height:17px;background:#b6b6aa99}.account-link{display:flex;align-items:center;justify-content:center;width:24px;min-height:36px}.account-link svg{width:22px;height:22px}.account-link:hover{color:var(--gold)}.menu-toggle svg{width:23px;height:23px;display:block}
@media(min-width:1600px){.header{height:58px}.desktop-nav{font-size:13px;gap:32px}}
@media(max-width:1150px){.header{height:52px;gap:16px;padding-inline:3.5%}.header .brand b{font-size:27px}.header .brand span{font-size:10px;letter-spacing:4px}.header>.brand{gap:11px}.desktop-nav{gap:18px;font-size:11px}.header-actions{gap:13px}}
@media(min-width:801px) and (max-width:1000px){.header{grid-template-columns:auto 1fr auto;padding-inline:20px;gap:10px}.header .brand b{font-size:24px}.header .brand span{font-size:9px;letter-spacing:3px}.header>.brand{gap:8px}.desktop-nav{gap:12px;font-size:10px}.header-actions{gap:9px}.locale-picker{font-size:10px;gap:4px}.locale-picker .globe-icon{width:16px}.account-link svg{width:19px}}
@media(max-width:800px){.header{height:59px;padding:0 22px;display:flex;justify-content:space-between;gap:15px}.header>.brand{gap:12px}.header .brand b{font-size:27px;line-height:1.17}.header .brand span{font-size:10px;letter-spacing:4px}.desktop-nav{display:none}.header-actions{gap:15px}.header-actions .account-divider,.header-actions .account-link{display:none}.header-actions>.locale-picker{display:flex}.locale-picker{font-size:11px;gap:5px}.locale-picker .globe-icon{width:18px;height:18px}.menu-toggle{display:flex;padding:4px}.locale-picker select{width:100%;font-size:16px}}
@media(max-width:380px){.header{height:54px;padding-inline:14px;gap:9px}.header .brand b{font-size:24px}.header .brand span{font-size:9px;letter-spacing:3px}.header>.brand{gap:10px}.header-actions{gap:10px}.locale-picker{font-size:10px;gap:3px}.locale-picker .globe-icon{width:16px}.menu-toggle svg{width:20px;height:20px}}
/* Original approved main composition, measured against the owner's reference. */
body{background:#e9e9e6}.site-shell{position:relative;container-type:inline-size;width:calc(100% - 120px);margin:40px auto;box-shadow:0 16px 60px #0005;border:0;border-radius:0;overflow:clip}
.header{position:absolute;inset:0 0 auto;width:100%;height:3.9cqw;min-height:44px;max-height:56px;background:linear-gradient(90deg,#030504f5 0%,#030504ee 60%,#03050483 78%,#03050442 100%);border-bottom:1px solid #b89a4655}.header .brand b{font-size:clamp(24px,2.65cqw,34px)}.header .brand span{font-size:clamp(10px,1.05cqw,14px)}.desktop-nav{transform:translateX(-1.8cqw)}
.hero{min-height:0;aspect-ratio:1086/485;display:block;overflow:hidden}.hero-art{background-image:url('assets/hero-approved.png');background-size:100% 100%;background-position:center}.hero:after{background:linear-gradient(0deg,#08070325,transparent 35%)}.hero-word{display:none}.hero-copy{position:absolute;top:43.5%;left:4.3%;padding:0;max-width:43%;width:43%}.hero-copy .eyebrow{font-size:clamp(9px,.85cqw,12px);letter-spacing:2px;margin-bottom:9px}.hero h1{font-size:clamp(38px,5.1cqw,74px);line-height:1.1;letter-spacing:-.19cqw}.hero .intro{font-size:clamp(11px,1.17cqw,17px);line-height:1.5;max-width:100%;margin:11px 0 16px}.hero .buttons{gap:13px;flex-wrap:nowrap}.hero .gold{min-width:16.5cqw;min-height:3.5cqw;padding:9px 18px;font-size:clamp(11px,1.05cqw,15px);gap:18px}.hero .video-link{font-size:clamp(11px,1.05cqw,15px);white-space:nowrap}.hero .play-icon{width:3.4cqw;height:3.4cqw;min-width:34px;min-height:34px;font-size:13px}.slide-note{left:4.3%;bottom:2.5%;font-size:clamp(10px,1cqw,13px);gap:7px}.slide-controls{display:flex;gap:5px;margin-left:10px}.slide-controls button{width:3.1cqw;min-width:23px;height:20px;position:relative;padding:0}.slide-controls button:after{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:#c4c2b077}.slide-controls button[aria-pressed=true]:after{background:#ead38a}.hero[data-slide=zombie] .hero-art,.hero[data-slide=ashen] .hero-art{background-image:url('assets/games.png');background-size:300% auto}.hero[data-slide=zombie] .hero-art{background-position:50% 35%}.hero[data-slide=ashen] .hero-art{background-position:100% 35%}.hero[data-slide=zombie]:after,.hero[data-slide=ashen]:after{background:linear-gradient(90deg,#030503d9,transparent 80%)}.hero[data-slide=zombie] h1 span:last-child,.hero[data-slide=ashen] h1 span:last-child{display:block;font-size:.48em;line-height:1.45;letter-spacing:-.05em;margin-top:12px}
@media(min-width:1800px){.site-shell{margin:40px auto}}
@media(max-width:1150px){.site-shell{width:calc(100% - 72px);margin:28px auto}.header{padding-inline:4.3%}.desktop-nav{transform:none}.hero-copy{padding:0}}
@media(min-width:801px) and (max-width:1000px){.header{padding-inline:20px;min-height:43px}.hero h1{font-size:5.1cqw}.hero .intro{margin:8px 0 12px}.hero .gold{padding:7px 12px}.hero-copy .eyebrow{margin-bottom:6px}}
@media(max-width:800px){body{background:#080a07}.site-shell{width:100%;margin:0;box-shadow:none;overflow:clip}.header{height:59px;min-height:59px;max-height:none;background:linear-gradient(90deg,#050705f5,#050705c9);padding:0 22px}.header .brand b{font-size:27px}.header .brand span{font-size:10px}.hero{aspect-ratio:auto;min-height:620px;display:flex;align-items:flex-end}.hero-art{background-size:auto 100%;background-position:64% center}.hero:after{background:linear-gradient(0deg,#030503f5,#03050370 45%,transparent 78%)}.hero-copy{position:relative;top:auto;left:auto;padding:260px 24px 74px;max-width:100%;width:100%}.hero-copy .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:12px}.hero h1{font-size:47px;letter-spacing:-2px;line-height:1.14}.hero .intro{font-size:14px;max-width:320px;margin:16px 0 22px}.hero .buttons{gap:12px;flex-wrap:wrap}.hero .gold{min-width:155px;min-height:44px;padding:11px 18px;font-size:12px}.hero .video-link{font-size:12px}.hero .play-icon{width:40px;height:40px}.slide-note{left:24px;bottom:20px;font-size:11px}.slide-controls button{width:30px}.hero[data-slide=zombie] .hero-art,.hero[data-slide=ashen] .hero-art{background-size:300% auto;background-position-y:center}#mobile-nav{position:absolute;top:59px;left:0;right:0;z-index:15;background:#0b100af5}.hero[data-slide=zombie]:after,.hero[data-slide=ashen]:after{background:linear-gradient(0deg,#030503f5,#03050355 70%,transparent)}}
@media(max-width:380px){.header{height:54px;min-height:54px;padding-inline:14px}.header .brand b{font-size:24px}.header .brand span{font-size:9px}.hero h1{font-size:39px}.hero-copy{padding-inline:20px}.hero .intro{font-size:12px}.hero .gold{min-width:145px}.hero .video-link{font-size:11px;gap:7px}#mobile-nav{top:54px}}

/* In the approved composition, navigation starts at 30% of the canvas. */
@media(min-width:801px){.header>.brand{grid-column:1}.header-actions{grid-column:3}.desktop-nav{position:absolute;left:30%;top:50%;transform:translateY(-50%);gap:3cqw;font-size:clamp(11px,1.2cqw,16px)}}
@media(min-width:801px) and (max-width:1000px){.desktop-nav{left:31%;font-size:10px;gap:12px}}
.site-shell{background:#080b07}.hero-art{background-color:#080b07}footer{background:#080b07}
/* Translate text without mirroring any part of the studio layout. */
html,body,.site-shell,.header,.desktop-nav,.header-actions,.coin,.game-grid,.guide-grid,.news-grid,.buttons,.slide-note,.brand{direction:ltr}
html:lang(ar) [data-t],html:lang(ar) #detail-body [dir=rtl]{direction:rtl;unicode-bidi:isolate;text-align:left}
html:lang(ar) .hero-art{transform:none}
/* Approved header: the fortress remains visible in the window above the main art. */
.header{background:linear-gradient(90deg,#020402 0%,#020402 54%,#020402df 58%,#02040210 65%,#02040205 81%,#020402cc 87%,#020402 91%,#020402 100%)}
@media(max-width:800px){.header{background:linear-gradient(90deg,#050705f5,#050705c9)}}

/* Approved coin strip: one continuous scene, compact title and matched actions. */
.coin{position:relative;isolation:isolate;display:grid;grid-template-columns:62% 38%;min-height:27cqw;background:#080906;border-block:1px solid #ac873f;overflow:hidden}
.coin-art{position:absolute;inset:0;min-height:0;background-image:url('assets/coin-approved.png');background-position:left center;background-size:83% 100%;background-repeat:no-repeat;z-index:-1}
.coin-art:after{background:none}
.coin-copy{grid-column:2;min-width:0;padding:2.1cqw 3.8cqw 2.1cqw 2cqw;align-items:stretch;text-align:left;justify-content:center}
.coin-copy .eyebrow{font-size:clamp(9px,.82cqw,12px);letter-spacing:2.5px;margin:0 0 .9cqw}
.coin-slogan{font-size:clamp(16px,2.58cqw,37px);font-weight:900;line-height:1.24;letter-spacing:-.075cqw}
.coin h2{font-size:clamp(28px,4.45cqw,64px);font-weight:900;line-height:1.14;letter-spacing:-.19cqw;color:#f0d77c;margin:0 0 1.15cqw;padding:0 0 1.05cqw;border-bottom:1px solid #dfd4acbd;text-shadow:0 2px 12px #0008}
.coin .buttons{display:grid;grid-template-columns:1.12fr 1fr;gap:.85cqw;width:100%;align-items:stretch}
.coin .btn{min-width:0;min-height:3.6cqw;padding:.65cqw .7cqw;gap:.7cqw;font-size:clamp(10px,1.26cqw,18px);line-height:1.35;border-radius:4px;white-space:normal}
.coin .btn.gold{background:linear-gradient(115deg,#fff0a6,#d4ae51)}
@media(max-width:800px){
.coin{display:block;min-height:0;background:#080906}
.coin-art{height:61cqw;bottom:auto;background-size:auto 100%;background-position:left center}
.coin-art:after{background:linear-gradient(0deg,#080906,transparent 32%)}
.coin-copy{position:relative;padding:59cqw 24px 28px;align-items:stretch;text-align:left}
.coin-copy .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:10px}
.coin-slogan{font-size:clamp(17px,4.8cqw,29px);line-height:1.35;letter-spacing:-.4px}
.coin h2{font-size:clamp(33px,9.6cqw,59px);line-height:1.15;letter-spacing:-1.3px;margin:3px 0 16px;padding-bottom:15px}
.coin .buttons{gap:10px;grid-template-columns:1fr 1fr}
.coin .btn{min-height:46px;padding:12px 10px;font-size:12px;gap:8px}
}

/* Game catalogue follows the approved equal-cover and compact development panels. */
.worlds{padding:1.25cqw 2cqw .8cqw;background:radial-gradient(ellipse at 15% 35%,#6d47101f,transparent 65%),#090b09}
.worlds .section-heading{display:grid;grid-template-columns:minmax(0,1fr) 34%;gap:1.5cqw;align-items:end;margin-bottom:1cqw}
.worlds .section-heading .eyebrow{font-size:clamp(9px,.85cqw,12px);letter-spacing:2.4px;margin-bottom:.35cqw}
.worlds .section-heading h2{font-size:clamp(22px,2.95cqw,42px);font-weight:900;line-height:1.16;letter-spacing:-.11cqw}
.catalogue-heading-end{display:flex;align-items:center;gap:1cqw;min-width:0;padding-bottom:.2cqw}
.catalogue-heading-end>p{font-size:clamp(9px,.83cqw,12px);color:#d1d0c7;line-height:1.55;flex:1;min-width:0}
.catalogue-controls{display:flex;gap:.6cqw;flex:none}
.catalogue-controls button{border:1px solid #a78b47;border-radius:50%;width:2.7cqw;height:2.7cqw;min-width:26px;min-height:26px;display:grid;place-items:center;padding:0;font:300 clamp(22px,2.6cqw,36px)/1 Arial;color:#e6d595;background:#080b08}
.catalogue-controls button:disabled{cursor:default;opacity:.52}
.catalogue-controls button:not(:disabled):hover{background:#d1ae3926;border-color:#f4da79}
.worlds .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:calc((100% - 2.4cqw)/3);gap:1.2cqw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 2px}
.worlds .game-grid::-webkit-scrollbar{display:none}
.worlds .game-card{min-width:0;border:1px solid #b49336;border-radius:4px;background:linear-gradient(120deg,#12150f,#070a07);scroll-snap-align:start}
.worlds .game-card:hover{transform:none;border-color:#ffe08a}
.worlds .game-picture{aspect-ratio:1.49;background-image:url('assets/games-approved.png');background-size:300% auto;background-position-y:center}
.worlds .game-picture:after{background:linear-gradient(0deg,#020403f5 0%,#050704aa 23%,transparent 62%)}
.worlds .game-overlay{inset:auto 1.2cqw .85cqw}
.worlds .game-overlay h3{font-size:clamp(24px,4cqw,57px);font-weight:900;line-height:1.12;letter-spacing:-.19cqw;white-space:normal}
.worlds .game-overlay p{font-size:clamp(10px,1.15cqw,16px);font-weight:600;line-height:1.4;margin:.35cqw 0 .35cqw;min-height:0;color:#f0eee4}
.worlds .game-overlay>span{font-size:clamp(10px,1.15cqw,16px);font-weight:800}
.worlds .peperta-title{color:#f4d878;text-shadow:0 2px 2px #151005,0 4px 12px #000}
.worlds .ashen-title{font-weight:700}
.worlds .status{padding:.7cqw 1.2cqw .8cqw;min-height:10.7cqw;border-top:1px solid #af8d32}
.worlds .status>small{font-size:clamp(9px,.91cqw,13px);line-height:1.3;color:#e9cc58;font-weight:800;display:block}
.worlds .status h4{font-size:clamp(15px,1.9cqw,27px);font-weight:900;line-height:1.35;margin:.25cqw 0 .45cqw;letter-spacing:-.065cqw}
.worlds .status>p{font-size:clamp(10px,1.06cqw,15px);color:#c6c7bd;line-height:1.5}
.worlds .badges{gap:.5cqw}
.worlds .badge{display:inline-flex;align-items:center;gap:.4cqw;font-size:clamp(9px,.94cqw,13px);font-weight:700;line-height:1.4;padding:.1cqw .5cqw;border-radius:3px}
.worlds .done:before{content:'✓';border-radius:50%;background:#a9de79;color:#294a22;font:bold .8em/1 Arial;padding:2px}
.worlds .making:before{content:'⚙';color:#efcc5a}
.worlds .chapter-track{gap:.25cqw;margin-top:.65cqw}
.worlds .chapter-track i{height:1.25cqw;min-height:9px;max-height:18px}
@media(max-width:800px){
.worlds{padding:24px 18px 22px}
.worlds .section-heading{display:block;margin-bottom:18px}
.worlds .section-heading .eyebrow{font-size:10px;margin-bottom:7px}
.worlds .section-heading h2{font-size:clamp(25px,6.8cqw,39px);line-height:1.25;letter-spacing:-1px}
.catalogue-heading-end{margin-top:12px;padding:0}
.catalogue-heading-end>p{font-size:12px;line-height:1.6}
.catalogue-controls{display:none}
.worlds .game-grid{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-columns:auto;gap:18px;overflow:visible;padding:0;scroll-snap-type:none}
.worlds .game-picture{aspect-ratio:1.49}
.worlds .game-overlay{inset:auto 18px 14px}
.worlds .game-overlay h3{font-size:clamp(32px,10cqw,54px);letter-spacing:-1.6px}
.worlds .game-overlay p{font-size:12px;margin:6px 0;line-height:1.45}
.worlds .game-overlay>span{font-size:12px}
.worlds .status{min-height:112px;padding:12px 17px 15px}
.worlds .status>small{font-size:10px}
.worlds .status h4{font-size:19px;line-height:1.4;letter-spacing:-.4px;margin:4px 0 7px}
.worlds .status>p{font-size:12px}
.worlds .badges{gap:7px}
.worlds .badge{font-size:11px;padding:2px 7px;gap:5px}
.worlds .chapter-track{gap:3px;margin-top:10px;max-width:none}
.worlds .chapter-track i{height:11px}
}

/* Distinct established heroes share the PEPERTA cover instead of repeated soldiers. */
.worlds .game-peperta{background-image:url('assets/peperta-ensemble.png');background-size:cover;background-position:center 38%}
#detail-body .modal-art.peperta-detail{background-image:url('assets/peperta-ensemble.png');background-size:cover;background-position:center 35%!important}

/* Approved ivory hero-and-guide strip, with a full bow pose and five portraits. */
.guides{min-height:0;display:flex;justify-content:flex-end;padding:1.9cqw 2cqw 2cqw;background:#f8f1e1;color:#171813;isolation:isolate}
.guides:before{content:'';position:absolute;inset:0 0 0 62%;background:url('assets/hero-approved.png') right top/auto 150% no-repeat;opacity:.12;z-index:-2;mask-image:linear-gradient(90deg,transparent,black)}
.guide-art{inset:0 auto 0 0;width:31%;background-image:url('assets/hongryeon-guide.png');background-size:contain;background-repeat:no-repeat;background-position:left bottom;opacity:1;filter:none;mask-image:linear-gradient(90deg,black 86%,transparent)}
.guide-content{width:70%;min-width:0}
.guides .eyebrow{font-size:clamp(8px,.82cqw,12px);letter-spacing:2.5px;color:#99702f;margin-bottom:.55cqw}
.guides h2{font-size:clamp(22px,2.9cqw,42px);font-weight:900;line-height:1.24;letter-spacing:-.1cqw}
.guide-intro{font-size:clamp(9px,.94cqw,14px);line-height:1.6;margin:.6cqw 0 1.15cqw;color:#505247}
.guide-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:1.15cqw;align-items:stretch}
.guide-card{min-width:0;border:1px solid #c7aa6e;border-radius:4px;background:#fffdf3cf;padding:.75cqw .7cqw .8cqw;color:#191b15;display:flex;flex-direction:column}
.guide-label{display:flex;align-items:center;gap:.6cqw;margin-bottom:.7cqw;min-width:0;min-height:2.05cqw}
.guide-label h3{font-size:clamp(12px,1.62cqw,23px);font-weight:900;line-height:1.2;display:flex;align-items:center;gap:.4cqw;min-width:0;letter-spacing:-.04cqw}
.guide-label h3 svg{width:1.65cqw;height:1.65cqw;min-width:16px;min-height:16px;flex:none;color:#9c7328}
.guide-label small{flex:1;text-align:right;font-size:clamp(8px,.62cqw,9px);line-height:1.35;color:#666453;min-width:0}
.guide-label .guide-chevron{font:400 clamp(17px,1.8cqw,26px)/1 Arial;color:#947030;flex:none}
.portrait-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35cqw;margin-top:auto}
.portrait-row i{height:7.4cqw;min-height:54px;border:1px solid #d2bb8e;border-radius:3px;background-size:400% auto;background-position-y:center}
.portrait-row i:nth-child(1){background-position-x:0%}
.portrait-row i:nth-child(2){background-position-x:33.333%}
.portrait-row i:nth-child(3){background-image:url('assets/peperta-ensemble.png');background-size:650% auto;background-position:79% 19%}
.portrait-row i:nth-child(4){background-position-x:66.666%}
.portrait-row i:nth-child(5){background-position-x:100%}
.battle-preview{height:7.4cqw;min-height:54px;background-position:center 53%;border:1px solid #d2bb8e;border-radius:3px;margin-top:auto}
.battle-preview .play-icon{width:3.4cqw;height:3.4cqw;min-width:32px;min-height:32px;background:#060905c9;border:1px solid #f2d585;font-size:clamp(12px,1.3cqw,18px)}
@media(min-width:801px) and (max-width:1050px){.guide-label small{display:none}.guide-label .guide-chevron{margin-left:auto}}
@media(max-width:800px){
.guides{padding:61cqw 18px 32px;display:block}
.guides:before{inset:0;opacity:.07}
.guide-art{inset:0 0 auto;width:100%;height:59cqw;background-size:cover;background-position:center 38%;mask-image:linear-gradient(0deg,transparent,black 20%)}
.guide-content{width:100%}
.guides .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:8px}
.guides h2{font-size:clamp(26px,7cqw,39px);letter-spacing:-1px;line-height:1.25}
.guide-intro{font-size:12px;line-height:1.7;margin:11px 0 22px}
.guide-grid{grid-template-columns:1fr;gap:18px}
.guide-card{padding:14px}
.guide-label{gap:8px;margin-bottom:12px;min-height:28px}
.guide-label h3{font-size:17px;gap:6px;letter-spacing:-.3px}
.guide-label h3 svg{width:20px;height:20px}
.guide-label small{font-size:9px;line-height:1.4}
.guide-label .guide-chevron{font-size:24px}
.portrait-row{gap:5px}
.portrait-row i{height:18cqw;min-height:55px}
.battle-preview{height:38cqw;min-height:130px}
.battle-preview .play-icon{width:44px;height:44px;font-size:17px}
}

/* Studio news: readable cards with natural landscape thumbnails. */
@media(min-width:801px){
.guide-art{background-size:cover;background-position:left center}
.news{padding:2.3cqw 2.4cqw;grid-template-columns:32% minmax(0,1fr);gap:3cqw;align-items:center}
.news .eyebrow{font-size:clamp(10px,.85cqw,12px);letter-spacing:2px;margin-bottom:.8cqw}
.news h2{font-size:clamp(22px,2.35cqw,34px);font-weight:900;line-height:1.5;letter-spacing:-.05cqw}
.news-grid{gap:1.2cqw}
.news-image{height:auto;aspect-ratio:16/9;margin-bottom:.65cqw;border:1px solid #74603888;border-radius:4px}
.news-grid strong{display:block;font-size:clamp(13px,1.2cqw,17px);line-height:1.5;margin-bottom:.35cqw}
.news-grid :is(button,a)>span{display:block;font-size:clamp(11px,.87cqw,13px);line-height:1.65;white-space:normal;overflow-wrap:anywhere;color:#bfc2b5}
footer{padding:1.1cqw 2.4cqw;gap:2cqw;min-height:0;border-top:1px solid #52482b}
footer .brand{gap:1.2cqw}
footer .brand b{font-size:clamp(16px,1.8cqw,24px);border:0;padding:0;line-height:1.2}
footer .brand span{font-size:clamp(8px,.75cqw,11px);letter-spacing:4px}
footer>p{display:none}
.footer-nav{display:flex;align-items:center;gap:1.7cqw;margin-left:auto;font-size:clamp(8px,.7cqw,10px);line-height:1.3;font-weight:700}
.footer-nav button{padding:0;font:inherit}
footer>.coin-link{font-size:clamp(8px,.7cqw,10px)}
}
@media(max-width:800px){.footer-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11px}.footer-nav button{padding:0;font:inherit}}

.news-image.n2{background-image:url('assets/peperta-ensemble.png');background-size:cover;background-position:center 35%}
@media(max-width:800px){
.news{padding:30px 20px;gap:22px}
.news h2{font-size:26px;line-height:1.5}
.news-grid{grid-template-columns:1fr;gap:20px}
.news-grid :is(button,a){display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:13px;row-gap:5px;text-align:left;align-items:start}
.news-image{grid-column:1;grid-row:1/3;height:auto;aspect-ratio:16/10;width:100%;margin:0}
.news-grid strong{grid-column:2;font-size:16px;line-height:1.4;margin:0}
.news-grid :is(button,a)>span{grid-column:2;display:block;font-size:12px;line-height:1.65;white-space:normal;overflow-wrap:anywhere;color:#bfc2b5}
}

/* Owner: flush top/bottom, white outer canvas, retain desktop side margins. */
html,body{background:#fff;margin:0;padding:0}
.site-shell{margin-block:0;box-shadow:0 0 24px #00000012}