/*
 * street3: telas de preparo (personagens, arena, peças) e campanha no estilo do menu de modo (mockups 5 a 8).
 * Dois modos: "palco" (tela deitada, peças nas posições medidas nos mockups, em unidades --ux/--uy de um palco 16:9)
 * e "fluxo" (tela em pé ou estreita, peças empilhadas). --s é a unidade de tamanho de letra e folga nos dois.
 * Números de sensação (tempos, curvas, escalas) ficam todos no bloco abaixo.
 */
.arcade-flow.af-s3,
.arcade-campaign.s3-camp {
  --ux: min(1vw, 1.7778vh);
  --uy: min(1vh, 0.5625vw);
  --s: 2.3vw;
  --ink: #05070f;
  --s3-in: 0.42s;
  --s3-stagger: 45ms;
  --s3-pop: cubic-bezier(0.3, 1.5, 0.5, 1);
  --s3-pick: 0.26s;
  --s3-hover: 1.05;
  --s3-press: 0.95;
  --s3-slam: 0.38s;
  --s3-glow: drop-shadow(0 0 0.5em #ffd83a) drop-shadow(0 0 0.12em #fff3a6);
  --s3-drop: drop-shadow(0 0.34em 0 #07142c73);
  background:
    var(--art-street-menu-bg) center/cover no-repeat,
    #3a3560 !important;
  background-size: cover !important;
  background-position: center !important;
  font-size: calc(1.6 * var(--s));
}
.arcade-flow.af-s3::before,
.arcade-flow.af-s3::after {
  display: none;
}

/* ---------- Letra de rua e peças comuns ---------- */
.af-s3 .s3-label,
.af-s3 .s3-name,
.af-s3 .s3-tag,
.af-s3 .s3-pill > span,
.af-s3 .s3-go > span,
.af-s3 .s3-side-title,
.af-s3 .s3-slot,
.af-s3 .af-progress li > span,
.s3-camp .cs-tab > span,
.s3-camp .cs-node > span,
.s3-camp .cs-eyebrow,
.s3-camp .cs-title,
.s3-camp .cs-name,
.s3-camp .cs-play > span,
.s3-camp .cs-progress b,
.s3-camp .street-back {
  font-family: var(--font-street);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 0.22em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0 var(--ink);
  white-space: nowrap;
}
.arcade-flow.af-s3 .af-button.s3-fighter,
.arcade-flow.af-s3 .af-button.s3-tile,
.arcade-flow.af-s3 .af-button.s3-pill,
.arcade-flow.af-s3 .af-button.s3-photo,
.arcade-flow.af-s3 .af-button.s3-set,
.arcade-flow.af-s3 .af-button.s3-go,
.s3-camp .cs-tab,
.s3-camp .cs-node,
.s3-camp .cs-play,
.s3-camp .street-back {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  transition:
    scale 0.18s cubic-bezier(0.25, 0.8, 0.35, 1),
    filter 0.18s ease-out;
  filter: var(--s3-drop);
}
.arcade-flow.af-s3 .af-button:not(.af-back):hover,
.s3-camp button:not(:disabled):hover {
  background-color: transparent;
  scale: var(--s3-hover);
  translate: 0 -0.2em;
}
.arcade-flow.af-s3 .af-button:not(.af-back):active,
.s3-camp button:not(:disabled):active {
  scale: var(--s3-press);
  translate: 0 0.12em;
  transform: none;
}
.arcade-flow.af-s3 .af-button:focus-visible,
.s3-camp button:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 0.5em #fff) var(--s3-drop);
}
.arcade-flow.af-s3 .af-button[aria-pressed='true'],
.s3-camp .cs-tab[aria-pressed='true'] {
  filter: var(--s3-glow) var(--s3-drop);
  animation: s3-pick var(--s3-pick) var(--s3-pop);
}

/* Etapas (1 MODO, 2 CREW...) como etiquetas de spray. */
.arcade-flow.af-s3 .af-progress {
  gap: 0.3em;
  font-size: calc(1.05 * var(--s));
  letter-spacing: 0;
  align-items: center;
}
.arcade-flow.af-s3 .af-progress li {
  border: 0;
  padding: 0.5em 0.7em 0.75em;
  color: #fff;
  background: var(--art-street-menu-tag-dark) center/100% 100% no-repeat;
}
.arcade-flow.af-s3 .af-progress li[aria-current] {
  background-image: var(--art-street-menu-tag-yellow);
  padding: 0.75em 1em 1.15em;
  rotate: -3deg;
  margin: 0 -0.2em;
}
.arcade-flow.af-s3 .af-title.has-art {
  margin: 0;
  text-shadow: none;
  letter-spacing: 0;
  line-height: 0;
}
.arcade-flow.af-s3 .af-title-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.3em 0 #07142c59);
}
.arcade-flow.af-s3 .af-footer-note {
  display: none;
}
.arcade-flow.af-s3 .af-footer {
  justify-content: space-between;
}
.arcade-flow.af-s3 .af-button.s3-go {
  background: var(--art-street-hud-btn-brush-yellow) center/100% 100% no-repeat;
  height: calc(5.6 * var(--s));
  padding: 0 calc(3.2 * var(--s)) calc(0.5 * var(--s));
  font-size: calc(2.5 * var(--s));
}
.arcade-flow.af-s3 .af-button.s3-go:hover,
.arcade-flow.af-s3 .af-button.s3-go:focus {
  background: var(--art-street-hud-btn-brush-yellow) center/100% 100% no-repeat;
}
.arcade-flow.af-s3 .af-button.s3-go:disabled {
  filter: saturate(0.3) brightness(0.8);
}
.af-s3 .s3-pill > span,
.af-s3 .s3-go > span {
  display: block;
}

/* Pílulas (dificuldade e lado). */
.af-s3 .s3-pills {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  font-size: calc(1.5 * var(--s));
}
.arcade-flow.af-s3 .af-button.s3-pill {
  font-size: inherit;
  flex: 1 1 auto;
  min-width: max-content;
  height: 2.5em;
  padding: 0 1em 0.12em;
  background: var(--art-street-menu-pill-blue) center/100% 100% no-repeat;
}
.arcade-flow.af-s3 .af-button.s3-pill[aria-pressed='true'] {
  background: var(--art-street-menu-pill-yellow) center top/100% 150% no-repeat;
}

/* Etiqueta de nome (traço escuro de pincel atrás do texto). */
.af-s3 .s3-label {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 7%;
  display: grid;
  place-items: center;
  min-height: 1.9em;
  padding: 0.2em 0.3em 0.3em;
  rotate: -3deg;
  white-space: normal;
  text-align: center;
  background: var(--art-street-hud-tag) center/100% 100% no-repeat;
}

