@media (orientation: landscape) {
  html[data-platform="android"] #game[data-screen="lobby"] {
    grid-template: minmax(0, 1fr) / minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(8px, 1.6vw, 18px);
    max-width: 1100px;
    padding: clamp(8px, 2.5dvh, 18px);
    margin-inline: auto;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .machine {
    display: grid;
    grid-area: 1 / 1;
    grid-template: auto minmax(0, 1fr) / minmax(0, 1fr);
    min-height: 0;
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .machine-bar {
    display: grid;
    grid-template: auto auto / minmax(0, 1fr) auto;
    gap: 4px 8px;
    min-height: 0;
    padding: 6px 8px 0;
    background: var(--inset);
  }

  html[data-platform="android"] #game[data-screen="lobby"] .app-wordmark {
    display: block;
    grid-area: 1 / 1;
    align-self: center;
    min-width: 0;
    container-type: inline-size;
    color: var(--light);
    font: 700 clamp(12px, 2.4vw, 32px)/.91 var(--display);
    letter-spacing: -.035em;
    text-transform: uppercase;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .app-wordmark span {
    display: block;
    font-size: clamp(12px, 12.5cqi, 32px);
    white-space: nowrap;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .app-wordmark span:last-child { color: var(--yellow); }

  html[data-platform="android"] #game[data-screen="lobby"] .language-control {
    grid-area: 1 / 2;
    min-width: 0;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .language-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  html[data-platform="android"] #game[data-screen="lobby"] .language-control select {
    width: clamp(70px, 14vw, 115px);
    min-height: 40px;
    font-size: 11px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .view-tabs {
    display: grid;
    grid-area: 2 / 1 / 3 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .view-tabs button {
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    padding-inline: 4px;
    font-size: clamp(10px, 1.9vw, 13px);
  }

  html[data-platform="android"] #game[data-screen="lobby"] .view-tabs button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .stage {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    aspect-ratio: auto;
    max-height: none;
    border: 0;
    container-type: size;
    background: linear-gradient(#100c17cc, #100c1790),
      url("assets/arena-metro.webp") center / cover no-repeat;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .ring-view canvas { object-fit: contain; }

  html[data-platform="android"] #game[data-screen="lobby"] .versus {
    top: 50%;
    transform: translate(-50%, -50%) skewX(-12deg);
    font-size: clamp(38px, 7vw, 86px);
  }

  html[data-platform="android"] #game[data-screen="lobby"]
    :is(.hud, .machine-foot, .arena-location, .chess-corner, .matchup, .ticket-rounds, .up-next) {
    display: none;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .board-view {
    --preview-board-size: max(0px, min(
      calc(100vh - 116px - var(--app-inset-top, 0px) - var(--app-inset-bottom, 0px)),
      calc((100vw - var(--app-inset-left, 0px) - var(--app-inset-right, 0px)) * .44 - 30px),
      450px
    ));
    position: absolute;
    inset: 0;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    gap: 0;
    padding: 6px;
  }

  @supports (width: 1cqw) {
    html[data-platform="android"] #game[data-screen="lobby"] .board-view {
      --preview-board-size: max(0px, min(calc(100cqw - 12px), calc(100cqh - 12px), 450px));
    }
  }

  html[data-platform="android"] #game[data-screen="lobby"] .board-frame {
    grid-area: 1 / 1;
    width: var(--preview-board-size);
    height: var(--preview-board-size);
    max-height: none;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .chessboard { padding: 2px; }

  html[data-platform="android"] #game[data-screen="lobby"] .ticket {
    grid-area: 1 / 2;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(152deg, #251c2c, var(--panel) 75%);
  }

  html[data-platform="android"] #game[data-screen="lobby"] .ticket-content {
    display: block;
    flex: 1;
    min-height: 0;
    padding: clamp(8px, 2.7dvh, 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 8px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] #lobby {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(5px, 2dvh, 12px);
  }

  html[data-platform="android"] #game[data-screen="lobby"]
    :is(.fighter-picker, .modes, .lobby-actions, .invite-panel) {
    grid-column: 1 / -1;
  }

  html[data-platform="android"] #game[data-screen="lobby"]
    :is(.fighter-picker, .modes, .chess-level-setting, .invite-create) {
    margin: 0;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .fighter-picker {
    gap: 6px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .fighter-picker label {
    display: grid;
    gap: 3px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .fighter-picker label span {
    display: block;
    position: static;
    padding-inline: 2px;
    transform: none;
    font-size: 10px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .fighter-picker label::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: 37px;
    height: 42px;
    background: var(--fighter-bg) var(--fighter-image) center 23% / cover no-repeat;
    border-inline-end: 1px solid var(--line);
    transform: scaleX(var(--portrait-direction, 1));
    pointer-events: none;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .fighter-picker select {
    min-height: 44px;
    padding-left: 43px;
    font-size: 12px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-platform="android"] #game[data-screen="lobby"] .modes button {
    grid-column: auto;
    min-height: 44px;
    padding: 4px;
    overflow-wrap: anywhere;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .chess-level-setting {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 3px;
    font-size: 10px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .chess-level-setting select {
    width: 100%;
    min-height: 40px;
    font-size: 12px;
  }

  html[data-platform="android"] #game[data-screen="lobby"]
    :is(#start, #training-start, .invite-create, .invite-panel button) {
    min-height: 44px;
    text-align: center;
  }

  html[data-platform="android"] #game[data-screen="lobby"] #start {
    font-size: clamp(20px, 3.7vw, 28px);
  }

  html[data-platform="android"] #game[data-screen="lobby"] .invite-create {
    padding-inline: 6px;
    overflow-wrap: anywhere;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .invite-panel input {
    min-height: 44px;
  }

  html[data-platform="android"] #game[data-screen="lobby"] .online-status {
    margin-top: 6px;
  }
}