/*
 * street2-menu-stage: no menu de modo em tela deitada, cada peça fica na posição medida no mockup 3.
 * Unidades: --ux = 1% da largura e --uy = 1% da altura de um palco 16:9 centrado na tela.
 * Assim a composição é a do mockup em 16:9 e só ganha margem em telas mais largas ou mais altas.
 * left = 50% + (X - 50) * ux ; top = 50% + (Y - 50) * uy ; X e Y em % do mockup.
 */
@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow[data-step='1'] {
    --ux: min(1vw, 1.7778vh);
    --uy: min(1vh, 0.5625vw);
    background:
      var(--af-backdrop, var(--street-court)) center/cover no-repeat,
      #094da0;
    /* O parallax do fluxo define background-size para duas camadas; aqui o fundo tem de aparecer inteiro (cover). */
    background-size: cover !important;
    background-position: center !important;
  }
  /* Sem animação nem transform no contêiner: um transform viraria a referência das peças absolutas. */
  .arcade-flow[data-step='1'] .af-main {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }
  .arcade-flow[data-step='1'] .af-mode-list.af-mode-cards {
    display: contents;
  }
  .arcade-flow[data-step='1'] .af-footer {
    position: static;
    padding: 0;
  }
  .arcade-flow[data-step='1'] .af-header {
    position: absolute;
    left: calc(50% - 46.2 * var(--ux));
    top: calc(50% - 47.6 * var(--uy));
    z-index: 4;
  }
  .arcade-flow[data-step='1'] .af-logo {
    width: calc(11.6 * var(--ux));
    height: auto;
  }

  .arcade-flow[data-step='1'] .af-mode-hero {
    position: absolute;
    display: block;
    grid-column: auto;
    grid-row: auto;
    translate: none;
    left: calc(50% - 40.2 * var(--ux));
    top: calc(50% - 37.2 * var(--uy));
    height: calc(78 * var(--uy));
    width: auto;
    z-index: 2;
  }
  .arcade-flow[data-step='1'] .af-mode-hero .af-character {
    height: 100%;
    width: auto;
    max-width: none;
    object-position: left bottom;
    filter: drop-shadow(0 calc(0.6 * var(--ux)) 0 #07142c59);
  }
  .arcade-flow[data-step='1'] .af-title.has-art {
    position: absolute;
    left: calc(50% - 26.6 * var(--ux));
    top: calc(50% - 46.6 * var(--uy));
    margin: 0;
    z-index: 3;
  }
  .arcade-flow[data-step='1'] .af-title-art {
    width: calc(22.6 * var(--ux));
  }

  /* grid-column:auto: peça absoluta cuja referência é um grid obedece à linha de grade e cairia fora da tela. */
  .arcade-flow[data-step='1'] .af-mode-list .af-button.af-mode-card[data-mode] {
    grid-column: auto;
    grid-row: auto;
  }
  .arcade-flow[data-step='1'] .af-mode-list .af-button.af-mode-card {
    position: absolute;
    z-index: 3;
    width: calc(var(--w) * var(--ux));
    left: calc(50% + (var(--x) - 50) * var(--ux));
    top: calc(50% + (var(--y) - 50) * var(--uy));
  }
  .arcade-flow[data-step='1'] .af-mode-card .af-mode-art,
  .arcade-flow[data-step='1']
    .af-mode-card:not([data-mode='cpu']):not([data-mode='local'])
    .af-mode-art {
    max-height: none;
  }
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='cpu'] {
    --x: 39.8;
    --y: 11.2;
    --w: 30.2;
  }
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='local'] {
    --x: 68.5;
    --y: 19.7;
    --w: 24.8;
  }
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='campaign'] {
    --x: 33.8;
    --y: 56.3;
    --w: 22.7;
  }
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='challenges'] {
    --x: 56.5;
    --y: 56.9;
    --w: 19.6;
  }
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='learn'] {
    --x: 76.6;
    --y: 54.7;
    --w: 20.3;
  }
  .arcade-flow[data-step='1'] .af-mode-card .af-mode-label {
    left: 10%;
    right: 10%;
    bottom: 12%;
    min-height: 27%;
    font-size: calc(3.3 * var(--ux));
    -webkit-text-stroke: 0.26em #05070f;
    text-shadow: 0 0.09em 0 #05070f;
    transform: rotate(-6deg);
  }
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='cpu'] .af-mode-label {
    font-size: calc(4.1 * var(--ux));
    left: 24%;
    right: 24%;
  }
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='local'] .af-mode-label {
    font-size: calc(3.9 * var(--ux));
    left: 12%;
    right: 12%;
  }
  /* Sublinhado amarelo de pincel sob o rótulo. */
  .arcade-flow[data-step='1'] .af-mode-card .af-mode-label::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -0.36em;
    height: 0.26em;
    border-radius: 60% 40% 55% 45% / 100%;
    background: #ffd83a;
    transform: rotate(-1deg);
    box-shadow: 0 0.05em 0 var(--street-ink);
  }

  .arcade-flow[data-step='1'] .af-button.af-back.af-back-art {
    position: absolute;
    z-index: 4;
    left: calc(50% - 48.7 * var(--ux));
    top: calc(50% + 39.8 * var(--uy));
    height: calc(10.4 * var(--uy));
    padding: 0 calc(2.4 * var(--ux)) calc(0.4 * var(--uy)) calc(7.2 * var(--ux));
    font-size: calc(3 * var(--ux));
  }
}

/* End of src/street2-menu-stage.css */

/* End of assets/street2-menu-stage-CpOilBOT.css */