/* === 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;
}


/* === Top navigation compact primary buttons - 14 inch fix ===
   Keeps the board/card count bar unchanged.
   Compacts the visible primary menu buttons so the utility icons stay on the same row.
   The More / ⋯ button still reveals secondary actions when needed.
*/
@media (min-width: 1301px) and (max-width: 1850px) {
  body:not(.cardtherapy-nav-more-open) .gameHeader {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 96px !important;
    min-height: 96px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    max-width: calc(100vw - 520px) !important;
    overflow: visible !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation button {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding: 8px 6px !important;
    margin-right: 8px !important;
    font-size: 14px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation .nav-secondary {
    display: none !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 20px !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    align-self: center !important;
    flex-wrap: nowrap !important;
  }

  /* Keep the account icon, but truncate the greeting text at crowded widths. */
  body:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    max-width: 175px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  body:not(.cardtherapy-nav-more-open) .board-control-bar {
    top: 86px !important;
  }
}

@media (min-width: 1301px) and (max-width: 1700px) {
  body:not(.cardtherapy-nav-more-open) #navigation {
    max-width: calc(100vw - 485px) !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation button {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding: 7px 5px !important;
    margin-right: 7px !important;
    font-size: 13.5px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    font-size: 23px !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    max-width: 150px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 1301px) and (max-width: 1550px) {
  body:not(.cardtherapy-nav-more-open) #navigation {
    max-width: calc(100vw - 450px) !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation button {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    padding: 7px 4px !important;
    margin-right: 6px !important;
    font-size: 13px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    max-width: 125px !important;
  }
}

/* When More is open, allow the intended temporary expansion/wrapping. */
body.cardtherapy-nav-more-open #navigation.nav-more-open {
  overflow: visible !important;
}

body.cardtherapy-nav-more-open #navigation.nav-more-open button {
  white-space: normal !important;
}


/* === Top navigation dynamic width collapse ===
   Runtime JS measures whether #navigation + #manipulation fit on one row.
   It hides lower-priority menu buttons into More / ⋯ until utility icons fit.
   Board/card count bar is not made responsive here.
*/
#navigation .nav-more-toggle {
  display: none;
}

#navigation[data-nav-has-hidden="true"] .nav-more-toggle {
  display: inline-block;
}

#navigation button[data-nav-auto-hidden="true"] {
  display: none !important;
}

#navigation.nav-more-open button[data-nav-auto-hidden="true"] {
  display: inline-block !important;
}

#navigation.nav-more-open {
  flex-wrap: wrap !important;
  row-gap: 8px;
  max-width: calc(100vw - 340px);
}

body.cardtherapy-nav-more-open .gameHeader {
  height: auto;
  min-height: 150px;
  align-items: flex-start;
}

body.cardtherapy-nav-more-open #manipulation {
  align-self: flex-start;
  margin-top: 6px;
}

body.cardtherapy-nav-more-open .board-control-bar {
  top: 138px;
}

/* Slightly smaller visible primary buttons at laptop widths. */
@media (min-width: 1301px) and (max-width: 1850px) {
  body:not(.cardtherapy-nav-more-open) .gameHeader {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 96px !important;
    min-height: 96px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation button {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    padding: 7px 5px !important;
    margin-right: 7px !important;
    font-size: 13.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 18px !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    align-self: center !important;
    flex-wrap: nowrap !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  body:not(.cardtherapy-nav-more-open) .board-control-bar {
    top: 86px !important;
  }
}

@media (min-width: 1301px) and (max-width: 1600px) {
  body:not(.cardtherapy-nav-more-open) #navigation button {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    font-size: 13px !important;
    margin-right: 6px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    max-width: 105px !important;
  }
}

@media (max-width: 1300px) {
  #navigation.nav-more-open {
    max-width: min(760px, calc(100vw - 40px));
    justify-content: center;
  }

  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 190px;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 154px;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 190px;
    height: calc(100% - 190px);
  }
}

@media (max-width: 810px) {
  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 240px;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 214px;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 240px;
    height: calc(100% - 240px);
  }
}


/* === Top navigation two-stage collapse ===
   Stage 1: hide secondary menu buttons behind More.
   Stage 2: compact utility area/account greeting if needed.
   Board/card count bar remains unchanged.
*/
#navigation .nav-more-toggle {
  display: none;
}

