html:has(body.wp-logical-battle-active),
body.wp-logical-battle-active {
  width: 100%;
  height: var(--wp-battle-viewport-height, 100dvh);
  min-height: 0 !important;
  background-color: var(--wp-battle-letterbox-color, #061712) !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.wp-logical-battle-active [data-wp-logical-battle-canvas] {
  position: fixed !important;
  inset: auto !important;
  top: var(--wp-battle-canvas-top, 0px) !important;
  left: 50% !important;
  width: var(--wp-battle-logical-width, 390px) !important;
  min-width: var(--wp-battle-logical-width, 390px) !important;
  max-width: var(--wp-battle-logical-width, 390px) !important;
  height: var(--wp-battle-logical-height, 788px) !important;
  min-height: var(--wp-battle-logical-height, 788px) !important;
  max-height: var(--wp-battle-logical-height, 788px) !important;
  margin: 0 !important;
  transform: translateX(-50%) scale(var(--wp-battle-canvas-scale, 1)) !important;
  transform-origin: top center !important;
  overflow: hidden !important;
}

body.wp-logical-battle-active :is(
  .battle-ad-reserve,
  .battle-ad,
  .ad-reserve,
  .result-ad-reserve,
  #battleAdReserve,
  #battleAd
)[data-wp-battle-physical-reserve] {
  position: fixed !important;
  z-index: 49 !important;
  inset: auto auto 0 50% !important;
  display: block !important;
  width: var(--wp-battle-canvas-rendered-width, 100vw) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

/* Keep Garden Tiles on its portrait logical tracks in a short physical viewport. */
body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .garden-game[data-wp-logical-battle-canvas] {
  padding: 6px !important;
  grid-template-rows: 54px minmax(0, 1fr) !important;
  gap: 5px !important;
}

body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .statusbar {
  grid-template-columns: 44px repeat(3, minmax(0, 1fr)) !important;
  min-height: 54px !important;
  gap: 5px !important;
}

body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .statusbar div {
  height: 54px !important;
  min-height: 54px !important;
  padding: 5px 7px !important;
}

body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .statusbar span { font-size: 10px !important; line-height: 13px !important; }
body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .statusbar strong { font-size: 18px !important; line-height: 20px !important; }
body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .play-return { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; font-size: 22px !important; }
body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .board-panel { grid-template-rows: minmax(0, 1fr) 36px !important; gap: 5px !important; }
body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .tile-board { width: min(100%, calc(670px * var(--board-aspect, 1))) !important; padding: 6px !important; gap: 5px !important; }
body.wp-logical-battle-active.garden-playing.garden-expanded-canvas .message { height: 36px !important; min-height: 36px !important; font-size: 13px !important; line-height: 17px !important; }

/* The quiz keeps one portrait composition; a short viewport scales it as a unit. */
body.wp-logical-battle-active.quiz-playing .animal-game[data-wp-logical-battle-canvas] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 38px minmax(0, 1fr) 120px 34px !important;
  gap: 6px !important;
  padding: 8px !important;
}

body.wp-logical-battle-active.quiz-playing .level-line { grid-column: 1 !important; grid-row: 1 !important; }
body.wp-logical-battle-active.quiz-playing .quiz-stage { grid-column: 1 !important; grid-row: 2 !important; }
body.wp-logical-battle-active.quiz-playing .choice-grid { grid-column: 1 !important; grid-row: 3 !important; align-content: stretch !important; }
body.wp-logical-battle-active.quiz-playing .feedback { grid-column: 1 !important; grid-row: 4 !important; }
body.wp-logical-battle-active.quiz-playing .animal-card img { width: 190px !important; height: min(100%, 190px) !important; }

/* Lunchbox Battle reserves a real HUD slot for Back; controls never overlap boxes. */
body.wp-logical-battle-active.lunch-playing .game-hud {
  flex: 0 0 70px !important;
  min-height: 70px !important;
  margin-left: 0 !important;
  grid-template-columns: 48px 1.2fr .9fr .9fr !important;
  gap: 8px !important;
}

body.wp-logical-battle-active.lunch-playing .battle-return {
  position: static !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  align-self: center !important;
}

body.wp-logical-battle-active.lunch-playing .game-play-content { grid-template-rows: 250px minmax(0, 1fr) 64px !important; gap: 8px !important; }
body.wp-logical-battle-active.lunch-playing .lunchboxes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
body.wp-logical-battle-active.lunch-playing .lunchbox { min-height: 76px !important; }
body.wp-logical-battle-active.lunch-playing .food-card { width: 172px !important; min-width: 172px !important; height: 172px !important; min-height: 172px !important; }

/* Guard Yard keeps a compact defense board instead of stretching lanes to the viewport height. */
body.wp-logical-battle-active.guard-yard-playing .fixed-game-shell[data-wp-logical-battle-canvas] {
  padding: 6px !important;
  grid-template-rows: 48px 26px 78px 240px 20px !important;
  gap: 4px !important;
  border-width: 3px !important;
  border-radius: 16px !important;
}

/* Rune Tactics uses one portrait logical composition; physical landscape letterboxes it. */
body.wp-logical-battle-active.is-rune-playing .topbar {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 382px !important;
  height: 48px !important;
  padding: 4px !important;
  transform: none !important;
}

body.wp-logical-battle-active.is-rune-playing #gamePanel.game-panel {
  position: absolute !important;
  inset: 50px auto auto 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) 310px !important;
  gap: 6px !important;
  width: 382px !important;
  height: 730px !important;
  padding: 6px !important;
  transform: none !important;
}

