/* =========================================================================
   HOME  (HOME area) — live wins conveyor, game cards, footer.
   Animate transform/opacity only. Per-card rules live in home-card-{rocket,dice,mines}.css.
   ========================================================================= */
.home { display: flex; flex-direction: column; gap: var(--s-4); }
.home__games { display: flex; flex-direction: column; gap: var(--s-3); }

/* entrance (first show only) */
.home.is-entering > *,
.home.is-entering .home__games > * {
  animation: home-rise var(--dur-hero) var(--ease-standard) both;
}
.home.is-entering > .home__live { animation-delay: 0ms; }
.home.is-entering .home__games > :nth-child(1) { animation-delay: 70ms; }
.home.is-entering .home__games > :nth-child(2) { animation-delay: 140ms; }
.home.is-entering .home__games > :nth-child(3) { animation-delay: 210ms; }
.home.is-entering > .hfoot { animation-delay: 280ms; }
@keyframes home-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } }

/* =========================================================================
   LIVE WINS
   ========================================================================= */
.hlive { display: flex; align-items: stretch; gap: var(--s-2); height: 60px; }
.hlive__viewport {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  border-radius: var(--r-md);
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
  cursor: grab;
}
.hlive__viewport.is-dragging { cursor: grabbing; }
.hlive__track {
  display: flex; gap: 8px; height: 100%; width: max-content;
  will-change: transform;
}
.hlive__track.is-entering > * { animation: home-tile-in var(--dur-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes home-tile-in { from { opacity: 0; transform: translateX(18px) scale(0.92); } }

.ltile {
  --tone: var(--green-400);
  --tone-a: rgba(34, 197, 120, 0.2);
  --tone-b: rgba(34, 197, 120, 0.02);
  position: relative; flex: none; height: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px 0 9px; border-radius: var(--r-md);
  background:
    radial-gradient(90px 60px at 0% 0%, var(--tone-a), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--hl-top), 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.ltile--t2 { --tone: var(--violet-300); --tone-a: rgba(132, 104, 246, 0.3); }
.ltile--t3 { --tone: var(--gold-300); --tone-a: rgba(255, 203, 71, 0.28); }
.ltile--t3 { border-color: rgba(255, 203, 71, 0.16); border-top-color: rgba(255, 224, 138, 0.32); }
.ltile__av { position: relative; flex: none; display: grid; }
.ltile__av::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid var(--tone); opacity: 0.55;
}
.ltile__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ltile__amt {
  display: flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: var(--fs-sm); line-height: 1; color: var(--text); letter-spacing: -0.01em;
}
.ltile__amt .coin { --coin: 14px; vertical-align: 0; }
.ltile__meta { display: flex; align-items: center; gap: 6px; line-height: 1; min-width: 0; }
.ltile__mult { font-size: var(--fs-xs); font-weight: 800; color: var(--tone); }
.ltile__name {
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-2xs); font-weight: 650; color: var(--text-3);
}
/* fresh win: a light passes over the tile a few times */
.ltile.is-new::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: home-tile-shine 1.6s var(--ease-inout) 3 0.4s;
}
.ltile.is-new { border-top-color: rgba(255, 255, 255, 0.22); }
@keyframes home-tile-shine { to { transform: translateX(120%); } }

.ltile--sk { width: 128px; padding: 0 12px 0 9px; --tone-a: transparent; }
.ltile--sk .ltile__body { gap: 6px; }

.hlive__viewport.is-empty { -webkit-mask-image: none; mask-image: none; cursor: default; }
.hlive__viewport.is-empty .hlive__track { width: 100%; }
.hlive__empty {
  flex: 1; height: 100%; display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-md);
  background:
    radial-gradient(120px 70px at 0% 50%, rgba(255, 203, 71, 0.1), transparent 70%),
    linear-gradient(180deg, var(--surface-1), rgba(27, 27, 30, 0.5));
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--hl-top);
  animation: fade var(--dur-ui) var(--ease-standard) both;
}
.hlive__empty-art { flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); animation: home-float 4s var(--ease-inout) infinite; }
.hlive__empty-text { display: flex; flex-direction: column; gap: 2px; line-height: var(--lh-snug); }
.hlive__empty-text b { font-weight: 800; font-size: var(--fs-sm); }

/* =========================================================================
   GAME CARDS
   ========================================================================= */
.hcard {
  --r: var(--r-xl);
  position: relative; display: block; width: 100%; height: 136px;
  border-radius: var(--r); overflow: hidden; isolation: isolate;
  text-align: left; color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -8px rgba(0, 0, 0, 0.55);
  transition: transform var(--dur-press) var(--ease-standard), filter var(--dur-press) var(--ease-standard);
}
.hcard.is-pressed { transform: scale(0.975); filter: brightness(1.06); }
.hcard__surface { position: absolute; inset: 0; z-index: -2; border-radius: inherit; }
.hcard__surface.grain::after { opacity: 0.07; mix-blend-mode: overlay; z-index: 1; }
.hcard__shade { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hcard__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px 16px 15px;
  pointer-events: none;
}
.hcard__foot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hcard__title {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1;
  letter-spacing: -0.015em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.28);
}

/* shared float (live strip empty art, dice coin, mines chip) */
@keyframes home-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* =========================================================================
   FOOTER — responsible gaming
   ========================================================================= */
.hfoot {
  margin-top: var(--s-1);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-1), rgba(27, 27, 30, 0.6));
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--hl-top);
  overflow: hidden;
}
.hfoot__rg { display: flex; align-items: center; gap: var(--s-3); padding: 14px 16px; }
.hfoot__seal { flex: none; }
.hfoot__text { display: flex; flex-direction: column; gap: 2px; line-height: var(--lh-snug); min-width: 0; }
.hfoot__text b { font-weight: 800; font-size: var(--fs-sm); }

/* =========================================================================
   Reduced motion: keep the scene still
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hlive__empty-art, .ltile.is-new::before { animation: none !important; }
}

/* narrow phones: give the titles room next to the art */
@media (max-width: 374px) {
  .hcard__title { font-size: 21px; }
}

/* ---------------------------------------------------------- admin entry (admins only) */
.hadm {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: 10px 14px 10px 10px; text-align: left;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px dashed var(--line-strong);
  color: var(--text-2);
}
.hadm__ic {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface-3); color: var(--violet-300);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hadm__ic .ic { width: 18px; height: 18px; --ic-fill: 0.2; }
.hadm__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: var(--lh-snug); }
.hadm__text b { color: var(--text); font-weight: 750; font-size: var(--fs-sm); }
.hadm__chev { width: 18px; height: 18px; color: var(--text-3); }
.home.is-entering > .hadm { animation-delay: 320ms; }