/* homehub.css — All Home Hub styles (mobile + desktop, Classic + Bento). */

/* ─── AppBar (mobile) ─────────────────────────────────────────────────── */
.hh-appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center;
  padding: 12px 14px;
  background: rgba(7, 7, 12, 0.78);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-current);
}
.hh-appbar--compact { padding: 10px 14px; }
.hh-appbar-row {
  display: flex; align-items: center;
  gap: 10px; width: 100%; min-width: 0;
}
.hh-appbar-spacer { flex: 1 1 auto; }

/* avatar block */
.hh-avatar-btn {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font-family: inherit;
  min-width: 0;
  flex-shrink: 1;
  max-width: 60%;          /* never let greeting block crowd out the pills row */
  overflow: hidden;
}
.hh-avatar {
  position: relative; width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-2) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
.hh-avatar-glow {
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  z-index: -1;
  filter: blur(8px);
  opacity: 0.6;
}
.hh-avatar-initial {
  font-size: 16px; font-weight: 700; color: #fff;
  font-family: var(--font-display-current);
}
.hh-avatar-meta {
  display: flex; flex-direction: column;
  line-height: 1.15; min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
.hh-avatar-greet {
  font-size: 10px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-avatar-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-appbar--compact .hh-avatar { width: 32px; height: 32px; }
.hh-appbar--compact .hh-avatar-initial { font-size: 14px; }

/* RTL/LTR avatar side */
.hh-appbar--av-end .hh-appbar-row { flex-direction: row-reverse; }

/* pills row */
.hh-appbar-pills {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.hh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-size: 12px; font-weight: 600;
  font-family: var(--font-current);
  cursor: pointer;
  height: 30px;
  white-space: nowrap;
  transition: background 180ms var(--ease-out, ease), transform 180ms ease;
}
.hh-pill:hover { background: rgba(255,255,255,0.09); }
.hh-pill:active { transform: scale(0.96); }
.hh-pill svg { color: var(--text-secondary); flex-shrink: 0; }
.hh-pill--streak {
  border-color: rgba(255, 214, 10, 0.30);
  background: rgba(255, 214, 10, 0.10);
}
.hh-pill--streak svg { color: var(--warning); }
.hh-pill--streak span { color: var(--warning); }
.hh-pill--coin svg { color: var(--tier-gold); }
.hh-pill--xp {
  background: rgba(113, 99, 217, 0.14);
  border-color: rgba(113, 99, 217, 0.30);
}
.hh-pill-lvl-label {
  font-size: 9px; color: var(--text-tertiary);
  font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[lang="fa"] .hh-pill-lvl-label,
html[lang="ar"] .hh-pill-lvl-label { letter-spacing: 0; text-transform: none; font-size: 10px; }
.hh-pill-lvl-num {
  font-size: 13px; color: var(--accent-primary); font-weight: 700;
}
.hh-icon-btn {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
  flex-shrink: 0;
}
.hh-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.hh-icon-btn:active { transform: scale(0.94); }
.hh-notif-dot {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg-deep);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-notif-dot,
html[lang="ar"] .hh-notif-dot { font-family: inherit; font-size: 10px; }

/* ─── Desktop topbar ──────────────────────────────────────────────────── */
.hh-desk-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(7, 7, 12, 0.78);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-current);
}
.hh-desk-topbar-left {
  display: flex; align-items: center; gap: 24px;
}
.hh-desk-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700;
  color: var(--text-primary);
}
.hh-desk-logo-mark {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-2) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display-current); font-size: 17px;
  font-weight: 800;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.hh-desk-nav {
  display: flex; align-items: center; gap: 4px;
}
.hh-desk-nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: background 220ms var(--ease-out, ease),
              box-shadow 220ms ease,
              color 220ms ease;
  position: relative;
}
.hh-desk-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.hh-desk-nav-item.is-active {
  background:
    linear-gradient(180deg, rgba(113,99,217,0.34) 0%, rgba(113,99,217,0.10) 100%);
  color: var(--accent-primary);
  box-shadow:
    inset 0 0 0 1px rgba(113,99,217,0.45),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 6px 18px -6px rgba(113,99,217,0.55);
}
.hh-desk-nav-item.is-active svg {
  color: var(--accent-primary);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.hh-desk-nav-badge {
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-desk-nav-badge,
html[lang="ar"] .hh-desk-nav-badge { font-family: inherit; }
.hh-desk-topbar-right {
  display: flex; align-items: center; gap: 10px;
}
.hh-desk-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text-tertiary);
  font-size: 12px;
  font-family: var(--font-current);
  cursor: pointer;
  min-width: 200px;
}
.hh-desk-search > span:first-of-type { flex: 1 1 auto; text-align: start; }
.hh-desk-kbd {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hh-desk-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-2) 100%);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display-current); font-weight: 700; font-size: 15px;
  cursor: pointer;
}

/* ─── BottomNav · Floating Pill ─────────────────────────────────────────
   Detached rounded glass pill — content slides under it, hairline + sheen
   highlight on top edge for a "real glass" feel. Scroll-aware: `is-shrunk`
   collapses labels and tightens padding when the page is scrolled. */
