/* ═══════════════════════════════════════════
   INSTRUCTIONS.CSS
   Ecrã de instruções (#screen-instructions):
   layout, regras, pílulas human/ai e nota.
═══════════════════════════════════════════ */

#screen-instructions {
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 28px;
}

.inst-wrap    { max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 22px; }
.inst-wrap h2 { font-size: clamp(2.5rem, 8vw, 4.5rem); color: var(--accent); }

/* Lista de regras com barra lateral */
.rules { border-left: 3px solid var(--accent); padding-left: 18px;
         display: flex; flex-direction: column; gap: 12px; }
.rule   { font-size: 13px; line-height: 1.65; color: var(--muted); }
.rule b { color: var(--text); }

/* Pílulas de legenda Humano / IA */
.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pill  {
  padding: 8px 16px; border: 1px solid; border-radius: var(--radius);
  font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 600;
  flex: 1; min-width: 130px; text-align: center;
}
.pill.human { border-color: rgba(74,222,128,.3); color: var(--human); background: rgba(74,222,128,.1); }
.pill.ai    { border-color: rgba(248,113,113,.3); color: var(--ai);    background: rgba(248,113,113,.1); }

/* Nota informativa em caixa tracejada */
.note {
  font-size: 11px; line-height: 1.7; color: var(--muted);
  padding: 12px 15px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
}