/* =============================================
   COCHE — Newspaper Edition
   FutbolHUB
   ============================================= */

/* ═══════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --np-paper:    #f4ead2;
  --np-paper2:   #ede0c0;
  --np-paper3:   #e4d3aa;
  --np-ink:      #0f120e;
  --np-red:      #b5221e;
  --np-ink-mid:  rgba(15,18,14,0.68);
  --np-ink-soft: rgba(15,18,14,0.16);
  --np-white:    #ffffff;
  --shadow:      5px 5px 0 var(--np-ink);
  --shadow-soft: 3px 3px 0 var(--np-ink);
}

html, body {
  min-height: 100%;
  background-color: var(--np-paper);
  background-image:
    radial-gradient(ellipse 115% 95% at 50% 50%,
      transparent 55%, rgba(15,18,14,0.07) 100%),
    linear-gradient(180deg,
      rgba(201,168,76,0.06) 0%, transparent 45%),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 159px,
      rgba(15,18,14,0.042) 159px, rgba(15,18,14,0.042) 160px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 280px 280px;
  background-attachment: fixed;
  color: var(--np-ink);
  font-family: 'Rajdhani', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { cursor: pointer; border: none; outline: none; background: none; font-family: 'Rajdhani', sans-serif; }
input  { outline: none; font-family: 'Rajdhani', sans-serif; }
a      { text-decoration: none; }

/* ═══════════════════════════════════════════
   COLUMNAS LATERALES DE ANUNCIOS (fixed, como Blackjack)
   ═══════════════════════════════════════════ */
.ad-col {
  position: fixed;
  top: 0; bottom: 0; width: 72px;
  display: flex; flex-direction: column;
  z-index: 3;
  background: var(--np-paper);
}
.ad-col--left  { left: 0;  border-right: 1px solid var(--np-ink-soft); }
.ad-col--right { right: 0; border-left:  1px solid var(--np-ink-soft); }

.ad-strip {
  flex: 1; margin: 5px;
  border: 1px dashed var(--np-ink-soft);
  background: rgba(15,18,14,0.018);
  display: flex; align-items: center; justify-content: center;
  min-height: 80px;
}
.ad-strip--accent {
  border-color: rgba(181,34,30,0.20);
  background: rgba(181,34,30,0.022);
}
.ad-strip-label {
  font-family: 'DM Mono', monospace;
  font-size: 5.5px; letter-spacing: 0.16em;
  text-transform: uppercase; text-align: center;
  color: rgba(15,18,14,0.24); line-height: 1.7;
}
.ad-strip--accent .ad-strip-label { color: rgba(181,34,30,0.30); }

/* Empuja contenido para no quedar bajo las columnas */
@media (min-width: 760px) {
  .screen { margin-left: 72px; margin-right: 72px; }
}
@media (max-width: 759px) { .ad-col { display: none; } }

/* ═══════════════════════════════════════════
   PANTALLAS
   ═══════════════════════════════════════════ */
.screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; position: relative; isolation: isolate; }
.screen.active { display: flex; }

/* ═══════════════════════════════════════════
   BOTÓN VOLVER — absoluto dentro de cada screen
   ═══════════════════════════════════════════ */
.back-btn {
  position: absolute; top: 14px; left: 14px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  z-index: 5;
  font-family: 'DM Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--np-ink); text-transform: uppercase; padding: 5px 10px;
  border: 1px solid var(--np-ink); background: var(--np-paper2);
  border-radius: 0; box-shadow: 2px 2px 0 var(--np-ink);
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}
.back-btn:hover { background: var(--np-ink); color: var(--np-paper); }

/* ═══════════════════════════════════════════
   MENÚ
   ═══════════════════════════════════════════ */
#screen-menu {
  justify-content: flex-start;
  padding: clamp(20px,3.5vh,52px) 20px clamp(14px,2.5vh,28px);
  gap: clamp(5px,1.2vh,12px);
  position: relative;
}

.menu-hero {
  text-align: center; width: 100%; max-width: 500px;
  padding-bottom: 12px; border-bottom: 2.5px solid var(--np-ink);
}

