/* JoeQUIZ · la guida. Vive in tutti e due i gusci — pubblico e app — e il guscio dell'app
   non porta la tipografia di testo lungo: qui è scritta per intero, e scoperchia le due
   differenze invece di ereditarne una sola. */

.jq-guida {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px calc(48px + env(safe-area-inset-bottom));
  font-size: 1.02rem;
  line-height: 1.65;
}

.jq-guida h1, .jq-guida h2, .jq-guida h3 { margin: 0; line-height: 1.15; }
.jq-guida p  { margin: 0 0 1em; }
.jq-guida a  { color: var(--azzurro); }
.jq-guida a.jq-bottone { color: var(--ink); text-decoration: none; }
.jq-guida a.jq-bottone--fantasma { color: var(--paper); }

/* ---------- testa e indice ---------- */

.jq-guida__testa { margin-bottom: 28px; }
.jq-guida__testa h1 { margin: 6px 0 12px; font-size: clamp(1.8rem, 7vw, 2.6rem); }
.jq-guida__occhiello { color: var(--muted-ink); font-size: 1.05rem; margin: 0; }

.jq-guida__indice {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 36px;
}
.jq-guida__indice ol { margin: 10px 0 0; padding-left: 22px; }
.jq-guida__indice li { margin-bottom: 4px; }

/* ---------- sezioni ---------- */

.jq-guida__sez { margin-bottom: 44px; scroll-margin-top: 24px; }
.jq-guida__sez > h2 {
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in oklch, var(--paper) 14%, transparent);
}
.jq-guida__sez h3 { font-size: 1.1rem; margin: 26px 0 8px; color: var(--paper); }

.jq-guida__nota {
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 4px solid var(--flame);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted-ink);
  margin: 18px 0 0;
}

/* ---------- i quattro passi ---------- */

.jq-guida__passi { list-style: none; counter-reset: passo; margin: 0; padding: 0; }
.jq-guida__passi > li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 18px 48px;
}
.jq-guida__passi > li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--flame);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
}
.jq-guida__passi h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.jq-guida__passi p { margin: 0; }

/* ---------- elenchi di voci ---------- */

.jq-guida__voci { margin: 0; }
.jq-guida__voci dt {
  font-weight: 800;
  margin-top: 18px;
  color: var(--paper);
}
.jq-guida__voci dt:first-child { margin-top: 0; }
.jq-guida__voci dd { margin: 4px 0 0; color: var(--muted-ink); }

.jq-guida__elenco { margin: 0 0 1em; padding-left: 22px; }
.jq-guida__elenco li { margin-bottom: 8px; }
.jq-guida__elenco--numerato { padding-left: 22px; }
ol.jq-guida__elenco--numerato { list-style: decimal; }

/* ---------- le modalità ---------- */

.jq-guida__giochi {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.jq-guida__gioco {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}
.jq-guida__gioco h3 { margin: 0 0 4px; font-size: 1rem; }
.jq-guida__gioco-regola { margin: 0 0 6px; color: var(--muted-ink); font-size: 0.94rem; }

/* ---------- la tabella dei piani ---------- */

.jq-guida__tabella { overflow-x: auto; margin: 0 0 1em; }
.jq-guida__tabella table { width: 100%; border-collapse: collapse; }
.jq-guida__tabella th,
.jq-guida__tabella td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid color-mix(in oklch, var(--paper) 12%, transparent);
  vertical-align: top;
}
.jq-guida__tabella thead th {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.jq-guida__tabella tbody th { font-weight: 700; }

/* ---------- chiusura ---------- */

.jq-guida__chiusura {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

@media (min-width: 560px) {
  .jq-guida__chiusura { flex-direction: row; }
  .jq-guida__chiusura .jq-bottone { width: auto; padding-inline: 28px; }
}