#navigation[data-nav-has-hidden="true"] .nav-more-toggle {
  display: inline-block;
}

#navigation button[data-nav-auto-hidden="true"] {
  display: none !important;
}

#navigation.nav-more-open button[data-nav-auto-hidden="true"] {
  display: inline-block !important;
}

#navigation.nav-more-open {
  flex-wrap: wrap !important;
  row-gap: 8px;
  max-width: calc(100vw - 340px);
}

/* Laptop / 14-inch class: keep top chrome on one row when More is closed */
@media (min-width: 1000px) and (max-width: 1850px) {
  body:not(.cardtherapy-nav-more-open) .gameHeader {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 96px !important;
    min-height: 96px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation button {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    padding: 7px 5px !important;
    margin-right: 6px !important;
    font-size: 13px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 10px !important;
    margin-left: 4px !important;
    margin-top: 0 !important;
    align-self: center !important;
    flex-wrap: nowrap !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    max-width: 115px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open:after {
    width: 36px !important;
    height: 36px !important;
  }

  body:not(.cardtherapy-nav-more-open) .board-control-bar {
    top: 86px !important;
  }
}

/* Stage 2: if menu hiding alone is not enough, make account greeting icon-only */
@media (min-width: 1000px) and (max-width: 1850px) {
  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-right: 38px !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #manipulation #account_open:after {
    right: 0 !important;
    width: 38px !important;
    height: 38px !important;
  }

  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #navigation button {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    font-size: 12.5px !important;
  }

  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }
}

/* When More is open, allow the intended temporary expansion/wrapping */
body.cardtherapy-nav-more-open .gameHeader {
  height: auto;
  min-height: 150px;
  align-items: flex-start;
}

body.cardtherapy-nav-more-open #manipulation {
  align-self: flex-start;
  margin-top: 6px;
}

body.cardtherapy-nav-more-open .board-control-bar {
  top: 138px;
}

@media (max-width: 1300px) {
  #navigation.nav-more-open {
    max-width: min(760px, calc(100vw - 40px));
    justify-content: center;
  }

  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 190px;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 154px;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 190px;
    height: calc(100% - 190px);
  }
}

@media (max-width: 810px) {
  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 240px;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 214px;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 240px;
    height: calc(100% - 240px);
  }
}


/* === Top navigation measured collapse and shorter buttons ===
   - Menu buttons are ~30% shorter.
   - Buttons are hidden only when measured width requires it.
   - More / ⋯ is the last menu button.
   - Utility/account icons stay justified to the right.
   - Board/card count bar is not made responsive here.
*/
#navigation .nav-more-toggle {
  display: none;
}

#navigation[data-nav-has-hidden="true"] .nav-more-toggle {
  display: inline-flex !important;
}

#navigation button[data-nav-auto-hidden="true"] {
  display: none !important;
}

#navigation.nav-more-open button[data-nav-auto-hidden="true"] {
  display: inline-flex !important;
}

#navigation.nav-more-open {
  flex-wrap: wrap !important;
  row-gap: 8px;
  max-width: calc(100vw - 340px);
}

/* Default top-row discipline */
@media (min-width: 1000px) {
  .gameHeader {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #navigation {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    margin-left: var(--cardtherapy-nav-left-reserve, 0px) !important;
  }

  #navigation button {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 6px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #navigation #nav-more {
    order: 999 !important;
  }

  #manipulation {
    margin-left: auto !important;
    margin-right: 10px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .game-wrapper .lang {
    flex: 0 0 auto !important;
  }
}

/* Laptop / 14-inch class */
@media (min-width: 1000px) and (max-width: 1850px) {
  body:not(.cardtherapy-nav-more-open) .gameHeader {
    height: 96px !important;
    min-height: 96px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation button {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    margin-right: 6px !important;
    font-size: 12.5px !important;
  }

  body:not(.cardtherapy-nav-more-open) #navigation #nav-more {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    max-width: 115px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
  }

  body:not(.cardtherapy-nav-more-open) #manipulation #account_open:after {
    width: 36px !important;
    height: 36px !important;
  }

  body:not(.cardtherapy-nav-more-open) .board-control-bar {
    top: 86px !important;
  }
}

/* Utility/account compact stage */
@media (min-width: 1000px) and (max-width: 1850px) {
  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-right: 38px !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #manipulation #account_open:after {
    right: 0 !important;
    width: 38px !important;
    height: 38px !important;
  }
}

