@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Cinzel:wght@500;600;700&display=swap');
:root{color-scheme:dark;--gold:#e6ba6b;--cream:#f7e8c9;--muted:#adaea7;--line:#806332;--bg:#080d0f}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--cream);font-family:'Noto Sans Thai',Tahoma,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}button,a{-webkit-tap-highlight-color:transparent}button:hover,a:hover{color:#ffe4a7}button:focus-visible,a:focus-visible{outline:2px solid #ffe0a0;outline-offset:5px}h1,h2,h3,p{margin:0}button:disabled{cursor:default}img{display:block}button .art img{pointer-events:none}.wrap{max-width:1450px;margin:auto;padding-left:3.5%;padding-right:3.5%}.header{position:relative;z-index:10;min-height:68px;display:flex;align-items:center;gap:28px;padding:8px 2.5%;background:#080c0eed;border-bottom:1px solid #665332}.brand{font-family:Cinzel,Georgia,serif;font-size:23px;color:var(--gold);line-height:.9;text-align:center;flex-shrink:0;text-shadow:0 2px 8px #000}.brand span{display:block;font-size:17px;letter-spacing:1px}.header nav{display:flex;align-items:center;justify-content:center;gap:24px;flex:1}.header nav a,.header nav button{font-size:14px;white-space:nowrap;padding:12px 0}.header nav [aria-current]{color:var(--gold);border-bottom:1px solid var(--gold)}.login{background:linear-gradient(#f3d593,#c3913b);color:#221704;border:1px solid #ffdda0;box-shadow:inset 0 0 0 3px #916021;padding:8px 25px;font-weight:700;clip-path:polygon(6% 0,94% 0,100% 25%,100% 75%,94% 100%,6% 100%,0 75%,0 25%)}.login:hover{color:#100c04;filter:brightness(1.12)}.menu-toggle{display:none}.art{position:relative;overflow:hidden;aspect-ratio:var(--w)/var(--h);width:100%;background:#101616}.art img{position:absolute;max-width:none;width:calc(1240 / var(--w) * 100%);height:auto;left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%)}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#263333,#080d0f 73%);border-bottom:1px solid var(--gold)}.hero-art{max-width:1600px;margin:auto;position:relative}.hero-art:after{content:'';position:absolute;inset:75% 0 0;background:linear-gradient(transparent,#080d0f)}.hero-copy{position:relative;text-align:center;margin-top:-8px;padding:0 20px 30px}.hero h1{font-size:clamp(22px,2.4vw,34px);color:var(--gold);font-weight:600;text-shadow:0 2px 8px #000}.hero-copy>p{margin-top:3px;font-size:17px;color:#eeebe1}.hero-copy>p span{margin:0 12px}.eyebrow{font-size:12px;letter-spacing:2.5px;color:var(--gold)}.hero .mobile-tag{display:none}.hero-actions{display:flex;justify-content:center;gap:20px;margin-top:22px}.cta{display:flex;align-items:center;justify-content:center;gap:14px;min-width:235px;padding:9px 23px;border:1px solid #c59548;outline:1px solid #584328;outline-offset:3px;font-size:23px;font-weight:600;box-shadow:inset 0 0 18px #0009;transition:transform .2s,filter .2s}.cta:hover{transform:translateY(-3px);filter:brightness(1.18)}.cta small{display:block;font-family:Georgia,serif;font-size:10px;letter-spacing:1.8px;font-weight:400;line-height:1.5}.button-icon{font-size:38px;line-height:1}.red{background:linear-gradient(120deg,#750a0a,#350a06)}.blue{background:linear-gradient(120deg,#164465,#061e2e)}.dark{background:linear-gradient(120deg,#282213,#0b0d0d)}.features{display:grid;grid-template-columns:repeat(6,1fr);padding-top:20px;padding-bottom:20px;border-bottom:1px solid #82653b;position:relative}.feature{position:relative;padding:0 10px}.feature+.feature:before{content:'';height:70%;width:1px;position:absolute;top:20%;left:0;background:linear-gradient(transparent,#53452c,transparent)}.feature-icon{width:74px;margin:auto;transition:transform .2s}.feature:hover .feature-icon{transform:translateY(-4px)}.feature h2{font-size:18px;font-weight:500;margin:8px 0 2px}.feature p{font-size:13px;color:#c3c3b9}.updates{display:grid;grid-template-columns:1.9fr 1fr;gap:26px;padding-top:22px;padding-bottom:32px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title h2{font-size:24px;color:var(--gold);font-weight:500}.section-title h2 span{margin-right:8px}.section-title button{font-size:14px;color:var(--gold)}.section-title button span{margin-left:8px}.news-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:15px}.featured{position:relative;min-height:260px;overflow:hidden;border:1px solid #33372e;border-radius:4px;background:#080c0d}.featured>.art{height:175px;aspect-ratio:auto}.featured>.art img{top:calc(720 / 130 * -100%)}.featured-copy{position:relative;margin-top:-15px;padding:0 18px 16px;background:linear-gradient(transparent,#080c0d 24%)}.badge{font-size:11px;background:#bb8b3d;color:#110f0c;padding:2px 8px}.featured h3{font-size:26px;line-height:1.35;color:#f1d193;margin:8px 0}.featured p{font-size:14px}.read{display:block;margin-top:12px;font-size:12px;color:var(--gold)}.news-list{background:#060a0b;border:1px solid #202522;border-radius:4px;padding:8px 12px;display:flex;flex-direction:column;justify-content:space-around}.news-row{display:flex;gap:12px;align-items:center;padding:10px 0}.news-row+.news-row{border-top:1px solid #222720}.news-thumb{width:78px;flex-shrink:0}.news-row h3{font-size:15px;font-weight:500}.news-row small{font-size:12px;color:var(--muted)}.category{font-size:11px;color:var(--gold)}.trailer{padding:0;display:block;position:relative;width:100%;min-height:260px;overflow:hidden;border:1px solid #50412b;border-radius:4px;background:radial-gradient(#40321b,#101414)}.trailer .art{position:absolute;inset:0;height:100%;aspect-ratio:auto}.trailer .art img{top:-541.35%;height:953.38%;object-fit:fill}.trailer:after{content:'';position:absolute;inset:0;background:linear-gradient(#0001,#0002 40%,#050b0e 100%)}.play-circle{position:absolute;z-index:1;left:50%;top:42%;transform:translate(-50%,-50%);display:grid;place-items:center;width:65px;height:65px;border:2px solid #e7c47d;border-radius:50%;background:#080b0ded;color:#f6d994;font-size:28px;padding-left:5px;box-shadow:0 0 24px #e4b76144;transition:scale .2s}.trailer:hover .play-circle{scale:1.07}.trailer-caption{position:absolute;z-index:1;bottom:22px;left:0;right:0;font-family:Georgia,serif;letter-spacing:2px;font-size:23px;color:#f2d794}.trailer-caption small{display:block;font-size:11px;margin-top:6px}.world{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);box-shadow:0 -4px 25px #e0a43b12}.region{position:relative;padding:0;overflow:hidden;min-height:225px;background:#10191b;border-right:1px solid #a48245}.region:last-child{border-right:0}.region .art{position:absolute;inset:0;height:100%;aspect-ratio:auto}.region .art img{top:calc(991 / 120 * -100%);height:calc(1268 / 120 * 100%);object-fit:fill;transition:filter .3s}.region:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#040c10 95%)}.region:hover .art img{filter:brightness(1.25)}.region-title{position:absolute;z-index:1;bottom:23px;left:10px;right:10px;font-size:23px}.region-title small{display:block;font:11px Georgia,serif;color:#e1cca1;letter-spacing:2px;margin-top:4px}.footer{display:flex;gap:32px;align-items:center;justify-content:space-between;min-height:105px;padding-top:22px;padding-bottom:22px}.footer>p{font:10px Georgia,serif;letter-spacing:2px;color:var(--gold)}.footer>p span{margin-left:10px}.footer>div{text-align:right}.footer-links{display:flex;gap:15px;margin-bottom:7px}.footer-links button{padding:0;font-size:12px;color:var(--muted)}.footer small{color:#8a8d88;font-size:11px}.all-news{margin-top:15px;border-top:1px solid var(--line)}.all-news a{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #242820}.all-news span{color:var(--gold);font-size:12px}.article{min-height:65vh;max-width:960px;padding-top:45px;padding-bottom:60px}.article h1{font-size:clamp(28px,4vw,42px);color:var(--gold);margin:12px 0}.back{display:inline-block;margin-bottom:30px;color:var(--gold)}.muted{color:var(--muted)}.article-art{margin:24px 0;max-width:650px}.article>p:last-child{font-size:18px;line-height:2;max-width:760px}dialog{width:min(92%,480px);background:linear-gradient(135deg,#162022,#080c0e);color:var(--cream);border:1px solid var(--gold);padding:36px;border-radius:6px;box-shadow:0 20px 90px #000}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{font-size:25px;margin:10px 0;color:var(--gold)}dialog p{line-height:1.9}.close{position:absolute;right:10px;top:4px;font-size:30px}.dialog-ok{margin-top:24px;border:1px solid var(--line);padding:7px 22px;background:#33291a}.skip{position:fixed;z-index:100;top:-80px;background:#fff;color:#000;padding:10px}.skip:focus{top:0}
@media(min-width:1500px){.hero-copy{padding-bottom:40px}.hero-art{max-height:415px;overflow:hidden}}
@media(max-width:1100px){.header{gap:15px}.header nav{gap:14px}.header nav a,.header nav button{font-size:12px}.login{padding:8px 15px}.features{padding-left:15px;padding-right:15px}.feature h2{font-size:16px}.feature p{font-size:12px}.updates{gap:18px}.news-grid{grid-template-columns:1fr}.news-list{padding:0 10px}.news-row{padding:8px 0}.trailer{min-height:300px}.region{min-height:200px}.footer{gap:16px}.footer>p{max-width:230px;line-height:2}.footer>p span{margin:0}}
@media(max-width:760px){.header{min-height:64px;justify-content:space-between;flex-wrap:wrap}.brand{font-size:21px}.brand span{font-size:15px}.menu-toggle{display:block;margin-left:auto;font-size:14px}.menu-toggle span{margin-left:8px}.header nav{display:none;order:4;width:100%;flex:none;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center;padding:10px 0}.header nav.open{display:grid}.header nav a,.header nav button{font-size:14px}.login{font-size:14px}.hero-art{width:150%;max-width:none;margin-left:-25%}.hero-copy{margin-top:0;padding:10px 18px 28px}.hero h1{font-size:23px;line-height:1.5}.hero-copy>p{font-size:14px;margin-top:8px}.hero-copy>p span{margin:0 5px}.hero-actions{gap:12px;flex-wrap:wrap;margin-top:20px}.cta{font-size:18px;min-width:0;flex:1;padding:9px 10px;gap:8px}.button-icon{font-size:28px}.cta small{font-size:8px;letter-spacing:1px}.cta:last-child{flex-basis:100%;max-width:280px}.features{grid-template-columns:repeat(3,1fr);gap:20px 0;padding-top:20px;padding-bottom:24px}.feature{padding:0 6px}.feature:nth-child(4):before{display:none}.feature-icon{width:62px}.feature h2{font-size:15px}.feature p{font-size:12px;line-height:1.6}.updates{grid-template-columns:1fr;padding-top:20px;padding-bottom:26px;gap:24px}.news-grid{grid-template-columns:1fr 1fr;gap:10px}.featured{min-height:290px}.featured>.art{height:auto;aspect-ratio:380/130}.featured-copy{padding:10px 12px;margin-top:0}.featured h3{font-size:22px}.news-row{align-items:flex-start;gap:8px}.news-thumb{width:52px;margin-top:7px}.news-row h3{font-size:13px}.news-row small{font-size:11px}.category{font-size:10px}.trailer{min-height:250px}.section-title h2{font-size:22px}.world{grid-template-columns:repeat(2,1fr)}.region{min-height:190px;border-bottom:1px solid #65502f}.region:last-child{grid-column:1/-1;min-height:210px}.region-title{font-size:21px}.footer{flex-wrap:wrap;justify-content:center;padding-top:28px;padding-bottom:28px}.footer>p{max-width:none;font-size:9px}.footer>div{text-align:center;width:100%}.footer-links{justify-content:center}.article{padding-top:28px}.article>p:last-child{font-size:16px}}
@media(max-width:400px){.news-grid{grid-template-columns:1fr}.featured{min-height:0}.news-row h3{font-size:15px}.news-thumb{width:75px}.hero h1{font-size:21px}.feature h2{font-size:14px}.feature p{font-size:11px}.footer>p{font-size:8px}.cta{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.featured>.art{height:auto;aspect-ratio:380/130}.hero h1{text-wrap:balance}@media(max-width:760px){.hero-actions .cta{flex:1 0 calc(50% - 6px)}.hero-actions .cta:last-child{flex:0 0 100%;max-width:280px}}
/* ภาพจริงจากเกม (art('img/...')) — ไม่ครอบจากภาพต้นแบบ */
.art.photo img{position:static!important;width:100%!important;height:100%!important;max-width:100%;top:auto!important;left:auto!important;object-fit:cover!important}
.art.photo{aspect-ratio:16/9}
/* นาฬิกาเวลาไทยในเกม */
.thai-clock{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:28px;padding:18px 22px;border:1px solid var(--line);border-radius:5px;background:linear-gradient(130deg,#121a1c,#0b1012)}
.thai-clock time{font-size:clamp(30px,4vw,42px);font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
.thai-clock strong{color:var(--cream);font-weight:500;font-size:18px}
.thai-clock strong b{color:var(--gold)}
.thai-clock p{margin:4px 0 0;color:var(--muted);font-size:14px}
.thai-clock>div{min-width:0;flex:1}
/* โลโก้ของเจ้าของแทนชื่อตัวอักษร */
.brand.has-logo{line-height:0;text-shadow:none}
.brand.has-logo img{height:52px;width:auto;filter:drop-shadow(0 2px 6px #000)}
@media(max-width:600px){.brand.has-logo img{height:40px}}
/* หน้าอาชีพ: รูปหน้าตัวละครจริงแทนไอคอน */
.role-icon .art.photo,.role-emblem .art.photo{aspect-ratio:1/1;border-radius:50%;border:1px solid var(--line)}