:root{color-scheme:dark;--bg:#111512;--panel:#1a201b;--gold:#efd18b;--muted:#afb4a9;--line:#ffffff1b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:#f7f4e9;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}.wrap{width:min(1240px,88%);margin-inline:auto}.header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid var(--line);background:#101512;position:relative;z-index:2}.brand{font-weight:900;font-size:23px;letter-spacing:-1px;white-space:nowrap}.brand-dot{color:var(--gold)}.brand-icon{color:var(--gold);margin-right:10px;font-size:33px;vertical-align:middle}.header nav{display:flex;gap:34px;font-size:13px;color:#d5d7cf}.header nav a:hover,.footer>a:hover{color:var(--gold)}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;background:var(--gold);color:#202519;padding:19px 25px;border:1px solid var(--gold);border-radius:4px;font-size:14px;font-weight:700;transition:background .2s,transform .2s}.button:hover{background:#ffe5ac;transform:translateY(-2px)}.button.small{padding:12px 20px;font-size:12px}.hero{position:relative;min-height:660px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.hero-art{position:absolute;inset:0;background-image:linear-gradient(90deg,#101512 1%,#101512f2 21%,#101512a8 43%,#10151208 80%),linear-gradient(0deg,#111512 0%,transparent 40%),url('media/key-art-hd.jpg');background-size:cover;background-position:center,right center,right center}.hero-content{position:relative;z-index:1;padding:80px 0 115px}.eyebrow{color:var(--gold);font-size:10px;font-weight:700;letter-spacing:2.8px;margin:0 0 26px}.eyebrow>span{display:inline-block;background:var(--gold);width:6px;height:6px;border-radius:50%;margin-right:9px;vertical-align:middle}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(46px,5.4vw,78px);line-height:1.05;letter-spacing:-3.4px;margin-bottom:25px;max-width:750px}em{font-style:normal;color:var(--gold)}.hero-description{color:#d0d4c8;font-size:16px;line-height:1.8;margin-bottom:32px}.actions{display:flex;align-items:center;gap:26px}.text-link{font-size:13px}.play-icon{margin-right:7px;color:var(--gold)}.hero-meta{font-size:9px;letter-spacing:1.8px;color:#a7af9f;margin-top:37px;margin-bottom:0}.hero-meta b{color:var(--gold);padding:0 13px}.scroll-hint{position:absolute;bottom:25px;right:6%;font-size:9px;letter-spacing:2px;color:#d1d4c7}.scroll-hint span{margin-left:20px;font-size:20px}.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;padding-top:95px;padding-bottom:45px;align-items:center}h2{font-size:clamp(30px,3.2vw,45px);line-height:1.13;letter-spacing:-1.5px;margin-bottom:18px}.intro>p{color:var(--muted);line-height:1.9;font-size:14px;max-width:450px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.features article{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:28px 26px 0}.feature-number{color:var(--gold);font-size:9px;letter-spacing:2px}h3{font-size:23px;letter-spacing:-.6px;margin-top:20px;margin-bottom:12px}.features p{font-size:13px;color:var(--muted);line-height:1.75;min-height:69px}.feature-image{height:260px;overflow:hidden;margin:25px -26px 0;position:relative}.feature-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,transparent 80%,#1a201b)}.feature-image img{width:100%;height:auto;display:block;position:relative;top:-100px}.formation img{top:-130px}.battle img{top:-230px}.screenshots{padding-top:100px;padding-bottom:90px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.section-heading>p{font-size:13px;line-height:1.8;color:#d8dace}.section-heading>p span{font-size:11px;color:var(--muted)}.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.gallery a{min-width:0;transition:transform .25s}.gallery a:hover{transform:translateY(-7px)}.gallery img{display:block;width:100%;height:auto;border-radius:7px;border:1px solid #e9d39750;background:var(--panel)}.gallery a>span{display:flex;gap:8px;justify-content:space-between;font-size:10px;color:var(--gold);padding-top:16px}.gallery b{font-weight:400;color:#d9dccf;flex:1}.community{display:flex;gap:35px;align-items:center;border-block:1px solid var(--line);padding-top:45px;padding-bottom:45px}.community-symbol{font-size:68px;color:var(--gold);width:100px;text-align:center}.community .eyebrow{margin-bottom:15px}.community h2{font-size:32px;margin-bottom:12px}.community p:last-child{font-size:13px;color:var(--muted);line-height:1.7;max-width:530px;margin-bottom:0}.community .button{margin-left:auto;white-space:nowrap}.button.outline{background:transparent;color:var(--gold);border-color:#efd18b55}.button.outline:hover{background:#efd18b15}.download{text-align:center;padding:105px 0 95px;background:radial-gradient(ellipse at 50% 100%,#6d60302b,transparent 65%)}.download h2{font-size:clamp(50px,6vw,78px);letter-spacing:-3px}.download p:not(.eyebrow){font-size:14px;color:var(--muted);margin:25px 0 30px}.footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding-block:30px;gap:20px}.footer .brand{font-size:18px}.footer p,.footer>a:last-child{font-size:10px;color:var(--muted);margin:0}.skip{position:fixed;top:-80px;left:15px;padding:12px;background:var(--gold);color:#111;z-index:20}.skip:focus{top:10px}dialog{background:#111512;border:1px solid #efd18b70;border-radius:10px;color:#f7f4e9;padding:16px;max-width:94vw;max-height:95dvh}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}#viewer-image{display:block;height:calc(90dvh - 110px);max-width:82vw;object-fit:contain;margin:auto}.viewer-toolbar,.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:20px}.viewer-toolbar p{margin:0;font-size:12px}.viewer-toolbar{padding-bottom:12px}.viewer-controls{padding-top:12px;font-size:12px}.viewer-controls button,#close-viewer{background:#252b22;border:1px solid var(--line);color:#f7f4e9;border-radius:4px;cursor:pointer;padding:10px}.viewer-controls button:hover,#close-viewer:hover{color:var(--gold)}body:has(dialog[open]){overflow:hidden}@media(min-width:1500px){.hero-art{background-size:cover,cover,auto 100%;background-repeat:no-repeat}.hero{min-height:740px}}@media(max-width:1000px){.header nav{gap:20px}.hero-art{background-position:center,center,65% center}.intro{gap:35px}.features{gap:15px}.features article{padding:23px 20px 0}.features h3{font-size:20px}.feature-image{margin-inline:-20px;height:230px}.feature-image img{top:-60px}.formation img{top:-80px}.battle img{top:-160px}.gallery{gap:12px}.gallery a>span{font-size:9px;gap:4px}.community-symbol{display:none}.community{gap:25px}}@media(max-width:650px){.header{height:74px;padding-inline:6%}.brand{font-size:18px}.brand-icon{font-size:27px;margin-right:4px}.header nav{display:none}.button.small{padding:10px 13px}.hero{min-height:710px;align-items:end}.hero-art{background-size:cover,cover,auto 390px;background-repeat:no-repeat;background-position:center,center,62% top;background-image:linear-gradient(0deg,#111512 20%,#111512ee 43%,#11151200 76%),linear-gradient(0deg,transparent,transparent),url('media/key-art-hd.jpg')}.hero-content{padding-top:280px;padding-bottom:65px}.eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:20px}h1{font-size:45px;letter-spacing:-2px;line-height:1.08}.hero-description{font-size:14px}.actions{gap:18px;flex-wrap:wrap}.button{padding:16px 19px;font-size:12px;gap:18px}.text-link{font-size:12px}.hero-meta{font-size:8px;letter-spacing:1px;margin-top:25px}.hero-meta b{padding:0 8px}.scroll-hint{font-size:8px;bottom:17px}.intro{grid-template-columns:1fr;gap:9px;padding-top:60px;padding-bottom:25px}h2{font-size:32px}.intro>p{font-size:13px}.features{grid-template-columns:1fr;gap:20px}.features article{padding:25px 25px 0}.features h3{font-size:25px}.features p{min-height:0}.feature-image{height:270px;margin-inline:-25px}.feature-image img{top:-140px}.formation img{top:-175px}.battle img{top:-290px}.screenshots{padding-top:60px;padding-bottom:55px}.section-heading{display:block;margin-bottom:25px}.section-heading>p{margin-top:20px}.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;gap:16px}.gallery a{flex:0 0 65%;scroll-snap-align:start}.gallery a>span{font-size:11px}.community{flex-direction:column;align-items:start;padding-block:35px}.community .button{margin:0}.download{padding-block:70px}.download h2{font-size:58px}.footer{flex-wrap:wrap;padding-block:25px}.footer p{order:3;flex-basis:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.download .button{margin:5px}

/* Language controls and layouts for longer translations. */
[hidden] { display: none !important; }
html:lang(ko) #community,
html:lang(ja) #community,
html:lang(ko) nav a[href="#community"],
html:lang(ja) nav a[href="#community"] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.header-actions { display: flex; align-items: center; gap: 16px; }
.language-control { display: inline-flex; }
#language-select {
  font: inherit;
  font-size: 12px;
  color: #f7f4e9;
  background: #1a201b;
  border: 1px solid #efd18b55;
  border-radius: 4px;
  padding: 11px 8px;
  max-width: 145px;
  cursor: pointer;
}
#language-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
html:lang(ko) body { font-family: Arial, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ja) body { font-family: Arial, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }
html:lang(ko) h1, html:lang(ja) h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.2; letter-spacing: -2px; }
html:lang(ko) h2, html:lang(ja) h2 { line-height: 1.35; letter-spacing: -1px; }
html:lang(ko) .eyebrow, html:lang(ja) .eyebrow { letter-spacing: 1.5px; }
.features article { display: flex; flex-direction: column; }
.feature-image { flex-shrink: 0; }
.features article > p { flex: 1; }
.gallery a > span { align-items: baseline; }
.gallery b { line-height: 1.5; }
html:lang(de) .hero h1 { font-size: clamp(44px, 5vw, 72px); }
@media (min-width: 651px) and (max-width: 1100px) {
  .header { gap: 16px; padding-inline: 4%; }
  .header nav { gap: 15px; font-size: 12px; }
  .header-actions { gap: 10px; }
  .header .brand { font-size: 19px; }
  .header .small { padding-inline: 12px; }
  html:lang(de) .header nav { gap: 10px; }
}
@media (max-width: 850px) { .header nav { display: none; } }
@media (max-width: 650px) {
  .header { padding-inline: 5%; gap: 8px; }
  .header-actions { gap: 8px; }
  .header .small { font-size: 11px; padding: 10px; }
  #language-select { max-width: 112px; padding: 10px 4px; font-size: 11px; }
  .header .brand { font-size: 17px; }
  .brand-icon { display: none; }
  html:lang(ko) h1, html:lang(ja) h1 { font-size: clamp(34px, 8.3vw, 44px); letter-spacing: -1.5px; }
  html:lang(ko) .download h2, html:lang(ja) .download h2 { font-size: clamp(34px, 9vw, 48px); }
  html:lang(de) .hero h1 { font-size: clamp(38px, 9vw, 48px); letter-spacing: -2px; }
  html:lang(ja) .hero-meta { letter-spacing: 0; }
  html:lang(ja) .hero-meta b { padding-inline: 4px; }
}
@media (max-width: 380px) {
  .header .brand { font-size: 14px; }
  .header-actions { gap: 5px; }
  .header .small { padding-inline: 7px; font-size: 10px; }
  #language-select { max-width: 95px; }
}

