/* Home: hero with the drifting number field (signature #1), from mockup B2. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(620px, calc(100svh - var(--tier1) - var(--tier2)));
  display: flex; align-items: flex-end;
  background:
    radial-gradient(55% 65% at 16% 95%, color-mix(in oklch, var(--color-brand) 9%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 92% 8%, color-mix(in oklch, var(--color-accent-2) 6%, transparent) 0%, transparent 70%),
    var(--surface-0);
}
.field { position: absolute; inset: -4% 0; display: flex; flex-direction: column; justify-content: space-between; z-index: -1; transform: rotate(-4deg) scale(1.08); transform-origin: 50% 50%; pointer-events: none; user-select: none; }
.row { display: flex; width: max-content; animation: drift var(--t, 140s) linear infinite; will-change: transform; }
.row:nth-child(even) { animation-direction: reverse; }
.row span { display: inline-grid; place-items: center; width: 1.62em; height: 1.12em; margin: 0 .06em; font: 500 var(--fs-field)/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--field-num); border-radius: .3em; }
.row span::before { content: attr(data-n); }
.row span.on { background: var(--color-brand); color: var(--color-ink); box-shadow: 0 10px 30px -12px oklch(5% .02 200 / .8); }
.row span.co { background: var(--color-accent-2); color: var(--color-ink); box-shadow: 0 10px 30px -12px oklch(5% .02 200 / .8); }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--surface-0) 0%, transparent 14%, transparent 62%, var(--surface-0) 100%); }

.hero__inner { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-top: 6rem; padding-bottom: clamp(24px, 4vw, 56px); }
.panel { position: relative; max-width: 640px; background: color-mix(in oklch, var(--surface-1) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow-3); border: 1px solid var(--line); }
.panel h1 { margin-top: 1.1rem; font: 600 var(--fs-h1)/1.04 var(--font-display); letter-spacing: -.045em; }
.panel h1 .hl { padding: 0 .12em; margin: 0 -.04em; }
.panel .lead { margin-top: 1rem; font-size: 1.1rem; color: var(--text-2); max-width: 52ch; }
.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.panel__foot .note { font-size: .82rem; color: var(--text-muted); }

.draw { flex: none; width: 348px; background: color-mix(in oklch, var(--surface-1) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.15rem 1.2rem; box-shadow: var(--shadow-2); }
.draw__head { display: flex; align-items: center; justify-content: space-between; font: 600 .8rem var(--font-body); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.draw__name { margin-top: .5rem; font: 600 1.15rem/1.2 var(--font-display); letter-spacing: -.03em; }
.draw .balls { margin-top: .85rem; gap: .35rem; }
.draw__legend { display: flex; gap: 1rem; margin-top: .8rem; font-size: .78rem; color: var(--text-muted); }
.draw__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: var(--color-brand); }
.draw__legend i.co { background: var(--color-accent-2); }

.res { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.res__aside { display: grid; gap: 14px; }

@media (max-width: 1180px) { .draw { display: none; } }
@media (max-width: 1040px) {
  .res { grid-template-columns: minmax(0, 1fr); }
  .res__aside { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --fs-field: 3.4rem; }
  .hero { min-height: auto; }
  .hero__inner { padding-top: 13rem; }
  .field { inset: -2% 0 auto; justify-content: flex-start; gap: .15rem; transform: rotate(-6deg) scale(1.15); }
  .hero::after { background: linear-gradient(180deg, var(--surface-0) 0%, transparent 6%, transparent 80%, var(--surface-0) 100%); }
  .cta .btn { flex: 1 1 100%; }
  .res__aside { grid-template-columns: 1fr; }
}

/* casino covers strip — two counter-moving rows */
.strip { overflow: hidden; }
.strip__rows { display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 32px); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip__row { display: flex; gap: 14px; width: max-content; animation: strip-run 70s linear infinite; }
.strip__row--rev { animation-direction: reverse; animation-duration: 80s; }
.strip__rows:hover .strip__row { animation-play-state: paused; }
.strip__cover { flex: none; width: clamp(120px, 12vw, 168px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-1); outline: 1px solid var(--line); outline-offset: -1px; }
.strip__row:nth-child(odd) .strip__cover:nth-child(3n) { rotate: -2deg; }
.strip__cover img { width: 100%; height: 100%; object-fit: cover; }
@keyframes strip-run { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .strip__rows { overflow: hidden; } }
.strip.is-paused .strip__row { animation-play-state: paused; }