.menu-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: clamp(3rem,11vw,6.2rem);
  color: var(--np-ink); line-height: 0.88;
  letter-spacing: -0.02em; margin: 0; display: block;
}

.menu-subtitle {
  font-family: 'Anton', sans-serif;
  font-size: clamp(0.82rem,2.5vw,1.1rem);
  letter-spacing: 0.4em;
  background: var(--np-ink); color: var(--np-paper);
  padding: 3px 14px 2px; display: inline-block;
  margin-top: 8px; text-transform: uppercase;
}

.menu-wrap {
  width: 100%; max-width: 500px;
  display: flex; flex-direction: column; gap: 11px;
}

/* Tabs */
.menu-tabs {
  display: flex; border-bottom: 2px solid var(--np-ink);
}
.menu-tab {
  flex: 1; padding: 9px 6px;
  background: transparent; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  color: var(--np-ink); opacity: 0.45;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.16em;
  cursor: pointer; touch-action: manipulation;
  transition: opacity 0.14s, border-color 0.14s;
  text-transform: uppercase; user-select: none; -webkit-user-select: none;
}
.menu-tab.active { opacity: 1; border-bottom-color: var(--np-red); }

/* Panels */
.menu-panel { display: none; }
.menu-panel.active { display: flex; flex-direction: column; gap: 9px; }
.panel-hint {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem; color: var(--np-ink-mid);
  text-align: center; letter-spacing: 0.1em; line-height: 1.5;
}

/* Inputs */
.menu-input {
  background: var(--np-paper2); border: 1.5px solid var(--np-ink);
  border-radius: 0; padding: 10px 12px; color: var(--np-ink);
  font-family: 'DM Mono', monospace; font-size: 0.82rem; letter-spacing: 0.06em;
  outline: none; transition: border-color 0.14s, box-shadow 0.14s; width: 100%;
}
.menu-input:focus { border-color: var(--np-red); box-shadow: 2px 2px 0 var(--np-red); }
.menu-input::placeholder { color: var(--np-ink); opacity: 0.30; }
.menu-code-input { text-transform: uppercase; letter-spacing: 0.44em; text-align: center; font-size: 1.1rem; }

/* Divisor */
.menu-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.menu-divider::before, .menu-divider::after { content:''; flex:1; height:1px; background: var(--np-ink-soft); }
.menu-divider span { font-family: 'DM Mono', monospace; font-size: 0.7rem; opacity: 0.45; letter-spacing: 2px; color: var(--np-ink); }

/* Errores */
.menu-error { color: var(--np-red); font-family: 'DM Mono', monospace; font-size: 0.72rem; text-align: center; letter-spacing: 0.08em; }
.menu-error.hidden { display: none; }

/* ═══════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════ */
.btn-primary {
  background: var(--np-ink); color: var(--np-paper);
  border: none; border-radius: 0;
  padding: 12px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  width: 100%; transition: opacity 0.15s;
  box-shadow: 3px 3px 0 var(--np-red);
}
.btn-primary:hover { opacity: 0.82; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: transparent; color: var(--np-ink);
  border: 1.5px solid var(--np-ink); border-radius: 0;
  padding: 11px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  width: 100%; transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover { background: var(--np-ink); color: var(--np-paper); }

/* ═══════════════════════════════════════════
   LOBBY
   ═══════════════════════════════════════════ */
#screen-lobby {
  justify-content: center; padding: 60px 20px 24px; gap: 14px;
}
.lobby-wrap {
  width: 100%; max-width: 500px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  padding: 18px;
  border: 2px solid var(--np-ink);
  background: var(--np-paper2);
  box-shadow: var(--shadow);
}
.lobby-code-card {
  width: 100%;
  background: var(--np-paper);
  border: 1.5px solid var(--np-ink);
  padding: 18px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 3px 3px 0 var(--np-ink);
}
.lobby-code-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.28em; color: var(--np-ink-mid);
  text-transform: uppercase; margin-bottom: 6px;
}
.lobby-code-big {
  font-family: 'Anton', sans-serif; font-size: 2.8rem; letter-spacing: 12px;
  color: var(--np-red);
}
.lobby-players-list { width:100%; display:flex; flex-direction:column; gap:5px; }
.lobby-player-row {
  background: var(--np-paper);
  border: 1px solid var(--np-ink-soft);
  border-left: 3px solid var(--np-ink);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.lobby-player-avatar {
  width:28px; height:28px;
  background: var(--np-paper3); border: 1.5px solid var(--np-ink);
  display:flex; align-items:center; justify-content:center;
  font-family: 'DM Mono', monospace;
  font-size:.75rem; font-weight:700; color: var(--np-ink); flex-shrink:0;
  /* Círculo con la foto recortada al centro: overflow oculto para que la
     imagen no se salga del círculo, y object-fit:cover en el <img> para
     que llene sin deformarse (mismo criterio que las redes sociales). */
  border-radius:50%;
  overflow:hidden;
}
.lobby-player-avatar img {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; border-radius:50%;
}
.lobby-player-name { flex:1; font-size:0.95rem; color: var(--np-ink); }
.lobby-player-host {
  font-family: 'DM Mono', monospace;
  font-size:0.6rem; letter-spacing:0.14em; color: var(--np-red); text-transform: uppercase;
}
.lobby-section { width:100%; }
.lobby-section-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.22em; color: var(--np-red);
  text-transform: uppercase; margin-bottom: 8px;
}
.lobby-hint {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem; color: var(--np-ink-mid);
  text-align: center; letter-spacing: 0.1em; line-height: 1.5;
}

