/* ============================================================
   Round1 · Sistema de diseño · dirección "Ficha"
   Minimalismo cálido: papel, tinta y un rojo hinomaru.
   Cada juego es una ficha de arcade acuñada: medalla, canto
   duro y número. Nada de sombras difusas fuera del modal.
   Tipografía: Fraunces (display) + Instrument Sans (UI).
   ============================================================ */

:root {
  /* — Paleta base — */
  --papel: #F7F2E9;
  --papel-hondo: #EFE7D8;
  --carta: #FFFDF8;
  --carta-calida: #FDF6EC;   /* superficie de la ficha */
  --canto-calido: #EBD3B8;   /* canto de la ficha */
  --tinta: #26201A;
  --tinta-suave: #6C6153;
  --tinta-tenue: #A79880;
  --linea: #E1D6C0;
  --linea-fuerte: #D5C8AF;

  /* — Acento principal (hinomaru) — */
  --rojo: #D94F3C;
  --rojo-oscuro: #B33D2C;
  --rojo-suave: #F8E2DB;
  --rojo-canto: #E7B9AE;     /* canto del panel del reto */
  --rojo-tenue: #D0A296;     /* katakana sobre rojo suave */
  --rojo-texto: #8A5347;     /* texto corrido sobre rojo suave */

  /* — Colores por familia de juego —
     -suave para fondos, -tinta para texto legible sobre su propio
     -suave (todas las combinaciones pasan 4.5:1). */
  --verde: #67905C;        --verde-suave: #E5EDDC;     --verde-tinta: #47663F;
  --azul: #5B79AE;         --azul-suave: #E2E8F3;      --azul-tinta: #3E567F;
  --mostaza: #BE8B2C;      --mostaza-suave: #F5E9CE;   --mostaza-tinta: #8A6413;
  --ciruela: #8F5E94;      --ciruela-suave: #EFE3EF;   --ciruela-tinta: #67436B;
  --celeste: #4C97B1;      --celeste-suave: #DFEEF3;   --celeste-tinta: #2E6A80;
  --naranja: #C97434;      --naranja-suave: #F6E4D2;   --naranja-tinta: #8A4E1E;

  /* — Superficie — */
  --trama-papel: repeating-linear-gradient(0deg,
    rgba(38, 32, 26, .021) 0 1px, transparent 1px 3px);
  --velo-hinomaru: radial-gradient(120% 60% at 50% 0%,
    rgba(217, 79, 60, .05), transparent 70%);

  /* — Canto: la sombra del sistema no tiene blur —
     --sombra-1/2 quedan como alias para que los juegos que ya las
     usaban hereden el canto duro sin tocar una línea. */
  --canto: 0 2px 0 var(--linea-fuerte);
  --canto-alto: 0 4px 0 var(--linea-fuerte);
  --canto-familia: 0 4px 0 var(--canto-calido);
  --sombra-1: var(--canto);
  --sombra-2: var(--canto-alto);
  --sombra-modal: 0 4px 10px rgba(38, 32, 26, .08), 0 28px 60px -16px rgba(38, 32, 26, .22);
  --sombra-3: var(--sombra-modal);

  /* — Capa de juego: superficie y material —
     La profundidad no es luz, es papelería: cada cosa pertenece a un
     plano (mesa, hueco, impreso, ficha, HUD) y se dibuja como tal. */
  --hueco: inset 0 2px 0 var(--linea-fuerte), inset 0 0 0 1.5px var(--linea);
  --contacto: rgba(38, 32, 26, .09);
  --linea-juego: rgba(38, 32, 26, .13);
  --linea-juego-fuerte: rgba(38, 32, 26, .22);
  --grano-ficha: repeating-linear-gradient(45deg,
    rgba(38, 32, 26, .035) 0 2px, transparent 2px 4px);
  --velo-papel: rgba(247, 242, 233, .93);
  --madera: #EBD3B8;   --madera-canto: #C9B893;   /* pisos, paredes */
  --tabla: #F5E9CE;    --tabla-canto: #C9B893;    /* tablas, botín, tablero */
  --tinta-canto: #0F0B08;

  /* — Rampa de ficha: once pasos + overflow —
     Una sola rampa para todo el sitio: 2048, esferas de Fusión,
     bloques de Torre. Relleno y canto un 12–14 % más oscuro; el
     texto salta a #FFF6EE cuando el relleno oscurece (del 32 en
     adelante). El último paso es oro: cambio de material. */
  --ficha-2:    #FFFDF8;  --ficha-2-c:    #EBD3B8;
  --ficha-4:    #F5E9CE;  --ficha-4-c:    #E3D0A4;
  --ficha-8:    #EBD59B;  --ficha-8-c:    #D4B871;
  --ficha-16:   #DFB65B;  --ficha-16-c:   #C49A3C;
  --ficha-32:   #D69440;  --ficha-32-c:   #B4762A;
  --ficha-64:   #C97434;  --ficha-64-c:   #A55B24;
  --ficha-128:  #D94F3C;  --ficha-128-c:  #B33D2C;
  --ficha-256:  #B33D2C;  --ficha-256-c:  #8E2E20;
  --ficha-512:  #96301F;  --ficha-512-c:  #7A2617;
  --ficha-1024: #6E2517;  --ficha-1024-c: #54180D;
  --oro:        #BE8B2C;  --oro-canto:    #96691A;
  --ficha-mas:  #26201A;

  /* — Capa de juego: layout — */
  --j-cifra: clamp(48px, 13vw, 64px);   /* el noveno paso de la escala */
  --riel-alto: 64px;      --junta: 2.5px;
  --campo-radio: 20px;    --campo-margen: 14px;
  --delantal-x: 20px;     --delantal-arriba: 28px;   --delantal-abajo: 46px;
  --pulgar: 240px;
  --compu-col: 260px;     --compu-campo: 560px;

  /* — Motion — */
  --resorte: cubic-bezier(.34, 1.45, .48, 1);
  --impacto: cubic-bezier(.16, 1, .3, 1);   /* desaceleración de partículas */
  --t-stop: 60ms;   --t-part: 320ms;   --t-cuenta: 600ms;
  --salida: cubic-bezier(.22, .8, .32, 1);
  --sello: cubic-bezier(.2, .9, .25, 1);
  --firme: cubic-bezier(.2, .7, .3, 1);
  --t-tap: 90ms;
  --t-rapido: 150ms;
  --t-sello: 260ms;
  --t-medio: 260ms;
  --t-lento: 460ms;

  /* — Tipografía — */
  --f-display: 'Fraunces', Georgia, serif;
  --f-ui: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;

  /* Siete pasos. No hay tamaños fuera de esta escala. */
  --t-xs: 11px;   /* paratexto y katakana */
  --t-s: 13px;    /* metadatos, chips, rótulos */
  --t-m: 15px;    /* texto corrido, bajadas */
  --t-l: 17px;    /* bajada del hero, botones grandes */
  --d-s: 21px;    /* título de tarjeta */
  --d-m: 28px;    /* título de pantalla, marcadores */
  --d-l: 40px;    /* reto del día, puntaje final */
  --d-xl: clamp(34px, 6.5vw, 46px);

  /* — Espacio y radio — */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px;
  --aire-seccion: 48px;

  --r-chico: 10px;
  --r-medio: 18px;
  --r-grande: 26px;
  --r-ficha: 999px;
}

@media (min-width: 800px) {
  :root { --aire-seccion: 72px; }
}

/* ============ Reset ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-ui);
  font-size: 16px;   /* base del documento: la escala de siete pasos vive arriba de esto */
  line-height: 1.5;
  color: var(--tinta);
  background-color: var(--papel);
  background-image: var(--trama-papel), var(--velo-hinomaru);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--rojo); color: #FFF6EE; }

:focus-visible {
  outline: 2.5px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============ Familias ============
   Colgás una de estas de cualquier bloque y sus medallas, cantos y
   estados toman el color de la familia sin estilos inline. */
.f-naranja { --fam: var(--naranja); --fam-suave: var(--naranja-suave); --fam-tinta: var(--naranja-tinta); }
.f-celeste { --fam: var(--celeste); --fam-suave: var(--celeste-suave); --fam-tinta: var(--celeste-tinta); }
.f-mostaza { --fam: var(--mostaza); --fam-suave: var(--mostaza-suave); --fam-tinta: var(--mostaza-tinta); }
.f-verde   { --fam: var(--verde);   --fam-suave: var(--verde-suave);   --fam-tinta: var(--verde-tinta); }
.f-azul    { --fam: var(--azul);    --fam-suave: var(--azul-suave);    --fam-tinta: var(--azul-tinta); }
.f-ciruela { --fam: var(--ciruela); --fam-suave: var(--ciruela-suave); --fam-tinta: var(--ciruela-tinta); }
.f-rojo    { --fam: var(--rojo);    --fam-suave: var(--rojo-suave);    --fam-tinta: var(--rojo-oscuro); }

/* ============ Tipografía ============ */
.display {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

/* De 40px para arriba Fraunces necesita menos peso y más apriete */
.display-grande {
  font-weight: 560;
  letter-spacing: -0.020em;
}

.display em, .display-grande em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--rojo);
}

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.eyebrow .jp {
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: none;
}

