html:has(body.wonder-playing),
body.wonder-playing {
  width: 100%;
  height: var(--wonder-vh, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body:not(.wonder-playing) .game-shell {
  left: 50% !important;
  width: 390px !important;
  min-width: 390px !important;
  max-width: 390px !important;
  height: calc(390px * 16 / 9) !important;
  min-height: calc(390px * 16 / 9) !important;
  max-height: calc(390px * 16 / 9) !important;
  margin: 0 !important;
}

body:not(.wonder-playing):not(.wonder-stage-select) .wonder-main-flow-slot {
  position: relative;
  width: var(--wonder-menu-rendered-width, 390px);
  height: var(--wonder-menu-rendered-height, calc(390px * 16 / 9));
  margin: 0 auto;
}

body:not(.wonder-playing):not(.wonder-stage-select) .game-shell {
  position: absolute !important;
  top: 0 !important;
  transform: translateX(-50%) scale(var(--wonder-shell-scale, 1)) !important;
  transform-origin: top center !important;
}

body:not(.wonder-playing):not(.wonder-stage-select) .wonder-main {
  grid-template-rows: 54px 374px 52px;
  align-content: start;
}

body:not(.wonder-playing):not(.wonder-stage-select) .wonder-main-cover {
  width: 374px;
  min-width: 374px;
  max-width: 374px;
  height: 374px;
  min-height: 374px;
  max-height: 374px;
  object-fit: cover;
  object-position: center top;
}

body.wonder-stage-select:not(.wonder-playing) .game-shell {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) scale(var(--wonder-shell-scale, 1)) !important;
  transform-origin: bottom center !important;
}

body.wonder-playing .game-shell[data-battle-shell] {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 390px !important;
  min-width: 390px !important;
  max-width: 390px !important;
  height: 788px !important;
  min-height: 788px !important;
  max-height: 788px !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: translateX(-50%) scale(var(--wonder-battle-scale, 1)) !important;
  transform-origin: bottom center !important;
  background: #12151d;
}

body.wonder-playing #game {
  position: absolute;
  inset: 0;
  width: 390px;
  height: 788px;
  aspect-ratio: 390 / 788;
}

body.wonder-playing #game:focus-visible {
  outline: 4px solid #ffe27a;
  outline-offset: -6px;
}

body.wonder-playing #pausePanel :is(button, select):focus-visible {
  outline: 4px solid #ffe27a;
  outline-offset: 2px;
}

body.wonder-playing .battle-hud {
  right: 64px;
  left: 64px;
}

body.wonder-playing .overlay.settlement-screen {
  gap: 10px;
  padding: 18px 16px;
}

body.wonder-playing .overlay.settlement-screen #overlayText,
body.wonder-playing .overlay.settlement-screen .menu-content {
  width: 358px;
}

body.wonder-playing .overlay.settlement-screen .menu-content {
  max-height: 692px;
}

#levelGrid {
  cursor: grab;
}

#levelGrid.is-mouse-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none !important;
  user-select: none;
}

#levelGrid img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.wonder-stage-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}