/*
 * street2-fix: correções das rodadas de crítico (posições e tamanhos medidos nos mockups).
 * Carregado por último. Unidades de palco: --ux = 1% da largura e --uy = 1% da altura de um 16:9 centrado.
 */

/* ---------- Contador: pilha de fichas e coroa das damas ---------- */
.count-row .pile {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.count-row .pile img:not(:last-child) {
  display: none;
}
.count-row .king-ico {
  display: inline-grid;
  place-items: center;
  color: #b9c3d6;
}
.count-row .king-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Partida no PC (duelo lateral), mockup 1 ---------- */
html.painted .street-duel > .street-player .portrait,
html.painted .street-duel > .street-player .street-local-avatar {
  left: -16%;
  top: -4%;
  width: 124% !important;
}
/* O coelho fica deslocado dentro do cartão para deixar à vista a fita e o raio (Tito) e a coroa grafitada (Amora). */
html.painted .street-duel > .street-self .portrait {
  left: -4%;
}
html.painted .street-duel > .street-opponent .portrait,
html.painted .street-duel > .street-opponent .street-local-avatar {
  left: -10%;
}
html.painted .street-duel > .street-player .portrait {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 0 #07142c66);
}
html.painted .street-duel > .street-player .street-player-info {
  top: 54%;
  bottom: 6%;
}
html.painted .street-duel > .street-player .name {
  font-size: clamp(38px, 5.5vw, 76px);
  -webkit-text-stroke: 0.26em var(--street-ink);
}
html.painted .street-duel > .street-player .street-team {
  font-size: clamp(11px, 1vw, 14px);
  margin-top: 10px;
  color: #fff;
  font-weight: 900;
  text-shadow:
    0 1px 0 #05070f,
    1px 0 0 #05070f,
    -1px 0 0 #05070f,
    0 -1px 0 #05070f;
}
/* Placar: pilha | número | coroa em cima do zero das damas. */
html.painted .street-duel > .street-player .count-row {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  row-gap: 0;
  margin-bottom: 9%;
}
html.painted .street-duel > .street-player .count-row .pile,
html.painted .street-duel > .street-player .count-row .num.men {
  grid-row: 1 / 3;
}
html.painted .street-duel > .street-player .count-row .king-ico {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
}
html.painted .street-duel > .street-player .count-row .num.kings {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  text-align: center;
  margin-left: 6px;
  font-size: 26px;
}
html.painted .street-duel > .street-player .count-row .num.men {
  position: relative;
  z-index: 0;
  padding: 6px 14px;
}
html.painted .street-duel > .street-player .count-row .num.men::before {
  content: '';
  position: absolute;
  inset: -4% -8%;
  z-index: -1;
  background: #ffd23c;
  border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%;
  transform: rotate(-7deg);
  box-shadow:
    -0.5em 0.1em 0 -0.32em #ffd23c,
    0.62em -0.16em 0 -0.36em #ffd23c;
}
html.painted .street-duel > .street-opponent .count-row .num.men::before {
  background: #ff5a4c;
  box-shadow:
    -0.5em 0.1em 0 -0.32em #ff5a4c,
    0.62em -0.16em 0 -0.36em #ff5a4c;
}
html.painted .street-duel > .street-player .count-row .pile {
  width: 92px;
  height: 96px;
  margin-right: 2px;
}
html.painted .street-duel > .street-player .count-row .pile img {
  position: absolute;
  display: block;
  width: 74px;
  height: 82px;
  filter: drop-shadow(0 3px 0 #07142c99);
}
html.painted .street-duel > .street-player .count-row .pile img:nth-child(1) {
  left: 0;
  bottom: 0;
}
html.painted .street-duel > .street-player .count-row .pile img:nth-child(2) {
  left: 18px;
  bottom: 6px;
}
html.painted .street-duel > .street-player .count-row .pile img:nth-child(3) {
  left: 8px;
  bottom: 22px;
}
html.painted .street-duel > .street-player .count-row .num {
  font-size: clamp(40px, 4.4vw, 60px);
  -webkit-text-stroke: 0.15em #05070f;
  text-shadow: none;
}
html.painted .street-duel > .street-player .count-row .king-ico {
  width: 38px;
  height: 32px;
  margin-left: 6px;
  opacity: 1;
}
html.painted .street-duel .street-match-status {
  width: min(31vw, 450px);
  height: min(16.5vh, 128px);
  margin-top: 3vh;
  padding: 14px 48px 0;
}
html.painted .street-duel .street-match-status .status {
  font-size: clamp(28px, 4.5vw, 62px);
}
html.painted .street-duel .street-brand {
  left: 1.5vw;
  top: 2vh;
  width: 14.6vw;
  height: auto;
  max-height: none;
  z-index: 0;
}
html.painted .street-duel .hud-bottom.street-controls {
  z-index: 3;
}
html.painted .street-duel .hud-bottom .btn {
  height: min(12.4vh, 98px);
  max-width: none;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 0 #07142c80);
}
html.painted .street-duel .hud-bottom .btn svg {
  stroke-width: 3.2;
}
html.painted .street-duel .hud-bottom .btn > span {
  font-size: clamp(24px, 3.1vw, 42px);
}
html.painted .street-duel .hud-bottom .btn svg {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  filter: drop-shadow(1px 1px 0 var(--street-ink)) drop-shadow(-1px -1px 0 var(--street-ink))
    drop-shadow(1px -1px 0 var(--street-ink)) drop-shadow(-1px 1px 0 var(--street-ink));
}

/* ---------- Vitória em tela deitada: peças nas posições do mockup 4 ---------- */
.result-stage > .result-logo,
.result-stage > .result-floaters {
  display: none;
}
.result-stage .result-extras {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.result-stage .result-extras:empty {
  display: none;
}
.result-stage .campaign-done {
  margin: 0;
  font-weight: 900;
  color: #ffd83a;
  text-shadow: 0 1px 0 var(--street-ink);
}
.result-stage .result-chip .result-clock svg {
  stroke-width: 3;
}
@keyframes floatBob {
  from {
    transform: translateY(0) rotate(var(--r));
  }
  to {
    transform: translateY(-1.2vh) rotate(calc(var(--r) + 6deg));
  }
}

@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  html.painted .modal-card.result.result-stage {
    --ux: min(1vw, 1.7778vh);
    --uy: min(1vh, 0.5625vw);
    display: block;
    padding: 0;
    overflow: hidden;
  }
  .result-stage > * {
    position: fixed;
    margin: 0;
  }
  .result-stage > .result-hero {
    left: calc(50% - 36.5 * var(--ux));
    top: calc(50% - 48.4 * var(--uy));
    width: calc(28.4 * var(--ux));
    height: calc(98 * var(--uy));
  }
  /* Respingo em pé atrás do herói: a arte é deitada (818x364), então gira 90 graus. Alvo x2-22% y18-75%. */
  /* Respingo inteiro atrás do herói (arte tirada do mockup): alvo x2-42% y17-70%. */
  .result-stage > .result-splash {
    left: calc(50% - 57 * var(--ux));
    top: calc(50% - 5 * var(--uy) - 14.6 * var(--ux));
    translate: none;
    rotate: none;
    width: calc(63 * var(--ux));
    aspect-ratio: 1200 / 551;
    background-size: 100% 100%;
  }
  .result-stage > .result-logo {
    display: block;
    left: calc(50% - 49.4 * var(--ux));
    top: calc(50% - 48.6 * var(--uy));
    width: calc(16.2 * var(--ux));
    height: auto;
    z-index: 3;
  }
  /* A arte do título tem riscos em volta das letras: a caixa é maior para as letras ocuparem x47,8-88,2%. */
  .result-stage > .big {
    left: calc(50% - 4.4 * var(--ux));
    top: calc(50% - 47.6 * var(--uy));
    width: calc(44.6 * var(--ux));
    font-size: calc(7 * var(--ux));
    text-align: center;
  }
  .result-stage > .big.has-art img {
    width: 100%;
    max-height: none;
  }
  .result-stage[data-outcome='win'] > .muted {
    display: none;
  }
  .result-stage > .muted {
    left: calc(50% - 2 * var(--ux));
    top: calc(50% - 16 * var(--uy));
    width: calc(40 * var(--ux));
    font-size: calc(1.5 * var(--ux));
  }
  /* A placa (arte 696x224) traz escorridos embaixo: a caixa é mais alta que a cápsula visível (alvo h11,7%). */
  .result-stage > .result-chips {
    left: calc(50% - 5.4 * var(--ux));
    top: calc(50% - 4.2 * var(--uy));
    width: calc(47 * var(--ux));
    flex-wrap: nowrap;
    gap: calc(0.3 * var(--ux));
  }
  .result-stage .result-chip {
    flex: 1 1 0;
    min-width: 0;
    height: calc(17.4 * var(--uy));
    padding: 0 calc(1 * var(--ux)) calc(5.6 * var(--uy)) calc(0.8 * var(--ux));
    column-gap: calc(0.6 * var(--ux));
    justify-content: center;
    align-content: center;
    justify-items: center;
  }
  .result-stage .result-chip img,
  .result-stage .result-chip .result-clock {
    width: calc(4.9 * var(--ux));
    height: calc(8.4 * var(--uy));
  }
  .result-stage .result-chip img {
    transform: scale(1.5) translateY(-8%);
  }
  .result-stage .result-chip .result-clock svg {
    width: calc(4.4 * var(--ux));
    height: calc(4.9 * var(--ux));
    stroke-width: inherit;
  }
  .result-stage .result-chip b {
    font-size: calc(4.1 * var(--ux));
  }
  .result-stage .result-chip small {
    font-size: calc(1.5 * var(--ux));
    font-weight: 1000;
  }
  .result-stage > .result-detail {
    display: none;
  }
  /* A arte do balão tem margem em volta: a caixa é maior para o balão visível ocupar x39-65% y59,5-80%. */
  .result-stage > .quote {
    left: calc(50% - 15.6 * var(--ux));
    top: calc(50% + 6.6 * var(--uy));
    width: calc(35.4 * var(--ux));
    min-width: 0;
    max-width: none;
    height: calc(26.6 * var(--uy));
    display: grid;
    place-items: center;
    padding: calc(4.4 * var(--uy)) calc(6.4 * var(--ux)) calc(6.4 * var(--uy)) calc(9.4 * var(--ux));
    font-size: calc(2.5 * var(--ux)) !important;
    line-height: 1.08 !important;
    background-size: 100% 100%;
    box-sizing: border-box;
  }
  .result-stage > .result-extras {
    left: calc(50% + 15.4 * var(--ux));
    top: calc(50% + 9.5 * var(--uy));
    width: calc(14 * var(--ux));
    max-height: calc(20 * var(--uy));
    overflow: hidden;
    font-size: calc(1.1 * var(--ux));
  }
  .result-stage > .result-rival {
    left: calc(50% + 28.6 * var(--ux));
    right: auto;
    top: calc(50% + 3.4 * var(--uy));
    bottom: auto;
    width: calc(19.6 * var(--ux));
    height: calc(28 * var(--uy));
    object-fit: contain;
  }
  html.painted .result-stage > .actions {
    left: calc(50% - 7.6 * var(--ux));
    top: calc(50% + 28.4 * var(--uy));
    width: calc(61.4 * var(--ux));
    height: calc(16 * var(--uy));
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: calc(1.2 * var(--ux));
  }
  html.painted .result-stage > .actions > .btn {
    min-width: calc(14 * var(--ux));
    height: calc(12.6 * var(--uy));
    margin-bottom: calc(1.2 * var(--uy));
    font-size: calc(2 * var(--ux));
    border-width: 0 calc(2.4 * var(--ux));
    border-image-width: 0 calc(2.4 * var(--ux));
    padding: 0 0 calc(0.8 * var(--uy));
  }
  html.painted .result-stage > .actions > .btn.primary {
    min-width: calc(29.4 * var(--ux));
    height: calc(18.4 * var(--uy));
    font-size: calc(3.3 * var(--ux));
    border-width: 0 calc(3.4 * var(--ux));
    border-image-width: 0 calc(3.4 * var(--ux));
  }
  html.painted .result-stage > .actions > .btn svg {
    width: calc(3 * var(--ux));
    height: calc(3 * var(--ux));
    flex: none;
    stroke-width: 2.6;
  }

  .result-stage > .result-floaters {
    display: block;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .result-floaters img {
    position: absolute;
    left: calc(50% + (var(--x) - 50) * var(--ux));
    top: calc(50% + (var(--y) - 50) * var(--uy));
    width: calc(var(--w) * var(--ux));
    height: auto;
    margin-top: calc(var(--w) * -0.34 * var(--ux));
    scale: 1.25;
    filter: drop-shadow(0 4px 0 #07142c55) blur(var(--b, 0px));
    animation: floatBob 2.6s var(--d) ease-in-out infinite alternate;
  }
  .result-floaters i {
    position: absolute;
    left: calc(50% + (var(--x) - 50) * var(--ux));
    top: calc(50% + (var(--y) - 50) * var(--uy));
    width: calc(2.5 * var(--ux));
    height: calc(1.25 * var(--ux));
    border-radius: 3px;
    box-shadow: 0 2px 0 #07142c40;
    background: var(--c);
    transform: rotate(var(--r));
  }
}
html.reduced .result-floaters img {
  animation: none;
  transform: rotate(var(--r));
}
@media (prefers-reduced-motion: reduce) {
  .result-floaters img {
    animation: none;
    transform: rotate(var(--r));
  }
}

/* ---------- Rodada 4: enfeites que os advogados do diabo cobraram ---------- */
/* Riscos de faísca à direita da faixa de turno. */
html.painted .passthrough .street-match-status::after {
  content: '';
  position: absolute;
  right: -4%;
  top: -8%;
  width: 13%;
  aspect-ratio: 1;
  pointer-events: none;
  background:
    linear-gradient(#ffd83a, #ffd83a) 20% 78% / 46% 13% no-repeat,
    linear-gradient(#ffd83a, #ffd83a) 52% 46% / 46% 13% no-repeat,
    linear-gradient(#ffd83a, #ffd83a) 78% 10% / 40% 13% no-repeat;
  transform: rotate(-38deg);
  filter: drop-shadow(0 0 0 var(--street-ink)) drop-shadow(1px 1px 0 var(--street-ink))
    drop-shadow(-1px -1px 0 var(--street-ink));
}
html.painted .passthrough .street-match-status {
  position: relative;
}

/* Celular em pé: borda de concreto sob o jogador, coroa sobre a placa do adversário, ícones maiores. */
html.painted .street-tall > .street-self::after {
  content: '';
  position: absolute;
  left: -8px;
  bottom: -9px;
  width: 40%;
  height: 2.1vh;
  border-radius: 0 8px 8px 0;
  background: var(--art-street-table-top) 30% 4% / 520% auto;
  box-shadow:
    0 0 0 2px var(--street-ink),
    0 3px 0 2px #07142c66;
  z-index: 1;
}
html.painted .street-tall > .street-self .street-pose,
html.painted .street-tall > .street-self .portrait {
  bottom: 6px;
  z-index: 0;
}
html.painted .street-tall > .street-self .street-pose {
  max-height: 27vh;
}
html.painted .street-tall > .street-opponent .name {
  position: relative;
}
html.painted .street-tall > .street-opponent .name::before {
  content: '';
  position: absolute;
  left: -2%;
  top: -34%;
  width: 26%;
  aspect-ratio: 24 / 20;
  transform: rotate(-12deg);
  background: #ffd23c;
  clip-path: polygon(4% 96%, 96% 96%, 100% 24%, 74% 52%, 50% 0, 26% 52%, 0 24%);
  filter: drop-shadow(0 0 0 var(--street-ink)) drop-shadow(1.5px 1.5px 0 var(--street-ink))
    drop-shadow(-1.5px -1.5px 0 var(--street-ink));
}
html.painted .street-tall .hud-bottom .btn svg {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  stroke-width: 3;
}
html.painted .passthrough .hud-bottom .btn > span {
  color: #fff !important;
}
html.painted .street-tall .street-brand {
  width: 35%;
  right: 2.5%;
}

/* Fichas com coroa em arte (sem a margem dos ícones gerados por código). */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  .result-floaters img.art {
    margin-top: 0;
    scale: 1;
  }
  .result-stage .result-chip img {
    transform: none;
    object-fit: contain;
  }
}

/* ---------- Rodada 5 ---------- */
/* Riscos de brilho ao lado do balão da vitória. */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  .result-stage > .quote::after {
    content: '';
    position: absolute;
    right: calc(1.2 * var(--ux));
    top: 44%;
    width: calc(3.4 * var(--ux));
    aspect-ratio: 1;
    background:
      linear-gradient(#ffd83a, #ffd83a) 10% 18% / 52% 15% no-repeat,
      linear-gradient(#ffd83a, #ffd83a) 50% 50% / 56% 15% no-repeat,
      linear-gradient(#ffd83a, #ffd83a) 14% 84% / 48% 15% no-repeat;
    transform: rotate(-14deg);
  }
  .result-stage > .result-hero {
    top: calc(50% - 50 * var(--uy));
  }
}
/* Celular em pé: botões e faixa de turno do tamanho do mockup (a arte tem margem em volta). */
html.painted .street-tall .hud-bottom .btn {
  height: min(10.4vh, 90px);
}
html.painted .street-tall .hud-bottom .btn > span {
  font-size: clamp(16px, 5.2vw, 23px);
}
html.painted .street-tall .hud-top .street-match-status .status {
  font-size: clamp(24px, 8.4vw, 36px);
}

/* ---------- Rodada 6 ---------- */
/* Respingos de tinta em volta dos botões (mockup: amarelo à esquerda do DICA, azul à direita do MENU). */
html.painted .street-duel .hud-bottom.street-controls {
  position: absolute;
}
html.painted .street-duel .hud-bottom.street-controls::before,
html.painted .street-duel .hud-bottom.street-controls::after {
  content: '';
  position: absolute;
  bottom: 2%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
html.painted .street-duel .hud-bottom.street-controls::before {
  left: -22px;
  background: #ffd23c;
  box-shadow:
    14px -18px 0 3px #ffd23c,
    -8px -30px 0 -1px #ffd23c,
    26px 6px 0 1px #ffd23c,
    4px 12px 0 -2px #ffd23c,
    -16px -6px 0 -2px #ffd23c,
    34px -34px 0 -2px #ffd23c;
}
html.painted .street-duel .hud-bottom.street-controls::after {
  right: -20px;
  bottom: 46%;
  background: #2f7bff;
  box-shadow:
    -14px 16px 0 3px #2f7bff,
    10px -14px 0 -1px #2f7bff,
    -28px 30px 0 1px #2f7bff,
    6px 22px 0 -2px #2f7bff,
    18px 4px 0 -2px #2f7bff,
    -6px -30px 0 -2px #2f7bff;
}
/* Faixa de turno e nomes com contorno preto grosso e sombra dura. */
html.painted .street-duel .street-match-status .status {
  -webkit-text-stroke: 0.24em #05070f;
  text-shadow: 0 0.1em 0 #05070f;
}
html.painted .street-duel > .street-player .name {
  font-size: clamp(34px, 4.5vw, 62px);
  -webkit-text-stroke: 0.2em #05070f;
  text-shadow: 0 0.08em 0 #05070f;
}

/* ---------- Rodada 7: giros e alinhamentos da vitória ---------- */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  .result-stage > .result-chips {
    rotate: -3deg;
  }
  .result-stage > .quote {
    rotate: -4deg;
  }
  .result-stage .result-chip small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    font-size: calc(1.3 * var(--ux));
    letter-spacing: 0.02em;
  }
  html.painted .result-stage > .actions {
    align-items: center;
    top: calc(50% + 29.6 * var(--uy));
  }
  html.painted .result-stage > .actions > .btn {
    margin-bottom: 0;
  }
  html.painted .result-stage > .actions > .btn.primary {
    min-width: calc(27 * var(--ux));
  }
  .result-stage > .big {
    top: calc(50% - 49.4 * var(--uy));
    width: calc(48 * var(--ux));
    left: calc(50% - 5.4 * var(--ux));
  }
}

/* ---------- Rodada 8 ---------- */
/* Raio amarelo à esquerda do Tito (mockup x7-10% y40-44%): por cima do retrato, que cobria o raio da arte do cartão. */
.street-bolt {
  display: none;
}
html.painted .street-duel > .street-self > .street-bolt {
  display: block;
  position: absolute;
  left: 12%;
  top: 35%;
  width: 13%;
  aspect-ratio: 10 / 13;
  z-index: 2;
  pointer-events: none;
  background: #ffd23c;
  clip-path: polygon(58% 0, 100% 0, 62% 40%, 96% 40%, 18% 100%, 42% 54%, 6% 54%);
  filter: drop-shadow(1.5px 0 0 #0b1a3a) drop-shadow(-1.5px 0 0 #0b1a3a)
    drop-shadow(0 1.5px 0 #0b1a3a) drop-shadow(0 -1.5px 0 #0b1a3a);
  transform: rotate(-8deg);
}
/* Faíscas da faixa de turno inteiras (não cortadas pelo topo) e três riscos. */
html.painted .street-duel .street-match-status::after {
  right: -7%;
  top: 6%;
  width: 14%;
}
/* Legenda e placar nas alturas do mockup. */
html.painted .street-duel > .street-player .street-team {
  font-size: clamp(13px, 1.25vw, 18px);
  margin-top: 16px;
}
html.painted .street-duel > .street-player .count-row {
  margin-bottom: 5%;
}
html.painted .street-duel > .street-player .count-row .king-ico {
  color: transparent;
}
html.painted .street-duel > .street-player .count-row .king-ico svg path {
  fill: none;
  stroke: #e6ecf7;
  stroke-width: 2.4;
}
html.painted .street-duel .hud-bottom .btn svg {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  stroke-width: 3.6;
}
html.painted .street-duel .hud-bottom .btn.hint svg {
  color: #fff6b8;
}

/* Vitória: herói 4% mais alto na tela e folga entre as fichas de estatística. */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  .result-stage > .result-hero {
    top: calc(50% - 49 * var(--uy));
    height: calc(93.5 * var(--uy));
  }
  .result-stage > .result-chips {
    gap: calc(1.3 * var(--ux));
  }
  .result-stage > .result-rival {
    left: calc(50% + 28 * var(--ux));
    top: calc(50% + 5 * var(--uy));
    height: calc(25.4 * var(--uy));
  }
}

/* Fita dourada do canto superior esquerdo (Tito) e coroa grafitada ciano (Amora): por cima dos retratos, como no mockup 1. */
.street-tape,
.street-crown {
  display: none;
}
html.painted .street-duel > .street-self > .street-tape {
  display: block;
  position: absolute;
  left: 15%;
  top: 10%;
  width: 15%;
  aspect-ratio: 9 / 5;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-24deg);
  background: linear-gradient(#ffe27a, #f2b91f);
  border: 2px solid #0b1a3a;
  border-radius: 2px;
  box-shadow: 0 2px 0 #07142c66;
}
html.painted .street-duel > .street-opponent > .street-crown {
  display: block;
  position: absolute;
  left: 4%;
  top: 30%;
  width: 15%;
  aspect-ratio: 24 / 20;
  z-index: 2;
  pointer-events: none;
  color: #4fd8ff;
  transform: rotate(-10deg);
  filter: drop-shadow(0 0 3px #4fd8ff99);
}
html.painted .street-duel > .street-opponent > .street-crown svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Rodada 9: retrato parado na pose do mockup 1 (duelo do PC) ---------- */
.street-duel-pose {
  display: none;
}
html.painted .street-duel > .has-duelpose > .portrait {
  display: none;
}
html.painted .street-duel > .street-player > .street-duel-pose {
  display: block;
  position: absolute;
  left: 53%;
  top: 1%;
  height: 66%;
  width: auto;
  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)
    drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 0 #07142c66);
}
html.painted .street-duel > .street-self > .street-duel-pose {
  left: 60%;
}
/* A arte do Tito olha para a direita e as outras para a esquerda: espelha quando o personagem está do outro lado. */
html.painted .street-duel > .street-self:not([data-character='tito']) > .street-duel-pose,
html.painted .street-duel > .street-opponent[data-character='tito'] > .street-duel-pose {
  scale: -1 1;
}

/* ---------- Rodada 10: o texto nunca sai da área útil do botão (conferido por tools/street2-probe-btn.cjs) ---------- */
/* Cada botão cresce com o próprio texto (Desfazer fica mais largo que Dica) em vez de três larguras iguais. */
html.painted .passthrough .hud-bottom .btn {
  flex: 1 1 auto;
  min-width: max-content;
}
html.painted .passthrough .hud-bottom .btn > span {
  white-space: nowrap;
}
html.painted .street-duel .hud-bottom .btn > span {
  font-size: clamp(24px, 2.7vw, 38px);
}
html.painted .street-tall .hud-bottom.street-controls {
  gap: 4px;
}
html.painted .street-tall .hud-bottom .btn {
  border-width: 0 19px;
  border-image-width: 0 19px;
  margin: 0;
  gap: 3px;
  padding-left: 0;
  padding-right: 0;
}
html.painted .street-tall .hud-bottom .btn > span {
  font-size: clamp(12px, 3.9vw, 20px);
}
html.painted .street-tall .hud-bottom .btn svg {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}
/* Palavras compridas em qualquer idioma: o rótulo encolhe sozinho (src/ui/fit-label.ts). */

/* Texto da faixa de turno: encolhe e quebra em duas linhas quando a frase é comprida (tamanho vem de hud.ts). */
.street-match-status .status .status-fit {
  display: inline-block;
  line-height: 1.02;
  text-wrap: balance;
  text-align: center;
  overflow: visible;
}
.street-match-status .status {
  max-width: 100%;
}

/* Estrelas da vitória no lugar do mockup 4 (x56-77%, y33-42%). */
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  .result-stage > .result-stars {
    left: calc(50% + 6.4 * var(--ux));
    top: calc(50% - 17.6 * var(--uy));
    width: calc(20.6 * var(--ux));
    gap: calc(0.4 * var(--ux));
    rotate: -3deg;
  }
  .result-stage > .result-stars svg {
    width: calc(6.4 * var(--ux));
  }
}

/* ---------- Rodada 9 (pedido do William, 13/11): nada torto, rótulo dentro da placa, balão sem cobrir as placas ---------- */
/* Ficha enfeite em camada própria: sem isso o navegador redesenha a sombra a cada quadro e a ficha treme. */
.result-floaters img {
  will-change: transform;
}
@media (orientation: landscape) and (min-width: 761px) and (min-height: 441px) {
  .result-stage > .result-chips,
  .result-stage > .quote,
  .result-stage > .result-stars {
    rotate: none;
  }
  .result-stage .result-chip {
    padding-bottom: calc(7.4 * var(--uy));
  }
  .result-stage .result-chip b {
    font-size: calc(3.3 * var(--ux));
  }
  .result-stage .result-chip small {
    font-size: calc(1.25 * var(--ux));
    line-height: 1.1;
  }
  .result-stage > .quote {
    top: calc(50% + 10.4 * var(--uy));
    height: calc(23 * var(--uy));
  }
}
/* Fora do palco fixo (celular): o rótulo fica dentro da parte cheia da placa, acima dos escorridos. */
@media not ((orientation: landscape) and (min-width:761px) and (min-height:441px)) {
  .result-stage .result-chip {
    padding-bottom: 27px;
    padding-top: 6px;
  }
  .result-stage .result-chips {
    gap: 4px 10px;
  }
  .result-stage .result-chip small {
    font-size: 10px;
    line-height: 1;
  }
}

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

/* End of assets/street2-fix-BiEKJt3A.css */