/* Control desde el celular. Claro a propósito: las pistas son al aire libre y se lee mejor bajo el sol. */
body.ctl { background: var(--paper); overscroll-behavior: none; }
.c-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.c-top {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.c-back { min-height: 44px; padding: 0; width: 44px; }
.c-back .icon { width: 24px; height: 24px; }
.c-title { min-width: 0; }
.c-title strong { display: block; font-size: 1.125rem; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-title small { display: block; font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-status { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 0.8125rem; font-weight: 700; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.c-status .icon { width: 16px; height: 16px; }
.c-status.is-on { background: var(--ok-100); color: var(--ok); }
.c-status.is-off { background: var(--danger-100); color: var(--danger); }
.c-status.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.c-connection-note { display: block; grid-column: 1 / -1; font-size: 0.75rem; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }

/* Franja bajo la barra: sin señal (aviso, no error: lo marcado está a salvo) o dos marcadores distintos. */
.c-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 12px; border-radius: var(--r-control); font-size: 0.875rem; line-height: 1.35; }
.c-strip[hidden] { display: none; }
.c-strip p { margin: 0; flex: 1; min-width: 0; text-wrap: pretty; }
.c-strip strong { font-weight: 800; }
.c-strip.is-offline { background: var(--warn-soft); color: var(--warn-ink); }
.c-strip.is-conflict { background: var(--danger-100); color: var(--danger); font-weight: 650; }
.c-strip-btn { flex: none; min-height: 40px; padding: 0 14px; font-size: 0.875rem; color: var(--danger); border-color: currentColor; }
.c-court small.c-court-note { margin-top: 2px; font-size: 0.875rem; font-weight: 700; color: var(--warn-ink); }
.c-court small.c-court-note.is-conflict { color: var(--danger); }

.c-choice {
  display: grid; gap: 4px; width: 100%; padding: 14px 16px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r-panel);
  transition: transform 120ms var(--ease-out), border-color 160ms ease;
}
.c-choice:active { transform: scale(0.99); }
.c-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.c-choice > strong { font-size: 1.0625rem; font-weight: 800; }
.c-choice-teams { font-size: 0.9375rem; color: var(--ink-2); overflow-wrap: anywhere; }
.c-choice-score { font-family: var(--font-score); font-size: 1.625rem; font-weight: 800; line-height: 1.1; }
.c-choice small { font-size: 0.875rem; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .c-choice:hover { border-color: var(--hover-border); } }

.c-body { width: 100%; min-width: 0; max-width: 560px; margin: 0 auto; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.c-center { flex: 1; align-content: center; }
.c-big { margin: 0; font-family: var(--font-score); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.c-lead { margin: 0; font-size: 1.0625rem; color: var(--ink-2); max-width: 42ch; }
.c-loading { margin: 0; padding: 42vh 16px 0; text-align: center; color: var(--ink-2); font-weight: 600; }
.c-fmt { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-row .btn { padding: 0 10px; }
.c-logout { justify-self: start; }

.c-pin { width: 100%; max-width: 420px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: 24px 20px; display: grid; gap: 18px; align-content: center; }
.c-pin h1 { margin: 0; font-family: var(--font-score); font-size: 2.25rem; font-weight: 800; line-height: 1; }
.c-pin input { font-size: 1.75rem; letter-spacing: 0.3em; text-align: center; font-weight: 700; }

.c-list { display: grid; gap: 10px; }
.c-court {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 14px 16px;
  border-radius: var(--r-panel); background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  transition: transform 120ms var(--ease-out), border-color 160ms ease;
}
.c-court:active { transform: scale(0.99); }
.c-court:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.c-court > span { min-width: 0; }
.c-court strong { display: block; font-size: 1.1875rem; font-weight: 800; }
.c-court small { display: block; color: var(--ink-2); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-court .icon { color: var(--ink-3); }

.c-vs { display: grid; gap: 10px; }
.c-team { padding: 12px 14px; border-radius: var(--r-panel); }
.c-team.team-a { background: var(--team-a-soft); box-shadow: inset 0 0 0 2px var(--team-a); }
.c-team.team-b { background: var(--team-b-soft); box-shadow: inset 0 0 0 2px var(--team-b); }

/* ---------- partido en juego: todo cabe en una pantalla, sin scroll ---------- */
.c-match { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; }
.c-sets { display: flex; gap: 8px; padding: 10px 12px 4px; overflow-x: auto; scrollbar-width: none; min-height: 50px; }
.c-set { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); white-space: nowrap; }
.c-set small { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.c-set b { font-family: var(--font-score); font-size: 1.25rem; font-weight: 800; }
.c-set.is-cur { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.c-set.is-cur small { color: var(--on-strong-2); }
.c-set.is-tb { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }

.c-pads { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); padding: 6px 12px; min-height: 0; }
.pad {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 0;
  padding: 14px 16px 10px; border: 0; border-radius: var(--r-panel); color: var(--navy-900); text-align: left; overflow: hidden;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 3px var(--shadow-color), 0 8px 18px var(--shadow-color);
  transition: transform 110ms var(--ease-out), opacity 200ms ease;
}
.pad-a { background: var(--team-a); }
.pad-b { background: var(--team-b); }
.pad:active { transform: scale(0.985); }
.pad::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; opacity: 0; pointer-events: none; }
.pad.is-hit::after { animation: pad-hit 300ms var(--ease-out); }
@keyframes pad-hit { from { opacity: 0.5; } to { opacity: 0; } }
.pad:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.pad[disabled] { opacity: 0.55; }
.pad-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pad-names { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; font-family: var(--font-score); font-size: 24px; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.pad-serve { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--navy-900); color: #fff; font-size: 0.8125rem; font-weight: 700; opacity: 0; transform: scale(0.9); transition: opacity 160ms ease, transform 220ms var(--ease-out); }
.pad-serve .icon { width: 16px; height: 16px; color: var(--yellow); }
.pad.is-serving .pad-serve { opacity: 1; transform: none; }
.pad-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pad-games, .pad-pts { font-variant-numeric: tabular-nums; }
.pad-games { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-score); font-size: 46px; font-weight: 800; line-height: 1; }
.pad-games .roll { height: 46px; line-height: 46px; min-width: 0.6em; }
.pad-games .roll > span { text-align: left; }
.pad-games small { margin-top: 4px; font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; color: rgba(21, 26, 66, 0.78); }
.pad-pts { font-family: var(--font-score); font-weight: 800; font-size: min(34vw, 16vh); line-height: 1; }
.pad-pts .roll { height: 1em; line-height: 1; min-width: 1.8em; }
.pad-pts .roll > span { text-align: right; }

.c-net { display: flex; align-items: center; justify-content: center; }
.c-net::before { content: ''; display: block; border-radius: 2px; background: var(--ink); }
.c-pads.is-stack .c-net { margin: 8px 0; }
.c-pads.is-stack .c-net::before { width: 100%; height: 4px; }
.c-pads.is-sides { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.c-pads.is-sides .c-net { margin: 0 6px; }
.c-pads.is-sides .c-net::before { width: 4px; height: 100%; }

.c-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
.c-undo { justify-content: flex-start; min-height: 62px; padding: 0 16px; }
.c-undo .icon, .c-more .icon { width: 22px; height: 22px; }
.c-undo-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.c-undo-txt small { max-width: 100%; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-more { min-height: 62px; }

.c-match.is-done .c-pads { display: none; }
.c-done { overflow: auto; padding: 12px 12px 0; }
.c-done-in { width: 100%; max-width: 560px; margin: 0 auto; }
.c-done-title { margin: 6px 0 12px; font-size: 1.25rem; font-weight: 800; }
.c-done-score { margin: 14px 0 18px; font-family: var(--font-score); font-size: 3rem; font-weight: 800; line-height: 1; }
.c-done-actions { display: grid; gap: 10px; }

.c-menu { display: grid; gap: 10px; }
.c-menu .btn { justify-content: flex-start; }

@media (min-width: 700px) and (orientation: landscape) {
  .c-pads.is-stack { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .c-pads.is-stack .c-net { margin: 0 8px; }
  .c-pads.is-stack .c-net::before { width: 4px; height: 100%; }
  .pad-pts, .c-pads.is-sides .pad-pts { font-size: min(18vw, 30vh); }
}
@media (prefers-reduced-motion: reduce) {
  .pad.is-hit::after { animation-duration: 160ms; }
}

/* ---------- fotos para la TV (partido listo) y página /fotos ---------- */
.c-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.c-photo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--card); color: var(--ink); -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.c-photo:active { transform: scale(0.97); }
.c-photo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.c-photo .ph { width: 56px; height: 56px; border-radius: 12px; background: var(--navy-800); }
.c-photo .ph-ini { color: var(--navy-300); font-size: 18px; }
.c-photo-add { position: absolute; top: 46px; right: calc(50% - 36px); width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--navy-900); box-shadow: 0 0 0 2px var(--card); }
.c-photo-add .icon { width: 14px; height: 14px; }
.c-photo-name { max-width: 100%; font-family: var(--font-score); font-size: 0.9375rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-photo small { font-size: 0.75rem; font-weight: 650; color: var(--link); }
.c-tools { display: grid; gap: 10px; margin-top: 8px; }

.f-list { display: grid; gap: 8px; }
.f-cat { margin: 14px 0 2px; font-size: 1rem; font-weight: 800; color: var(--ink-2); }
.f-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--card); color: var(--ink); text-align: left; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.f-row:active { transform: scale(0.99); }
.f-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.f-ph { width: 56px; height: 56px; border-radius: 12px; background: var(--navy-800); }
.f-ph .ph-ini { color: var(--navy-300); font-size: 18px; }
.f-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.f-txt strong { font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-txt small { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 0.875rem; white-space: nowrap; }
.f-txt .flag { width: 20px; }
.f-go { flex: none; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--strong); color: var(--on-strong); }
.f-go.has { background: var(--ok-100); color: var(--ok); }
/* Las cuadrículas de una columna no se ensanchan con nombres largos: el texto se recorta con "…". */
.f-list, .c-list, .c-vs, .c-menu, .c-done-actions, .c-tools { grid-template-columns: minmax(0, 1fr); }

/* ---------- nombres en el botón: un jugador por línea, con la pelota junto a quien saca ---------- */
.pad { justify-content: space-between; }
.pad-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pad-name { display: flex; align-items: center; gap: 6px; min-width: 0; height: 28px; }
.pad-ball { flex: none; width: 24px; height: 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-900); color: var(--yellow); opacity: 0; transform: scale(0.6); transition: opacity 160ms ease, transform 220ms var(--ease-out); }
.pad-ball .icon { width: 15px; height: 15px; }
.pad-name.is-server .pad-ball { opacity: 1; transform: none; }
.pad-name-txt { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; font-family: var(--font-score); font-size: 22px; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.c-pads.is-sides .pad { padding: 12px 12px 10px; }
.c-pads.is-sides .pad-pts { font-size: min(25vw, 14vh); }
.c-pads.is-sides .pad-pts .roll { min-width: 1.2em; }
.c-pads.is-sides .pad-games { font-size: 38px; }
.c-pads.is-sides .pad-games .roll { height: 38px; line-height: 38px; }

/* ---------- qué cantar ---------- */
.c-call { margin: 4px 12px 0; padding: 10px 14px; border-radius: var(--r-panel); background: var(--card); border: 1px solid var(--rule); display: grid; gap: 6px; }
.c-call-main { margin: 0; height: 40px; display: flex; align-items: center; font-family: var(--font-score); font-size: 36px; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; letter-spacing: -0.005em; }
.c-call.is-decisive { background: var(--decisive-bg); border-color: var(--decisive-bg); color: var(--decisive-ink); }
.c-call.is-final { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.c-call.is-big .c-call-main { color: var(--ink); }
.c-call-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.c-call-tags:empty { display: none; }
.c-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--paper-2); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }
.c-call.is-decisive .c-tag { background: var(--inverse-tag); color: var(--decisive-ink); }
.c-call.is-final .c-tag { background: var(--inverse-tag); color: var(--on-strong); }
.c-tag.is-alert { background: var(--yellow); color: var(--navy-900); }
.c-call-row { display: flex; align-items: center; gap: 10px; min-height: 32px; flex-wrap: wrap; }
.c-call-row:empty { display: none; }
.c-serve { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.c-serve .icon { width: 18px; height: 18px; color: var(--yellow-600); }
.c-call.is-decisive .c-serve .icon { color: var(--decisive-ink); }
.c-serve strong { font-family: var(--font-score); font-size: 1.125rem; font-weight: 800; text-transform: uppercase; }
.c-serve-fix { font-size: 0.875rem; min-height: 32px; }
.c-call.is-decisive .c-serve-fix { color: var(--decisive-link); }
.c-rest { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: var(--strong); color: var(--on-strong); font-size: 0.875rem; font-weight: 700; }
.c-rest .icon { width: 16px; height: 16px; color: var(--strong-accent); }
.c-rest strong { font-family: var(--font-score); font-size: 1.125rem; font-weight: 800; }
.c-rest.is-over { background: var(--danger); color: var(--on-danger); }
.c-rest.is-over .icon { color: var(--on-danger); }
.c-rest.is-plain { background: var(--paper-2); color: var(--ink); }
.c-rest.is-plain .icon { color: var(--ink-2); }
.c-rest:focus-visible, .c-prompt-btn:focus-visible, .c-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.c-prompt { width: 100%; display: grid; gap: 8px; }
.c-prompt-q { font-weight: 700; }
.c-prompt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-prompt-btn { min-height: 52px; font-family: var(--font-score); font-size: 1.25rem; font-weight: 800; text-transform: uppercase; }
.c-prompt-btn.is-default { border: 2px solid var(--ink); }

/* ---------- partido listo: revisión previa ---------- */
.c-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.c-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 2px solid transparent; border-radius: var(--r-control); color: var(--ink); -webkit-tap-highlight-color: transparent; transition: border-color 160ms ease, transform 120ms var(--ease-out); }
.c-pick:active { transform: scale(0.97); }
.c-pick.team-a { background: var(--team-a-soft); }
.c-pick.team-b { background: var(--team-b-soft); }
.c-pick[aria-pressed='true'] { border-color: var(--ink); }
.c-pick .ph { width: 52px; height: 52px; border-radius: 12px; background: var(--navy-800); }
.c-pick .ph-ini { color: var(--navy-300); font-size: 17px; }
.c-pick-name { max-width: 100%; font-family: var(--font-score); font-size: 0.9375rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-pick-check { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--strong); color: var(--on-strong); opacity: 0; transform: scale(0.6); transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.c-pick-check .icon { width: 13px; height: 13px; }
.c-pick[aria-pressed='true'] .c-pick-check { opacity: 1; transform: none; }
.c-warm-run { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--r-control); background: var(--strong); color: var(--on-strong); }
.c-warm-time { font-family: var(--font-score); font-size: 2rem; font-weight: 800; line-height: 1; }
.c-warm-lbl { flex: 1; font-weight: 600; color: var(--on-strong-2); }
.c-warm-run.is-done { background: var(--yellow); color: var(--navy-900); }
.c-warm-run.is-done .c-warm-lbl { color: var(--navy-900); }
.c-sticky { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; margin: 0 -16px; padding: 12px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -8px 16px var(--paper); }
.c-ready { padding-bottom: 0; }

/* ---------- menú y últimos puntos ---------- */
.c-menu-h { margin: 12px 0 0; font-size: 0.875rem; font-weight: 800; color: var(--ink-2); }
.c-menu-h:first-child { margin-top: 0; }
.c-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-hist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--r-control); background: var(--card); border: 1px solid var(--rule); }
.c-hist-team { font-family: var(--font-score); font-weight: 800; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.c-hist-team.team-a { color: var(--team-a-ink); }
.c-hist-team.team-b { color: var(--team-b-ink); }
.c-hist-call { flex: none; font-weight: 700; }
.pad { align-items: stretch; }
.pad-names { align-self: stretch; width: 100%; }
/* En botones angostos (izquierda y derecha): el punto grande al centro y los juegos abajo. */
.c-pads.is-sides .pad-mid { flex: 1; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 4px; }
.c-pads.is-sides .pad-pts { order: -1; flex: 1; display: flex; align-items: center; justify-content: center; font-size: min(34vw, 17vh); }
.c-pads.is-sides .pad-pts .roll > span { text-align: center; }
.c-pads.is-sides .pad-games { flex-direction: row; align-items: baseline; gap: 6px; }
.c-pads.is-sides .pad-games small { margin-top: 0; }
.pad-names { flex: none; height: auto; align-items: stretch; }