/* ------------------------------------------------------------------
   Devquo Games — home page hero FX
   Animated light beams, twinkling sparkles, chrome outlined headline
   word, 3D press buttons and a floating tilted logo card.
   Loaded by index.php and /games/ (body.home-fx); other pages are unaffected.
   Swap the colours below to re-theme everything at once.
------------------------------------------------------------------- */
body.home-fx{
  --fx-accent:#1f6feb;          /* buttons, outline, card border (same blue as the stat numbers) */
  --fx-accent-hover:#3a82f2;
  --fx-accent-deep:#0f4bb3;     /* 3D edge under buttons / outline */
  --fx-navy-0:#050b2b;
  --fx-navy-1:#0c1e66;
  --fx-navy-2:#1656cc;
  --fx-glow-a:rgba(52,196,255,.34);
  --fx-glow-b:rgba(36,104,255,.48);
  --fx-display:"Baloo 2","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Header sits on top of the dark hero ---------- */
body.home-fx .site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;   /* stays pinned over the hero */
}
body.home-fx .site-header.is-scrolled{
  background-color:rgba(7,18,54,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 12px 30px -14px rgba(0,0,20,.6);
}
body.home-fx .brand-wordmark{ filter:brightness(0) invert(1); }
body.home-fx .nav-btn{
  color:#fff;
  font-family:var(--fx-display); font-weight:700;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 0 rgba(3,10,45,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.home-fx .nav-btn:hover,
body.home-fx .nav-btn:focus-visible{
  color:#fff; background:rgba(255,255,255,.16);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 6px 0 rgba(3,10,45,.6);
}
body.home-fx .nav-btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 0 rgba(3,10,45,.55);
}
/* Current page: solid blue key */
body.home-fx .nav-btn[aria-current="page"]{
  background:var(--fx-accent);
  box-shadow:0 4px 0 var(--fx-accent-deep);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.home-fx .nav-btn[aria-current="page"]:hover{ background:var(--fx-accent-hover); box-shadow:0 6px 0 var(--fx-accent-deep); }
body.home-fx .nav-btn[aria-current="page"]:active{ box-shadow:0 1px 0 var(--fx-accent-deep); }

/* ---------- Hero shell ---------- */
body.home-fx .hero.fx-hero{
  position:relative; isolation:isolate; overflow:hidden;
  max-width:none; margin:0; text-align:left;
  padding:150px 24px 112px;
  color:#fff;
  background:
    radial-gradient(58% 52% at 78% 20%, var(--fx-glow-a), transparent 70%),
    radial-gradient(52% 62% at 2% 100%, var(--fx-glow-b), transparent 72%),
    linear-gradient(170deg, var(--fx-navy-0) 0%, var(--fx-navy-1) 50%, var(--fx-navy-2) 100%);
}
body.home-fx .fx-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }

/* Diagonal light beams that drift back and forth */
body.home-fx .fx-beams{
  position:absolute; inset:-25% -15%;
  background:
    linear-gradient(128deg, transparent 18%, rgba(255,255,255,.065) 18%, rgba(255,255,255,.065) 25%, transparent 25%),
    linear-gradient(128deg, transparent 36%, rgba(255,255,255,.035) 36%, rgba(255,255,255,.035) 47%, transparent 47%),
    linear-gradient(128deg, transparent 58%, rgba(255,255,255,.075) 58%, rgba(255,255,255,.075) 62%, transparent 62%),
    linear-gradient(128deg, transparent 72%, rgba(255,255,255,.045) 72%, rgba(255,255,255,.045) 81%, transparent 81%);
  animation:fx-beams 15s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes fx-beams{
  from{ transform:translateX(-36px); }
  to  { transform:translateX(36px); }
}

/* Twinkling 4-point sparkles + tiny glitter dots */
body.home-fx .fx-sparkles{ position:absolute; inset:0; }
body.home-fx .fx-spark{
  position:absolute; width:var(--s,16px); height:var(--s,16px);
  color:#f2f7ff; opacity:0;
  filter:drop-shadow(0 0 6px rgba(150,215,255,.95));
  animation:fx-twinkle var(--d,3.4s) ease-in-out var(--w,0s) infinite;
}
@keyframes fx-twinkle{
  0%,100%{ opacity:0;   transform:scale(.25) rotate(0deg); }
  40%    { opacity:1;   transform:scale(1)   rotate(22deg); }
  60%    { opacity:.85; transform:scale(.85) rotate(34deg); }
}
body.home-fx .fx-dot{
  position:absolute; width:var(--s,3px); height:var(--s,3px); border-radius:50%;
  background:#fff; opacity:0;
  box-shadow:0 0 6px 1px rgba(170,215,255,.9);
  animation:fx-glimmer var(--d,2.8s) ease-in-out var(--w,0s) infinite;
}
@keyframes fx-glimmer{
  0%,100%{ opacity:0; transform:scale(.4); }
  50%    { opacity:1; transform:scale(1); }
}

/* ---------- Hero layout ---------- */
body.home-fx .fx-hero-inner{
  max-width:1072px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  align-items:center; gap:48px;
}
body.home-fx .fx-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 16px 6px 6px; margin:0 0 22px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font:700 15px/1 var(--fx-display); color:#fff;
}
body.home-fx .fx-badge-icon{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fx-accent); color:#fff;
}
body.home-fx .fx-badge-icon svg{ width:14px; height:14px; }

body.home-fx .hero.fx-hero h1{
  font-family:var(--fx-display); font-weight:900;
  font-size:clamp(42px, 6.4vw, 80px); line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 20px; color:#fff;
  text-shadow:0 6px 28px rgba(0,0,40,.35);
}

/* Chrome gradient fill + red outline + darker 3D drop */
body.home-fx .fx-chrome{
  display:inline-block; font-style:italic;
  padding:0 .12em .06em .02em; margin-right:-.04em;
  background:linear-gradient(170deg, #ffffff 0%, #ffffff 38%, #d2dbe8 51%, #f5f8fc 63%, #a7b4c8 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:
    drop-shadow(.036em 0 0 var(--fx-accent))
    drop-shadow(-.036em 0 0 var(--fx-accent))
    drop-shadow(0 .036em 0 var(--fx-accent))
    drop-shadow(0 -.036em 0 var(--fx-accent))
    drop-shadow(0 .07em 0 var(--fx-accent-deep));
}

body.home-fx .hero.fx-hero .lede{
  margin:0 0 32px; max-width:640px;
  font-size:19px; line-height:1.55;
  color:rgba(226,236,255,.86);
}

/* ---------- 3D buttons ---------- */
body.home-fx .hero.fx-hero .actions{ justify-content:flex-start; gap:14px; margin:0; flex-wrap:wrap; }
body.home-fx .hero.fx-hero .btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border:0; border-radius:14px;
  font:700 17px/1 var(--fx-display); color:#fff; text-decoration:none;
  background:var(--fx-accent);
  box-shadow:0 5px 0 var(--fx-accent-deep), 0 16px 26px -12px rgba(0,0,0,.55);
  transform:translateY(0);
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
body.home-fx .hero.fx-hero .btn svg{ width:18px; height:18px; flex:none; }
body.home-fx .hero.fx-hero .btn:hover{
  background:var(--fx-accent-hover);
  transform:translateY(-2px);
  box-shadow:0 7px 0 var(--fx-accent-deep), 0 22px 30px -12px rgba(0,0,0,.6);
}
body.home-fx .hero.fx-hero .btn:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--fx-accent-deep), 0 8px 14px -10px rgba(0,0,0,.5);
}
body.home-fx .hero.fx-hero .btn:focus-visible{ outline:3px solid #9fd4ff; outline-offset:3px; }

body.home-fx .hero.fx-hero .btn-soft{
  color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 5px 0 rgba(3,10,45,.6), 0 16px 26px -12px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.home-fx .hero.fx-hero .btn-soft:hover{
  background:rgba(255,255,255,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 7px 0 rgba(3,10,45,.6), 0 22px 30px -12px rgba(0,0,0,.5);
}
body.home-fx .hero.fx-hero .btn-soft:active{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 1px 0 rgba(3,10,45,.6), 0 8px 14px -10px rgba(0,0,0,.4);
}

/* ---------- Floating tilted logo card ---------- */
body.home-fx .fx-card-wrap{ display:flex; justify-content:center; }
body.home-fx .fx-card{
  position:relative; overflow:hidden;
  width:min(280px, 100%); aspect-ratio:1/1;
  border-radius:24%;
  border:7px solid var(--fx-accent);
  background:
    linear-gradient(155deg, rgba(160,190,240,.55) 0%, rgba(78,108,190,.38) 55%, rgba(118,156,232,.5) 100%);
  box-shadow:
    inset 0 0 0 3px rgba(220,232,255,.35),
    0 9px 0 var(--fx-accent-deep),
    0 40px 60px -24px rgba(0,0,30,.75);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:grid; place-items:center;
  transform:rotate(8deg);
  animation:fx-float 6s ease-in-out infinite;
}
body.home-fx .fx-card::after{           /* glossy shine sweeping over the card */
  content:""; position:absolute; top:-20%; bottom:-20%; left:-60%; width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg);
  animation:fx-card-shine 5s ease-in-out 1s infinite;
}
body.home-fx .fx-card-mark{
  width:46%; height:auto; border-radius:0;
  filter:brightness(0) invert(1) drop-shadow(0 6px 10px rgba(0,0,40,.35));
  position:relative; z-index:1;
}
@keyframes fx-float{
  0%,100%{ transform:translateY(0)     rotate(8deg); }
  50%    { transform:translateY(-14px) rotate(5deg); }
}
@keyframes fx-card-shine{
  0%      { left:-60%; }
  40%,100%{ left:130%; }
}

/* ---------- Content below the hero ---------- */
body.home-fx .stats{ padding-top:64px; }

/* ---------- Compact page hero (games page) ---------- */
body.home-fx .hero.fx-hero.fx-hero-page{
  padding:132px 24px 76px;
  text-align:center;
}
body.home-fx .hero.fx-hero.fx-hero-page h1{
  margin:0;
  font-size:clamp(44px, 7vw, 84px);
}
body.home-fx .games-section{ padding-top:48px; }
@media (max-width: 520px){
  body.home-fx .hero.fx-hero.fx-hero-page{ padding:116px 16px 56px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  body.home-fx .hero.fx-hero{ padding:128px 20px 88px; }
  body.home-fx .fx-hero-inner{ grid-template-columns:1fr; gap:28px; }
  body.home-fx .fx-card-wrap{ order:-1; justify-content:flex-start; }
  body.home-fx .fx-card{ width:132px; border-width:5px; }
}
@media (max-width: 520px){
  body.home-fx .hero.fx-hero{ padding:118px 16px 72px; }
  body.home-fx .fx-br{ display:none; }
  body.home-fx .hero.fx-hero .lede{ font-size:17px; }
  body.home-fx .hero.fx-hero .btn{ padding:15px 22px; font-size:16px; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  body.home-fx .fx-beams,
  body.home-fx .fx-card,
  body.home-fx .fx-card::after,
  body.home-fx .fx-spark,
  body.home-fx .fx-dot{ animation:none !important; }
  body.home-fx .fx-card::after{ display:none; }
  body.home-fx .fx-spark,
  body.home-fx .fx-dot{ opacity:.75; }
  body.home-fx .fx-card{ transform:rotate(8deg); }
}

/* ---------- Click: press the button all the way down onto its 3D edge ---------- */
body.home-fx .hero.fx-hero .btn,
body.home-fx .nav-btn{
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
body.home-fx .hero.fx-hero .btn:active{
  transform:translateY(5px); transition-duration:.06s;
  box-shadow:0 0 0 var(--fx-accent-deep), 0 6px 12px -10px rgba(0,0,0,.45);
}
body.home-fx .hero.fx-hero .btn-soft:active{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 rgba(3,10,45,.6), 0 6px 12px -10px rgba(0,0,0,.4);
}
body.home-fx .nav-btn:active{
  transform:translateY(4px); transition-duration:.06s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 rgba(3,10,45,.55);
}
body.home-fx .nav-btn[aria-current="page"]:active{ box-shadow:0 0 0 var(--fx-accent-deep); }

/* ---------- Game thumbnail on the right of the hero ----------
   Sits behind the beams and sparkles and fades out along the light rays' angle by the middle of the
   hero so the headline stays readable. The image is set on the element in index.php. */
body.home-fx .fx-thumb{
  position:absolute; inset:0;   /* spans the hero; the image itself stays right-aligned */
  /* Rotation: the next game wipes in along the beams' diagonal and settles from a slight
     zoom, while the outgoing one is cut away by the same edge, so they never overlap.
     Idle slides wait clipped off the right edge. */
  clip-path:polygon(134% 0, 139% 0, 139% 100%, 100% 100%);
  transform:scale(1.12); transform-origin:center;
  animation:fx-thumb-float 12s ease-in-out infinite;   /* gentle drift; uses `translate` so it stacks with the zoom */
  transition:none;
  background-position:right center; background-size:auto 100%; background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(128deg, transparent 0%, transparent 48%, #000 94%);
          mask-image:linear-gradient(128deg, transparent 0%, transparent 48%, #000 94%);
}
body.home-fx .fx-thumb.is-on{
  clip-path:polygon(0% 0, 139% 0, 139% 100%, -34% 100%);
  transform:scale(1.04); z-index:1;   /* 4% overhang hides the edges while it floats */
  transition:clip-path .9s cubic-bezier(.7,0,.25,1), transform 1.6s cubic-bezier(.2,.7,.2,1);
}
/* Outgoing slide: snapped to the same full shape anchored on the left (no animation),
   then its right edge follows the incoming edge exactly off to the left. */
body.home-fx .fx-thumb.is-leaving-prep{
  clip-path:polygon(-39% 0, 134% 0, 100% 100%, -39% 100%);
  transform:scale(1.04); transition:none;
}
body.home-fx .fx-thumb.is-leaving{
  clip-path:polygon(-39% 0, 0% 0, -34% 100%, -39% 100%);
  transform:scale(1.04);
  transition:clip-path .9s cubic-bezier(.7,0,.25,1);
}
/* Keep the beams and sparkles above whichever thumbnail is showing */
body.home-fx .fx-beams,
body.home-fx .fx-sparkles{ z-index:2; }
@keyframes fx-thumb-float{
  0%   { translate:0 0; }
  33%  { translate:-12px 7px; }
  66%  { translate:8px -8px; }
  100% { translate:0 0; }
}
@media (prefers-reduced-motion: reduce){
  body.home-fx .fx-thumb{ animation:none; }
}
/* Floating logo card hidden for now; delete this rule to bring it back. */
body.home-fx .fx-card-wrap{ display:none; }
@media (max-width: 900px){
  /* One-column layout: the thumbnail sits softer behind the text */
  body.home-fx .fx-thumb{
    width:100%;
    -webkit-mask-image:linear-gradient(128deg, transparent 0%, transparent 28%, #000 100%);
            mask-image:linear-gradient(128deg, transparent 0%, transparent 28%, #000 100%);
  }
  body.home-fx .fx-thumb{ opacity:.55; }
}

/* ---------- Stat row: full figures + flashing live dot by "Playing now" ---------- */
body.home-fx .stat-num{ font-variant-numeric:tabular-nums; }
body.home-fx .live-dot{
  display:inline-block; width:9px; height:9px; margin-right:7px; vertical-align:1px;
  border-radius:50%; background:#ff3b3b;
  animation:fx-live 3s ease-out infinite;   /* one bright flash + ring every 3 seconds */
}
@keyframes fx-live{
  0%   { opacity:.6; box-shadow:0 0 0 0 rgba(255,59,59,.6); }
  6%   { opacity:1;   box-shadow:0 0 0 0 rgba(255,59,59,.6); }
  32%  { opacity:1;   box-shadow:0 0 0 8px rgba(255,59,59,0); }
  50%  { opacity:.6; box-shadow:0 0 0 8px rgba(255,59,59,0); }
  100% { opacity:.6; box-shadow:0 0 0 0 rgba(255,59,59,0); }
}
@media (prefers-reduced-motion: reduce){
  body.home-fx .live-dot{ animation:none; opacity:1; }
}

/* ---------- Dark band behind the stat row + live chart ---------- */
body.home-fx .fx-band{
  position:relative; isolation:isolate; overflow:hidden; overflow:clip;   /* clip only: focus can't scroll the band */
  display:flow-root;   /* contain the stats margin so the band colour starts right under the hero */
  color:#fff;
  background:
    radial-gradient(900px 560px at 88% 0%, rgba(52,196,255,.16), transparent 70%),
    radial-gradient(760px 560px at 0% 900px, rgba(36,104,255,.22), transparent 72%),
    radial-gradient(860px 480px at 100% calc(100% - 560px), rgba(52,150,255,.13), transparent 72%),
    linear-gradient(180deg, #0e2266 0%, #0b1b57 55%, #071236 100%);   /* glows are sized in px so they fade out before the bottom edge */
}
body.home-fx .fx-band .stat-num{ color:#fff; }
body.home-fx .fx-band .stat-label{ color:rgba(226,236,255,.78); }
body.home-fx .fx-band .live{ padding-bottom:16px; max-width:none; padding-left:0; padding-right:0; }   /* chart runs edge to edge */
body.home-fx .fx-band .chart-embed{ border-radius:0; }
/* The timeline used to borrow its top spacing from the chart section; it now has its own */
body.home-fx .timeline-section{ padding-top:14px; }

/* ---------- Home page: navy runs from the stats band down to the footer ----------
   The band now wraps the timeline too; the body underneath it matches the band's
   last colour so the footer and any overscroll are the same navy. */
body.home-fx.fx-dark{ background:#071236; }
body.home-fx .fx-band .timeline-section h2{ color:#fff; }
body.home-fx .fx-band .timeline-loading{ color:rgba(226,236,255,.7); }
body.home-fx .fx-band .timeline-track::before,
body.home-fx .fx-band .tl-cap{ background:rgba(120,170,255,.45); }
body.home-fx .fx-band .tl-dot,
body.home-fx .fx-band .tl-stem{ background:#5aa8ff; }
body.home-fx .fx-band .is-now .tl-dot{ box-shadow:0 0 0 5px rgba(90,168,255,.22), 0 0 14px rgba(90,168,255,.7); }
body.home-fx .fx-band .tl-tip{ background:#0b1b57; box-shadow:inset 0 0 0 3px #5aa8ff; }
body.home-fx .fx-band .tl-label{ color:#b7d2ff; opacity:.62; }
body.home-fx.fx-dark .site-footer{ color:rgba(226,236,255,.66); }
body.home-fx.fx-dark .footer-btn{
  color:#fff; background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 0 rgba(3,10,45,.55);
}
body.home-fx.fx-dark .footer-btn:hover,
body.home-fx.fx-dark .footer-btn:focus-visible{
  color:#fff; background:rgba(255,255,255,.16); transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 6px 0 rgba(3,10,45,.6);
}
body.home-fx.fx-dark .footer-btn:active{
  transform:translateY(4px);   /* press all the way down onto the edge */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 rgba(3,10,45,.55);
}

/* ---------- Game reel over the hero / stats seam ----------
   A single flat brand-blue ribbon (icons + names, links). Filled by the script in index.php. */
body.home-fx .fx-reel{
  position:relative; z-index:5;
  height:190px; margin:-95px 0;
  overflow:hidden; pointer-events:none;
}
body.home-fx .fx-reel-strip{
  position:absolute; left:-6%; right:-6%; top:50%;
  display:flex; align-items:center; overflow:hidden;
  pointer-events:auto;
}
body.home-fx .fx-reel-strip.is-front{
  height:76px; margin-top:-38px;
  background:linear-gradient(180deg, #3381ff 0%, #1f6feb 55%, #1a62d6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 7px 0 #0f4bb3, 0 20px 34px -12px rgba(0,0,20,.65);
}
body.home-fx .fx-reel-track{
  display:flex; flex:none; white-space:nowrap;
  animation:fx-reel 90s linear infinite;
}
body.home-fx .fx-reel-strip.is-front:hover .fx-reel-track{ animation-play-state:paused; }
@keyframes fx-reel{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
body.home-fx .fx-reel-set{ display:flex; align-items:center; flex:none; }
body.home-fx .fx-reel-set > *{ margin-right:30px; flex:none; }
body.home-fx .fx-reel-item{
  display:inline-flex; align-items:center; gap:12px;
  color:#fff; text-decoration:none; font:800 19px/1 var(--fx-display);
}
body.home-fx a.fx-reel-item:hover{ text-decoration:none; color:#fff; }
body.home-fx .fx-reel-item img{
  width:46px; height:46px; border-radius:12px; object-fit:cover; background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 4px 0 3px rgba(9,40,120,.6);
  transition:transform .15s ease;
}
body.home-fx a.fx-reel-item:hover img{ transform:translateY(-3px); }
body.home-fx .fx-reel-sep{ width:8px; height:8px; border-radius:2px; background:rgba(255,255,255,.55); transform:rotate(45deg); }

/* ---------- Stats in a glass frame ---------- */
body.home-fx .fx-band .stats{
  width:fit-content; max-width:calc(100% - 32px);
  margin:118px auto 14px; padding:26px 8px; gap:0;   /* chart sits just under the frame */
  background:rgba(255,255,255,.06); border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 7px 0 rgba(3,10,45,.55), 0 26px 40px -20px rgba(0,0,20,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.home-fx .fx-band .stat{ padding:4px 44px; }
body.home-fx .fx-band .stat + .stat{ border-left:1px solid rgba(255,255,255,.14); }

@media (max-width: 640px){
  body.home-fx .fx-reel{ height:150px; margin:-75px 0; }
  body.home-fx .fx-reel-strip.is-front{ height:60px; margin-top:-30px; }
  body.home-fx .fx-reel-item{ font-size:16px; gap:10px; }
  body.home-fx .fx-reel-item img{ width:36px; height:36px; border-radius:10px; }
  body.home-fx .fx-reel-set > *{ margin-right:24px; }
  body.home-fx .fx-band .stats{ display:grid; grid-template-columns:1fr 1fr; width:auto; margin:96px 16px 12px; padding:6px 0; }
  body.home-fx .fx-band .stat{ padding:16px 10px; }
  body.home-fx .fx-band .stat:first-child{ grid-column:1 / -1; border-bottom:1px solid rgba(255,255,255,.14); }
  body.home-fx .fx-band .stat + .stat{ border-left:0; }
  body.home-fx .fx-band .stat:last-child{ border-left:1px solid rgba(255,255,255,.14); }
}
@media (prefers-reduced-motion: reduce){
  body.home-fx .fx-reel-track{ animation:none; }
}

/* Timeline: no scrolling while every logged game fits in the frame (script.js) */
body.home-fx .timeline-viewport.is-locked{ overflow-x:hidden; cursor:default; }