body.wp-logical-battle-active.is-rune-playing .game-panel > .hud { grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.wp-logical-battle-active.is-rune-playing .battle-shell { grid-column: 1 !important; grid-row: 2 !important; width: min(100%, calc((100cqh - 250px) * 4 / 3)) !important; align-self: center !important; }
body.wp-logical-battle-active.is-rune-playing .battle-info { grid-column: 1 !important; grid-row: 3 !important; grid-template-rows: 64px minmax(0, 1fr) 48px 34px !important; gap: 6px !important; padding: 8px !important; }
body.wp-logical-battle-active.is-rune-playing .turn-roster { max-height: 64px !important; }
body.wp-logical-battle-active.is-rune-playing .actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; height: 48px !important; gap: 6px !important; }
body.wp-logical-battle-active.is-rune-playing .battle-log { height: 34px !important; min-height: 34px !important; max-height: 34px !important; }

/* Reef Fisher retains the portrait HUD, scene, catch and tension tracks. */
body.wp-logical-battle-active.reef-fisher-playing .battle-shell[data-wp-logical-battle-canvas] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) 64px 176px !important;
  gap: 6px !important;
  padding: 8px !important;
}
body.wp-logical-battle-active.reef-fisher-playing .battle-shell > :is(.hud-row, .play-frame, .catch-hud, .tension-panel) { position: static !important; inset: auto !important; margin: 0 !important; }
body.wp-logical-battle-active.reef-fisher-playing .battle-shell > .hud-row { grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 48px minmax(0, 1fr) 88px 88px !important; grid-template-rows: 56px !important; width: 100% !important; height: 56px !important; }
body.wp-logical-battle-active.reef-fisher-playing .battle-shell > .play-frame { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; height: 100% !important; aspect-ratio: var(--reef-arena-ratio, 16 / 9) !important; align-self: stretch !important; }
body.wp-logical-battle-active.reef-fisher-playing .battle-shell > .play-frame > canvas { width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: var(--reef-arena-ratio, 16 / 9) !important; }
body.wp-logical-battle-active.reef-fisher-playing .battle-shell > .catch-hud { grid-column: 1 !important; grid-row: 3 !important; width: 100% !important; height: 64px !important; }
body.wp-logical-battle-active.reef-fisher-playing .battle-shell > .tension-panel { grid-column: 1 !important; grid-row: 4 !important; width: 100% !important; height: 176px !important; align-self: stretch !important; }

/* Relic Hunters keeps arena and inventory stacked in its portrait Canvas. */
body.wp-logical-battle-active.relic-playing .game-layout[data-wp-logical-battle-canvas] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 555px 165px !important;
  gap: 6px !important;
  padding: 48px 6px 6px !important;
}
body.wp-logical-battle-active.relic-playing .arena-viewport { grid-column: 1 !important; grid-row: 1 !important; grid-template-rows: 96px minmax(0, 1fr) !important; width: 100% !important; }
body.wp-logical-battle-active.relic-playing .arena-hud { grid-template-columns: initial !important; }
body.wp-logical-battle-active.relic-playing .canvas-container { width: 346px !important; max-width: 100% !important; aspect-ratio: 4 / 5 !important; align-self: end !important; justify-self: center !important; }
body.wp-logical-battle-active.relic-playing .canvas-container canvas { width: 100% !important; height: 100% !important; aspect-ratio: 4 / 5 !important; }
body.wp-logical-battle-active.relic-playing .inventory-sidebar { grid-column: 1 !important; grid-row: 2 !important; grid-template-rows: auto 96px minmax(0, 1fr) !important; width: 100% !important; }

