<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blog — tryGames</title>
<meta name="description" content="Tips, updates and earning strategies from the tryGames team." />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="icon" type="image/png" sizes="32x32" href="img/logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/logo.png">
<link rel="apple-touch-icon" href="img/logo.png">
<link rel="shortcut icon" href="img/logo.png">

<style>
:root{
  --bg:#080a18; --bg-deep:#04050d;
  --surface:rgba(255,255,255,0.045); --surface-solid:#12142a; --surface-2:#181b38;
  --line:rgba(255,255,255,0.08); --line-bright:rgba(255,255,255,0.16);
  --cyan:#00e6d8; --cyan-glow:rgba(0,230,216,0.5);
  --magenta:#ff2f92; --magenta-glow:rgba(255,47,146,0.5);
  --violet:#8b5cf6; --gold:#ffc23c;
  --text:#eef0ff; --muted:#8b91b8;
  --font-display:'Orbitron', sans-serif; --font-head:'Rajdhani', sans-serif;
  --font-body:'Space Grotesk', sans-serif; --font-mono:'JetBrains Mono', monospace;
  --ease: cubic-bezier(.16,.84,.44,1); --container: 1440px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--magenta);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(16px,4vw,56px);}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 1100px 700px at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 1100px 700px at 50% 0%, #000 0%, transparent 75%);
}
main, header.site, footer.site{position:relative;z-index:1;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(6,7,17,0.7);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);}
.site-inner{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,56px);max-width:var(--container);margin:0 auto;gap:10px;}
.logo{font-family:var(--font-display);font-weight:800;font-size:clamp(15px,4vw,18px);letter-spacing:0.5px;display:flex;align-items:center;gap:9px;flex-shrink:0;}
.logo .dot{width:9px;height:9px;border-radius:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow), 0 0 20px var(--cyan-glow);animation:pulse-dot 2.2s ease-in-out infinite;flex-shrink:0;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.75);}}
.logo span.t{color:var(--text);}
.logo span.g{background:linear-gradient(90deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;}
.site-nav{display:flex;align-items:center;gap:24px;}
.site-links{display:flex;gap:24px;font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--muted);}
.site-links a{transition:color .2s ease;}
.site-links a:hover, .site-links a.active{color:var(--cyan);}
.auth-row{display:flex;gap:9px;}
.btn{font-family:var(--font-head);font-weight:700;font-size:14.5px;letter-spacing:0.3px;padding:11px 20px;border-radius:10px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(100deg,var(--cyan) 0%, var(--violet) 55%, var(--magenta) 100%);background-size:200% 100%;color:#050710;box-shadow:0 4px 20px rgba(139,92,246,0.35);}
.btn-primary:hover{background-position:100% 0;box-shadow:0 8px 28px rgba(255,47,146,0.4);}
.btn-outline{background:rgba(255,255,255,0.03);color:var(--text);border:1.5px solid var(--line-bright);}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,230,216,0.06);}
.btn-sm{padding:9px 14px;font-size:13px;}

.nav-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;background:var(--surface-solid);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:16px;cursor:pointer;flex-shrink:0;}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan);}

.mobile-menu{display:none;flex-direction:column;gap:2px;max-height:0;overflow:hidden;background:rgba(8,9,20,0.98);border-bottom:1px solid var(--line);transition:max-height .35s var(--ease);}
.mobile-menu.open{max-height:420px;}
.mobile-menu a{display:flex;align-items:center;gap:10px;padding:14px clamp(16px,4vw,56px);font-family:var(--font-head);font-weight:600;font-size:15.5px;color:var(--muted);border-top:1px solid var(--line);}
.mobile-menu a.active,.mobile-menu a:hover{color:var(--cyan);}
.mobile-menu .mm-auth{display:flex;gap:10px;padding:14px clamp(16px,4vw,56px) 18px;border-top:1px solid var(--line);}
.mobile-menu .mm-auth .btn{flex:1;justify-content:center;}

