/* Reserve the financial display's normal line box. Compact amounts may use
   smaller type, but counting money must never move the chart below it. */
.app:not(.view-town) .in-play-account {
  --balance-line-size: clamp(40px, 12vw, 60px);
  grid-template-rows: auto calc(var(--balance-line-size) * 1.05) auto;
}
.app:not(.view-town) .in-play-account .balance { align-self: center; }
@media (max-height: 679px) {
  .app:not(.view-town) .in-play-account { --balance-line-size: 42px; }
}
@media (max-height: 700px) {
  .app.town-discovered:not(.view-town) .in-play-account {
    --balance-line-size: 38px;
    grid-template-rows: auto calc(var(--balance-line-size) * 1.05);
  }
}
.large-type .app:not(.view-town) .in-play-account { --balance-line-size: 2rem; }

/* Long coin and streak names must not widen a grid track beyond the phone. */
.app:not(.view-town), .trade-screen, .trading {
  grid-template-columns: minmax(0, 1fr);
}
.trade-screen, .trading, .leverage-controls { min-width: 0; }

/* Keep full-size call buttons reachable on short phones even when a power
   coin is owned before any income-producing assets. Compact only spacing. */
@media (min-height: 541px) and (max-height: 640px) {
  html:not(.large-type) .app:not(.view-town) { row-gap: 3px; }
  html:not(.large-type) .app:not(.view-town) .trade-screen { gap: 3px; }
  html:not(.large-type) .app:not(.view-town) .trading { gap: 4px; }
  html:not(.large-type) .app:not(.view-town) .result-row { padding-block: 2px; }
  html:not(.large-type) .app:not(.view-town) .result-heading { min-height: 24px; }
  html:not(.large-type) .app:not(.view-town) .leverage-heading { margin-bottom: 4px; }
}

/* Leverage uses one row before and after a streak. */
.leverage-controls, .odds, #call-buttons {
  /* Reduced-motion defaults assign a tiny transition to every element.
     Visibility must switch immediately, including during recovery. */
  transition-property: none;
}
@media (prefers-reduced-motion: reduce) {
  .leverage-controls *, .odds *, #call-buttons * {
    transition-duration: 0s !important;
  }
}
.leverage-heading, .large-type .leverage-heading { flex-wrap: nowrap; }
.leverage-title { flex: 0 0 auto; }
.leverage-heading .streak-badge {
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recovery replaces content inside the same control area. The chart, ledger
   and history retain their positions when the in-play balance reaches zero. */
.trading { position: relative; }
#run-summary { position: absolute; top: 0; left: 0; right: 0; }
#recovery-actions { position: absolute; bottom: 0; left: 0; right: 0; }
.run-ended .leverage-controls,
.run-ended .odds { visibility: hidden; }
.run-ended #call-buttons[hidden] { display: grid !important; visibility: hidden; }
.run-ended #heads[hidden],
.run-ended #tails[hidden] { display: flex !important; visibility: hidden; }