/* Estilos del marcador real de Atrix PSS (copiados de pss/ui/app.css, aislados en .sbw) */
/* Atrix PSS - tema profesional de competencia (estructura TK-Strike, acabado broadcast) */
.sbw {
  --bg: #0a0d14; --bg2: #11151f; --panel: #161b27; --panel2: #1d2434; --line: #27304a; --text: #e9edf5; --muted: #8b95ad;
  --blue: #1e5eff; --blue-deep: #0b2a7a; --blue-glow: rgba(30, 94, 255, .55);
  --red: #ff2e45; --red-deep: #7d0f1d; --red-glow: rgba(255, 46, 69, .55);
  --gold: #ffd21f; --gold-deep: #c99a00; --green: #22c55e; --amber: #f59e0b;
  --font: Bahnschrift, "Barlow Semi Condensed", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
.flash-red .sq { animation: fr .5s; } .flash-blue .sq { animation: fb .5s; }
@keyframes fr { 0% { box-shadow: 0 0 0 .8cqh #fff, 0 0 8cqh var(--red); transform: translate(-50%, -50%) scale(1.04); } 100% { box-shadow: 0 0 4cqh rgba(0,0,0,.4); } }
@keyframes fb { 0% { box-shadow: 0 0 0 .8cqh #fff, 0 0 8cqh var(--blue); transform: translate(-50%, -50%) scale(1.04); } 100% { box-shadow: 0 0 4cqh rgba(0,0,0,.4); } }

/* ================= tablero (container queries: escala en cualquier tamano) ================= */
.tk { --c-blue: #1e5eff; --c-red: #ff2e45; --c-clock: #ffd21f; width: 100%; height: 100%; color: #fff; display: grid; grid-template-rows: 10cqh 12cqh 78cqh; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #182038 0%, #0a0d14 60%); font-family: var(--font); }
.tk-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 2cqw; background: linear-gradient(180deg, #0f1420, #0a0d14); border-bottom: 1px solid #1f2740; }
.tk-logo { display: flex; align-items: center; gap: 1.2cqw; }
.tk-logo img { height: 6.5cqh; width: auto; }
.tk-cat:empty { visibility: hidden; }
.tk-cat { text-align: center; font-weight: 700; font-size: 4.4cqh; letter-spacing: .12em; text-transform: uppercase; padding: .6cqh 3cqw; border: 1px solid #2a3454; border-radius: 99cqh; background: rgba(255,255,255,.04); white-space: nowrap; }
.tk-right { display: flex; justify-content: flex-end; align-items: center; gap: 1.5cqw; }
.tk-brand { font-weight: 700; font-size: 3.4cqh; letter-spacing: .25em; color: #c9d2ea; display: flex; align-items: center; } .tk-brand span { color: var(--gold); }
.tk-brand .tk-emblem { height: 8.6cqh; width: 8.6cqh; margin-right: 1cqw; filter: brightness(1.7) drop-shadow(0 0 .8cqh rgba(47,139,255,.85)); }
.tk-hits { display: flex; gap: .8cqw; }
.tk-hits span { min-width: 5cqh; height: 5cqh; padding: 0 1cqh; border-radius: 99cqh; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2.8cqh; border: 1px solid rgba(255,255,255,.25); }
.tk-hits .hb { background: var(--blue-deep); } .tk-hits .hr { background: var(--red-deep); }
.tk-names { display: grid; grid-template-columns: 1fr 1fr; }
.tk-names div { display: flex; align-items: center; gap: 1.5cqw; padding: 0 2cqw; font-weight: 700; font-size: 6.6cqh; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.tk-names .b { background: linear-gradient(90deg, color-mix(in srgb, var(--c-blue) 72%, #000), color-mix(in srgb, var(--c-blue) 45%, #000)); }
.tk-names .r { background: linear-gradient(90deg, color-mix(in srgb, var(--c-red) 45%, #000), color-mix(in srgb, var(--c-red) 75%, #000)); justify-content: flex-end; }
.tk-names span { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .3cqh 1cqh rgba(0,0,0,.5); }
.tk-names img { height: 8.2cqh; width: 11cqh; object-fit: cover; border-radius: .8cqh; box-shadow: 0 0 0 .25cqh rgba(255,255,255,.85), 0 .6cqh 1.5cqh rgba(0,0,0,.5); }
.tk-main { display: grid; grid-template-columns: 37cqw 26cqw 37cqw; }
.tk .col { position: relative; overflow: hidden; }
.tk .col.b { background: linear-gradient(160deg, color-mix(in srgb, var(--c-blue) 80%, #000) 0%, color-mix(in srgb, var(--c-blue) 45%, #000) 70%, color-mix(in srgb, var(--c-blue) 30%, #000) 100%); }
.tk .col.r { background: linear-gradient(200deg, color-mix(in srgb, var(--c-red) 85%, #000) 0%, color-mix(in srgb, var(--c-red) 48%, #000) 70%, color-mix(in srgb, var(--c-red) 30%, #000) 100%); }
.tk .col:before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.08) 0 35%, transparent 35.2%); pointer-events: none; }
.tk .cc { position: absolute; top: 1cqh; font-size: 6.5cqh; line-height: 1; font-weight: 700; letter-spacing: .12em; opacity: .95; text-shadow: 0 .3cqh 1cqh rgba(0,0,0,.5); }
.tk .col.b .cc { left: 2.2cqw; } .tk .col.r .cc { right: 2.2cqw; }
.tk .sq { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 26.5cqw; height: 50cqh; display: flex; align-items: center; justify-content: center;
  border-radius: 2.5cqh; box-shadow: 0 0 4cqh rgba(0,0,0,.4), inset 0 0 0 .3cqh rgba(255,255,255,.15); }
.tk .col.b .sq { background: linear-gradient(180deg, color-mix(in srgb, var(--c-blue) 88%, #fff), color-mix(in srgb, var(--c-blue) 72%, #000)); }
.tk .col.r .sq { background: linear-gradient(180deg, color-mix(in srgb, var(--c-red) 88%, #fff), color-mix(in srgb, var(--c-red) 72%, #000)); }
.tk .score { font-size: 46cqh; font-weight: 700; line-height: 1; font-stretch: condensed; text-shadow: 0 1cqh 2.5cqh rgba(0,0,0,.45); }
.tk .score.stopped { color: var(--gold); }
.tk .cam { position: absolute; bottom: 1.6cqh; left: 50%; transform: translateX(-50%); width: 7cqh; height: 5cqh; display: flex; align-items: center; justify-content: center; border-radius: 99cqh; background: rgba(0,0,0,.3); }
.tk .cam svg { width: 60%; height: 60%; fill: #fff; } .tk .cam.off { opacity: .45; }
.tk .cam.off:after { content: ""; position: absolute; left: 15%; top: 50%; width: 70%; height: .5cqh; background: #fff; transform: rotate(-35deg); }
/* ganador a pantalla completa (sobre el tablero) */
/* ---- pantalla del ganador: bandera grande, nombre, pais, rounds, rival; rayos y confeti ---- */
.tk-winner { --w-main: #2f6fff; --w-dark: #061a4d; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqh; z-index: 5; color: #fff; text-align: center; overflow: hidden; animation: winin .7s ease-out; }
.tk-winner.blue { --w-main: #2f6fff; --w-dark: #061a4d; } .tk-winner.red { --w-main: #ff4258; --w-dark: #4d0812; }
.tk-winner { background: linear-gradient(180deg, color-mix(in srgb, var(--w-main) 38%, #000) 0%, color-mix(in srgb, var(--w-main) 22%, #000) 100%); }
.tk-winner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 30%, transparent 70%, rgba(0,0,0,.35)); pointer-events: none; }
.tk-winner > * { position: relative; z-index: 2; }
.tk-winner .wtop { display: flex; align-items: center; gap: 2cqw; animation: windrop .8s ease-out both; }
.tk-winner .wl { font-size: 6.5cqh; font-weight: 700; letter-spacing: .5em; padding-left: .5em; color: var(--gold); text-shadow: 0 .6cqh 2cqh rgba(0,0,0,.5); }
.tk-winner .trophy svg { width: 7cqh; height: 7cqh; fill: var(--gold); filter: drop-shadow(0 .6cqh 1.5cqh rgba(0,0,0,.5)); }
.tk-winner .wcat { font-size: 3.2cqh; letter-spacing: .3em; text-transform: uppercase; opacity: .85; min-height: 3.5cqh; }
.tk-winner .wflag { position: relative; animation: winpop .9s cubic-bezier(.2,1.4,.4,1) both; animation-delay: .15s; }
.tk-winner .wflag img { height: 26cqh; width: 34.7cqh; object-fit: cover; border-radius: 1.8cqh; box-shadow: 0 0 0 .5cqh rgba(255,255,255,.95), 0 0 0 1.1cqh var(--gold), 0 3cqh 6cqh rgba(0,0,0,.55); display: block; }
.tk-winner .wcc-badge { display: flex; align-items: center; justify-content: center; height: 26cqh; width: 34.7cqh; border-radius: 1.8cqh; font-size: 11cqh; font-weight: 700; letter-spacing: .1em; background: rgba(255,255,255,.12); box-shadow: 0 0 0 .5cqh rgba(255,255,255,.95), 0 0 0 1.1cqh var(--gold); }
.tk-winner .wn { font-size: 14cqh; font-weight: 700; line-height: 1.05; text-transform: uppercase; text-shadow: 0 1cqh 3cqh rgba(0,0,0,.55); max-width: 92cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: windrop .8s ease-out both; animation-delay: .3s; }
.tk-winner .wc { font-size: 4.6cqh; font-weight: 700; letter-spacing: .4em; padding-left: .4em; color: var(--gold); }
.tk-winner .wr { display: flex; gap: 1.2cqw; }
.tk-winner .wr .rc { display: flex; flex-direction: column; align-items: center; gap: .4cqh; background: rgba(0,0,0,.45); border: .25cqh solid rgba(255,255,255,.2); border-radius: 1.4cqh; padding: .8cqh 1.6cqw; min-width: 12cqw; }
.tk-winner .wr .rc em { font-style: normal; font-size: 2.2cqh; letter-spacing: .25em; text-transform: uppercase; opacity: .8; }
.tk-winner .wr .rc b { font-size: 4.6cqh; font-weight: 700; line-height: 1; padding: .5cqh 1.2cqw; border-radius: .8cqh; min-width: 6cqw; }
.tk-winner .wr .rc .wsb { background: #1e5eff; color: #fff; } .tk-winner .wr .rc .wsr { background: #ff2e45; color: #fff; }
.tk-winner .wr .rc i { font-style: normal; font-size: 3cqh; opacity: .7; margin: 0 .4cqw; }
.tk-winner .wr .rc > b, .tk-winner .wr .rc > i { display: inline-block; }
.tk-winner .wr .rc { flex-direction: row; flex-wrap: wrap; justify-content: center; } .tk-winner .wr .rc em { width: 100%; }
.tk-winner .wr .rc.blue { box-shadow: 0 0 0 .3cqh #1e5eff inset; } .tk-winner .wr .rc.red { box-shadow: 0 0 0 .3cqh #ff2e45 inset; }
.tk-winner .wreason { font-size: 2.8cqh; opacity: .85; letter-spacing: .15em; text-transform: uppercase; }
.tk-winner .wvs { display: flex; align-items: center; gap: 1cqw; font-size: 3cqh; opacity: .8; margin-top: .5cqh; text-transform: uppercase; letter-spacing: .1em; }
.tk-winner .wvs img { height: 4cqh; width: 5.3cqh; object-fit: cover; border-radius: .5cqh; }
@keyframes windrop { from { opacity: 0; transform: translateY(-3cqh); } to { opacity: 1; transform: none; } }
@keyframes winpop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.tk.theme-light .tk-winner { color: #fff; }
@keyframes winin { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
/* pila de golpes registrados (junto a las siglas) e intensidad por zona (bajo el marcador) */
.tk .stack { position: absolute; top: 9.5cqh; display: flex; flex-direction: column; gap: .35cqh; max-height: 46cqh; overflow: hidden; }   /* nunca llega al GAM-JEOM */
.tk .col.b .stack { left: 1.6cqw; } .tk .col.r .stack { right: 1.6cqw; }
.tk .stack i { width: 3.8cqh; height: 3.8cqh; display: block; flex: none; filter: drop-shadow(0 .3cqh .6cqh rgba(0,0,0,.5)); }
.tk .stack i svg, .tk .levels b svg { width: 100%; height: 100%; }
.tk .stack i.turn { outline: .3cqh solid var(--gold); outline-offset: .2cqh; border-radius: .6cqh; }
.z-trunk svg { fill: #3dd6ff; } .z-head svg { fill: #ff4d8d; } .z-punch svg { fill: #ffd21f; }
.tk .levels { position: absolute; bottom: 1.6cqh; display: flex; gap: 1cqw; }
.tk .col.b .levels { right: 2cqw; } .tk .col.r .levels { left: 2cqw; }   /* hacia el centro, lejos de GAM-JEOM */
.tk .levels b { position: relative; width: 7.5cqh; height: 7.5cqh; display: flex; align-items: center; justify-content: center; }
.tk .levels b.none { opacity: .25; }
/* efecto al anotar: zoom del icono de la zona con marco dorado, y rebote del numero */
.tk .levels b.hit { animation: lvhit .95s cubic-bezier(.2,1.2,.3,1); opacity: 1 !important; z-index: 3; }
.tk .levels b.hit::before { content: ""; position: absolute; inset: -.7cqh; border: .35cqh solid var(--gold); border-radius: 1.1cqh; box-shadow: 0 0 1.6cqh var(--gold), inset 0 0 1cqh rgba(255,210,31,.35); animation: lvbox .95s ease-out both; }
@keyframes lvhit { 0% { transform: scale(1); } 30% { transform: scale(1.75); } 100% { transform: scale(1); } }
@keyframes lvbox { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
.tk .stack i.pop { animation: stackpop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes stackpop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }
.tk .col .score.bump { animation: scorebump .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes scorebump { 0% { transform: scale(1); } 35% { transform: scale(1.18); text-shadow: 0 0 3cqh rgba(255,255,255,.9); } 100% { transform: scale(1); } }
/* indicadores de giro al peto / giro al casco: apagados hasta que el ultimo golpe en esa zona sea con giro */
.tk .levels b.turnind { opacity: .22; margin-left: -.6cqw; width: 6.2cqh; height: 6.2cqh; }
.tk .levels { max-width: 46%; }
.tk .levels b.turnind svg.arrow { position: absolute; right: -.6cqh; bottom: -.4cqh; width: 55%; height: 55%; fill: var(--gold); filter: drop-shadow(0 0 .4cqh #000); }
.tk .levels b.turnind.on { opacity: 1; animation: turnpulse 1.2s ease-in-out 3; }
.tk .levels b.turnind.on svg.arrow { fill: #fff; }
.tk .levels b.turnind.on::after { content: ""; position: absolute; inset: -.5cqh; border: .3cqh solid var(--gold); border-radius: .8cqh; }
@keyframes turnpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.tk .levels b span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6cqh; font-weight: 700; color: #fff; text-shadow: 0 0 .6cqh #000, 0 0 .6cqh #000; padding-top: .6cqh; }
.tk .gj { position: absolute; bottom: 1.5cqh; font-size: 2.8cqh; font-weight: 700; letter-spacing: .15em; text-align: center; }
.tk .col.b .gj { left: 2.2cqw; } .tk .col.r .gj { right: 2.2cqw; }
.tk .gj b { display: block; font-size: 8cqh; line-height: 1.05; color: var(--gold); text-shadow: 0 .3cqh 1cqh rgba(0,0,0,.5); }
.tk .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqh; background: linear-gradient(180deg, #0c111c, #05070c); border-left: 1px solid #1f2740; border-right: 1px solid #1f2740; }
.tk .lbl { font-size: 4cqh; font-weight: 700; letter-spacing: .25em; text-align: center; line-height: 1; color: #aab4cc; }
.tk .lbl b { display: block; font-size: 7cqh; margin-top: .6cqh; color: #fff; }
.tk .clock { background: linear-gradient(180deg, color-mix(in srgb, var(--c-clock) 80%, #fff), var(--c-clock)); color: #111; width: 24cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1cqh 0;
  border-radius: 1.8cqh; box-shadow: 0 0 5cqh rgba(255, 210, 31, .35), inset 0 -0.6cqh 0 rgba(0,0,0,.15); }
.tk .clock b { font-size: 15.5cqh; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; font-stretch: condensed; }
.tk .clock .status { font-size: 3.4cqh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-top: .4cqh; }
.tk .kye { background: #1b2233; border: 1px solid var(--gold); color: var(--gold); width: 24cqw; text-align: center; padding: .6cqh 0; font-weight: 700; font-size: 3.2cqh; border-radius: 1.2cqh; letter-spacing: .1em; }
.tk .kye b { display: block; font-size: 5.5cqh; line-height: 1; color: #fff; }
.tk .dots { display: flex; gap: 1cqw; min-height: 3.5cqh; }
.tk .dot.tie { background: #3a3f52; border-color: #6b7390; }
.tk .dot { min-width: 5cqh; padding: 0 .8cqh; height: 3.2cqh; border-radius: 99cqh; display: flex; align-items: center; justify-content: center; font-size: 2.2cqh; font-weight: 700; background: #1b2233; border: 1px solid #2a3454; }
.tk .dot.blue { background: var(--blue); border-color: #7fa6ff; box-shadow: 0 0 2cqh var(--blue-glow); } .tk .dot.red { background: var(--red); border-color: #ff94a1; box-shadow: 0 0 2cqh var(--red-glow); }

/* configuracion grafica: ocultar elementos, pantalla invertida, patrocinador */
.tk-sponsor { height: 7cqh; width: auto; max-width: 16cqw; object-fit: contain; }
.tk.no-flags .tk-names img, .tk.no-stack .stack, .tk.no-levels .levels, .tk.no-counters .tk-hits,
.tk.no-vr .cam, .tk.no-wtlogo .tk-logo img, .tk.no-category .tk-cat { display: none !important; }
.tk.no-names { grid-template-rows: 10cqh 0 90cqh; } .tk.no-names .tk-names { display: none; }
.tk.reverse .tk-names .b { order: 2; flex-direction: row-reverse; }
.tk.reverse .tk-names .r { order: 1; flex-direction: row-reverse; justify-content: flex-end; }
.tk.reverse .col.b { order: 3; } .tk.reverse .mid { order: 2; } .tk.reverse .col.r { order: 1; }
.tk.reverse .col.b .cc, .tk.reverse .col.b .stack, .tk.reverse .col.b .gj { left: auto; right: 2.2cqw; }
.tk.reverse .col.r .cc, .tk.reverse .col.r .stack, .tk.reverse .col.r .gj { right: auto; left: 2.2cqw; }
.tk.reverse .col.b .levels { right: auto; left: 2cqw; } .tk.reverse .col.r .levels { left: auto; right: 2cqw; }

.sbw { container-type: size; position: relative; font-family: var(--font); color: var(--text); }
.sbw .tk { position: absolute; inset: 0; width: auto; height: auto; }