/* Pantalla de la cancha (Modo Predio). Paleta y tipografías de la app (theme.dart) y diseño de docs/modo-predio/mockups.html.
   Todo se mide en rem: app.js pone 1rem = 1 % del ancho del escenario 16:9, así se ve igual en cualquier TV.
   CSS conservador a propósito (sin container queries ni min()) para navegadores de TV viejos. */
@font-face{font-family:"Bebas Neue";src:url(fonts/BebasNeue-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --bg:#090D16; --surface:#121A2B; --nav:#0D1424; --line:#1F2A40; --line2:#334155;
  --text:#F1F5F9; --muted:#94A3B8; --green:#4ADE80; --green-ink:#052E16; --amber:#FBBF24;
  --light-bg:#BAE6FD; --light-ink:#082F49; --light-accent:#7DD3FC;
  --dark-bg:#991B1B; --dark-accent:#F87171;
  --display:"Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --body:"Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme:dark;
}
html{font-size:1vw} /* app.js lo corrige si la pantalla no es 16:9 */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--body);overflow:hidden}
body{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}
body.idle-cursor{cursor:none}

#stage{position:relative;width:100rem;height:56.25rem;overflow:hidden;background:var(--bg)}
.view{position:absolute;top:0;right:0;bottom:0;left:0}

/* ---------- conectando ---------- */
.boot{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(90% 90% at 50% 40%,#10233a,var(--bg))}
.boot-logo{width:12rem;height:12rem}
.boot-t{font-family:var(--display);font-size:6rem;letter-spacing:.03em;line-height:1;margin-top:2rem}
.boot-s{font-size:2.2rem;color:var(--muted);margin-top:1rem}

/* ---------- libre ---------- */
.idle{display:flex;align-items:center;padding:4rem 6rem;
  background:radial-gradient(120% 90% at 0% 0%,#10233a 0%,var(--bg) 60%)}
.idle-l{flex:1.15;min-width:0;padding-right:5rem}
.brand{display:flex;align-items:center;font-size:2.2rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.brand img{width:4rem;height:4rem;margin-right:1.4rem}
.court{font-family:var(--display);font-size:8.5rem;line-height:.9;margin:1.6rem 0 1.4rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.free{display:inline-block;font-size:2.4rem;font-weight:700;color:var(--green-ink);background:var(--green);padding:.5rem 2rem .5rem 1.6rem;border-radius:9rem}
.free:before{content:"";display:inline-block;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--green-ink);margin-right:1rem;vertical-align:.05em}
.howto{margin-top:2.4rem;font-size:2.2rem;color:var(--muted);line-height:1.4;max-width:38rem}
.code-k{margin-top:2.4rem;font-size:1.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.code{font-family:var(--display);font-size:8.5rem;line-height:1;letter-spacing:.08em;color:var(--text);font-variant-numeric:tabular-nums}
.qrbox{flex:.85;min-width:0;background:#fff;border-radius:2rem;padding:2.4rem;display:flex;flex-direction:column;align-items:center}
.qrbox canvas{width:100%;height:auto;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.qrbox span{font-size:2.1rem;color:#0f172a;font-weight:700;text-align:center;line-height:1.25;margin-top:1.4rem}
.qrbox small{display:block;font-size:1.7rem;color:#475569;font-weight:400;font-variant-numeric:tabular-nums}
.idle.stale .qrbox canvas,.idle.stale .code{opacity:.15}

/* ---------- previa ---------- */
.pre{display:flex;flex-direction:column}
.pre-top{padding:2.6rem 4rem;background:var(--nav);border-bottom:1px solid var(--line);font-size:3rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pre-top span{color:var(--text);font-weight:700}
.pre-top b{color:var(--amber)}
.pre-row{flex:1;display:flex;min-height:0}
.pre-row .pl,.pre-row .pd{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 5rem;font-size:3.6rem;font-weight:600;line-height:1.3;min-width:0}
.pre-row b{font-family:var(--display);font-weight:400;font-size:9rem;line-height:1;margin-bottom:1rem}
.pre-row .pl{background:var(--light-bg);color:var(--light-ink)}
.pre-row .pd{background:var(--dark-bg);color:#fff;text-align:right}
.pre-row .pl div,.pre-row .pd div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pre-row .vs{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:8rem;padding:0 3rem;color:var(--muted)}
.pre-wait{padding:2rem 4rem;background:var(--surface);border-top:1px solid var(--line);font-size:2.4rem;color:var(--muted);text-align:center}
.pre.many .pre-row .pl,.pre.many .pre-row .pd{font-size:2.6rem}
.pre.many .pre-row b{font-size:7rem}

/* ---------- partido ---------- */
.live{display:flex;flex-direction:column}
.live-top{display:flex;justify-content:space-between;align-items:center;padding:2.2rem 3rem;background:var(--nav);border-bottom:1px solid var(--line);font-size:2.2rem}
.live-top .who{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-right:2rem}
.live-top .who span{color:var(--muted);font-weight:500}
.rec{color:var(--dark-accent);font-weight:700;letter-spacing:.1em;white-space:nowrap}
.rec:before{content:"";display:inline-block;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--dark-accent);margin-right:.9rem;vertical-align:.05em;animation:blink 1.4s infinite}
.rec.paused{color:var(--amber)}
.rec.paused:before{background:var(--amber);animation:none}
@keyframes blink{50%{opacity:.25}}
.board{flex:1;display:flex;min-height:0}
.side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.side.l{background:var(--light-bg);color:var(--light-ink)}
.side.d{background:var(--dark-bg);color:#fff}
.side .tn{font-family:var(--display);font-size:5rem;letter-spacing:.06em;line-height:1}
.side .sc{font-family:var(--display);font-size:26rem;line-height:.82;font-variant-numeric:tabular-nums}
.clock{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 3rem;min-width:28rem}
.clock .t{font-family:var(--display);font-size:9.5rem;line-height:1;font-variant-numeric:tabular-nums}
.clock .h{font-size:1.8rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:.6rem}
.clock.over .t{color:var(--amber)}
.clock.paused .t{animation:blink 1.4s infinite}
.ticker{display:flex;align-items:center;padding:1.8rem 3rem;background:var(--surface);border-top:1px solid var(--line);font-size:2.4rem;min-height:7.6rem;white-space:nowrap;overflow:hidden}
.ticker > *{margin-right:2rem}
.ticker .goal{font-family:var(--display);font-size:3.6rem;color:var(--amber);letter-spacing:.06em;line-height:1}
.ticker .chip{width:1.8rem;height:1.8rem;border-radius:.3rem;flex:none}
.ticker .chip.l{background:var(--light-accent)} .ticker .chip.d{background:var(--dark-accent)}
.ticker .muted{color:var(--muted)}
.ticker .mins{margin:0 0 0 auto;color:var(--muted);font-size:2rem;font-variant-numeric:tabular-nums}
.pop{animation:pop .9s ease-out 3}
@keyframes pop{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}}
.ticker.new{animation:glow 2.4s ease-out 2}
@keyframes glow{0%{background:#3a2f0b}100%{background:var(--surface)}}

/* ---------- final ---------- */
.fin{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(90% 90% at 50% 40%,#10233a,var(--bg))}
.fin-k{font-size:3.6rem;letter-spacing:.14em;color:var(--muted);font-weight:700}
.fin-s{display:flex;border-radius:2rem;overflow:hidden;font-family:var(--display);font-size:24rem;line-height:.85;margin:2rem 0;font-variant-numeric:tabular-nums}
.fin-s span{padding:1rem 6rem}
.fin-s .l{background:var(--light-bg);color:var(--light-ink)}
.fin-s .d{background:var(--dark-bg);color:#fff}
.fin-f{font-size:3.8rem;font-weight:600;color:var(--amber);text-align:center;padding:0 4rem}

/* ---------- avisos encima ---------- */
.banner{position:absolute;top:2rem;left:50%;transform:translateX(-50%);background:var(--amber);color:#1c1300;font-weight:700;font-size:2.4rem;padding:1rem 3rem;border-radius:9rem;box-shadow:0 1rem 3rem rgba(0,0,0,.5);white-space:nowrap}
.banner:before{content:"";display:inline-block;width:1.2rem;height:1.2rem;border-radius:50%;background:#1c1300;margin-right:1rem;vertical-align:.05em;animation:blink 1s infinite}
.reconnecting .view{-webkit-filter:saturate(.55) brightness(.75);filter:saturate(.55) brightness(.75)}
.reconnecting .idle .qrbox canvas,.reconnecting .idle .code{opacity:.12}
.toast{position:absolute;left:4rem;right:4rem;bottom:4rem;background:var(--surface);border:.2rem solid var(--amber);color:var(--text);border-radius:1.6rem;padding:2.2rem 3rem;font-size:3.2rem;font-weight:600;text-align:center;box-shadow:0 1rem 3rem rgba(0,0,0,.6)}
.fs-hint{position:absolute;top:1.6rem;left:50%;transform:translateX(-50%);font-size:1.6rem;color:var(--text);background:rgba(13,20,36,.85);border:1px solid var(--line2);border-radius:9rem;padding:.6rem 2rem;white-space:nowrap;opacity:0;transition:opacity .6s;pointer-events:none}
.fs-hint.show{opacity:1}