/* Home: the bento hero from the approved mockup (Alps tile, live slider, jackpot,
 * player protection, cover wall) and the home-only info blocks. */

/* ═════ Bento ═════════════════════════════════════════════════════════════ */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 310px 150px 170px; gap: 16px; }
.tile { overflow: hidden; isolation: isolate; }
.t-main { grid-column: 1 / 8; grid-row: 1 / 4; }
.t-live { grid-column: 8 / 11; grid-row: 1 / 2; }
.t-jack { grid-column: 8 / 11; grid-row: 2 / 3; }
.t-safe { grid-column: 8 / 11; grid-row: 3 / 4; }
.t-wall { grid-column: 11 / 13; grid-row: 1 / 4; }

/* ── main tile: the Alps (signature 1) ── */
.t-main { background-color: #1A1520; background-image: var(--hatch), linear-gradient(180deg, #1A1520 0%, #231B27 46%, #3A2530 70%, #2A1F2B 100%); }
.alps { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.alps > * { position: absolute; left: -4%; right: -4%; bottom: 0; will-change: transform; }
.glow { inset: auto -10% 8% -10%; height: 80%; background: radial-gradient(60% 55% at 66% 78%, color-mix(in oklab, var(--color-glow) 75%, transparent) 0%, color-mix(in oklab, var(--color-brand) 55%, transparent) 24%, color-mix(in oklab, var(--color-brand) 16%, transparent) 48%, transparent 70%); }
.stars { inset: 0 0 40% 0; opacity: .7; background: radial-gradient(1px 1px at 12% 18%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 38% 9%, #fff7 50%, transparent 51%), radial-gradient(1.5px 1.5px at 71% 14%, #fffa 50%, transparent 51%), radial-gradient(1px 1px at 86% 26%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 56% 22%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 93% 8%, #fff8 50%, transparent 51%); }
.ridge-1 { height: 58%; background: linear-gradient(180deg, color-mix(in oklab, var(--color-glow) 62%, #5A4258) 0%, color-mix(in oklab, var(--color-brand) 30%, #4E3C52) 14%, #463848 40%, #3B3040 100%); clip-path: polygon(0 72%,7% 60%,13% 66%,21% 48%,27% 55%,34% 38%,40% 46%,47% 30%,52% 37%,58% 16%,61% 22%,66% 4%,70% 15%,74% 10%,79% 27%,84% 20%,90% 36%,95% 30%,100% 42%,100% 100%,0 100%); }
.ridge-2 { height: 44%; background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand) 22%, #3A2D3E) 0%, #30263A 30%, #2B2233 100%); clip-path: polygon(0 50%,6% 38%,11% 46%,18% 30%,24% 40%,31% 22%,37% 34%,44% 26%,50% 44%,56% 30%,63% 46%,70% 24%,76% 34%,82% 14%,87% 26%,93% 18%,100% 32%,100% 100%,0 100%); }
.ridge-3 { height: 30%; background: linear-gradient(180deg, #2A2130, #211B27); clip-path: polygon(0 36%,9% 52%,16% 30%,24% 44%,33% 20%,41% 40%,49% 28%,57% 48%,64% 32%,72% 50%,80% 26%,88% 42%,95% 30%,100% 40%,100% 100%,0 100%); }
.ridge-4 { height: 16%; background: #1A1520; clip-path: polygon(0 30%,12% 52%,22% 26%,35% 48%,48% 22%,60% 44%,74% 18%,86% 42%,100% 24%,100% 100%,0 100%); }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background-image: repeating-conic-gradient(rgb(255 255 255 / .18) 0 6%, transparent 0 13%, rgb(0 0 0 / .3) 0 19%, transparent 0 27%); background-size: 3px 3px; }

.hero-copy { position: relative; z-index: 5; padding: 48px 48px 0; max-width: 680px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero-copy h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -.01em; line-height: .86; }
.kin-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: -4px; }
.kin-pre { font: 500 .8125rem/1 var(--font-mono); color: var(--color-muted); letter-spacing: .05em; text-transform: uppercase; }
.kin { display: inline-block; height: 1.08em; overflow: hidden; font: 850 var(--fs-kin)/1.08 var(--font-display); text-transform: uppercase; color: var(--color-brand); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.kin-track { display: grid; }
/* all words share one cell: only the current one is visible, so no hidden boxes hang below */
.kin-track span { grid-area: 1 / 1; height: 1.08em; white-space: nowrap; transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), visibility 0s var(--dur-slow); }
.kin-track span.is-on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.kin-track span.is-out { transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), visibility 0s var(--dur-slow); }
.hero-sub { font-size: var(--fs-lead); color: color-mix(in oklab, var(--color-text) 82%, var(--color-muted)); max-width: 30em; }

.hero-meta { position: absolute; z-index: 5; left: 48px; right: 48px; bottom: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coord { margin-left: auto; font: 500 var(--fs-micro)/1 var(--font-mono); color: color-mix(in oklab, var(--color-text) 55%, transparent); letter-spacing: .08em; }

/* ── live tile: slider ── */
.t-live .slides { position: absolute; inset: 0; display: flex; transition: transform var(--dur-slow) var(--ease); touch-action: pan-y; }
.slide { position: relative; flex: 0 0 100%; height: 100%; }
.slide picture, .slide img { width: 100%; height: 100%; object-fit: cover; }
.slide img { transform: scale(1.04); transition: transform 6s linear; }
.slide.is-cur img { transform: scale(1.12); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(21 18 26 / .55) 0%, transparent 34%, transparent 46%, rgb(21 18 26 / .92) 100%); }
.live-head { position: absolute; left: 18px; right: 18px; top: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; }
.live-head .kicker { color: var(--color-text); }
.live-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.live-cap .live-title { font: 850 1.25rem/1.05 var(--font-display); text-transform: uppercase; }
.live-cap p { font-size: var(--fs-small); color: var(--color-muted); margin-top: 4px; }
.live-cap a { position: relative; }
.ctrl { display: flex; gap: 6px; }
.dots { position: absolute; left: 18px; right: 18px; top: 52px; z-index: 5; display: flex; gap: 5px; }
.dots button { position: relative; flex: 1; height: 3px; background: color-mix(in oklab, #fff 22%, transparent); }
.dots button i { overflow: hidden; }
.dots button::before { content: ""; position: absolute; inset: -12px 0; }
.dots button i { position: absolute; inset: 0; background: var(--color-text); transform-origin: left; transform: scaleX(0); }
.dots button.is-done i { transform: scaleX(1); }
.dots button.is-cur i { animation: fill var(--dur, 4.5s) linear forwards; }
.t-live.is-paused .dots button.is-cur i { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

/* ── jackpot tile ── */
.t-jack { padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--surface-1); background-image: var(--hatch), radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--color-brand) 16%, transparent), transparent 55%); }
.jack-top { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; }
.jack-top .icon { color: var(--color-brand); }
.jack-val { font: 850 clamp(1.5rem, 1rem + 1.1vw, 2.05rem)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jack-val small { font-size: .55em; color: var(--color-muted); font-weight: 600; margin-right: .25em; }
.jack-foot { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-micro); color: var(--color-muted); margin-top: 7px; }

/* ── player protection tile ── */
.t-safe { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; background-color: var(--surface-1); background-image: var(--hatch), linear-gradient(160deg, color-mix(in oklab, var(--color-accent) 8%, var(--surface-1)), var(--surface-1) 60%); }
.t-safe > * { position: relative; z-index: 5; }
.safe-top { display: flex; align-items: center; justify-content: space-between; }
.safe-top .kicker, .safe-top .icon { color: var(--color-accent); }
.safe-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; }
.safe-row strong { font: 850 1.125rem/1 var(--font-display); }
.safe-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .75rem; color: var(--color-muted); }

/* ── cover wall ── */
.t-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; }
.t-wall .wfade { position: absolute; left: 0; right: 0; height: 70px; z-index: 2; pointer-events: none; }
.t-wall .wfade--t { top: 0; background: linear-gradient(var(--surface-1), transparent); }
.t-wall .wfade--b { bottom: 0; background: linear-gradient(transparent, var(--surface-1)); }
.wcol { display: flex; flex-direction: column; gap: 10px; animation: wallUp 38s linear infinite; will-change: transform; }
.wcol.rev { animation-name: wallDown; }
.t-wall:hover .wcol, .t-wall:focus-within .wcol { animation-play-state: paused; }
.wcol a { position: relative; display: block; overflow: hidden; outline: 1px solid rgb(0 0 0 / .5); transition: transform var(--dur-base) var(--ease), filter var(--dur-base); }
.wcol a:hover { transform: scale(1.04); }
.wcol a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.t-wall:hover .wcol a:not(:hover) { filter: brightness(.6) saturate(.7); }
.wcol img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.wcol--m { display: none; }
@keyframes wallUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 5px)); } }
@keyframes wallDown { from { transform: translateY(calc(-50% - 5px)); } to { transform: translateY(0); } }

