/* Question pictures in the review games (shared/question-media.js). Sized for 1366x768 and a projector: the picture
   takes at most about a third of the screen height, so the prompt and the answers stay on screen. */
.tlg-qmedia { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto 10px; max-width: 100%; }
.tlg-qmedia img { display: block; max-width: min(100%, 520px); max-height: min(32vh, 250px); width: auto; height: auto; object-fit: contain; border-radius: 8px; background: #fff; }
.tlg-qmedia-credit { margin: 4px 0 0; font-size: 16px; line-height: 1.3; opacity: 0.85; text-align: center; overflow-wrap: anywhere; }
.answers--pictures { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tlg-qopt { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.tlg-qopt-img { display: block; max-width: 100%; max-height: min(16vh, 120px); width: auto; height: auto; object-fit: contain; border-radius: 6px; background: #fff; }
.tlg-qopt-caption { font-size: 16px; overflow-wrap: anywhere; }
.tlg-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-height: 640px) { .tlg-qmedia img { max-height: 26vh; } .tlg-qopt-img { max-height: 13vh; } }
/* A question picture AND picture answers: share the height so every answer stays on a 1366x768 screen. */
:is(section, div):has(> .answers--pictures) .tlg-qmedia img { max-height: min(17vh, 130px); }
.answers--pictures .tlg-qopt-img { max-height: min(13vh, 100px); }
/* Dungeon Crawler's battle panel sits under the dungeon view: less room. */
.battle-panel .tlg-qmedia img { max-height: min(20vh, 150px); }
.battle-panel :is(section, div):has(> .answers--pictures) .tlg-qmedia img, .battle-panel .question:has(.answers--pictures) .tlg-qmedia img { max-height: min(11vh, 84px); }
.battle-panel .answers--pictures .tlg-qopt-img { max-height: min(9vh, 70px); }
.battle-panel .tlg-qmedia { margin-bottom: 4px; }