/* Todos los números del sitio: Fraunces 600 tabular. Sin excepción. */
.num {
  font-family: var(--f-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
}

/* ============ Medalla ============
   La ficha del icono: círculo de familia con doble anillo. El anillo
   interior es el canto acuñado, no crece con el diámetro. */
.medalla {
  --med: 78px;
  --med-icono: 36px;
  --med-borde: 2px;
  --med-anillo: 4px;
  --med-anillo-2: 5.5px;
  --med-fondo: var(--carta-calida);
  position: relative;
  flex-shrink: 0;
  width: var(--med);
  height: var(--med);
  border-radius: 50%;
  background: var(--fam-suave, var(--papel-hondo));
  border: var(--med-borde) solid var(--fam, var(--linea-fuerte));
  box-shadow:
    inset 0 0 0 var(--med-anillo) var(--med-fondo),
    inset 0 0 0 var(--med-anillo-2) color-mix(in srgb, var(--fam, var(--tinta-tenue)) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fam, var(--tinta));
  transition: box-shadow var(--t-rapido) var(--firme), transform var(--t-medio) var(--resorte);
}
.medalla > svg { width: var(--med-icono); height: var(--med-icono); }

/* Fila compacta */
.medalla--s { --med: 48px; --med-icono: 24px; --med-borde: 1.5px; --med-anillo: 3.5px; --med-anillo-2: 5px; }
/* Reto del día */
.medalla--reto { --med: 104px; --med-icono: 46px; --med-anillo: 5px; --med-anillo-2: 6.5px; }
/* Pantalla de inicio de un juego */
.medalla--xl {
  --med: 126px; --med-icono: 56px; --med-borde: 2.5px;
  --med-anillo: 6px; --med-anillo-2: 8px;
  --med-fondo: var(--papel);
  box-shadow:
    inset 0 0 0 var(--med-anillo) var(--med-fondo),
    inset 0 0 0 var(--med-anillo-2) color-mix(in srgb, var(--fam, var(--tinta-tenue)) 35%, transparent),
    0 4px 0 color-mix(in srgb, var(--fam, var(--linea-fuerte)) 35%, var(--canto-calido));
}
/* Estado activo: la medalla se llena */
.medalla--pleno {
  background: var(--fam, var(--rojo));
  color: var(--papel);
}

@media (max-width: 380px) {
  .medalla--xl { --med: 104px; --med-icono: 46px; }
  .medalla--reto { --med: 84px; --med-icono: 38px; --med-anillo: 4px; --med-anillo-2: 5.5px; }
}

/* Medalla grande con el puntaje adentro (pantalla final) */
.medalla-puntaje {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--carta);
  border: 2.5px solid var(--rojo);
  box-shadow:
    inset 0 0 0 7px var(--rojo-suave),
    inset 0 0 0 9px color-mix(in srgb, var(--rojo) 45%, transparent),
    0 4px 0 var(--rojo-canto);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  animation: r1-acunar var(--t-sello) var(--sello) both;
}
.medalla-puntaje .rotulo-chico {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rojo-oscuro);
  line-height: 1;
}
.medalla-puntaje .cifra {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--d-l);
  line-height: 1.05;
  letter-spacing: -0.020em;
  font-variant-numeric: tabular-nums;
  color: var(--fam, var(--tinta));
}
.medalla-puntaje .cifra small { font-size: var(--t-s); font-weight: 700; letter-spacing: 0; }
.medalla-puntaje .jp {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--rojo-oscuro);
  line-height: 1;
}
@media (max-width: 380px) {
  .medalla-puntaje { width: 132px; height: 132px; }
  .medalla-puntaje .cifra { font-size: var(--d-m); }
}

/* ============ Ficha: la tarjeta de juego ============ */
.ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, var(--carta-calida), var(--carta));
  border: 1.5px solid var(--canto-calido);
  border-radius: var(--r-grande);
  box-shadow: var(--canto-familia);
  text-decoration: none;
  color: inherit;
  transition: transform 140ms var(--firme), box-shadow 140ms var(--firme);
}
.ficha .medalla { margin-bottom: var(--e-4); }
.ficha h3 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-size: var(--d-s);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.ficha .bajada {
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--tinta-suave);
  margin-bottom: var(--e-4);
  min-height: 45px;   /* dos líneas reales: la grilla no se desalinea */
}
.ficha-pie {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1.5px dotted var(--canto-calido);
  display: flex;
  justify-content: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-tenue);
  white-space: nowrap;
}
.ficha-pie .sep { opacity: .5; }

.ficha:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--canto-calido); }
.ficha:hover .medalla {
  box-shadow:
    inset 0 0 0 calc(var(--med-anillo) + 1px) var(--med-fondo),
    inset 0 0 0 calc(var(--med-anillo-2) + 1px) color-mix(in srgb, var(--fam) 35%, transparent);
}
.ficha:active { transform: scale(.985); box-shadow: var(--canto-familia); transition-duration: var(--t-tap); transition-timing-function: linear; }

/* Ficha ancha: el juego destacado de una sección */
.ficha--ancha { grid-column: 1 / -1; }
@media (min-width: 620px) {
  .ficha--ancha {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--e-5);
    padding: var(--e-5) 28px;
  }
  .ficha--ancha .medalla { margin-bottom: 0; }
  .ficha--ancha .ficha-cuerpo { flex: 1; }
  .ficha--ancha h3 { font-size: var(--d-m); }
  .ficha--ancha .bajada { min-height: 0; max-width: 520px; margin-bottom: var(--e-3); }
  .ficha--ancha .ficha-pie {
    width: auto;
    margin: 0;
    padding: 0 0 0 var(--e-5);
    border-top: none;
    border-left: 1.5px dotted var(--canto-calido);
    flex-direction: column;
    gap: 6px;
    align-self: stretch;
    justify-content: center;
    text-align: center;
  }
  .ficha--ancha .ficha-pie .sep { display: none; }
}

/* Al volver de un juego, su medalla gira apenas y el número se pinta */
.ficha.recien-visitada .medalla { animation: r1-reubicar 900ms var(--resorte) 200ms backwards; }
.ficha.recien-visitada .ficha-pie { color: var(--fam); }
@keyframes r1-reubicar {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ficha.recien-visitada .medalla { animation: none; }
}

/* ============ Rótulo de sección ============ */
.rotulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.rotulo-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fam);
  color: #FFF6EE;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1.5px var(--papel), 0 0 0 3.5px color-mix(in srgb, var(--fam) 30%, transparent);
}
.rotulo h2 {
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
}
.rotulo .jp {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--tinta-tenue);
}
.rotulo-regla {
  flex: 1 1 24px;
  min-width: 16px;
  height: 2px;
  background: var(--fam-suave);
}
.rotulo-conteo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-tenue);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .rotulo { gap: var(--e-2); }
  .rotulo-regla { display: none; }
  .rotulo-conteo { margin-left: auto; }
}

/* ============ Marcador ============
   Un solo marcador para los 23 juegos: cajita acuñada, rótulo
   chiquito arriba y el número en Fraunces tabular. */