/* More open: temporary expansion is allowed */
body.cardtherapy-nav-more-open .gameHeader {
  height: auto !important;
  min-height: 150px;
  align-items: flex-start !important;
}

body.cardtherapy-nav-more-open #navigation.nav-more-open {
  flex-wrap: wrap !important;
  max-width: min(980px, calc(100vw - 340px));
}

body.cardtherapy-nav-more-open #manipulation {
  align-self: flex-start !important;
  margin-top: 6px !important;
}

body.cardtherapy-nav-more-open .board-control-bar {
  top: 138px;
}

@media (max-width: 1300px) {
  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 190px;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 154px;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 190px;
    height: calc(100% - 190px);
  }
}

@media (max-width: 810px) {
  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 240px;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 214px;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 240px;
    height: calc(100% - 240px);
  }
}


/* === Top navigation left menu right icons shorter buttons ===
   UX rule:
   - Main menu buttons are justified left after the UI toggle.
   - Utility/account/language icons are justified right.
   - More / ⋯ appears only when JS has hidden at least one button.
   - Menu buttons are actually shorter using explicit height.
   - Board/card count bar remains unchanged.
*/
#navigation .nav-more-toggle {
  display: none !important;
}

#navigation[data-nav-has-hidden="true"] .nav-more-toggle {
  display: inline-flex !important;
}

#navigation button[data-nav-auto-hidden="true"] {
  display: none !important;
}

#navigation.nav-more-open button[data-nav-auto-hidden="true"] {
  display: inline-flex !important;
}

#navigation #nav-more {
  order: 999 !important;
}

/* Top-row layout discipline */
@media (min-width: 1000px) {
  .gameHeader {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 96px !important;
    min-height: 96px !important;
    gap: 8px !important;
  }

  #navigation {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: visible !important;
    margin-left: var(--cardtherapy-nav-left-reserve, 0px) !important;
    margin-right: 12px !important;
  }

  #manipulation {
    margin-left: auto !important;
    margin-right: 10px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .game-wrapper .lang {
    flex: 0 0 auto !important;
    margin-left: 4px !important;
  }

  #navigation button {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 5px !important;
    margin-right: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.06 !important;
    white-space: normal !important;
  }

  #navigation #nav-more {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #manipulation button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  #manipulation #account_open {
    max-width: 115px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
  }

  #manipulation #account_open:after {
    width: 36px !important;
    height: 36px !important;
  }

  body:not(.cardtherapy-nav-more-open) .board-control-bar {
    top: 86px !important;
  }
}

/* Slightly tighter button shell on smaller laptop widths */
@media (min-width: 1000px) and (max-width: 1600px) {
  #navigation button {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    font-size: 12px !important;
    margin-right: 5px !important;
  }

  #navigation #nav-more {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
  }

  #manipulation #account_open {
    max-width: 96px !important;
  }
}

/* Compact utility/account only if JS says menu hiding alone was not enough */
@media (min-width: 1000px) {
  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #manipulation #account_open {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-right: 38px !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  body.cardtherapy-nav-collapsed:not(.cardtherapy-nav-more-open) #manipulation #account_open:after {
    right: 0 !important;
    width: 38px !important;
    height: 38px !important;
  }
}

/* More open: temporary expansion/wrapping is allowed */
body.cardtherapy-nav-more-open .gameHeader {
  height: auto !important;
  min-height: 150px !important;
  align-items: flex-start !important;
}

body.cardtherapy-nav-more-open #navigation.nav-more-open {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  row-gap: 8px !important;
  max-width: min(980px, calc(100vw - 340px)) !important;
}

body.cardtherapy-nav-more-open #manipulation {
  align-self: flex-start !important;
  margin-top: 6px !important;
  margin-left: auto !important;
}

body.cardtherapy-nav-more-open .board-control-bar {
  top: 138px !important;
}

@media (max-width: 1300px) {
  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 190px !important;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 154px !important;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 190px !important;
    height: calc(100% - 190px) !important;
  }
}

@media (max-width: 810px) {
  body.cardtherapy-nav-more-open .gameHeader {
    min-height: 240px !important;
  }

  body.cardtherapy-nav-more-open .board-control-bar {
    top: 214px !important;
  }

  body.cardtherapy-nav-more-open #deck-selectors_wrapper {
    top: 240px !important;
    height: calc(100% - 240px) !important;
  }
}