/* Compartit · Les pàgines de regles.
 *
 * Els dos jocs expliquen com es juga a la mateixa pàgina i, per tant, amb la
 * mateixa cara: títol gran, la frase d'entrada enganxada a sota, els epígrafs
 * en or i cada regla de puntuació dins de la seva targeta. Ho tenia escrit la
 * porra; l'onze s'havia fet la seva versió —títol més petit, regles amb
 * rodona en comptes de targeta— i les dues pàgines es llegien com de dos
 * webs.
 *
 * El que és de cada joc es queda al seu full: l'onze, per exemple, hi té la
 * llista numerada del desempat, que la porra no necessita.
 *
 * Es carrega DESPRÉS del full de cada aplicació, com la resta de peces
 * compartides.
 */

.regles{max-width:640px}
/* El títol i la frase d'entrada, que hi fa parella: el marge del títol la
   separaria massa i per això puja. Els números són els dels títols de vista
   de la porra —l'onze no en té cap de tan gran— perquè les dues pàgines
   comencin igual. */
.regles h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:.95;
  text-transform:uppercase;margin-bottom:24px;
}
.regles-lede{
  margin-top:-16px;margin-bottom:6px;
  color:rgba(245,242,236,.7);font-size:1.05rem;
}
.regles h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:1.35rem;text-transform:uppercase;
  color:var(--or);margin:30px 0 14px;
}
.regles p{color:rgba(245,242,236,.75);line-height:1.7;margin-bottom:10px}
/* Cada regla de puntuació, a la seva targeta: són el que la gent ve a
   mirar i en una llista de rodones es llegien com una nota al peu. */
.regles-punts{list-style:none;display:grid;gap:10px;margin:10px 0 6px}
.regles-punts li{
  padding:12px 18px;border:1px solid rgba(245,242,236,.15);border-radius:14px;
  background:var(--surf-1);color:rgba(245,242,236,.85);
  box-shadow:var(--edge-hi);
}
.regles-punts li b{color:var(--or)}
.regles-nota{color:rgba(245,242,236,.65);font-size:.95rem;line-height:1.65;margin-top:10px}
.regles a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.regles a:hover{color:#e6c384}