/* CUTHALF · pantallas
   Portada, fin de partida, marcas, entrada de nombre y aviso. */

/* ── pantallas ───────────────────────────────────────────────── */
.screen{
  position:fixed;inset:0;background:var(--ground);z-index:5;
  display:flex;flex-direction:column;justify-content:center;gap:22px;
  padding:max(22px,env(safe-area-inset-top)) 26px max(26px,env(safe-area-inset-bottom));
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  /* Centrado mientras quepa; cuando no quepa, pegado arriba.
     Un `center` a secas reparte el sobrante a los dos lados también
     cuando el sobrante es negativo: la mitad de más se va por encima
     del principio del desplazamiento, donde no se puede llegar ni
     arrastrando. En un móvil, con la pantalla de fin entera, eso se
     comía el titular. `safe` es exactamente esto: centra, salvo que
     centrar esconda el principio.                                   */
  justify-content:safe center;
}
.screen[hidden]{display:none}
/* la ayuda ocupa en la portada el mismo hueco que «Cerrar» en las
   demás pantallas: esquina superior derecha, sobre el margen. Fuera
   del flujo, para no abrir un hueco en la pila ni pelearse con el
   logotipo, que en un móvil ocupa todo el ancho.                   */
#go-tutor{position:absolute;top:max(22px,env(safe-area-inset-top));right:26px}
/* Las dos esquinas de la portada —la taza y la ayuda— van fuera del
   flujo, así que la pila no les reserva sitio: cuando la portada no
   cabe y deja de estar centrada, el logotipo se les subía encima. La
   franja se reserva aquí, con el relleno de arriba.                */
#scr-intro{padding-top:calc(max(22px,env(safe-area-inset-top)) + 38px)}
/* logotipo dibujado: la barra de la H y el brazo del 7 están
   centrados en y=51, justo donde pasa la línea de corte          */
.mark{position:relative;display:block;line-height:0;align-self:flex-start;width:min(86vw,460px)}
.mark svg{display:block;width:100%;height:auto}
.mark::after{content:"";position:absolute;top:51%;left:-40vw;right:-40vw;height:2px;
  background:var(--signal);transform:translateY(-50%)}
/* el ancho se mide para que el alto salga como el del logotipo viejo:
   la palabra es más larga, así que 150 px la dejaban en un hilo */
.mark--sm{width:200px}
.mark--sm::after{display:none}
.headline{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(52px,17vw,96px);line-height:.82;letter-spacing:-.05em;
  position:relative;align-self:flex-start;
}
.headline::after{content:"";position:absolute;top:47%;left:-40vw;right:-40vw;height:1px;background:var(--signal)}
/* en una pantalla que no es el final de una partida, el titular no
   tiene por qué ocupar la mitad de la pantalla ni partirse en dos */