.hh-bnav {
  position: sticky;
  bottom: 14px;
  z-index: 31;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 8px 14px calc(14px + env(safe-area-inset-bottom, 0));
  padding: 8px 6px;
  background:
    linear-gradient(180deg, rgba(28,28,42,0.62) 0%, rgba(12,12,22,0.78) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 26px;
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,0.65),
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset;
  isolation: isolate;
  font-family: var(--font-current);
  transition: padding 320ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              margin 320ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.hh-bnav.is-shrunk {
  padding: 5px 6px;
  bottom: 10px;
  margin: 6px 14px calc(10px + env(safe-area-inset-bottom, 0));
}
.hh-bnav-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 90% at 50% -20%,
      rgba(255,255,255,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 90% 120% at 50% 110%,
      rgba(113,99,217,0.12) 0%, transparent 60%);
  mix-blend-mode: screen;
  z-index: 0;
}
.hh-bnav-tab {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px;
  background: none; border: 0;
  border-radius: 20px;
  color: var(--text-tertiary);
  font-size: 10px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 220ms var(--ease-out, ease),
              box-shadow 220ms ease,
              color 220ms ease;
  min-width: 0;
}
.hh-bnav-tab:hover:not(.is-active) {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}
.hh-bnav-tab.is-active {
  color: var(--accent-primary);
  background:
    linear-gradient(180deg, rgba(113,99,217,0.34) 0%, rgba(113,99,217,0.10) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(113,99,217,0.45),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 6px 18px -6px rgba(113,99,217,0.55);
}
.hh-bnav-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition:
    transform 360ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    filter 220ms ease,
    color 220ms ease;
}
.hh-bnav-tab.is-active .hh-bnav-icon {
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.hh-bnav.is-shrunk .hh-bnav-icon { transform: translateY(2px) scale(1.06); }
.hh-bnav-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -8px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg-deep);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-bnav-badge,
html[lang="ar"] .hh-bnav-badge { font-family: inherit; font-size: 10px; }

/* ── Label collapse: smooth height + opacity + translate ──
   Explicit height (rather than max-height) actually animates;
   translateY adds a subtle slide so the icon "absorbs" the label. */
.hh-bnav-label {
  display: block;
  height: 14px;
  line-height: 14px;
  margin-top: 4px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  transition:
    height 360ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    margin-top 360ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 220ms ease,
    transform 360ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: height, opacity, transform;
}
.hh-bnav.is-shrunk .hh-bnav-label {
  height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .hh-bnav, .hh-bnav-icon, .hh-bnav-label { transition: none !important; }
}

/* ─── MatchHero ───────────────────────────────────────────────────────── */
.hh-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: #0c0e16;
  font-family: var(--font-current);
  isolation: isolate;
}
.hh-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hh-hero-bg-pitch {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 110% 80% at 50% 40%,
      rgba(34, 100, 60, 0.45) 0%,
      rgba(15, 50, 32, 0.30) 35%,
      rgba(6, 14, 12, 0.95) 75%);
}
.hh-hero-bg-pitch::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.0) 0,
      rgba(255,255,255,0.0) 36px,
      rgba(255,255,255,0.025) 36px,
      rgba(255,255,255,0.025) 72px);
  mix-blend-mode: overlay;
}
.hh-hero-bg-spotlight {
  position: absolute; left: 50%; top: 30%;
  width: 70%; aspect-ratio: 2/1;
  background: radial-gradient(ellipse, rgba(255,255,255,0.10) 0%, transparent 60%);
  transform: translateX(-50%);
  filter: blur(20px);
}
.hh-hero-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%);
}

/* LED billboard */
.hh-hero-led {
  position: relative;
  height: 28px;
  background: linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.20) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  z-index: 1;
}
.hh-hero-led-track {
  display: flex; align-items: center;
  height: 100%;
  gap: 18px;
  animation: hh-marquee 28s linear infinite;
  white-space: nowrap;
  padding-inline: 14px;
  width: max-content;
}
.hh-hero-led-item {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.65);
}
.hh-hero-led-eyebrow {
  color: rgba(255,255,255,0.45);
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-hero-led-eyebrow,
html[lang="ar"] .hh-hero-led-eyebrow { font-family: inherit; text-transform: none; letter-spacing: 0; }
.hh-hero-led-sep { color: rgba(255,255,255,0.20); }
.hh-hero-led-cta { color: rgba(255,255,255,0.80); }
.hh-hero-led-shine {
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 0%, transparent 40%,
    rgba(255,255,255,0.10) 50%,
    transparent 60%, transparent 100%);
  animation: hh-led-shine 4.5s linear infinite;
  pointer-events: none;
}
@keyframes hh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
html[dir="rtl"] .hh-hero-led-track { animation-direction: reverse; }
@keyframes hh-led-shine {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-hero-led-track, .hh-hero-led-shine { animation: none; }
}

/* Hero content */
.hh-hero-content {
  position: relative;
  z-index: 2;
  padding: 16px 20px 20px;
}
.hh-hero-league {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-hero-league,
html[lang="ar"] .hh-hero-league { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; }

.hh-hero-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.hh-hero-team {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0;
}
.hh-hero-crest {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 800;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.hh-hero-crest::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.hh-hero-team-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hh-hero-center {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 8px;
  min-width: 110px;
}
.hh-hero-vs {
  font-size: 10px; color: var(--text-tertiary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-hero-vs,
html[lang="ar"] .hh-hero-vs { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 11px; }
.hh-hero-countdown {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.hh-hero-countdown-label {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html[lang="fa"] .hh-hero-countdown-label,
html[lang="ar"] .hh-hero-countdown-label { letter-spacing: 0; text-transform: none; font-size: 10px; }
.hh-hero-date {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-secondary);
  margin-top: 6px;
  white-space: nowrap;
}
.hh-hero-date-sep { color: var(--text-tertiary); }

/* Hero action footer */
.hh-hero-action {
  display: flex; align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.hh-hero-action-left { flex: 1 1 auto; min-width: 0; }
.hh-hero-action-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}
.hh-hero-slots {
  display: flex; gap: 4px;
}
.hh-hero-slot {
  width: 18px; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.10);
  transition: background 220ms ease;
}
.hh-hero-slot.is-filled {
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-glow);
}
.hh-hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%);
  color: var(--text-primary);
  font-size: 13px; font-weight: 600;
  font-family: var(--font-current);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
  transition: transform 180ms ease;
}
.hh-hero-cta:hover { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%); }
.hh-hero-cta:active { transform: scale(0.97); }
html[dir="rtl"] .hh-hero-cta svg { transform: scaleX(-1); }

