/*
 * Título de rua em texto (src/ui/street-title.ts): substitui os títulos que eram arte, para o jogo ter vários idiomas.
 * Camada de trás: contorno preto grosso + borda branca de adesivo + pincelada sob a palavra de destaque.
 * Camada da frente: só o preenchimento (branco; destaque em amarelo). Letras com giro e altura alternados.
 * --st-max é o teto do tamanho; o script encolhe (--fit) até o título caber na largura do elemento pai.
 */
.street-title {
  --st-max: 1em;
  position: relative;
  display: inline-block;
  vertical-align: top;
  isolation: isolate;
  white-space: nowrap;
  font-family: var(--font-street);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
  font-size: calc(var(--st-max) * var(--fit, 1));
  text-align: left;
  rotate: -4deg;
  color: #fff;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.street-title .st-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Letra um pouco mais alta que larga, como o pincel dos títulos pintados (a Lilita é larga). */
.street-title .st-deco {
  position: relative;
  display: block;
  transform: skewX(-9deg) scaleY(1.14);
}
.street-title .st-fill {
  position: relative;
  display: block;
  z-index: 2;
  color: #fff;
}
.street-title .st-fill .hl {
  color: #ffd83a;
}
.street-title .st-stroke {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  color: #05070f;
  -webkit-text-stroke: 0.26em #05070f;
  filter: drop-shadow(0.07em 0 0 #fff) drop-shadow(-0.07em 0 0 #fff) drop-shadow(0 0.07em 0 #fff)
    drop-shadow(0 -0.07em 0 #fff) drop-shadow(0 0.12em 0 #07142c99);
}
.street-title .st-ch {
  display: inline-block;
  rotate: var(--r);
  translate: 0 var(--y);
}
.street-title .st-part {
  position: relative;
}
/* Pincelada com gotas sob a palavra de destaque (arte sem letra). */
.street-title .st-stroke .st-u::before {
  content: '';
  position: absolute;
  left: -4%;
  right: -8%;
  bottom: -0.34em;
  height: 0.5em;
  z-index: -1;
  rotate: -2deg;
  background: var(--art-street-menu-brush-red) center/100% 100% no-repeat;
}
.street-title.st-under-yellow .st-stroke .st-u::before {
  background-image: var(--art-street-menu-tag-yellow);
  height: 0.66em;
  bottom: -0.5em;
}
.street-title.st-under-none .st-stroke .st-u::before {
  display: none;
}
/* Meio-tom rosa atrás da primeira palavra, como nos títulos pintados. */
.street-title::before {
  content: '';
  position: absolute;
  left: -7%;
  top: -16%;
  width: 60%;
  height: 118%;
  z-index: -1;
  opacity: 0.8;
  background: radial-gradient(circle, #ff4f7b 34%, transparent 38%) 0 0/0.16em 0.16em;
  mask: radial-gradient(ellipse at 40% 55%, #000 22%, transparent 68%);
  -webkit-mask: radial-gradient(ellipse at 40% 55%, #000 22%, transparent 68%);
}
.street-title.st-under-none::before {
  display: none;
}
.street-title.st-lines {
  line-height: 0.86;
}

/* ---------- Onde cada título mora (teto do tamanho e largura da caixa) ---------- */
.arcade-flow .af-title.has-art {
  letter-spacing: 0;
  text-shadow: none;
}
.arcade-flow .af-title.has-art .street-title {
  --st-max: clamp(30px, 8vw, 64px);
}
.arcade-flow[data-step='1'] .af-title.has-art {
  width: clamp(210px, 25vw, 400px);
}
.arcade-flow[data-step='1'] .af-title.has-art .street-title {
  --st-max: clamp(40px, 11vw, 96px);
}
/* Flex (não grid): numa grade a coluna se mede pelo próprio texto e o VS não encolhe. */
.af-s3 .s3-vs-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 684 / 760;
  background: var(--art-street-menu-vs-burst) center/contain no-repeat;
  pointer-events: none;
}
.af-s3 .s3-vs-word {
  display: block;
  flex: none;
  width: 60%;
  text-align: center;
}
.af-s3 .s3-vs-mark .street-title {
  --st-max: 30em;
  rotate: -9deg;
}
/* Letra enorme: contorno e borda branca mais finos em proporção (eles crescem junto com a letra). */
.af-s3 .s3-vs-mark .street-title .st-stroke {
  -webkit-text-stroke: 0.15em #05070f;
  filter: drop-shadow(0.035em 0 0 #fff) drop-shadow(-0.035em 0 0 #fff) drop-shadow(0 0.035em 0 #fff)
    drop-shadow(0 -0.035em 0 #fff) drop-shadow(0 0.06em 0 #07142c99);
}
.s3-camp .cs-heading .street-title {
  --st-max: 9vw;
}
.result-stage > .big.has-art .street-title {
  --st-max: 14vw;
}
@media (orientation: portrait), (max-width: 760px) {
  /* Título depois do Voltar (que fica solto no canto) e sem a coroa, que não cabe no topo estreito. */
  .s3-camp .cs-heading {
    width: 40vw;
    flex: none;
    margin-left: 22px;
  }
  .s3-camp .cs-heading::before {
    display: none;
  }
  /* As nove fichas do progresso não cabem ao lado do título no celular: fica só o número (0/9). */
  .s3-camp .cs-marks {
    display: none;
  }
}
@media (orientation: landscape) and (min-width: 761px) {
  .arcade-flow[data-step='1'] .af-title.has-art {
    width: calc(22.6 * var(--ux));
  }
  .arcade-flow[data-step='1'] .af-title.has-art .street-title {
    --st-max: calc(9.6 * var(--ux));
  }
  .arcade-flow.af-s3 .af-title.has-art .street-title {
    --st-max: calc(6.6 * var(--ux));
  }
  .s3-camp .cs-heading .street-title {
    --st-max: calc(8 * var(--ux));
  }
}
/* A vitória só tem palco (--ux) em tela deitada com 441 px de altura ou mais. */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  .result-stage > .big.has-art .street-title {
    --st-max: calc(11 * var(--ux));
  }
}
/* Coroa grafitada à esquerda de CAMPANHA (arte sem letra). */
.s3-camp .cs-heading {
  position: relative;
}
.s3-camp .cs-heading::before {
  content: '';
  position: absolute;
  left: -13%;
  top: -14%;
  width: 24%;
  aspect-ratio: 420 / 207;
  rotate: -18deg;
  background: var(--art-street-menu-crown-sel) center/contain no-repeat;
  z-index: 2;
}

/* Caixas com largura definida: numa grade de coluna automática a caixa crescia com o texto e o título não encolhia. */
/* Folga dentro da coluna: o título girado passa um pouco da própria caixa. */
.result-stage > .big.has-art {
  min-width: 0;
  max-width: min(calc(100vw - 32px), calc(100% - 28px));
  justify-self: stretch;
  text-align: center;
}
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  /* O título girado e alongado passava do topo da tela. */
  .result-stage > .big.has-art {
    top: calc(50% - 46 * var(--uy));
  }
}
/* Tela em pé com muito conteúdo: centraliza sem transbordar para cima (o título sumia no topo). */
.arcade-flow.af-s3 .af-main {
  justify-content: safe center;
}

/* ---------- Ajustes depois dos advogados (titulos-texto/) ---------- */
/* Borda branca de adesivo mais fina (o mockup tem contorno escuro com borda clara discreta). */
.street-title .st-stroke {
  filter: drop-shadow(0.045em 0 0 #fff) drop-shadow(-0.045em 0 0 #fff) drop-shadow(0 0.045em 0 #fff)
    drop-shadow(0 -0.045em 0 #fff) drop-shadow(0 0.1em 0 #07142c99);
}
/* Coroa sobre o "V" de VITÓRIA (estava dentro da arte antiga do título). */
.result-stage > .big.has-art::before {
  content: '';
  position: absolute;
  left: 4%;
  top: -26%;
  width: 15%;
  aspect-ratio: 420 / 207;
  rotate: -14deg;
  background: var(--art-street-menu-crown-sel) center/contain no-repeat;
  z-index: 3;
  pointer-events: none;
}
/* Faíscas do botão de avançar por cima da placa (ficavam escondidas atrás dela). */
.arcade-flow.af-s3 .af-button.s3-go::before {
  z-index: 2;
}
@media (orientation: landscape) and (min-width: 761px) {
  /* Alturas e lugares dos títulos no palco 16:9 (mockups 5 a 8). */
  .af-s3 .s3-crew .af-title.has-art {
    --y: 8;
  }
  .af-s3 .s3-arena .af-title.has-art {
    --x: 14.5;
    --y: 12.5;
    --w: 40;
  }
  .af-s3 .s3-pieces .af-title.has-art {
    --y: 7.2;
  }
  .s3-camp .cs-heading {
    top: calc(50% - 45.6 * var(--uy));
  }
  .s3-camp .cs-heading::before {
    left: -17%;
    top: -4%;
  }
  /* Faíscas amarelas dos dois lados de "Escolha sua crew" (mockup 5). */
  .af-s3 .s3-crew .af-title.has-art::before,
  .af-s3 .s3-crew .af-title.has-art::after {
    content: '';
    position: absolute;
    top: -6%;
    width: 9%;
    aspect-ratio: 1.5;
    background: var(--art-street-menu-sparks-y) center/contain no-repeat;
    pointer-events: none;
  }
  .af-s3 .s3-crew .af-title.has-art::before {
    left: -7%;
    rotate: -40deg;
  }
  .af-s3 .s3-crew .af-title.has-art::after {
    right: 4%;
    top: -10%;
    rotate: 40deg;
  }
}
/* Faíscas do avançar: pretas com contorno amarelo (como no mockup) e maiores, para não sumir no muro. */
/* Ficam ao lado do canto do botão, não acima: acima, a fileira de dificuldade (camada mais alta) cobria as faíscas. */
.arcade-flow.af-s3 .af-button.s3-go::before {
  background: var(--art-street-menu-sparks-k) center/contain no-repeat !important;
  width: 18%;
  left: -13%;
  top: -8%;
  rotate: -60deg;
}

/* End of src/street-title.css */

/* End of assets/street-title-CaZVQQ5R.css */