/* Keep card artwork at its original proportions and give the copy room to read. */
#tts-modes { padding: 12px 0; }
#tts-modes .tts-mode-shell {
  width: min(980px, calc(100vw - 40px)); height: auto; min-height: 0;
  grid-template-rows: auto auto auto; gap: 14px; padding: 8px 0;
}
#tts-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
  gap: 16px 24px; align-items: start;
}
#tts-mode-grid .tts-mode-card {
  width: 100%; max-width: 270px; height: auto; aspect-ratio: 680 / 874;
  align-self: start; filter: none;
  transform-origin: center;
}
#tts-modes.tts-cards-in-motion .tts-mode-card { will-change: transform, opacity; }
#tts-mode-grid .tts-mode-card:hover { box-shadow: 0 0 0 2px #d9bb79, 0 8px 22px #0009; }
#tts-mode-grid .tts-mode-card[aria-pressed="true"] { outline-color: #ffe49c; box-shadow: 0 0 22px #f5c96855; }
#tts-mode-grid .tts-card-copy {
  left: 8.5%; right: 8.5%; top: 50.5%; bottom: 6%; box-sizing: border-box;
  justify-content: center; gap: 10px; padding: 8px 7px;
  background: linear-gradient(180deg, #102b42, #081c2e 65%, #061625);
  border-top: 1px solid #b79a6070;
}
#tts-mode-grid .tts-card-copy strong {
  display: block; font: bold 24px/1.08 Georgia, 'Times New Roman', serif; letter-spacing: -.025em;
  color: #ffe4a8; text-wrap: balance; text-shadow: 0 2px 2px #0008;
}
#tts-mode-grid .tts-card-copy small {
  display: block; font: 20px/1.3 Georgia, 'Times New Roman', serif;
  color: #fff5df; text-wrap: balance;
}
#tts-mode-grid .tts-card-status {
  top: 5.5%; bottom: auto; left: auto; right: 9.5%;
  padding: 3px 7px; border: 1px solid #d4b578; border-radius: 3px;
  background: #081b2ef5; color: #ffe5ac; font: bold 12px/1 Georgia, serif;
}
#tts-mode-grid .tts-card-status:empty { display: none; }
#tts-mode-grid .tts-mode-card[aria-pressed="true"] .tts-card-status { background: #f3d58e; color: #081b2e; }
#tts-modes .tts-mode-footer {
  min-height: 0; padding: 10px 16px; gap: 22px; box-sizing: border-box;
  background: #061a2dec; border-top: 1px solid #b79a6070; border-radius: 5px;
}
#tts-modes .tts-mode-footer h3 { font-size: 24px; margin-bottom: 4px; }
#tts-modes .tts-mode-footer p { font-size: 18px; line-height: 1.4; color: #fff5df; }
#tts-modes .tts-mode-footer small { font-size: 17px; line-height: 1.35; margin-top: 6px; color: #ffdc90; }
@media (max-width: 900px) {
  #tts-modes .tts-mode-shell { width: min(650px, calc(100vw - 32px)); }
  #tts-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  #tts-modes .tts-mode-footer { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #tts-play { justify-self: end; }
}
@media (max-width: 570px) {
  #tts-mode-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #tts-mode-grid .tts-mode-card { max-width: 280px; }
}