/* Game-original language fonts, copied without modification. */
@font-face { font-family: UB Latin; src: url('/assets/ub/localized/Bungee-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: UB Japanese; src: url('/assets/ub/localized/DelaGothicOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: UB Traditional; src: url('/assets/ub/localized/ChironGoRoundTC-900H.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: UB Thai; src: url('/assets/ub/localized/Mitr-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: UB Hindi; src: url('/assets/ub/localized/Baloo2-ExtraBold.ttf') format('truetype'); font-display: swap; }
html:not([lang=ko]) { --display: 'UB Latin', system-ui, sans-serif; }
html[lang=ja] { --display: 'UB Japanese', system-ui, sans-serif; }
html[lang=zh-Hant] { --display: 'UB Traditional', system-ui, sans-serif; }
html[lang=th] { --display: 'UB Thai', system-ui, sans-serif; }
html[lang=hi] { --display: 'UB Hindi', system-ui, sans-serif; }
/* LocaleText applies the original face with FontStyles.Normal throughout the app. */
body, button, a, input, select, p, small { font-weight: 400; }
.ub-site .hero-copy > p, .ub-site .feel-copy > p, .site-header nav, .how-summary, .eyebrow, .skip-link { font-weight: 400; }
.ub-site #demo-count { font-family: 'Galmuri Bold', sans-serif; font-weight: 400; }
.ub-site .demo-unit { font-family: 'Galmuri Bold', sans-serif; }
html[lang=ja] .ub-site .demo-unit, html[lang=zh-Hant] .ub-site .demo-unit { font-family: Galmuri, sans-serif; }
html[lang=th] .ub-site .demo-unit, html[lang=hi] .ub-site .demo-unit { font-family: var(--display); }
html { scroll-padding-top: 100px; }
[id] { scroll-margin-top: 12px; }
/* Fixed rather than sticky: preserve the approved hero's original coordinates. */
.site-header, .ub-site .game-header { position: fixed; z-index: 20; top: 0; bottom: auto; background: var(--navy); color: var(--cream); border-bottom: 1px solid #326586; }
.company-main, .info-main { margin-top: 90px; }
.site-header nav { min-width: 0; }
.company-header a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.language-picker { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; min-width: 72px; height: 44px; padding: 0 8px; border: 1px solid #74a9c3; border-radius: 3px; background: #082138; color: #fff8e7; font: 700 12px/1.2 var(--body); }
.language-picker > svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.language-picker .language-chevron { width: 9px; height: 7px; }
.language-picker select { position: absolute; inset: -1px; width: calc(100% + 2px); height: 44px; min-width: 44px; opacity: 0; cursor: pointer; font: 16px var(--body); }
.language-picker:focus-within { outline: 3px solid #ffd43d; outline-offset: 3px; }
.language-picker:hover { border-color: #ffd43d; }
.language-picker option { background: #082138; color: #fff8e7; }
.wordmark-localized { display: none; max-width: 170px; color: #ffd43d; font: 16px/1.15 var(--display); text-transform: uppercase; text-shadow: 0 2px #020b12; }
html:not([lang=ko]) .game-wordmark { display: none; }
html:not([lang=ko]) .wordmark-localized { display: block; }
html:not([lang=ko]) .ub-site .hero h1 { width: calc(400 * var(--u)); left: calc(76 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.2; }
html:not([lang=ko]) .ub-site .hero-copy > p { width: calc(390 * var(--u)); left: calc(75 * var(--u)); font-size: calc(13 * var(--u)); }
html:not([lang=ko]) .ub-site .site-sign { font-size: calc(12 * var(--u)); }
html:not([lang=ko]) .ub-site .final-sign { white-space: normal; text-align: center; padding-inline: calc(6 * var(--u)); }
html:not([lang=ko]) .ub-site .final-sign span { max-width: 100%; }
html:not([lang=ko]) .ub-site .how h2 { font-size: calc(23 * var(--u)); padding-inline: 24px; text-align: center; }
html:not([lang=ko]) .ub-site .instruction h3 { font-size: calc(19 * var(--u)); }
html:not([lang=ko]) .ub-site .instruction p { font-size: calc(14 * var(--u)); padding-inline: 15px; }
html:not([lang=ko]) .ub-site .how-summary { font-size: calc(12 * var(--u)); padding-inline: 16px; text-align: center; }
html:not([lang=ko]) .ub-site .feel h2 { font-size: calc(66 * var(--d)); line-height: 1.25; }
html:not([lang=ko]) .ub-site .feel h2 em { font-size: 1em; }
html:not([lang=ko]) .ub-site .feel-copy > p { font-size: max(14px,calc(26 * var(--d))); }
html:not([lang=ko]) .ub-site #demo-title { width: 54%; font-size: calc(29 * var(--d)); line-height: 1.12; white-space: normal; }
html:not([lang=ko]) .ub-site .demo-status { font-size: max(14px,calc(20 * var(--d))) !important; }
html:not([lang=ko]) .ub-site .game-button span { font-size: calc(25 * var(--d)); }
html:not([lang=ko]) .ub-site .impact b { font-size: calc(32 * var(--d)); }
html:not([lang=ko]) .ub-site .journey h2 { font-size: calc(25 * var(--u)); }
html:not([lang=ko]) .ub-site .download h2 { font-size: calc(17 * var(--u)); }
html:not([lang=ko]) .ub-site .download-copy { left: 30%; width: 43%; text-align: center; }
.company-game-link { max-width: 200px; }
@media (max-width: 1050px) {
 .ub-site .game-header { padding-inline: 18px; min-height: 60px; }
 .ub-site .site-header nav { gap: 10px; font-size: 12px; }
 .company-header { padding-inline: 20px; }
 .company-header nav { gap: 16px; }
 .company-game-link { max-width: 145px; }
}
@media (max-width: 760px) {
 .site-header, .ub-site .game-header { min-height: 66px; padding: 9px 12px; }
 .ub-site .site-header nav { gap: 4px; font-size: 11px; }
 .ub-site .site-header .nav-cta { padding-inline: 6px; }
 .language-picker { min-width: 62px; padding-inline: 5px; gap: 3px; font-size: 11px; }
 .language-picker > svg { width: 14px; }
 .wordmark-localized { max-width: 88px; font-size: 11px; overflow-wrap: anywhere; }
 .company-header .brand { font-size: 18px; }
 .company-header nav { gap: 9px; font-size: 12px; }
 .company-header .company-game-link { display: none; }
 .company-main, .info-main { margin-top: 66px; }
 html:not([lang=ko]) .ub-site .game-header .nav-cta { max-width: 87px; text-align: center; line-height: 1.15; }
 html:not([lang=ko]) .ub-site .hero h1 { width: calc(100% - 24px); left: 12px; font-size: clamp(27px,7.5vw,42px); line-height: 1.2; top: 263px; }
 html:not([lang=ko]) .ub-site .hero-copy > p { width: calc(100% - 32px); left: 16px; font-size: 14px; top: 374px; }
 html:not([lang=ko]) .ub-site .site-sign { font-size: 11px; }
 html:not([lang=ko]) .ub-site .how h2 { font-size: clamp(18px,4.8vw,26px); gap: 8px; }
 html:not([lang=ko]) .ub-site .instruction h3 { font-size: 20px; }
 html:not([lang=ko]) .ub-site .instruction p { font-size: 14px; }
 html:not([lang=ko]) .ub-site .how-summary { font-size: 12px; }
 html:not([lang=ko]) .ub-site .feel h2 { font-size: clamp(30px,8vw,48px); }
 html:not([lang=ko]) .ub-site .feel-copy > p { font-size: 16px; }
 html:not([lang=ko]) .ub-site #demo-title { font-size: clamp(12px,3.3vw,20px); width: 48%; top: 4.5%; }
 html:not([lang=ko]) .ub-site .game-button span { font-size: 13px; }
 html:not([lang=ko]) .ub-site .impact b { font-size: 17px; }
 html:not([lang=ko]) .ub-site .journey h2 { font-size: clamp(21px,5.5vw,30px); }
 html:not([lang=ko]) .ub-site .download-copy { left: 12px; width: calc(100% - 24px); }
 html:not([lang=ko]) .ub-site .download h2 { font-size: 18px; }
 html:not([lang=ko]) .ub-site .game-footer { height: auto; min-height: 170px; padding: 16px; flex-wrap: wrap; }
 html:not([lang=ko]) .ub-site .site-footer nav { width: 100%; gap: 14px; font-size: 11px; }
 html:not([lang=ko]) .ub-site .site-footer nav a { max-width: 40%; overflow-wrap: anywhere; hyphens: auto; }
 html:not([lang=ko]) .ub-site .site-footer small { left: 16px; bottom: 13px; }
 .company-main>h1 { font-size: clamp(30px,8vw,56px); overflow-wrap: anywhere; }
 .game-feature { grid-template-columns: minmax(0,1fr); }
 .game-feature > div { min-width: 0; }
 .game-feature h2 { overflow-wrap: anywhere; hyphens: auto; }
 .info-main h1 { overflow-wrap: anywhere; hyphens: auto; }
 .info-main .empty-state { overflow-wrap: anywhere; }
 body:not(.ub-site) .site-footer { grid-template-columns: minmax(0,1fr); }
 body:not(.ub-site) .site-footer nav { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
 body:not(.ub-site) .site-footer nav a { min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; overflow-wrap: anywhere; hyphens: auto; }
}