/* Timer lobby público */
.lobby-autotimer { width:100%; margin-top:4px; padding:10px 12px; background:var(--np-paper3); border:1px solid var(--np-ink-soft); }
.lobby-autotimer.hidden { display:none; }
.lobby-autotimer-bar-wrap { width:100%; height:2px; background:var(--np-ink-soft); overflow:hidden; margin-bottom:8px; }
.lobby-autotimer-bar { height:100%; width:100%; background:var(--np-red); transition:width 1s linear; }
.lobby-autotimer-bar.urgent { background:var(--np-ink); }
.lobby-autotimer-text { display:flex; justify-content:space-between; align-items:center; font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.14em; color:var(--np-ink-mid); text-transform:uppercase; }
.lobby-autotimer-count { font-family:'Anton',sans-serif; font-size:1.2rem; letter-spacing:3px; color:var(--np-red); transition:color 0.8s; }
.lobby-autotimer-count.urgent { color:var(--np-ink); }

/* Ajustes lobby */
.lobby-settings {
  width:100%; background: var(--np-paper);
  border: 1px solid var(--np-ink-soft);
  border-top: 2px solid var(--np-ink);
  padding: 14px 16px;
}
.lobby-settings-title {
  font-family: 'DM Mono', monospace; font-size:0.62rem; letter-spacing:0.2em;
  color: var(--np-ink-mid); margin-bottom:10px; text-align:center; text-transform: uppercase;
}
.settings-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.settings-row:last-child { margin-bottom:0; }
.settings-label { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--np-ink-mid); letter-spacing:0.1em; text-transform:uppercase; }
.settings-control { display:flex; align-items:center; gap:8px; }
.settings-btn {
  background:var(--np-paper2); border:1px solid var(--np-ink);
  color:var(--np-ink); border-radius:0; width:28px; height:28px;
  font-size:1.1rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:background 0.15s;
}
.settings-btn:hover:not(:disabled) { background:var(--np-ink); color:var(--np-paper); }
.settings-btn:disabled { opacity:.3; cursor:not-allowed; }
.settings-value { font-family:'Anton',sans-serif; font-size:1.4rem; color:var(--np-red); min-width:28px; text-align:center; line-height:1; }
.settings-unit { font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--np-ink-mid); letter-spacing:1px; }

/* Botón copiar enlace */
#btn-copy-link {
  margin-top: 8px;
  background: transparent !important; border: 1px solid var(--np-ink) !important;
  color: var(--np-ink) !important; font-family: 'DM Mono',monospace !important;
  font-size: 0.65rem !important; font-weight: 500 !important; cursor: pointer;
  letter-spacing: 0.12em !important; padding: 5px 12px !important;
  border-radius: 0 !important; transition: background 0.12s, color 0.12s;
}
#btn-copy-link:hover { background: var(--np-ink) !important; color: var(--np-paper) !important; }