/* Crystal Survivor gives the arena the remaining portrait space below its compact HUD. */
body.wp-logical-battle-active.crystal-playing #gamePanel.game-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 54px 30px auto 34px !important;
  gap: 6px !important;
  padding: 8px !important;
  align-content: start !important;
}
body.wp-logical-battle-active.crystal-playing .hud-row { grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 44px repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 54px !important; gap: 4px !important; }
body.wp-logical-battle-active.crystal-playing .hud-row .play-return { width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; }
body.wp-logical-battle-active.crystal-playing .xp-row { grid-column: 1 !important; grid-row: 2 !important; }
body.wp-logical-battle-active.crystal-playing .canvas-wrap { grid-column: 1 !important; grid-row: 3 !important; width: 100% !important; height: auto !important; aspect-ratio: 32 / 55 !important; align-self: center !important; justify-self: center !important; }
body.wp-logical-battle-active.crystal-playing .hint-text { grid-column: 1 !important; grid-row: 4 !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 2px 4px !important; overflow: hidden !important; white-space: normal !important; line-height: 1.15 !important; }

/* Gearpack never turns the logical portrait Canvas into a physical-landscape layout. */
body.wp-logical-battle-active.is-game-playing .battle-canvas[data-wp-logical-battle-canvas] {
  --cell: 27px;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 50px 38px minmax(120px, 34%) minmax(0, 1fr) 30px 52px !important;
  gap: 4px !important;
  padding: 4px !important;
}
body.wp-logical-battle-active.is-game-playing .battle-header { grid-column: 1 !important; grid-row: 1 !important; }
body.wp-logical-battle-active.is-game-playing .objective-row { grid-column: 1 !important; grid-row: 2 !important; }
body.wp-logical-battle-active.is-game-playing .encounter-scene { grid-column: 1 !important; grid-row: 3 !important; }
body.wp-logical-battle-active.is-game-playing .pack-panel { grid-column: 1 !important; grid-row: 4 !important; }
body.wp-logical-battle-active.is-game-playing .pack-grid { align-self: start !important; }
body.wp-logical-battle-active.is-game-playing .feedback-row { grid-column: 1 !important; grid-row: 5 !important; }
body.wp-logical-battle-active.is-game-playing .battle-actions { grid-column: 1 !important; grid-row: 6 !important; grid-template-columns: 92px 92px minmax(0, 1fr) !important; }

/* Hidden Safari keeps its seek scene above the fixed target tray. */
body.wp-logical-battle-active.safari-playing #playPanel.play-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 40px minmax(0, 1fr) 160px !important;
  grid-template-areas: none !important;
  gap: 6px !important;
}
body.wp-logical-battle-active.safari-playing .play-head { grid-area: auto !important; grid-column: 1 !important; grid-row: 1 !important; }
body.wp-logical-battle-active.safari-playing .scene { grid-area: auto !important; grid-column: 1 !important; grid-row: 2 !important; width: min(100%, 430px) !important; height: auto !important; max-height: 100% !important; aspect-ratio: 1 / 1 !important; align-self: center !important; justify-self: center !important; }
body.wp-logical-battle-active.safari-playing .target-panel { grid-area: auto !important; grid-column: 1 !important; grid-row: 3 !important; width: 100% !important; height: 160px !important; min-height: 160px !important; padding: 6px !important; gap: 5px !important; }
body.wp-logical-battle-active.safari-playing .target-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; }
body.wp-logical-battle-active.safari-playing .target-chip { grid-template-columns: 32px minmax(0, 1fr) !important; min-height: 54px !important; height: 54px !important; padding: 4px !important; gap: 4px !important; }
body.wp-logical-battle-active.safari-playing .target-chip b { width: 32px !important; height: 32px !important; }

