/* ============================================================
   home.css — SnackNap homepage shell (Variant C "Hybrid Magazine")
   Ported from the approved mockup: _preview-9k3xq7/variant-c.html
   Contains ONLY the homepage-specific snk-home-* shell rules plus
   the search-result typeahead styles and the body font.
   Shared primitives (.snk-tile, .snk-evt*, .snk-card*, badges,
   leaderboard rows, type colors) live in snacknap-ui.css — do NOT
   duplicate them here.
   ============================================================ */

body{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* ---- design tokens (homepage-scoped; centralizes existing pixels) ---- */
.snk-home{
  --snk-blue:#3a5a9c;        /* primary */
  --snk-tg:#229ED9;          /* telegram brand blue */
  --snk-r-card:18px;         /* card/hero radius */
  --snk-r-tile:16px;
  --snk-r-pill:999px;
  --snk-sh-1:0 1px 2px rgba(16,24,40,.05);
  --snk-sh-2:0 8px 22px rgba(16,24,40,.10);
  --snk-sh-3:0 14px 34px rgba(16,24,40,.16);
}

/* ---- default horizontal-scroll model (reusable rail utility) ----
   Apply `.snk-xscroll` to any container that should become a clean,
   swipeable horizontal rail when its content overflows. Gives momentum
   scrolling, scroll-snap, a thin subtle scrollbar and edge-fade hints.
   Direct children snap to the start. Harmless on desktop when content
   fits; the per-block media queries decide WHEN it goes horizontal. */
.snk-xscroll{
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
  overscroll-behavior-x:contain;
}
.snk-xscroll > *{scroll-snap-align:start;}
.snk-xscroll::-webkit-scrollbar{height:6px;}
.snk-xscroll::-webkit-scrollbar-track{background:transparent;}
.snk-xscroll::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:99px;}
.snk-xscroll::-webkit-scrollbar-thumb:hover{background:#b6bcc7;}
/* subtle left/right fade so it reads as scrollable on touch */
@media(max-width:991px){
  .snk-xscroll.is-railed{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
}

/* ---- generic section header ---- */
.snk-home-sechead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:2.25rem 0 1rem;}
.snk-home-sechead-l{display:flex;align-items:center;gap:.7rem;}
.snk-home-sechead-ic{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;
  background:var(--accent,#3a5a9c);box-shadow:0 4px 12px color-mix(in srgb,var(--accent,#3a5a9c) 32%,transparent);
}
.snk-home-sechead-ic .lucide{width:18px;height:18px;}
.snk-home-sechead h2{margin:0;font-size:1.32rem;font-weight:700;letter-spacing:-.02em;color:#101828;}
.snk-home-sechead-sub{font-size:.82rem;color:#667085;margin-top:1px;}
.snk-home-viewall{
  display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;font-weight:600;
  color:var(--accent,#3a5a9c);text-decoration:none;white-space:nowrap;
}
.snk-home-viewall .lucide{width:15px;height:15px;}
.snk-home-viewall:hover{text-decoration:underline;}

/* ---- HERO ---- */
.snk-home-hero{
  display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:1.1rem;
}
.snk-home-herocard{
  background:#fff;border:1px solid #eaecf0;border-radius:var(--snk-r-card);overflow:hidden;
  box-shadow:var(--snk-sh-1);position:relative;
  display:flex;flex-direction:column;
}
.snk-home-herocard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--accent,#3a5a9c);z-index:2;}

/* Coming up rail */
.snk-home-railhead{
  padding:1.05rem 1.15rem .65rem;
}
.snk-home-eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--accent,#3a5a9c);
}
.snk-home-eyebrow .lucide{width:14px;height:14px;}
.snk-home-railhead h3{margin:.3rem 0 0;font-size:1.12rem;font-weight:700;letter-spacing:-.01em;}
.snk-home-rail{display:flex;flex-direction:column;padding:0 .55rem .65rem;}
.snk-home-railrow{
  display:flex;align-items:center;gap:.8rem;padding:.7rem .6rem;border-radius:12px;
  text-decoration:none;transition:background .15s ease;
}
.snk-home-railrow:hover{background:#f6f8fb;}
.snk-home-railrow + .snk-home-railrow{border-top:1px solid #f2f4f7;border-radius:0;}
.snk-home-railrow:hover{border-radius:12px;}
.snk-home-railic{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--rc,#3a5a9c) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--rc,#3a5a9c) 22%,#fff);
  overflow:hidden;
}
.snk-home-railic img{width:34px;height:34px;object-fit:contain;}
.snk-home-railic .lucide{width:20px;height:20px;color:var(--rc,#3a5a9c);}
.snk-home-railmid{flex:1;min-width:0;}
.snk-home-railtype{font-size:.88rem;font-weight:700;color:#101828;line-height:1.2;}
.snk-home-raildate{font-size:.74rem;color:#667085;margin-top:1px;}
.snk-home-railcd{
  flex:0 0 auto;text-align:right;font-size:.72rem;color:#98a2b3;font-weight:500;
}
.snk-home-railcd strong{display:block;margin-top:1px;font-size:.84rem;color:var(--rc,#3a5a9c);font-weight:700;font-variant-numeric:tabular-nums;}
.snk-home-railcd--live{display:inline-flex;align-items:center;gap:.3rem;color:#16a34a;font-weight:700;font-size:.8rem;}
.snk-home-railcd--live .snk-home-now-dot{width:7px;height:7px;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.16);}

/* featured event */
.snk-home-feat{
  position:relative;border-radius:var(--snk-r-card);overflow:hidden;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;
  border:1px solid #eaecf0;box-shadow:var(--snk-sh-1);
}
.snk-home-feat::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(10,16,34,.86) 0%,rgba(10,16,34,.45) 48%,rgba(10,16,34,.18) 100%);}
.snk-home-feat::after{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--accent,#3a5a9c);z-index:3;}
.snk-home-feat-inner{position:relative;z-index:2;padding:1.6rem 1.7rem;color:#fff;}
.snk-home-feat-badges{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem;flex-wrap:wrap;}
.snk-home-feat-type{
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;
  background:var(--accent,#3a5a9c);border-radius:999px;padding:.32em .8em;box-shadow:0 4px 12px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.28);
}
.snk-home-livepill{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  color:#fff;background:#e23b3b;border-radius:999px;padding:.32em .75em;box-shadow:0 4px 12px rgba(226,59,59,.4);
}
.snk-home-livepill .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:snkLivePulse 1.4s ease-in-out infinite;}
.snk-home-feat-title{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:0 0 .55rem;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.snk-home-feat-meta{display:flex;align-items:center;gap:1.1rem;font-size:.86rem;color:rgba(255,255,255,.88);margin-bottom:1.1rem;flex-wrap:wrap;}
.snk-home-feat-meta span{display:inline-flex;align-items:center;gap:.4rem;}
.snk-home-feat-meta .lucide{width:16px;height:16px;opacity:.9;}
.snk-home-feat-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.snk-home-cdpill{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.45rem .9rem;
}
.snk-home-cdpill .lucide{width:15px;height:15px;}
.snk-home-cdpill strong{font-weight:700;font-variant-numeric:tabular-nums;}
.snk-evt-cd .countdown{font-variant-numeric:tabular-nums;}
.snk-home-btn{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:700;
  color:#101828;background:#fff;border:none;border-radius:999px;padding:.55rem 1.2rem;text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.22);transition:transform .15s ease,box-shadow .15s ease;
}
.snk-home-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28);color:#101828;}
.snk-home-btn .lucide{width:16px;height:16px;}

/* ---- intro + search ---- */
.snk-home-introrow{
  margin-top:1.4rem;background:#fff;border:1px solid #eaecf0;border-radius:var(--snk-r-card);
  box-shadow:var(--snk-sh-1);padding:1.25rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.snk-home-introtext{max-width:430px;}
.snk-home-introtext h1{font-size:clamp(1.4rem,2.6vw,1.75rem);font-weight:700;letter-spacing:-.02em;margin:0 0 .25rem;color:#101828;}
.snk-home-introtext p{font-size:.88rem;color:#667085;margin:0;line-height:1.5;}
.snk-home-searchwrap{display:flex;align-items:center;gap:.6rem;flex:1;min-width:300px;max-width:560px;position:relative;}
.snk-home-search{
  position:relative;
  flex:1;display:flex;align-items:center;gap:.6rem;background:#f6f8fb;border:1px solid #eaecf0;
  border-radius:999px;padding:.6rem 1.1rem;transition:border-color .15s ease,box-shadow .15s ease;
}
.snk-home-search:focus-within{border-color:#3a5a9c;box-shadow:0 0 0 3px rgba(58,90,156,.12);background:#fff;}
.snk-home-search .lucide{width:18px;height:18px;color:#98a2b3;flex:0 0 auto;}
.snk-home-search input{border:none;background:transparent;outline:none;flex:1;font-family:inherit;font-size:.92rem;color:#101828;}
.snk-home-search input::placeholder{color:#98a2b3;}
.snk-home-tg{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:700;color:#fff;
  background:var(--snk-tg);border:none;border-radius:999px;padding:.62rem 1.15rem;text-decoration:none;white-space:nowrap;
  box-shadow:0 4px 12px rgba(34,158,217,.32);transition:transform .15s ease;
}
.snk-home-tg:hover{transform:translateY(-2px);color:#fff;}
.snk-home-tg .lucide{width:16px;height:16px;}

/* ---- search results (typeahead dropdown rendered by home.js) ---- */
#searchResult{
  position:absolute;z-index:1050;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid #eaecf0;border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.16);overflow:auto;max-height:320px;
}
#searchResult:empty{display:none;}
.snk-home-sresult{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .9rem;
  text-decoration:none;color:#101828;transition:background .12s ease;
}
.snk-home-sresult + .snk-home-sresult{border-top:1px solid #f2f4f7;}
.snk-home-sresult:hover,.snk-home-sresult.is-active{background:#f6f8fb;color:#101828;}
.snk-home-sresult img{width:34px;height:34px;object-fit:contain;flex:0 0 auto;}
.snk-home-sresult-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.snk-home-sresult-name{min-width:0;font-size:.9rem;font-weight:600;color:#344054;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.snk-home-sresult-sub{min-width:0;font-size:.72rem;font-weight:500;color:#98a2b3;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.snk-home-sresult-num{flex:0 0 auto;font-size:.76rem;font-weight:700;color:#98a2b3;white-space:nowrap;}

/* ---- "right now" status strip ---- */
.snk-home-now-strip{
  margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;
}
.snk-home-now-item{
  position:relative;display:flex;align-items:center;gap:.7rem;min-width:0;
  background:#fff;border:1px solid #eaecf0;border-radius:14px;padding:.7rem .85rem;
  box-shadow:var(--snk-sh-1);text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease;
}
a.snk-home-now-item:hover{transform:translateY(-2px);box-shadow:var(--snk-sh-2);color:inherit;}
.snk-home-now-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#3a5a9c);
}
.snk-home-now-ic{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  color:var(--accent,#3a5a9c);
  background:color-mix(in srgb,var(--accent,#3a5a9c) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--accent,#3a5a9c) 22%,#fff);
}
.snk-home-now-ic .lucide{width:17px;height:17px;}
.snk-home-now-body{display:flex;flex-direction:column;gap:1px;min-width:0;}
.snk-home-now-label{
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:color-mix(in srgb,var(--accent,#3a5a9c) 70%,#667085);
}
.snk-home-now-value{
  display:flex;align-items:center;gap:.4rem;min-width:0;
  font-size:.86rem;font-weight:700;color:#101828;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.snk-home-now-value .countdown{font-weight:700;color:var(--accent,#3a5a9c);font-variant-numeric:tabular-nums;font-size:.82rem;}
.snk-home-now-muted{color:#98a2b3;font-weight:600;}
.snk-home-now-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#e23b3b;
  box-shadow:0 0 0 3px rgba(226,59,59,.18);animation:snkLivePulse 1.4s ease-in-out infinite;
}
.snk-home-now-tier{
  flex:0 0 auto;font-size:.66rem;font-weight:800;color:var(--accent,#e0951a);
  background:color-mix(in srgb,var(--accent,#e0951a) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--accent,#e0951a) 26%,#fff);
  border-radius:999px;padding:.12em .5em;letter-spacing:.02em;
}

/* ---- quiet zone divider (subtle hairline between major zones) ---- */
.snk-home-zonerule{
  height:1px;border:0;margin:2.4rem 0 0;
  background:linear-gradient(90deg,transparent,#e4e7ec 18%,#e4e7ec 82%,transparent);
}

/* ---- battles zone (Raid Bosses + Max Battles, 2-up, equal height) ---- */
.snk-home-battles{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:stretch;margin-top:2.25rem;
}
/* each battle card fills the full row height; the tile grid grows to absorb the
   slack so both cards stay flush at the bottom regardless of minor count diffs */
.snk-home-battles > .snk-card{height:100%;display:flex;flex-direction:column;}
.snk-home-battles > .snk-card > .snk-home-tilegrid{flex:1 1 auto;align-content:start;}

/* ---- live-stats zone (balanced 2-col grid) ---- */
.snk-home-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start;margin-top:1.4rem;
}

/* card head extras (reuse .snk-card) */
.snk-home-cardhead{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;
  border-bottom:1px solid #f2f4f7;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#3a5a9c) 9%,#fff),#fff);
}
.snk-home-cardic{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  background:var(--accent,#3a5a9c);
}
.snk-home-cardic .lucide{width:16px;height:16px;}
.snk-home-cardhead h3{margin:0;font-size:1.04rem;font-weight:700;letter-spacing:-.01em;flex:1;}

/* small count pill (section + card heads) */
.snk-home-count{
  flex:0 0 auto;font-size:.7rem;font-weight:800;line-height:1;color:var(--accent,#3a5a9c);
  background:color-mix(in srgb,var(--accent,#3a5a9c) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--accent,#3a5a9c) 26%,#fff);
  border-radius:999px;padding:.3em .62em;letter-spacing:.01em;
}
.snk-home-sechead .snk-home-count{margin-left:.1rem;}

/* rich card variant — echoes the /raids /max-battles .to-card look:
   left accent bar, accent-tinted gradient header, larger tier icon,
   tinted accent count pill. (Used on Raid Bosses + Max Battles cards.) */
.snk-home-card--rich{position:relative;overflow:hidden;}
.snk-home-card--rich .snk-home-cardhead{
  position:relative;padding-left:1.35rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#3a5a9c) 10%,#fff),#fff);
}
.snk-home-card--rich .snk-home-cardhead::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent,#3a5a9c);
}
.snk-home-card--rich .snk-home-cardic{
  width:34px;height:34px;border-radius:10px;
  box-shadow:0 2px 6px color-mix(in srgb,var(--accent,#3a5a9c) 32%,transparent);
}
.snk-home-card--rich .snk-home-cardic .lucide{width:18px;height:18px;}
.snk-home-card--rich .snk-home-count{
  font-weight:800;color:var(--accent,#3a5a9c);
  background:color-mix(in srgb,var(--accent,#3a5a9c) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--accent,#3a5a9c) 26%,#fff);
  border-radius:999px;padding:.3em .62em;
}

/* raid tier icon badge on tiles */
.snk-home-tieric{
  position:absolute;top:5px;left:5px;z-index:4;width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;background:#fff;
  box-shadow:0 1px 4px rgba(16,24,40,.18);border:1px solid #f2f4f7;
}
.snk-home-tieric img{width:16px;height:16px;object-fit:contain;display:block;}

/* homepage-only: flatten the type-tinted radial-gradient card box behind the
   sprite (mirrors the flat /raids look) without touching shared snacknap-ui.css */
.snk-home .snk-tile .card.pkmn-list-img{background:transparent!important;}
/* homepage-only: shiny sparkle as a crisp TOP-RIGHT corner badge.
   Tier icon is top-LEFT, so the two never overlap. White circular backing for
   contrast; sits above the sprite. */
.snk-home .snk-tile .pkmn-list-img .shiny{
  position:absolute;top:5px!important;right:5px!important;left:auto!important;
  float:none!important;z-index:4;
  width:16px;height:16px;padding:2px;border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 3px rgba(16,24,40,.25);
  object-fit:contain;box-sizing:border-box;
}

/* tile grid — fluid auto-fit so 6 tiles fill the row without an orphan column */
.snk-home-tilegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:.6rem;padding:.85rem 1.1rem 1.1rem;}
.snk-home-tilegrid-5{grid-template-columns:repeat(auto-fit,minmax(94px,1fr));}
/* Battles tiles: clean divisor-of-6 layout so the ~6 tiles never leave an orphan
   (3×2 on desktop, 6×1 on tablet, 3×2 on phone). */
.snk-home-battles .snk-home-tilegrid{grid-template-columns:repeat(3,1fr);}
/* Happening Now: 3-up on desktop so 6 live events read as a clean 3×2. */
.snk-home .snk-evt-grid{grid-template-columns:repeat(3,1fr);}

/* Dynamax / Gigantamax glow (pkmnSprite wraps the sprite in .glow-image) */
.snk-tile .glow-image{position:relative;display:inline-block;}
.snk-tile .glow-image::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(226,59,59,.28),rgba(226,59,59,0) 70%);z-index:0;}
.snk-tile .glow-image img{position:relative;z-index:1;}

/* live-stats dense widgets */
.snk-home-stats .snk-home-cardhead{padding:.7rem .95rem;}
.snk-home-stats .snk-home-cardic{width:26px;height:26px;border-radius:8px;}
.snk-home-stats .snk-home-cardic .lucide{width:14px;height:14px;}
.snk-home-stats .snk-home-cardhead h3{font-size:.94rem;}
.snk-home-sidebody{padding:.65rem .95rem .9rem;}

/* research rows */
.snk-home-task{display:flex;align-items:center;gap:.7rem;padding:.4rem 0;}
.snk-home-task + .snk-home-task{border-top:1px solid #f2f4f7;}
.snk-home-task:hover{background:#f6f8fb;border-radius:8px;}
.snk-home-task-txt{flex:1;font-size:.82rem;color:#344054;font-weight:500;line-height:1.3;}
.snk-home-rewardchip{
  flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:.45rem;
  background:#f6f8fb;border:1px solid #eaecf0;border-radius:10px;padding:.28rem .5rem .28rem .35rem;
  text-decoration:none;color:inherit;
}
.snk-home-rewardchip img{width:28px;height:28px;object-fit:contain;flex:0 0 auto;}
.snk-home-rewardchip-meta{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;}
.snk-home-rewardchip-name{font-size:.62rem;font-weight:700;color:#667085;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;}
.snk-home-rewardchip-cp{font-size:.58rem;font-weight:600;color:#98a2b3;letter-spacing:.01em;line-height:1.2;}

/* rocket lineups */
.snk-home-rocket{display:flex;align-items:center;gap:.65rem;padding:.5rem 0;}
.snk-home-rocket + .snk-home-rocket{border-top:1px solid #f2f4f7;}
.snk-home-rocket-boss{flex:0 0 72px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:700;color:#101828;}
.snk-home-rocket-boss small{display:block;font-size:.62rem;font-weight:500;color:#98a2b3;text-transform:uppercase;letter-spacing:.04em;}
.snk-home-rocket-team{display:flex;gap:.3rem;flex:1;}
.snk-home-shadowsprite{
  width:38px;height:38px;border-radius:9px;background:#f4eefb;border:1px solid #ecdcfb;
  display:grid;place-items:center;overflow:hidden;position:relative;
}
.snk-home-shadowsprite img{width:32px;height:32px;object-fit:contain;filter:brightness(.86) saturate(1.1);}

/* leaderboard */
.snk-home-lb{display:flex;flex-direction:column;}
.snk-home-lbrow{display:flex;align-items:center;gap:.6rem;padding:.42rem 0;text-decoration:none;color:inherit;}
.snk-home-lbrow + .snk-home-lbrow{border-top:1px solid #f2f4f7;}
.snk-home-lbrow:hover{background:#f6f8fb;border-radius:8px;}
.snk-home-lbrank{
  flex:0 0 20px;text-align:center;font-size:.72rem;font-weight:800;color:#98a2b3;
}
.snk-home-lbrow:nth-child(1) .snk-home-lbrank{color:var(--accent,#5b82d6);}
.snk-home-lbsprite{
  width:32px;height:32px;flex:0 0 auto;border-radius:8px;background:#f6f8fb;border:1px solid #eef0f3;
  display:grid;place-items:center;overflow:hidden;
}
.snk-home-lbsprite img{width:28px;height:28px;object-fit:contain;}
.snk-home-lbname{flex:1;min-width:0;font-size:.82rem;font-weight:600;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.snk-home-lbval{margin-left:auto;flex:0 0 auto;text-align:right;font-size:.74rem;font-weight:700;color:#667085;white-space:nowrap;font-variant-numeric:tabular-nums;}
.snk-home-lbval em{font-style:normal;color:#98a2b3;font-weight:500;}
.snk-home-bar{
  flex:0 0 46px;height:6px;border-radius:99px;background:#eef0f3;overflow:hidden;
}
.snk-home-bar i{display:block;height:100%;border-radius:99px;background:var(--accent,#5b82d6);}

/* egg chips + tiles */
.snk-home-eggchips{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 0 .65rem;}
.snk-home-eggchip{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;color:#2a7e4e;
  background:color-mix(in srgb,#3fb96b 10%,#fff);border:1px solid color-mix(in srgb,#3fb96b 26%,#fff);
  border-radius:999px;padding:.26rem .6rem;
}
.snk-home-eggchip img{width:18px;height:18px;}
.snk-home-eggchip em{font-style:normal;opacity:.7;}
.snk-home-eggtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem;}
.snk-home-eggtile{
  position:relative;border:1px solid #eef0f3;border-radius:11px;padding:.35rem .2rem .45rem;text-align:center;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,#3fb96b 5%,#fff));
  text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease;
}
.snk-home-eggtile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.1);}
.snk-home-eggtile img.spr{width:42px;height:42px;object-fit:contain;}
.snk-home-eggtile .nm{font-size:.62rem;font-weight:700;color:#344054;line-height:1.1;margin-top:.1rem;}
.snk-home-eggtile .cp{font-size:.56rem;font-weight:600;color:#98a2b3;line-height:1.1;margin-top:.05rem;}
.snk-home-eggtile .eg{position:absolute;top:3px;right:3px;}
.snk-home-eggtile .eg img{width:15px;height:15px;}

/* ---- closing CTA ---- */
.snk-home-cta{
  margin-top:2.5rem;border-radius:var(--snk-r-card);overflow:hidden;position:relative;
  background:linear-gradient(120deg,#2f4d8a 0%,#3a5a9c 46%,#5b82d6 100%);
  padding:2.2rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  box-shadow:0 14px 36px rgba(58,90,156,.28);
}
.snk-home-cta::after{content:"";position:absolute;right:-40px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07);}
.snk-home-cta::before{content:"";position:absolute;left:30%;bottom:-90px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.05);}
.snk-home-cta-txt{position:relative;z-index:2;color:#fff;}
.snk-home-cta-txt h2{color:#fff;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .35rem;}
.snk-home-cta-txt p{margin:0;font-size:.92rem;color:rgba(255,255,255,.82);}
.snk-home-cta-btn{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.94rem;font-weight:700;color:#2f4d8a;background:#fff;border-radius:999px;padding:.75rem 1.6rem;
  text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.2);transition:transform .15s ease;
}
.snk-home-cta-btn:hover{transform:translateY(-2px);color:#2f4d8a;}
.snk-home-cta-btn .lucide{width:18px;height:18px;}

@keyframes snkLivePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}

/* ---- daily discoveries (weekly schedule) ---- */
.snk-home-week{margin-bottom:.5rem;}
.snk-home-weekgrid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;align-items:start;
}
.snk-home-day{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.5rem;padding:.85rem .6rem 1rem;border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#3a5a9c) 7%,#fff),#fff);
  border:1px solid color-mix(in srgb,var(--accent,#3a5a9c) 16%,#eef0f4);
  box-shadow:0 1px 3px rgba(16,24,40,.05);transition:transform .15s ease,box-shadow .15s ease;
}
.snk-home-day-top{
  display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:18px;
}
.snk-home-day-dow{
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent,#3a5a9c) 78%,#475467);
}
.snk-home-day-pill{
  font-size:.6rem;font-weight:800;letter-spacing:.08em;color:#fff;
  background:var(--accent,#3a5a9c);border-radius:999px;padding:.18em .5em;line-height:1;
  box-shadow:0 2px 6px color-mix(in srgb,var(--accent,#3a5a9c) 40%,transparent);
}
.snk-home-day-ic{
  display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  color:var(--accent,#3a5a9c);
  background:color-mix(in srgb,var(--accent,#3a5a9c) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--accent,#3a5a9c) 22%,#fff);
}
.snk-home-day-ic .lucide{width:20px;height:20px;}
.snk-home-day-theme{
  font-size:.82rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:#101828;
}
.snk-home-day.is-today{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#3a5a9c) 16%,#fff),#fff);
  border-color:color-mix(in srgb,var(--accent,#3a5a9c) 50%,#fff);
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent,#3a5a9c) 22%,transparent);
  transform:translateY(-3px);z-index:1;
}
.snk-home-day.is-today .snk-home-day-ic{
  color:#fff;background:var(--accent,#3a5a9c);border-color:transparent;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent,#3a5a9c) 38%,transparent);
}
.snk-home-day.is-today .snk-home-day-theme{font-size:.92rem;}
.snk-home-day-perks{
  list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:.32rem;
  width:100%;text-align:left;
}
.snk-home-day-perks li{
  display:flex;align-items:flex-start;gap:.35rem;font-size:.74rem;line-height:1.3;color:#475467;
}
.snk-home-day-perks li .lucide{
  width:13px;height:13px;flex:0 0 auto;margin-top:.12em;color:var(--accent,#3a5a9c);
}

/* ---- focus-visible a11y ---- */
.snk-tile a:focus-visible,
.snk-home-lbrow:focus-visible,
.snk-home-task:focus-visible,
.snk-home-eggtile:focus-visible{
  outline:2px solid var(--accent,#3a5a9c);outline-offset:2px;border-radius:8px;
}

/* ---- scroll-reveal animations ---- */
.snk-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
.snk-reveal.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .snk-reveal{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---- leaderboard Today/Total segmented toggle ---- */
.snk-home-lbtoggle{
  flex:0 0 auto;display:inline-flex;gap:2px;padding:2px;border-radius:999px;
  background:color-mix(in srgb,var(--accent,#5b82d6) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--accent,#5b82d6) 24%,#fff);
}
.snk-home-lbtoggle-btn{
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.66rem;font-weight:800;letter-spacing:.02em;line-height:1;
  padding:.32em .62em;border-radius:999px;color:color-mix(in srgb,var(--accent,#5b82d6) 75%,#475467);
  background:transparent;transition:background .15s ease,color .15s ease;
}
.snk-home-lbtoggle-btn:hover{color:var(--accent,#5b82d6);}
.snk-home-lbtoggle-btn.is-active{
  color:#fff;background:var(--accent,#5b82d6);
  box-shadow:0 1px 4px color-mix(in srgb,var(--accent,#5b82d6) 40%,transparent);
}
.snk-home-lbset[hidden]{display:none;}

/* ---- hover refinements (subtle, consistent affordances) ---- */
.snk-home-day{cursor:default;}
.snk-home-day:not(.is-today):hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent,#3a5a9c) 16%,rgba(16,24,40,.06));
}
.snk-home-now-item{transition:transform .15s ease,box-shadow .15s ease;}
.snk-home-now-item:not(a):hover{transform:translateY(-2px);box-shadow:var(--snk-sh-2);}

/* ---- responsive ---- */
@media(max-width:991px){
  .snk-home-hero{grid-template-columns:1fr;}
  .snk-home-battles{grid-template-columns:1fr;}
  .snk-home-feat{min-height:280px;}
  .snk-home-tilegrid,.snk-home-tilegrid-5{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));}
  .snk-home-battles .snk-home-tilegrid{grid-template-columns:repeat(6,1fr);}
  .snk-home .snk-evt-grid{grid-template-columns:repeat(2,1fr);}
  .snk-home-weekgrid{
    display:flex;overflow-x:auto;gap:.55rem;scroll-snap-type:x mandatory;
    padding-bottom:.5rem;-webkit-overflow-scrolling:touch;
  }
  .snk-home-day{flex:0 0 124px;scroll-snap-align:start;}
  /* Today first + prominent (full perks visible), swipe for the rest of the week */
  .snk-home-day.is-today{order:-1;flex:0 0 78vw;max-width:300px;transform:none;scroll-snap-align:start;}
}
@media(max-width:700px){
  .snk-home-stats{grid-template-columns:1fr;}
  /* status strip: horizontal scroll on narrow screens */
  .snk-home-now-strip{
    display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.4rem;-webkit-overflow-scrolling:touch;
  }
  .snk-home-now-item{flex:0 0 78%;scroll-snap-align:start;}
}
@media(max-width:575px){
  .snk-home-feat-title{font-size:1.6rem;}
  .snk-home-tilegrid,.snk-home-tilegrid-5{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
  /* phone: max 2 raid/max tiles side by side */
  .snk-home-battles .snk-home-tilegrid{grid-template-columns:repeat(2,1fr);}
  .snk-home .snk-evt-grid{grid-template-columns:1fr;}
  .snk-home-introrow{flex-direction:column;align-items:stretch;}
  /* stack search above Telegram so they don't sit side-by-side and overflow */
  .snk-home-searchwrap{max-width:none;min-width:0;flex-direction:column;align-items:stretch;gap:.5rem;}
  .snk-home-tg{justify-content:center;}
  .snk-home-day{flex:0 0 116px;}
  .snk-home-day.is-today{order:-1;flex:0 0 82vw;max-width:280px;}
  /* stronger bottom scrim so the white featured title stays legible on busy/portrait covers */
  .snk-home-feat::before{
    background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 28%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.45) 100%);
  }
  /* shrink tile badges so sprite + badges don't crowd small tiles */
  .snk-home-tieric{width:18px;height:18px;border-radius:6px;}
  .snk-home-tieric img{width:14px;height:14px;}
}
@media(max-width:480px){
  /* free width on the leaderboard rows by dropping the mini progress bar */
  .snk-home-bar{display:none;}
}

/* ===========================================================================
   LIVE AUTO-REFRESH — cross-fade applied to a refreshable section's wrapper
   while its inner HTML is being swapped by the background AJAX poll. The class
   is added briefly (~200ms), the innerHTML replaced, then the class removed so
   the new content fades back to full opacity. Purely cosmetic.
   =========================================================================== */
#hp-now,#hp-raids,#hp-max,#hp-spawns,#hp-shiny,#hp-rightnow{
  transition:opacity .2s ease;
}
.is-refreshing{opacity:.35;transition:opacity .2s ease;}

/* Optional skeleton shimmer (a soft animated placeholder). Not required by the
   fade above, but available for any future "loading" placeholder rows. */
.snk-skeleton{
  position:relative;
  overflow:hidden;
  background:#eef1f5;
  border-radius:8px;
}
.snk-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);
  animation:snk-skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes snk-skeleton-shimmer{
  100%{transform:translateX(100%);}
}
@media(prefers-reduced-motion:reduce){
  .is-refreshing{transition:none;}
  .snk-skeleton::after{animation:none;}
}