/* ---------- Personagens (mockup 5) ---------- */
.af-s3 .s3-vs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2%;
  width: 100%;
  align-items: end;
}
.arcade-flow.af-s3 .af-button.s3-fighter {
  display: block;
  aspect-ratio: 900 / 660;
  background: var(--art-street-menu-crew-card-b) center/100% 100% no-repeat;
}
.arcade-flow.af-s3 .af-button.s3-fighter[data-side='self'] {
  background-image: var(--art-street-menu-crew-card-y);
}
.arcade-flow.af-s3 .af-button.s3-fighter[aria-pressed='false'] {
  filter: var(--s3-drop) saturate(0.9) brightness(0.94);
}
.af-s3 .s3-fighter-art {
  position: absolute;
  left: 57%;
  bottom: 6%;
  height: 112%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  pointer-events: none;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff);
  animation: s3-in var(--s3-in) var(--s3-pop) both;
}
.af-s3 .s3-fighter[data-side='opponent'] .s3-fighter-art {
  left: 44%;
}
/* A arte do Tito olha para a direita e as outras para a esquerda: espelha quando cai do outro lado. */
.af-s3 .s3-fighter[data-side='self']:not([data-character='tito']) .s3-fighter-art,
.af-s3 .s3-fighter[data-side='opponent'][data-character='tito'] .s3-fighter-art {
  scale: -1 1;
}
.af-s3 .s3-name {
  position: absolute;
  left: 5%;
  bottom: 5%;
  padding: 0.12em 0.5em 0.3em;
  font-size: calc(4.6 * var(--s));
  rotate: -5deg;
  background: var(--art-street-hud-tag) center/100% 100% no-repeat;
}
.af-s3 .s3-fighter[data-side='opponent'] .s3-name {
  left: auto;
  right: 3%;
}
.af-s3 .s3-tag {
  position: absolute;
  left: -4%;
  top: -5%;
  padding: 0.5em 0.9em 0.8em;
  font-size: calc(1.75 * var(--s));
  rotate: -4deg;
  background: var(--art-street-menu-tag-dark) center/100% 100% no-repeat;
}
.af-s3 .s3-fighter[data-side='opponent'] .s3-tag {
  left: auto;
  right: -5%;
  rotate: 3deg;
}
.af-s3 .s3-vs-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: auto;
  translate: -50% -50%;
  z-index: 2;
  pointer-events: none;
  filter: var(--s3-drop);
}
.af-s3 .s3-roster {
  display: flex;
  gap: 1.5%;
  justify-content: center;
  width: 100%;
}
.arcade-flow.af-s3 .af-button.s3-tile {
  display: block;
  width: 27%;
  aspect-ratio: 520 / 500;
  background: var(--art-street-menu-tile-b) center/100% 100% no-repeat;
  font-size: calc(1.6 * var(--s));
}
.af-s3 .s3-tile-art {
  position: absolute;
  left: 50%;
  bottom: 16%;
  height: 84%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  pointer-events: none;
  clip-path: inset(0 0 14% 0 round 0 0 12% 12%);
}
.af-s3 .s3-slot {
  position: absolute;
  right: 2%;
  top: 2%;
  padding: 0.35em 0.6em 0.45em;
  font-size: 0.72em;
  font-style: normal;
  border-radius: 0.5em;
  background: #ff3d4f;
  border: 0.14em solid var(--ink);
  -webkit-text-stroke: 0.14em var(--ink);
  rotate: 6deg;
}
.af-s3 .s3-slot-p1 {
  background: #19357c;
  color: #ffd83a;
}
.af-s3 .s3-slot + .s3-slot {
  top: 28%;
}