.hh-hero--dense .hh-hero-content { padding: 12px 14px 14px; }
.hh-hero--dense .hh-hero-crest { width: 46px; height: 46px; font-size: 12px; border-radius: 12px; }
.hh-hero--dense .hh-hero-countdown { font-size: 22px; }
.hh-hero--dense .hh-hero-teams { margin-bottom: 12px; }

/* ─── PredictionSlider ───────────────────────────────────────────────────── */
.hh-pred {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: #0c0e16;
  font-family: var(--font-current);
  isolation: isolate;
  padding-bottom: 12px;
}
.hh-pred-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hh-pred-bg-glow {
  position: absolute; inset: 0;
  background:
    /* Green pitch halo (top) — matches the coach card aura the user liked */
    radial-gradient(ellipse 95% 65% at 50% 10%,
      rgba(52, 211, 153, 0.22) 0%,
      rgba(16, 185, 129, 0.12) 28%,
      rgba(15, 50, 32, 0.06) 55%,
      transparent 75%),
    /* Cool atmospheric bloom from below */
    radial-gradient(ellipse 70% 45% at 50% 100%,
      rgba(34, 100, 60, 0.20) 0%,
      transparent 65%);
}
.hh-pred-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* LED billboard sponsor strip — reuses keyframes from old hero */
.hh-pred-led {
  position: relative;
  height: 26px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  z-index: 1;
}
.hh-pred-led-track {
  display: flex; align-items: center;
  height: 100%;
  gap: 18px;
  animation: hh-marquee 28s linear infinite;
  white-space: nowrap;
  padding-inline: 14px;
  width: max-content;
}
html[dir="rtl"] .hh-pred-led-track { animation-direction: reverse; }
.hh-pred-led-item {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.65);
}
.hh-pred-led-eyebrow {
  color: rgba(255,255,255,0.45);
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-pred-led-eyebrow,
html[lang="ar"] .hh-pred-led-eyebrow { font-family: inherit; text-transform: none; letter-spacing: 0; }
.hh-pred-led-sep { color: rgba(255,255,255,0.20); }
.hh-pred-led-cta { color: rgba(255,255,255,0.80); }
.hh-pred-led-shine {
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 0%, transparent 40%,
    rgba(255,255,255,0.10) 50%,
    transparent 60%, transparent 100%);
  animation: hh-led-shine 4.5s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hh-pred-led-track, .hh-pred-led-shine { animation: none; }
}

/* Header strip */
.hh-pred-head {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}
.hh-pred-head-titles { min-width: 0; flex: 1 1 auto; }
.hh-pred-head-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-bottom: 4px;
}
html[lang="fa"] .hh-pred-head-eyebrow,
html[lang="ar"] .hh-pred-head-eyebrow { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11px; }
.hh-pred-head-title {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display-current);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.hh-pred-head-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}
html[dir="rtl"] .hh-pred-head-meta { align-items: flex-start; }
.hh-pred-head-reward {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  color: var(--tier-gold);
}
.hh-pred-head-reward svg { color: var(--tier-gold); }
.hh-pred-head-lock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.hh-pred-head-lock-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text-secondary);
  font-weight: 600;
}
html[lang="fa"] .hh-pred-head-lock-value,
html[lang="ar"] .hh-pred-head-lock-value { font-family: inherit; }

/* Slider track — horizontal scroll snap; draggable on mouse */
.hh-pred-slider {
  position: relative; z-index: 2;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 16px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}
.hh-pred-slider::-webkit-scrollbar { display: none; }
.hh-pred-slider.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;  /* let JS drive scrollLeft without fighting */
  scroll-behavior: auto;
}
/* When dragging, swallow pointer events on inner buttons so a drag never
   activates the "پیش‌بینی کن" CTA at the end. */
.hh-pred-slider.is-dragging .hh-pred-card * { pointer-events: none; }

/* Pagination dots + all-matches link */
.hh-pred-pager {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px;
  margin-top: 4px;
}
.hh-pred-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.16);
  cursor: pointer;
  transition: background 220ms ease, width 220ms ease;
  padding: 0;
}
.hh-pred-dot.is-active {
  background: var(--accent-primary);
  width: 22px;
  border-radius: 999px;
  box-shadow: 0 0 8px var(--accent-glow);
}
.hh-pred-allmatches {
  display: inline-flex; align-items: center; gap: 4px;
  margin-inline-start: auto;
  background: none; border: 0;
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-current);
  padding: 4px 0;
}
.hh-pred-allmatches:hover { color: var(--text-primary); }
html[dir="rtl"] .hh-pred-allmatches svg { transform: scaleX(-1); }

/* ─── PredictionMatchCard ────────────────────────────────────────────── */
.hh-pred-card {
  /* Width is driven by --pred-cards-per-view (default 1). At 1 we leave
     ~32px peek for the next card; at 2+ we divide the visible track. */
  flex: 0 0 calc(
    (100% - 32px - 10px * (var(--pred-cards-per-view, 1) - 1))
    / var(--pred-cards-per-view, 1)
  );
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.01) 100%);
  position: relative;
  overflow: hidden;
}
/* In multi-card mode, dial card chrome down a notch so two fit comfortably */
.hh-pred--multi .hh-pred-card { padding: 12px; gap: 10px; }
.hh-pred--multi .hh-pred-card-crest { width: 54px; height: 54px; font-size: 13px; border-radius: 14px; }
.hh-pred--multi .hh-pred-card-time { font-size: 22px; }
.hh-pred--multi .hh-pred-card-countdown { font-size: 11px; }
.hh-pred-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  min-height: 18px;
}
.hh-pred-card-top-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; margin-inline-start: auto;
}
.hh-pred-card-league {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-pred-card-league,
html[lang="ar"] .hh-pred-card-league { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11px; }
.hh-pred-card-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.18) 0%, rgba(217, 119, 6, 0.10) 100%);
  border: 1px solid rgba(252, 211, 77, 0.30);
  color: var(--tier-gold);
  font-size: 10px; font-weight: 700;
  font-family: var(--font-display-current);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[lang="fa"] .hh-pred-card-tag,
