/* Chess is a height-bounded screen in the Android app. The site keeps its web layout. */
@media (orientation: landscape) {
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) {
    --chess-screen-height: calc(100vh - var(--app-inset-top, 0px) - var(--app-inset-bottom, 0px));
    --chess-screen-width: calc(100vw - var(--app-inset-left, 0px) - var(--app-inset-right, 0px));
    --chess-shell-gap: 8px;
    --chess-panel-width: clamp(112px, 23vw, 230px);
    --chess-hud-height: 40px;
    --chess-frame-pad: clamp(5px, 1.3vh, 10px);
    --chess-rail-width: clamp(37px, 9vw, 88px);
    --chess-rail-gap: clamp(5px, 1.1vw, 12px);
    --chess-board-size: max(0px, min(
      calc(var(--chess-screen-height) - var(--chess-hud-height) - 4 * var(--chess-shell-gap)),
      calc(var(--chess-screen-width) - var(--chess-panel-width) - 3 * var(--chess-shell-gap)
        - 2 * (var(--chess-rail-width) + var(--chess-rail-gap) + var(--chess-frame-pad)))
    ));

    grid-template: minmax(0, 1fr) / minmax(0, 1fr) var(--chess-panel-width);
    gap: var(--chess-shell-gap);
    padding: var(--chess-shell-gap);
    background: radial-gradient(ellipse at 44% 50%, #32213b 0, transparent 73%), var(--bg);
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .machine {
    display: grid;
    grid-area: 1 / 1;
    grid-template: var(--chess-hud-height) minmax(0, 1fr) / minmax(0, 1fr);
    gap: var(--chess-shell-gap);
    min-height: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"])
    :is(.hud .avatar, .matchup, #matchup-names, #pause kbd) {
    display: none;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .hud {
    position: static;
    display: grid;
    grid-area: 1 / 1;
    grid-template-columns: minmax(0, 1fr) minmax(72px, 23%) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 3px 9px;
    border: 1px solid #f9eadb18;
    border-radius: 8px;
    background: #1b1522d9;
    pointer-events: none;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .hud-name { font-size: clamp(13px, 2.4vw, 20px); }
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .hud-name span { font-size: 8px; }
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .hud-label { margin-bottom: 2px; font-size: 8px; }
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .phase-clock { font-size: 24px; }
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .life { height: 5px; margin-top: 3px; padding: 0; }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .stage {
    grid-area: 2 / 1;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    min-height: 0;
    max-height: none;
    height: 100%;
    aspect-ratio: auto;
    border: 1px solid #f9eadb20;
    border-radius: 12px;
    background: #17121f;
    container-type: size;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .ring-view {
    position: absolute;
    inset: 0;
    opacity: .2;
    filter: saturate(.55);
    transform: none;
    pointer-events: none;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .scanlines { opacity: .08; }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .board-view {
    grid-template: minmax(0, 1fr) / var(--chess-rail-width) var(--chess-board-size) var(--chess-rail-width);
    place-content: center;
    place-items: center;
    gap: var(--chess-rail-gap);
    padding: var(--chess-frame-pad);
    background: radial-gradient(ellipse at center, #17101cbf 5%, #25182ce6 100%);
    transform: none;
  }

  @supports (width: 1cqw) {
    html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .board-view {
      --chess-board-size: max(0px, min(
        calc(100cqh - 2 * var(--chess-frame-pad)),
        calc(100cqw - 2 * (var(--chess-rail-width) + var(--chess-rail-gap) + var(--chess-frame-pad)))
      ));
    }
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .board-frame {
    grid-area: 1 / 2;
    width: var(--chess-board-size);
    height: var(--chess-board-size);
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 1px solid #cda88b;
    box-shadow: 0 7px 24px #07050a99;
  }

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

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .chess-corner {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    width: 100%;
    min-width: 0;
    border: 1px solid #f9eadb24;
    border-radius: 7px;
    overflow: hidden;
    background: #1c1424;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .chess-corner[data-fighter-slot="1"] {
    grid-column: 3;
    text-align: right;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .corner-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: 0;
    border-bottom: 2px solid var(--fighter-accent);
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .corner-info {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 5px;
    border: 0;
    background: none;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .corner-label {
    font-size: 9px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .corner-label i { display: none; }
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .corner-label > span { display: block; color: var(--muted); }
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .chess-clock { font-size: clamp(18px, 3.5vw, 34px); line-height: .95; }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .ticket {
    position: static;
    grid-area: 1 / 2;
    display: flex;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #f9eadb24;
    border-radius: 12px;
    background: linear-gradient(160deg, #281e30, #17131e 82%);
    box-shadow: none;
    pointer-events: auto;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .ticket-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: clamp(7px, 1.3vw, 14px);
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) #match-panel {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) #match-title {
    display: block;
    margin: 0;
    font-size: clamp(18px, 5.6vh, 30px);
    line-height: .95;
    overflow-wrap: anywhere;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"])
    :is(#match-mode, #match-detail, .online-status, .moves) {
    display: block;
    margin: 0;
    overflow-wrap: anywhere;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .match-detail { font-size: 12px; line-height: 1.3; }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .match-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 3px 0 0;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .match-actions button {
    min-width: 0;
    min-height: 44px;
    padding: 4px 6px;
    border: 1px solid #f9eadb32;
    border-radius: 5px;
    background: #17111edf;
    color: var(--light);
    font: 700 11px/1.2 var(--mono);
    overflow-wrap: anywhere;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .online-status {
    padding: 5px;
    border-radius: 4px;
    background: #17111e;
    line-height: 1.3;
  }

}

@media (orientation: landscape) and (max-width: 620px) {
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) {
    --chess-panel-width: 112px;
    --chess-rail-width: clamp(34px, 7.5vw, 42px);
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .corner-info {
    padding: 4px 3px;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .corner-label {
    font-size: 8px;
    letter-spacing: .03em;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .chess-clock {
    font-size: 18px;
  }

  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) .online-status {
    padding: 4px;
    font-family: system-ui, sans-serif;
  }
}

@media (orientation: landscape) and (max-height: 390px) {
  html[data-platform="android"] #game[data-phase="chess"]:not([data-screen="lobby"]) #moves {
    display: none;
  }
}