#lobby-link-display { font-family:'DM Mono',monospace !important; font-size:0.58rem !important; color:var(--np-ink-mid) !important; opacity:1 !important; }
#lobby-mode-badge   { font-family:'DM Mono',monospace !important; font-size:0.62rem !important; color:var(--np-ink-mid) !important; opacity:1 !important; letter-spacing:0.12em !important; text-transform:uppercase !important; }

/* ═══════════════════════════════════════════
   PANTALLA DE RONDA
   ═══════════════════════════════════════════ */
#screen-round { padding: 0; }

.round-topbar {
  width:100%; background: var(--np-ink);
  border-bottom: 2px solid rgba(15,18,14,0.9);
  padding: 10px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-shrink:0; position:sticky; top:0; z-index:10;
  /* El círculo de la cuenta flota fijo arriba a la derecha (42px + 14px de
     margen). Le reservamos ese hueco para que no tape el temporizador, que
     en móvil se coloca justo ahí. Mismo criterio que .masthead-edition. */
  padding-right: 62px;
}
.round-label {
  font-family: 'DM Mono', monospace; font-size:0.68rem; letter-spacing:0.22em;
  color: rgba(244,234,210,0.65); white-space:nowrap; text-transform:uppercase;
}
.round-timer-block { display:flex; flex-direction:column; align-items:center; gap:3px; }
.round-timer {
  font-family:'Bebas Neue',sans-serif; font-size:2.2rem; letter-spacing:2px; line-height:1;
  color: var(--np-paper); transition:color .3s;
}
.round-timer.urgent { color: var(--np-red); animation:tPulse .6s infinite alternate; }
@keyframes tPulse { from{opacity:1}to{opacity:.4} }
.round-timer-bar-wrap { width:54px; height:2px; background:rgba(244,234,210,0.15); overflow:hidden; }
.round-timer-bar { height:100%; background:var(--np-paper); width:100%; transition:width 1s linear, background .4s; }
.round-timer-bar.urgent { background:var(--np-red); }

