/* Zoom- og tekstforstørringsvern for spillerflaten.
 *
 * Produksjonsshellen har historisk brukt en fast høyde på game-baren. Når
 * nettleseren eller operativsystemet forstørrer teksten, kan kontrollene gå
 * over flere linjer. Baren må da vokse, og spillflaten må starte under den
 * faktiske (målte) høyden i stedet for under en hardkodet pikselverdi.
 */

:root {
  --game-topbar-rendered-height: var(--shell-topbar-height, 88px);
}

.lobby-back-bar.is-visible {
  height: auto !important;
  min-height: var(--game-topbar-min-height, 44px);
  flex-wrap: wrap;
  overflow: visible;
}

.lobby-back-bar.is-visible :is(.game-bar-left, .game-bar-actions, .game-bar-right) {
  flex-wrap: wrap;
  overflow: visible;
}

/* Tekstknapper får vokse vertikalt når brukerens tekststørrelse økes. Ikoner
 * beholder minimumsmålet fra den ordinære responsive CSS-en. */
.lobby-back-bar.is-visible :is(
  .lobby-back-btn,
  .lobby-balance-chip,
  .lobby-deposit-btn,
  .lobby-user-chip,
  .lobby-logout-btn,
  .lobby-topbar-icon-btn,
  .theme-dd-btn
) {
  height: auto !important;
  min-height: 32px;
  line-height: 1.25;
}

/* ID-en i :has() gjør regelen mer spesifikk enn de spill-/breakpoint-
 * spesifikke top/height-reglene i index.html. */
body:has(#lobby-back-bar.is-visible) :is(#web-game-container, #candy-overlay) {
  top: var(--game-topbar-rendered-height) !important;
  height: calc(100dvh - var(--game-topbar-rendered-height)) !important;
}

@media (max-width: 600px) {
  :root { --game-topbar-min-height: 52px; }

  .lobby-back-bar.is-visible {
    align-content: center;
  }

  .lobby-back-bar.is-visible :is(.game-bar-left, .game-bar-right) {
    min-width: 0;
  }
}