/* Estilo «combate de consola retro» del torneo. Ver DESIGN.md. */
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --screen: #f6f3df; --panel: #fffdf2; --ink: #1f2622; --ink-soft: #5b625c; --grid: rgba(31,38,34,.07);
  --medal: #f2c230; --medal-rgb: 242,194,48; --on-medal: #1f2622;
  --exp: #3a8fd9; --hp-hi: #3cb44b; --hp-mid: #f2c230; --hp-lo: #e0452b; --ok: #2f8a3e; --danger: #c62d1f;
  --type-planta: #3fa34d; --type-fuego: #ee6b2f; --type-lucha: #c03a2b; --type-siniestro: #5a4868;
  --sp-pingpong: #e85d75; --sp-padel: #3a8fd9; --sp-spikeball: #f2c230; --sp-petanca: #8d6e63; --sp-futbol: #2bb3a3; --sp-voleibol: #9c6ade;
  --icon-ink: #1f2622;
  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --px: 0 0 0 2px var(--ink), 4px 4px 0 0 var(--ink);
  --px2: 0 0 0 2px var(--ink), 6px 6px 0 0 var(--ink);
  --px-press: 0 0 0 2px var(--ink), 2px 2px 0 0 var(--ink);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --screen: #15191a; --panel: #1f2526; --ink: #eef0e6; --ink-soft: #a7aea6; --grid: rgba(238,240,230,.05);
    --ok: #5cc27a; --danger: #f08a80; --type-siniestro: #8f78a8; --icon-ink: #0b0d0d; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.45;
  background-color: var(--screen); background-image: radial-gradient(var(--grid) 1px, transparent 1.2px); background-size: 6px 6px;
  font-variant-numeric: tabular-nums;
}
.ico { display: inline-block; flex: none; width: 1.2em; height: 1.2em; }
.tc { color: color-mix(in srgb, var(--c) 78%, var(--ink)); }

.title { font-family: var(--font-pixel); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; line-height: 1.35; margin: 0; display: flex; align-items: center; gap: 12px; }
.title .ico { width: 1.6em; height: 1.6em; }
.h2 { font-family: var(--font-pixel); font-weight: 400; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.label { font-family: var(--font-pixel); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0; }

.dialog { position: relative; background: var(--panel); box-shadow: var(--px2); outline: 2px solid var(--ink); outline-offset: -6px; padding: 18px 22px 22px; }
.dialog::after { content: "▼"; position: absolute; right: 14px; bottom: 6px; font-size: 12px; }

.card { background: var(--panel); box-shadow: var(--px); border-radius: 2px; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h3 { margin: 0; font-family: var(--font-pixel); font-weight: 400; font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 8px; }
.card h3 .ico { width: 18px; height: 18px; }
.note { margin: 0; font-size: 13px; color: var(--ink-soft); }

.teamtag { display: inline-flex; align-items: center; gap: 6px; }
.teamtag .ico-gema { width: 16px; height: 14px; }
.badge { display: inline-block; font-family: var(--font-pixel); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--c); padding: 5px 7px 4px; border-radius: 2px; box-shadow: 0 0 0 2px var(--ink); text-shadow: 1px 1px 0 rgba(0,0,0,.45); white-space: nowrap; }
.badge.is-tie { background: var(--ink-soft); }

.bar { height: 8px; background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: 0 0 0 2px var(--ink); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--exp); background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.18) 4px 5px); transition: width .6s steps(12); }

.btn { width: 100%; min-height: 54px; padding: 16px; border: 0; border-radius: 2px; background: var(--medal); color: var(--on-medal); box-shadow: var(--px2); font: 400 12px/1.3 var(--font-pixel); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.btn:hover { background: color-mix(in srgb, var(--medal) 88%, #fff); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 0 var(--ink); }
.btn[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: 0 0 0 2px var(--ink); }
.btn.ghost { background: var(--panel); color: var(--danger); font-size: 9px; min-height: 46px; box-shadow: var(--px); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 6px 9px; text-align: right; white-space: nowrap; }
.table thead th { font-family: var(--font-pixel); font-weight: 400; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--panel); }
.table thead th .ico { width: 14px; height: 14px; margin-right: 5px; vertical-align: -3px; }
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.table tbody td { border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.table th:first-child, .table td:first-child { text-align: left; }
.strong { font-weight: 700; }
.scroll { overflow-x: auto; }
.dot { display: inline-block; width: 9px; height: 9px; background: var(--c); box-shadow: 0 0 0 1px var(--ink); margin-right: 7px; }

.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 7px; height: 7px; background: var(--c, var(--medal)); box-shadow: 0 0 0 1px var(--ink); top: 35%; left: 50%; }
.skel { background: var(--panel); box-shadow: var(--px); position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .dialog::after { animation: blink 1s steps(2, jump-none) infinite; }
  .type-in { animation: type .9s steps(28, end) both; }
  .enter { animation: rise .24s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
  .confetti i { animation: burst 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
  .skel::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12px, var(--grid) 12px 24px); animation: slide 1s steps(4) infinite; }
}
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes burst { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@keyframes slide { from { transform: translateX(-24px); } to { transform: translateX(0); } }