.headline--sm{font-size:clamp(30px,9vw,46px)}
.lede{font-size:13px;line-height:1.65;max-width:30ch;opacity:.72}
.row--left{justify-content:flex-start;gap:22px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:none;border:1px solid var(--ink);
  padding:16px 22px;cursor:pointer;align-self:stretch;line-height:1.4;
  transition:background .18s,color .18s;
}
.btn:active{background:var(--ink);color:var(--ground)}
.btn[hidden]{display:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stats{display:flex;flex-direction:column}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--hair);padding:12px 0}
.lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.val{font-family:var(--sans);font-weight:500;font-size:26px;letter-spacing:-.02em;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── tabla de marcas ─────────────────────────────────────────── */
.tbl{list-style:none;display:flex;flex-direction:column}
.tbl li{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:14px;align-items:baseline;
  border-top:1px solid var(--hair);padding:10px 0;font-size:12px}
.tbl li.me{color:var(--signal)}
/* La cabecera no es una marca: dice qué es cada columna. Sin ella la
   primera cifra —el puesto— se leía como parte de la fila. Va con la
   misma rejilla que las demás y en el tono de las etiquetas.       */
.tbl li.head{border-top:0;padding:0 0 6px;opacity:.4;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.tbl li.head .l,.tbl li.head .a,.tbl li.head .r{font-family:inherit;font-size:10px;font-weight:400;opacity:1}
.tbl .r{opacity:.4}
.tbl .n{font-weight:500;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .l{font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-.01em}
.tbl .a{opacity:.55;font-size:11px;min-width:52px;text-align:right}
/* El pie de la tabla no es una fila más: es una nota. Si hereda la
   rejilla de las filas, el texto cae en la columna del puesto —22 px—
   y se lee en vertical; de ahí que ocupe él solo toda la base. Y va
   más apagado que las marcas, que son lo que se viene a mirar.      */
.tbl .empty,.empty{
  display:block;grid-column:1/-1;width:100%;
  font-size:10px;letter-spacing:.2em;line-height:1.7;text-transform:uppercase;
  opacity:.32;border-top:1px solid var(--hair);padding:11px 0 2px;
}

/* ── entrada de nombre ───────────────────────────────────────── */
.entry{display:flex;align-items:flex-end;gap:16px;border-top:1px solid var(--hair);padding-top:14px}
.tag{
  font-family:var(--sans);font-weight:500;font-size:20px;letter-spacing:-.01em;
  flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--ink);
  color:var(--ink);padding:0 0 6px;
}
.tag::placeholder{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.32}
.note{font-size:11px;letter-spacing:.1em;line-height:1.6;opacity:.5;text-transform:uppercase}
/* El aviso de pantalla grande sólo aparece cuando sobra ancho, que es
   justo cuando un párrafo se estira hasta ser ilegible: se le pone
   medida de renglón. Y un punto más de tinta que las otras notas
   porque es una recomendación, no un pie de página. */
#big-hint:not([hidden]){max-width:60ch;opacity:.62}
/* conmutador de tema: disco partido por su diámetro, como el juego.
   Al cambiar gira 180º y los dos colores intercambian su sitio.   */
.tt{
  width:26px;height:26px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--ink);border-radius:50%;background:none;
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s;
}
.tt::before{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:var(--ink)}
.tt::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1px;
  background:var(--signal);transform:translateY(-.5px)}
[data-theme="dark"] .tt{transform:rotate(180deg)}
.tt:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* selector de tiempo */
.seg{display:flex;border:1px solid var(--hair)}
/* el aire de los lados es lo que hace que se lean como botones y no
   como texto pegado a una caja */
.seg button{font:inherit;font-size:11px;line-height:13px;letter-spacing:.1em;min-width:42px;padding:9px 14px;
  background:none;border:0;border-left:1px solid var(--hair);color:var(--ink);opacity:.45;cursor:pointer;
  white-space:nowrap;
  transition:background .18s,color .18s,opacity .18s}
.seg button:first-child{border-left:0}
/* «Sin límite» es un ocho tumbado entre cifras, y en esta letra mide
   la mitad de alto que ellas —0,48— aunque sea más ancho. Al mismo
   cuerpo parece medio borrado, así que se le da el suyo.

   Los 13 px de renglón son los de todos los botones y por eso están
   escritos arriba: con el alto de línea al aire, el botón del ∞
   crecería y estiraría de paso a los otros cuatro, que en una fila
   miden todos lo que el más alto.

   Y el punto de relleno que se le pasa de abajo arriba: en un renglón
   fijo, una letra más grande apoya la línea base más abajo — la caja
   de la letra no cabe en los 13 px y se reparte el sobrante por igual
   arriba y abajo, así que la base baja con el cuerpo. El ∞ salía
   colgando 1,75 px por debajo de las cifras. Se le devuelve eso sin
   tocar el alto del botón, que lleva fondo cuando está elegido y un
   botón más alto que sus vecinos se vería. Medido, no calculado.  */
.seg button.inf{font-size:16px;padding-top:8px;padding-bottom:10px}
/* el selector de clasificación ocupa el ancho: son cinco tablas y
   ninguna es más importante que las otras */
.seg--full{width:100%}
.seg--full button{flex:1;min-width:0}
/* qué tabla y desde cuándo van juntos, más apretados que el ritmo de
   la pantalla: son dos mitades de la misma pregunta, y con el aire de
   los demás bloques el segundo parecería un mando suelto sin rótulo */
.picker{display:flex;flex-direction:column;gap:6px;width:100%}
/* el conmutador y, debajo, con quién estás compitiendo: el nombre con
   el que suben tus marcas, que si no sólo se ve cuando sales en la
   tabla — y quien empieza no sale                                   */
