/* Small informational pages (join, how to play, watch example). Builds on ../auth/auth.css */
.info-card{display:grid;gap:16px;justify-items:center;text-align:center}
.info-card .gift{width:84px;height:84px;border-radius:20px;background:var(--sand);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)}
.info-card .gift svg{width:48px;height:auto}
.info-card .play{width:96px;height:96px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 var(--red-dark)}
.info-card .play svg{width:44px;height:44px}
.status-copy{font-size:15px;line-height:1.55;color:var(--ink);max-width:34ch}
.info-card .actions{width:100%}
.steps{list-style:none;display:grid;gap:10px;width:100%;text-align:left;counter-reset:none}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border-radius:14px;padding:10px 14px 10px 10px;min-height:64px}
.steps .num{width:48px;height:48px;border-radius:14px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font:700 24px Fredoka,sans-serif;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.steps li:nth-child(2) .num{background:var(--red)}
.steps li:nth-child(3) .num{background:var(--gold);color:var(--ink)}
.steps .txt{font-size:16px;font-weight:700;line-height:1.35}
.info-card .play.off{background:#8d7f70;box-shadow:0 5px 0 #6a5e51}