/* ============================================================
   Contest Rules (app/contest-rules.html)
   A professional rules document layout, ready for the final
   client/legal-approved copy. Whitespace-based hierarchy,
   one column, comfortable reading measure.
   ============================================================ */

.rules-head { margin-bottom: 4px; }
.rules-contest { font-size: 15px; font-weight: 700; color: var(--gold); margin-top: 6px; }
.rules-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.rules-note {
  margin: 18px 0 26px;
  padding: 12px 14px;
  border: 1px solid rgba(244, 176, 33, 0.3);
  border-radius: var(--r-md);
  background: var(--gold-faint);
  font-size: 13px;
  color: var(--txt);
  line-height: 1.55;
}

.rules-body { max-width: 680px; }
.rule-section { padding: 22px 0 6px; border-top: 1px solid var(--line); }
.rule-section:first-of-type { border-top: 0; padding-top: 0; }
.rule-section h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.rule-section p { font-size: 14px; line-height: 1.65; color: var(--muted); margin-top: 8px; }
.rule-section p strong { color: var(--txt); }
.rule-section ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.rule-section li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 16px;
  position: relative;
}
.rule-section li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.rule-section a { color: var(--gold); font-weight: 600; }
.rule-section a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .rules-note { padding: 14px 18px; }
  .rule-section { padding: 26px 0 8px; }
  .rule-section h2 { font-size: 18px; }
}