/*
 * @file Aparência do Streak de X1: três etiquetas empilhadas (STREAK, WINS, LOSSES) em forma de seta, com o número grande
 * à esquerda. Compartilhado entre o overlay do OBS (x1-streak-overlay.html) e a prévia da página X1.
 *
 * O modelo vem em data-modelo (placa, neon, gelo, sangue, ouro, minimal) e só troca as cores --sx-*; a forma é a mesma.
 * Animações só com transform/opacity (leves dentro do navegador do OBS): entrada em cascata, brilho que passa de tempos
 * em tempos, pulo no número que subiu, tremida na derrota e pulsar no recorde.
 */
.sx {
  --sx-c1: #8b5cf6; --sx-c1b: #5b2fc9; --sx-c1t: #e5dcff;   /* streak */
  --sx-c2: #3ddc5a; --sx-c2b: #178a33; --sx-c2t: #d6ffe0;   /* wins */
  --sx-c3: #ef3b3b; --sx-c3b: #9a1212; --sx-c3t: #ffdcdc;   /* losses */
  --sx-num: #ffffff;
  --sx-fonte: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --sx-pixel: 'Silkscreen', 'Press Start 2P', 'Courier New', monospace;

  display: inline-flex; flex-direction: column; gap: 6px; position: relative; user-select: none;
  font-family: var(--sx-fonte);
}

.sx .sx-linha {
  display: flex; align-items: center; gap: 12px;
  animation: sx-entra 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.sx .sx-linha:nth-child(2) { animation-delay: 0.12s; }
.sx .sx-linha:nth-child(3) { animation-delay: 0.24s; }
@keyframes sx-entra { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }

/* número: grande, branco, com contorno escuro para ler em qualquer cena */
.sx .sx-num {
  min-width: 78px; text-align: right; font-size: 54px; font-weight: 700; line-height: 0.9; color: var(--sx-num);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  text-shadow: 0 0 2px #000, 2px 2px 0 rgba(0, 0, 0, 0.55), -1px -1px 0 rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.8);
}

/* etiqueta em seta */
.sx .sx-tag {
  position: relative; display: flex; align-items: center; gap: 9px; width: 212px; height: 40px; padding: 0 30px 0 14px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--cor) 0%, var(--cor-b) 100%);
  color: var(--cor-t); font-family: var(--sx-pixel); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 0 6px var(--cor), 0 1px 0 rgba(0, 0, 0, 0.5);
}
.sx .sx-tag::before { /* brilho no alto, estilo vidro */
  content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}
.sx .sx-tag::after { /* faixa de luz que atravessa a etiqueta de tempos em tempos */
  content: ''; position: absolute; top: 0; bottom: 0; left: -60px; width: 38px; transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  animation: sx-luz 5.5s ease-in-out infinite;
}
.sx .sx-linha:nth-child(2) .sx-tag::after { animation-delay: 0.5s; }
.sx .sx-linha:nth-child(3) .sx-tag::after { animation-delay: 1s; }
@keyframes sx-luz { 0%, 70% { left: -60px; } 100% { left: 240px; } }

.sx .sx-ico { width: 20px; height: 20px; flex: none; fill: currentColor; filter: drop-shadow(0 0 4px var(--cor)); }
.sx .sx-rot { flex: 1; white-space: nowrap; }
.sx .sx-rec { font-size: 10px; letter-spacing: 0.04em; opacity: 0.85; white-space: nowrap; }

.sx .l1 { --cor: var(--sx-c1); --cor-b: var(--sx-c1b); --cor-t: var(--sx-c1t); }
.sx .l2 { --cor: var(--sx-c2); --cor-b: var(--sx-c2b); --cor-t: var(--sx-c2t); }
.sx .l3 { --cor: var(--sx-c3); --cor-b: var(--sx-c3b); --cor-t: var(--sx-c3t); }

/* ------------------------------------------------------------ reações ao resultado -- */
@keyframes sx-pulo { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes sx-tremida { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes sx-flash { 0% { filter: brightness(2.2) saturate(1.4); } 100% { filter: none; } }
.sx .pulo { animation: sx-pulo 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3); transform-origin: right center; }
.sx .tremida { animation: sx-tremida 0.45s ease-in-out; }
.sx .flash { animation: sx-flash 0.7s ease-out; }
.sx.recorde-novo .l1 .sx-num { animation: sx-recorde 1.6s ease-in-out infinite; }
@keyframes sx-recorde { 0%, 100% { text-shadow: 0 0 2px #000, 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 10px var(--sx-c1); } 50% { text-shadow: 0 0 2px #000, 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 22px #fff, 0 0 30px var(--sx-c1); } }

/* ----------------------------------------------------------------------- modelos -- */
.sx[data-modelo='neon'] {
  --sx-c1: #ff4fd8; --sx-c1b: #8a1a78; --sx-c1t: #ffe6fa;
  --sx-c2: #3df2ff; --sx-c2b: #0b7f8a; --sx-c2t: #e0fdff;
  --sx-c3: #ffb02e; --sx-c3b: #9a5a00; --sx-c3t: #fff1d4;
}
.sx[data-modelo='gelo'] {
  --sx-c1: #7fd8ff; --sx-c1b: #2a78b0; --sx-c1t: #ffffff;
  --sx-c2: #9ff0d6; --sx-c2b: #2a9a80; --sx-c2t: #ffffff;
  --sx-c3: #b3b8ff; --sx-c3b: #4a50b0; --sx-c3t: #ffffff;
}
.sx[data-modelo='sangue'] {
  --sx-c1: #ff3b3b; --sx-c1b: #8a0a0a; --sx-c1t: #ffe0dc;
  --sx-c2: #ffb14a; --sx-c2b: #9a5a08; --sx-c2t: #fff0d6;
  --sx-c3: #7a1a22; --sx-c3b: #3a060a; --sx-c3t: #ffc9c9;
}
.sx[data-modelo='ouro'] {
  --sx-c1: #ffd870; --sx-c1b: #a8761a; --sx-c1t: #2a1a00;
  --sx-c2: #e8c05a; --sx-c2b: #8a6410; --sx-c2t: #2a1a00;
  --sx-c3: #c98a4a; --sx-c3b: #6a3c14; --sx-c3t: #fff0d6;
}
.sx[data-modelo='minimal'] .sx-tag { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 2px var(--cor); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
.sx[data-modelo='minimal'] .sx-tag::before, .sx[data-modelo='minimal'] .sx-tag::after { display: none; }
.sx[data-modelo='minimal'] .sx-tag { color: #fff; }

.sx-erro { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 14px; color: #ff9a90; background: rgba(21, 26, 33, 0.75); border-radius: 999px; padding: 6px 16px; }

@media (prefers-reduced-motion: reduce) {
  .sx .sx-linha, .sx .sx-tag::after, .sx.recorde-novo .l1 .sx-num { animation: none; }
}