@media (max-width:760px){
  .site-links{display:none;}
  .auth-row{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{display:flex;}
}

/* ---------- hero ---------- */
.page-hero{padding:min(6vw,56px) clamp(16px,4vw,56px) 20px;text-align:center;}
.page-eyebrow{font-family:var(--font-mono);font-size:11px;color:var(--cyan);letter-spacing:2.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;}
.page-eyebrow::before, .page-eyebrow::after{content:"";width:22px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.page-title{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,7.5vw,58px);line-height:1.1;letter-spacing:-0.5px;margin:0 0 14px;}
.page-title .grad{background:linear-gradient(100deg,var(--cyan) 0%, var(--violet) 50%, var(--magenta) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-sub{font-size:14.5px;color:var(--muted);max-width:600px;margin:0 auto;line-height:1.65;}
.page-intro{font-size:13.5px;color:var(--muted);max-width:760px;margin:20px auto 0;line-height:1.7;text-align:left;background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
.page-intro strong{color:var(--text);}

.section{padding:36px clamp(16px,4vw,56px) 10px;}

/* ---------- filters ---------- */
.cat-row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding-bottom:4px;margin-bottom:8px;}
.cat-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--muted);background:var(--surface-solid);border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:border-color .2s ease, color .2s ease, background .2s ease;cursor:pointer;user-select:none;}
.cat-chip:hover{color:var(--text);border-color:var(--line-bright);}
.cat-chip.active{color:#050710;border-color:transparent;background:linear-gradient(100deg,var(--cyan),var(--violet));}

.filter-empty{display:none;text-align:center;padding:50px 16px;color:var(--muted);font-family:var(--font-head);font-size:15px;}
.filter-empty.show{display:block;}
.filter-empty i{display:block;font-size:26px;margin-bottom:12px;color:var(--line-bright);}

/* ---------- cards ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px,1fr));gap:22px;}
.blog-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .3s ease, box-shadow .3s ease, opacity .25s ease, transform .25s ease;}
.blog-card:hover{border-color:rgba(0,230,216,0.45);box-shadow:0 16px 34px rgba(0,0,0,0.45), 0 0 26px rgba(139,92,246,0.16);}
.blog-card.hide{display:none;}

.blog-thumb{position:relative;height:140px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 20%, rgba(0,230,216,0.16), transparent 55%),
             radial-gradient(circle at 80% 80%, rgba(255,47,146,0.16), transparent 55%),
             var(--surface-2);
}
.blog-thumb::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:22px 22px;
}
.blog-thumb i{position:relative;z-index:1;font-size:36px;background:linear-gradient(135deg,var(--cyan),var(--violet) 55%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(139,92,246,0.35));}
.blog-cat-flag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:#050710;background:linear-gradient(100deg,var(--cyan),var(--violet));padding:4px 10px;border-radius:999px;}
.blog-body{padding:18px 19px 20px;}
.blog-meta{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap;}
.blog-meta .sep{opacity:.4;}
.blog-title{font-family:var(--font-head);font-size:18px;font-weight:700;margin:0 0 9px;color:var(--text);line-height:1.3;}
.blog-excerpt{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 16px;}
.blog-readmore{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--cyan);transition:gap .2s ease, color .2s ease;}
.blog-readmore:hover{gap:11px;color:var(--magenta);}

.blog-featured{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--surface-solid);border:1px solid var(--line-bright);border-radius:20px;overflow:hidden;margin-bottom:34px;transition:opacity .25s ease, max-height .25s ease;}
.blog-featured.hide{display:none;}
.blog-featured-img{position:relative;min-height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 25% 25%, rgba(0,230,216,0.22), transparent 55%),
             radial-gradient(circle at 85% 75%, rgba(255,47,146,0.22), transparent 55%),
             var(--surface-2);
}
.blog-featured-img::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.blog-featured-img i{position:relative;z-index:1;font-size:60px;background:linear-gradient(135deg,var(--cyan),var(--violet) 55%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(139,92,246,0.4));}
.blog-featured-body{padding:28px 26px;display:flex;flex-direction:column;justify-content:center;}
.blog-featured-flag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--gold);background:rgba(255,194,60,.12);border:1px solid rgba(255,194,60,.35);padding:5px 11px;border-radius:999px;margin-bottom:14px;width:fit-content;}
.blog-featured-title{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,5.5vw,30px);line-height:1.22;margin:0 0 12px;color:var(--text);}
.blog-featured-excerpt{font-size:13.5px;color:var(--muted);line-height:1.7;margin:0 0 18px;}
@media (max-width:820px){ .blog-featured{grid-template-columns:1fr;} .blog-featured-img{min-height:160px;} .blog-featured-body{padding:24px 20px;} }

.pager{display:flex;justify-content:center;gap:9px;margin:38px 0 10px;flex-wrap:wrap;}
.pager a{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:13px;background:var(--surface-solid);border:1px solid var(--line);color:var(--muted);transition:border-color .2s ease, color .2s ease;}
.pager a:hover{border-color:var(--cyan);color:var(--cyan);}
.pager a.active{color:#050710;border-color:transparent;background:linear-gradient(100deg,var(--cyan),var(--violet));}

.cta-banner{margin:56px clamp(16px,4vw,56px) 20px;max-width:var(--container);margin-left:auto;margin-right:auto;border-radius:22px;padding:40px 22px;text-align:center;position:relative;background:linear-gradient(150deg, #14152c 0%, #0b0c1c 100%);border:1px solid var(--line-bright);overflow:hidden;}
.cta-banner .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.5;animation:float-orb 9s ease-in-out infinite;}
.cta-banner .orb1{width:220px;height:220px;background:var(--magenta);top:-80px;left:6%;}
.cta-banner .orb2{width:190px;height:190px;background:var(--cyan);bottom:-70px;right:8%;animation-delay:-3s;}
@keyframes float-orb{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-24px) scale(1.08);}}
.cta-banner h2{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,6vw,34px);margin:0 0 12px;line-height:1.25;color:#fff;position:relative;z-index:1;}
.cta-banner p{color:var(--muted);margin:0 0 22px;font-size:13.5px;position:relative;z-index:1;}
.cta-banner .btn{position:relative;z-index:1;font-size:14.5px;padding:14px 26px;}

footer.site{padding:36px clamp(16px,4vw,56px) 26px;border-top:1px solid var(--line);margin-top:40px;}
footer.site .wrap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;padding:0;text-align:center;}
footer.site .foot-logo{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--muted);}
footer.site .foot-links{display:flex;gap:18px;font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--muted);flex-wrap:wrap;}
footer.site .foot-links a:hover{color:var(--cyan);}
footer.site .foot-contact{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);}
footer.site .foot-contact i{color:var(--cyan);font-size:12px;}
footer.site .foot-contact:hover{color:var(--text);}

/* ---------- phone tightening ---------- */
@media (max-width:480px){
  .wrap{padding:0 14px;}
  .section{padding:28px 14px 8px;}
  .page-hero{padding:28px 14px 16px;}
  .page-intro{padding:16px;font-size:13px;border-radius:14px;}
  .cat-row{gap:7px;}
  .cat-chip{padding:8px 13px;font-size:12px;}
  .blog-grid{grid-template-columns:1fr;gap:16px;}
  .blog-thumb{height:120px;}
  .blog-thumb i{font-size:30px;}
  .blog-body{padding:16px;}
  .blog-title{font-size:17px;}
  .blog-featured-title{font-size:22px;}
  .blog-featured-body{padding:20px 16px;}
  .blog-featured-img{min-height:130px;}
  .blog-featured-img i{font-size:46px;}
  .cta-banner{padding:32px 16px;border-radius:18px;}
  footer.site .wrap{flex-direction:column;gap:12px;}
}
</style>
</head>
<body>

<div class="bg-grid"></div>

<header class="site">
  <div class="site-inner">
    <a href="index.html" class="logo"><span class="dot"></span><span class="t">try</span><span class="g">Games</span></a>
    <nav class="site-nav">
      <div class="site-links">
        <a href="/dashboard">Play</a>
        <a href="/withdraw">Cashout</a>
        <a href="/referrals">Refer</a>
        <a href="guide.html">Guide</a>
        <a href="blog.html" class="active">Blog</a>
      </div>
      <div class="auth-row">
        <a href="/login" class="btn btn-outline">Login</a>
        <a href="/register" class="btn btn-primary"><i class="fas fa-play"></i> Sign Up</a>
      </div>
    </nav>
    <button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">
      <i class="fas fa-bars"></i>
    </button>
  </div>
  <div class="mobile-menu" id="mobileMenu">
    <a href="/dashboard"><i class="fas fa-gamepad"></i> Play</a>
    <a href="/withdraw"><i class="fas fa-wallet"></i> Cashout</a>
    <a href="/referrals"><i class="fas fa-user-plus"></i> Refer</a>
    <a href="guide.html"><i class="fas fa-book"></i> Guide</a>
    <a href="blog.html" class="active"><i class="fas fa-newspaper"></i> Blog</a>
    <div class="mm-auth">
      <a href="/login" class="btn btn-outline btn-sm">Login</a>
      <a href="/register" class="btn btn-primary btn-sm"><i class="fas fa-play"></i> Sign Up</a>
    </div>
  </div>
</header>

<main>
  <section class="page-hero reveal">
    <span class="page-eyebrow">Patch notes & strategy</span>
    <h1 class="page-title">The tryGames <span class="grad">Blog</span></h1>
    <p class="page-sub">Payout tips, new game drops, and the strategies top earners use to climb the leaderboard.</p>
    <p class="page-intro"><strong>Why we write this blog:</strong> tryGames pays out real rewards for time spent playing, and the fastest earners aren't the luckiest — they're the ones who know which milestones actually move the needle, which games pay the best per minute, and how referral bonuses stack over time. Every week our team digs into player data, tests new titles the day they launch, and breaks down exactly how to get from your first spin to your first cashout as efficiently as possible. Bookmark this page — new guides go up every few days.</p>
  </section>

  <section class="section reveal">
    <div class="wrap">
      <div class="cat-row" id="catRow">
        <a href="#" class="cat-chip active" data-filter="all"><i class="fas fa-fire"></i> All Posts</a>
        <a href="#" class="cat-chip" data-filter="earning"><i class="fas fa-sack-dollar"></i> Earning Tips</a>
        <a href="#" class="cat-chip" data-filter="guides"><i class="fas fa-gamepad"></i> Game Guides</a>
        <a href="#" class="cat-chip" data-filter="announcements"><i class="fas fa-bullhorn"></i> Announcements</a>
        <a href="#" class="cat-chip" data-filter="referrals"><i class="fas fa-user-plus"></i> Referrals</a>
      </div>
    </div>
  </section>

  <section class="section reveal">
    <div class="wrap">
      <a href="#" class="blog-featured" data-cat="earning" id="featuredPost">
        <div class="blog-featured-img"><i class="fas fa-trophy"></i></div>
        <div class="blog-featured-body">
          <span class="blog-featured-flag"><i class="fas fa-star"></i> Editor's Pick</span>
          <h2 class="blog-featured-title">7 Milestone Tricks That Cut Your Time-to-Cashout in Half</h2>
          <p class="blog-featured-excerpt">We pulled data from our top 500 earners this month to find the fastest paths through the most popular titles — here's exactly where to focus first, which milestones to rush, and which ones to skip entirely if speed is your priority.</p>
          <span class="blog-meta">Aug 6, 2026 <span class="sep">·</span> 6 min read <span class="sep">·</span> Earning Tips</span>
        </div>
      </a>

      <div class="blog-grid" id="blogGrid">

        <a href="#" class="blog-card" data-cat="guides">
          <div class="blog-thumb"><span class="blog-cat-flag">Game Guides</span><i class="fas fa-coins"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Aug 4, 2026 <span class="sep">·</span> 4 min read</span>
            <h3 class="blog-title">Coin Master: The Fastest Village to 61 This Week</h3>
            <p class="blog-excerpt">A village-by-village breakdown of where spins matter most, and where you can safely skip ahead without losing progress toward payout.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="announcements">
          <div class="blog-thumb"><span class="blog-cat-flag">Announcements</span><i class="fas fa-rocket"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Aug 2, 2026 <span class="sep">·</span> 3 min read</span>
            <h3 class="blog-title">Three New Titles Just Landed in the Arcade</h3>
            <p class="blog-excerpt">Kingdom Clash, Puzzle Vault, and Tile Kingdom are live now with launch-week bonus multipliers for the first 10,000 players.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="referrals">
          <div class="blog-thumb"><span class="blog-cat-flag">Referrals</span><i class="fas fa-user-friends"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Jul 30, 2026 <span class="sep">·</span> 5 min read</span>
            <h3 class="blog-title">How Devon Turned 2 Referrals Into a $600 Month</h3>
            <p class="blog-excerpt">A real player breakdown of how referral bonuses compound faster than most people expect once your invited friends start playing regularly.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="earning">
          <div class="blog-thumb"><span class="blog-cat-flag">Earning Tips</span><i class="fas fa-scale-balanced"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Jul 27, 2026 <span class="sep">·</span> 4 min read</span>
            <h3 class="blog-title">Offerwalls vs. Games: Where the Hourly Rate Actually Wins</h3>
            <p class="blog-excerpt">We compared payout-per-minute across both paths so you can pick the right one for your schedule and daily time budget.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="guides">
          <div class="blog-thumb"><span class="blog-cat-flag">Game Guides</span><i class="fas fa-chess-board"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Jul 24, 2026 <span class="sep">·</span> 6 min read</span>
            <h3 class="blog-title">Solitaire Grand Harvest: Every Milestone, Mapped</h3>
            <p class="blog-excerpt">The complete milestone list with payout size at each stage, so you know exactly what's coming and when to expect it.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="announcements">
          <div class="blog-thumb"><span class="blog-cat-flag">Announcements</span><i class="fas fa-bolt"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Jul 20, 2026 <span class="sep">·</span> 2 min read</span>
            <h3 class="blog-title">Payout Times Are Now Under 6 Minutes on Average</h3>
            <p class="blog-excerpt">A behind-the-scenes look at the infrastructure change that cut our withdrawal times dramatically this quarter.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="earning">
          <div class="blog-thumb"><span class="blog-cat-flag">Earning Tips</span><i class="fas fa-calendar-check"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Jul 17, 2026 <span class="sep">·</span> 5 min read</span>
            <h3 class="blog-title">Daily Streaks 101: Why Skipping One Day Costs More Than You Think</h3>
            <p class="blog-excerpt">Streak multipliers reset harder than most players realize. Here's how to protect your streak without burning out.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="guides">
          <div class="blog-thumb"><span class="blog-cat-flag">Game Guides</span><i class="fas fa-puzzle-piece"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Jul 14, 2026 <span class="sep">·</span> 4 min read</span>
            <h3 class="blog-title">Tile Kingdom Speedrun: Reach Level 20 in Under an Hour</h3>
            <p class="blog-excerpt">The exact board strategy our fastest testers used to blow past the early-game grind in Tile Kingdom.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

        <a href="#" class="blog-card" data-cat="referrals">
          <div class="blog-thumb"><span class="blog-cat-flag">Referrals</span><i class="fas fa-share-nodes"></i></div>
          <div class="blog-body">
            <span class="blog-meta">Jul 10, 2026 <span class="sep">·</span> 3 min read</span>
            <h3 class="blog-title">The Best Times of Day to Share Your Referral Link</h3>
            <p class="blog-excerpt">We analyzed click-through and signup data across time zones to find when your link actually converts.</p>
            <span class="blog-readmore">Read more <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>

      </div>

      <p class="filter-empty" id="filterEmpty"><i class="fas fa-box-open"></i>No posts in this category yet — check back soon.</p>

      <div class="pager" id="pager">
        <a href="#" class="active">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#"><i class="fas fa-chevron-right"></i></a>
      </div>
    </div>
  </section>

  <div class="cta-banner reveal">
    <span class="orb orb1"></span><span class="orb orb2"></span>
    <h2>DON'T MISS A DROP</h2>
    <p>New games, bonus events, and payout tips — straight to your dashboard.</p>
    <a href="/register" class="btn btn-primary"><i class="fas fa-play"></i> Create Free Account</a>
  </div>
</main>

<footer class="site">
  <div class="wrap">
    <span class="foot-logo">tryGames © 2026</span>
    <div class="foot-links">
      <a href="/register">Sign Up</a>
      <a href="/login">Login</a>
      <a href="guide.html">Guide</a>
      <a href="blog.html">Blog</a>
    </div>
    <a href="mailto:john@trygames.ink" class="foot-contact"><i class="fas fa-envelope"></i> john@trygames.ink</a>
  </div>
</footer>

<script>
(function(){
  // scroll reveal
  var targets = document.querySelectorAll('.reveal, .blog-card');
  targets.forEach(function(el){ if(!el.classList.contains('reveal')) el.classList.add('reveal'); });
  var obs = new IntersectionObserver(function(entries){
    entries.forEach(function(entry, i){
      if(entry.isIntersecting){
        setTimeout(function(){ entry.target.classList.add('in'); }, (i % 6) * 60);
        obs.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
  targets.forEach(function(el){ obs.observe(el); });

  // mobile menu toggle
  var navToggle = document.getElementById('navToggle');
  var mobileMenu = document.getElementById('mobileMenu');
  if(navToggle && mobileMenu){
    navToggle.addEventListener('click', function(){
      var isOpen = mobileMenu.classList.toggle('open');
      navToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      navToggle.innerHTML = isOpen ? '<i class="fas fa-xmark"></i>' : '<i class="fas fa-bars"></i>';
    });
  }

  // category filters
  var chips = document.querySelectorAll('.cat-chip');
  var cards = document.querySelectorAll('.blog-card');
  var featured = document.getElementById('featuredPost');
  var emptyMsg = document.getElementById('filterEmpty');
  var pager = document.getElementById('pager');

  chips.forEach(function(chip){
    chip.addEventListener('click', function(e){
      e.preventDefault();
      var filter = chip.getAttribute('data-filter');

      chips.forEach(function(c){ c.classList.remove('active'); });
      chip.classList.add('active');

      var visibleCount = 0;

      cards.forEach(function(card){
        var cat = card.getAttribute('data-cat');
        var match = (filter === 'all' || cat === filter);
        card.classList.toggle('hide', !match);
        if(match) visibleCount++;
      });

      if(featured){
        var featMatch = (filter === 'all' || featured.getAttribute('data-cat') === filter);
        featured.classList.toggle('hide', !featMatch);
      }

      if(emptyMsg) emptyMsg.classList.toggle('show', visibleCount === 0);
      if(pager) pager.style.display = (filter === 'all') ? 'flex' : 'none';
    });
  });
})();
</script>

</body>
</html>