html[lang="ar"] .hh-pred-card-tag { text-transform: none; letter-spacing: 0; font-size: 11px; }

.hh-pred-card-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.hh-pred-card-team {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0;
}
.hh-pred-card-crest {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
  overflow: hidden;
}
.hh-pred-card-crest::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.hh-pred-card-team-name {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hh-pred-card-center {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 6px;
  min-width: 96px;
}
.hh-pred-card-time {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1;
  letter-spacing: 0.02em;
}
html[lang="fa"] .hh-pred-card-time,
html[lang="ar"] .hh-pred-card-time { font-family: inherit; }
.hh-pred-card-vs {
  font-size: 9px; color: var(--text-tertiary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 4px;
}
html[lang="fa"] .hh-pred-card-vs,
html[lang="ar"] .hh-pred-card-vs { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 10px; }
.hh-pred-card-countdown {
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 2px;
}
html[lang="fa"] .hh-pred-card-countdown,
html[lang="ar"] .hh-pred-card-countdown { font-family: inherit; }
.hh-pred-card-date {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* Footer */
.hh-pred-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.hh-pred-card-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hh-pred-card-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
}
.hh-pred-card-chip--reward {
  background: rgba(252, 211, 77, 0.12);
  border-color: rgba(252, 211, 77, 0.25);
  color: var(--tier-gold);
}
.hh-pred-card-chip--reward svg { color: var(--tier-gold); }
.hh-pred-card-chip--count {
  background: rgba(113, 99, 217, 0.14);
  border-color: rgba(113, 99, 217, 0.28);
  color: var(--accent-primary);
}
.hh-pred-card-chip--count svg { color: var(--accent-primary); }
.hh-pred-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  /* Glass / translucent — matches the Lineup Submit + Coin-tile CTA family.
     Avoids a heavy purple disc that competed with the slider tag. */
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%);
  color: var(--text-primary);
  font-size: 12px; font-weight: 700;
  font-family: var(--font-current);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 6px 16px rgba(0,0,0,0.35);
  transition: transform 180ms ease, background 180ms ease;
}
.hh-pred-card-cta:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%);
}
.hh-pred-card-cta:active { transform: scale(0.97); }
html[dir="rtl"] .hh-pred-card-cta svg { transform: scaleX(-1); }

/* Dense variant — slightly tighter for mobile bento hero */
.hh-pred--dense .hh-pred-head { padding-top: 10px; padding-bottom: 8px; }
.hh-pred--dense .hh-pred-head-title { font-size: 14px; }
.hh-pred--dense .hh-pred-card-crest { width: 50px; height: 50px; font-size: 12px; border-radius: 12px; }
.hh-pred--dense .hh-pred-card-time { font-size: 20px; }

.hh-hero-eyebrow-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hh-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(113, 99, 217, 0.16);
  border: 1px solid rgba(113, 99, 217, 0.28);
  color: var(--accent-primary);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex-shrink: 0;
}
html[lang="fa"] .hh-hero-eyebrow,
html[lang="ar"] .hh-hero-eyebrow { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11px; }
.hh-hero-eyebrow-row .hh-hero-league {
  margin: 0;
  text-align: end;
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-current);
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Team side label (خانه / مهمان) under team name */
.hh-hero-team-side {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 2px;
}
html[lang="fa"] .hh-hero-team-side,
html[lang="ar"] .hh-hero-team-side { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 10px; }

/* Predict button row (1 / X / 2) */
.hh-hero-predict {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.hh-pred-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-current);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  overflow: hidden;
  isolation: isolate;
}
.hh-pred-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(255,255,255,0.06) 0%, transparent 60%);
  z-index: -1;
}
.hh-pred-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(255,255,255,0.18);
}
.hh-pred-btn:active { transform: scale(0.97); }
.hh-pred-btn-mark {
  font-size: 18px; font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-display-current);
  line-height: 1;
}
.hh-pred-btn--draw .hh-pred-btn-mark { color: var(--text-secondary); }
.hh-pred-btn-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.hh-pred-btn-payout {
  font-size: 11px; font-weight: 700;
  color: var(--tier-gold);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-pred-btn-payout,
html[lang="ar"] .hh-pred-btn-payout { font-family: inherit; }

/* Footer: total reward chip + "+N more matches" link */
.hh-hero-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255,255,255,0.06);
}
.hh-hero-reward {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--tier-gold);
  font-weight: 600;
}
.hh-hero-reward svg { color: var(--tier-gold); }
.hh-hero-more {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0;
  color: var(--text-secondary);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  font-family: var(--font-current);
  padding: 2px 0;
}
.hh-hero-more:hover { color: var(--text-primary); }
html[dir="rtl"] .hh-hero-more svg { transform: scaleX(-1); }