/* ---------- Arena (mockup 6) ---------- */
.af-s3 .s3-arenas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vh;
  width: 100%;
}
.arcade-flow.af-s3 .af-button.s3-photo {
  display: block;
  height: 21vh;
  aspect-ratio: 1.18;
  padding: 0.35em;
  background: #fff;
  border-radius: 0.7em;
  font-size: calc(1.9 * var(--s));
  rotate: -2deg;
}
.arcade-flow.af-s3 .af-button.s3-photo:nth-child(2) {
  rotate: 2deg;
}
.arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true'] {
  background: #ffd83a;
  z-index: 2;
}
.af-s3 .s3-photo-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.45em;
  border: 0.12em solid var(--ink);
}
.af-s3 .s3-tape {
  position: absolute;
  left: 4%;
  top: -5%;
  width: 24%;
  aspect-ratio: 9 / 3.4;
  rotate: -22deg;
  background: linear-gradient(#ffe27a, #f2b91f);
  border: 0.1em solid var(--ink);
  border-radius: 0.1em;
  box-shadow: 0 0.1em 0 #07142c66;
}
.af-s3 .s3-crown,
.s3-camp .cs-node-crown {
  background: var(--ink);
  clip-path: polygon(4% 96%, 96% 96%, 100% 22%, 74% 54%, 50% 4%, 26% 54%, 0 22%);
}
.af-s3 .s3-crown::after,
.s3-camp .cs-node-crown::after {
  content: '';
  position: absolute;
  inset: 11% 9% 9%;
  background: #ffd83a;
  clip-path: polygon(4% 96%, 96% 96%, 100% 22%, 74% 54%, 50% 4%, 26% 54%, 0 22%);
}
.af-s3 .s3-crown {
  display: none;
  position: absolute;
  left: 50%;
  top: -27%;
  width: 28%;
  aspect-ratio: 24 / 19;
  translate: -50% 0;
  z-index: 5;
  animation: s3-bob 1.8s ease-in-out infinite;
}
.af-s3 .s3-photo[aria-pressed='true'] .s3-crown {
  display: block;
}

/* ---------- Peças (mockup 7) ---------- */
.af-s3 .s3-board {
  width: min(78vw, 34vh);
  flex: none;
  filter: var(--s3-drop);
}
.af-s3 .s3-board canvas {
  display: block;
  width: 100%;
  height: auto;
}
.af-s3 .s3-sets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2%;
  width: 100%;
}
.arcade-flow.af-s3 .af-button.s3-set {
  display: block;
  aspect-ratio: 520 / 480;
  background: var(--art-street-menu-tile-b) center/100% 100% no-repeat;
  font-size: calc(1.35 * var(--s));
}
.arcade-flow.af-s3 .af-button.s3-set[aria-pressed='true'] {
  background-image: var(--art-street-menu-tile-y);
}
.af-s3 .s3-pucks {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  height: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.af-s3 .s3-pucks canvas {
  width: 50%;
  height: auto;
  margin: 0 -5%;
  filter: drop-shadow(0 0.2em 0 #07142c66);
}
.af-s3 .s3-pucks canvas + canvas {
  margin-top: 8%;
}
.af-s3 .s3-side-title {
  margin: 0;
  font-size: calc(1.7 * var(--s));
  align-self: flex-start;
  rotate: -3deg;
}
.af-s3 .s3-sides {
  width: 100%;
}

/* ---------- Fluxo (tela em pé ou estreita) ---------- */
.arcade-flow.af-s3 .af-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vh;
  width: 100%;
  min-height: 0;
}
.arcade-flow.af-s3 .af-title.has-art {
  width: min(86%, 56vh);
}
/* Personagens no fluxo: cartões maiores em diagonal, VS no meio (só fora do palco). */
@media (orientation: portrait), (max-width: 760px) {
  .af-s3 .s3-crew .s3-vs {
    display: block;
    position: relative;
    width: 100%;
    height: 76vw;
    margin-top: 2vh;
  }
  .arcade-flow.af-s3 .s3-crew .af-button.s3-fighter {
    position: absolute;
    left: 0;
    top: 0;
    width: 63%;
  }
  .arcade-flow.af-s3 .s3-crew .af-button.s3-fighter[data-side='opponent'] {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
  }
  .af-s3 .s3-crew .s3-vs-mark {
    width: 30%;
  }
  .af-s3 .s3-crew .s3-name {
    font-size: calc(3.6 * var(--s));
  }
}
.af-s3 .s3-levels {
  width: 100%;
}

/* ---------- Campanha (mockup 8): peças comuns aos dois modos ---------- */
.s3-camp .cs-heading {
  margin: 0;
  line-height: 0;
}
.s3-camp .cs-heading-art {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.2em 0 #07142c59);
}
.s3-camp .cs-progress {
  gap: 0.5em;
  font-size: calc(2 * var(--s));
}
.s3-camp .cs-progress b {
  color: #ffd83a;
  font-weight: 400;
}
.s3-camp .cs-marks {
  gap: 0;
}
.s3-camp .cs-marks i {
  width: 1.05em;
  height: 0.84em;
  margin-left: -0.22em;
  border-radius: 0;
  background: var(--art-street-menu-node-dark) center/contain no-repeat;
}
.s3-camp .cs-marks [data-won='true'] {
  background: var(--art-street-menu-node-gold) center/contain no-repeat;
}
.s3-camp .cs-tabs {
  gap: 0.4em;
  font-size: calc(1.3 * var(--s));
}
.s3-camp .cs-tab {
  flex: 0 1 auto;
  min-width: max-content;
  height: auto;
  padding: 0.7em 1.1em 1em;
  background: var(--art-street-menu-tag-dark) center/100% 100% no-repeat;
  font-size: inherit;
}
.s3-camp .cs-tab[aria-pressed='true'] {
  background: var(--art-street-menu-tag-yellow) center/100% 100% no-repeat;
  border: 0;
  color: #fff;
}
.s3-camp .cs-map-viewport {
  border-radius: 0.6em;
  box-shadow:
    0 0 0 0.35em #fff,
    0 0.7em 0 0.3em #07142c59;
}
.s3-camp .cs-tape {
  display: none;
}
.s3-camp .cs-node {
  position: absolute;
  width: calc(5.6 * var(--s));
  height: auto;
  aspect-ratio: 300 / 230;
  translate: -50% -50%;
  transform: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--art-street-menu-node-gold) center/contain no-repeat;
  font-size: calc(2.4 * var(--s));
}
.s3-camp.cs-enter .cs-node {
  animation: s3-in var(--s3-in) var(--s3-pop) both;
  animation-delay: calc(var(--i, 0) * var(--s3-stagger));
}
.s3-camp .cs-node > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
  text-align: center;
}
.s3-camp .cs-node[data-won='true'] {
  background: var(--art-street-menu-node-gold) center/contain no-repeat;
}
.s3-camp .cs-node[data-locked='true'] {
  background: var(--art-street-menu-node-dark) center/contain no-repeat;
}
.s3-camp .cs-node[data-locked='true']::after {
  content: '';
  position: absolute;
  right: -4%;
  bottom: -6%;
  width: 38%;
  aspect-ratio: 271 / 300;
  background: var(--art-street-menu-lock) center/contain no-repeat;
}
.s3-camp .cs-node[data-won='true'],
.s3-camp .cs-node[data-locked='true'] {
  color: #fff;
}
.s3-camp .cs-node[aria-pressed='true'] {
  outline: 0;
  filter: var(--s3-glow) var(--s3-drop);
  z-index: 2;
}
.s3-camp .cs-node:hover,
.s3-camp .cs-node:active {
  translate: -50% -56%;
}
.s3-camp .cs-node-crown {
  display: none;
  position: absolute;
  left: 50%;
  top: -56%;
  width: 56%;
  aspect-ratio: 24 / 19;
  translate: -50% 0;
  animation: s3-bob 1.8s ease-in-out infinite;
}
.s3-camp .cs-node[aria-pressed='true']:not([data-locked='true']) .cs-node-crown,
.s3-camp .cs-node[data-won='true'] .cs-node-crown {
  display: block;
}
.s3-camp .cs-node[data-won='true']:not([aria-pressed='true']) .cs-node-crown {
  animation: none;
  width: 40%;
  top: -36%;
}
.s3-camp .cs-node:nth-child(1) {
  --i: 1;
}
.s3-camp .cs-node:nth-child(2) {
  --i: 2;
}
.s3-camp .cs-node:nth-child(3) {
  --i: 3;
}
.s3-camp .cs-node:nth-child(4) {
  --i: 4;
}
.s3-camp .cs-node:nth-child(5) {
  --i: 5;
}
.s3-camp .cs-node:nth-child(6) {
  --i: 6;
}
.s3-camp .cs-node:nth-child(7) {
  --i: 7;
}
.s3-camp .cs-node:nth-child(8) {
  --i: 8;
}
.s3-camp .cs-node:nth-child(9) {
  --i: 9;
}
.s3-camp .cs-detail {
  border-style: solid;
  border-width: 16px;
  border-image: var(--art-street-menu-camp-card) 70 fill / 16px stretch;
  padding: 0;
  filter: var(--s3-drop);
}
.s3-camp .cs-opponent {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff);
  animation: s3-in var(--s3-in) var(--s3-pop) both;
}
.s3-camp .cs-detail-copy {
  justify-items: center;
  text-align: center;
  animation: s3-in var(--s3-in) var(--s3-pop) both;
  animation-delay: 60ms;
}
.s3-camp .cs-eyebrow {
  padding: 0.6em 1.1em 0.95em;
  font-size: calc(1.15 * var(--s));
  letter-spacing: 0;
  color: #fff;
  background: var(--art-street-menu-tag-yellow) center/100% 100% no-repeat;
  rotate: -3deg;
}
.s3-camp .cs-title {
  font-size: calc(2.6 * var(--s));
  white-space: normal;
  text-wrap: balance;
  line-height: 0.95;
  rotate: -3deg;
}
.s3-camp .cs-name {
  margin: 0;
  font-size: calc(2 * var(--s));
  color: #ffd83a;
}
.s3-camp .cs-style {
  margin: -0.2em 0 0;
  padding: 0.25em 0.9em 0.35em;
  border-radius: 0.6em;
  background: #0b1a3ad9;
  color: #fff;
  font-weight: 800;
  font-size: calc(1.05 * var(--s));
}
.s3-camp .cs-description {
  margin: 0;
  width: 100%;
  padding: 1.5em 2.2em 2.4em 2.8em;
  color: var(--ink);
  font-weight: 900;
  font-size: calc(1.1 * var(--s));
  line-height: 1.2;
  text-wrap: balance;
  background: var(--art-street-hud-bubble) center/100% 100% no-repeat;
}
.s3-camp .cs-play {
  width: 100%;
  height: calc(5 * var(--s));
  background: var(--art-street-hud-btn-brush-yellow) center/100% 100% no-repeat;
  font-size: calc(2.5 * var(--s));
  border: 0;
}
.s3-camp .cs-play:hover {
  background-color: transparent;
}
.s3-camp .cs-play:disabled {
  background: var(--art-street-hud-btn-brush-yellow) center/100% 100% no-repeat;
  filter: saturate(0.15) brightness(0.75);
  cursor: default;
}
.s3-camp .street-back {
  position: absolute;
  z-index: 5;
  left: 8px;
  top: 8px;
  height: 42px;
  padding: 0 16px 3px 56px;
  font-size: 16px;
  background: var(--art-street-hud-btn-back) left center/auto 100% no-repeat;
}
.s3-camp .cs-logo {
  display: none;
}
.s3-camp .cs-header {
  padding-left: 118px;
}
.s3-camp .cs-heading {
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 800px) and (max-aspect-ratio: 1/1) {
  .s3-camp .cs-detail {
    grid-template-columns: 86px minmax(0, 1fr);
    border-top: 16px solid transparent;
    padding: 0 2px;
  }
  .s3-camp .cs-detail-copy {
    gap: 3px;
  }
  .s3-camp .cs-description {
    padding: 1.2em 3.6em 1.9em 4em;
    width: auto;
    font-size: calc(0.95 * var(--s));
  }
  .s3-camp .cs-header {
    padding-left: 104px;
    gap: 6px;
  }
  .s3-camp .cs-heading {
    height: 44px;
  }
  .s3-camp .cs-progress {
    font-size: 12px;
    margin-left: auto;
  }
  .s3-camp .cs-opponent {
    scale: 1.3;
    translate: 0 -8%;
  }
  .s3-camp .cs-play {
    height: 44px;
  }
  .arcade-campaign.s3-camp.screen {
    grid-template-rows: 52px 44px minmax(80px, 1fr) 236px;
  }
}