/* Moonlight Heist keeps controls below the play field at every physical ratio. */
body.wp-logical-battle-active .battle-canvas[data-wp-logical-battle-canvas]:has(.play-field) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 44px 34px minmax(0, 1fr) 62px !important;
  grid-template-areas: none !important;
  gap: 8px !important;
  padding: 8px !important;
}
body.wp-logical-battle-active .battle-canvas[data-wp-logical-battle-canvas] > .battle-header:has(+ .alert-row) { grid-area: auto !important; grid-column: 1 !important; grid-row: 1 !important; }
body.wp-logical-battle-active .battle-canvas[data-wp-logical-battle-canvas] > .alert-row { grid-area: auto !important; grid-column: 1 !important; grid-row: 2 !important; }
body.wp-logical-battle-active .battle-canvas[data-wp-logical-battle-canvas] > .play-field { grid-area: auto !important; grid-column: 1 !important; grid-row: 3 !important; }
body.wp-logical-battle-active .battle-canvas[data-wp-logical-battle-canvas] > .battle-controls { grid-area: auto !important; grid-column: 1 !important; grid-row: 4 !important; width: 100% !important; height: 62px !important; grid-template-columns: minmax(0, 1fr) 124px !important; grid-template-rows: 62px !important; }

/* Orb Fortress uses a tall phone arena and a wide landscape arena without stretching either coordinate system. */
body.wp-logical-battle-active.orb-fortress-playing #gamePanel.game-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 54px minmax(0, 1fr) 38px !important;
  gap: 6px !important;
  padding: 8px !important;
}
body.wp-logical-battle-active.orb-fortress-playing .hud-row { grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 48px repeat(3, minmax(0, 1fr)) !important; grid-template-rows: 54px !important; gap: 5px !important; }
body.wp-logical-battle-active.orb-fortress-playing .hud-row .play-return { width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; }
body.wp-logical-battle-active.orb-fortress-playing #gameCanvas { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; height: auto !important; max-height: 100% !important; aspect-ratio: var(--orb-arena-ratio, 16 / 9) !important; align-self: center !important; justify-self: center !important; }
body.wp-logical-battle-active.orb-fortress-playing .hint { grid-column: 1 !important; grid-row: 3 !important; width: 100% !important; height: 38px !important; min-height: 38px !important; align-self: stretch !important; white-space: nowrap !important; }

/* Zoo Battle uses the same compact return slot on every viewport. */
body.wp-logical-battle-active.zoo-playing #backToMenuBtn.play-return {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
}
body.wp-logical-battle-active.zoo-playing #gamePanel.game-panel > .zoo-toast {
  position: absolute !important;
  top: 210px !important;
  left: 50% !important;
  width: max-content !important;
  max-width: 320px !important;
  font-size: 14px !important;
  line-height: 18px !important;
  transform: translateX(-50%) !important;
  animation: wp-zoo-toast-fade 1.3s ease forwards !important;
}

@keyframes wp-zoo-toast-fade {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

/* Beast Deck keeps the approved phone stack even with a short physical viewport. */
body.wp-logical-battle-active.beast-deck-playing #gamePanel.game-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 86px minmax(0, 1fr) 238px !important;
  gap: 6px !important;
  padding: 8px !important;
}
body.wp-logical-battle-active.beast-deck-playing .hud-row { grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto !important; gap: 6px !important; padding: 8px !important; }
body.wp-logical-battle-active.beast-deck-playing .hud-row .soft-btn { grid-column: 1 / -1 !important; width: 48px !important; min-width: 48px !important; height: 34px !important; min-height: 34px !important; }
body.wp-logical-battle-active.beast-deck-playing .battlefield { grid-column: 1 !important; grid-row: 2 !important; padding: 10px !important; gap: 8px !important; min-height: 0 !important; }
body.wp-logical-battle-active.beast-deck-playing .action-area { grid-column: 1 !important; grid-row: 3 !important; width: 100% !important; min-width: 100% !important; height: 238px !important; min-height: 238px !important; grid-template-rows: 184px 48px !important; gap: 6px !important; }
body.wp-logical-battle-active.beast-deck-playing .hand-row { width: 100% !important; min-width: 100% !important; height: 184px !important; min-height: 184px !important; max-height: 184px !important; }
body.wp-logical-battle-active.beast-deck-playing .combat-feedback.damage { top: 22% !important; }

