/* =====================================================
   P77 App — How to Play page
   ===================================================== */

/* vertical timeline */
.timeline { max-width: 720px; margin-inline: auto; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(var(--clr-accent-gold), transparent);
}
.tl-step { position: relative; display: flex; gap: var(--sp-lg); padding-bottom: var(--sp-2xl); }
.tl-step:last-child { padding-bottom: 0; }
.tl-num {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  background: var(--gradient-gold); color: #0d0d12; box-shadow: var(--shadow-glow);
}
.tl-body { padding-top: 4px; }
.tl-body h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-xs); }
.tl-body p { color: var(--clr-text-secondary); font-size: var(--fs-base); margin: 0; }

/* Tip callouts used alongside the timeline */
.tip-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); margin-top: var(--sp-2xl); }
.tip-card {
  padding: var(--sp-lg); display: flex; gap: var(--sp-md); align-items: flex-start;
}
.tip-card .ico { font-size: 1.6rem; flex-shrink: 0; }
.tip-card h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.tip-card p { font-size: var(--fs-sm); color: var(--clr-text-secondary); margin: 0; }
@media (min-width: 768px) { .tip-grid { grid-template-columns: repeat(2, 1fr); } }