/* ---------- Palco (tela deitada): posições medidas nos mockups ---------- */
@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow.af-s3,
  .arcade-campaign.s3-camp {
    --s: var(--ux);
  }
  /* Sem animação nem transform no contêiner: um transform viraria a referência das peças absolutas. */
  .arcade-flow.af-s3 .af-main {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }
  .arcade-flow.af-s3 .af-header,
  .arcade-flow.af-s3 .af-footer {
    position: static;
    padding: 0;
  }
  .arcade-flow.af-s3 .af-logo {
    position: absolute;
    z-index: 4;
    left: calc(50% - 46.6 * var(--ux));
    top: calc(50% - 47.4 * var(--uy));
    width: calc(9.4 * var(--ux));
    height: auto;
  }
  .arcade-flow.af-s3 .af-progress {
    position: absolute;
    z-index: 4;
    right: calc(50% - 48.6 * var(--ux));
    top: calc(50% - 47 * var(--uy));
    font-size: calc(1.62 * var(--ux));
  }
  .af-s3 .s3-vs,
  .af-s3 .s3-roster,
  .af-s3 .s3-arenas,
  .af-s3 .s3-sets {
    display: contents;
  }
  .arcade-flow.af-s3 .af-title.has-art,
  .arcade-flow.af-s3 .af-button.s3-fighter,
  .af-s3 .s3-vs-mark,
  .arcade-flow.af-s3 .af-button.s3-tile,
  .af-s3 .s3-levels,
  .af-s3 .s3-sides,
  .arcade-flow.af-s3 .af-button.s3-photo,
  .arcade-flow.af-s3 .af-button.s3-set,
  .af-s3 .s3-board,
  .af-s3 .s3-side-title,
  .arcade-flow.af-s3 .af-button.s3-go {
    position: absolute;
    margin: 0;
    left: calc(50% + (var(--x) - 50) * var(--ux));
    top: calc(50% + (var(--y) - 50) * var(--uy));
    width: calc(var(--w) * var(--ux));
    z-index: 3;
  }
  .arcade-flow.af-s3 .af-button.s3-go {
    --x: 74.5;
    --y: 82;
    --w: 24.5;
    height: calc(15.6 * var(--uy));
    padding: 0 0 calc(0.8 * var(--uy));
    font-size: calc(3.9 * var(--ux));
    z-index: 4;
  }
  .arcade-flow.af-s3 .af-button.af-back.af-back-art {
    position: absolute;
    z-index: 4;
    left: calc(50% - 48.7 * var(--ux));
    top: calc(50% + 37.4 * var(--uy));
    height: calc(11 * var(--uy));
    padding: 0 calc(2.4 * var(--ux)) calc(0.4 * var(--uy)) calc(7.6 * var(--ux));
    font-size: calc(3 * var(--ux));
  }
  /* Personagens */
  .af-s3 .s3-crew .af-title.has-art {
    --x: 22.5;
    --y: 3.2;
    --w: 44;
  }
  .arcade-flow.af-s3 .af-button.s3-fighter {
    --x: 8;
    --y: 22.5;
    --w: 35.5;
  }
  .arcade-flow.af-s3 .af-button.s3-fighter[data-side='opponent'] {
    --x: 57;
  }
  .af-s3 .s3-vs-mark {
    --x: 39.4;
    --y: 23.5;
    --w: 21.6;
    translate: none;
  }
  .arcade-flow.af-s3 .af-button.s3-tile {
    --y: 67.5;
    --w: 11.8;
  }
  .arcade-flow.af-s3 .af-button.s3-tile:nth-child(1) {
    --x: 22.4;
    rotate: -2deg;
  }
  .arcade-flow.af-s3 .af-button.s3-tile:nth-child(2) {
    --x: 34.6;
    rotate: 1.5deg;
  }
  .arcade-flow.af-s3 .af-button.s3-tile:nth-child(3) {
    --x: 46.6;
    rotate: -1deg;
  }
  .af-s3 .s3-levels {
    --x: 59;
    --y: 72;
    --w: 29.5;
  }
  /* Arena */
  .af-s3 .s3-arena .af-title.has-art {
    --x: 3;
    --y: 12.5;
    --w: 47.5;
  }
  .arcade-flow.af-s3 .af-button.s3-photo {
    --y: 41;
    --w: 24.6;
    height: auto;
    font-size: calc(2.5 * var(--ux));
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(1) {
    --x: 13.5;
    rotate: -3deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(2) {
    --x: 41.8;
    rotate: 2deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(3) {
    --x: 67.2;
    rotate: -1.5deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true'] {
    scale: 1.16;
  }
  .arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true']:hover {
    scale: 1.2;
  }
  /* Peças */
  .af-s3 .s3-pieces .af-title.has-art {
    --x: 13;
    --y: 3.6;
    --w: 37.5;
  }
  .af-s3 .s3-board {
    --x: 7.6;
    --y: 20.5;
    width: calc(68 * var(--uy));
  }
  .arcade-flow.af-s3 .af-button.s3-set {
    --w: 14.4;
    font-size: calc(1.9 * var(--ux));
  }
  .arcade-flow.af-s3 .af-button.s3-set:nth-child(3n + 1) {
    --x: 50.2;
  }
  .arcade-flow.af-s3 .af-button.s3-set:nth-child(3n + 2) {
    --x: 65.7;
  }
  .arcade-flow.af-s3 .af-button.s3-set:nth-child(3n) {
    --x: 81.2;
  }
  .arcade-flow.af-s3 .af-button.s3-set:nth-child(-n + 3) {
    --y: 21.5;
  }
  .arcade-flow.af-s3 .af-button.s3-set:nth-child(n + 4) {
    --y: 45.5;
  }
  .af-s3 .s3-side-title {
    --x: 49.6;
    --y: 69.6;
    width: auto;
    font-size: calc(2.5 * var(--ux));
  }
  .af-s3 .s3-sides {
    --x: 50;
    --y: 75;
    --w: 46.4;
    font-size: calc(2.2 * var(--ux));
  }
  .af-s3 .s3-levels {
    font-size: calc(2.1 * var(--ux));
  }

  /* Campanha */
  .arcade-campaign.s3-camp.screen {
    display: block;
    padding: 0;
  }
  .s3-camp .cs-header {
    display: contents;
  }
  .s3-camp .cs-logo {
    display: block;
    position: absolute;
    left: calc(50% - 46.6 * var(--ux));
    top: calc(50% - 47.4 * var(--uy));
    width: calc(10 * var(--ux));
    height: auto;
  }
  .s3-camp .cs-heading {
    position: absolute;
    left: calc(50% - 26.5 * var(--ux));
    top: calc(50% - 48 * var(--uy));
    width: calc(36 * var(--ux));
    height: auto;
  }
  .s3-camp .cs-heading-art {
    width: 100%;
    height: auto;
  }
  .s3-camp .cs-progress {
    position: absolute;
    right: calc(50% - 48 * var(--ux));
    top: calc(50% - 44.5 * var(--uy));
    margin: 0;
    font-size: calc(3.2 * var(--ux));
  }
  .s3-camp .cs-marks i {
    width: 0.9em;
    height: 0.72em;
  }
  .s3-camp .cs-tabs {
    position: absolute;
    left: calc(50% - 46.2 * var(--ux));
    top: calc(50% - 33.5 * var(--uy));
    font-size: calc(2.25 * var(--ux));
  }
  .s3-camp .cs-map-viewport {
    position: absolute;
    left: calc(50% - 46.6 * var(--ux));
    top: calc(50% - 21.5 * var(--uy));
    width: calc(60.6 * var(--ux));
    height: calc(60.6 * var(--uy));
    overflow: visible;
    rotate: -1deg;
    box-shadow:
      0 0 0 calc(0.55 * var(--ux)) #fff,
      0 calc(1 * var(--ux)) 0 calc(0.5 * var(--ux)) #07142c59;
    border-radius: calc(0.5 * var(--ux));
  }
  .s3-camp .cs-map-scene {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    border-radius: calc(0.5 * var(--ux));
  }
  .s3-camp .cs-tape {
    display: block;
    position: absolute;
    width: 9%;
    aspect-ratio: 9 / 3.6;
    background: linear-gradient(#ffe27a, #f2b91f);
    border: 0.1em solid var(--ink);
    box-shadow: 0 0.1em 0 #07142c66;
    z-index: 3;
  }
  .s3-camp .cs-tape:nth-of-type(1) {
    left: -2%;
    top: 1%;
    rotate: -38deg;
  }
  .s3-camp .cs-tape:nth-of-type(2) {
    right: -2.5%;
    top: 0;
    rotate: 36deg;
  }
  .s3-camp .cs-tape:nth-of-type(3) {
    left: -2.5%;
    bottom: 1%;
    rotate: 34deg;
  }
  .s3-camp .cs-tape:nth-of-type(4) {
    right: -2.5%;
    bottom: 1%;
    rotate: -36deg;
  }
  .s3-camp .cs-detail {
    position: absolute;
    display: block;
    left: calc(50% + 16.6 * var(--ux));
    top: calc(50% - 29.5 * var(--uy));
    width: calc(32 * var(--ux));
    height: calc(74 * var(--uy));
    border: 0;
    border-image: none;
    background: var(--art-street-menu-camp-card) center/100% 100% no-repeat;
    rotate: 1deg;
  }
  .s3-camp .cs-opponent {
    position: absolute;
    left: -13%;
    top: 9%;
    width: 70%;
    height: 86%;
    object-fit: contain;
    object-position: center bottom;
  }
  .s3-camp .cs-detail-copy {
    position: absolute;
    left: 38%;
    right: 5%;
    top: 3.5%;
    bottom: 4.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
  .s3-camp .cs-eyebrow {
    font-size: calc(1.55 * var(--ux));
  }
  .s3-camp .cs-title {
    font-size: calc(3.9 * var(--ux));
  }
  .s3-camp .cs-name {
    font-size: calc(2.9 * var(--ux));
  }
  .s3-camp .cs-style {
    font-size: calc(1.3 * var(--ux));
  }
  .s3-camp .cs-description {
    font-size: calc(1.22 * var(--ux));
    width: 112%;
  }
  .s3-camp .cs-play {
    height: calc(12 * var(--uy));
    font-size: calc(3.6 * var(--ux));
  }
  .s3-camp .street-back {
    left: calc(50% - 48.7 * var(--ux));
    top: calc(50% + 37.4 * var(--uy));
    height: calc(11 * var(--uy));
    padding: 0 calc(2.4 * var(--ux)) calc(0.4 * var(--uy)) calc(7.6 * var(--ux));
    font-size: calc(3 * var(--ux));
  }
}

/* ---------- Entrada das telas e seleção (juice) ---------- */
.af-s3 .af-route-enter .af-title-art {
  animation: s3-in var(--s3-in) var(--s3-pop) both;
}
.af-s3 .af-route-enter .s3-fighter,
.af-s3 .af-route-enter .s3-tile,
.af-s3 .af-route-enter .s3-pill,
.af-s3 .af-route-enter .s3-photo,
.af-s3 .af-route-enter .s3-set,
.af-s3 .af-route-enter .s3-board {
  animation: s3-in var(--s3-in) var(--s3-pop) both;
  animation-delay: calc(var(--i, 1) * var(--s3-stagger));
}
.af-s3 .af-route-enter :nth-child(2) {
  --i: 2;
}
.af-s3 .af-route-enter :nth-child(3) {
  --i: 3;
}
.af-s3 .af-route-enter :nth-child(4) {
  --i: 4;
}
.af-s3 .af-route-enter :nth-child(5) {
  --i: 5;
}
.af-s3 .af-route-enter :nth-child(6) {
  --i: 6;
}
.af-s3 .af-route-enter .s3-vs-mark {
  animation: s3-slam var(--s3-slam) cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
  animation-delay: calc(4 * var(--s3-stagger));
}
/* Sem opacidade nas animações de entrada: opacidade + scale/translate na mesma animação deixava peças sem pintar
   depois do fim (intermitente; conferido por tools/street2-paintcheck.cjs). */
@keyframes s3-in {
  from {
    scale: 0.6;
    translate: 0 1.2em;
  }
}
@keyframes s3-pick {
  from {
    scale: 0.9;
  }
  55% {
    scale: 1.08;
  }
  to {
    scale: 1;
  }
}
@keyframes s3-slam {
  from {
    scale: 1.7;
  }
  70% {
    scale: 0.94;
  }
  to {
    scale: 1;
  }
}
@keyframes s3-bob {
  0%,
  100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% -14%;
  }
}
.af-s3 .s3-fighter-art {
  animation-name: s3-in;
}
.af-s3 .s3-fighter[data-side='self']:not([data-character='tito']) .s3-fighter-art,
.af-s3 .s3-fighter[data-side='opponent'][data-character='tito'] .s3-fighter-art {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .af-s3 *,
  .s3-camp * {
    animation: none !important;
    transition: none !important;
  }
}
html.reduced .af-s3 *,
html.reduced .s3-camp * {
  animation: none !important;
  transition: none !important;
}

/* Rótulo "Dois jogadores": placa mais larga para a palavra comprida caber (conferido por tools/street2-probe-btn.cjs). */
@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow[data-step='1'] .af-mode-card[data-mode='local'] .af-mode-label {
    left: 3%;
    right: 3%;
    font-size: calc(3.6 * var(--ux));
  }
}

/* ---------- Rodada 2 (advogados do diabo, street3-rodada-1) ---------- */
/* Placa de nome: pincel preto com sublinhado amarelo (era a etiqueta com riscos ciano e vermelho). */
.af-s3 .s3-label,
.af-s3 .s3-name,
.af-s3 .s3-side-title,
.s3-camp .cs-name {
  background: var(--art-street-menu-name-plate) center/100% 100% no-repeat;
}
.af-s3 .s3-label {
  left: 1%;
  right: 1%;
  padding: 0.3em 0.5em 0.62em;
}
.af-s3 .s3-name {
  padding: 0.16em 0.6em 0.42em;
}
.af-s3 .s3-side-title {
  padding: 0.3em 1em 0.62em;
}
.s3-camp .cs-name {
  position: relative;
  padding: 0.2em 0.9em 0.46em;
}
/* Botão de avançar: placa amarela inteira com gotas (arte nova), sem a linha de sombra antiga. */
.arcade-flow.af-s3 .af-button.s3-go,
.arcade-flow.af-s3 .af-button.s3-go:hover,
.arcade-flow.af-s3 .af-button.s3-go:focus {
  background: var(--art-street-menu-btn-go) center/100% 100% no-repeat;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0.4em 0.42em;
}
.af-s3 .s3-go::after {
  display: none;
}
/* Faíscas no canto do botão de avançar (mockups 5 a 7). */
.af-s3 .s3-go::before {
  content: '';
  display: block;
  position: absolute;
  left: -5%;
  top: -30%;
  width: 17%;
  aspect-ratio: 1.5;
  rotate: -38deg;
  background: var(--art-street-menu-sparks-y) center/contain no-repeat;
  pointer-events: none;
}
.s3-camp .cs-play,
.s3-camp .cs-play:disabled {
  background: var(--art-street-menu-btn-go) center/100% 100% no-repeat;
  padding: 0 0.4em 0.42em;
}
/* Voltar: a pastilha vermelha estica até cobrir o texto (antes o texto saía dela). */
.arcade-flow .af-button.af-back.af-back-art,
.s3-camp .street-back {
  background-size: 100% 100%;
}
/* Faíscas amarelas acima do item escolhido. */
.arcade-flow.af-s3 .af-button.s3-tile[aria-pressed='true']::after,
.arcade-flow.af-s3 .af-button.s3-pill[aria-pressed='true']::after,
.arcade-flow.af-s3 .af-button.s3-set[aria-pressed='true']::after,
.s3-camp .cs-tab[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -1.15em;
  width: 1.9em;
  aspect-ratio: 1.5;
  translate: -50% 0;
  background: var(--art-street-menu-sparks-y) center/contain no-repeat;
  pointer-events: none;
}
.arcade-flow.af-s3 .af-button.s3-set[aria-pressed='true']::after {
  left: 66%;
}
.s3-camp .cs-tab[aria-pressed='true']::after {
  left: 12%;
  background-image: var(--art-street-menu-sparks-k);
}
/* Miniaturas com busto grande e fichas maiores nos cartões de conjunto. */
.af-s3 .s3-tile-art {
  height: 128%;
  bottom: -24%;
  clip-path: inset(0 0 33% 0);
}
.af-s3 .s3-pucks canvas {
  width: 62%;
  margin: 0 -9%;
}
/* Campanha: coroas ao lado da etiqueta e do nome, pincelada vermelha sob o título, respingo no canto do mapa. */
.s3-camp .cs-eyebrow {
  position: relative;
}
.s3-camp .cs-eyebrow::after,
.s3-camp .cs-name::after {
  content: '';
  position: absolute;
  right: -1.25em;
  top: 0.15em;
  width: 1.05em;
  aspect-ratio: 24 / 19;
  background: #ffd83a;
  clip-path: polygon(4% 96%, 96% 96%, 100% 22%, 74% 54%, 50% 4%, 26% 54%, 0 22%);
  filter: drop-shadow(0 0 0 var(--ink));
}
.s3-camp .cs-title {
  position: relative;
}
.s3-camp .cs-title::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 6%;
  bottom: -0.3em;
  height: 0.2em;
  border-radius: 60% 40% 55% 45% / 100%;
  background: #ff3d4f;
  rotate: -1.5deg;
  box-shadow: 0.5em 0.16em 0 -0.03em #ff7ab8;
}

