/* v64.39: one geometry for the shell/nav, independent of the selected tab. */
/* v64.40: a visible, shared exit from both result screens. */
.app-shell .reference-screen .reference-result-main {
  height: auto;
  min-height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - var(--spark-top-chrome) - var(--spark-safe-top) - var(--spark-safe-bottom) - 50px);
}
.reference-result-main > .reference-result-back {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px;
  min-height: 44px; max-width: 100%; padding: 8px 12px 8px 7px;
  border: 1px solid #2678a866; border-radius: 12px;
  background: #061526; color: #c7eaff;
  font: 500 16px/20px var(--spark-font-ui); letter-spacing: 0;
  cursor: pointer; position: relative; z-index: 3;
}
.reference-result-back svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reference-result-back:active { background: #10324b; }
.reference-result-back:focus-visible { outline: 2px solid #77deff; outline-offset: 3px; }
:root { --spark-shell-width: 420px; }
html.telegram-host {
  --spark-safe-top: max(env(safe-area-inset-top, 0px), var(--spark-host-safe-top, 0px));
}
html.telegram-host body .app-shell { padding-top: var(--spark-safe-top); }
body .app-shell { width: min(100%, var(--spark-shell-width)); }
body .app-shell #bottomNav {
  left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: min(100%, var(--spark-shell-width));
  height: calc(var(--spark-nav-height) + var(--spark-safe-bottom));
  min-height: calc(var(--spark-nav-height) + var(--spark-safe-bottom));
  transform: none; translate: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border: 0; border-top: 1px solid #2468c63b;
  padding: 8px 14px calc(11px + var(--spark-safe-bottom));
  transition: none; animation: none;
}
body .app-shell #bottomNav button,
body .app-shell #bottomNav button > span { transition: none; animation: none; transform: none; }
/* Border + 8 + 44 + 11 = 64; exactly the reserved navigation height. */
.home-pending-handoff { width: 100%; min-height: 44px; margin-top: 10px; }
@media (max-width: 699px) {
  :root { --spark-shell-width: 100%; }
  body { padding: 0; }
  body .app-shell { margin: 0; border: 0; border-radius: 0; }
}
html.telegram-mobile { --spark-shell-width: 100%; background: #020813; }
html.telegram-mobile body { padding: 0; background: #020813; }
html.telegram-mobile body .app-shell {
  margin: 0; border: 0; border-radius: 0;
  padding-left: max(12px, env(safe-area-inset-left, 0px), var(--spark-host-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px), var(--spark-host-right, 0px));
  min-height: var(--tg-viewport-stable-height, var(--spark-viewport-height));
}
html.telegram-mobile body .app-shell #bottomNav {
  padding-left: max(14px, env(safe-area-inset-left, 0px), var(--spark-host-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px), var(--spark-host-right, 0px));
}
html.telegram-mobile .reference-home-main {
  height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - var(--spark-nav-height) - var(--spark-safe-top) - var(--spark-safe-bottom));
}
html.telegram-mobile .reference-game .reference-turn {
  --turn-height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 46px - var(--spark-safe-top) - var(--spark-safe-bottom));
  min-height: min(420px, var(--turn-height));
}
html.telegram-mobile .reference-result-main {
  height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 50px - var(--spark-safe-top) - var(--spark-safe-bottom));
}
@media (max-height: 740px) {
  html.telegram-mobile :is(.reference-pass,.reference-explosion) .reference-result-main { height: auto; }
}
/* A rotated phone has width for two columns, not a tall portrait stack. */
@media (orientation: landscape) and (max-height: 500px) {
  html.telegram-mobile .reference-game .reference-turn {
    --turn-height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - var(--spark-safe-top) - var(--spark-safe-bottom));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: 44px minmax(0, 1fr); gap: 0 16px;
  }
  html.telegram-mobile .reference-game .reference-chain-head { grid-column: 1; grid-row: 1; min-height: 0; padding: 0; }
  html.telegram-mobile .reference-game .reference-scene-game { grid-column: 1; grid-row: 2; min-height: 0; margin: 0; }
  html.telegram-mobile .reference-game .reference-turn-controls { grid-column: 2; grid-row: 1 / 3; align-content: center; gap: 4px; }
  html.telegram-mobile .reference-game { --game-status-height: 44px; --game-number-size: 28px; --game-action-height: 96px; --game-action-title: 23px; --game-action-icon: 22px; }
  html.telegram-mobile .reference-game .reference-game-note { display: none; }
  html.telegram-mobile .reference-game .reference-action-grid button { padding: 5px; }
  html.telegram-mobile .reference-game .reference-action-grid button > strong { margin: 2px 0 4px; }
  html.telegram-mobile .reference-game .reference-xp-bolt { height: 25px; }
  html.telegram-mobile .reference-game .reference-turn-status { gap: 4px; }
  html.telegram-mobile .reference-game .reference-risk-track { height: 8px; }
}