/*
 * street2: camada final da identidade de rua (HUD da partida, botões, faixa de turno).
 * Carregada por último em main.ts; substitui as caixas azul-marinho pelas artes de public/street/hud.
 * Toda arte entra por variável --art-street-hud-* (definida em art/library.ts depois do decode).
 */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./lilita-one-400-87r-Z-Re.woff2') format('woff2');
}

:root {
  --font-street: 'Knewave', 'Lilita One', 'Nunito', system-ui, sans-serif;
  --street-ink: #0b1a3a;
}

/* Letra de rua: branca, inclinada, com contorno escuro grosso. */
html.painted .street-duel > .street-player .name,
html.painted .street-duel > .street-player .count-row .num,
html.painted .passthrough .street-match-status .status,
html.painted .passthrough .hud-bottom .btn > span {
  font-family: var(--font-street);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.22em var(--street-ink);
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--street-ink);
}

/* ---------- Cartões dos jogadores (PC, duelo lateral) ---------- */
html.painted .street-duel > .street-player {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  overflow: visible;
  background: var(--art-street-hud-card-b) center/contain no-repeat;
  filter: drop-shadow(0 7px 0 #07142c80) saturate(0.82) brightness(0.9);
  transition:
    filter 0.22s ease-out,
    transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1);
}
html.painted .street-duel > .street-player.street-self {
  background-image: var(--art-street-hud-card-a);
}
html.painted .street-duel > .street-player.is-active {
  background-color: transparent;
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 0 16px #ffd83acc) drop-shadow(0 9px 0 #07142c80);
}
html.painted .street-duel > .street-player .portrait,
html.painted .street-duel > .street-player .street-local-avatar {
  position: absolute;
  left: -4%;
  top: -17%;
  width: 108% !important;
  height: auto !important;
  aspect-ratio: 1;
  max-height: none;
  filter: drop-shadow(0 4px 0 #07142c66);
}
html.painted .street-duel > .street-player .street-player-info {
  position: absolute;
  left: 0;
  right: 0;
  top: 57%;
  bottom: 7%;
  width: auto;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 0;
  text-align: center;
}
html.painted .street-duel > .street-player .name {
  font-size: clamp(34px, 4.1vw, 56px);
  line-height: 1;
  transform: rotate(-6deg);
  white-space: nowrap;
  overflow: visible;
}
html.painted .street-duel > .street-player .street-team {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 8px;
  text-shadow: 0 1px 0 var(--street-ink);
}
html.painted .street-duel > .street-player .count-row {
  gap: 8px;
  align-self: end;
  margin-bottom: 6%;
}
html.painted .street-duel > .street-player .count-row .num {
  font-size: 42px;
  line-height: 1;
  min-width: 48px;
}
html.painted .street-duel > .street-player .count-row .king-ico {
  width: 26px;
  height: 30px;
  margin-left: 14px;
  opacity: 0.9;
}
html.painted .street-duel > .street-player .count-row .num.kings {
  font-size: 22px;
  min-width: 18px;
  color: #e6eeff;
}
html.painted .street-duel > .street-player.is-active .street-player-info,
html.painted .street-duel > .street-player .street-player-info {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---------- Faixa de turno ---------- */
html.painted .passthrough .street-match-status {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
  padding: 0 34px 4px;
  height: 100%;
  display: grid;
  place-items: center;
  transform: rotate(-3deg);
  background: var(--art-street-hud-banner) center/contain no-repeat;
}
html.painted .street-duel .street-match-status {
  width: 340px;
  height: 108px;
  margin-top: -6px;
  padding: 14px 40px 0;
}
html.painted .passthrough .street-match-status .status {
  font-size: clamp(20px, 2.7vw, 36px);
  line-height: 1;
  white-space: nowrap;
}
html.painted .passthrough .street-match-status .timer {
  color: var(--street-ink);
  font-weight: 900;
}

/* ---------- Botões de ação ---------- */
html.painted .passthrough .hud-bottom.street-controls {
  align-items: center;
  gap: 14px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.painted .passthrough .hud-bottom .btn {
  height: 72px;
  min-height: 0;
  padding: 0 2px 5px;
  gap: 9px;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  color: #fff !important;
  flex: 1 1 0;
  max-width: 260px;
  border-style: solid;
  border-color: transparent;
  border-width: 0 36px;
  border-image: var(--art-street-hud-btn-blue) 0 112 fill / 0 36px stretch;
  filter: drop-shadow(0 5px 0 #07142c80);
  transition:
    transform 0.09s ease-out,
    filter 0.09s ease-out;
}
html.painted .passthrough .hud-bottom .btn.hint {
  border-image-source: var(--art-street-hud-btn-yellow);
}
html.painted .passthrough .hud-bottom .btn > span {
  font-size: 26px;
  line-height: 1;
}
html.painted .passthrough .hud-bottom .btn:nth-child(n):disabled,
html.painted .passthrough .hud-bottom .btn:nth-child(n) {
  background: none !important;
  box-shadow: none !important;
  color: #fff !important;
}
html.painted .passthrough .hud-bottom .btn svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: #fff;
  stroke-width: 2.6;
  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)) drop-shadow(1.5px -1.5px 0 var(--street-ink))
    drop-shadow(-1.5px 1.5px 0 var(--street-ink));
}
html.painted .passthrough .hud-bottom .btn:not(:disabled):hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 7px 0 #07142c80) brightness(1.06);
}
html.painted .passthrough .hud-bottom .btn:not(:disabled):active {
  transform: translateY(4px);
  filter: drop-shadow(0 1px 0 #07142c80);
}
html.painted .passthrough .hud-bottom .btn:disabled {
  filter: drop-shadow(0 5px 0 #07142c80) saturate(0.35) brightness(0.72);
  opacity: 1;
}
@media (max-width: 599px) {
  html.painted .passthrough .hud-bottom.street-controls {
    gap: 6px;
  }
  html.painted .passthrough .hud-bottom .btn {
    height: 56px;
    border-width: 0 24px;
    border-image-width: 0 24px;
    gap: 5px;
  }
  html.painted .passthrough .hud-bottom .btn > span {
    font-size: 17px;
  }
  html.painted .passthrough .hud-bottom .btn svg {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.painted .street-duel > .street-player,
  html.painted .passthrough .hud-bottom .btn {
    transition: none;
  }
  html.painted .street-duel > .street-player.is-active {
    transform: none;
  }
}
html.reduced .street-duel > .street-player,
html.reduced .passthrough .hud-bottom .btn {
  transition: none;
}
html.reduced .street-duel > .street-player.is-active {
  transform: none;
}

/* End of src/street2.css */

/* End of assets/street2-CEvjSa6u.css */