@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow.af-s3 .af-progress {
    font-size: calc(1.85 * var(--ux));
  }
  .arcade-flow.af-s3[data-step='2'] .af-progress {
    font-size: calc(1.62 * var(--ux));
  }
  .arcade-flow.af-s3 .af-button.af-back.af-back-art,
  .s3-camp .street-back {
    height: calc(10.6 * var(--uy));
    padding: 0 1em 0.16em 2.75em;
    font-size: calc(2.7 * var(--ux));
  }
  /* Personagens */
  .af-s3 .s3-name {
    font-size: calc(5.7 * var(--ux));
    bottom: 9%;
  }
  .af-s3 .s3-tag {
    font-size: calc(2.15 * var(--ux));
  }
  .af-s3 .s3-levels {
    --x: 59.6;
    --w: 29;
    justify-content: flex-start;
    gap: 0.3em;
    font-size: calc(1.95 * var(--ux));
  }
  .arcade-flow.af-s3 .s3-levels .af-button.s3-pill {
    flex: 0 1 auto;
    padding: 0 0.75em 0.12em;
  }
  /* Arena */
  .af-s3 .s3-arena .af-title.has-art {
    --w: 43.5;
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(1) {
    rotate: -3.5deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(2) {
    rotate: -3deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(3) {
    rotate: -3deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true'] {
    z-index: 5;
  }
  .arcade-flow.af-s3 .af-button.s3-photo .s3-label {
    left: -3%;
    right: -3%;
    bottom: 4%;
    font-size: calc(2.25 * var(--ux));
    white-space: nowrap;
  }
  .arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true']::after {
    content: '';
    position: absolute;
    right: 3%;
    top: -4%;
    width: 22%;
    aspect-ratio: 9 / 3.4;
    rotate: 28deg;
    background: linear-gradient(#ffe27a, #f2b91f);
    border: 0.1em solid var(--ink);
    box-shadow: 0 0.1em 0 #07142c66;
  }
  /* Peças */
  .af-s3 .s3-pieces .af-title.has-art {
    --y: 4.6;
    --w: 35;
  }
  .arcade-flow.af-s3 .af-button.s3-set .s3-label {
    font-size: calc(1.72 * var(--ux));
  }
  .af-s3 .s3-pieces ~ .af-footer .s3-go {
    --y: 83.6;
    height: calc(14 * var(--uy));
  }
  .af-s3 .s3-side-title {
    --y: 69.2;
    font-size: calc(1.9 * var(--ux));
    padding: 0.25em 0.9em 0.55em;
  }
  .af-s3 .s3-sides {
    --y: 75.4;
    font-size: calc(2.05 * var(--ux));
  }
  /* Campanha */
  .s3-camp .cs-opponent {
    left: -27%;
    top: 5%;
    width: 98%;
    height: 91%;
  }
  .s3-camp .cs-node,
  .s3-camp .cs-node:hover,
  .s3-camp .cs-node:active {
    translate: -50% -34%;
  }
  .s3-camp .cs-map-viewport {
    top: calc(50% - 19 * var(--uy));
  }
  .s3-camp .cs-map-viewport::before {
    content: '';
    position: absolute;
    left: -5%;
    bottom: -10%;
    width: 24%;
    aspect-ratio: 1.5;
    z-index: -1;
    background: var(--art-street-hud-splat) center/contain no-repeat;
  }
  .s3-camp .cs-tape:nth-of-type(3) {
    display: none;
  }
  .s3-camp .cs-tabs {
    font-size: calc(1.9 * var(--ux));
  }
  .s3-camp .cs-tab {
    padding: 0.7em 0.85em 1em;
  }
  .s3-camp .cs-title {
    font-size: calc(4.2 * var(--ux));
    -webkit-text-stroke: 0.26em var(--ink);
  }
  .s3-camp .cs-eyebrow {
    font-size: calc(1.9 * var(--ux));
  }
}
/* Faíscas da pílula escolhida no canto direito (no centro batiam no rótulo de cima). */
.arcade-flow.af-s3 .af-button.s3-pill[aria-pressed='true']::after {
  left: 90%;
  top: -0.95em;
  width: 1.5em;
  rotate: 32deg;
}

/* ---------- Rodada 3 (advogados do diabo, street3-rodada-2) ---------- */
/* Faíscas pretas acima da etapa ativa e no canto do botão de avançar. */
.arcade-flow.af-s3 .af-progress li[aria-current] {
  position: relative;
}
.arcade-flow.af-s3 .af-progress li[aria-current]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.75em;
  width: 1.5em;
  aspect-ratio: 1.5;
  translate: -50% 0;
  background: var(--art-street-menu-sparks-k) center/contain no-repeat;
}
.arcade-flow.af-s3 .af-button.s3-go::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: -3%;
  top: -24%;
  width: 16%;
  height: auto;
  aspect-ratio: 1.5;
  rotate: -38deg;
  inset-inline-end: auto;
  bottom: auto;
  background: var(--art-street-menu-sparks-k) center/contain no-repeat !important;
  border: 0;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
/* Seta depois de Continuar na escolha de personagens (mockup 5). */
.af-s3 .s3-crew ~ .af-footer .s3-go > span::after {
  content: ' \2192';
  font-family: var(--font-ui, sans-serif);
  font-style: normal;
  font-weight: 900;
}
/* Cartões de conjunto: nome direto no cartão, com traço amarelo embaixo (sem placa preta). */
.arcade-flow.af-s3 .af-button.s3-set .s3-label {
  background: none;
  bottom: 9%;
}
.arcade-flow.af-s3 .af-button.s3-set .s3-label::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -0.02em;
  height: 0.2em;
  border-radius: 60% 40% 55% 45% / 100%;
  background: #ffd83a;
  box-shadow: 0 0.04em 0 var(--ink);
}
/* Etiqueta da CPU mais para o canto, sem cobrir a orelha. */
.af-s3 .s3-fighter[data-side='opponent'] .s3-tag {
  right: -11%;
  top: -9%;
}
/* Abas inativas da campanha em azul com borda branca. */
.s3-camp .cs-tab {
  background: var(--art-street-menu-pill-blue) center/100% 100% no-repeat;
  padding: 0.62em 1.15em 0.72em;
}
.s3-camp .cs-tab[aria-pressed='true'] {
  padding: 0.7em 1.05em 1em;
}

