/* Keep the desktop menu composition readable on tablet screens. */
.ttt-setup .pexeso-intro img { width: min(210px, 21cqh, 41.25cqw); }
.ludo-setup .pexeso-intro img { width: min(240px, 25.5cqh, 45cqw); }
@container (max-height: 520px) {
  .ttt-setup .pexeso-intro img { width: min(135px, 16.5cqh, 33.75cqw); }
}
@container (max-width: 500px) {
  .ttt-setup .pexeso-intro img { width: min(105px, 12cqh); }
}
@media (min-width: 701px) and (max-width: 1366px) {
  header {
    --header-badge: clamp(34px, 5vw, 48px);
    padding: 0 2vw;
    gap: 12px;
  }
  .header-actions { margin-left: 0; }
  #home { width: auto; height: auto; gap: 6px; }
  #trophy-icon { gap: 6px; }
  .header-actions > #trophy-icon,
  .header-actions > #lumik-counter { margin-left: 10px; padding-left: 10px; }
  .header-menu-label { display: inline; font-size: clamp(12px, 1.35vw, 18px); }
  #lumik-counter, #lumik-counter.is-compact { font-size: clamp(18px, 2vw, 26px); gap: 6px; }
  .lumik-counter-caption { display: block; font-size: clamp(9px, .95vw, 13px); margin-top: 2px; }
  #lumik-counter .lumik-count::after { content: '×'; }
  header h1 { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; font-size: clamp(20px, 2.5vw, 32px); }
  header .kiosk-title-group { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  header .kiosk-title-group h1 { position: static; transform: none; margin: 0; }
  header .title-rays { display: block; width: .45em; height: 1.2em; }
  #clock { max-width: none; font-size: clamp(12px, 1.5vw, 20px); flex-shrink: 0; flex-wrap: nowrap; }
  .clock-date { white-space: nowrap; }

  main:has(.quiz), main:has(.games-menu) { padding-left: 6vw; padding-right: 6vw; }
  main:has(.quiz) .question h2 { font-size: clamp(17px, 2.1vw, 28px); line-height: 1.16; margin-top: 1.5vh; }
  main:has(.quiz) .answer { font-size: clamp(16px, 2.1vw, 28px); }
  main:has(.quiz) .confirm { font-size: clamp(14px, 1.65vw, 22px); }
  .tile-label, .game-tile-label { font-size: min(24px, 2.35vw, 3.5vh); left: 0; right: 0; text-align: center; white-space: nowrap; font-weight: 800; }
  .tile-label { font-size: calc(min(24px, 2.35vw, 3.5vh) + 2px); }
  .tile .tile-arrow { width: min(16cqh, 14cqw); height: min(16cqh, 14cqw); }
  .game-tile .tile-arrow { width: min(20cqh, 11cqw); height: min(20cqh, 11cqw); }

  .pexeso-setup { padding: 12px; }
  .pexeso-setup .pexeso-intro { overflow-y: auto; padding: 48px 8px 16px; }
  .pexeso-setup .pexeso-intro img { width: min(300px, 35cqh, 62.5cqw); margin-bottom: 8px; }
  .ttt-setup .pexeso-intro img,
  .ludo-setup .pexeso-intro img { width: min(225px, 26.25cqh, 46.875cqw); }
  .pexeso-setup .pexeso-intro h2 { font-size: 30px; margin-top: 6px; }
  .pexeso-setup .pexeso-intro p { font-size: 18px; margin: 4px 0 14px; }
  .pexeso-setup .pexeso-modes { gap: 12px; }
  .pexeso-setup .pexeso-modes button,
  .pexeso-setup .ludo-modes button { font-size: 20px; padding: 12px 20px; }
  .pexeso-setup .pexeso-note { font-size: 13px; margin-top: 16px; }
  .pexeso-setup > .pexeso-back { width: 112px; height: 44px; font-size: 16px; }
  .ttt-setup .ttt-variants { margin-bottom: 12px; gap: 8px; }
  .ttt-setup .ttt-variants button { padding: 8px 14px; }
  .ttt-setup .ttt-variants strong { font-size: 20px; }
  .ttt-setup .ttt-variants small { font-size: 13px; }
  .flags-setup, .counting-setup { --flags-choice-height: 44px; }
  .flags-setup .flags-regions { gap: 6px; margin-bottom: 10px; }
  .flags-setup .flags-times { gap: 8px; margin-bottom: 10px; }
  .flags-setup .flags-times button,
  .counting-setup .flags-times button { padding: 8px 16px; font-size: 20px; }
  .counting-setup .counting-heading img { width: min(300px, 37.5cqh, 62.5cqw); height: clamp(100px, 16.25cqh, 162.5px); }
  .counting-setup .pexeso-intro { gap: 8px; }
  .counting-config { gap: 10px; width: min(100%, 600px); }
  .counting-choices:not(.flags-times) button { width: clamp(100px, 12vw, 130px); font-size: 17px; }
  .counting-custom { margin-top: 8px; gap: 4px; }
  .counting-custom input[type=range] { height: 36px; }
  .counting-config label { font-size: 14px; }
  .flags-player:not(.counting-player) .flags-picture { width: 75%; flex: .75; }
  .flags-player:not(.counting-player) .flags-answers button { min-height: clamp(52.5px, 8.55vh, 165px); }

  /* Four choices fit inside each player's column, including in a two-player game. */
  .counting-response:has(.counting-keypad) { width: 75%; }
  .counting-keypad button { min-height: clamp(48px, 7.5vh, 80px); font-size: clamp(24px, 3vw, 34px); }
  .counting-keypad [data-key=clear] { font-size: clamp(13px, 1.6vw, 18px); }
  .counting-keypad [data-key=enter] { font-size: clamp(18px, 2vw, 24px); }
  .counting-response:has(.flags-answers) { width: 100%; max-width: 100%; align-self: center; }
  .counting-response .flags-answers { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .counting-response .flags-answers button { min-width: 0; min-height: clamp(52.5px, 8.55vh, 165px); padding: 6px 4px; font-size: clamp(18px, 2.2vw, 26px); }
}

/* Center the complete introduction in its panel on every screen size. */
.pexeso-setup .pexeso-intro { padding: 16px; justify-content: safe center; }
.counting-setup .counting-heading { margin-top: 0; }
.counting-setup .counting-note { margin-bottom: 0; }