/* =========================================================================
   QUIEN ES QUIEN - aspecto

   Hermana del panel de OBS y con su misma piel: metal sucio, tinta dorada en
   los precios y aire de monitor con lineas de barrido, como el bloque PLAYERS
   y la cinta inferior.

   La diferencia es la distancia de lectura. El marco se ve de reojo mientras
   pasa el gameplay; esto se mira de cerca para buscar un numero concreto, asi
   que el numero manda sobre todo lo demas.

   Indice:
     1. Variables       5. Buscador
     2. Base            6. Lista
     3. Cabecera        7. Animaciones
     4. Apuestas
   ========================================================================= */


/* =========================================================================
   1. VARIABLES
   Copiadas de style.css a proposito: esta pagina no carga aquel fichero, que
   ademas coloca el marco en posiciones absolutas. Si cambias la paleta alli,
   cambiala aqui.
   ========================================================================= */

:root{
  --tinte-pantalla-1: rgba(6,7,9,.88);
  --tinte-pantalla-2: rgba(1,2,3,.94);

  --blanco:        #fff;
  --acero:         #b9b6ac;   /* textos secundarios sobre metal */
  --acero-muerto:  #9c9188;   /* nombre tachado */
  --oro:           #e0b352;   /* precios */
  --verde:         #8fd14f;   /* apuestas abiertas */
  --rojo:          #ff8a7a;   /* apuestas cerradas */

  --metal-1:       #2b2724;
  --metal-2:       #17130f;
  --borde:         rgba(255,255,255,.07);
  --borde-fuerte:  rgba(0,0,0,.55);

  --radio-caja:    2px;

  --f-titulo: 'Bahnschrift','Oswald','Arial Narrow',Impact,sans-serif;
  --f-cifra:  'Consolas','Courier New',monospace;

  --sombra-1: 0 1px 2px rgba(0,0,0,.85);
  --sombra-3: 0 2px 4px rgba(0,0,0,.80);
  --relieve:  inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 7px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }


/* =========================================================================
   2. BASE
   ========================================================================= */

body{
  margin:0;
  min-height:100vh;
  font-family:var(--f-titulo);
  color:var(--acero);

  /* Metal rayado, como el marco. Las dos primeras capas son la suciedad; la
     tercera, el veteado vertical. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(90% 60% at 80% 110%, rgba(0,0,0,.55), transparent 70%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--metal-1), var(--metal-2));
  background-attachment:fixed;
}

/* Las cajas "de pantalla": negro con lineas de barrido, igual que en el marco. */
.pantalla{
  position:relative;
  background:linear-gradient(180deg, var(--tinte-pantalla-1), var(--tinte-pantalla-2));
  border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-caja);
  box-shadow:var(--relieve);
}
.pantalla::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
              rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}


/* =========================================================================
   3. CABECERA
   ========================================================================= */

.cabecera{
  display:flex; flex-wrap:wrap; gap:16px 26px;
  align-items:center; justify-content:space-between;
  padding:18px clamp(14px, 4vw, 44px) 14px;
  border-bottom:1px solid var(--borde-fuerte);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}

.titulo{ display:flex; align-items:center; gap:16px; }
.logo{ height:54px; width:auto; filter:drop-shadow(var(--sombra-3)); }

.titulo-txt h1{
  margin:0;
  font-family:var(--f-titulo); font-weight:700;
  font-size:clamp(26px, 4.4vw, 42px);
  letter-spacing:.14em; line-height:1;
  color:var(--blanco); text-shadow:var(--sombra-3);
}
.subtitulo{
  margin:5px 0 0;
  font-size:13px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--acero); text-shadow:var(--sombra-1);
}

.estado{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }

.contadores{ display:flex; gap:18px; font-size:14px; letter-spacing:.06em; }
.dato{ display:inline-flex; align-items:center; gap:6px; color:var(--acero); }
.dato i{ font-size:16px; line-height:1; }
.dato b{
  font-family:var(--f-cifra); font-weight:700;
  color:var(--blanco); text-shadow:var(--sombra-1);
}
/* El bote va en oro, como los precios de la cinta. */
.dato:last-child b{ color:var(--oro); }


/* =========================================================================
   4. APUESTAS
   Los mismos tres estados y los mismos colores que la franja del marco.
   ========================================================================= */

.apuestas{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px;
  border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-caja);
  box-shadow:var(--relieve);
  font-family:var(--f-titulo); font-weight:700;
  font-size:19px; letter-spacing:.14em;
  color:var(--blanco); text-shadow:var(--sombra-3);
  background:linear-gradient(180deg, rgba(58,58,58,.66), rgba(30,30,30,.78));
}
.apuestas i{ font-size:18px; line-height:1; transform:translateY(-1px); }