@media (orientation: landscape) and (min-width: 761px) {
  /* Logo do tamanho do menu de modo: cobre o resto do logo que ficou pintado no fundo. */
  .arcade-flow.af-s3 .af-logo,
  .s3-camp .cs-logo {
    left: calc(50% - 46.2 * var(--ux));
    top: calc(50% - 47.6 * var(--uy));
    width: calc(11.6 * var(--ux));
  }
  .s3-camp .cs-tab {
    padding: 0.62em 1.15em 0.72em;
  }
  .s3-camp .cs-tab[aria-pressed='true'] {
    padding: 0.7em 1.05em 1em;
  }
  /* Campanha: personagem dentro do cartão e coluna de texto com folga para as coroas. */
  .s3-camp .cs-opponent {
    left: -19%;
    width: 88%;
  }
  .s3-camp .cs-detail-copy {
    left: 40%;
    right: 10%;
  }
  .s3-camp .cs-node[aria-pressed='true'] {
    filter: drop-shadow(0 0 0.7em #ffd83a) drop-shadow(0 0 0.25em #fff3a6) var(--s3-drop);
  }
}
@media (orientation: landscape) and (min-width: 761px) {
  .af-s3 .s3-crew ~ .af-footer .s3-go {
    font-size: calc(3.3 * var(--ux));
  }
  .s3-camp .cs-description {
    width: 118%;
    padding: 1.4em 1.7em 2.3em 2.5em;
    font-size: calc(1.15 * var(--ux));
  }
}

/* ---------- Rodada 4 (advogados do diabo, street3-rodada-3) ---------- */
/* Faíscas do botão de avançar em amarelo (as pretas sumiam no muro escuro). */
.arcade-flow.af-s3 .af-button.s3-go::before {
  left: -6%;
  top: -30%;
  width: 21%;
  background: var(--art-street-menu-sparks-y) center/contain no-repeat !important;
}
/* Coroa desenhada à mão com riscos de brilho (arte) na arena escolhida e no nó atual da campanha. */
.af-s3 .s3-crown,
.s3-camp .cs-node-crown {
  background: var(--art-street-menu-crown-sel) center/contain no-repeat;
  clip-path: none;
  aspect-ratio: 420 / 207;
}
.af-s3 .s3-crown::after,
.s3-camp .cs-node-crown::after {
  display: none;
}
.af-s3 .s3-crown {
  width: 44%;
  top: -21%;
}
.s3-camp .cs-node-crown {
  width: 96%;
  top: -50%;
}
.s3-camp .cs-node[data-won='true']:not([aria-pressed='true']) .cs-node-crown {
  width: 70%;
  top: -34%;
}
/* Arena escolhida: anel branco de adesivo por fora do amarelo. */
.arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true'] {
  outline: 0.14em solid #fff;
  outline-offset: 0;
}
/* Cartões de conjunto: mancha de pincel preta atrás do nome, com o traço amarelo da própria arte. */
.arcade-flow.af-s3 .af-button.s3-set .s3-label {
  background: var(--art-street-menu-name-plate) center/100% 100% no-repeat;
  bottom: 7%;
}
.arcade-flow.af-s3 .af-button.s3-set .s3-label::after {
  display: none;
}
/* Miniaturas: a placa do nome fica dentro da moldura. */
.arcade-flow.af-s3 .af-button.s3-tile .s3-label {
  left: 5%;
  right: 5%;
  bottom: 9%;
}