/* ─── SubmitStatusTile (stat-style, compact) ───────────────────────────── */
.hh-submit-tile {
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  font-family: var(--font-current);
  color: var(--text-primary);
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  text-align: start;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.hh-submit-tile:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255,255,255,0.12);
}
.hh-submit-tile:active { transform: scale(0.98); }
.hh-submit-tile.is-ready {
  border-color: rgba(52, 211, 153, 0.30);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.10) 0%, rgba(52, 211, 153, 0.02) 100%);
}
.hh-submit-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.hh-submit-tile-title-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
}
.hh-submit-tile-title-row svg { color: var(--accent-primary); }
.hh-submit-tile-head > svg { color: var(--text-tertiary); flex-shrink: 0; }
html[dir="rtl"] .hh-submit-tile-head > svg { transform: scaleX(-1); }
.hh-submit-tile-status {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.hh-submit-tile.is-ready .hh-submit-tile-status { color: var(--success); }
.hh-submit-tile-slots {
  display: flex; gap: 4px;
}
.hh-submit-tile-slot {
  flex: 1 1 0;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  transition: background 220ms ease, box-shadow 220ms ease;
}
.hh-submit-tile-slot.is-filled {
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-glow);
}
.hh-submit-tile.is-ready .hh-submit-tile-slot.is-filled {
  background: var(--success);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.45);
}
.hh-submit-tile-foot {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: auto;
  font-size: 10px;
  color: var(--text-tertiary);
}
.hh-submit-tile-foot svg { color: var(--text-tertiary); }
.hh-submit-tile-foot-label { color: var(--text-tertiary); }
.hh-submit-tile-foot-value {
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
}
html[lang="fa"] .hh-submit-tile-foot-value,
html[lang="ar"] .hh-submit-tile-foot-value { font-family: inherit; }

/* ─── CoinPackTile (stat-style, compact) ──────────────────────────────── */
.hh-coin-tile {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;     /* head pinned top, balance pinned bottom */
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(252, 211, 77, 0.22);
  background: linear-gradient(140deg,
    rgba(252, 211, 77, 0.10) 0%,
    rgba(217, 119, 6, 0.06) 50%,
    rgba(0,0,0,0.10) 100%);
  color: var(--text-primary);
  font-family: var(--font-current);
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  text-align: start;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease;
}
.hh-coin-tile:hover { border-color: rgba(252, 211, 77, 0.36); }
.hh-coin-tile:active { transform: scale(0.98); }
.hh-coin-tile-glow {
  position: absolute;
  top: -40px;
  inset-inline-end: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--tier-gold);
  opacity: 0.18;
  filter: blur(36px);
  pointer-events: none;
  z-index: -1;
}
.hh-coin-tile-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--tier-gold);
}
.hh-coin-tile-head > span { flex: 1 1 auto; }
.hh-coin-tile-head > svg:last-child { color: rgba(252, 211, 77, 0.55); flex-shrink: 0; }
html[dir="rtl"] .hh-coin-tile-head > svg:last-child { transform: scaleX(-1); }
.hh-coin-tile-balance { display: flex; flex-direction: column; gap: 0; }
.hh-coin-tile-balance-num {
  font-size: 26px; font-weight: 800;
  color: var(--tier-gold);
  font-family: var(--font-display-current);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hh-coin-tile-balance-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.hh-coin-tile-hint {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: auto;
  font-size: 10px;
  color: var(--text-secondary);
}
/* CoinPackTile — when used in the narrow 2-span slot the hint line wraps
   awkwardly; hide it there since the icon + label + balance already tell the
   story, and free-pack info still surfaces in the Shop screen. The hint is
   re-enabled when the tile is at 3-span (half-row) for better balance. */
.hh-bento-tile--coin .hh-coin-tile-balance-num { font-size: 24px; }
.hh-bento-tile--coin .hh-coin-tile-balance { margin-top: auto; }
.hh-bento-tile--coin .hh-coin-tile-balance-label { font-size: 10px; }

/* CoinPackTile · variant=hero (v1.5 Shop module) ─────────────────────────
   Full-width horizontal hero pill. Larger balance, inline buy-coins CTA on
   the inline-end side. Used at the top of the Shop screen. */
.hh-coin-tile--hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  cursor: default;
}
.hh-coin-tile--hero:hover { transform: none; border-color: rgba(252, 211, 77, 0.30); }
.hh-coin-tile-hero-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hh-coin-tile--hero .hh-coin-tile-head {
  font-size: 11px; font-weight: 600;
  color: var(--tier-gold);
}
.hh-coin-tile--hero .hh-coin-tile-balance {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
}
.hh-coin-tile--hero .hh-coin-tile-balance-num {
  font-size: 36px;
  line-height: 1;
}
.hh-coin-tile-hero-meta {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.hh-coin-tile-hero-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--text-tertiary);
}
.hh-coin-tile-hero-meta-item svg { color: var(--text-tertiary); }
.hh-coin-tile-hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(252, 211, 77, 0.32);
  background: linear-gradient(180deg, rgba(252,211,77,0.20) 0%, rgba(217,119,6,0.10) 100%);
  color: var(--tier-gold);
  font-family: var(--font-current);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: border-color 180ms ease, transform 120ms ease;
}
.hh-coin-tile-hero-cta:hover  { border-color: rgba(252, 211, 77, 0.56); }
.hh-coin-tile-hero-cta:active { transform: scale(0.98); }