.marcadores {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  width: 100%;
}
.marcador {
  flex: 1;
  min-width: 0;
  background: var(--carta);
  border: 1.5px solid var(--canto-calido);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--canto-calido);
  padding: 6px 12px;
  text-align: left;
}
.marcador-rotulo {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.marcador-valor {
  display: block;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-weight: 600;
  font-size: var(--d-m);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.marcador--puntos { flex: 1.4; }
.marcador--puntos .marcador-valor { color: var(--fam, var(--tinta)); }
.marcador--racha { flex: 0 0 68px; padding-inline: 10px; background: var(--fam-suave); }
.marcador--racha .marcador-rotulo { letter-spacing: .1em; }
.marcador--ancho { flex: 1.8; }

/* Reloj crítico: rojo y latido; abajo de 5 s el latido se apura */
.marcador-valor.critico { color: var(--rojo); animation: r1-latido 1s ease-in-out infinite; }
.marcador-valor.critico.urgente { animation-duration: 600ms; }

@media (max-width: 380px) {
  .marcadores { gap: var(--e-2); padding: 10px; }
  .marcador { padding: 5px 10px; }
  .marcador-rotulo { letter-spacing: .1em; }
  .marcador-valor { font-size: var(--d-s); }
  .marcador--racha { flex: 0 0 58px; }
}

/* En pantallas bajas el marcador se aprieta para no comerle
   lugar al campo de juego. */
@media (max-height: 760px) {
  .marcadores { padding-top: var(--e-1); padding-bottom: var(--e-2); }
  .marcador { padding: 5px 10px; }
  .marcador-valor { font-size: var(--d-s); }
}

/* Barra de tiempo compartida */
.barra-tiempo {
  height: 4px;
  background: var(--papel-hondo);
  overflow: hidden;
  flex-shrink: 0;
}
.barra-tiempo > i, .barra-tiempo > div {
  display: block;
  height: 100%;
  background: var(--fam, var(--rojo));
  transition: width 200ms linear, background var(--t-rapido) ease;
}
.barra-tiempo.critica > i, .barra-tiempo.critica > div { background: var(--rojo); }
.barra-tiempo.urgente > i, .barra-tiempo.urgente > div {
  background: repeating-linear-gradient(115deg,
    var(--rojo) 0 8px, var(--rojo-oscuro) 8px 16px);
  background-size: 22.6px 100%;
  animation: r1-franjas 800ms linear infinite;
}
@keyframes r1-franjas {
  from { background-position: 0 0; }
  to { background-position: 22.6px 0; }
}

/* ============ Sello (hanko) ============ */
.sello {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--rojo);
  box-shadow: inset 0 0 0 2px var(--carta), inset 0 0 0 3px var(--rojo);
  color: var(--rojo);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-xs);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  user-select: none;
}
.sello--chico { width: 52px; height: 52px; }
.sello .lat { font-family: var(--f-ui); font-weight: 700; letter-spacing: .1em; }

.sello.estampa { animation: r1-estampar var(--t-sello) var(--sello) both; }
.sello.estampa::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--rojo);
  animation: r1-anillo 420ms var(--sello) both;
  pointer-events: none;
}

/* ============ Topbar de juego ============ */
.r1-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 14px;
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-rapido) ease;
}
.r1-topbar[data-scroll="si"] { border-bottom-color: var(--linea); }

.r1-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  margin-left: -8px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--tinta-suave);
  transition: color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.r1-volver:hover { color: var(--tinta); background: var(--carta); }
.r1-volver svg { transition: transform var(--t-medio) var(--resorte); }
.r1-volver:hover svg { transform: translateX(-3px); }

.r1-topbar-titulo {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-weight: 600;
  font-size: var(--t-l);
  letter-spacing: -0.015em;
  flex: 1;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r1-topbar-acciones { display: flex; gap: 8px; align-items: center; }

/* Los botones de icono también son fichas: redondos */
.btn-icono {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--linea);
  border-radius: 50%;
  background: var(--carta);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: transform var(--t-tap) linear, border-color var(--t-rapido) ease,
              color var(--t-rapido) ease, box-shadow var(--t-rapido) ease;
}
.btn-icono:hover { border-color: var(--linea-fuerte); color: var(--tinta); box-shadow: 0 2px 0 var(--linea-fuerte); }
.btn-icono:active { transform: scale(.92); box-shadow: none; }
.btn-icono[data-activo="no"] { opacity: .45; }

/* Balancea el ancho del botón volver para centrar el título */
.r1-topbar-espejo { width: 84px; flex-shrink: 0; }

/* En pantallas angostas la barra se aprieta: la flecha alcanza para volver
   y el título necesita el aire que dejan los botones. */
@media (max-width: 440px) {
  .r1-topbar { gap: 6px; padding: 0 11px; }
  .r1-volver { padding: 8px; }
  .r1-volver span { display: none; }
  .r1-topbar-acciones { gap: 6px; }
  .r1-topbar-espejo { width: 34px; }
  .btn-icono { width: 34px; height: 34px; }
  /* El dibujo se achica, el blanco táctil se queda en 44 */
  .btn-icono::after { content: ''; position: absolute; inset: -5px; }
}

/* ============ Botones ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background: var(--rojo);
  color: #FFF6EE;
  font-weight: 700;
  font-size: 16px;   /* medida táctil: los botones se miden con el pulgar, no con la escala */
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--rojo-oscuro);
  transition: transform var(--t-rapido) var(--resorte), box-shadow var(--t-rapido) ease, background var(--t-rapido) ease;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--rojo-oscuro); }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: 0 1px 0 var(--rojo-oscuro); transition-duration: var(--t-tap); }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn-suave {
  background: var(--carta);
  color: var(--tinta);
  border: 1.5px solid var(--linea-fuerte);
  box-shadow: 0 3px 0 var(--linea-fuerte);
}
.btn-suave:hover { box-shadow: 0 5px 0 var(--linea-fuerte); }
.btn-suave:active { box-shadow: 0 1px 0 var(--linea-fuerte); }

.btn-fantasma {
  background: transparent;
  color: var(--tinta-suave);
  box-shadow: none;
  border: none;
  font-weight: 600;
}
.btn-fantasma:hover { color: var(--tinta); background: var(--carta); box-shadow: none; transform: none; }
.btn-fantasma:active { transform: scale(.97); box-shadow: none; }

.btn-chico { padding: 9px 18px; font-size: var(--t-s); }
.btn-grande { padding: 16px 40px; font-size: var(--t-l); }
.btn-bloque { width: 100%; }

/* ============ Datos, estados y sellos de marca ============
   Tres trabajos que antes hacía la misma píldora gris. */
.dato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-tenue);
  white-space: nowrap;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: var(--t-s);
  font-weight: 600;
  background: var(--fam-suave, var(--rojo-suave));
  color: var(--fam-tinta, var(--rojo-oscuro));
  white-space: nowrap;
}

/* Contorno sin fondo. `.chip` queda como alias para los juegos. */
.sello-marca,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--canto-calido);
  background: var(--carta);
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* ============ Inputs ============ */
.campo {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 14px;
  background: var(--carta);
  font-size: 16px;   /* 16 exactos: menos que eso y iOS hace zoom al enfocar */
  font-weight: 500;
  transition: border-color var(--t-rapido) ease, box-shadow var(--t-rapido) ease;
}
.campo::placeholder { color: var(--tinta-tenue); font-weight: 400; }
.campo:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3.5px var(--rojo-suave); }

/* ============ Tarjeta genérica ============ */
.panel {
  background: var(--carta);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-medio);
  box-shadow: var(--canto);
}

/* ============ Modal ============ */
.r1-modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(38, 30, 22, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-medio) ease;
}
.r1-modal-fondo.visible { opacity: 1; }

.r1-modal {
  width: 100%;
  max-width: 420px;
  max-height: min(84dvh, 700px);
  overflow-y: auto;
  background: var(--carta);
  border-radius: var(--r-grande);
  padding: 30px 26px 26px;
  box-shadow: var(--sombra-modal);
  transform: translateY(26px) scale(.96);
  transition: transform var(--t-lento) var(--resorte);
}
.r1-modal-fondo.visible .r1-modal { transform: translateY(0) scale(1); }

.r1-modal h2 {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-weight: 600;
  font-size: var(--d-m);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin-bottom: var(--e-3);
}
.r1-modal p { color: var(--tinta-suave); font-size: var(--t-m); margin-bottom: 10px; }
.r1-modal p strong { color: var(--tinta); }
.r1-modal .eyebrow { margin-bottom: 10px; }

.r1-modal-cerrar {
  position: sticky;
  top: 0;
  float: right;
  margin: -14px -10px 0 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--papel-hondo);
  color: var(--tinta-suave);
  font-size: var(--t-l);
  cursor: pointer;
  transition: transform var(--t-rapido) var(--resorte), background var(--t-rapido) ease;
}
.r1-modal-cerrar:hover { background: var(--linea); transform: rotate(90deg); }

/* El sello del récord dentro del modal */
.r1-modal-sello { display: flex; justify-content: center; margin: 4px 0 18px; }

/* ============ Toast ============ */
.r1-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 300;
  transform: translateX(-50%) translateY(80px);
  background: var(--tinta);
  color: var(--papel);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: var(--t-m);
  font-weight: 600;
  box-shadow: 0 10px 30px -12px rgba(38, 32, 26, .45);
  transition: transform var(--t-lento) var(--resorte);
  pointer-events: none;
  white-space: nowrap;
}
.r1-toast.visible { transform: translateX(-50%) translateY(0); }