@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(1) {
    rotate: -4.5deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(2) {
    rotate: 3.5deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo:nth-child(3) {
    rotate: -2.5deg;
  }
  .arcade-flow.af-s3 .af-button.s3-photo .s3-label {
    font-size: calc(2.6 * var(--ux));
    padding: 0.34em 0.5em 0.7em;
    bottom: 2%;
  }
  /* Peças: título depois do logo, JOGAR mais baixo e com letra que cabe na placa. */
  .af-s3 .s3-pieces .af-title.has-art {
    --x: 15.4;
    --w: 34;
  }
  .af-s3 .s3-pieces ~ .af-footer .s3-go {
    --y: 84.6;
    font-size: calc(3.5 * var(--ux));
  }
  .af-s3 .s3-side-title {
    font-size: calc(2.3 * var(--ux));
  }
  /* Personagens: bustos dentro do cartão e miniaturas inclinadas como adesivos. */
  .af-s3 .s3-fighter-art {
    height: 104%;
    bottom: 5%;
  }
  .arcade-flow.af-s3 .af-button.s3-tile:nth-child(1) {
    rotate: -4deg;
  }
  .arcade-flow.af-s3 .af-button.s3-tile:nth-child(2) {
    rotate: 2.5deg;
  }
  .arcade-flow.af-s3 .af-button.s3-tile:nth-child(3) {
    rotate: -3deg;
  }
}

/* ---------- Rodada 5 (advogado do diabo das peças, street3-rodada-4) ---------- */
@media (orientation: landscape) and (min-width: 761px) {
  /* Riscos pretos à direita do título (mockup 7). */
  .af-s3 .s3-pieces .af-title.has-art::after {
    content: '';
    position: absolute;
    right: -7%;
    top: 2%;
    width: 11%;
    aspect-ratio: 1.5;
    rotate: 48deg;
    background: var(--art-street-menu-sparks-k) center/contain no-repeat;
  }
  /* JOGAR menor, sem encostar no Aleatório, com as faíscas à vista e a pincelada vermelha sob o texto. */
  .af-s3 .s3-pieces ~ .af-footer .s3-go {
    --x: 76.2;
    --y: 85.6;
    --w: 22.4;
    height: calc(12.6 * var(--uy));
    font-size: calc(3.3 * var(--ux));
  }
  .af-s3 .s3-pieces ~ .af-footer .s3-go > span {
    position: relative;
  }
  .af-s3 .s3-pieces ~ .af-footer .s3-go > span::after {
    content: '';
    position: absolute;
    left: 6%;
    right: -4%;
    bottom: -0.2em;
    height: 0.16em;
    border-radius: 60% 40% 55% 45% / 100%;
    background: #ff3d4f;
    rotate: -2deg;
    z-index: -1;
  }
  /* Nome do conjunto abaixo das fichas, sem tapá-las. */
  .af-s3 .s3-pucks {
    top: 5%;
    height: 50%;
  }
  .arcade-flow.af-s3 .af-button.s3-set .s3-label {
    bottom: 3%;
    font-size: calc(1.6 * var(--ux));
    min-height: 1.7em;
    padding: 0.22em 0.4em 0.5em;
  }
}
/* Nome do conjunto sempre em uma linha, dentro da faixa e do cartão (antes "Violeta Noturno" quebrava e saía da faixa). */
@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow.af-s3 .af-button.s3-set .s3-label {
    left: 2%;
    right: 2%;
    white-space: nowrap;
    font-size: calc(1.36 * var(--ux));
    padding: 0.3em 0.3em 0.62em;
  }
}

/* ---------- Rodada 6 (advogado da campanha, street3-rodada-5) ---------- */
@media (orientation: landscape) and (min-width: 761px) {
  /* Riscos de brilho ao lado do título e do balão. */
  .s3-camp .cs-heading::after {
    content: '';
    position: absolute;
    right: -9%;
    top: 6%;
    width: 13%;
    aspect-ratio: 1.5;
    rotate: 46deg;
    background: var(--art-street-menu-sparks-y) center/contain no-repeat;
  }
  .s3-camp .cs-description {
    position: relative;
    width: 120%;
    padding: 1.5em 2.6em 2.5em 2.7em;
    font-size: calc(1.08 * var(--ux));
  }
  .s3-camp .cs-description::after {
    content: '';
    position: absolute;
    right: -3%;
    top: -12%;
    width: 17%;
    aspect-ratio: 1.5;
    rotate: 50deg;
    background: var(--art-street-menu-sparks-y) center/contain no-repeat;
  }
  /* Respingos de tinta na borda esquerda do painel do mapa. */
  .s3-camp .cs-map-viewport::before {
    left: -8%;
    bottom: auto;
    top: 44%;
    width: 20%;
    z-index: 0;
  }
  .s3-camp .cs-map-viewport::after {
    content: '';
    position: absolute;
    left: -7%;
    top: -9%;
    width: 16%;
    aspect-ratio: 1.5;
    rotate: 160deg;
    background: var(--art-street-hud-splat) center/contain no-repeat;
    z-index: 0;
  }
  .s3-camp .cs-map-scene {
    z-index: 1;
  }
  .s3-camp .cs-tape {
    z-index: 4;
  }
  /* Cartão do adversário um pouco mais alto e sem encostar na borda direita. */
  .s3-camp .cs-detail {
    left: calc(50% + 16 * var(--ux));
    top: calc(50% - 31 * var(--uy));
  }
}
@media (orientation: landscape) and (min-width: 761px) {
  /* Campanha: logo menor para não bater nas abas; respingos aparecendo na borda esquerda do mapa. */
  .s3-camp .cs-logo {
    left: calc(50% - 46.6 * var(--ux));
    top: calc(50% - 47.6 * var(--uy));
    width: calc(9.2 * var(--ux));
  }
  .s3-camp .cs-tabs {
    top: calc(50% - 32.4 * var(--uy));
  }
  .s3-camp .cs-map-viewport::before {
    left: -4.6%;
    top: 40%;
    width: 11%;
  }
  .s3-camp .cs-map-viewport::after {
    left: -3.6%;
    top: -8%;
    width: 11%;
  }
}
@media (orientation: landscape) and (min-width: 761px) {
  /* Respingos por cima da borda do mapa (antes ficavam atrás da cena e não apareciam); título do encontro com margem. */
  .s3-camp .cs-map-viewport::before {
    left: -3.4%;
    top: 38%;
    bottom: auto;
    width: 10%;
    z-index: 3;
  }
  .s3-camp .cs-map-viewport::after {
    left: auto;
    right: -3%;
    top: auto;
    bottom: -7%;
    width: 12%;
    rotate: 0deg;
    z-index: 3;
  }
  .s3-camp .cs-title {
    font-size: calc(3.8 * var(--ux));
  }
}