/* ─── StatTile ────────────────────────────────────────────────────────── */
.hh-stat {
  position: relative;
  display: flex; align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-current);
  min-width: 0;
}
.hh-stat--glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
}
.hh-stat--accent {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--stat-accent) 14%, transparent) 0%,
                            color-mix(in oklab, var(--stat-accent) 4%, transparent) 100%);
  border-color: color-mix(in oklab, var(--stat-accent) 28%, transparent);
}
.hh-stat-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--stat-accent) 18%, transparent);
  color: var(--stat-accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hh-stat-body { flex: 1 1 auto; min-width: 0; }
.hh-stat-value {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 20px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.hh-stat-delta {
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px; border-radius: 999px;
}
.hh-stat-delta.is-up   { color: var(--success); background: rgba(52, 211, 153, 0.14); }
.hh-stat-delta.is-down { color: var(--danger);  background: rgba(251, 113, 133, 0.14); }
.hh-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.hh-stat-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.hh-stat-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.hh-stat-bar > span {
  display: block; height: 100%;
  background: var(--stat-accent);
  border-radius: 999px;
  box-shadow: 0 0 8px color-mix(in oklab, var(--stat-accent) 50%, transparent);
}

/* ─── QuickActionCard ─────────────────────────────────────────────────── */
.hh-qa {
  position: relative;
  display: flex; align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  text-align: start;
  cursor: pointer;
  font-family: var(--font-current);
  overflow: hidden;
  transition: transform 180ms ease, background 180ms ease;
  width: 100%;
}
.hh-qa:hover { background: rgba(255,255,255,0.07); }
.hh-qa:active { transform: scale(0.98); }
.hh-qa-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%,
    color-mix(in oklab, var(--qa-accent) 30%, transparent) 0%,
    transparent 50%);
  z-index: 0;
}
html[dir="rtl"] .hh-qa-bg {
  background: radial-gradient(circle at 20% 20%,
    color-mix(in oklab, var(--qa-accent) 30%, transparent) 0%,
    transparent 50%);
}
.hh-qa-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--qa-accent) 22%, transparent);
  color: var(--qa-accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  border: 1px solid color-mix(in oklab, var(--qa-accent) 35%, transparent);
}
.hh-qa-body { flex: 1 1 auto; min-width: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.hh-qa-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hh-qa-sub   { font-size: 10px; color: var(--text-tertiary); }
.hh-qa-arrow {
  color: var(--text-tertiary);
  z-index: 1;
  flex-shrink: 0;
}
html[dir="rtl"] .hh-qa-arrow svg { transform: scaleX(-1); }

/* ── Bento QA tile (used in 3-up Quick Actions row) ── */
.hh-qa-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
  padding: 12px 12px 11px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--qa-accent) 22%, transparent);
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--qa-accent) 16%, transparent) 0%,
    color-mix(in oklab, var(--qa-accent) 4%, transparent) 60%,
    rgba(255,255,255,0.01) 100%);
  color: var(--text-primary);
  text-align: start;
  cursor: pointer;
  font-family: var(--font-current);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
  width: 100%; height: 100%;
  min-height: 96px;
  isolation: isolate;
}
.hh-qa-tile:hover {
  border-color: color-mix(in oklab, var(--qa-accent) 40%, transparent);
}
.hh-qa-tile:active { transform: scale(0.97); }
.hh-qa-tile-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%,
    color-mix(in oklab, var(--qa-accent) 24%, transparent) 0%,
    transparent 60%);
  z-index: -1;
}
html[dir="rtl"] .hh-qa-tile-bg {
  background: radial-gradient(circle at 0% 0%,
    color-mix(in oklab, var(--qa-accent) 24%, transparent) 0%,
    transparent 60%);
}
.hh-qa-tile-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--qa-accent) 20%, transparent);
  color: var(--qa-accent);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklab, var(--qa-accent) 35%, transparent);
  flex-shrink: 0;
}
.hh-qa-tile-label {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.hh-qa-tile-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: auto;
  line-height: 1.3;
}

/* ─── FeaturedRail ────────────────────────────────────────────────────── */
.hh-rail {
  position: relative;
  /* Bleed past the parent padding so the rail can scroll edge-to-edge.
     The parent's left/right padding values (14px on mobile, 28px on desktop)
     are matched by the negative margins, then re-added as track padding. */
  margin-inline: -14px;
  padding-inline: 0;
  overflow: hidden;
}
.hh-rail-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 24px 14px 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
html[dir="rtl"] .hh-rail-track { direction: rtl; }
.hh-rail-track::-webkit-scrollbar { height: 6px; }
.hh-rail-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.hh-rail-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}
.hh-rail-card {
  position: relative;
}
.hh-rail-card-clip {
  display: inline-block;
}
.hh-rail-ribbons {
  /* Reuse MyCards' .mc-grid-card-ribbons (which positions to physical top-left
     via `left: 8px`), but raise z-index above the PlayerCard's chrome. */
  z-index: 5;
}
/* Bonus + Rare variants — MyCards only defines new + mission, so we extend it
   here in the SAME visual family (semi-glass pill with colored gradient + dark
   text for contrast). */
.mc-ribbon--bonus {
  background: linear-gradient(180deg, rgba(113, 99, 217, 0.92) 0%, rgba(83, 74, 183, 0.88) 100%);
  color: #F5F4F0;
  border: 1px solid rgba(255,255,255,0.20);
}
.mc-ribbon--rare {
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.92) 0%, rgba(96, 165, 250, 0.88) 100%);
  color: #07070C;
  border: 1px solid rgba(255,255,255,0.25);
}
.hh-rail-fallback {
  width: 200px; height: 310px;
  border: 1px dashed rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  font-size: 11px;
}

