/* THE GIVEAWAYS & GAMES PAGE (plan Task 3, 5 Oct 2026). Built on styles.css: the slab, the label, the
   lanes and the buttons are the home page's own. This file adds only what this page has and the home
   page does not: jump pills, numbered steps, the nickname callout and the video frame.
   --gold stays money-only and --live stays on-air-only, as styles.css rules. */
.gw-intro { padding-top: 64px; }
.gw-h1 { font-family: var(--display); font-size: clamp(44px, 8vw, 96px); line-height: .92; text-transform: uppercase; margin: 6px 0 14px; }
.gw-sub { max-width: 46ch; }
.gw-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; }
.gw-pill { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .04); font-weight: 700; }
.gw-pill:hover, .gw-pill:focus-visible { border-color: var(--holo-1); }
.gw-steps { counter-reset: gw; list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.gw-steps > li { counter-increment: gw; position: relative; padding: 14px 16px 14px 58px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .035); color: var(--ink); }
.gw-steps > li::before { content: counter(gw); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--holo); color: var(--label-ink); font-family: var(--display); font-size: 17px; }
.gw-steps .btn { margin-left: 8px; vertical-align: middle; }
.gw-two { display: grid; gap: 22px; }
@media (min-width: 900px) { .gw-two { grid-template-columns: 1fr 1fr; } }
.gw-two h3 { font-family: var(--body); font-weight: 800; text-transform: none; font-size: 18px; margin: 0 0 4px; }
.gw-nick { margin-top: 14px; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--holo-2); background: rgba(97, 226, 196, .06); }
.gw-nick p { margin: 0 0 8px; color: var(--ink); }
.gw-nick p:last-child { margin-bottom: 0; color: var(--dim); }
.gw-nick code, .gw-steps code { font-family: ui-monospace, Consolas, monospace; background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 6px; }
.game-video { margin: 18px 0 6px; }
.game-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--line); background: #000; }
.game-video figcaption { color: var(--dim); font-size: 13px; margin-top: 6px; }
@media (max-width: 640px) {
  .gw-steps > li { padding-left: 52px; }
  .gw-steps .btn { display: inline-flex; margin: 8px 0 0; }
}