.round-scoreboard { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.sb-player { display:flex; flex-direction:column; align-items:center; }
.sb-name { font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:1px; color:rgba(244,234,210,0.52); text-transform:uppercase; width:3ch; max-width:3ch; overflow:hidden; white-space:nowrap; text-overflow:clip; }
.sb-score { font-family:'Anton',sans-serif; font-size:1.4rem; letter-spacing:1px; color:var(--np-paper); line-height:1; }
.sb-player.me .sb-name  { color:rgba(244,234,210,0.9); }
.sb-player.me .sb-score { color:var(--np-paper); }

.round-main { width:100%; display:flex; flex-direction:column; gap:14px; padding:16px; flex:1; background:var(--np-paper); }

.round-panel {
  width:100%; background:var(--np-white);
  border: 1px solid var(--np-ink-soft);
  border-top: 2.5px solid var(--np-ink);
  border-left: 2.5px solid var(--np-ink);
  padding: 16px;
  box-shadow: 3px 3px 0 var(--np-ink);
}
.round-panel.compact { padding:12px; }
.round-panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.round-panel-title span { font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.24em; color: #212121; text-transform:uppercase; }
.round-panel-note  { font-family:'DM Mono',monospace; font-size:0.58rem; letter-spacing:0.14em; color:var(--np-ink-soft); text-transform:uppercase; }

/* Restricciones */
.restrictions-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
@media(max-width:700px){ .restrictions-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:420px){ .restrictions-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

.restriction-card {
  background:var(--np-paper2); border:1px solid var(--np-ink-soft);
  border-top: 2px solid var(--np-ink);
  padding:10px 8px;
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  opacity:0; transform:translateY(12px); transition:opacity .35s ease,transform .35s ease;
}
.restriction-card.visible { opacity:1; transform:translateY(0); }
.restriction-icon  { font-size:1.7rem; line-height:1; display:flex; align-items:center; justify-content:center; width:52px; height:52px; }
.restriction-icon-fallback { font-size:1.7rem; line-height:1; }
.restriction-img   { width:46px; height:46px; object-fit:contain; display:block; }
.restriction-label { font-family:'DM Mono',monospace; font-size:.68rem; font-weight:500; color:var(--np-ink); line-height:1.3; letter-spacing:0.04em; word-break:break-word; overflow-wrap:break-word; hyphens:auto; }
.rr-badge-img      { width:14px; height:14px; object-fit:contain; vertical-align:middle; }
.rr-badge-icon-wrap{ display:flex; align-items:center; }

/* Tracker envíos */
.submissions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media(max-width:520px){ .submissions-grid{grid-template-columns:1fr;} }

.submission-item {
  display:flex; flex-direction:column; gap:10px;
  background:var(--np-paper); border:1px solid var(--np-ink-soft);
  border-bottom:2px solid var(--np-ink);
  padding:12px; min-height:92px;
  transition:border-color .3s, background .3s;
}
.submission-item-head { display:flex; align-items:center; gap:8px; }
.submission-avatar {
  width:28px; height:28px; border-radius:0;
  background:var(--np-paper2); border:1.5px solid var(--np-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:.72rem; font-weight:700; color:var(--np-ink); flex-shrink:0;
}
.submission-meta { min-width:0; display:flex; flex-direction:column; gap:2px; }
.submission-name { font-size:.84rem; font-weight:700; color:var(--np-ink); }
.submission-status { font-family:'DM Mono',monospace; font-size:.58rem; opacity:.5; letter-spacing:0.1em; text-transform:uppercase; color:var(--np-ink); }
.submission-choice {
  min-height:40px; display:flex; align-items:center;
  padding:10px 12px; border:1px solid var(--np-ink-soft); background:var(--np-paper2);
  font-family:'Anton',sans-serif; font-size:1.1rem; letter-spacing:1.2px; color:var(--np-ink); line-height:1.05;
}
.submission-choice.pending { color:var(--np-ink-mid); font-family:'DM Mono',monospace; font-size:.75rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }
.submission-item.submitted { border-bottom-color:var(--np-red); background:rgba(181,34,30,0.03); }
.submission-item.submitted .submission-status { color:var(--np-red); opacity:1; }
.submission-item.submitted .submission-choice { border-color:rgba(181,34,30,0.22); }
.submission-item.me .submission-avatar { border-color:var(--np-red); color:var(--np-red); }
.submission-item.me { border-left:3px solid var(--np-ink); }

/* Input futbolista */
.input-section {
  width:100%; padding:12px; display:flex; gap:8px; flex-shrink:0; margin-top:auto;
  background:var(--np-paper2); border-top:2px solid var(--np-ink);
}
.input-panel {
  width:100%; background:var(--np-white); border:1px solid var(--np-ink-soft);
  border-top:2px solid var(--np-ink);
  padding:12px; display:flex; flex-direction:column; gap:9px;
  box-shadow:var(--shadow-soft);
}
.input-panel-label { font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--np-ink-mid); }
.input-row { display:flex; gap:8px; }
.player-input {
  width:100%; background:var(--np-paper2);
  border:1.5px solid var(--np-ink); border-radius:0;
  padding:11px 13px; color:var(--np-ink); font-size:1rem; font-weight:600;
  transition:border-color .14s, box-shadow .14s;
}
.player-input:focus { border-color:var(--np-red); box-shadow:2px 2px 0 var(--np-red); outline:none; }
.player-input:disabled { opacity:.5; cursor:not-allowed; }
.player-input::placeholder { opacity:.32; font-weight:400; color:var(--np-ink); }

.autocomplete-list {
  position:absolute; bottom:calc(100% + 4px); left:0; right:0;
  background:var(--np-white); border:1.5px solid var(--np-ink);
  overflow:hidden; z-index:100; box-shadow:var(--shadow);
}
.autocomplete-list.hidden { display:none; }
.autocomplete-item {
  padding:10px 14px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.9rem; font-weight:600; color:var(--np-ink); transition:background .12s;
  border-bottom:1px solid var(--np-ink-soft);
}
.autocomplete-item:hover,
.autocomplete-item.selected { background:var(--np-paper2); }
.autocomplete-item:last-child { border-bottom:none; }
.autocomplete-nat { font-family:'DM Mono',monospace; font-size:.68rem; opacity:.5; margin-left:auto; flex-shrink:0; color:var(--np-ink); }
.autocomplete-highlight { color:var(--np-red); }

.btn-submit {
  background:var(--np-ink); color:var(--np-paper);
  border:none; border-radius:0;
  font-family:'DM Mono',monospace; font-size:.76rem; font-weight:500; letter-spacing:0.16em;
  padding:0 16px; height:46px;
  white-space:nowrap; flex-shrink:0; transition:opacity .2s;
  box-shadow:3px 3px 0 var(--np-red);
}
.btn-submit:hover { opacity:.82; }
.btn-submit:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }

/* ═══════════════════════════════════════════
   RESULTADOS
   ═══════════════════════════════════════════ */
#screen-results { padding: 0 0 24px; }

.results-header {
  width:100%; background:var(--np-ink);
  padding:16px 20px 14px; text-align:center; flex-shrink:0;
  border-bottom:3px solid var(--np-red);
}
.results-title { font-family:'Playfair Display',serif; font-style:italic; font-weight:900; font-size:clamp(1.8rem,6vw,2.8rem); color:var(--np-paper); }
.results-subtitle { font-family:'DM Mono',monospace; font-size:.65rem; color:rgba(244,234,210,0.52); letter-spacing:0.2em; text-transform:uppercase; margin-top:4px; }

.results-list { width:100%; display:flex; flex-direction:column; gap:10px; padding:14px; flex:1; overflow-y:auto; background:var(--np-paper); }

.result-card {
  background:var(--np-white); border:1px solid var(--np-ink-soft);
  border-top:2.5px solid var(--np-ink);
  border-left:2.5px solid var(--np-ink);
  padding:14px; display:flex; flex-direction:column; gap:9px;
  box-shadow:3px 3px 0 var(--np-ink);
}
.result-card::before { display:none; }
.result-card.winner { background:var(--np-paper2); border-top-color:var(--np-red); border-top-width:3px; }
.result-card.invalid { opacity:.6; }
.result-card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.result-player-name { font-family:'DM Mono',monospace; font-size:.62rem; opacity:.55; letter-spacing:0.14em; text-transform:uppercase; color:var(--np-ink); }
.result-winner-badge { font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:0.12em; color:var(--np-red); background:rgba(181,34,30,0.08); border:1px solid rgba(181,34,30,0.32); padding:2px 7px; }
.result-points-badge { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--np-ink); background:var(--np-paper2); border:1px solid var(--np-ink-soft); padding:2px 7px; }
.result-footballer-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.result-main-block { display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1; }
.result-footballer { font-family:'Anton',sans-serif; font-size:1.5rem; letter-spacing:2px; line-height:1; color:var(--np-ink); }
.result-footballer.not-found { color:var(--np-red); font-size:1.15rem; text-decoration:line-through; opacity:.6; }
.result-not-found-hint { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--np-red); opacity:.8; }
.result-no-submit { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--np-ink-mid); font-style:italic; }
.result-match-count { font-family:'DM Mono',monospace; font-size:.68rem; color:var(--np-ink-mid); }
.result-match-count .count-value { color:var(--np-red); font-size:.82rem; }
.result-restrictions { display:flex; flex-direction:column; gap:5px; align-items:stretch; min-width:150px; max-width:180px; }
.rr-badge { display:flex; align-items:center; gap:3px; padding:3px 7px; font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:0.06em; }
.rr-badge.met     { background:rgba(181,34,30,0.08); border:1px solid rgba(181,34,30,0.28); color:var(--np-red); }
.rr-badge.not-met { background:var(--np-paper); border:1px solid var(--np-ink-soft); opacity:.5; color:var(--np-ink); }
.rr-badge-icon { font-size:.78rem; }
.result-footballer-photo { width:64px; height: 89.9974px; object-fit:cover; object-position:top center; border:1px solid var(--np-ink-soft); flex-shrink:0; background:var(--np-paper2); filter:sepia(10%) contrast(1.04); }
.result-footballer-info { display:flex; flex-direction:column; gap:5px; min-width:0; }
#btn-next-round.hidden { display:none; }
.results-actions { width:100%; padding:12px 14px; display:flex; flex-direction:column; gap:8px; flex-shrink:0; background:var(--np-paper2); border-top:1.5px solid var(--np-ink); }
#results-restrictions-legend { background:var(--np-paper); padding:0 14px; }