html:lang(zh) body { font-family: Arial, 'Microsoft YaHei', 'PingFang SC', 'Microsoft JhengHei', sans-serif; }
html:lang(zh) h1, html:lang(zh) h2 { letter-spacing: 0; line-height: 1.3; }
html:lang(th) body { font-family: Tahoma, 'Leelawadee UI', Arial, sans-serif; }
html:lang(th) h1, html:lang(th) h2, html:lang(th) h3 { letter-spacing: 0; line-height: 1.35; }
html:lang(th) .eyebrow, html:lang(th) .hero-meta { letter-spacing: 0; }
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 650px) {
  html:lang(ru) .hero h1 { font-size: clamp(34px, 8vw, 45px); letter-spacing: -1.5px; }
  html:lang(th) .hero h1 { font-size: clamp(32px, 8vw, 44px); }
}
/* Opening countdown: four stable columns in every locale. */
.launch {
  max-width: 570px;
  margin: 0 0 28px;
  padding: 20px 22px;
  border: 1px solid #efd18b55;
  border-radius: 8px;
  background: #101512d9;
}
.launch h2, html:lang(ko) .launch h2, html:lang(ja) .launch h2 {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .3px;
  color: var(--gold);
}
.launch-digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.launch-digits > div { text-align: center; border-right: 1px solid var(--line); }
.launch-digits > div:last-child { border-right: 0; }
.launch-digits strong { display: block; font-size: 34px; line-height: 1.2; font-variant-numeric: tabular-nums; font-weight: 700; }
.launch-digits span { display: block; margin-top: 6px; color: #bdc3b5; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.launch-dates { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.launch-dates p { margin: 3px 0; font-size: 11px; color: #cbd0c2; line-height: 1.7; }
.launch-dates p > span { color: var(--gold); margin-right: 8px; }
.launch-dates time { display: inline; overflow-wrap: anywhere; }
#launch-status { font-size: 13px; color: var(--gold); line-height: 1.7; margin: 0 0 12px; }
.launch noscript { font-size: 12px; }
@media(max-width:650px) {
  .launch { padding: 16px; margin-bottom: 24px; }
  .launch-digits { gap: 4px; }
  .launch-digits strong { font-size: 28px; }
  .launch-digits span { font-size: 9px; }
  .launch-dates p { font-size: 10px; }
}

.promotion-shortcut { display:inline-block; color:var(--gold); margin-top:22px; font-size:13px; text-decoration:underline; text-underline-offset:5px; }
.promotion { margin-top:50px; padding:34px; border:1px solid #efd18b55; border-radius:8px; background:#1a201b; }
.promotion-heading { max-width:780px; }
.promotion-heading .eyebrow { margin-bottom:16px; }
.promotion h2 { font-size:34px; }
.promotion p { font-size:14px; line-height:1.8; color:#c7cdbe; }
.promotion-request { margin-top:22px; }
.promotion .promotion-note { color:var(--muted); font-size:12px; }
.promotion button { cursor:pointer; font-family:inherit; }
.promotion button:disabled { cursor:default; opacity:.55; transform:none; }
#promotion-status { margin:12px 0; }
#promotion-result { border-top:1px solid var(--line); padding-top:28px; margin-top:24px; }
#promotion-result > label { display:block; color:var(--gold); font-size:13px; margin-bottom:12px; }
.promotion-code-row { display:flex; gap:12px; max-width:760px; }
#promotion-code { width:100%; min-width:0; background:#101512; color:#f7f4e9; border:1px solid #efd18b66; border-radius:4px; padding:16px; font:700 20px/1.5 Consolas,monospace; letter-spacing:1px; }
#promotion-code:focus { outline:2px solid var(--gold); outline-offset:3px; }
#promotion-copy { flex-shrink:0; }
#promotion-copy-status { margin:10px 0; }
.promotion-result-actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; margin-top:22px; }
.promotion h3 { margin-top:32px; line-height:1.5; }
#promotion-steps { padding-left:24px; max-width:950px; color:#d4d9ce; }
#promotion-steps li { padding-left:6px; margin-bottom:14px; font-size:14px; line-height:1.9; }
#promotion-steps li::marker { color:var(--gold); font-weight:bold; }
.promotion-ios { border-top:1px solid var(--line); padding-top:18px; margin:24px 0 0; }
.promotion-ios a, #promotion-help { color:var(--gold); }
@media(max-width:650px) {
  .promotion { padding:22px 18px; margin-top:32px; }
  .promotion h2 { font-size:27px; }
  .promotion-code-row { flex-direction:column; }
  #promotion-code { font-size:clamp(12px,3.4vw,19px); padding:12px 8px; letter-spacing:0; }
  .promotion .button { max-width:100%; white-space:normal; line-height:1.6; }
  .promotion p, #promotion-steps li { font-size:13px; }
}