/* BATTLE TRAINING FRONT-AND-CENTER MOBILE V1 */

/*
  The global Practice Lab navigation already provides page navigation on
  phones. Remove the three large introductory blocks so the training player
  becomes the first substantial content after the global nav.
*/
@media (max-width: 760px) {
  body:has(#battleVideo) .battle-app > .brand,
  body:has(#battleVideo) .battle-app > .mode-panel,
  body:has(#battleVideo) .battle-app > .battle-hero {
    display: none !important;
  }

  body:has(#battleVideo) .battle-app {
    padding-top: 8px;
  }

  body:has(#battleVideo) .battle-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 0;
  }

  body:has(#battleVideo) .battle-player-card {
    order: -1;
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }

  /*
    Put the footage before the four large playback-tool buttons.
    Title/meta remain above it, so the user immediately knows what is playing.
  */
  body:has(#battleVideo) .battle-player-card > .eyebrow {
    order: 1;
  }

  body:has(#battleVideo) .battle-player-card > #battleTitle {
    order: 2;
  }

  body:has(#battleVideo) .battle-player-card > #battleMeta {
    order: 3;
  }

  body:has(#battleVideo) .battle-player-card > #battleVideo {
    order: 4;
    margin-top: 10px;
  }

  body:has(#battleVideo) .battle-player-card > .battle-playback-tools {
    order: 5;
    margin: 10px 0 0;
  }

  body:has(#battleVideo) .battle-player-card > .battle-player-actions {
    order: 6;
  }

  body:has(#battleVideo) .battle-browser {
    order: 1;
    margin-top: 0;
  }

  body:has(#battleVideo) .battle-video {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }
}

/*
  On very small phones, keep the player title readable without taking
  unnecessary vertical space before the video.
*/
@media (max-width: 520px) {
  body:has(#battleVideo) .battle-player-card {
    padding: 12px;
  }

  body:has(#battleVideo) .battle-player-card > #battleTitle {
    margin-top: 3px;
    font-size: clamp(27px, 9vw, 38px);
    line-height: 1;
  }

  body:has(#battleVideo) .battle-player-card > #battleMeta {
    margin: 5px 0 0;
  }

  body:has(#battleVideo) .battle-playback-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(#battleVideo) .battle-tool-button {
    min-height: 48px;
    padding: 8px;
    font-size: 10px;
  }
}