/* ============ Tabla de récords ============ */
.r1-records { list-style: none; margin-top: 6px; }
.r1-records li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 10px 4px;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-m);
}
.r1-records li:last-child { border-bottom: none; }
.r1-records .pos,
.r1-tabla .pos {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--papel-hondo);
  font-family: var(--f-display);
  font-size: var(--t-s);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}
.r1-records li:first-child .pos,
.r1-tabla > li:first-child .pos {
  background: var(--rojo);
  color: #FFF6EE;
  box-shadow: 0 0 0 1.5px var(--carta), 0 0 0 3px color-mix(in srgb, var(--rojo) 35%, transparent);
}
/* El tracking venía de cuando esto eran tres iniciales; ahora son
   nombres y piden aire normal. */
.r1-records .nombre { font-weight: 700; letter-spacing: .015em; }
.r1-records .valor {
  margin-left: auto;
  font-family: var(--f-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}
.r1-records .vacio { color: var(--tinta-tenue); font-size: var(--t-m); padding: 14px 4px; border: none; }

/* ---------- La mascota del Gashapon en los rankings ----------
   Al lado de las iniciales, la figurita que esa persona adoptó. El
   hueco se reserva sólo para quien tiene una —el dato está en
   localStorage y no necesita figuras.js—, así la fila nunca salta
   cuando el archivo llega, y una tabla sin mascotas queda igual de
   compacta que antes de que el Gashapon existiera. */
.r1-masco {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -2px;
}
.r1-masco svg { display: block; width: 24px; height: 24px; }

/* ---------- Toast con monedita ---------- */
.r1-toast--moneda { display: flex; align-items: center; gap: 8px; }
.r1-toast--moneda .r1-moneda { flex-shrink: 0; }
/* En el toast el fondo es oscuro: la moneda se dibuja en papel y tinta
   igual, porque es un objeto, no un icono de interfaz. */
.r1-toast--moneda .r1-moneda circle:first-child { fill: var(--carta); }

/* ============ Solapas ============
   El control segmentado del sistema: pista de papel hondo y la activa
   levantada en carta, con su canto. */
.r1-solapas {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin: 2px 0 18px;
  background: var(--papel-hondo);
  border-radius: 12px;
}
.r1-solapas button {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapido) ease, color var(--t-rapido) ease;
}
.r1-solapas button:hover { color: var(--tinta); }
.r1-solapas button[aria-selected="true"] {
  background: var(--carta);
  color: var(--tinta);
  font-weight: 700;
  box-shadow: var(--canto);
}

/* ============ Tabla general ============
   Cada renglón se abre y muestra de dónde salen sus puntos. */
.r1-tabla { list-style: none; margin-top: 4px; }
.r1-tabla > li { border-bottom: 1px solid var(--linea); }
.r1-tabla > li:last-child { border-bottom: none; }

.r1-tabla-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: 11px 4px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  transition: background var(--t-rapido) ease;
}
.r1-tabla-fila:hover { background: var(--carta-calida); }

.r1-tabla-quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.r1-tabla-quien b {
  font-size: var(--t-m);
  font-weight: 700;
  letter-spacing: .015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El resumen se parte en dos renglones antes que cortarse con puntos
   suspensivos: en un celu angosto «3 podios del reto» no entra al lado
   de lo demás, y media palabra no dice nada. */
.r1-tabla-quien i {
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--tinta-tenue);
  text-wrap: pretty;
}
.r1-tabla-pts {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-weight: 600;
  font-size: var(--d-s);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.r1-tabla-pts small {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
/* El que está jugando se reconoce solo, igual que en los récords */
.r1-tabla > li[data-yo="si"] .r1-tabla-quien b { color: var(--rojo-texto); }

/* La flechita que dice que el renglón se abre */
.r1-tabla-fila::after {
  content: '';
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-left: 2px;
  border-right: 1.8px solid var(--tinta-tenue);
  border-bottom: 1.8px solid var(--tinta-tenue);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-rapido) var(--firme);
}
.r1-tabla-fila[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

.r1-tabla-detalle { padding: 2px 4px 14px; }
.r1-tabla-detalle[hidden] { display: none; }

.r1-tabla-mini { list-style: none; }
.r1-tabla-mini li {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: var(--t-s);
  color: var(--tinta-suave);
}
.r1-tabla-mini li:nth-child(odd) { background: var(--carta-calida); }
.r1-tabla-mini .mini-n { font-weight: 600; color: var(--tinta); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r1-tabla-mini .mini-n i {
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rojo-texto);
}
.r1-tabla-mini .mini-m { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r1-tabla-mini .mini-p {
  width: 34px;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--f-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.r1-tabla-mini .mini-reto .mini-n { color: var(--rojo-texto); }
.r1-tabla-mini .mini-resto { color: var(--tinta-tenue); background: none; }

.r1-modal .r1-tabla-pie { margin: 14px 0 0; text-align: center; }

/* ============ Quién juega ============
   Adentro de una cuenta hay varias personas. Cada una es una ficha
   acuñada —la misma medalla del catálogo, con su inicial adentro— y
   un color de familia, que es lo que la hace reconocible de lejos. */

/* La medalla de una persona: la del sistema, chiquita y con letra */
.medalla--jug {
  --med: 42px;
  --med-borde: 1.8px;
  --med-anillo: 3px;
  --med-anillo-2: 4.2px;
  --med-fondo: var(--carta);
}
.medalla--jug b {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-weight: 600;
  font-size: var(--t-m);
  letter-spacing: .02em;
  color: var(--fam-tinta, var(--tinta));
}
.medalla--chapa {
  --med: 24px;
  --med-borde: 1.5px;
  --med-anillo: 2px;
  --med-anillo-2: 3px;
}
.medalla--chapa b { font-size: var(--t-xs); }

/* ---------- Fichas de la gente de la cuenta ----------
   Las arma R1.perfil.fichas(). Van arriba de los casilleros de nombre
   de los juegos cara a cara: en vez de volver a tipear el nombre de
   siempre, cada persona de la cuenta entra de un toque. El bloque va
   encerrado en punteado porque es una ayuda, no un campo del
   formulario. */
.fichas-cuenta {
  width: 100%;
  margin: 0 0 16px;
  padding: 11px 12px 12px;
  border: 1.5px dashed var(--linea-fuerte);
  border-radius: 14px;
  text-align: left;
  animation: r1-aparecer 300ms var(--salida) backwards;
}
.fichas-cuenta[hidden] { display: none; }
.fichas-cuenta-rotulo {
  display: block;
  margin-bottom: 9px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.fichas-cuenta-fila { display: flex; flex-wrap: wrap; gap: 7px; }
.ficha-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 4px;
  background: var(--carta);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--canto-calido);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--tinta);
  cursor: pointer;
  max-width: 100%;
  transition: transform var(--t-tap) var(--resorte), border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.ficha-cuenta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-cuenta:hover { border-color: var(--rojo-tenue); box-shadow: 0 2px 0 var(--rojo-canto); }
.ficha-cuenta:active { transform: translateY(2px); box-shadow: none; }
/* La que ya está jugando queda puesta, no clickeable y sin canto */
.ficha-cuenta[data-puesto="si"] {
  background: var(--papel-hondo);
  border-style: dashed;
  box-shadow: none;
  color: var(--tinta-tenue);
  cursor: default;
}
.ficha-cuenta[data-puesto="si"] .medalla { opacity: .5; }

/* El switch de la topbar: quién juega y, de un toque, cambiar */
.btn-perfil {
  width: auto;
  min-width: 38px;
  max-width: 168px;
  gap: 6px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--fam, var(--linea)) 42%, var(--linea));
}
.btn-perfil-nombre {
  min-width: 0;   /* para que pueda achicarse cuando la barra aprieta */
  font-family: var(--f-ui);
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-perfil .btn-perfil-cambio { color: var(--tinta-tenue); flex-shrink: 0; }
.btn-perfil:hover { border-color: var(--fam, var(--linea-fuerte)); box-shadow: 0 2px 0 var(--fam, var(--linea-fuerte)); }
.btn-perfil:hover .btn-perfil-cambio { color: var(--fam, var(--tinta-suave)); }
.btn-perfil[data-vacio="si"] { border-style: dashed; padding: 0 12px; }
.btn-perfil[data-vacio="si"] .btn-perfil-nombre { color: var(--tinta-suave); font-weight: 600; }

/* Los juegos con portada propia no arman topbar: el trofeo y el switch
   van sueltos arriba a la derecha, que es donde tienen aire (el botón
   de volver está arriba a la izquierda). */
.r1-suelto {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 58;
  display: flex;
  align-items: center;
  gap: 8px;
}
.r1-suelto .btn-icono { height: 38px; }

/* La lista del grupo, adentro del elegidor */
.r1-jugadores {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 14px;
}
.r1-jugadores li {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.r1-jugador {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 8px 14px 8px 8px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: var(--carta-calida);
  cursor: pointer;
  text-align: left;
  transition: transform var(--t-tap) linear, border-color var(--t-rapido) ease,
              box-shadow var(--t-rapido) ease, background var(--t-rapido) ease;
}
.r1-jugador:hover { border-color: var(--linea-fuerte); box-shadow: 0 3px 0 var(--linea-fuerte); transform: translateY(-1px); }
.r1-jugador:active { transform: translateY(1px); box-shadow: none; }
.r1-jugador-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.r1-jugador-txt b {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-weight: 600;
  font-size: var(--d-s);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r1-jugador-txt i {
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rojo-texto);
}
/* El que jugó la última vez en este aparato: el canto se pone rojo */
.r1-jugadores li[data-actual="si"] .r1-jugador {
  border-color: var(--rojo-canto);
  background: var(--carta);
  box-shadow: 0 3px 0 var(--rojo-canto);
}
.r1-jugadores li[data-actual="si"] .r1-jugador:hover { box-shadow: 0 5px 0 var(--rojo-canto); }

.r1-jugador-editar {
  flex-shrink: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: none;
  color: var(--tinta-tenue);
  cursor: pointer;
  transition: color var(--t-rapido) ease, border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.r1-jugador-editar:hover { color: var(--tinta); border-color: var(--linea-fuerte); background: var(--carta-calida); }

.r1-jugador-sumar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: 1.5px dashed var(--linea-fuerte);
  border-radius: 999px;
  background: none;
  color: var(--tinta-suave);
  font-weight: 700;
  font-size: var(--t-s);
  cursor: pointer;
  transition: color var(--t-rapido) ease, border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.r1-jugador-sumar:hover { color: var(--rojo); border-color: var(--rojo-canto); background: var(--rojo-suave); }

/* Los siete colores de familia, como fichas para elegir */
.r1-colores { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 2px; }
.r1-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--fam);
  background: var(--fam-suave);
  cursor: pointer;
  transition: transform var(--t-rapido) var(--resorte), box-shadow var(--t-rapido) ease;
}
.r1-color:hover { transform: scale(1.1); }
.r1-color[data-puesto="si"] {
  box-shadow: inset 0 0 0 4px var(--carta), inset 0 0 0 11px var(--fam);
  transform: scale(1.1);
}

.r1-jug-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: 10px;
}
.r1-jug-pie:empty { display: none; }
/* La baja se confirma en el mismo botón: dos toques y listo */
.r1-salir[data-armado="si"] { color: var(--rojo); text-decoration-color: var(--rojo); font-weight: 700; }

/* En la tabla de récords, el que está jugando se reconoce solo */
.r1-records .nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r1-records li[data-yo="si"] .nombre { color: var(--rojo-texto); }

@media (max-width: 440px) {
  /* En la barra angosta queda la medalla sola: el nombre completo está
     a un toque, y la inicial con su color alcanza para reconocerse. */
  .btn-perfil { max-width: none; padding: 0 5px 0 4px; }
  .btn-perfil-nombre { display: none; }
  .btn-perfil[data-vacio="si"] { padding: 0 10px; }
  .r1-suelto { top: 12px; right: 12px; gap: 6px; }
  .r1-suelto .btn-icono { height: 34px; }
  .r1-jugador-txt b { font-size: var(--t-l); }
}
/* Firma del intento + enlace de texto */
.r1-firma {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: var(--t-s);
  color: var(--tinta-suave);
}
.r1-firma strong { font-weight: 700; letter-spacing: .06em; color: var(--tinta); }
.r1-link {
  background: none;
  border: none;
  /* El área táctil crece 44px sin correr una sola línea:
     el padding de un inline no empuja la caja de línea. */
  padding: 12px 3px;
  margin: 0 -3px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--rojo);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--rojo) 35%, transparent);
  transition: text-decoration-color var(--t-rapido) ease;
}
.r1-link:hover { text-decoration-color: var(--rojo); }

