/* Hebrew Skin v3 - RTL Lottery */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #0d1120;
  --navy2:     #131628;
  --gold:      #f5c518;
  --gold2:     #e6a800;
  --red:       #e53935;
  --blue:      #1d6ef5;
  --purple:    #7c3aed;
  --green:     #16a34a;
  --text:      #ffffff;
  --text2:     #9aa5be;
  --border:    rgba(255,255,255,0.1);
  --radius:    14px;
  --radius-sm: 8px;
}

html { direction: rtl; overflow-x: hidden; width: 100%; }
body {
  font-family: 'Heebo', 'Segoe UI', Arial, sans-serif;
  background: var(--navy);
  color: #111;
  min-height: 100vh;
  font-size: 15px;
  overflow-x: hidden;
  width: 100%;
}

/* ── HEADER ─────────────────────────────────────────────────────── */
#he-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--navy);
  position: sticky; top: 0; z-index: 100;
  gap: 8px;
}
.he-header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; direction: ltr; }
#he-hamburger {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; padding: 4px; flex-shrink: 0;
  order: -1; /* always leftmost */
}
#he-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.he-header-btns { display: flex; gap: 8px; align-items: center; }
.he-profile-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  transition: background .15s;
}
.he-profile-btn:hover { background: rgba(255,255,255,.14); }
.he-btn-register {
  background: var(--gold); color: #111; border: none;
  border-radius: var(--radius-sm); padding: 9px 18px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.he-btn-login {
  background: none; color: #fff; border: 2px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-sm); padding: 7px 18px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.he-logo { display: flex; align-items: center; gap: 5px; text-decoration: none; flex-shrink: 0; }
.he-logo-text { font-size: 26px; font-weight: 900; color: var(--red); letter-spacing: -1px; }

/* Desktop infobar inside header - hidden on mobile */
#he-header-infobar {
  display: none;
  align-items: center; gap: 0;
  flex: 1; justify-content: center;
}
.he-header-infobar-divider {
  width: 1px; height: 44px; background: rgba(255,255,255,0.15); margin: 0 24px;
}

/* ── INFO BAR - inside hero area, dark strip ─────────────────── */
#he-infobar {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  margin: 0 12px 0;
  padding: 10px 12px;
  gap: 0;
}
.he-infobar-live-btn {
  background: var(--gold); color: #111; border: none; border-radius: var(--radius-sm);
  padding: 9px 13px; font-weight: 800; font-size: 13px; cursor: pointer;
  white-space: nowrap; display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.he-infobar-divider { width: 1px; height: 36px; background: var(--border); margin: 0 10px; flex-shrink: 0; }
.he-infobar-block { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.he-infobar-label {
  font-size: 11px; color: var(--text2); margin-bottom: 1px;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.he-infobar-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); animation: blink 1s infinite; flex-shrink: 0;
}
.he-infobar-jackpot-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.he-infobar-value { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.he-infobar-value.gold { color: var(--gold); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

/* ── HERO - dark navy, transparent balls PNG on right ─────────── */
#he-hero {
  position: relative;
  background: var(--navy);
  min-height: 252px;
  overflow: hidden;
}
/* Blue glow behind balls */
#he-hero::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 65%; height: 130%;
  background: radial-gradient(ellipse at 55% 40%, #0e2560 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}
.he-hero-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  width: 100%; min-height: 220px;
  direction: ltr;
  left: -30px;
}
/* Text on LEFT side */
.he-hero-text {
  flex: 0 0 54%; max-width: 54%;
  padding-left: 16px;
  direction: rtl;
}
.he-hero-title { font-size: 42px; font-weight: 900; line-height: 1.02; color: #fff; margin-bottom: 10px; }
.he-hero-title span { color: var(--gold); display: block; }
.he-hero-sub { font-size: 13px; color: #b8c8e8; margin-bottom: 20px; line-height: 1.55; }
.he-hero-cta {
  background: var(--gold); color: #111; border: none;
  border-radius: var(--radius-sm); padding: 13px 22px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
/* Transparent balls PNG on RIGHT side */
.he-hero-img-wrap {
  flex: 1;
  min-width: 321px;
  left: -67px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.he-hero-img {
  width: 100%; max-width: 320px;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* shift slightly right so balls don't overlap text */
  margin-right: -10px;
}

/* ── FEATURES WRAP - V-shape dark bg, white card on top ─────── */
#he-features-wrap {
  background-color: #ffffff;
  padding: 0 12px 0;
  position: relative;
  z-index: 3;
  margin-top: 0;
}
#he-features {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.10);
  padding: 22px 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  width: 90%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -20px;
}
.he-feature-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 10px 20px; position: relative;
}
/* Vertical dividers between items */
.he-feature-item:not(:last-child)::after {
  content: ''; position: absolute;
  left: 0; top: 15%; height: 70%; width: 1px;
  background: #f0f0f0;
}
.he-feature-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.he-feature-icon.purple { background: #7c3aed; }
.he-feature-icon.blue   { background: #1d6ef5; }
.he-feature-icon.green  { background: #16a34a; }
.he-feature-icon.red    { background: #dc2626; }
.he-feature-icon svg    { width: 22px; height: 22px; }
.he-feature-title { font-size: 12px; font-weight: 800; color: #111; line-height: 1.2; white-space: nowrap; }
.he-feature-sub   { font-size: 10px; color: #777; line-height: 1.35; }

/* ── PAYMENT METHODS ─────────────────────────────────────────── */
#he-payments { background: #fff; padding: 8px 12px 40px; }
#he-payments > * { max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto; }
#he-payments-grid {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 22px 10px;
}
.he-payment-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  width: 90px;
}
.he-payment-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.he-payment-icon.purple { background: #7c3aed; }
.he-payment-icon.blue   { background: #1d6ef5; }
.he-payment-icon.blue2  { background: #0091ff; }
.he-payment-icon.green  { background: #16a34a; }
.he-payment-icon.red    { background: #dc2626; }
.he-payment-icon.orange { background: #f97316; }
.he-payment-icon.gold   { background: #d97706; }
.he-payment-icon svg    { width: 22px; height: 22px; }
.he-payment-label { font-size: 12px; font-weight: 800; color: #111; line-height: 1.3; }

/* ── WHITE BG for everything below features ──────────────────── */
#he-portal-screen { background: #fff; }

/* ── HOW IT WORKS ────────────────────────────────────────────── */
#he-hiw { background: #fff; padding: 24px 12px 28px; margin-top: 0; }
#he-hiw > * { max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto; }
.he-section-title {
  text-align: center; font-size: 16px; font-weight: 800; color: #111; margin-bottom: 20px;
}
.he-section-title::before, .he-section-title::after {
  content: ''; display: inline-block; width: 24px; height: 2px;
  background: var(--gold); vertical-align: middle; margin: 0 8px;
}
.he-hiw-steps {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 8px;
  direction: ltr;
}
.he-hiw-step { direction: rtl; }
.he-hiw-step {
  flex: 1; max-width: 110px;
  background: #fff; border-radius: var(--radius);
  border: 1px solid #e5e7eb;
  padding: 18px 12px 14px;
  display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: right;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.he-hiw-num {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #111; font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.he-hiw-icon-svg {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.he-hiw-icon-svg svg { width: 40px; height: 40px; }
.he-hiw-icon-svg img { width: 50px; height: 50px; object-fit: contain; }
.he-hiw-text  { display: flex; flex-direction: column; }
.he-hiw-label { font-size: 13px; font-weight: 800; color: #111; margin-bottom: 3px; }
.he-hiw-sub   { font-size: 10px; color: #666; line-height: 1.35; }
.he-hiw-arrow { font-size: 22px; color: #bbb; padding: 0 2px; margin-top: 26px; flex-shrink: 0; font-weight: 300; }

/* ── GAMES + LOTTERIES ROW ───────────────────────────────────── */
#he-games-lotteries-row {
  background: var(--navy);
  border-top: 3px solid var(--gold);
}
.he-games-lotteries-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}

/* RIGHT column - games (RTL: first in DOM = rightmost) */
#he-games {
  flex: 0 0 290px;
  background: var(--navy2, #131929);
  padding: 18px 14px 22px;
  border-left: 1px solid rgba(255,255,255,.06);
}
.he-games-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* remove old bar since step badge replaces it */
.he-step-badge {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); color: #111;
  font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.he-step-badge--2 {
  background: rgba(59,130,246,.25);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,.4);
}
/* step 2 badge lights up when game is selected */
#he-open-lotteries.he-lotteries-pulse .he-step-badge--2 {
  background: #3b82f6; color: #fff; border-color: #3b82f6;
}
.he-games-title {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75);
  text-transform: uppercase; letter-spacing: 1px;
}

/* ── Game selection state ─────────────────────────────────────── */
/* Selected game card - bright glow ring */
.he-game-card--selected { box-shadow: 0 0 0 2px #fff, 0 0 18px 4px rgba(255,255,255,.25) !important; transform: translateY(-2px); }
.he-game-card--gold.he-game-card--selected   { box-shadow: 0 0 0 2px var(--gold), 0 0 18px 6px rgba(245,197,24,.4) !important; }
.he-game-card--purple.he-game-card--selected { box-shadow: 0 0 0 2px #a855f7, 0 0 18px 6px rgba(168,85,247,.4) !important; }
.he-game-card--red.he-game-card--selected    { box-shadow: 0 0 0 2px #ef4444, 0 0 18px 6px rgba(239,68,68,.4) !important; }
.he-game-card--blue.he-game-card--selected   { box-shadow: 0 0 0 2px #3b82f6, 0 0 18px 6px rgba(59,130,246,.4) !important; }
.he-game-card--emerald.he-game-card--selected { box-shadow: 0 0 0 2px #10b981, 0 0 18px 6px rgba(16,185,129,.4) !important; }
.he-game-card--rb.he-game-card--selected     { box-shadow: 0 0 0 2px #ef4444, 0 0 18px 6px rgba(239,68,68,.4) !important; }

/* Lottery table pulse - attract user attention */
@keyframes lotteries-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
  30%  { box-shadow: 0 0 0 4px rgba(245,197,24,.5); }
  60%  { box-shadow: 0 0 0 8px rgba(245,197,24,.2); }
  100% { box-shadow: 0 0 0 12px rgba(245,197,24,0); }
}
#he-open-lotteries.he-lotteries-pulse {
  animation: lotteries-pulse .55s ease-out 2;
  border-radius: 4px;
}

/* Lottery rows in pick mode - highlight on hover more strongly */
.he-lottery-row--pick { cursor: pointer !important; }
.he-lottery-row--pick:hover {
  background: rgba(245,197,24,.1) !important;
}

/* ── Onboarding tutorial (shown after hero "Play now" CTA) ─────── */
/* Fixed positioning so it always anchors near the games/lotteries row
   regardless of that row's height (it can be very tall on desktop once
   the full lottery table renders) - top offset is set from JS to sit
   just under the row's header. */
.he-tutorial {
  position: fixed;
  left: 50%; top: 0;
  transform: translate(-50%, -8px);
  z-index: 200;
  width: 92%; max-width: 560px;
  opacity: 0;
  transition: opacity .25s ease-out, transform .25s ease-out;
  /* The wrapper spans the full row width but only the card inside it should
     be clickable - otherwise the empty space around the card blocks clicks
     on the games/lotteries underneath it (real bug: users couldn't tap
     game cards while the tutorial was open). */
  pointer-events: none;
}
.he-tutorial--visible { opacity: 1; transform: translate(-50%, 0); }
.he-tutorial.hidden { display: none; }
.he-tutorial-card { pointer-events: auto; }
.he-tutorial-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-panel, #181c24);
  border: 1px solid var(--gold-border, rgba(232,201,16,.35));
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(245,197,24,.08);
}
/* Speech-bubble pointer aimed down at the games grid below the tutorial */
.he-tutorial-card::after {
  content: '';
  position: absolute;
  bottom: -11px; right: 40px;
  width: 20px; height: 20px;
  background: var(--bg-panel, #181c24);
  border-inline-end: 2px solid var(--gold-border, rgba(232,201,16,.6));
  border-block-end: 2px solid var(--gold-border, rgba(232,201,16,.6));
  transform: rotate(45deg);
  border-radius: 0 0 4px 0;
  box-shadow: 3px 3px 6px rgba(0,0,0,.25);
}
.he-tutorial-close {
  position: absolute; top: -10px; left: -10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-card, #1e2330); color: var(--text, #e8eaf0);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.he-tutorial-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.he-tutorial-badge {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); color: #111;
  font-size: 13px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.he-tutorial-badge--2 { background: #3b82f6; color: #fff; }
.he-tutorial-title { font-size: 13px; font-weight: 800; color: var(--text, #fff); }
.he-tutorial-sub { font-size: 11px; color: var(--text2, rgba(255,255,255,.6)); margin-top: 2px; line-height: 1.4; }
.he-tutorial-arrow { font-size: 18px; color: var(--gold); flex-shrink: 0; opacity: .7; }

@media (max-width: 767px) {
  /* Games collapse into a narrow ~76px icon column on the right edge here
     (RTL) - the card must stop clear of it (not just visually point at it),
     otherwise it physically overlaps and blocks taps on the game icons
     underneath. Anchored from the right edge instead of centered so its
     right boundary lines up just before that column. */
  .he-tutorial {
    left: auto; right: 88px;
    width: calc(100% - 100px); max-width: 460px;
    transform: translateY(-8px);
  }
  .he-tutorial--visible { transform: translateY(0); }
  .he-tutorial-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .he-tutorial-arrow { transform: rotate(90deg); align-self: center; }
  /* Caret points right, across the gap, at the games column beyond the card's edge. */
  .he-tutorial-card::after {
    bottom: auto; right: -13px; top: 20px;
    width: 24px; height: 24px;
    border-inline-end: none; border-block-end: none;
    border-inline-start: 3px solid var(--gold, #f5c518);
    border-block-start: 3px solid var(--gold, #f5c518);
    border-radius: 4px 0 0 0;
    box-shadow: -4px -4px 10px rgba(0,0,0,.35);
  }
}

/* ── One card per row - horizontal layout ─────────────────────── */
.he-games-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.he-game-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  height: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.he-game-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.4); }

/* color accent left border */
.he-game-card--gold   { background: linear-gradient(135deg, #1a1400 0%, #2a1e00 100%); border: 1px solid rgba(245,197,24,.25); }
.he-game-card--purple { background: linear-gradient(135deg, #0e0020 0%, #1a0040 100%); border: 1px solid rgba(124,58,237,.3); }
.he-game-card--red    { background: linear-gradient(135deg, #1a0000 0%, #2d0000 100%); border: 1px solid rgba(220,38,38,.3); }
.he-game-card--blue   { background: linear-gradient(135deg, #000e2a 0%, #001845 100%); border: 1px solid rgba(29,110,245,.3); }
.he-game-card--emerald{ background: linear-gradient(135deg, #001a10 0%, #002d1d 100%); border: 1px solid rgba(16,185,129,.3); }
.he-game-card--rb     { background: linear-gradient(135deg, #1a0000 0%, #0a0a0a 60%, #000 100%); border: 1px solid rgba(220,38,38,.2); }

/* accent glow strip on right (RTL = visual right = DOM left) */
.he-game-card--gold::before   { content:''; position:absolute; right:0; top:0; width:3px; height:100%; background:var(--gold); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.he-game-card--purple::before { content:''; position:absolute; right:0; top:0; width:3px; height:100%; background:#7c3aed; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.he-game-card--red::before    { content:''; position:absolute; right:0; top:0; width:3px; height:100%; background:#dc2626; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.he-game-card--emerald::before{ content:''; position:absolute; right:0; top:0; width:3px; height:100%; background:#10b981; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.he-game-card--blue::before   { content:''; position:absolute; right:0; top:0; width:3px; height:100%; background:#1d6ef5; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.he-game-card--rb::before     { content:''; position:absolute; right:0; top:0; width:3px; height:50%; background:#dc2626; border-radius:0 var(--radius-sm) 0 0; }
.he-game-card--rb::after      { content:''; position:absolute; right:0; bottom:0; width:3px; height:50%; background:#444; border-radius:0 0 var(--radius-sm) 0; }

/* thumbnail on the right side of card (RTL: DOM last = visually left) */
.he-game-card-bgimg {
  position: absolute;
  left: 0;
  top: 0px;
  bottom: -85px;
  width: 80px;
  background-size: cover;
  background-position: center;
  opacity: .55;
  pointer-events: none;
}
/* fade the thumbnail into the card bg */
.he-game-card--gold   .he-game-card-bgimg { -webkit-mask: linear-gradient(to right, transparent 0%, #000 90%); mask: linear-gradient(to right, transparent 0%, #000 90%); }
.he-game-card--purple .he-game-card-bgimg { -webkit-mask: linear-gradient(to right, transparent 0%, #000 90%); mask: linear-gradient(to right, transparent 0%, #000 90%); }
.he-game-card--red    .he-game-card-bgimg { -webkit-mask: linear-gradient(to right, transparent 0%, #000 90%); mask: linear-gradient(to right, transparent 0%, #000 90%); }
.he-game-card--emerald .he-game-card-bgimg { -webkit-mask: linear-gradient(to right, transparent 0%, #000 90%); mask: linear-gradient(to right, transparent 0%, #000 90%); }
.he-game-card--blue   .he-game-card-bgimg { -webkit-mask: linear-gradient(to right, transparent 0%, #000 90%); mask: linear-gradient(to right, transparent 0%, #000 90%); }

/* Red/Black card: red ball right, black ball left - same treatment as other cards' thumbnails */
.he-game-card--rb .he-game-card-bgimg.he-rb-bgimg {
  -webkit-mask: linear-gradient(to right, transparent 0%, #000 90%);
  mask: linear-gradient(to right, transparent 0%, #000 90%);
  opacity: .55;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.he-rb-ball {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* text + button area */
.he-game-card-body {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 14px;
  gap: 8px;
}
.he-game-card-info { flex: 1; min-width: 0; }
.he-game-card-title {
  font-size: 14px; font-weight: 800; color: #fff;
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.he-game-card-sub { font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; }
.he-game-btn {
  border: none; border-radius: 8px;
  padding: 7px 13px;
  font-weight: 800; font-size: 12px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
}
.he-game-btn.blue   { background: rgba(29,110,245,.25);  color: #93c5fd; border: 1px solid rgba(29,110,245,.4); }
.he-game-btn.red    { background: rgba(220,38,38,.25);   color: #fca5a5; border: 1px solid rgba(220,38,38,.4); }
.he-game-btn.emerald{ background: rgba(16,185,129,.25);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.4); }
.he-game-btn.purple { background: rgba(124,58,237,.25);  color: #d8b4fe; border: 1px solid rgba(124,58,237,.4); }
.he-game-btn.gold   { background: rgba(245,197,24,.2);   color: #fde047; border: 1px solid rgba(245,197,24,.4); }
.he-game-btn.rb     { background: rgba(220,38,38,.2);    color: #fca5a5; border: 1px solid rgba(220,38,38,.4); }

/* LEFT column - open lotteries (RTL: second in DOM = leftmost) */
#he-open-lotteries {
  flex: 1 1 0;
  background: var(--navy);
  padding: 16px 20px 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.he-open-lotteries-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.he-open-lotteries-header-left {
  display: flex; align-items: center; gap: 8px;
}
/* step badge replaces the bar for lotteries header too */
.he-open-lotteries-title {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75);
  text-transform: uppercase; letter-spacing: 1px;
}
.he-lotteries-count {
  font-size: 11px; color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.07);
  padding: 2px 8px; border-radius: 99px;
}
.he-pick-hint {
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.35);
  padding: 3px 10px; border-radius: 99px;
  animation: pick-hint-blink 1s ease-in-out infinite alternate;
}
@keyframes pick-hint-blink {
  from { opacity: .6; }
  to   { opacity: 1; }
}
.he-open-lotteries-body {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  position: relative;
  scroll-behavior: smooth;
  /* Custom scrollbar - dark theme */
  scrollbar-width: thin;
  scrollbar-color: rgba(245,197,24,.4) rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Center only when the grid is shorter than the box (few lotteries) - toggled via JS */
.he-open-lotteries-body.he-lotteries-few { justify-content: center; }
.he-open-lotteries-body::-webkit-scrollbar { width: 5px; }
.he-open-lotteries-body::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 99px; }
.he-open-lotteries-body::-webkit-scrollbar-thumb { background: rgba(245,197,24,.38); border-radius: 99px; }
.he-open-lotteries-body::-webkit-scrollbar-thumb:hover { background: rgba(245,197,24,.65); }
/* Fade-out gradient at bottom to signal more content */
.he-lotteries-scroll-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.he-lotteries-scroll-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(10,14,28,.95));
  pointer-events: none;
  transition: opacity .3s;
  border-radius: 0 0 8px 8px;
}
.he-lotteries-scroll-wrap.at-bottom::after { opacity: 0; }
/* Lottery grid - flat dense multi-column list (matches reference layout) */
.he-lottery-grid {
  --lt-rows: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-auto-rows: max-content;
  grid-template-rows: repeat(var(--lt-rows), max-content);
  column-gap: 22px;
  width: 100%;
  flex-shrink: 0;
  font-size: 12.5px;
}
.he-lottery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .1s;
}
.he-lottery-row:hover { background: rgba(255,255,255,.04); }
.he-lt-name {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.he-lt-flag { border-radius: 2px; flex-shrink: 0; vertical-align: middle; }

/* Lottery selection confirmation - flag zooms toward the viewer before the screen switches */
.he-flag-fly-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10,10,14,0);
  transition: background .35s ease-out;
  pointer-events: none;
}
.he-flag-fly-overlay--go { background: rgba(10,10,14,.72); }
.he-flag-fly {
  z-index: 9999;
  border-radius: 4px;
  box-shadow: 0 0 0 rgba(245,197,24,0);
  transition: transform .65s cubic-bezier(.2,.8,.25,1), box-shadow .65s ease-out, border-radius .65s ease-out;
  transform-origin: center center;
  pointer-events: none;
}
.he-flag-fly--go {
  transform: translate(
      calc(50vw - var(--fly-cx, 50vw)),
      calc(50vh - var(--fly-cy, 50vh))
    ) scale(9);
  border-radius: 8px;
  box-shadow: 0 0 60px 20px rgba(245,197,24,.55);
}
.he-lt-timer {
  font-family: monospace; color: rgba(255,255,255,.7);
  font-size: 12px; white-space: nowrap; flex-shrink: 0;
}
.he-lottery-loading { padding: 16px 0; }
/* Skeleton shimmer rows */
.he-lottery-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.he-skel-row {
  height: 40px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.05) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
/* Empty state */
.he-lottery-empty {
  text-align: center; padding: 20px 16px;
  color: rgba(255,255,255,.3); font-size: 13px; line-height: 1.6;
}
.he-lottery-empty-icon { font-size: 24px; margin-bottom: 6px; opacity: .4; display: block; }

/* ── WINNERS ─────────────────────────────────────────────────── */
#he-winners { background: #fff; padding: 16px 12px 80px; position: relative; overflow: hidden; }
#he-winners > * { max-width: 1100px; width: 90%; color: white; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
/* V-shape dark navy behind the winners card */
#he-winners::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 75%;
  background: linear-gradient(180deg, var(--navy) 0%, #081b3d 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
  z-index: 0;
  pointer-events: none;
}
.he-winners-header { font-size: 15px; font-weight: 800; color: #111; margin-bottom: 10px; text-align: right; }
/* ── WINNERS TICKER ──────────────────────────────────────────── */
.he-winners-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid #eaeaea;
  overflow: hidden;
  height: 55px;
}
.he-winners-box:hover .he-winners-list-inner { animation-play-state: paused; }
.he-winners-list-inner {
  display: flex;
  flex-direction: column;
}
.he-winner-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 55px;
  min-height: 55px;
  align-items: center;
  flex-shrink: 0;
}
.he-winner-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.he-winner-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0; top: 20%; height: 60%; width: 1px;
  background: #f0f0f0;
}
.he-winner-amount-grp {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; color: #222; font-size: 14px;
}
.he-winner-user-grp {
  display: flex; align-items: center; gap: 10px;
}
.he-winner-name  { color: #888; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
.he-winner-dot   { width: 6px; height: 6px; background: #00c853; border-radius: 50%; flex-shrink: 0; }
.he-winner-ball-img {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
}

/* ── BOTTOM NAV ──────────────────────────────────────────────── */
#he-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e5e7eb;
  display: flex; z-index: 100;
}
.he-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px 5px; cursor: pointer; border: none; background: none; text-decoration: none; color: #888;
}
.he-nav-item svg { width: 22px; height: 22px; }
.he-nav-label    { font-size: 10px; color: #888; margin-top: 2px; }
.he-nav-item.active .he-nav-label { color: var(--gold2); }
.he-nav-item.active svg { color: var(--gold2); }

/* ── MODALS ──────────────────────────────────────────────────── */
.he-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 600; align-items: center; justify-content: center; }
.he-modal-backdrop.open { display: flex; }
.he-modal { background: #1a2235; border-radius: var(--radius); padding: 24px; width: 90%; max-width: 380px; max-height: 85vh; overflow: hidden; position: relative; }
.he-modal-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 18px; text-align: center; }
.he-modal-close { position: absolute; top: 14px; left: 14px; background: none; border: none; color: #888; font-size: 22px; cursor: pointer; }

/* Results history scroller - thin gold-tinted scrollbar + top/bottom fade to signal
   there's more to scroll, no extra DOM needed for the fade (mask-image on the container). */
.results-history-scroll {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold2) rgba(255,255,255,0.06);
}
/* Fade only applied when content actually overflows (JS toggles this class) - a short
   list that fits without scrolling should never look like it's missing content. */
.results-history-scroll.is-scrollable {
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.results-history-scroll::-webkit-scrollbar { width: 6px; }
.results-history-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 3px; }
.results-history-scroll::-webkit-scrollbar-thumb { background: var(--gold2); border-radius: 3px; }
.results-history-scroll::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.he-input-group { margin-bottom: 14px; }
.he-input-group label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 5px; }
.he-input-group input { width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: var(--radius-sm); color: #fff; font-size: 14px; direction: ltr; }
.he-input-group input::placeholder { color: #666; }
.he-form-error { color: #f87171; font-size: 12px; margin-top: 6px; min-height: 18px; }
.he-submit-btn { width: 100%; padding: 12px; background: var(--gold); color: #111; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 800; cursor: pointer; margin-top: 4px; }
.he-switch-form { text-align: center; margin-top: 14px; font-size: 13px; color: var(--text2); }
.he-switch-form a { color: var(--gold); cursor: pointer; text-decoration: none; }

/* ── TOAST ───────────────────────────────────────────────────── */
#he-toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1e293b; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; opacity: 0; transition: all 0.3s; z-index: 300; white-space: nowrap; pointer-events: none; }
#he-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#he-toast.ok   { border-left: 3px solid #22c55e; }
#he-toast.err  { border-left: 3px solid #ef4444; }

/* ── WIN OVERLAY ─────────────────────────────────────────────── */
#he-win-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.75);
  align-items: center; justify-content: center;
  cursor: pointer;
}
#he-win-overlay.open { display: flex; animation: winFadeIn 0.3s ease; }
#he-win-box {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid var(--gold);
  border-radius: 24px;
  padding: 40px 50px;
  text-align: center;
  animation: winPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  box-shadow: 0 0 60px rgba(255,200,0,0.4);
}
#he-win-stars {
  font-size: 28px; color: var(--gold);
  animation: winPulse 1s ease infinite alternate;
  letter-spacing: 8px; margin-bottom: 8px;
}
#he-win-label {
  font-size: 36px; font-weight: 900; color: #fff;
  margin-bottom: 12px; letter-spacing: 2px;
}
#he-win-amount {
  font-size: 52px; font-weight: 900; color: var(--gold);
  margin-bottom: 16px; text-shadow: 0 0 20px rgba(255,200,0,0.6);
}
#he-win-sub { font-size: 14px; color: #aaa; }
@keyframes winFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes winPop    { from { transform:scale(0.5); opacity:0 } to { transform:scale(1); opacity:1 } }
@keyframes winPulse  { from { opacity:0.7 } to { opacity:1; text-shadow:0 0 12px rgba(255,200,0,0.8) } }

/* ── SCREENS ─────────────────────────────────────────────────── */
#he-portal-screen { display: none; }
#he-portal-screen.active { display: block; }
#he-game-screen  { display: none; padding: 0 0 80px; min-height: 100vh; background: var(--navy); }
#he-game-screen.active  { display: block; }
#he-bets-screen  { display: none; padding: 16px 16px 80px; background: #f4f4f6; color: #111; }
#he-bets-screen.active  { display: block; }
#he-profile-screen { display: none; background: var(--navy); color: #fff; min-height: 100vh; }
#he-profile-screen.active { display: block; }

.he-game-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--navy2); border-bottom: 1px solid var(--border); }
.he-back-btn    { background: none; border: 1px solid var(--border); color: var(--text2); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.he-game-name   { font-weight: 700; font-size: 15px; color: #fff; flex: 1; }
.he-game-timer  { font-family: monospace; font-size: 16px; color: var(--gold); font-weight: 700; }
#he-balance-bar { background: var(--navy2); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.he-balance-label  { font-size: 12px; color: var(--text2); }
.he-balance-amount { font-size: 18px; font-weight: 800; color: var(--gold); }
.he-mode-toggle { background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text2); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.he-bets-section-title { font-size: 13px; font-weight: 700; color: #555; margin: 16px 0 8px; text-transform: uppercase; }
.he-bet-card { background: #fff; border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; border: 1px solid #e5e7eb; color: #111; }

/* ── UTILS ───────────────────────────────────────────────────── */
.hidden { display: none !important; }
.he-loading { text-align: center; color: #888; padding: 30px 0; font-size: 14px; }
.he-page-content { padding-bottom: 70px; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hide integrated infobar - mobile uses #he-infobar instead */
  #he-header-infobar { display: none !important; }
  .he-infobar-live-btn { display: none !important; }
  .he-infobar-live-btn + .he-infobar-divider { display: none !important; }
  #he-infobar { display: flex; }

  /* Hero bleed offsets overflow the viewport on narrow screens - contain them */
  #he-hero { overflow: hidden; }
  .he-hero-inner { left: 0; }
  .he-hero-text { left: 0; flex: 0 0 48%; max-width: 48%; padding-left: 8px; position: relative; z-index: 2; }
  .he-hero-img-wrap { left: -76px; min-width: 318px; width: 571px; flex: 0 0 52%; overflow: visible; }
  .he-hero-img {
    margin-right: -60px;
    width: 100%;
    max-width: 320px;
    -webkit-mask: linear-gradient(to right, transparent 0%, #000 55%);
    mask: linear-gradient(to right, transparent 0%, #000 55%);
  }

  /* Recent winners ticker - 4 columns don't fit narrow screens, use 2 */
  .he-winner-row { grid-template-columns: repeat(2, 1fr); height: auto; row-gap: 8px; padding: 8px 0; }
  .he-winner-item { padding: 0 10px; }
  .he-winner-item:nth-child(3)::after, .he-winner-item:nth-child(4)::after { display: none; }
  .he-winner-name { max-width: 50px; }

  /* Header mobile layout */
  #he-header { padding: 10px 14px; height: auto; }
  .he-logo-text { font-size: 22px; }
  .he-logo-icon { width: 28px; height: 28px; }

  /* Winners V-shape */
  #he-winners::before {
    height: 65%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
  }
  #he-features-wrap { padding: 0; }
  #he-features {
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 4px;
    width: 94%;
    border-radius: 12px;
  }
  .he-feature-icon { width: 36px; height: 36px; }
  .he-feature-icon svg { width: 18px; height: 18px; }
  .he-feature-title { font-size: 10px; white-space: normal; }
  .he-feature-sub   { font-size: 9px; }
  .he-feature-item  { padding: 6px 4px; gap: 4px; }
  .he-feature-item:nth-child(2)::after { display: none; }

  /* HIW */
  #he-hiw { padding: 20px 12px 7px; }
  #he-hiw > *, #he-winners > * { width: 100%; }
  .he-hiw-step { max-width: 30%; flex-direction: column; align-items: center; text-align: center; }

  /* Games + lotteries stay side-by-side on mobile too - games shrink to a narrow icon column */
  .he-games-lotteries-inner { flex-direction: row; width: 100%; align-items: stretch; }
  #he-games {
    flex: 0 0 76px; width: auto;
    border-left: none; border-right: 1px solid var(--border);
    padding: 10px 6px 12px;
  }
  .he-games-header { display: none; }

  /* Games collapse into a slim vertical icon column (matches reference sidebar) */
  .he-games-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-height: 300px;
  }
  .he-games-grid::-webkit-scrollbar { display: none; }
  .he-game-card {
    height: auto;
    flex-direction: column;
    justify-content: center;
    padding: 8px 2px;
    gap: 4px;
  }
  .he-game-card-bgimg { display: none; }
  .he-game-card-body { flex-direction: column; padding: 0; gap: 2px; }
  .he-game-card-info { text-align: center; }
  .he-game-card-title {
    font-size: 9px; white-space: normal; line-height: 1.15;
    margin-bottom: 0;
  }
  .he-game-card-sub { display: none; }
  .he-game-btn { display: none; }

  /* Lottery list - single narrow column beside games, tighter rows */
  #he-open-lotteries { padding: 10px 10px 12px; flex: 1 1 0; min-width: 0; }
  .he-open-lotteries-header { margin-bottom: 8px; padding-bottom: 8px; }
  .he-lottery-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .he-lottery-row { padding: 5px 2px; }
  .he-lt-name { font-size: 11.5px; }
  .he-open-lotteries-body { max-height: 300px; }
  .he-lotteries-scroll-wrap { max-height: 300px; }

}

/* ── DESKTOP ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body { max-width: 100%; }
  #he-bottom-nav { display: none; }
  .he-page-content { padding-bottom: 0; }
  #he-hamburger { display: none; }

  /* Header: single integrated bar */
  #he-header {
    padding: 0 32px;
    height: 68px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  #he-hamburger { display: flex; }

  /* Auth buttons */
  .he-btn-register { padding: 10px 22px; font-size: 15px; }
  .he-btn-login    { padding: 8px 22px;  font-size: 15px; }

  /* Integrated infobar - center, two blocks with divider, LTR so no RTL reversal */
  #he-header-infobar {
    display: flex;
    align-items: stretch;
    flex: 1;
    justify-content: center;
    height: 100%;
    direction: ltr;
  }
  .he-infobar-block {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 48px;
  }
  .he-infobar-label { font-size: 13px; color: var(--text2); margin-bottom: 2px; }
  .he-infobar-value { font-size: 26px; font-weight: 900; color: #fff; }
  .he-infobar-value.gold { color: var(--gold); }
  .he-header-infobar-divider {
    width: 1px;
    background: rgba(255,255,255,0.15);
    margin: 12px 0;
    flex-shrink: 0;
  }

  /* Logo sizing */
  .he-logo-text { font-size: 32px; }
  .he-logo-icon { width: 40px; height: 40px; }

  /* Mobile infobar hidden on desktop */
  #he-infobar { display: none; }

  /* Hero: compact so features show on first screen */
  #he-hero { min-height: 0; }
  .he-hero-inner { min-height: 0; }
  .he-hero-text {
    flex: 0 0 42%; max-width: 42%;
    padding-left: 80px;
  }
  .he-hero-title { font-size: 72px; line-height: 0.95; }
  .he-hero-sub { font-size: 15px; margin-bottom: 24px; line-height: 1.5; }
  .he-hero-cta { font-size: 17px; padding: 14px 28px; }
  .he-hero-img { max-width: 720px; width: 100%; }

  /* Features: V-shape bg on desktop */
  #he-features-wrap {
    padding: 0 60px 0;
  }
  #he-features { gap: 32px; }
  .he-feature-icon  { width: 64px; height: 64px; }
  .he-feature-icon svg { width: 28px; height: 28px; }
  .he-feature-title { font-size: 16px; white-space: normal; }
  .he-feature-sub   { font-size: 13px; }

  /* HIW: white bg */
  #he-hiw { padding: 17px 80px 0px; }
  .he-section-title { font-size: 22px; margin-bottom: 32px; }
  .he-hiw-steps { max-width: 820px; margin: 0 auto; gap: 24px; }
  .he-hiw-step  { max-width: 100%; padding: 24px 16px 13px; }
  .he-hiw-icon-svg { width: 64px; height: 64px; }
  .he-hiw-icon-svg svg { width: 52px; height: 52px; }
  .he-hiw-icon-svg img { width: 60px; height: 60px; }
  .he-hiw-label { font-size: 16px; }
  .he-hiw-sub   { font-size: 13px; }
  .he-hiw-num   { width: 32px; height: 32px; font-size: 15px; top: -16px; }
  .he-hiw-arrow { font-size: 28px; }

  /* Games + Lotteries two-column row on desktop */
  .he-games-lotteries-inner { align-items: stretch; }
  #he-games {
    flex: 0 0 290px;
    padding: 22px 16px 28px;
  }
  .he-games-title { font-size: 11px; letter-spacing: 1px; }
  .he-games-header { margin-bottom: 16px; padding-bottom: 14px; }
  .he-games-grid { gap: 12px; }
  .he-game-card { height: 80px; }
  .he-game-card-bgimg { width: 55%; }
  .he-game-card-body { padding: 0 14px 0 16px; gap: 8px; }
  .he-game-card-title { font-size: 14px; }
  .he-game-card-sub   { font-size: 11px; }
  .he-game-btn { font-size: 11px; padding: 7px 12px; }
  #he-open-lotteries { padding: 22px 28px 28px; }
  .he-open-lotteries-title { font-size: 12px; }
  .he-open-lotteries-header { margin-bottom: 14px; }
  .he-open-lotteries-body { max-height: 380px; }
  .he-lotteries-scroll-wrap { max-height: 380px; }

  /* Winners */
  #he-winners { padding: 24px 60px 56px; }
  .he-winners-header { font-size: 20px; margin-bottom: 16px; }
  .he-winner-row { padding: 10px 0; }
  .he-winner-amount { font-size: 14px; }
  .he-winner-ball { width: 36px; height: 36px; }
}

/* ══════════════════════════════════════════════════════════════════
   GAME SCREEN - sb-skin design tokens + layout (identical to public2)
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bg-base:     #0d0f13;
  --bg-nav:      #13161d;
  --bg-panel:    #181c24;
  --bg-card:     #1e2330;
  --bg-card2:    #252b38;
  --bg-input:    #111318;
  --bg-hover:    #2a3040;
  --gold-hover:  #f5dc3a;
  --gold-dim:    rgba(232,201,16,0.15);
  --gold-border: rgba(232,201,16,0.35);
  --green:       #22c55e;
  --orange:      #f97316;
  --text:        #e8eaf0;
  --text2:       #8b92a5;
  --text3:       #545c70;
  --text-inv:    #0d0f13;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.12);
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius:      6px;
  --text-xs:     10px;
  --text-sm:     11px;
  --text-base:   12px;
  --text-md:     13px;
  --text-lg:     14px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px;
  --transition:  0.14s ease;
  --font-mono:   'Roboto Mono','Courier New',monospace;
}

#he-game-screen { display:none; flex-direction:column; background:var(--bg-base); padding-bottom:70px; }
#he-game-screen.active { display:flex; }

#sb-game-bar {
  display:flex; align-items:center; gap:var(--sp3);
  flex-wrap:wrap;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  padding:var(--sp2) var(--sp3);
}
.sb-game-bar-back {
  display:flex; align-items:center; gap:4px;
  font-size:var(--text-sm); font-weight:600; color:var(--text2);
  cursor:pointer; padding:4px 8px;
  border:1px solid var(--border); border-radius:var(--radius-xs);
}
.sb-game-bar-back:hover { color:var(--text); border-color:var(--border2); }
.sb-game-bar-sep { color:var(--text3); font-size:var(--text-xs); }
.sb-game-bar-name { font-size:var(--text-md); font-weight:700; color:var(--text); }
.sb-game-bar-draw {
  font-size:var(--text-xs); color:var(--text3);
  background:var(--bg-panel); padding:2px 7px; border-radius:var(--radius-xs);
  border:1px solid var(--border);
}
.sb-game-bar-timer {
  font-family:var(--font-mono); font-size:var(--text-md);
  font-weight:700; color:var(--orange);
  background:var(--bg-panel); padding:2px 8px;
  border-radius:var(--radius-xs); border:1px solid rgba(249,115,22,0.3);
  display:none;
}
@media (min-width:768px) {
  .sb-game-bar-timer { display:inline-block; }
}
.sb-game-bar-timer.urgent { color:#ef4444; border-color:rgba(239,68,68,0.3); }
.sb-game-bar-spacer { flex:1; min-width:var(--sp3); }
.sb-game-type-tabs { display:flex; gap:2px; flex-shrink:0; overflow-x:auto; }
.sb-gtype-tab {
  padding:6px 14px; font-size:var(--text-sm); font-weight:600;
  color:var(--text3); background:var(--bg-card);
  border:1px solid var(--border); cursor:pointer;
  transition:all var(--transition); white-space:nowrap;
  text-transform:uppercase; letter-spacing:0.5px; border-radius:var(--radius-xs);
}
.sb-gtype-tab:first-child { border-radius:var(--radius-xs) 0 0 var(--radius-xs); }
.sb-gtype-tab:last-child  { border-radius:0 var(--radius-xs) var(--radius-xs) 0; }
.sb-gtype-tab.active { background:var(--gold); color:#000; border-color:var(--gold); font-weight:900; box-shadow:0 0 12px rgba(232,201,16,0.45); }
.sb-gtype-tab:hover:not(.active) { background:var(--bg-hover); color:var(--text); }
.sb-gtype-tab--strong { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.3); color:#10b981; }
.sb-gtype-tab--strong.active { background:#10b981; color:#000; border-color:#10b981; box-shadow:0 0 12px rgba(16,185,129,0.5); }

/* Desktop-only: hidden on mobile */
.desktop-only { display:none; }
@media (min-width:768px) { .desktop-only { display:flex; } }
div.desktop-only { display:none; }
@media (min-width:768px) { div.desktop-only { display:block; } }

/* Strong number - golden strong balls row (below red grid) */
#strong-balls-grid-section { border-top:1px solid rgba(16,185,129,.2); }
#strong-strong-grid { justify-content:center; }
#strong-balls-grid-section .ball-wrap { width:42px; height:42px; flex-shrink:0; }
#strong-balls-grid-section .ball-img { width:42px!important; height:42px!important; opacity:.55; transition:opacity .15s,transform .15s; }
#strong-balls-grid-section .ball-img:hover { opacity:.85; transform:scale(1.1); }
#strong-balls-grid-section .ball-img.ball-selected { opacity:1; transform:scale(1.15); filter:drop-shadow(0 0 8px rgba(16,185,129,.8)); }
@media (min-width:768px) {
  #strong-balls-grid-section .ball-wrap { width:70px; height:70px; }
  #strong-balls-grid-section .ball-img { width:70px!important; height:70px!important; }
}

#sb-game-body { display:flex; flex:1; gap:0; min-height:0; direction:ltr; }
@media (min-width: 768px) {
  #sb-game-body { max-height: calc(93vh - 100px); overflow: hidden; }
  #sb-grid-panel { overflow-y: visible !important; }
  #sb-grid-panel { display: flex; flex-direction: column; overflow: hidden; }
  #ball-grid { grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(5, 1fr); flex: 1; gap: 4px; padding: 4px; min-height: 0; }
  #ball-grid .ball-wrap { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
  #ball-grid .ball-img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
}

#sb-grid-panel {
  flex:1; min-width:0;
  background:var(--bg-panel);
  border-right:1px solid var(--border);
  padding:var(--sp3);
  overflow-y:auto;
}
#sb-grid-panel .panel-title {
  font-size:var(--text-sm); font-weight:800;
  text-transform:uppercase; letter-spacing:1px;
  color:var(--text2); margin-bottom:var(--sp3);
  padding-bottom:var(--sp2); border-bottom:1px solid var(--border);
}
#sb-bet-panel {
  width:280px; flex-shrink:0;
  background:var(--bg-nav);
  display:flex; flex-direction:column;
  border-left:1px solid var(--border);
  overflow-y:visible;
}
.sb-bet-section { border-bottom:1px solid var(--border); padding:var(--sp3); direction:rtl; }
.sb-bet-section-title {
  font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  color:var(--text3); margin-bottom:var(--sp2);
}
.sb-mode-tabs { display:flex; gap:1px; margin-bottom:var(--sp3); }
.sb-mode-tab {
  flex:1; padding:5px 4px; text-align:center;
  font-size:var(--text-xs); font-weight:700;
  color:var(--text2); background:var(--bg-card);
  border:1px solid var(--border); cursor:pointer;
}
.sb-mode-tab:first-child { border-radius:var(--radius-xs) 0 0 var(--radius-xs); }
.sb-mode-tab:last-child  { border-radius:0 var(--radius-xs) var(--radius-xs) 0; }
.sb-mode-tab.active { background:var(--gold-dim); color:var(--gold); border-color:var(--gold-border); }
#tab-real.active { background:rgba(220,38,38,0.15); color:#f87171; border-color:rgba(220,38,38,0.4); }
#sb-bet-panel.real-money-mode { border:1.5px solid rgba(220,38,38,0.5); border-radius:var(--radius-sm); }
#sb-bet-panel.real-money-mode::before { content:'💸 מצב כסף אמיתי'; display:block; text-align:center; font-size:11px; font-weight:700; color:#f87171; background:rgba(220,38,38,0.12); padding:4px 0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; margin:-1px -1px 8px -1px; }
.sb-amount-row { display:flex; align-items:center; gap:var(--sp2); margin-bottom:var(--sp2); }
.sb-amount-label { font-size:var(--text-xs); color:var(--text2); white-space:nowrap; }
.sb-amount-input {
  flex:1; background:var(--bg-input);
  border:1px solid var(--border2); border-radius:var(--radius-xs);
  color:var(--text); font-size:var(--text-md); padding:5px 8px;
  text-align:left; font-weight:700; font-family:var(--font-mono);
}
.sb-amount-input:focus { outline:none; border-color:var(--gold); }
input[type=range] { width:100%; accent-color:var(--gold); cursor:pointer; height:3px; margin:4px 0; }
.sb-quick-btns { display:flex; gap:3px; flex-wrap:wrap; }
.sb-quick-btn {
  padding:3px 8px; font-size:var(--text-xs); font-weight:700;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xs); color:var(--text2); cursor:pointer;
}
.sb-quick-btn:hover { border-color:var(--gold); color:var(--gold); }
#must-match-table { width:100%; border-collapse:collapse; font-size:var(--text-xs); }
#must-match-table th { font-size:10px; color:var(--text3); text-align:right; padding:3px 5px; border-bottom:1px solid var(--border); text-transform:uppercase; }
#must-match-table td { padding:5px; border-bottom:1px solid var(--border); cursor:pointer; color:var(--text2); text-align:right; }
#must-match-table tr:hover td { background:var(--bg-hover); color:var(--text); }
#must-match-table tr.selected td { background:var(--gold-dim); color:var(--gold); }
#must-match-table td.mm-ratio { color:#22c55e; font-weight:700; }
#must-match-table .mm-radio { accent-color:var(--gold); }
#must-match-table tr.mm-blocked { cursor:not-allowed; opacity:.4; filter:grayscale(1); pointer-events:none; }
#must-match-table tr.mm-blocked td { color:var(--text3) !important; background:none !important; }
.sb-stats-row { display:flex; justify-content:space-between; font-size:var(--text-xs); color:var(--text2); margin:4px 0; }
.sb-stats-row span { font-weight:700; color:var(--text); }
.sb-stats-row .val-gold  { color:var(--gold); }
.sb-stats-row .val-green { color:#22c55e; }
.sb-jp-opt { display:flex; align-items:center; gap:var(--sp2); font-size:var(--text-xs); color:var(--text2); cursor:pointer; background:var(--gold-dim); border:1px solid var(--gold-border); border-radius:var(--radius-xs); padding:5px 8px; }
.sb-jp-opt input { accent-color:var(--gold); width:13px; height:13px; }
.sb-jp-opt .jp-v { color:var(--gold); font-weight:700; margin-right:auto; }
#btn-bet-now {
  width:100%; padding:12px;
  background:var(--gold); color:var(--text-inv);
  font-weight:800; font-size:var(--text-lg);
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  text-transform:uppercase; letter-spacing:1px;
}
#btn-bet-now:hover:not(:disabled) { background:var(--gold-hover); }
#btn-bet-now:disabled { background:var(--bg-card2); color:var(--text3); cursor:not-allowed; }
.sb-random-row { display:flex; align-items:center; gap:var(--sp2); }
.sb-btn-adj {
  width:24px; height:24px; border-radius:var(--radius-xs);
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text2); font-size:var(--text-md);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sb-btn-adj:hover { border-color:var(--gold); color:var(--gold); }
.sb-btn-random {
  flex:1; padding:4px 8px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xs); color:var(--text2); font-size:var(--text-xs);
  cursor:pointer; font-weight:600;
}
.sb-btn-random:hover { border-color:var(--gold); color:var(--gold); }
.sb-num-col-btn {
  padding:3px 10px; font-size:var(--text-xs); font-weight:700;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xs); color:var(--text2); cursor:pointer;
}
.sb-num-col-btn.active { background:var(--gold-dim); color:var(--gold); border-color:var(--gold-border); }
#sb-other-lotteries { background:var(--bg-nav); border-top:1px solid var(--border); padding:var(--sp3); padding-bottom:8px; margin-bottom:119px; }
.sb-other-title { font-size:var(--text-sm); font-weight:700; color:var(--text2); margin-bottom:var(--sp2); text-transform:uppercase; }
.sb-table-wrap { overflow-x:auto; }
.sb-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.sb-table thead th { font-size:var(--text-xs); color:var(--text3); text-align:right; padding:var(--sp2) var(--sp3); border-bottom:1px solid var(--border); text-transform:uppercase; }
.sb-table tbody td { padding:var(--sp2) var(--sp3); border-bottom:1px solid var(--border); color:var(--text2); }
.sb-table tbody tr:hover td { background:var(--bg-hover); }

/* Ball grid container */
#ball-grid {
  display: grid;
  width: 100%;
  grid-auto-rows: 1fr;
  gap: 4px;
  padding: 8px;
  box-sizing: border-box;
}

/* Ball styles (shared with balls.js) */
.ball-wrap { display:flex; align-items:center; justify-content:center; position:relative; }
.ball-img { width:100%; height:100%; object-fit:contain; cursor:pointer; display:block; transition:transform 0.13s ease,filter 0.13s ease; user-select:none; -webkit-user-drag:none; }
.ball-img:hover { transform:scale(1.10); }
.ball-img.ball-selected { transform:scale(1.15); filter:drop-shadow(0 0 10px rgba(255,210,0,0.95)) drop-shadow(0 0 4px rgba(255,255,100,0.7)) !important; }
.ball-img.ball-disabled { cursor:default; }
.ball-img.ball-unpickable { cursor:default; opacity:0.45; }
@keyframes ball-shake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-10deg)} 40%{transform:rotate(10deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(6deg)} }

/* Reverse curtain */
@keyframes curtain-breathe { 0%,100%{opacity:1} 50%{opacity:0.85} }
@keyframes curtain-open-left  { to{transform:translateX(-100%)} }
@keyframes curtain-open-right { to{transform:translateX(100%)} }
.rev-curtain { position:absolute; inset:5%; border-radius:50%; cursor:pointer; z-index:2; user-select:none; overflow:hidden; pointer-events:auto; }
.rev-curtain::before,.rev-curtain::after { content:''; position:absolute; top:0; bottom:0; width:50%; background:repeating-linear-gradient(90deg,rgba(0,0,0,0.28) 0px,rgba(0,0,0,0) 3px,rgba(255,255,255,0.07) 5px,rgba(0,0,0,0) 8px,rgba(0,0,0,0.28) 12px),radial-gradient(ellipse at 60% 30%,rgba(190,55,55,0.5) 0%,transparent 65%),linear-gradient(175deg,#7a0f0f 0%,#4e0909 40%,#380606 70%,#5a0c0c 100%); }
.rev-curtain::before { left:0; border-right:1.5px solid rgba(212,175,55,0.5); animation:curtain-breathe 3s ease-in-out infinite; }
.rev-curtain::after  { right:0; border-left:1.5px solid rgba(212,175,55,0.5); transform:scaleX(-1); animation:curtain-breathe 3s ease-in-out infinite 0.4s; }
.rev-curtain.rev-curtain-gone::before { animation:curtain-open-left 0.35s cubic-bezier(0.4,0,0.6,1) forwards; }
.rev-curtain.rev-curtain-gone::after  { animation:curtain-open-right 0.35s cubic-bezier(0.4,0,0.6,1) forwards; }
.rev-curtain.rev-curtain-gone { pointer-events:none; animation:none; }
.ball-wrap.rev-hit  .ball-img { filter:drop-shadow(0 0 14px rgba(255,210,0,1)) drop-shadow(0 0 6px rgba(255,240,100,0.9)) !important; }
.ball-wrap.rev-miss .ball-img { filter:saturate(0) brightness(0.55) !important; opacity:0.7; }

/* Confetti */
.conf-piece { position:fixed; top:-10px; pointer-events:none; z-index:9998; border-radius:2px; animation:conf-fall var(--dur) linear forwards; }
@keyframes conf-fall { 0%{transform:translateX(0) translateY(0) rotate(0deg);opacity:1} 100%{transform:translateX(var(--dx)) translateY(110vh) rotate(var(--rot));opacity:0} }

/* Discover: grid panel popup overlay */
#rev-payout-tbody tr td { color: var(--text2); }
#rev-payout-tbody tr td:last-child { color: var(--gold); }

/* ── Color pick buttons ──────────────────────────────────────────── */
#color-pick-box .color-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 6px;
}
@media (min-width: 768px) {
  #color-pick-box .color-buttons {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
  }
}
.color-pick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-align: right;
}
.color-pick-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border2);
  color: var(--text);
}
.color-pick-btn.selected,
.color-pick-btn.active {
  background: var(--gold-dim);
  border-color: var(--gold-border);
  color: var(--gold);
}
.color-pick-btn .ball-btn-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.color-pick-btn span {
  flex: 1;
  font-size: var(--text-md);
  font-weight: 700;
}
.color-pick-btn small {
  font-size: var(--text-xs);
  color: var(--text3);
  font-weight: 400;
}

#sb-grid-panel.rev-grid-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg-panel);
  overflow-y: auto;
  padding: var(--sp4);
  display: flex !important;
  flex-direction: column;
  animation: revGridIn 0.25s ease;
}
@keyframes revGridIn {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.rev-grid-close {
  align-self: flex-end;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text2);
  font-size: 13px; padding: 5px 12px; cursor: pointer;
  margin-bottom: var(--sp3);
}
.rev-grid-close:hover { color: var(--text); border-color: var(--border2); }

/* Discover popup: force 6 balls per row on mobile */
#sb-grid-panel.rev-grid-popup #ball-grid {
  grid-template-columns: repeat(6, 1fr) !important;
}

/* All games: 7 balls per row on mobile */
@media (max-width: 767px) {
  #ball-grid { grid-template-columns: repeat(7, 1fr) !important; }
}

/* Mobile: stack bet panel below grid */
@media (max-width: 767px) {
  #sb-game-body { flex-direction:column; }
  #sb-bet-panel { width:100%; border-left:none; border-top:1px solid var(--border); }
  #sb-grid-panel { border-right:none; direction:rtl; }
  .sb-gtype-tab { padding:5px 10px; font-size:9px; }
  .sb-game-type-tabs { direction:ltr; }
  .ball-wrap.rev-hit .ball-img { filter:drop-shadow(0 0 4px rgba(255,210,0,1)) drop-shadow(0 0 6px rgba(255,240,100,0.9)) !important; }
  .ball-wrap { overflow:visible; }
  .sb-random-row { margin-bottom: 10px; }
  .gtype-help-btn { width:24px; height:24px; font-size:11px; }
}

/* ── HOW TO PLAY - single help button in game bar ────────────── */
.gtype-help-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex-shrink:0;
  background:rgba(255,255,255,0.06); color:var(--text3);
  border:1px solid var(--border); border-radius:var(--radius-xs);
  font-size:13px; font-weight:900; cursor:pointer; padding:0;
  transition:background var(--transition), color var(--transition);
}
.gtype-help-btn:hover { background:rgba(255,255,255,0.18); color:var(--text); }

/* ── HOW TO PLAY - portal section ───────────────────────────── */
#he-howtoplay {
  padding: 32px 0 36px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(255,255,255,0.02) 100%);
  border-top: 1px solid var(--border);
  position: relative;
}
.htp2-track-wrap {
  position: relative;
}
@media (max-width: 767px) {
  .htp2-track-wrap::after {
    content: '‹';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to left, transparent, var(--bg) 75%);
    color: var(--text2);
    font-size: 30px;
    font-weight: 900;
    pointer-events: none;
    direction: ltr;
  }
}
.htp2-header {
  padding: 0 20px 20px;
  max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.htp2-subtitle {
  font-size: 13px;
  color: var(--text2);
}
.htp2-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 20px 16px;
  max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.htp2-track::-webkit-scrollbar { display: none; }
.htp2-card {
  flex: 0 0 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px 16px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}
.htp2-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--htp-bg, transparent);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.htp2-card:hover::before { opacity: 1; }
.htp2-card:hover {
  transform: translateY(-4px);
  border-color: var(--htp-clr, var(--gold));
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.htp2-card--strong { border-color: rgba(16,185,129,0.3); }
.htp2-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.htp2-emoji { font-size: 32px; line-height: 1; }
.htp2-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.htp2-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}
.htp2-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 12px;
  flex: 1;
}
.htp2-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.htp2-pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: .2px;
}
.htp2-btn {
  width: 100%;
  padding: 9px 0;
  border: 1px solid var(--htp-clr, var(--border));
  background: var(--htp-bg, rgba(255,255,255,0.05));
  color: var(--htp-clr, var(--gold));
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  position: relative;
  z-index: 1;
}
.htp2-btn:hover { opacity: 0.82; }
@media (max-width: 600px) {
  .htp2-track { padding: 4px 14px 16px; gap: 10px; }
  .htp2-card { flex: 0 0 170px; padding: 14px 13px 13px; }
  .htp2-emoji { font-size: 26px; }
  .htp2-name { font-size: 14px; }
}

/* ── HOW TO PLAY - modal ─────────────────────────────────────── */
/* Desktop: no scroller on the modal itself - it grows to fit its content.
   The backdrop scrolls instead as a fallback so nothing is ever clipped
   off-screen on short windows. Mobile: capped height with a themed thin
   gold scrollbar + fade, same pattern as .results-history-scroll. */
#modal-howtoplay.he-modal-backdrop {
  overflow-y: auto;
  padding: 24px 0;
}
.htp-modal { max-width:480px !important; }
@media (min-width:768px) {
  .htp-modal { max-height:none; overflow-y:visible; margin:auto; }
}
@media (max-width:767px) {
  .htp-modal {
    max-height:85vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--gold2) rgba(255,255,255,0.06);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .htp-modal::-webkit-scrollbar { width: 6px; }
  .htp-modal::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 3px; }
  .htp-modal::-webkit-scrollbar-thumb { background: var(--gold2); border-radius: 3px; }
  .htp-modal::-webkit-scrollbar-thumb:hover { background: var(--gold); }
}
.htp-modal-title {
  font-size:20px; font-weight:900; margin-bottom:20px; text-align:center;
}
.htp-steps { display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.htp-step {
  display:flex; align-items:flex-start; gap:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px; color:var(--text); line-height:1.5;
}
.htp-step-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
.htp-tip {
  background:rgba(245,197,24,0.08);
  border:1px solid rgba(245,197,24,0.25);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:13px; color:var(--text2); line-height:1.5;
  margin-bottom:20px;
}
.htp-close-btn {
  width:100%; padding:13px; border:none; border-radius:var(--radius-sm);
  background:var(--gold); color:#111; font-size:15px; font-weight:800;
  cursor:pointer; transition:opacity var(--transition);
}
.htp-close-btn:hover { opacity:0.88; }