/* Beast Tactician keeps the HUD, arena/build stack and commands in fixed tracks. */
body.wp-logical-battle-active.guardian-playing #gamePanel.game-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 96px minmax(0, 1fr) 54px !important;
  gap: 6px !important;
  padding: 8px !important;
}
body.wp-logical-battle-active.guardian-playing .hud-row { grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: 48px repeat(4, 62px) 48px !important; grid-template-rows: auto !important; gap: initial !important; }
body.wp-logical-battle-active.guardian-playing .wave-intel-panel { grid-column: 1 / -1 !important; grid-row: 2 !important; min-width: 0 !important; }
body.wp-logical-battle-active.guardian-playing .battle-layout { grid-column: 1 !important; grid-row: 2 !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: initial !important; }
body.wp-logical-battle-active.guardian-playing .canvas-shell { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; place-self: center !important; }
body.wp-logical-battle-active.guardian-playing .build-panel { grid-column: 1 !important; grid-row: 2 !important; }
body.wp-logical-battle-active.guardian-playing .command-row { grid-column: 1 !important; grid-row: 3 !important; grid-template-columns: 110px repeat(3, 77px) !important; grid-template-rows: auto !important; width: 366px !important; max-width: 100% !important; }

/* Campus Dash is a fixed portrait runner Canvas; landscape only letterboxes it. */
body.wp-logical-battle-active.dash-playing .dash-game[data-wp-logical-battle-canvas] {
  padding: 6px 8px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 44px 58px minmax(0, 1fr) !important;
  gap: 6px !important;
}
body.wp-logical-battle-active.dash-playing .hud { grid-column: 1 !important; grid-row: 2 !important; }
body.wp-logical-battle-active.dash-playing .hud #battleBackBtn { width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; font-size: 22px !important; }
body.wp-logical-battle-active.dash-playing .canvas-wrap { grid-column: 1 !important; grid-row: 3 !important; width: min(100%, 370px) !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; aspect-ratio: 3 / 4 !important; align-self: center !important; justify-self: center !important; }

/* Shape Train Battle owns its header; the Main topbar must not remain behind it. */
body.wp-logical-battle-active.shape-playing .topbar { display: none !important; }

/* Merge Tower uses one set of logical tracks and padding on phone and desktop. */
body.wp-logical-battle-active.fruit-playing .fixed-game-shell[data-wp-logical-battle-canvas] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 42px 58px minmax(0, 1fr) 36px !important;
  grid-template-areas: "score" "goal" "board" "controls" !important;
  gap: 3px !important;
  padding: 5px 6px !important;
  border-width: 0 !important;
}
body.wp-logical-battle-active.fruit-playing .play-return { top: 5px !important; left: 6px !important; width: 48px !important; height: 48px !important; }
body.wp-logical-battle-active.fruit-playing .board-shell { grid-column: 1 !important; grid-row: 3 !important; }
body.wp-logical-battle-active.fruit-playing .controls { grid-column: 1 !important; grid-row: 4 !important; height: 36px !important; min-height: 36px !important; }
body.wp-logical-battle-active.fruit-playing .controls button { height: 34px !important; min-height: 34px !important; }

/* Bubble Bakery uses the full phone Canvas with only a compact safe inset. */
body.wp-logical-battle-active.is-bakery-playing #playPanel.play-panel[data-wp-logical-battle-canvas] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 44px 78px minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 4px !important;
}

/* Result content remains reachable above the external 56px reserve on short landscape screens. */
@media (orientation: landscape) and (max-height: 460px) {
  body .result-panel:not(.hidden):not(.is-hidden),
  body .result-screen:not(.hidden):not(.is-hidden) {
    max-height: calc(var(--wp-mobile-vh, 100dvh) - 56px) !important;
    align-content: start !important;
    align-items: start !important;
    justify-content: center !important;
    place-items: start center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  body .result-panel:not(.hidden):not(.is-hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }
  body .result-panel:not(.hidden):not(.is-hidden) > .result-card,
  body .result-screen:not(.hidden):not(.is-hidden) > .result-card {
    flex: 0 0 auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* Viewport units must not make result cards wider than their logical Canvas. */
body.fruit-playing #resultPanel .result-card,
body.garden-playing #resultPanel .result-card {
  width: calc(100% - 24px) !important;
  max-width: 460px !important;
  min-width: 0 !important;
}
body.fruit-playing #resultPanel .result-actions,
body.garden-playing #resultPanel .result-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-width: 0 !important;
}
body.fruit-playing #resultPanel .result-actions > *,
body.garden-playing #resultPanel .result-actions > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}