/* ============ Cuenta ============
   Dos cuentas, dos Round1 que no se cruzan. La interfaz es apenas
   dos cosas: una firma chiquita que dice con cuál estás jugando y
   un panel. Sin sesión no aparece nada: el sitio queda igual que
   siempre. */

/* La firma bajo el título de la topbar. Es paratexto, no un cartel:
   once píxeles, versalitas y un punto de tinta. */
.r1-topbar-titulo.con-cuenta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.14;
}
.r1-topbar-titulo.con-cuenta > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r1-cuenta-firma {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  margin: 0 -5px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo-texto);
  transition: color var(--t-rapido) ease;
}
.r1-cuenta-firma:hover { color: var(--rojo-oscuro); }
.r1-cuenta-firma i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rojo);
  flex-shrink: 0;
}
/* Con cambios sin subir el punto se vacía: mismo lugar, otro estado. */
.r1-cuenta-firma[data-sync="pendiente"] { color: var(--tinta-tenue); }
.r1-cuenta-firma[data-sync="pendiente"] i {
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--mostaza);
}

/* Los juegos con portada propia no arman topbar: la firma va suelta,
   arriba al centro, sobre el papel. */
.r1-cuenta-suelta {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 58;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
}

/* Formulario de entrada */
.r1-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.r1-modal .r1-aviso {
  display: block;
  margin: -2px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--rojo-canto);
  background: var(--rojo-suave);
  color: var(--rojo-texto);
  font-size: var(--t-s);
  font-weight: 600;
}
.r1-modal .r1-aviso[hidden] { display: none; }
/* Cupo de cuentas: una línea de papel hondo; en rojo cuando ya no hay lugar */
.r1-modal .r1-cupo {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--papel-hondo);
  font-size: var(--t-s);
  color: var(--tinta-suave);
}
.r1-modal .r1-cupo b { color: var(--tinta); }
.r1-modal .r1-cupo--lleno { background: var(--rojo-suave); color: var(--rojo-texto); font-weight: 600; }
.r1-cuenta-caja .r1-solapas { margin-top: 10px; }
.r1-modal .r1-pieprosa {
  margin: 16px 0 0;
  font-size: var(--t-s);
  color: var(--tinta-tenue);
}

/* Estado de sincronización: un punto y una frase, nada de porcentajes */
.r1-modal .r1-sync {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--papel-hondo);
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--tinta-suave);
}
.r1-sync i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  flex-shrink: 0;
}
.r1-sync[data-estado="pendiente"] i {
  background: transparent;
  box-shadow: inset 0 0 0 1.8px var(--mostaza);
}

.r1-cuenta-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.r1-salir {
  align-self: center;
  margin-top: 2px;
  color: var(--tinta-suave);
  text-decoration-color: color-mix(in srgb, var(--tinta-suave) 30%, transparent);
}
.r1-salir:hover { color: var(--rojo); text-decoration-color: var(--rojo); }

/* Lista de lo que se va a fusionar */
.r1-modal .r1-lista { list-style: none; margin: 6px 0 14px; }
.r1-modal .r1-lista li {
  position: relative;
  padding: 8px 0 8px 20px;
  border-bottom: 1px dashed var(--linea);
  font-size: var(--t-m);
  color: var(--tinta-suave);
}
.r1-modal .r1-lista li:last-child { border-bottom: none; }
.r1-modal .r1-lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rojo-tenue);
}
.r1-modal .r1-lista b { color: var(--tinta); font-weight: 700; }