.scope{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.who{display:flex;align-items:baseline;gap:16px;max-width:100%}
.who b{font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:-.01em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .lnk{flex:none}
.seg button.on{background:var(--ink);color:var(--ground);opacity:1}
#scr-scores{z-index:7;justify-content:flex-start;gap:18px}
/* preguntar siempre va por encima de lo que se estaba mirando: desde
   las clasificaciones se puede cambiar el nombre, y el cuadro tiene
   que salir delante, no detrás */
#scr-ask{z-index:10;justify-content:center;justify-content:safe center}
.toast{
  /* el aviso, por encima de todo: también del cuadro de preguntar */
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));z-index:11;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--ground);padding:12px 20px;max-width:86vw;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;
  transition:opacity .24s,transform .24s cubic-bezier(.2,.8,.2,1);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* Ya no lleva cifra al lado, así que el rótulo se va solo a la
   derecha: es donde estaba el dato, donde el ojo lo busca y donde cae
   el pulgar. La fila entera sigue siendo el botón.                  */
.statlink{width:100%;font:inherit;color:inherit;background:none;border:0;
  border-top:1px solid var(--hair);cursor:pointer;
  justify-content:flex-end;text-align:right}
.statlink .u{border-bottom:1px solid var(--ink);padding-bottom:2px}
.btn--ghost{border-color:var(--hair)}
.btn--solid{background:var(--ink);color:var(--ground)}
.btn--sm{font-size:11px;letter-spacing:.18em;padding:13px 20px}
.btn--solid:active{background:none;color:var(--ink)}
.free{display:flex;flex-direction:column;gap:12px}
/* separador con rótulo: la línea se abre a los lados del texto */
.sep{display:flex;align-items:center;gap:14px;margin-top:4px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--hair)}
.record{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;color:var(--signal);
  font-size:clamp(26px,8vw,40px);line-height:1;animation:capIn .45s cubic-bezier(.2,.8,.2,1)}
.daily{display:flex;flex-direction:column;gap:11px}
/* La firma de la casa, al fondo del todo y centrada.

   Los dos márgenes automáticos —uno aquí y otro en el logotipo— se
   reparten el hueco por igual: la firma acaba pegada abajo y lo demás
   queda centrado en lo que sobra. Si el contenido no cabe, los
   automáticos valen cero y todo se desplaza como siempre, sin que la
   firma se suba encima de nada.                                    */
.foot{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  text-align:center;opacity:.34;margin-top:auto}
#scr-intro .mark{margin-top:auto}

/* ── donativos ───────────────────────────────────────────────────
   La taza ocupa la esquina de enfrente de «Cómo se juega», con el
   mismo hueco y también fuera del flujo. Sin marco: es un icono, no
   un botón de acción.                                              */
.cup{position:absolute;top:max(22px,env(safe-area-inset-top));left:26px;
  width:26px;height:26px;padding:0;flex:none;
  background:none;border:0;color:var(--ink);cursor:pointer;
  opacity:.5;transition:opacity .18s}
.cup:active{opacity:1}
.cup:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.cup svg,.cup-xl svg{display:block;width:100%;height:auto}
.cup-xl{display:block;width:72px;color:var(--ink);opacity:.45}
/* la pantalla existe y la taza lleva a ella, pero todavía no lleva a
   ninguna parte más. Decirlo con la misma raya de la medida válida */
.soon{align-self:flex-start;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);
  border:1px solid var(--signal);padding:11px 17px}
#scr-donate{z-index:7;justify-content:flex-start;gap:20px}

/* Los puntos son el resultado de la partida —de ellos sale la
   temporada—, así que no pueden quedar como una cifra más al final de
   la lista: van los primeros, debajo del titular. El resalte es el
   azul de la medida válida y un cuerpo mayor, nada más: no hace falta
   gritar para que se lea antes que lo demás.                        */
.pts{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid var(--hair);padding:13px 0 0}
.pts .lbl{opacity:.7}
.pts .val{font-size:clamp(30px,9.5vw,40px);color:var(--signal)}

/* Subir la partida: con qué nombre se sube, qué puesto ocuparía y el
   botón, en ese orden y en el mismo bloque — son un solo gesto. Va
   separado por una raya porque, pegado a «volver a empezar»,
   parecería un botón más de navegación. La raya la pone el bloque, no
   la casilla del nombre: dos seguidas se ven como un error.        */
.keep{display:flex;flex-direction:column;gap:16px;
  border-top:1px solid var(--hair);padding-top:16px}
.keep .entry{border-top:0;padding-top:0}