/* ─── GoldenMissionCard ───────────────────────────────────────────────── */
.hh-mission {
  position: relative;
  border-radius: 18px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(252, 211, 77, 0.20);
  background: rgba(20, 14, 4, 0.7);
  overflow: hidden;
  font-family: var(--font-current);
  isolation: isolate;
}
.hh-mission-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 100% 0%, rgba(252, 211, 77, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(217, 119, 6, 0.10) 0%, transparent 60%);
  z-index: 0;
}
html[dir="rtl"] .hh-mission-bg {
  background:
    radial-gradient(ellipse 100% 60% at 0% 0%, rgba(252, 211, 77, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(217, 119, 6, 0.10) 0%, transparent 60%);
}
.hh-mission > * { position: relative; z-index: 1; }
.hh-mission-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.hh-mission-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(252, 211, 77, 0.12);
  color: var(--tier-gold);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  border: 1px solid rgba(252, 211, 77, 0.25);
}
html[lang="fa"] .hh-mission-tag,
html[lang="ar"] .hh-mission-tag { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11px; }
.hh-mission-reward {
  font-size: 13px; font-weight: 700;
  color: var(--tier-gold);
}
.hh-mission-title {
  font-size: 17px; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  font-family: var(--font-display-current);
}
.hh-mission-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  line-height: 1.5;
}
.hh-mission-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.hh-mission-mcard {
  aspect-ratio: 3/4;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-family: var(--font-display-current);
}
.hh-mission-mcard--owned {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--mc-tier) 36%, transparent) 0%,
    color-mix(in oklab, var(--mc-tier) 12%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--mc-tier) 50%, transparent);
  color: var(--mc-tier);
}
.hh-mission-mcard--missing {
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.15);
  color: var(--text-tertiary);
}
.hh-mission-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.hh-mission-progress { flex: 1 1 auto; min-width: 0; }
.hh-mission-progress-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.hh-mission-progress-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--tier-gold) 0%, var(--warning-2) 100%);
  box-shadow: 0 0 12px rgba(252, 211, 77, 0.50);
}
.hh-mission-progress-text {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 5px;
}
.hh-mission-timer {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.hh-mission-timer svg { color: var(--tier-gold); }
.hh-mission-actions {
  display: flex; gap: 8px;
}
.hh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: var(--font-current);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 180ms ease, background 180ms ease;
  flex: 1 1 auto;
  min-width: 0;
}
.hh-btn:active { transform: scale(0.97); }
.hh-btn--primary {
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.16);
}
.hh-btn--primary:hover { background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 100%); }
.hh-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: rgba(255,255,255,0.10);
}
.hh-btn--ghost:hover { background: rgba(255,255,255,0.04); }
.hh-btn--lg { padding: 12px 22px; font-size: 14px; }

/* ─── DailyMissionRow ─────────────────────────────────────────────────── */
.hh-drow {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  font-family: var(--font-current);
  overflow: hidden;
}
.hh-drow--sponsored {
  border-color: color-mix(in oklab, var(--drow-accent) 30%, transparent);
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--drow-accent) 12%, transparent) 0%,
      rgba(255,255,255,0.025) 35%);
}
.hh-drow-spbar {
  position: absolute;
  inset-inline-start: 0;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--drow-accent);
  overflow: hidden;
}
.hh-drow-spbar-shine {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: hh-drow-shine 3s linear infinite;
}
@keyframes hh-drow-shine {
  0% { top: -30%; }
  100% { top: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-drow-spbar-shine { animation: none; }
}
.hh-drow-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.06);
}
.hh-drow--sponsored .hh-drow-icon {
  background: var(--drow-accent);
  color: #fff;
  border-color: color-mix(in oklab, var(--drow-accent) 60%, transparent);
}
.hh-drow-sp-mark {
  font-family: var(--font-display-current);
  font-size: 16px; font-weight: 800;
}
.hh-drow-body { min-width: 0; }
.hh-drow-titles { line-height: 1.2; }
.hh-drow-sp-tag {
  font-size: 9px;
  color: var(--drow-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-bottom: 3px;
}
html[lang="fa"] .hh-drow-sp-tag,
html[lang="ar"] .hh-drow-sp-tag { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 10px; }
.hh-drow-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-drow-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  margin-top: 7px;
  overflow: hidden;
}
.hh-drow-bar > span {
  display: block; height: 100%;
  background: var(--accent-primary);
  border-radius: 999px;
}
.hh-drow--sponsored .hh-drow-bar > span { background: var(--drow-accent); }
.hh-drow-end {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex-shrink: 0;
}
html[dir="rtl"] .hh-drow-end { align-items: flex-start; }
.hh-drow-progress {
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-drow-progress,
html[lang="ar"] .hh-drow-progress { font-family: inherit; }
.hh-drow-reward {
  font-size: 10px;
  color: var(--accent-primary);
}

/* ─── PackCallout ─────────────────────────────────────────────────────── */
.hh-pack {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(113, 99, 217, 0.25);
  background: rgba(20, 14, 38, 0.7);
  overflow: hidden;
  font-family: var(--font-current);
}
.hh-pack-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(113, 99, 217, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(252, 211, 77, 0.10) 0%, transparent 60%);
  z-index: 0;
}
.hh-pack > *:not(.hh-pack-bg) { z-index: 1; }
.hh-pack-mark {
  position: relative;
  width: 56px; height: 64px;
  flex-shrink: 0;
}
.hh-pack-spine {
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg,
    var(--accent-primary) 0%,
    var(--accent-primary-2) 60%,
    var(--accent-primary-3) 100%);
  box-shadow:
    0 8px 18px rgba(83, 74, 183, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}
.hh-pack-face {
  position: absolute; inset: 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.20);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
}
.hh-pack-shine {
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(110deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,0.30) 50%,
    transparent 62%, transparent 100%);
  animation: hh-pack-shine 4s linear infinite;
  pointer-events: none;
}
@keyframes hh-pack-shine {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .hh-pack-shine { animation: none; }
}
.hh-pack-body { min-width: 0; }
.hh-pack-tag {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent-primary);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-bottom: 3px;
}
html[lang="fa"] .hh-pack-tag,
html[lang="ar"] .hh-pack-tag { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11px; }
.hh-pack-sub {
  font-size: 12px; color: var(--text-secondary);
  margin-bottom: 6px;
}
.hh-pack-price { display: inline-flex; align-items: baseline; gap: 7px; }
.hh-pack-price-now {
  font-size: 14px; font-weight: 700;
  color: var(--tier-gold);
}
.hh-pack-price-was {
  font-size: 11px;
  color: var(--text-tertiary);
  text-decoration: line-through;
}
.hh-pack-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary);
  font-size: 11px; font-weight: 600;
  font-family: var(--font-current);
  cursor: pointer;
  flex-shrink: 0;
}
.hh-pack-cta:hover { background: rgba(255,255,255,0.16); }
html[dir="rtl"] .hh-pack-cta svg { transform: scaleX(-1); }
.hh-pack--compact { padding: 10px 12px; }
.hh-pack--compact .hh-pack-mark { width: 44px; height: 52px; }