/* Nó da campanha com o mouse em cima: mantém o próprio deslocamento (o nó é centrado por translate) e só cresce.
   A regra geral de hover trocava o translate, o nó pulava meia largura para o lado, saía de baixo do mouse e voltava. */
.s3-camp button.cs-node:not(:disabled):hover,
.s3-camp button.cs-node:not(:disabled):active {
  translate: -50% -50%;
}
@media (orientation: landscape) and (min-width: 761px) {
  .s3-camp button.cs-node:not(:disabled):hover,
  .s3-camp button.cs-node:not(:disabled):active {
    translate: -50% -34%;
  }
}

/* ======================================================================================================
 * Hover e clique estáveis (conferido por tools/street2-probe-hover.cjs).
 * 1. Nada se move sob o mouse: hover só cresce em volta do centro (scale >= 1), sem subir, andar ou girar;
 *    pressionar mantém o tamanho do hover e muda só o brilho e a sombra. Antes a peça subia ou encolhia, saía
 *    de baixo do mouse, o hover caía, ela voltava e repetia ("vai e volta").
 * 2. A arte não some: regras antigas de hover trocam o "background" inteiro (ex. .arcade-campaign .cs-play:hover);
 *    aqui a arte de cada botão é declarada com !important.
 * ====================================================================================================== */
.arcade-flow.af-s3,
.arcade-campaign.s3-camp {
  --s3-hover: 1.04;
  --s3-press: var(--s3-hover);
}
.arcade-flow.af-s3 .af-button:not(.af-back):is(:hover, :active),
.s3-camp button:not(.cs-node):is(:hover, :active) {
  translate: none !important;
  transform: none !important;
}
.s3-camp button.cs-node:is(:hover, :active) {
  transform: none !important;
}
.arcade-flow.af-s3 .af-button:not(:disabled):active,
.s3-camp button:not(:disabled):active {
  filter: brightness(0.88) drop-shadow(0 0.1em 0 #07142c73) !important;
}

/* Arte travada. */
.arcade-flow.af-s3 .af-button.s3-pill {
  background: var(--art-street-menu-pill-blue) center/100% 100% no-repeat !important;
}
/* Pílula escolhida: a arte amarela inteira, com as gotas penduradas abaixo do botão (o fundo do próprio botão cortava as gotas). */
.arcade-flow.af-s3 .af-button.s3-pill[aria-pressed='true'] {
  background: none !important;
}
.arcade-flow.af-s3 .af-button.s3-pill[aria-pressed='true']::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 150%;
  z-index: -1;
  background: var(--art-street-menu-pill-yellow) center top/100% 100% no-repeat;
  pointer-events: none;
}
.arcade-flow.af-s3 .af-button.s3-fighter {
  background: var(--art-street-menu-crew-card-b) center/100% 100% no-repeat !important;
}
.arcade-flow.af-s3 .af-button.s3-fighter[data-side='self'] {
  background: var(--art-street-menu-crew-card-y) center/100% 100% no-repeat !important;
}
.arcade-flow.af-s3 .af-button.s3-tile,
.arcade-flow.af-s3 .af-button.s3-set {
  background: var(--art-street-menu-tile-b) center/100% 100% no-repeat !important;
}
.arcade-flow.af-s3 .af-button.s3-set[aria-pressed='true'] {
  background: var(--art-street-menu-tile-y) center/100% 100% no-repeat !important;
}
.arcade-flow.af-s3 .af-button.s3-photo {
  background: #fff !important;
}
.arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true'] {
  background: #ffd83a !important;
}
.arcade-flow.af-s3 .af-button.s3-go,
.s3-camp .cs-play,
.s3-camp .cs-play:disabled {
  background: var(--art-street-menu-btn-go) center/100% 100% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}
.s3-camp .cs-tab {
  background: var(--art-street-menu-pill-blue) center/100% 100% no-repeat !important;
  border: 0 !important;
}
.s3-camp .cs-tab[aria-pressed='true'] {
  background: var(--art-street-menu-tag-yellow) center/100% 100% no-repeat !important;
}
.s3-camp .cs-node {
  background: var(--art-street-menu-node-gold) center/contain no-repeat !important;
}
.s3-camp .cs-node[data-locked='true'] {
  background: var(--art-street-menu-node-dark) center/contain no-repeat !important;
}
.s3-camp .street-back,
.arcade-flow .af-button.af-back.af-back-art {
  background: var(--art-street-hud-btn-back) left center/100% 100% no-repeat !important;
}

/* Telas anteriores (menu de modo, Voltar, botões da partida e da vitória): mesma regra, sem subir nem andar. */
.arcade-flow .af-mode-list .af-button.af-mode-card:is(:hover, :active),
.arcade-flow .af-button.af-back.af-back-art:is(:hover, :active),
html.painted .passthrough .hud-bottom .btn:not(:disabled):is(:hover, :active),
html.painted .result-stage > .actions > .btn:not(:disabled):is(:hover, :active) {
  transform: none !important;
  translate: none !important;
}
.arcade-flow .af-mode-list .af-button.af-mode-card,
.arcade-flow .af-button.af-back.af-back-art,
html.painted .passthrough .hud-bottom .btn,
html.painted .result-stage > .actions > .btn {
  transition:
    scale 0.18s cubic-bezier(0.25, 0.8, 0.35, 1),
    filter 0.18s ease-out;
}
.arcade-flow .af-mode-list .af-button.af-mode-card:not(:disabled):active {
  filter: brightness(0.9) drop-shadow(0 3px 0 #07142c73) !important;
}
.arcade-flow .af-button.af-back.af-back-art:not(:disabled):active,
html.painted .passthrough .hud-bottom .btn:not(:disabled):active,
html.painted .result-stage > .actions > .btn:not(:disabled):active {
  filter: brightness(0.88) drop-shadow(0 2px 0 #07142c80) !important;
}
@media (hover: hover) and (pointer: fine) {
  .arcade-flow .af-mode-list .af-button.af-mode-card:not(:disabled):is(:hover, :active) {
    scale: 1.045;
  }
  .arcade-flow .af-button.af-back.af-back-art:not(:disabled):is(:hover, :active),
  html.painted .passthrough .hud-bottom .btn:not(:disabled):is(:hover, :active),
  html.painted .result-stage > .actions > .btn:not(:disabled):is(:hover, :active) {
    scale: 1.04;
  }
}
/* Toque: o :hover fica preso depois do toque no celular, então ali nada cresce. */
@media (hover: none), (pointer: coarse) {
  .arcade-flow.af-s3,
  .arcade-campaign.s3-camp {
    --s3-hover: 1;
  }
  .arcade-flow.af-s3 .af-button.s3-photo[aria-pressed='true']:hover {
    scale: 1.16;
  }
}
html.reduced .arcade-flow .af-mode-list .af-button.af-mode-card,
html.reduced .arcade-flow .af-button.af-back.af-back-art,
html.reduced .passthrough .hud-bottom .btn,
html.reduced .result-stage > .actions > .btn {
  transition: none;
}
/* Menu de modo: Amora e Olívia (arte de corpo inteiro, sem o skate do Tito) ficam abaixo do título "Bora jogar?",
   não embaixo dele. Só o Tito tem a pose própria do mockup. */
@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow[data-step='1'] .af-mode-hero:not([data-character='tito']) {
    top: calc(50% - 21 * var(--uy));
    height: calc(69 * var(--uy));
  }
}

/* End of src/street3.css */

/* End of assets/street3-CvCOH0ll.css */