/* ============ Animaciones utilitarias ============ */
@keyframes r1-aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes r1-pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes r1-sacudida {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes r1-latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes r1-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
/* Estampado: el sello baja de golpe y se acomoda a -8° */
@keyframes r1-estampar {
  0% { transform: rotate(-16deg) scale(1.45); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}
@keyframes r1-acunar {
  0% { transform: rotate(-10deg) scale(1.35); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes r1-anillo {
  0% { transform: scale(.72); opacity: .5; }
  100% { transform: scale(2.05); opacity: 0; }
}
/* La chapita del reto: se centra con transform, así que su entrada
   tiene que arrastrar el translateX o la animación se lo come. */
@keyframes r1-chapa {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.r1-chapa-reto {
  position: fixed;
  left: 50%;
  top: 66px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  max-width: calc(100% - 24px);
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--rojo);
  color: #FFF6EE;
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 3px 0 var(--rojo-oscuro);
  pointer-events: none;
  white-space: nowrap;
  animation: r1-chapa 500ms var(--salida) both;
}
.r1-chapa-reto i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFF6EE;
  flex-shrink: 0;
  animation: r1-latido 1.6s ease-in-out infinite;
}
.r1-chapa-reto.yendose {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 600ms ease, transform 600ms ease;
  animation: none;
}

/* El paratexto nunca se mueve: es tinta impresa */
@keyframes r1-tinta {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* El dígito que cambió pega un saltito */
@keyframes r1-cifra {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* El delta de puntaje sube y se apaga */
@keyframes r1-delta {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-16px); opacity: 0; }
}

.aparecer { animation: r1-aparecer var(--t-lento) var(--salida) backwards; }
.sacudida { animation: r1-sacudida 380ms ease; }
.tinta { animation: r1-tinta 400ms linear 120ms both; }
.salta { animation: r1-cifra 160ms var(--resorte); }

.delta-puntaje {
  position: absolute;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--d-s);
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  pointer-events: none;
  animation: r1-delta 700ms var(--salida) both;
}

/* ============ Utilidades ============ */
.contenedor { width: min(1080px, 100% - 40px); margin-inline: auto; }
.contenedor-angosto { width: min(560px, 100% - 40px); margin-inline: auto; }
.centrado { text-align: center; }
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ============================================================
   CAPA DE JUEGO
   Las pantallas de adentro de cada juego: tres franjas y ninguna
   negocia — barra, riel de HUD y campo. El campo es un hueco
   recortado en la mesa; el HUD vive afuera, en el riel, con la
   barra de tiempo como junta. Sin blur, sin vidrio: papel.
   ============================================================ */

/* ---------- Pantallas ----------
   El esqueleto que comparten los juegos: inicio / juego / final.
   Cada pantalla llena el alto y sólo una está activa. */
.pantalla {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
  animation: r1-aparecer 300ms var(--salida) backwards;
}
.pantalla.activa { display: flex; }

/* ---------- El riel de HUD ----------
   Banda de ancho completo en carta cálida, tapa del hueco. Debajo,
   la junta: la barra de tiempo (o una línea fija de familia). */
.riel {
  flex-shrink: 0;
  background: var(--carta-calida);
}
.riel .marcadores { max-width: 640px; margin-inline: auto; }
.junta {
  display: block;
  height: var(--junta);
  background: var(--fam, var(--rojo));
  flex-shrink: 0;
}
/* La barra de tiempo como junta del riel: el resto ya lo trae
   .barra-tiempo (fondo hondo, hijo <i> que se encoge, .critica,
   .urgente con franjas). */
.barra-tiempo.junta { background: var(--papel-hondo); }

/* El marcador de la marca a batir, cuando la pasás (R1.marca).
   No es un estado permanente: es el instante en que el número deja
   de ser una amenaza y pasa a ser tuyo. */
.marcador--batido {
  background: var(--fam-suave, var(--rojo-suave));
  border-color: var(--fam, var(--rojo));
  box-shadow: 0 3px 0 var(--fam, var(--rojo));
  animation: r1-pop 320ms var(--resorte);
}
.marcador--batido .marcador-rotulo { color: var(--fam-tinta, var(--rojo-texto)); }
.marcador--batido .marcador-valor { color: var(--fam-tinta, var(--rojo-texto)); }

.marcador--mini { flex: 0 0 78px; }
.marcador--mini .marcador-rotulo { letter-spacing: .1em; }
.marcador--mini .marcador-valor { font-size: var(--d-s); color: var(--tinta-suave); }

/* Cuando el juego sólo tiene dos datos, el tercer lugar queda vacío a
   propósito: el riel no se estira a media pantalla. */
.marcador-vacio { flex: 1; min-width: 0; }

/* En celu el escenario es una columna: riel arriba, campo abajo.
   Las columnas laterales recién existen arriba de 900. */
.escenario {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.zona-campo {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- El campo: un hueco en la mesa ---------- */
.hueco {
  position: relative;
  background: var(--papel-hondo);
  border-radius: var(--campo-radio);
  box-shadow: var(--hueco);
  overflow: hidden;
}
/* El campo estándar: llena lo que queda con su margen de 14 */
.campo-juego {
  flex: 1;
  min-height: 0;
  margin: var(--campo-margen);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.campo-juego > canvas { width: 100%; height: 100%; }

/* El campo de un juego que se LEE (trivia, afirmaciones, palabras) no
   puede bloquear el gesto de scroll ni la selección: ahí el dedo no
   maneja nada, sólo recorre. */
.campo-juego--lectura {
  touch-action: pan-y;
  -webkit-user-select: text;
  user-select: text;
}

/* Sacudida del campo: máximo 3 px, dos oscilaciones, nunca el HUD */
@keyframes r1-campo-golpe {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
}
.campo-golpe { animation: r1-campo-golpe 160ms ease-out; }

/* ---------- Aviso de juego ----------
   Píldora anclada a 16 px del borde inferior del campo, nunca al
   centro. Entra con pop y se va sola. */
.aviso {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--fam, var(--tinta));
  color: #FFF6EE;
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  animation: r1-aviso 1200ms var(--salida) both;
}
.aviso--tinta { background: var(--tinta); }
@keyframes r1-aviso {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  8%, 88% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

/* ---------- Velos: papel, no vidrio ---------- */
.velo-papel {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background-color: var(--velo-papel);
  background-image: var(--trama-papel);
}
.velo-papel.visible { display: flex; }
.velo-papel h2, .velo-papel .caja {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  font-weight: 600;
  font-size: var(--d-m);
  letter-spacing: -0.015em;
}
.velo-papel small {
  display: block;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--tinta-suave);
  margin-top: 8px;
}

/* ---------- Tecla impresa (para "cómo se juega" en compu) ---------- */
.tecla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 9px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 8px;
  background: var(--carta);
  box-shadow: 0 2px 0 var(--linea-fuerte);
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* ---------- Portada ----------
   La pantalla de inicio como tapa: firma de familia arriba, viñeta
   al juego, un solo botón rojo y el pie impreso. */
.portada {
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
}
.portada-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 14px;
}
.portada-marca .medalla { --med: 34px; --med-icono: 18px; --med-borde: 1.5px; --med-anillo: 2.5px; --med-anillo-2: 3.6px; }
.portada-marca .eyebrow { color: var(--fam-tinta, var(--tinta-tenue)); }
.portada h1 {
  font-size: var(--d-xl);
  font-weight: 560;
  letter-spacing: -0.020em;
  margin-bottom: 10px;
}
.portada .bajada {
  color: var(--tinta-suave);
  font-size: var(--t-m);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 auto 20px;
}
.vineta {
  width: min(300px, calc(100vw - 48px));
  height: 190px;
  margin: 0 auto 20px;
  border-radius: var(--campo-radio);
  background: var(--papel-hondo);
  box-shadow: var(--hueco);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vineta > svg { width: 100%; height: 100%; }
.vineta .flota { animation: r1-flotar 3.2s ease-in-out infinite; }
.portada-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.portada-botones .btn { min-height: 56px; padding: 14px 48px; box-shadow: 0 4px 0 var(--rojo-oscuro); }
.portada-botones .btn:hover { box-shadow: 0 6px 0 var(--rojo-oscuro); }
.portada-botones .btn:active { box-shadow: 0 1px 0 var(--rojo-oscuro); }
.portada-botones .btn-suave { min-height: 48px; padding: 11px 30px; box-shadow: 0 3px 0 var(--linea-fuerte); }
.portada-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-tenue);
  animation: r1-tinta 400ms linear 120ms both;
}
.portada-pie .sep { opacity: .5; }
.portada-pie .tecla { text-transform: none; letter-spacing: .02em; height: 26px; min-width: 28px; }
@media (max-height: 700px) {
  .vineta { height: 150px; }
  .portada-marca { margin-bottom: 8px; }
}

/* ---------- Pantalla final: tres niveles de festejo ----------
   El umbral es tu propia marca. Nivel 1 seco, nivel 2 con color de
   familia y sello BIEN, nivel 3 rojo con RÉCORD. La medalla se
   acuña, la cifra cuenta a los 200 ms y el sello baja a los 320. */
.final {
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
}
.final .medalla-puntaje { margin-bottom: 20px; }
.final-chips {
  display: flex;
  gap: var(--e-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}
.final-chips:empty { display: none; }
.final .sub {
  color: var(--tinta-suave);
  font-size: var(--t-m);
  max-width: 380px;
  margin: 0 auto var(--e-5);
}
.final .botones { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* El final sobre el campo: la escena queda congelada, el campo baja
   de opacidad (.apagado) y la ceremonia se acuña encima. El campo
   no se limpia: se ve dónde quedó todo. */
.final-capa {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  background: color-mix(in srgb, var(--papel) 58%, transparent);
  animation: r1-aparecer 300ms var(--salida) backwards;
}
.final-capa[hidden] { display: none; }
.final-capa .medalla-puntaje { margin-bottom: 14px; }
.final-capa .sub {
  font-weight: 600;
  color: var(--tinta);
  font-size: var(--t-m);
  margin: 6px 0 14px;
  max-width: 340px;
}
.final-capa .botones { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.apagado { opacity: .4; transition: opacity 300ms ease 100ms; }

/* El sello de la pausa: dos barras adentro de un hanko */
.sello-pausa {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2.5px solid var(--rojo);
  box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--carta) 60%, transparent), inset 0 0 0 4.5px var(--rojo);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transform: rotate(-8deg);
  animation: r1-estampar var(--t-sello) var(--sello) backwards;
}
.sello-pausa i {
  width: 9px;
  height: 32px;
  border-radius: 3px;
  background: var(--rojo);
}

/* Nivel 1 · floja: tinta impresa, sin sello ni fanfarria */
.medalla-puntaje[data-nivel="1"] {
  border-color: var(--linea-fuerte);
  box-shadow:
    inset 0 0 0 7px var(--papel-hondo),
    inset 0 0 0 9px color-mix(in srgb, var(--linea-fuerte) 70%, transparent),
    0 4px 0 var(--linea-fuerte);
}
.medalla-puntaje[data-nivel="1"] .rotulo-chico,
.medalla-puntaje[data-nivel="1"] .jp { color: var(--tinta-tenue); }
.medalla-puntaje[data-nivel="1"] .cifra { color: var(--tinta-suave); }

/* Nivel 2 · buena: el color de familia */
.medalla-puntaje[data-nivel="2"] {
  border-color: var(--fam, var(--rojo));
  box-shadow:
    inset 0 0 0 7px var(--fam-suave, var(--rojo-suave)),
    inset 0 0 0 9px color-mix(in srgb, var(--fam, var(--rojo)) 45%, transparent),
    0 4px 0 color-mix(in srgb, var(--fam, var(--rojo)) 40%, var(--canto-calido));
}
.medalla-puntaje[data-nivel="2"] .rotulo-chico,
.medalla-puntaje[data-nivel="2"] .jp { color: var(--fam-tinta, var(--rojo-oscuro)); }

/* El sello del final, al costado de la medalla */
.final-sello {
  position: absolute;
  right: -12px;
  bottom: -8px;
  z-index: 2;
}
.final-sello .sello { background: var(--velo-papel); }

/* ---------- Cuenta regresiva ---------- */
.r1-cuenta {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.r1-cuenta b {
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 120px;
  line-height: 1;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
  animation: r1-cuenta var(--t-cuenta) var(--sello) both;
}
.r1-cuenta b.ya { font-size: 88px; animation-duration: 300ms; }
.r1-cuenta b i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 2.5px solid var(--rojo);
  border-radius: 50%;
  animation: r1-anillo 420ms var(--sello) both;
}

/* ---------- Compu: el juego no se estira, se apoya ----------
   Tres columnas 260 / campo / 260 dentro de 1080. La hoja del juego
   en papel sobre la mesa honda; las columnas cuentan cómo se juega
   y quién manda en el ranking. Abajo de 900 no existen. */
.lado { display: none; }
@media (min-width: 900px) {
  body:has(.escenario) { background-color: var(--papel-hondo); }
  .escenario {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--compu-col) minmax(320px, var(--compu-campo)) var(--compu-col);
    gap: 30px;
    width: min(1080px, 100% - 40px);
    margin-inline: auto;
    padding: 18px 0 22px;
    align-items: stretch;
  }
  .escenario > .zona-campo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background-color: var(--papel);
    background-image: var(--trama-papel);
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r-grande);
    box-shadow: 0 5px 0 var(--linea-fuerte);
    overflow: hidden;
  }
  .lado {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding-top: 6px;
  }
  .lado-cabecera { display: flex; align-items: center; gap: 12px; }
  .lado-cabecera .medalla { --med: 62px; --med-icono: 30px; }
  .lado-cabecera h2 {
    font-family: var(--f-display);
    font-variation-settings: 'SOFT' 60, 'WONK' 0;
    font-weight: 600;
    font-size: var(--d-s);
    letter-spacing: -0.015em;
    line-height: 1.1;
  }
  .lado-cabecera .dato { display: block; margin-top: 2px; font-size: var(--t-xs); letter-spacing: .08em; }
  .lado hr {
    border: none;
    border-top: 1.5px dotted var(--canto-calido);
    margin: 0;
  }
  .lado h3 {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
  }
  .lado p { font-size: var(--t-s); line-height: 1.55; color: var(--tinta-suave); }
  .lado-teclas { display: flex; flex-direction: column; gap: 8px; }
  .lado-teclas > div { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--tinta-suave); }
  .lado-teclas .tecla { flex-shrink: 0; }
  .lado .r1-records li { padding-block: 7px; font-size: var(--t-s); }
  .lado .r1-records li.salto { justify-content: center; padding-block: 0; border-bottom: none; color: var(--tinta-tenue); letter-spacing: .3em; line-height: 1; }
  .lado-reto {
    margin-top: auto;
    padding: 14px 16px;
    border: 1.5px solid var(--rojo-canto);
    border-radius: var(--r-medio);
    background: var(--rojo-suave);
    box-shadow: 0 3px 0 var(--rojo-canto);
    font-size: var(--t-s);
    color: var(--rojo-texto);
  }
  .lado-reto b { display: block; color: var(--rojo-oscuro); margin-bottom: 2px; }
}