/* ═══════════════════════════════════════════
   FIN DE PARTIDA
   ═══════════════════════════════════════════ */
#screen-finished { justify-content:center; gap:18px; background:var(--np-paper); padding:28px 24px; }

.finished-trophy { font-size:3.5rem; filter:grayscale(100%); animation:pulse 2.5s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:0.72} }

.finished-title { font-family:'Playfair Display',serif; font-style:italic; font-weight:900; font-size:clamp(2rem,7vw,3.5rem); color:var(--np-ink); text-align:center; }
.winner-name { font-family:'Anton',sans-serif; font-size:clamp(1.4rem,5vw,2rem); letter-spacing:0.22em; color:var(--np-paper); text-align:center; background:var(--np-ink); padding:6px 20px; box-shadow:4px 4px 0 var(--np-red); }

.final-scores { width:100%; max-width:320px; display:flex; flex-direction:column; border:1.5px solid var(--np-ink); }
.final-score-item { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; background:var(--np-paper2); border-bottom:1px solid var(--np-ink-soft); font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; color:var(--np-ink); text-transform:uppercase; }
.final-score-item:last-child { border-bottom:none; }
.final-score-item.winner-item { background:var(--np-ink); color:var(--np-paper); }
.final-score-name { opacity:0.78; }
.final-score-pts  { font-family:'Anton',sans-serif; font-size:1.5rem; letter-spacing:1px; color:var(--np-red); line-height:1; }
.final-score-item.winner-item .final-score-pts { color:var(--np-paper); }
.finished-actions { display:flex; flex-direction:column; gap:8px; width:100%; max-width:320px; }