/* ─── SectionHead ─────────────────────────────────────────────────────── */
.hh-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.hh-section-titles { min-width: 0; }
.hh-section-title {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display-current);
}
.hh-section-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.hh-section-action {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-current);
  padding: 4px 0;
  flex-shrink: 0;
}
.hh-section-action:hover { color: var(--text-primary); }
html[dir="rtl"] .hh-section-action svg { transform: scaleX(-1); }

/* ─── EmptyState ──────────────────────────────────────────────────────── */
.hh-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 24px 80px;
  font-family: var(--font-current);
  position: relative;
}
.hh-empty-art {
  position: relative;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.hh-empty-pack {
  width: 84px; height: 100px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-primary-2) 70%, var(--accent-primary-3) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 18px 40px rgba(83, 74, 183, 0.4);
  position: relative;
  z-index: 2;
}
.hh-empty-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.hh-empty-orb-a {
  width: 120px; height: 120px;
  background: var(--accent-primary);
  opacity: 0.35;
  top: -10px; left: -20px;
}
.hh-empty-orb-b {
  width: 100px; height: 100px;
  background: var(--tier-gold);
  opacity: 0.20;
  bottom: -10px; right: -20px;
}
.hh-empty-title {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  font-family: var(--font-display-current);
}
.hh-empty-body {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.6;
  max-width: 280px;
}
/* Added v1.3: optional secondary CTA in HHEmptyState (Prediction empty reuse). */
.hh-empty-ctas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
}
.hh-empty-ctas .hh-btn { flex: 0 0 auto; gap: 6px; }

/* ─── TeamCrest (canonical) ───────────────────────────────────────────────
 * Extracted in v1.3 from PRTeamCrest + PredictionMatchCard's inline crest.
 * Source of truth for all 3-letter brand-tinted team crests across pages.
 * (Design Log §14.1 row 6) */
.hh-crest {
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 8px 24px -10px rgba(0,0,0,0.6);
}
.hh-crest::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.hh-crest--featured { border-radius: 14px; }
.hh-crest-code {
  position: relative;
  z-index: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1;
}
html[lang="fa"] .hh-crest-code,
html[lang="ar"] .hh-crest-code {
  font-family: inherit; letter-spacing: 0.02em;
}
.hh-crest.is-dim { opacity: 0.55; filter: grayscale(0.4); }

/* ─── Sponsor wraps ───────────────────────────────────────────────────── */
.hh-sponsor-wrap { font-family: var(--font-current); }
.hh-sponsor-fallback {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  font-family: var(--font-current);
  text-align: center;
}
.hh-sponsor-eyebrow { font-size: 10px; color: var(--text-tertiary); margin-bottom: 6px; }
.hh-sponsor-name    { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hh-sponsor-tagline { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* ─── SponsorMiniGrid ─────────────────────────────────────────────────────
   Small ad-slot grid for the desktop bento side column: a list of sponsor
   tiles with brand mark + tagline + accent-colored hairline border. Each
   tile uses a CSS var (--sp-accent) for per-sponsor tinting. */
.hh-sponsor-grid {
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    linear-gradient(180deg, rgba(20,20,30,0.50) 0%, rgba(12,12,22,0.65) 100%);
  font-family: var(--font-current);
  flex: 1 1 auto;
}
.hh-sponsor-grid-head {
  display: flex; align-items: center; justify-content: space-between;
}
.hh-sponsor-grid-eyebrow {
  font-size: 10px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[lang="fa"] .hh-sponsor-grid-eyebrow,
html[lang="ar"] .hh-sponsor-grid-eyebrow {
  font-family: inherit; text-transform: none; letter-spacing: 0;
  font-size: 11px;
}
.hh-sponsor-grid-track {
  display: grid; gap: 8px;
  grid-template-columns: 1fr;
}
.hh-sponsor-grid--cols-2 .hh-sponsor-grid-track { grid-template-columns: 1fr 1fr; }
.hh-sponsor-grid--cols-3 .hh-sponsor-grid-track { grid-template-columns: repeat(3, 1fr); }

.hh-sponsor-mini {
  --sp-accent: rgba(255,255,255,0.18);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--sp-accent) 14%, transparent) 0%,
      rgba(255,255,255,0.01) 100%);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  text-align: start;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
  position: relative;
  overflow: hidden;
}
.hh-sponsor-mini::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 10%; bottom: 10%;
  width: 2px;
  background: var(--sp-accent);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px color-mix(in oklab, var(--sp-accent) 40%, transparent);
}
html[dir="rtl"] .hh-sponsor-mini::before {
  border-radius: 2px 0 0 2px;
}
.hh-sponsor-mini:hover {
  border-color: color-mix(in oklab, var(--sp-accent) 50%, rgba(255,255,255,0.08));
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--sp-accent) 22%, transparent) 0%,
      rgba(255,255,255,0.02) 100%);
}
.hh-sponsor-mini:active { transform: scale(0.985); }
.hh-sponsor-mini-mark {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--sp-accent) 80%, #000) 0%,
      color-mix(in oklab, var(--sp-accent) 45%, #000) 100%);
  color: #fff;
  font-family: var(--font-display-current);
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--sp-accent) 55%, transparent);
}
.hh-sponsor-mini-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.hh-sponsor-mini-brand {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-sponsor-mini-tagline {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-sponsor-mini svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
html[dir="rtl"] .hh-sponsor-mini svg { transform: scaleX(-1); }