/* Uses the approved readable-panel and button slices, not a stretched screen. */
.game-confirmation {
  color: var(--ink);
  font: inherit;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: clamp(24px, 5vw, 40px);
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper) var(--ui-panel-readable) center / 105.34% 129.42% no-repeat;
  box-shadow: 8px 9px 0 rgba(5, 29, 37, .55);
  overflow: auto;
  overflow-wrap: anywhere;
}
.game-confirmation-backdrop { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 16px; background: rgba(4, 27, 36, .8); }
.game-confirmation-backdrop > .game-confirmation { margin: 0; }
.game-confirmation h2 { margin: 0 0 16px; font-size: clamp(22px, 4vw, 28px); line-height: 1.3; }
.game-confirmation p { margin: 0; font-size: 17px; line-height: 1.7; }
.game-confirmation-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.game-confirmation-actions .action-button { flex: 1 1 150px; min-height: 52px; min-width: 0; margin: 0; font-size: 17px; white-space: normal; }
.game-confirmation button:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
@media (max-height: 420px) {
  .game-confirmation { padding: 20px 26px; }
  .game-confirmation h2 { margin-bottom: 10px; }
  .game-confirmation-actions { margin-top: 16px; }
}