@font-face { font-family: "Padelpix Pixel"; src: url("fuente.ttf") format("truetype"); font-display: block; }

:root {
  --fondo: #1B1F3B; --panel: #2E3A59; --marco: #4A5A85; --marcador: #111426;
  --azul: #29ADFF; --amarillo: #F4E04D; --blanco: #F1F1F1; --gris: #9AA3C7;
  --rojo: #F5508C; --tinta: #0D0F1E;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fondo); color: var(--blanco); }
body { font-family: "Padelpix Pixel", monospace; min-height: 100vh; -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#app { max-width: 520px; margin: 0 auto; padding: 20px 16px 28px; }

/* Texto de píxeles: la fuente mide 10 unidades por em (6 de avance por carácter) */
.px { font-family: "Padelpix Pixel", monospace; text-transform: uppercase; margin: 0; font-weight: normal;
  text-shadow: .1em .1em 0 var(--tinta); text-rendering: optimizeSpeed; -webkit-font-smoothing: none; font-smooth: never;
  line-height: 1.5; word-break: break-word; }
.t15 { font-size: 15px; } .t2 { font-size: 20px; } .t3 { font-size: 30px; } .t4 { font-size: 40px; }
.amarillo { color: var(--amarillo); } .blanco { color: var(--blanco); } .gris { color: var(--gris); }
.nos { color: var(--rojo); } .ellos { color: var(--azul); }
.centro { text-align: center; } .derecha { text-align: right; margin-top: 18px; }

.cabecera { text-align: center; }
.logo { image-rendering: pixelated; display: block; margin: 0 auto -10px; }
h1.px { margin-top: 0; }

.panel { position: relative; background: var(--panel); border: 3px solid var(--marco); outline: 3px solid var(--tinta);
  outline-offset: -6px; padding: 16px; margin-top: 18px; }
.panel.marcador { background: var(--marcador); }
.panel h2.px { margin-bottom: 10px; }
.panel p.px { margin: 8px 0 0; }
.panel-bg { background: var(--panel); }
.equipos { display: flex; } .equipo { flex: 1; text-align: center; }
.puntos { font-size: 100px; text-align: center; color: var(--amarillo); line-height: 1.3; white-space: nowrap; margin: 6px 0 0; }
.puntos.largo { font-size: 50px; }
.puntos.medio { font-size: 70px; }
#tJuegos { margin-top: 10px; } #tFormato { margin-top: 8px; }
pre.px { white-space: pre-wrap; margin: 0; }

.boton { display: block; width: 100%; margin-top: 18px; padding: 14px 8px; font-family: "Padelpix Pixel", monospace;
  text-transform: uppercase; color: var(--tinta); background: var(--marco); border: 3px solid var(--tinta); border-radius: 0;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.35), inset 0 -5px 0 rgba(0,0,0,.28), 0 5px 0 #05060f; cursor: pointer;
  text-rendering: optimizeSpeed; -webkit-font-smoothing: none; touch-action: manipulation; }
.boton:active, .boton.pulsado { transform: translateY(4px); box-shadow: inset 0 4px 0 rgba(255,255,255,.35), inset 0 -5px 0 rgba(0,0,0,.28), 0 1px 0 #05060f; }
.boton.t2 { padding: 12px 6px; } .boton.t15 { padding: 10px 6px; }
.amarillo-bg { background: var(--amarillo); } .azul-bg { background: var(--azul); } .gris-bg { background: var(--gris); }
.nos-bg { background: var(--rojo); color: var(--blanco); text-shadow: .1em .1em 0 var(--tinta); }
.marco-bg { background: var(--marco); color: var(--blanco); text-shadow: .1em .1em 0 var(--tinta); }
.boton.panel-bg { color: var(--gris); }
.boton.activo { background: var(--amarillo); color: var(--tinta); text-shadow: none; }

.fila { display: flex; gap: 12px; } .fila > .boton { flex: 1; }
.segmento .boton { margin-top: 10px; padding: 12px 2px; font-size: 15px; }
.pie { margin-top: 26px; } .pie .boton { margin-top: 0; }
.pie .boton:last-child { flex: 0 0 38%; }

.check { display: flex; align-items: center; gap: 12px; margin-top: 12px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .caja { width: 26px; height: 26px; background: var(--marcador); border: 3px solid var(--tinta); outline: 3px solid var(--marco); outline-offset: -6px; flex: none; }
.check input:checked + .caja { background: var(--rojo); outline-color: var(--rojo); box-shadow: inset 0 0 0 4px var(--marcador); }
.check input:focus-visible + .caja { outline-color: var(--amarillo); }

button.icono { position: absolute; top: 9px; right: 9px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  color: var(--blanco); background: var(--marco); border: 3px solid var(--tinta); border-radius: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* Pantalla grande */
#grande { position: fixed; inset: 0; z-index: 10; background: #000; display: flex; flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom)); }
#grande .icono { top: 10px; left: 10px; right: auto; z-index: 2; }
.gcols { flex: 1; display: flex; min-height: 0; }
.gcol { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 6px; }
.gcol + .gcol { border-left: 4px solid var(--marco); }
.gtit { font-size: min(12vw, 12vh); } .gpts { flex: 1; display: flex; align-items: center; font-size: min(36vw, 62vh); line-height: 1; }
.gjue { font-size: min(7vw, 9vh); } .gaviso { text-align: center; font-size: min(7vw, 9vh); min-height: 1.5em; }
.gsets { text-align: center; font-size: min(5vw, 7vh); min-height: 1.5em; }

/* Confirmaciones */
#modal { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 16px; }
.modalcaja { background: var(--panel); border: 3px solid var(--marco); outline: 3px solid var(--tinta); outline-offset: -6px; padding: 22px 18px; max-width: 420px; width: 100%; }
.modalcaja .fila .boton { margin-top: 18px; }