.apuestas[data-fase="preparation"]{
  background:linear-gradient(180deg, rgba(38,124,54,.68), rgba(18,72,28,.78));
}
.apuestas[data-fase="preparation"] i{ color:var(--verde); animation:parpadeo 1.6s infinite; }

.apuestas[data-fase="locked"]{
  background:linear-gradient(180deg, rgba(168,32,32,.66), rgba(104,16,16,.76));
}
.apuestas[data-fase="locked"] i{ color:var(--rojo); }

.apuestas[data-fase="finished"],
.apuestas[data-fase="offline"]{ color:#d8d5cd; }


/* =========================================================================
   5. BUSCADOR
   ========================================================================= */

.barra-buscar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:11px clamp(14px, 4vw, 44px);
  background:linear-gradient(180deg, rgba(20,17,14,.97), rgba(12,10,8,.97));
  border-bottom:1px solid var(--borde-fuerte);
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.barra-buscar > i{ font-size:18px; color:var(--acero); }

.barra-buscar input{
  flex:1; min-width:0;
  padding:9px 12px;
  border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-caja);
  background:linear-gradient(180deg, var(--tinte-pantalla-1), var(--tinte-pantalla-2));
  box-shadow:var(--relieve);
  color:var(--blanco);
  font-family:var(--f-titulo); font-size:16px; letter-spacing:.04em;
}
.barra-buscar input:focus{
  outline:none;
  border-color:rgba(224,179,82,.55);
  box-shadow:var(--relieve), 0 0 0 2px rgba(224,179,82,.20);
}
.barra-buscar input::placeholder{ color:#6f665f; letter-spacing:.06em; }

.limpiar{
  display:flex; align-items:center;
  padding:9px 11px; cursor:pointer; line-height:1;
  border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-caja);
  background:linear-gradient(180deg, rgba(58,58,58,.5), rgba(24,24,24,.6));
  color:var(--acero);
}
.limpiar:hover{ color:var(--blanco); }
.limpiar i{ font-size:16px; }


/* =========================================================================
   6. LISTA
   ========================================================================= */

main{ padding:18px clamp(14px, 4vw, 44px) 60px; }

.lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:9px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}

.jug{
  position:relative;
  display:flex; align-items:center; gap:13px;
  padding:10px 14px;
  background:linear-gradient(180deg, var(--tinte-pantalla-1), var(--tinte-pantalla-2));
  border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-caja);
  box-shadow:var(--relieve);
}
/* Lineas de barrido, como las cajas de pantalla del marco. */
.jug::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:var(--radio-caja);
  background:repeating-linear-gradient(to bottom,
              rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}

/* El numero: lo que hay que leer y repetir en el chat para apostar. */
.jug-num{
  flex:none; min-width:2.2em; text-align:center;
  font-family:var(--f-cifra); font-weight:700;
  font-size:27px; line-height:1;
  color:var(--oro); text-shadow:var(--sombra-3);
}

.jug-nombre{
  flex:1; min-width:0;
  font-family:var(--f-titulo); font-weight:600;
  font-size:19px; letter-spacing:.02em;
  color:var(--blanco); text-shadow:var(--sombra-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.jug-precio{
  flex:none;
  font-family:var(--f-cifra); font-weight:700; font-size:15px;
  color:var(--oro); text-shadow:var(--sombra-1);
}

.jug.muerto{ opacity:.5; }
.jug.muerto .jug-num{ color:var(--acero-muerto); }
.jug.muerto .jug-nombre{ color:var(--acero-muerto); text-decoration:line-through; }
.jug.muerto .jug-precio{ visibility:hidden; }

.vacio{
  margin:44px 0; text-align:center;
  font-size:15px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--acero); text-shadow:var(--sombra-1);
}
.vacio[hidden]{ display:none; }


/* =========================================================================
   7. ANIMACIONES
   ========================================================================= */

@keyframes parpadeo{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* Quien acaba de entrar: un destello dorado y ya. Esta pantalla se mira de
   reojo mientras se decide a quien apostar, no debe estar viva todo el rato. */
@keyframes entra{
  from{ box-shadow:var(--relieve), 0 0 0 2px rgba(224,179,82,.45); }
  to  { box-shadow:var(--relieve), 0 0 0 2px rgba(224,179,82,0); }
}
.jug.nuevo{ animation:entra 1.6s ease-out; }

@media (max-width:520px){
  .cabecera{ justify-content:flex-start; }
  .estado{ align-items:flex-start; }
  .lista{ grid-template-columns:1fr; }
  .contadores{ gap:12px; font-size:13px; }
}