/* La chapita del reto se apoya sobre la junta del riel mientras se
   juega, en vez de flotar sobre el campo. */
body:has(.pantalla.activa .riel) .r1-chapa-reto { top: 126px; }

/* ---------- Ficha de tablero (2048 y parientes) ----------
   Canto 2→5, contorno 0→2, grano desde el 128. El texto salta a
   papel del 32 en adelante. */
.ficha-juego {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-family: var(--f-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.ficha-juego[data-v="2"]    { background: var(--ficha-2);    box-shadow: 0 2px 0 var(--ficha-2-c); }
.ficha-juego[data-v="4"]    { background: var(--ficha-4);    box-shadow: 0 2px 0 var(--ficha-4-c); }
.ficha-juego[data-v="8"]    { background: var(--ficha-8);    box-shadow: 0 3px 0 var(--ficha-8-c), inset 0 0 0 1.2px rgba(38,32,26,.55); }
.ficha-juego[data-v="16"]   { background: var(--ficha-16);   box-shadow: 0 3px 0 var(--ficha-16-c), inset 0 0 0 1.5px rgba(38,32,26,.6); }
.ficha-juego[data-v="32"]   { background: var(--ficha-32);   box-shadow: 0 4px 0 var(--ficha-32-c), inset 0 0 0 1.5px rgba(38,32,26,.65); color: #FFF6EE; }
.ficha-juego[data-v="64"]   { background: var(--ficha-64);   box-shadow: 0 4px 0 var(--ficha-64-c), inset 0 0 0 2px rgba(38,32,26,.7); color: #FFF6EE; }
.ficha-juego[data-v="128"]  { background: var(--ficha-128);  box-shadow: 0 5px 0 var(--ficha-128-c), inset 0 0 0 2px rgba(38,32,26,.7); color: #FFF6EE; }
.ficha-juego[data-v="256"]  { background: var(--ficha-256);  box-shadow: 0 5px 0 var(--ficha-256-c), inset 0 0 0 2px rgba(38,32,26,.75); color: #FFF6EE; }
.ficha-juego[data-v="512"]  { background: var(--ficha-512);  box-shadow: 0 5px 0 var(--ficha-512-c), inset 0 0 0 2px rgba(15,11,8,.8); color: #FFF6EE; }
.ficha-juego[data-v="1024"] { background: var(--ficha-1024); box-shadow: 0 5px 0 var(--ficha-1024-c), inset 0 0 0 2px rgba(15,11,8,.85); color: #FFF6EE; }
.ficha-juego[data-v="2048"] {
  background: var(--oro);
  box-shadow: 0 5px 0 var(--oro-canto),
    inset 0 0 0 4px var(--mostaza-suave),
    inset 0 0 0 5.5px var(--oro);
  color: #FFF6EE;
}
.ficha-juego[data-v="mas"] { background: var(--ficha-mas); box-shadow: 0 5px 0 var(--tinta-canto); color: #FFF6EE; }
.ficha-juego[data-v="128"]::after,
.ficha-juego[data-v="256"]::after,
.ficha-juego[data-v="512"]::after,
.ficha-juego[data-v="1024"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grano-ficha);
  pointer-events: none;
}

/* Paratexto que sólo aparece en compu (teclas del pie de portada) */
.oculto-celu { display: none; }
@media (min-width: 900px) { .oculto-celu { display: inline-flex; } }

/* ---------- Partículas de tinta ----------
   Trazo de 2,5×10 con punta redondeada, radial, que desacelera y se
   apaga. Del color del objeto que la emitió. Nunca círculos ni glow. */
.particula {
  position: absolute;
  z-index: 30;
  width: 10px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--fam, var(--rojo));
  pointer-events: none;
  animation: r1-particula var(--t-part) var(--impacto) both;
}
@keyframes r1-particula {
  from { opacity: 1; transform: translate(0, 0) rotate(var(--ang, 0deg)); }
  to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--ang, 0deg)); }
}

/* ---------- Animaciones de la capa de juego ---------- */
@keyframes r1-squash {
  0% { transform: scale(1, 1); }
  40% { transform: scale(1.10, .90); }
  100% { transform: scale(1, 1); }
}
@keyframes r1-cuenta {
  0% { transform: scale(1.25); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sello.estampa { transform: rotate(-8deg); }
  .medalla-puntaje { transform: none; opacity: 1; }
  .aviso { animation-duration: 1200ms !important; }
}

/* ============================================================
   PANTALLA COMPLETA Y MODO GRANDE (R1.grande · §37)
   Dos clases en <html>, las dos de ui.js:
   · `r1-grande`: el botón de la topbar está prendido. Cada juego
     cuelga de acá lo suyo (soltar un max-width, agrandar una hoja).
   · `r1-compacto`: barra y marcadores apretados. La prende el modo
     grande y, sola, cualquier pantalla apaisada de 500 px de alto o
     menos: con el celu acostado, 58 px de barra son un sexto del alto.
   ============================================================ */

/* El celu acostado tiene el notch de un costado: con viewport-fit=cover
   el papel llega hasta el borde, pero lo que se toca y se lee no.
   (Sin viewport-fit=cover, como en la home, esto vale cero.) */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* El alto de la barra, para los juegos que hacen cuentas con él */
:root { --r1-barra: 58px; }
html.r1-compacto { --campo-margen: 8px; --r1-barra: 44px; }

html.r1-compacto .r1-topbar { height: var(--r1-barra); gap: 8px; padding: 0 10px; }
html.r1-compacto .r1-volver { padding: 6px; margin-left: -4px; }
html.r1-compacto .r1-volver span { display: none; }
html.r1-compacto .r1-topbar-titulo { font-size: var(--t-m); }
html.r1-compacto .r1-topbar-acciones { gap: 6px; }
html.r1-compacto .r1-topbar-espejo { width: 34px; }
html.r1-compacto .r1-topbar .btn-icono { width: 32px; height: 32px; }
/* El dibujo se achica, el blanco táctil no */
html.r1-compacto .r1-topbar .btn-icono::after { content: ''; position: absolute; inset: -6px; }
html.r1-compacto .r1-topbar .btn-perfil { width: auto; max-width: none; padding: 0 5px 0 4px; }
html.r1-compacto .r1-topbar .btn-perfil[data-vacio="si"] { padding: 0 8px; }
html.r1-compacto .btn-perfil-nombre { display: none; }

html.r1-compacto .marcadores { gap: 8px; padding: 5px 10px 6px; }
html.r1-compacto .marcador { padding: 3px 10px; border-radius: 11px; box-shadow: 0 2px 0 var(--canto-calido); }
html.r1-compacto .marcador-rotulo { letter-spacing: .12em; }
html.r1-compacto .marcador-valor { font-size: var(--d-s); line-height: 1.12; }
html.r1-compacto .marcador--racha { flex-basis: 58px; }

html.r1-compacto .r1-chapa-reto { top: 52px; }
html.r1-compacto body:has(.pantalla.activa .riel) .r1-chapa-reto { top: 102px; }

/* En compu (o en un celu grande acostado, que pasa los 900) el
   escenario suelta las columnas: el campo se queda con todo el ancho. */
@media (min-width: 900px) {
  html.r1-compacto .escenario {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: calc(100% - 24px);
    max-width: none;
    margin-inline: auto;   /* hay juegos a sangre con margin 0: sin esto, franja vacía a la derecha */
    padding: 10px 0 12px;
  }
  html.r1-compacto .escenario > .lado { display: none; }
}
/* Un celu grande acostado pasa los 900 de ancho pero no tiene alto que
   regalar: el escenario casi sin aire alrededor */
@media (min-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  html.r1-compacto .escenario { width: calc(100% - 12px); padding: 4px 0 6px; }
}

/* El aviso de la primera vez en el iPhone */
.r1-grande-nota { font-size: var(--t-s) !important; color: var(--tinta-tenue) !important; margin-bottom: 18px !important; }

/* ---------- Celu acostado: portada y cierre (§37) ----------
   Con ≤ 500 px de alto, una portada apilada mide más que la pantalla:
   centrada con flex, lo que sobra se corta arriba y abajo y el botón de
   jugar queda fuera, sin forma de llegar. Arranca arriba, se desplaza,
   y los márgenes automáticos la centran cuando sí entra. El cierre
   sobre el campo pasa a dos columnas: la medalla y, al lado, el resto.
   Un juego con reglas propias para esto las sigue teniendo. */
@media (orientation: landscape) and (max-height: 500px) {
  .portada, .final {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .portada > :first-child, .final > :first-child { margin-top: auto; }
  .portada > :last-child, .final > :last-child { margin-bottom: auto; }
  .portada-marca { margin-bottom: 6px; }
  .portada h1 { font-size: var(--d-l); margin-bottom: 6px; }
  .portada .bajada { margin-bottom: 12px; }
  .vineta { height: 108px; margin-bottom: 12px; }
  .portada-botones .btn { min-height: 48px; padding: 11px 40px; }
  .portada-pie { margin-top: 10px; }
  .final .medalla-puntaje { margin-bottom: 10px; }
  .final .sub { margin-bottom: var(--e-3); }

  /* La portada con viñeta, en dos columnas: la viñeta a la izquierda y,
     al lado, título, bajada y el botón de jugar, que así entra sin
     desplazar. Cualquier otra pieza propia del juego cae en la columna
     de la derecha, en su orden. */
  .portada > :only-child:has(> .vineta) {
    display: grid;
    grid-template-columns: auto minmax(0, 380px);
    column-gap: 32px;
    align-items: center;
    justify-content: center;
  }
  .portada > :only-child > .vineta { grid-column: 1; grid-row: 1 / span 12; align-self: center; height: 170px; margin: 0; }
  .portada > :only-child:has(> .vineta) > :not(.vineta) { grid-column: 2; }
  .portada > :only-child:has(> .vineta) .bajada { margin-bottom: 10px; }
  .portada > :only-child:has(> .vineta) .portada-pie { margin-top: 8px; }
  /* El cartelito del gesto («un toque batea») es lo que dejaba el botón
     afuera; acostado se va: la ayuda sigue en el «?» */
  .portada > :only-child:has(> .vineta) > .gesto { display: none; }

  /* Todo cierre se puede recorrer: arranca arriba y se centra solo si entra */
  .final-capa:not([hidden]) { justify-content: flex-start; overflow-y: auto; padding: 10px 16px; }
  .final-capa:not([hidden]):not(:has(> .medalla-puntaje)) > :first-child { margin-top: auto; }
  .final-capa:not([hidden]):not(:has(> .medalla-puntaje)) > :last-child { margin-bottom: auto; }
  .final-capa .botones { flex-direction: row; flex-wrap: wrap; justify-content: center; }

  /* El cierre estándar (la medalla suelta adentro) va en dos columnas.
     Los que envuelven todo en una placa propia (Tejo, Carga) o abren
     con otra medalla se quedan con su armado. Con :not([hidden]): un
     display propio le gana al [hidden]. */
  .final-capa:not([hidden]):has(> .medalla-puntaje) {
    display: grid;
    grid-template-columns: auto minmax(0, 400px);
    align-content: center;
    justify-content: center;
    justify-items: center;
    column-gap: 24px;
    row-gap: 0;
  }
  .final-capa > .medalla-puntaje { grid-column: 1; grid-row: 1 / span 5; align-self: center; margin: 0; }
  .final-capa:has(> .medalla-puntaje) > :not(.medalla-puntaje) { grid-column: 2; }
  .final-capa:has(> .medalla-puntaje) .sub { margin: 6px 0 10px; }
}