@media (orientation: landscape) and (pointer: coarse) and (max-width: 950px) and (max-height: 460px) {
  body {
    overflow: hidden;
  }

  button[aria-label="Seite aktualisieren"] {
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }

  .selection-screen {
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .selection-art {
    width: min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px), 177.92svh);
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  }

  .art-choice {
    border-radius: 10px;
  }

  .game-screen {
    padding:
      max(10px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    align-items: stretch;
  }

  .game-panel {
    width: min(100%, 1000px);
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: minmax(210px, 36%) minmax(0, 1fr);
    grid-template-areas:
      "back back"
      "logo content";
    gap: 12px 20px;
    align-items: center;
    text-align: left;
    overflow: auto;
  }

  .back-button {
    grid-area: back;
    margin: 0;
    font-size: 12px;
  }

  .game-logo {
    grid-area: logo;
    width: 100%;
    max-width: 300px;
    margin: 0;
  }

  .game-panel > :not(.back-button):not(.game-logo) {
    grid-column: 2;
  }

  .game-kicker {
    font-size: 10px;
  }

  .game-panel h1 {
    margin: 4px 0 8px;
    font-size: clamp(32px, 5vw, 46px);
  }

  .game-intro {
    max-width: none;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
  }

  .coming-soon {
    min-height: 38px;
    padding: 0 16px;
    font-size: 11px;
  }

  .royal-menu {
    width: 100%;
    gap: 10px;
  }

  .royal-button {
    min-height: 48px;
    padding: 8px 28px;
    font-size: clamp(15px, 2.3vw, 19px);
  }

  .royal-button:before,
  .royal-button:after {
    font-size: 20px;
  }

  .modal-backdrop {
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    align-items: stretch;
  }

  .player-dialog,
  .ranking-dialog,
  .round-score-dialog,
  .final-ranking-dialog,
  .end-game-dialog,
  .app-error-dialog,
  .picker-dialog {
    width: min(100%, 980px);
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    padding: 18px 20px;
  }

  .player-dialog h2 {
    margin-bottom: 16px;
    font-size: clamp(26px, 4vw, 34px);
  }

  .dialog-actions,
  .round-score-dialog .dialog-actions,
  .ranking-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dialog-field-row,
  .dialog-dual-fields,
  .dialog-date-grid,
  .final-awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .play-surface {
    overflow: auto;
  }

  .play-brand img {
    width: min(160px, 18vw);
  }

  .role-panel {
    width: min(220px, 24vw);
  }

  .game-timer {
    width: min(240px, 26vw);
    padding: 12px 16px 14px;
  }

  .right-game-stack {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 24vw);
  }

  .round-playing-card {
    width: clamp(210px, 22vw, 280px);
    min-height: clamp(290px, 30vw, 390px);
  }

  .round-playing-card > i {
    font-size: clamp(180px, 20vw, 250px);
  }

  .round-playing-card > span,
  .round-playing-card > b {
    font-size: clamp(32px, 3.4vw, 42px);
  }

  .round-end-button {
    width: min(240px, 24vw);
    min-height: 54px;
    font-size: 17px;
  }

  .live-ranking {
    width: min(330px, 31vw);
    max-height: min(52svh, 280px);
    padding: 16px;
  }

  .live-ranking h2 {
    font-size: 24px;
  }

  .live-ranking li {
    min-height: 46px;
    padding: 4px 6px;
  }

  .live-ranking li > strong {
    font-size: 16px;
  }

  .live-ranking li > b {
    font-size: 20px;
  }

  .live-ranking li > span {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .round-clock-face {
    width: 102px;
    height: 102px;
  }

  .round-clock-face > i {
    transform-origin: 50% 36px;
  }

  .round-clock-face .clock-hand.clock-hour {
    height: 22px;
  }

  .round-clock-face .clock-hand.clock-minute {
    height: 32px;
  }

  .round-clock-face .clock-hand.clock-second {
    height: 35px;
  }

  .round-clock-digital {
    font-size: 20px;
  }

  .ranking-stats-layout {
    width: calc(100% + 280px);
  }

  .ranking-stats-column {
    width: 122px;
    gap: 10px;
  }

  .ranking-stats-card {
    padding: 12px 10px;
    border-radius: 16px;
  }

  .ranking-stats-card h3 {
    font-size: 0.76rem;
  }

  .ranking-stats-card strong {
    font-size: 0.95rem;
  }

  .ranking-stats-card p,
  .ranking-stats-card small {
    font-size: 0.7rem;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (max-width: 900px) and (max-height: 410px) {
  .play-surface {
    grid-template-columns: minmax(148px, 18vw) minmax(0, 1fr) minmax(170px, 20vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .play-brand {
    align-self: start;
  }

  .play-brand img {
    width: min(116px, 14vw);
  }

  .antique-clock {
    transform: scale(0.8);
    transform-origin: top center;
  }

  .role-panel {
    width: min(168px, 20vw);
    padding: 12px 10px;
    font-size: 12px;
  }

  .role-panel h2,
  .role-panel h3 {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .game-timer {
    width: min(176px, 20vw);
    padding: 10px 10px 12px;
  }

  .right-game-stack {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 20vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px 10px;
  }

  .right-game-stack .round-center {
    align-self: center;
  }

  .round-playing-card {
    width: clamp(152px, 18vw, 210px);
    min-height: clamp(214px, 24vw, 294px);
    border-width: 7px;
    border-radius: 16px;
    box-shadow:
      inset 0 0 20px #fff4cf55,
      inset 0 0 18px #5a2d0828,
      0 12px 28px #00000082,
      0 0 18px #dfa83228;
  }

  .round-playing-card:before {
    inset: 7px;
    border-radius: 10px;
  }

  .round-playing-card > span,
  .round-playing-card > b {
    font-size: clamp(22px, 2.4vw, 30px);
  }

  .round-playing-card > span {
    top: 10px;
    left: 12px;
  }

  .round-playing-card > b {
    right: 12px;
    bottom: 10px;
  }

  .round-playing-card > i {
    top: 37%;
    font-size: clamp(126px, 14vw, 180px);
    line-height: 0.76;
  }

  .round-playing-card > i.is-face-low {
    top: calc(37% + 1cm);
  }

  .round-end-button {
    width: min(176px, 20vw);
    min-height: 42px;
    padding: 6px 14px;
    font-size: 14px;
  }

  .live-ranking {
    width: min(232px, 27vw);
    max-height: min(44svh, 176px);
    padding: 10px 10px 8px;
    border-radius: 14px;
  }

  .live-ranking-heading {
    min-height: 24px;
    margin-bottom: 7px;
  }

  .live-ranking h2 {
    font-size: 16px;
  }

  .live-ranking ol {
    gap: 3px;
  }

  .live-ranking li {
    grid-template-columns: 22px 1fr 36px;
    gap: 6px;
    min-height: 30px;
    padding: 2px 3px;
  }

  .live-ranking li > span {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .live-ranking li > strong {
    font-size: 11px;
    line-height: 1.1;
  }

  .live-ranking li > b {
    font-size: 13px;
  }

  .edit-round-button {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  .round-clock-wrap {
    margin-top: 8px;
    gap: 4px;
  }

  .round-clock-face {
    width: 72px;
    height: 72px;
  }

  .round-clock-face > i {
    transform-origin: 50% 24px;
  }

  .round-clock-face .clock-hand.clock-hour {
    height: 16px;
  }

  .round-clock-face .clock-hand.clock-minute {
    height: 22px;
  }

  .round-clock-face .clock-hand.clock-second {
    height: 25px;
  }

  .round-clock-face .clock-numeral {
    font-size: 8px;
  }

  .round-clock-digital {
    font-size: 14px;
  }
}