/* Extra styles for the gate pages, on top of the site's /styles.css. */
.stamp-mark.cash { color: var(--hedge); border-color: var(--hedge); }
.gate-block { text-align: center; }
.gate-steps { list-style: none; counter-reset: step; text-align: left; margin: 0.5rem auto 1rem; padding: 0; max-width: 20rem; }
.gate-steps li { counter-increment: step; display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.55rem; font-size: 1.05rem; }
.gate-steps li::before { content: counter(step); flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--paper); background: var(--moss); }
.pay.big { font-size: 1.5rem; padding: 1.2rem; animation: nudge 2.4s ease-in-out infinite; }
.pay.big:disabled { animation: none; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.03); } 90% { transform: scale(0.99); } }
@media (prefers-reduced-motion: reduce) { .pay.big { animation: none; } }

/* "Another day 10% off" offer for an ended ticket (gate-button.js) */
.extend-offer { margin: 1.1rem 0 0; padding: 1rem; border-radius: 16px; background: var(--grass); text-align: center; }
.extend-offer[hidden] { display: none; }
.extend-title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.extend-sub { margin: 0.25rem 0 0; color: var(--moss); }
.extend-offer .pay { margin-top: 0.8rem; }
.extend-err { margin: 0.6rem 0 0; color: var(--alert); font-weight: 600; }

/* Full-screen "Unlocked – pull now" countdown (gate-button.js) */
.unlocked { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem; background: var(--moss); color: var(--paper); text-align: center; cursor: pointer; }
.unlocked[hidden] { display: none; }
.unlocked.locked { background: var(--hedge); }
.unlocked-in { max-width: 24rem; }
.u-title { font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.u-do { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0 0 1.5rem; }
.u-count { width: 9rem; height: 9rem; margin: 0 auto 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 4.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hedge); background: var(--hay); box-shadow: 0 6px 0 var(--hay-deep); }
.u-count:empty { display: none; }
.u-sub { font-size: 1rem; opacity: 0.85; margin: 0; }
.gate-block .hint { margin-top: 0.75rem; }
#gate-msg.ok { color: var(--moss); font-weight: 700; }
.summary-line { margin: 0 0 0.4rem; font-size: 1.1rem; }
.summary-line strong { font-weight: 800; }
.qr { display: block; width: 15rem; max-width: 80%; margin: 0.5rem auto 0.75rem; padding: 0.75rem; background: #fff; border-radius: 14px; border: 2px solid var(--rule); }
.qr svg { display: block; width: 100%; height: auto; }
.staff-tag { display: inline-block; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: var(--hedge); border-radius: 999px; padding: 0.15rem 0.7rem; margin-bottom: 0.6rem; }
.step[hidden] { display: none; }
button.back { background: none; border: 0; font: inherit; width: 100%; cursor: pointer; text-decoration: underline; }
.price { font-weight: 400; }
.total-line { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 0; font-weight: 700; }
.total-line strong { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.collect { margin: 0.25rem 0 0.75rem; font-size: 1.15rem; }
.collect strong { display: block; font-size: 3rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.feed-line { margin-top: 0.6rem; }
.rules-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 1rem; text-align: center; }
.rules-sub { text-align: center; margin: 0.25rem 0 1rem; }
.rules { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -1.25rem; overscroll-behavior-x: contain; }
.rules::-webkit-scrollbar { display: none; }
.rule { flex: 0 0 100%; scroll-snap-align: center; text-align: center; padding: 0 1.75rem; }
.rule svg { width: 9rem; height: 9rem; display: block; margin: 0 auto 0.75rem; }
.rule h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 0.4rem; }
.rule p { margin: 0; color: var(--moss); font-size: 1.05rem; }
.dots { display: flex; justify-content: center; gap: 0.5rem; margin: 1.1rem 0 0; }
.dots span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--rule); transition: background 0.2s, transform 0.2s; }
.dots span.on { background: var(--moss); transform: scale(1.25); }
.rules-full { text-align: center; }
.rules-full a { color: var(--hedge); font-weight: 700; }
.pay[hidden], .ticket [hidden] { display: none; }