/*
 * street2-menu: seleção de modo no estilo arcade (cartões-adesivo ilustrados em vez de lista)
 * e botão Voltar em arte para todas as etapas do fluxo.
 */
.arcade-flow[data-step='1'] {
  background:
    linear-gradient(90deg, #03132a66, #06193514),
    var(--af-backdrop, var(--street-court)) center/cover no-repeat,
    #094da0;
}
.arcade-flow[data-step='1'] .af-progress,
.arcade-flow[data-step='1'] .af-footer-note {
  display: none;
}
.arcade-flow[data-step='1'] .af-main {
  width: min(1380px, 100%);
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 22px;
}
.arcade-flow[data-step='1'] .af-title.has-art {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  margin: -40px -12% 0 0;
  z-index: 3;
  letter-spacing: 0;
  text-shadow: none;
}
.arcade-flow .af-title-art {
  display: block;
  width: clamp(210px, 25vw, 400px);
  height: auto;
  filter: drop-shadow(0 6px 0 #07142c66);
}
.arcade-flow[data-step='1'] .af-mode-hero {
  grid-column: 1;
  grid-row: 1 / 3;
  align-items: flex-end;
  justify-content: flex-start;
}
.arcade-flow[data-step='1'] .af-mode-hero .af-character {
  height: 96%;
  object-position: left bottom;
  filter: drop-shadow(0 10px 0 #07142c59);
}

.arcade-flow .af-mode-list.af-mode-cards {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  max-width: none;
  width: 100%;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 18px);
  align-items: center;
}
.arcade-flow .af-mode-list .af-button.af-mode-card {
  position: relative;
  grid-column: span 4;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 8px 0 #07142c73);
  transition:
    transform 0.16s cubic-bezier(0.3, 1.5, 0.5, 1),
    filter 0.16s ease-out;
}
.arcade-flow .af-mode-list .af-button.af-mode-card[data-mode='cpu'] {
  grid-column: 2 / span 6;
}
.arcade-flow .af-mode-list .af-button.af-mode-card[data-mode='local'] {
  grid-column: span 5;
}
.arcade-flow .af-mode-card .af-mode-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh;
  object-fit: contain;
}
.arcade-flow .af-mode-card:not([data-mode='cpu']):not([data-mode='local']) .af-mode-art {
  max-height: 32vh;
}
.arcade-flow .af-mode-card .af-mode-label {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 11%;
  display: grid;
  place-items: center;
  min-height: 26%;
  transform: rotate(-4deg);
  font-family: var(--font-street);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.98;
  text-align: center;
  color: #fff;
  font-size: clamp(15px, 2.2vw, 34px);
  -webkit-text-stroke: 0.2em var(--street-ink);
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0 var(--street-ink);
}
.arcade-flow .af-mode-card[data-mode='cpu'] .af-mode-label {
  font-size: clamp(20px, 3.2vw, 50px);
}
.arcade-flow .af-mode-list .af-button.af-mode-card:hover {
  background: none;
  transform: translateY(-6px) rotate(-1.5deg) scale(1.03);
  filter: drop-shadow(0 0 14px #ffd83ab3) drop-shadow(0 12px 0 #07142c73);
}
.arcade-flow .af-mode-list .af-button.af-mode-card:active {
  transform: translateY(3px) scale(0.98);
  box-shadow: none;
}
.arcade-flow .af-mode-list .af-button.af-mode-card:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 12px #ffffffd9) drop-shadow(0 8px 0 #07142c73);
}

/* Voltar em arte (todas as etapas). */
.arcade-flow .af-button.af-back.af-back-art {
  min-width: 0;
  width: auto;
  height: 58px;
  min-height: 0;
  padding: 0 26px 4px 78px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--art-street-hud-btn-back) left center/auto 100% no-repeat;
  color: #fff;
  font-family: var(--font-street);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  -webkit-text-stroke: 0.2em var(--street-ink);
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 0 #07142c73);
}
.arcade-flow .af-button.af-back.af-back-art:hover {
  background-color: transparent;
  transform: translateX(-3px);
}

@media (orientation: portrait), (max-width: 760px) {
  .arcade-flow[data-step='1'] .af-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .arcade-flow[data-step='1'] .af-title.has-art {
    grid-column: 1;
    justify-self: center;
    margin: 0 0 6px;
  }
  .arcade-flow[data-step='1'] .af-mode-hero {
    display: none;
  }
  .arcade-flow .af-mode-list.af-mode-cards {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 8px;
  }
  .arcade-flow .af-mode-list .af-button.af-mode-card,
  .arcade-flow .af-mode-list .af-button.af-mode-card[data-mode='local'] {
    grid-column: span 1;
  }
  .arcade-flow .af-mode-list .af-button.af-mode-card[data-mode='cpu'] {
    grid-column: 1 / -1;
    justify-self: center;
    width: 74%;
  }
  .arcade-flow .af-mode-card .af-mode-art {
    max-height: 24vh;
  }
  .arcade-flow .af-mode-card .af-mode-label {
    font-size: clamp(13px, 4.2vw, 22px);
  }
  .arcade-flow .af-mode-card[data-mode='cpu'] .af-mode-label {
    font-size: clamp(18px, 6vw, 30px);
  }
}
@media (max-height: 440px) and (orientation: landscape) {
  .arcade-flow .af-mode-card .af-mode-art {
    max-height: 36vh;
  }
  .arcade-flow .af-title-art {
    width: clamp(150px, 20vw, 230px);
  }
  .arcade-flow .af-button.af-back.af-back-art {
    height: 44px;
    font-size: 17px;
    padding-left: 60px;
  }
}
html.reduced .arcade-flow .af-mode-card {
  transition: none;
}

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

/* End of assets/street2-menu-DOCug0OU.css */