/* ═════ FAQ teaser + info blocks ══════════════════════════════════════════ */
.home-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.home-faq .sec-head { position: sticky; top: 90px; flex-direction: column; align-items: flex-start; }
.info .ic { width: 48px; height: 48px; }
.info .ic .icon { width: 22px; height: 22px; }
.licence { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.licence__num { font: 900 clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem)/.9 var(--font-display); letter-spacing: 0; color: var(--color-text); }
.licence__num small { display: block; font: 500 var(--fs-micro)/1 var(--font-mono); color: var(--color-muted); letter-spacing: .08em; margin-bottom: 8px; }
.info > *:not(.shine) { position: relative; z-index: 5; }

/* ═════ Responsive ════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .bento { grid-template-rows: 300px 160px 170px; }
  .t-main { grid-column: 1 / 9; }
  .t-live, .t-jack, .t-safe { grid-column: 9 / 13; }
  .t-wall { display: none; }
}
@media (max-width: 960px) {
  .bento { grid-template-rows: auto; grid-auto-flow: row dense; }
  .t-main { grid-column: 1 / 13; grid-row: auto; min-height: 560px; }
  .t-live { grid-column: 1 / 7; grid-row: auto; height: 300px; }
  .t-wall { display: grid; grid-column: 7 / 13; grid-row: auto; height: 300px; }
  .t-jack { grid-column: 1 / 7; grid-row: auto; min-height: 160px; }
  .t-safe { grid-column: 7 / 13; grid-row: auto; }
  .home-faq { grid-template-columns: minmax(0, 1fr); }
  .home-faq .sec-head { position: static; }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .t-main, .t-live, .t-wall, .t-jack, .t-safe { grid-column: 1 / -1; }
  .t-main { min-height: 600px; }
  .hero-copy { padding: 30px 22px 0; gap: 16px; }
  .hero-meta { position: relative; left: auto; right: auto; bottom: auto; padding: 24px 22px 22px; margin-top: auto; }
  .t-main { display: flex; flex-direction: column; }
  .coord { display: none; }
  .t-live { height: 340px; }
  .t-wall { height: 260px; grid-template-columns: 1fr 1fr 1fr; }
  .wcol--m { display: flex; }
  .t-safe { gap: 10px; }
  .licence { grid-template-columns: minmax(0, 1fr); }
}
.t-jack > * { position: relative; z-index: 5; }
.safe-foot .link { white-space: nowrap; flex: none; }

/* slider pause button: shows play while stopped */
.live-pause .i-play { display: none; }
.live-pause.is-stopped .i-pause { display: none; }
.live-pause.is-stopped .i-play { display: block; }