/* ═══════════════════════════════════════════
   MUERTE SÚBITA
   ═══════════════════════════════════════════ */
#sudden-death-banner { width:100%; background:var(--np-red); color:var(--np-paper); text-align:center; padding:8px 0; font-family:'DM Mono',monospace; font-size:.75rem; letter-spacing:0.2em; flex-shrink:0; text-transform:uppercase; }
#sd-results-banner   { width:100%; background:var(--np-red); color:var(--np-paper); text-align:center; padding:7px 0; font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:0.16em; flex-shrink:0; text-transform:uppercase; }

/* ═══════════════════════════════════════════
   CUENTA ATRÁS — solo colores, resto intacto
   ═══════════════════════════════════════════ */
.countdown-overlay { position:fixed; inset:0; height:100dvh; z-index:9999; background:var(--np-paper); display:flex; align-items:center; justify-content:center; }
.countdown-overlay.hidden { display:none; }
/* Bug móvil: además del overlay, ocultamos por completo el área de
   enviar/input mientras la cuenta atrás está activa. Así, aunque en algún
   navegador móvil el overlay no cubra el 100% del viewport visible (barra
   de direcciones dinámica, etc.), el botón de enviar nunca queda visible
   ni pulsable por debajo de la pantalla de carga. */
body.countdown-active .input-section { display:none !important; }
.countdown-inner { text-align:center; }
.countdown-label { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:6px; color: #000000; margin-bottom:16px; }
.countdown-number { font-family:'Bebas Neue',sans-serif; font-size:14rem; line-height:1; color:var(--np-ink); text-shadow:none; animation:cPulse 1s ease-in-out infinite; }
@keyframes cPulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85} }
.countdown-progress-wrap { width:220px; height:2px; background:var(--np-ink-soft); overflow:hidden; margin:18px auto 0; }
.countdown-progress-bar { height:100%; width:0%; background:var(--np-red); transition:width .4s ease, background .4s; }
.countdown-progress-bar.done { background:var(--np-ink); width:100%; }
.countdown-loading-text { font-size:.8rem; letter-spacing:2px; color:var(--np-ink-mid); opacity:.7; text-transform:uppercase; margin-top:12px; transition:opacity .3s; }
.countdown-loading-text.ready { color:var(--np-red); opacity:1; }

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast {
  position:fixed; bottom:80px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--np-ink); padding:8px 18px;
  font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.14em;
  color:var(--np-paper); text-transform:uppercase;
  z-index:1000; opacity:0; transition:all .22s ease;
  pointer-events:none; white-space:nowrap; box-shadow:3px 3px 0 var(--np-red);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error   { background:var(--np-red); box-shadow:3px 3px 0 var(--np-ink); }
