/* Android arena, HUD and touch controls. */
@media (orientation: landscape) {
  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) {
    --ring-hud-height: 48px;
    --ring-dock-height: 48px;
    --ring-touch-tray: 0px;
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) var(--ring-touch-tray) / minmax(0, 1fr);
    gap: 0;
    background: #120e19;
  }

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

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .stage {
    grid-area: 1 / 1;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    background: radial-gradient(ellipse at center, #292030, #120e19 80%);
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) :is(.machine-bar, .machine-foot, .scanlines, .arena-location) {
    display: none;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) #ring {
    object-fit: contain;
    background: none;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .fight-cue {
    font-size: clamp(36px, 14vh, 110px);
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .hud {
    position: absolute;
    z-index: 6;
    inset: 0 0 auto;
    width: min(100%, 960px);
    height: var(--ring-hud-height);
    min-height: 0;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) clamp(82px, 16vw, 126px) minmax(0, 1fr);
    gap: 8px;
    padding: 4px clamp(8px, 2vw, 22px) 8px;
    border: 0;
    background: linear-gradient(#14101afa 58%, #14101a00);
    pointer-events: none;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .hud-player { gap: 6px; }
  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .avatar { width: 32px; }
  html[data-platform="android"] #game[data-phase="fight"][data-seat="0"] .p1 .avatar,
  html[data-platform="android"] #game[data-phase="fight"][data-seat="1"] .p2 .avatar {
    box-shadow: 0 0 0 2px var(--fighter-accent);
  }
  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .hud-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(16px, 3.1vw, 24px);
  }
  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .hud-name span { font-size: 9px; }
  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .life { height: 6px; margin-top: 4px; }
  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .phase-clock { font-size: clamp(24px, 6vh, 34px); }
  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .hud-label {
    margin-bottom: 2px;
    font-size: 9px;
    overflow-wrap: anywhere;
  }

  html[data-platform="android"] #game[data-training] .training-guide {
    inset-block-start: var(--ring-hud-height);
    padding: 5px 9px;
    font-size: clamp(11px, 2vw, 13px);
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .ticket {
    position: absolute;
    grid-area: auto;
    z-index: 7;
    inset-inline: 0;
    inset-block-end: calc(var(--ring-touch-tray) + 4px);
    width: max-content;
    max-width: calc(100% - 12px);
    margin-inline: auto;
    border: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .ticket-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"])
    :is(.matchup, #matchup-names, #match-mode, #match-title, #match-detail, .ticket-rounds, .up-next, #pause kbd) {
    display: none;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) #match-panel {
    max-width: 100%;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .match-actions {
    justify-content: center;
    gap: 4px;
    margin: 0;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .match-actions button {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 9px;
    border: 1px solid #d7b9d043;
    border-radius: 7px;
    color: var(--light);
    background: #15101dec;
    font: 700 11px/1.2 var(--mono);
    pointer-events: auto;
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .match-actions button:active {
    color: var(--yellow);
    border-color: var(--yellow);
  }

  html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .online-status {
    order: -1;
    max-width: min(100%, 340px);
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #d7b9d043;
    border-radius: 7px;
    color: var(--light);
    background: #15101dec;
    text-align: center;
  }

  html[data-platform="android"] #game[data-screen="fight"]:not([data-mode="local"]) .gesture-controls {
    position: absolute;
    z-index: 3;
    inset: var(--ring-hud-height) 0 var(--ring-dock-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(54px, 12vw, 132px) minmax(0, 1fr);
    pointer-events: none;
  }

  html[data-platform="android"] #game[data-screen="fight"] .gesture-zone {
    display: flex;
    align-items: flex-end;
    min-width: 0;
    padding: 8px clamp(7px, 2vw, 24px) 4px;
    touch-action: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
  }

  html[data-platform="android"] #game[data-screen="fight"] [data-gesture-zone="move"] {
    --gesture-accent: var(--yellow);
    grid-column: 1;
    background: linear-gradient(24deg, #15101b8a, transparent 40%);
  }

  html[data-platform="android"] #game[data-screen="fight"] [data-gesture-zone="attack"] {
    --gesture-accent: var(--pink);
    grid-column: 3;
    justify-content: flex-end;
    background: linear-gradient(-24deg, #15101b8a, transparent 40%);
  }

  html[data-platform="android"] #game[data-screen="fight"] .gesture-guide {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 245px;
    color: var(--light);
    font: 600 clamp(9px, 1.4vw, 12px)/1.2 var(--mono);
    overflow-wrap: anywhere;
    text-shadow: 0 1px 4px #0b0710, 0 0 5px #0b0710;
    pointer-events: none;
  }

  html[data-platform="android"] #game[data-screen="fight"] [data-gesture-zone="attack"] .gesture-guide {
    flex-direction: row-reverse;
    text-align: right;
  }

  html[data-platform="android"] #game[data-screen="fight"] .gesture-icon {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    width: auto;
    height: 21px;
    color: var(--gesture-accent);
    fill: currentColor;
    font-size: 16px;
    opacity: .75;
  }

  html[data-platform="android"] #game[data-screen="fight"] svg.gesture-icon { width: 22px; }
  html[data-platform="android"] #game[data-screen="fight"]
    .gesture-zone:is([data-direction], [data-action]) .gesture-icon { opacity: 1; }
  html[data-platform="android"] #game[data-screen="fight"] :is(
    [data-direction="left"] .gesture-left,
    [data-direction="right"] .gesture-right,
    [data-action="jump"] .gesture-up,
    [data-gesture-zone="attack"][data-action] .gesture-icon
  ) {
    color: #fff8e9;
    filter: drop-shadow(0 0 5px var(--gesture-accent));
  }

  html[data-platform="android"] #game[data-screen="fight"][data-mode="local"]:has(#touch-controls:not([hidden])) {
    --ring-touch-tray: 54px;
  }

  html[data-platform="android"] #game[data-screen="fight"][data-mode="local"] #touch-controls {
    grid-area: 2 / 1;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    border-top: 1px solid var(--line);
    background: #15101b;
    pointer-events: auto;
  }

  html[data-platform="android"] #game[data-screen="fight"][data-mode="local"] .touch-group {
    grid-template: minmax(0, 1fr) / repeat(6, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
  }

  html[data-platform="android"] #game[data-screen="fight"][data-mode="local"] .touch-group button {
    grid-area: auto;
    align-self: stretch;
    min-height: 0;
    font-size: clamp(11px, 1.8vw, 15px);
  }

  html[data-platform="android"] #game[data-screen="fight"][data-mode="local"] .touch-group button:is([data-action="left"], [data-action="right"]) {
    font-size: 20px;
  }

  @media (max-width: 620px) {
    html[data-platform="android"] #game[data-screen="fight"][data-mode="local"]:has(#touch-controls:not([hidden])) {
      --ring-touch-tray: 91px;
    }

    html[data-platform="android"] #game[data-screen="fight"][data-mode="local"] .touch-group {
      grid-template: repeat(2, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-height: 240px) {
    html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) {
      --ring-hud-height: 41px;
      --ring-dock-height: 45px;
    }

    html[data-platform="android"] #game[data-phase="fight"]:not([data-screen="lobby"]) .avatar {
      width: 28px;
    }
  }

  @media (max-width: 620px) and (max-height: 240px) {
    html[data-platform="android"] #game[data-screen="fight"][data-mode="local"]:has(#touch-controls:not([hidden])) {
      --ring-touch-tray: 76px;
    }
  }
}