/* === Live desktop toolbar overflow fix - CSS only === */
/* Keeps gameplay toolbar inside viewport on wide desktop screens */

.game-wrapper .gameHeader {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow: visible !important;
}

.game-wrapper #navigation {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}

.game-wrapper #navigation button {
  flex: 1 1 110px !important;
  width: auto !important;
  min-width: 82px !important;
  max-width: 160px !important;
  height: 68px !important;
  margin: 0 !important;
  padding: 8px 8px !important;
  font-size: clamp(12px, 0.78vw, 16px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center !important;
}

.game-wrapper #manipulation {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: 120px !important; /* leaves more space for language selector */
  z-index: 10003 !important;
}

.game-wrapper #manipulation button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  flex-shrink: 0 !important;
}

.game-wrapper #manipulation #account_open {
  max-width: 300px !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(12px, 0.9vw, 18px) !important;
  padding-right: 42px !important;
  flex-shrink: 1 !important;
}

.game-wrapper #manipulation #account_open:after {
  width: 38px !important;
  height: 38px !important;
}

.game-wrapper .lang {
  position: fixed !important;
  right: 18px !important;
  top: 28px !important;
  z-index: 10005 !important;
  max-width: 62px !important;
}

/* Medium desktop: allow toolbar to wrap rather than push off screen */
@media (max-width: 1500px) {
  .game-wrapper .gameHeader {
    height: auto !important;
    min-height: 150px !important;
    flex-wrap: wrap !important;
    align-content: center !important;
  }

  .game-wrapper #navigation {
    order: 1 !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
  }

  .game-wrapper #manipulation {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 120px !important;
  }

  .game-wrapper .lang {
    top: 92px !important;
  }

  #deck-selectors_wrapper {
    top: 150px !important;
    height: calc(100% - 150px) !important;
  }
}

/* === Language selector final positioning fix - 2026-05-19 === */
/* Keep language selector in its own fixed right-side area, away from toolbar icons */

.game-wrapper .lang {
  position: fixed !important;
  right: 14px !important;
  top: 36px !important;
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 10050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-radius: 6px !important;
}

.game-wrapper .lang span {
  display: inline-block !important;
  font-size: 28px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.game-wrapper .lang .chevron {
  position: absolute !important;
  right: 2px !important;
  bottom: 3px !important;
  margin: 0 !important;
}

.game-wrapper .lang:hover {
  width: 260px !important;
  max-width: 260px !important;
  min-width: 260px !important;
  max-height: 260px !important;
  height: auto !important;
  overflow: visible !important;
  justify-content: flex-end !important;
  padding: 8px 12px !important;
}

.game-wrapper .lang:hover .lang_selector {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

/* Reserve enough right-side space for the language selector */
.game-wrapper #manipulation {
  margin-right: 150px !important;
}

@media (max-width: 1500px) {
  .game-wrapper #manipulation {
    margin-right: 150px !important;
  }

  .game-wrapper .lang {
    right: 14px !important;
    top: 94px !important;
  }
}

/* === Language selector dropdown correction - 2026-05-19 === */
/* Collapsed: show current language only. Hover: show compact vertical dropdown. */

.game-wrapper .lang {
  position: fixed !important;
  right: 16px !important;
  top: 38px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 10060 !important;
  text-align: center !important;
}

.game-wrapper .lang .lang_selector {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.game-wrapper .lang span {
  display: block !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 44px !important;
  line-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #001c46 !important;
  text-align: center !important;
}

.game-wrapper .lang button {
  display: none !important;
  opacity: 1 !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #001c46 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.game-wrapper .lang:hover {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

.game-wrapper .lang:hover .lang_selector {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important;
}

.game-wrapper .lang:hover button {
  display: block !important;
}

.game-wrapper .lang button:hover {
  background: #001c46 !important;
  color: #ffffff !important;
}

.game-wrapper .lang .chevron {
  position: absolute !important;
  right: 4px !important;
  bottom: 5px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

@media (max-width: 1500px) {
  .game-wrapper .lang {
    right: 16px !important;
    top: 94px !important;
  }
}

/* === Language selected-label size/alignment correction - 2026-05-19 === */
/* Make selected language look closer to toolbar icon size and align with icons */

.game-wrapper .lang {
  right: 18px !important;
  top: 54px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 10060 !important;
}

.game-wrapper .lang .lang_selector {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  background: transparent !important;
  border-radius: 6px !important;
  overflow: visible !important;
}

.game-wrapper .lang span {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #001c46 !important;
  text-align: center !important;
}

.game-wrapper .lang .chevron {
  right: -7px !important;
  bottom: 4px !important;
  transform: scale(0.85) !important;
}

/* Hover opens a compact dropdown below, not across the toolbar */
.game-wrapper .lang:hover {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: auto !important;
  max-height: none !important;
}

.game-wrapper .lang:hover .lang_selector {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important;
  overflow: visible !important;
}

.game-wrapper .lang:hover span {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 24px !important;
}

.game-wrapper .lang:hover button {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  font-size: 16px !important;
  padding: 8px 0 !important;
}

/* Keep same alignment on medium desktop; avoid pushing it to lower row */
@media (max-width: 1500px) {
  .game-wrapper .lang {
    right: 18px !important;
    top: 54px !important;
  }
}

/* === Language selected-label final size/vertical alignment - 2026-05-19 === */
/* Make selected language closer to icon size and vertically centered with toolbar icons */

.game-wrapper .lang {
  right: 20px !important;
  top: 48px !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.game-wrapper .lang .lang_selector {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.game-wrapper .lang span {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  transform: translateY(-2px) !important;
}

.game-wrapper .lang .chevron {
  right: -6px !important;
  bottom: 1px !important;
  transform: scale(0.72) !important;
}

/* Hover/dropdown remains compact */
.game-wrapper .lang:hover {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: auto !important;
  max-height: none !important;
}

.game-wrapper .lang:hover .lang_selector {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important;
}

.game-wrapper .lang:hover span {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 22px !important;
  transform: none !important;
}

.game-wrapper .lang:hover button {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  font-size: 15px !important;
  padding: 7px 0 !important;
}

@media (max-width: 1500px) {
  .game-wrapper .lang {
    right: 20px !important;
    top: 48px !important;
  }
}

/* === Preserve hide-toolbar/menu behavior - 2026-05-21 === */
/* Our live toolbar patch uses display:flex !important, so explicitly allow minimal mode to hide the toolbar. */

.cardboard.minimal .gameHeader,
.game-wrapper .cardboard.minimal .gameHeader {
  display: none !important;
}

/* Hide language selector too when toolbar/menu is hidden */
.cardboard.minimal ~ .lang,
.game-wrapper .cardboard.minimal ~ .lang,
.game-wrapper.minimal .lang {
  display: none !important;
}