/* Soul Heroes homepage i18n: language switcher + per-language fonts + RTL fixes. */

/* ---------- switcher */
.sh-lang{position:relative;display:flex;align-items:center;margin-left:12px;font-family:'Noto Sans KR','Noto Sans',system-ui,sans-serif;z-index:60}
.sh-lang-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(233,197,123,.35);background:rgba(11,13,24,.72);color:#e9dfc6;font:500 13.5px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.sh-lang-btn:hover,.sh-lang.open .sh-lang-btn{border-color:rgba(233,197,123,.8);color:#ffe9b0}
.sh-lang-btn svg{flex:none;opacity:.9}
.sh-lang-code{display:none}
.sh-lang-list{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;display:flex;flex-direction:column;padding:8px;border-radius:14px;background:rgba(11,13,24,.98);border:1px solid rgba(233,197,123,.22);box-shadow:0 18px 40px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.sh-lang.open .sh-lang-list{opacity:1;visibility:visible;transform:none}
.sh-lang-list a{display:block;padding:9px 14px;border-radius:9px;font-size:14.5px;color:#cfc8b6;text-decoration:none;white-space:nowrap}
.sh-lang-list a:hover,.sh-lang-list a:focus-visible{background:rgba(233,197,123,.1);color:#ffe9b0}
.sh-lang-list a[aria-current="true"]{color:#ffe9b0;font-weight:700}
.sh-lang-list a[aria-current="true"]::after{content:" ✓";color:#e3b660}
.sh-lang-list a[lang="ar"]{text-align:right;font-family:'Noto Sans Arabic',sans-serif}
.sh-lang-list a[lang="th"]{font-family:'Noto Sans Thai','Noto Sans',sans-serif}
.sh-lang.in-nav{margin-left:0}
.sh-lang.in-nav .sh-lang-btn{height:40px;background:rgba(7,9,20,.63);backdrop-filter:blur(12px)}
.sh-lang.floating{position:fixed;top:14px;right:14px}
@media (max-width:900px){
  .sh-lang.in-gnb{margin-left:auto;margin-right:6px}
  .sh-lang.in-gnb .sh-lang-name{display:none}
  .sh-lang.in-gnb .sh-lang-code{display:inline}
  .sh-lang.in-gnb .sh-lang-btn{height:34px;padding:0 10px;font-size:12.5px}
}
@media (max-width:600px){
  .sh-lang.in-nav .sh-lang-name,.sh-lang.floating .sh-lang-name{display:none}
  .sh-lang.in-nav .sh-lang-code,.sh-lang.floating .sh-lang-code{display:inline}
}
/* the play link keeps its highlight on translated pages (nav.css matches href="/play" only) */
.gnb-top[href$="/play"]{color:#ffd98e}
.gnb-top[href$="/play"]::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff7a59;box-shadow:0 0 8px #ff7a59;margin-right:2px}

/* ---------- translation notice on legal pages */
.sh-legal-note{margin:0 0 22px;padding:12px 16px;border-radius:12px;border:1px solid rgba(160,130,60,.35);background:rgba(233,197,123,.1);font-size:14px;line-height:1.6}
.sh-legal-note a{font-weight:700;margin-inline-start:6px}

/* ---------- per-language fonts (site.css variables + hard-coded families in nav/legal/apply css) */
html[lang="en"],html[lang="vi"],html[lang="id"],html[lang="es"],html[lang="pt-BR"]{
  --sans:'Noto Sans','Noto Sans KR',system-ui,sans-serif;--serif:'Noto Serif','Noto Serif KR',serif;--display:'Cinzel','Noto Serif',serif}
html[lang="ja"]{--sans:'Noto Sans JP','Noto Sans KR',sans-serif;--serif:'Noto Serif JP','Noto Sans JP',serif;--display:'Cinzel','Noto Serif JP',serif}
html[lang="zh-TW"]{--sans:'Noto Sans TC','Noto Sans KR',sans-serif;--serif:'Noto Serif TC','Noto Sans TC',serif;--display:'Cinzel','Noto Serif TC',serif}
html[lang="th"]{--sans:'Noto Sans Thai','Noto Sans',sans-serif;--serif:'Noto Serif Thai','Noto Sans Thai',serif;--display:'Cinzel','Noto Serif Thai',serif}
html[lang="ar"]{--sans:'Noto Sans Arabic','Noto Sans',sans-serif;--serif:'Noto Naskh Arabic','Noto Sans Arabic',serif;--display:'Cinzel','Noto Naskh Arabic',serif}
html:not([lang="ko"]) body,html:not([lang="ko"]) .gnb{font-family:var(--sans)}
html:not([lang="ko"]) h1,html:not([lang="ko"]) h2{font-family:var(--serif)}
html:not([lang="ko"]) section h2 .n{font-family:var(--sans)}
html:not([lang="ko"]) .kv-ko{letter-spacing:.18em}
/* CJK / Thai must be allowed to wrap anywhere (keep-all would keep whole sentences on one line) */
html[lang="ja"] *,html[lang="zh-TW"] *,html[lang="th"] *{word-break:normal!important;line-break:strict}
html[lang="th"] body{line-height:1.8}
/* long words in Latin languages */
html[lang="en"] *,html[lang="vi"] *,html[lang="id"] *,html[lang="es"] *,html[lang="pt-BR"] *{overflow-wrap:anywhere;hyphens:auto}

/* ---------- Arabic: right-to-left */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .sh-lang{margin-left:0;margin-right:12px}
html[dir="rtl"] .sh-lang-list{right:auto;left:0}
html[dir="rtl"] .gnb-cta{margin-left:0;margin-right:14px}
html[dir="rtl"] .hero-quote{padding-left:0;padding-right:18px;border-left:0;border-right:2px solid var(--gold,#e3b660)}
html[dir="rtl"] .brand-word,html[dir="rtl"] .kv-en,html[dir="rtl"] .eyebrow,html[dir="rtl"] .num,html[dir="rtl"] time{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] canvas{direction:ltr}
html[dir="rtl"] .sh-lang.floating{right:auto;left:14px}
@media (max-width:900px){ html[dir="rtl"] .sh-lang.in-gnb{margin-left:6px;margin-right:auto} html[dir="rtl"] .gnb-cta{margin:20px 0 0} }
/* off-screen helpers use left:-999px / -9999px; in RTL that side is scrollable, so move them to the right */
html[dir="rtl"] .skip{left:auto;right:-999px}
html[dir="rtl"] .skip:focus{right:8px}
html[dir="rtl"] .hp,html[dir="rtl"] #website{left:auto!important;right:-9999px}
/* the small Korean title under the logo becomes "Soul Heroes" in these languages — hide the duplicate */
html[lang="en"] .kv-ko,html[lang="vi"] .kv-ko,html[lang="id"] .kv-ko,html[lang="es"] .kv-ko,html[lang="pt-BR"] .kv-ko,html[lang="th"] .kv-ko,html[lang="ar"] .kv-ko,
html[lang="en"] .brand small,html[lang="vi"] .brand small,html[lang="id"] .brand small,html[lang="es"] .brand small,html[lang="pt-BR"] .brand small,html[lang="th"] .brand small,html[lang="ar"] .brand small{display:none}
/* longer button labels: tighter lines so a 2-line label still fits inside the pill */
html:not([lang="ko"]) .btn{line-height:1.15;text-align:center}
@media (max-width:560px){ html:not([lang="ko"]) .kv-actions .btn{font-size:14px;padding:0 12px} }
/* Arabic desktop hero: the artwork stays on the right, so keep the text column on the left side */
@media (min-width:901px){
  html[dir="rtl"] .kv-copy>*{margin-inline-start:auto;margin-inline-end:0}
  html[dir="rtl"] .kv-copy{display:flex;flex-direction:column;align-items:flex-end}
  html[dir="rtl"] .kv-copy>*{width:560px}
}