/* ============================================
   Games Page — Premium Styles + Effects
   ============================================ */

.hero-games .hero-title{font-size:var(--fs-6)}

/* ── Scroll Progress Bar ── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--color-gold),var(--color-gold-light),var(--color-red-light),var(--color-gold));z-index:9999;transition:none;box-shadow:0 0 10px var(--color-gold)}

/* ── Cursor Glow ── */
.cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(212,168,67,0.06) 0%,transparent 70%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);transition:opacity 0.3s;opacity:0}
body:hover .cursor-glow{opacity:1}

/* ── Hero Depth Layers (parallax text) ── */
.hero-depth-layer{position:absolute;font-size:8rem;font-family:var(--font-display);color:rgba(255,255,255,0.015);letter-spacing:0.5em;white-space:nowrap;pointer-events:none;z-index:0;will-change:transform}
.hero-depth-1{top:15%;left:-5%;font-size:10rem}
.hero-depth-2{bottom:20%;right:-10%;font-size:6rem}

/* ── Gold Shimmer Text ── */
.gold-shimmer-text{background:linear-gradient(90deg,var(--color-gold) 0%,var(--color-gold-light) 25%,#fff 50%,var(--color-gold-light) 75%,var(--color-gold) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldShimmer 4s ease-in-out infinite}
@keyframes goldShimmer{0%,100%{background-position:200% 0}50%{background-position:-200% 0}}

/* ── Flying Cards ── */
.flying-card{position:absolute;font-size:3rem;color:var(--color-gold);opacity:0;pointer-events:none;z-index:6;will-change:transform}
.flying-card-1{top:10%;right:-30px}
.flying-card-2{bottom:25%;right:-20px}
.flying-card-3{top:50%;left:-25px;color:var(--color-red)}

/* ── Image Shimmer Overlay ── */
.img-shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);pointer-events:none;z-index:1;animation:imgShimmerSweep 3s ease-in-out infinite 2s}
@keyframes imgShimmerSweep{0%{left:-100%}100%{left:100%}}

/* ── Hover Lift ── */
.hover-lift{transition:transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(212,168,67,0.2)}

/* ── Hover Tilt (3D card effect) ── */
.hover-tilt{transition:transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}

/* ── Step glow (inner light on howto cards) ── */
.step-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:2px;background:linear-gradient(90deg,transparent,var(--color-gold),transparent);opacity:0;transition:opacity 0.4s,width 0.4s}
.howto-step:hover .step-glow{opacity:1;width:100%}

/* ── Suit Divider Animated ── */
.suit-divider-animated{transition:letter-spacing 0.6s var(--ease-out)}
.suit-divider-animated:hover{letter-spacing:0.5em}

/* ── CTA Pulse Button ── */
.btn-cta-pulse{position:relative}
.btn-cta-pulse::before{content:'';position:absolute;inset:-4px;border-radius:inherit;background:linear-gradient(135deg,var(--color-gold),var(--color-gold-light));z-index:-1;opacity:0;animation:ctaPulse 2.5s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:0.4;transform:scale(1.08)}}

/* ── Game Detail ── */
.game-detail-section{padding:var(--space-9) 0;position:relative}
.game-detail-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-7);align-items:center}
.game-detail-visual{position:relative}
.game-detail-img{overflow:hidden;border-radius:var(--radius-lg);position:relative}
.game-detail-img img{width:100%;display:block}
.floating-chip{position:absolute;z-index:5}
.chip-1{top:-20px;right:-10px}
.chip-2{bottom:-15px;left:-15px}
.game-detail-info{position:relative}
.game-detail-title{font-family:var(--font-display);font-size:var(--fs-5);font-weight:var(--fw-black);margin-bottom:var(--space-4);line-height:var(--lh-heading)}
.game-detail-desc{font-size:var(--fs-3);color:var(--color-text-primary);line-height:var(--lh-body);margin-bottom:var(--space-5);opacity:.85}
.game-features-list{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6)}
.game-features-list .glass-pill{color:var(--color-text-primary);border-color:var(--color-gold-dim)}
.game-feature-suit{color:var(--color-gold);font-size:var(--fs-2)}
.game-feature-suit.red{color:var(--color-red)}
.game-downloads{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.download-badge{display:inline-block}
.download-badge img{height:48px;width:auto}

/* ── How to Play ── */
.howto-section{padding:var(--space-9) 0;position:relative;overflow:hidden}
.howto-steps{display:flex;align-items:flex-start;justify-content:center;gap:var(--space-4);flex-wrap:wrap}
.howto-step{padding:var(--space-6) var(--space-5);text-align:center;min-width:220px;flex:1;max-width:320px;position:relative;overflow:hidden}
.howto-step h3{font-family:var(--font-display);font-size:var(--fs-3);font-weight:var(--fw-bold);color:var(--color-text-primary);margin-bottom:var(--space-3)}
.howto-step p{font-size:var(--fs-2);color:var(--color-text-primary);line-height:var(--lh-body);opacity:.85}
.howto-number{font-size:var(--fs-5);color:var(--color-gold);margin-bottom:var(--space-4);font-weight:var(--fw-black)}
.howto-number.red{color:var(--color-red)}
.howto-connector{width:60px;height:2px;background:linear-gradient(90deg,var(--color-gold),transparent);align-self:center;margin-top:var(--space-7);flex-shrink:0}

/* ── CTA overrides ── */
.cta-title{color:var(--color-text-primary)}
.cta-desc{color:var(--color-text-primary);opacity:.85}

/* ── Nav link hover underline slide ── */
.nav-link{position:relative}
.nav-link::before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--color-gold);transition:width 0.4s var(--ease-out)}
.nav-link:hover::before,.nav-link.active::before{width:100%}

/* ── Footer link hover ── */
.footer-col a{position:relative;display:inline-block}
.footer-col a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--color-gold);transition:width 0.3s var(--ease-out)}
.footer-col a:hover::after{width:100%}

/* ── Responsive ── */
@media(max-width:1024px){
  .game-detail-layout{grid-template-columns:1fr}
  .game-detail-visual{order:-1}
  .cursor-glow{display:none}
}
@media(max-width:768px){
  .hero-games .hero-title{font-size:var(--fs-5)}
  .howto-steps{flex-direction:column;align-items:center}
  .howto-connector{width:2px;height:40px;background:linear-gradient(180deg,var(--color-gold),transparent)}
  .download-badge img{height:40px}
  .hero-depth-layer{display:none}
  .cursor-glow{display:none}
}