/* App-bar controls use the same steel/gold edges as the game cabinet. */
.site-header {
  --header-control-height: 44px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* The background fills the viewport; existing 1320px control positions stay put. */
@media (min-width: 1320px) {
  .ub-site .game-header {
    width: 100%;
    max-width: none;
    padding-inline: calc(max(0px, (100% - 1320px) / 2) + 60 * var(--u));
  }
}
.ub-site .game-header[data-scroll-aware="true"]:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  color: #082138;
}
.ub-site .game-header[data-scroll-aware="true"]:not(.is-scrolled) nav {
  color: #082138;
}
.ub-site .game-header[data-scroll-aware="true"]:not(.is-scrolled) nav > a:not(.nav-cta) {
  -webkit-text-stroke: 1px #fff8e7;
  paint-order: stroke fill;
}
.ub-site .game-header.is-scrolled {
  background: #082846;
  border-bottom-color: #326586;
  color: #fff8e7;
}
.site-header nav { font-weight: 400; }
.site-header .nav-cta,
.ub-site .site-header .nav-cta {
  height: var(--header-control-height);
  min-height: var(--header-control-height);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #071c2b;
  border-top-color: #fff489;
  border-bottom: 4px solid #9c7021;
  border-radius: 3px;
  background: #ffd43d;
  color: #082138;
  box-shadow: none;
  line-height: 1.15;
}
.ub-site .nav-cta::before { display: none; }
.site-header .nav-cta:hover { background: #ffe16b; }
.site-header .nav-cta:active { border-top-color: #eeae05; background: #eeae05; }
.language-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: var(--header-control-height);
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff8e7;
  font: 400 12px/1.2 var(--body);
}
.language-picker:focus-within { outline: none; }
.language-trigger,
.language-native-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 80px;
  height: var(--header-control-height);
  padding: 0 10px;
  border: 2px solid #071c2b;
  border-top-color: #74a9c3;
  border-bottom: 4px solid #071c2b;
  border-radius: 3px;
  background: #294774;
  color: #fff8e7;
  font: inherit;
  white-space: nowrap;
}
.language-trigger:hover,
.language-trigger[aria-expanded="true"] { background: #326586; border-top-color: #fff489; }
.language-trigger:focus-visible,
.language-picker:not([data-enhanced]) { outline: 3px solid transparent; outline-offset: 3px; }
.language-trigger:focus-visible,
.language-picker:not([data-enhanced]):focus-within { outline-color: #ffd43d; }
.language-trigger svg,
.language-native-face svg,
.language-panel-heading svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.language-trigger .language-chevron,
.language-native-face .language-chevron { width: 9px; height: 7px; transition: transform .18s ease; }
.language-trigger[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.language-picker select { inset: 0; width: 100%; height: var(--header-control-height); }
.language-picker[data-enhanced] > select,
.language-picker[data-enhanced] > .language-native-face,
.language-trigger[hidden],
.language-panel[hidden] { display: none; }
.language-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  width: min(336px, calc(100vw - 24px));
  padding: 7px;
  border: 3px solid #071c2b;
  border-top-color: #74a9c3;
  border-right-color: #326586;
  border-bottom-width: 6px;
  border-radius: 4px;
  background: #082846;
  color: #fff8e7;
}
.language-panel::before,
.language-panel::after {
  content: '';
  position: absolute;
  top: 9px;
  width: 5px;
  height: 5px;
  border: 1px solid #fff489;
  background: #eeae05;
}
.language-panel::before { left: 10px; }
.language-panel::after { right: 10px; }
.language-panel-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px 7px;
  font-size: 13px;
  color: #ffd43d;
}
.language-menu {
  max-height: min(468px, calc(100dvh - 146px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #74a9c3 #082138;
  border: 1px solid #071c2b;
  background: #082138;
}
.language-option {
  position: relative;
  display: grid;
  grid-template-columns: 59px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid #326586;
  border-radius: 0;
  background: transparent;
  color: #fff8e7;
  text-align: left;
  font: 400 13px/1.35 var(--body);
}
.language-option:last-child { border-bottom: 0; }
.language-option-code {
  font-family: var(--font-latin, 'UB Latin', sans-serif);
  font-size: 10px;
  line-height: 1.3;
  color: #a9c9dc;
}
.language-option-name { overflow-wrap: anywhere; }
.language-check { width: 16px; height: 16px; fill: none; stroke: #ffd43d; stroke-width: 2.5; visibility: hidden; }
.language-option[aria-selected="true"] { background: #294774; }
.language-option[aria-selected="true"] .language-option-code { color: #ffd43d; }
.language-option[aria-selected="true"] .language-check { visibility: visible; }
.language-option:hover { background: #326586; }
.language-option:focus { outline: 2px solid #ffd43d; outline-offset: -3px; background: #326586; }
.language-auto { border-bottom: 2px solid #74a9c3; }
@media (max-width: 1050px) {
  .language-trigger, .language-native-face { min-width: 74px; gap: 5px; padding-inline: 8px; }
}
@media (max-width: 760px) {
  .language-picker { font-size: 10px; }
  .language-trigger, .language-native-face { min-width: 62px; padding-inline: 5px; gap: 4px; }
  .language-trigger .language-globe, .language-native-face .language-globe { width: 14px; height: 14px; }
  .language-trigger .language-chevron, .language-native-face .language-chevron { width: 7px; }
  .language-panel { width: min(304px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .language-chevron { transition: none; }
}
/* Every self-name uses the corresponding original game font, regardless of the page locale. */
.language-option-name[lang] { font-family: 'UB Latin', sans-serif; }
.language-option-name[lang="ko"] { font-family: Bitbit, sans-serif; }
.language-option-name[lang="ja"] { font-family: 'UB Japanese', sans-serif; }
.language-option-name[lang="zh-Hant"] { font-family: 'UB Traditional', sans-serif; }
.language-option-name[lang="th"] { font-family: 'UB Thai', sans-serif; }
.language-option-name[lang="hi"] { font-family: 'UB Hindi', sans-serif; }
@media (max-width: 760px) {
  .ub-site .game-header .brand { flex: none; margin-right: 8px; }
  .ub-site .site-header nav { flex: 1; justify-content: flex-end; }
  .site-header nav > a { min-width: 44px; min-height: 44px; }
  .site-header nav > a > span { min-width: 0; }
  .ub-site .site-header nav > a:not(.nav-cta),
  .company-header nav > a {
    flex: 0 1 auto;
    max-width: 74px;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .ub-site .site-header .nav-cta { flex: 0 1 auto; overflow-wrap: anywhere; hyphens: auto; }
  .company-header nav { gap: 6px; }
}
@media (max-width: 360px) {
  .ub-site .site-header nav { font-size: 10px; }
  .ub-site .site-header nav > a:not(.nav-cta) { max-width: 60px; }
  html:not([lang=ko]) .ub-site .game-header .nav-cta { max-width: 70px; }
}