/* Main-screen composition. Keep this after the legacy layout styles. */
body[data-mode][data-screen=game] .game-summary {
  margin: 0;
  gap: 8px;
  background: #fff;
}
body[data-mode][data-screen=game] .game-summary > div {
  padding: 12px 6px;
  border-radius: 12px;
  background: #f6f6f8;
}
body[data-mode][data-screen=game] .game-summary dt {
  font-size: 12px;
  color: #929096;
}
body[data-mode][data-screen=game] .game-summary dd {
  margin-top: 3px;
  font-size: clamp(12px, 1.2vw, 17px);
  font-weight: 800;
  overflow-wrap: normal;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body[data-mode][data-screen=game] .game-summary > div:last-child dd { color: #a663b6; }
body[data-mode][data-screen=game] .game-latest .section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.game-live-fire { display: inline-block; flex: none; width: 16px; line-height: 1; transform-origin: 50% 80%; }
body[data-mode][data-screen=game] .game-last-player { min-width: 0; }
body[data-mode][data-screen=game] .game-last-player > strong:first-child {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* A dedicated bottom row makes the primary action prominent and centered. */

/* The live bet comes first on phones, above the compact character card. */
body[data-mode=mobile][data-screen=game] {
  --header-height: 54px;
  --mobile-game-nav-height: calc(60px + env(safe-area-inset-bottom));
  --mobile-game-controls-height: 134px;
}
body[data-mode=mobile][data-screen=game] .app-header { height: var(--header-height); padding-inline: 12px; }
body[data-mode=mobile][data-screen=game] .game-page { padding: 8px 12px calc(var(--mobile-game-controls-height) + var(--mobile-game-nav-height) + 16px); }
body[data-mode=mobile][data-screen=game] .primary-heading { min-height: 24px; margin-bottom: 6px; gap: 6px; }
body[data-mode=mobile][data-screen=game] .primary-heading .badge { padding: 4px 7px; font-size: 10px; border-radius: 7px; }
body[data-mode=mobile][data-screen=game] .primary-heading .mvp-status { display: none; }
body[data-mode=mobile][data-screen=game] .primary-heading .text-link { font-size: 11px; }
body[data-mode=mobile][data-screen=game] .game-grid { display: flex; flex-direction: column; gap: 8px; }
body[data-mode=mobile][data-screen=game] .game-side { display: contents; }
body[data-mode=mobile][data-screen=game] .game-latest {
  order: 0;
  padding: 8px 11px;
  border: 1px solid #efedf2;
  border-radius: 12px;
  background: #fff;
}
body[data-mode=mobile][data-screen=game] .game-latest .section-title { font-size: 12px; line-height: 1.25; }
body[data-mode=mobile][data-screen=game] .game-latest-top { align-items: center; gap: 8px; }
body[data-mode=mobile][data-screen=game] .game-latest-top p { padding: 0; margin-top: 4px; }
body[data-mode=mobile][data-screen=game] .game-latest .muted { font-size: 10px; line-height: 1.2; }
body[data-mode=mobile][data-screen=game] .game-last-player { font-size: 11px; gap: 1px; max-width: 52%; }
body[data-mode=mobile][data-screen=game] .game-last-player .game-prize { font-size: 11px; line-height: 1.2; }
body[data-mode=mobile][data-screen=game] .game-prize > small { display: inline; margin-right: 4px; font-size: 8px; }
body[data-mode=mobile][data-screen=game] .game-main { order: 1; }
body[data-mode=mobile][data-screen=game] .game-hero {
  flex: none;
  height: clamp(218px, calc(100svh - var(--header-height) - var(--mobile-game-controls-height) - var(--mobile-game-nav-height) - 180px), 320px);
  padding: 11px 12px 13px;
  border-radius: 14px;
}
body[data-mode=mobile][data-screen=game] .game-main .page-title { flex: none; font-size: 21px; line-height: 1.1; letter-spacing: -.4px; }
body[data-mode=mobile][data-screen=game] .game-subtitle { flex: none; margin-top: 3px; font-size: 11px; line-height: 1.2; }
body[data-mode=mobile][data-screen=game] .game-figure { flex: 1; min-height: 38px; height: 0; margin: 2px auto; width: 100%; }
body[data-mode=mobile][data-screen=game] .game-mascot { width: auto; height: 100%; max-width: 152px; max-height: 152px; }
body[data-mode=mobile][data-screen=game] .game-timer { flex: none; font-size: 25px; line-height: 1.05; }
body[data-mode=mobile][data-screen=game] .game-timer-caption { margin-top: 2px; font-size: 9px; }
body[data-mode=mobile][data-screen=game] .game-turnover { flex: none; font-size: 11px; margin-top: 4px; }
body[data-mode=mobile][data-screen=game] .game-turnover img { width: 13px; height: 13px; }
body[data-mode=mobile][data-screen=game] .game-balance { flex: none; margin-top: 8px; gap: 6px; }
body[data-mode=mobile][data-screen=game] .game-earned > span,
body[data-mode=mobile][data-screen=game] .game-potential > span { font-size: 10px; }
body[data-mode=mobile][data-screen=game] .game-earned > strong,
body[data-mode=mobile][data-screen=game] .game-potential > strong { font-size: 18px; }
body[data-mode=mobile][data-screen=game] .game-balance small { font-size: 9px; }
body[data-mode=mobile][data-screen=game] .game-claim { min-height: 34px; padding: 7px 12px; font-size: 12px; }
body[data-mode=mobile][data-screen=game] .game-progress { flex: none; margin-top: 8px; height: 6px; }
body[data-mode=mobile][data-screen=game] .game-summary { order: 2; margin-top: 4px; gap: 6px; }
body[data-mode=mobile][data-screen=game] .game-summary > div { padding: 8px 4px; border-radius: 10px; }
body[data-mode=mobile][data-screen=game] .game-summary dt { font-size: 10px; }
body[data-mode=mobile][data-screen=game] .game-summary dd { margin-top: 2px; font-size: 12px; }
body[data-mode=mobile][data-screen=game] .game-investments { order: 3; padding: 12px 4px; }
body[data-mode=mobile][data-screen=game] .game-controls { padding: 8px 14px 7px; }
body[data-mode=mobile][data-screen=game] .game-controls .game-deposit { height: 48px; min-height: 48px; border-radius: 12px; }
body[data-mode=mobile][data-screen=game] .game-controls .game-deposit > strong { font-size: 18px; }
body[data-mode=mobile][data-screen=game] .game-controls .game-deposit.is-cooling > strong { font-size: 14px; }

@media (max-height: 740px) {
  body[data-mode=mobile][data-screen=game] .game-subtitle { display: none; }
  body[data-mode=mobile][data-screen=game] .game-main .page-title { font-size: 20px; }
}

/* Stable last-bet card: a background pulse, with the prize in its own row. */
body[data-mode][data-screen=game] .game-latest {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: #f6fbf7;
}
body[data-mode][data-screen=game] .game-latest-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
body[data-mode][data-screen=game] .game-last-player {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  max-width: none;
  min-width: 0;
  gap: 2px;
}
body[data-mode][data-screen=game] .game-prize {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  line-height: 1.25;
}
body[data-mode][data-screen=game] .game-prize > small {
  display: block;
  margin: 0;
  color: #1e1e1e;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}
body[data-mode][data-screen=game] .game-prize-amount {
  display: block;
  min-width: 12ch;
  color: #4baf55;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body[data-mode][data-screen=game] .game-timer-caption:empty { display: none; }

/* Last bet follows the saved Figma composition; color appears only on updates. */
body[data-mode][data-screen=game] .game-latest { background: #fff; padding: 10px 12px; }
body[data-mode][data-screen=game] .game-latest-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px; }
body[data-mode][data-screen=game] .game-latest .section-title { gap: 3px; font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; }
body[data-mode][data-screen=game] .game-latest .game-latest-hint { padding: 0 0 0 19px; margin: 0; color: #888; font-size: 10px; line-height: 14px; }
body[data-mode][data-screen=game] .game-latest-hint br { display: initial; }
body[data-mode][data-screen=game] .game-last-player { align-items: flex-end; text-align: right; gap: 0; font-size: 13px; line-height: 18px; }
body[data-mode][data-screen=game] .game-last-player .muted { font-size: 12px; line-height: 18px; color: #aaa; }
body[data-mode][data-screen=game] .game-prize { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 0; }
body[data-mode][data-screen=game] .game-prize > small { color: #1e1e1e; font-size: 10px; }
body[data-mode][data-screen=game] .game-prize-amount { min-width: 0; font-size: 13px; color: #51b13d; white-space: nowrap; overflow-wrap: normal; }
body[data-mode][data-screen=game] .game-summary > div { background: #f6f6f8; }
body[data-mode][data-screen=game] .game-summary dd,
body[data-mode][data-screen=game] .game-summary > div:last-child dd { color: #1e1e1e; white-space: nowrap; overflow-wrap: normal; }
body[data-mode][data-screen=game] .game-controls .game-award-side { flex-basis: 90px; }
body[data-mode][data-screen=game] .game-controls .game-award-side > small { font-size: 9px; white-space: nowrap; }

/* Compact prize stays beside its amount, under the player and timestamp. */
body[data-mode][data-screen=game] .game-last-player .game-prize {
  display: flex; justify-content: flex-end; align-items: baseline;
  gap: 4px; width: 100%; margin: 0; line-height: 18px; white-space: nowrap;
}
body[data-mode][data-screen=game] .game-last-player .game-prize > small {
  flex: none; margin: 0; font-size: 13px; font-weight: 700; color: #1e1e1e;
}
body[data-mode][data-screen=game] .game-last-player .game-prize-amount {
  flex: none; font-size: 13px; font-weight: 700; line-height: 18px;
}

/* Manual stakes use the round amount; the row has no amount editor. */