.toast.warning { background:var(--np-paper3); color:var(--np-ink); box-shadow:3px 3px 0 var(--np-ink); }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:700px){
  .round-topbar{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"round timer" "score score"; align-items:center; gap:8px 10px; padding:10px 14px; padding-right:56px; }
  .round-label{grid-area:round}
  .round-timer-block{grid-area:timer;justify-self:end}
  .round-scoreboard{ grid-area:score; justify-content:flex-start; gap:8px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; }
  .round-scoreboard::-webkit-scrollbar{display:none}
  .sb-player{ min-width:42px; padding:4px 6px; background:rgba(244,234,210,0.07); border:1px solid rgba(244,234,210,0.14); flex-shrink:0; }
  .round-main{gap:10px;padding:12px}
  .round-panel{padding:12px;}
  .round-panel.compact{padding:8px}
  .round-panel-title{ align-items:flex-start; flex-direction:column; gap:4px; margin-bottom:10px; }
  .restrictions-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
  .restriction-card{ padding:9px 5px; gap:5px; }
  .restriction-icon{ width:36px; height:36px; font-size:1.22rem; }
  .restriction-icon-fallback{font-size:1.22rem}
  .restriction-img{width:32px;height:32px}
  .restriction-label{font-size:.6rem;line-height:1.16;}
  .submissions-grid{gap:6px}
  .submission-item{ min-height:0; padding:8px 9px; gap:6px; flex-direction:row; align-items:center; }
  .submission-item-head{gap:6px;min-width:0;flex:0 0 auto}
  .submission-avatar{width:24px;height:24px;font-size:.65rem}
  .submission-meta{gap:1px}
  .submission-name{font-size:.72rem;line-height:1}
  .submission-status{font-size:.56rem}
  .submission-choice{ min-height:0; padding:6px 8px; font-size:.76rem; letter-spacing:.55px; line-height:1; margin-left:auto; flex:1; }
  .submission-choice.pending{font-size:.64rem}
  .input-section{ padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px)); position:sticky; bottom:0; z-index:9; }
  .input-panel{padding:9px;gap:7px;}
  .input-panel-label{font-size:.6rem;letter-spacing:0.14em}
  .input-row{gap:6px}
  .player-input{padding:10px 11px;font-size:.95rem;}
  .btn-submit{height:44px;padding:0 12px;font-size:.72rem;letter-spacing:0.12em;}
}
@media(max-width:480px){
  .round-timer{font-size:1.8rem}
  .sb-name{width:3ch;max-width:3ch;font-size:.52rem}
  .sb-score{font-size:1.2rem}
  .result-footballer-row{flex-direction:column}
  .result-main-block{width:100%}
  .result-restrictions{min-width:0;max-width:none;width:100%}
}
@media(max-width:420px){
  .round-topbar{padding:8px 10px; padding-right:52px}   /* hueco del círculo de cuenta */
  .round-main{padding:10px}
  .restrictions-grid{gap:5px}
  .restriction-card{padding:8px 4px;}
  .restriction-icon{width:34px;height:34px;font-size:1.14rem;}
  .restriction-img{width:30px;height:30px}
  .restriction-label{font-size:.6rem;line-height:1.12;}
  .input-row{flex-direction:column}
  .btn-submit{width:100%;height:40px;}
}
@media(min-width:768px){
  .results-list{display:grid;grid-template-columns:repeat(2,1fr);align-content:start}
}

*, ::before, ::after {
    color: #000000;
}