:root {
  --rechi-game-header-top: max(12px, env(safe-area-inset-top));
  --rechi-game-header-left: max(16px, calc(env(safe-area-inset-left) + 4px));
  --rechi-game-header-right: calc(max(12px, env(safe-area-inset-right)) + 128px);
  --rechi-game-header-max-width: calc(100vw - var(--rechi-game-header-left) - var(--rechi-game-header-right));
  --rechi-game-header-align: left;
  --rechi-game-header-justify: flex-start;
  --rechi-game-header-items: start;
  --rechi-game-header-margin: 0;
  --rechi-game-header-transform: none;
  --rechi-game-header-width: var(--rechi-game-header-max-width);
}

#game-root[data-rechi-header-mode="center"] {
  --rechi-game-header-align: center;
  --rechi-game-header-justify: center;
  --rechi-game-header-items: center;
  --rechi-game-header-margin: auto;
  --rechi-game-header-transform: translateX(-50%);
}

#game-root[data-rechi-header-mode="center"] [data-rechi-shared-header] {
  width: min(var(--rechi-game-header-max-width), var(--rechi-game-header-preferred-width, 960px)) !important;
}

#game-root [data-rechi-shared-header] {
  position: fixed !important;
  top: var(--rechi-game-header-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--rechi-game-header-left) !important;
  width: var(--rechi-game-header-width) !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: var(--rechi-game-header-max-width) !important;
  margin: 0 !important;
  transform: var(--rechi-game-header-transform) !important;
  box-sizing: border-box !important;
  text-align: var(--rechi-game-header-align) !important;
  justify-content: var(--rechi-game-header-justify) !important;
  justify-items: var(--rechi-game-header-items) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

#game-root [data-rechi-header-space] {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  pointer-events: none;
}

#game-root [data-rechi-shared-header] > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

#game-root [data-rechi-shared-header] :is(h1, h2, h3, p, strong, span, small, div) {
  text-align: var(--rechi-game-header-align) !important;
}

#game-root [data-rechi-shared-header] :is(h1, h2, h3, p) {
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: var(--rechi-game-header-margin) !important;
  justify-items: var(--rechi-game-header-items) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

#game-root [data-rechi-header-column] {
  align-items: var(--rechi-game-header-items) !important;
}

#game-root :is(.bubble-hud, .form-hint) { --rechi-game-header-preferred-width: 620px; }
#game-root :is(.goose-turn, .adventure-turn, .snakes-turn) { --rechi-game-header-preferred-width: 470px; }
#game-root :is(.memory-heading, .memory-slog-heading) { --rechi-game-header-preferred-width: 720px; }
#game-root .magic-flashlight-heading { --rechi-game-header-preferred-width: 860px; }

#game-root :is(.memory-heading .memory-progress, .memory-slog-heading .memory-slog-progress) {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  margin: 8px 0 0 8px !important;
  vertical-align: middle;
}

#game-root .bubble-hud :is(.bubble-hud__score, .bubble-hud__streak) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}