/* ======================= */
/* VelhaPix — Gold & Black */
/* ======================= */
:root{
  --bg:#0B0B0D;
  --surface:#121214;
  --card:#16161A;
  --border:#242429;

  --gold:#D4AF37;            /* Ouro principal */
  --gold-hover:#C9A227;      /* Hover */
  --gold-bright:#F5C542;     /* Brilho/realce */
  --gold-grad: linear-gradient(135deg,#F5D76E 0%,#D4AF37 45%,#C9A227 100%);

  --text:#F5F5F5;
  --text-2:#B3B3B3;
  --muted:#8A8A8A;

  --success:#25D366;
  --danger:#FF4D4D;
  --info:#4DA3FF;

  --glow: 0 0 18px rgba(212,175,55,.25);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Header Styles */
.header{
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212,175,55,.18);
  position: fixed; top:0; left:0; right:0; z-index:1000;
  padding: 1rem 0;
}

.header-container{
  max-width:1400px; margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
}

.logo{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.5rem; font-weight:800;
  color: var(--gold); text-decoration:none;
  text-shadow: 0 0 12px rgba(212,175,55,.25);
}

/* suporte pra imagem de logo */
.logo-image{
  height:60px; width:auto; max-width:400px; object-fit:contain; display:block;
}

.logo-icon{
  width:32px; height:32px; border-radius:8px;
  background: var(--gold-grad);
  display:flex; align-items:center; justify-content:center;
  color:#0B0B0D; font-weight:bold; font-size:1.2rem;
  box-shadow: var(--glow); border:1px solid rgba(212,175,55,.35);
}

.nav-menu{ display:flex; align-items:center; gap:2rem; list-style:none; }

.nav-menu a{
  color:#e5e7eb; text-decoration:none; font-weight:500;
  transition:all .3s ease; position:relative;
}
.nav-menu a:hover{ color: var(--gold); }
.nav-menu a::after{
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background: var(--gold);
  transition: width .3s ease;
}
.nav-menu a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:1rem; }

.btn-login{
  color:#e5e7eb; text-decoration:none; font-weight:500; transition:color .3s ease;
}
.btn-login:hover{ color: var(--gold); }

.btn-register{
  background: var(--gold-grad);
  color:#0B0B0D; text-decoration:none;
  padding:.75rem 1.5rem; border-radius:12px; font-weight:600;
  transition: all .3s ease;
  box-shadow: var(--glow);
  display:flex; align-items:center; gap:.5rem;
  border:1px solid rgba(212,175,55,.35);
}
.btn-register:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212,175,55,.35);
}

/* Hero Section (banner/carrossel de topo) */
.hero-section{
  margin-top:80px; padding:4rem 0; background: var(--bg);
  position:relative; overflow:hidden;
}
.hero-container{ max-width:1400px; margin:0 auto; padding:0 2rem; }

.hero-banner{
  border-radius:24px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
}

/* granulado leve */
.hero-banner::before{
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity:.3;
}

.hero-content{ position:relative; z-index:2; }

.hero-title{
  font-size:4rem; font-weight:900; color:var(--text);
  text-shadow:2px 2px 4px rgba(0,0,0,.3);
  margin-bottom:.5rem; line-height:1.1;
}

.hero-subtitle{
  font-size:3.5rem; font-weight:900; color: var(--gold);
  text-shadow: 0 0 24px rgba(212,175,55,.25);
  margin-bottom:2rem; line-height:1.1;
}

.hero-cta{
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border:1px solid rgba(212,175,55,.28);
  color: var(--text);
  padding:1rem 2rem; border-radius:16px; font-weight:700; font-size:1.1rem;
  text-decoration:none; display:inline-block; transition: all .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.hero-cta:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
  background: rgba(245,197,66,.12);
  border-color: rgba(212,175,55,.45);
}

.hero-visuals{
  position:relative; z-index:2; display:flex; align-items:center; gap:2rem;
}

/* (mantive a ilustração, só dei leve ajuste de matiz pra combinar) */
.money-stack{
  width:200px; height:120px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120"><rect x="10" y="20" width="180" height="80" rx="8" fill="%23252525" stroke="%23D4AF37" stroke-width="2"/><text x="100" y="70" text-anchor="middle" fill="%23D4AF37" font-family="Arial" font-size="24" font-weight="bold">100</text><text x="100" y="45" text-anchor="middle" fill="%23B3B3B3" font-family="Arial" font-size="10">VELHAPIX</text></svg>');
  background-size:contain; background-repeat:no-repeat;
  border-radius:8px; position:relative; transform: rotate(-5deg);
  box-shadow: var(--glow);
}
.money-stack::after{
  content:''; position:absolute; top:-10px; left:-10px; width:100%; height:100%;
  background: inherit; opacity:.6; z-index:-1;
}

/* Steps Section */
.steps-section{
  padding:4rem 2rem;
  background:
    radial-gradient(circle at 20% 50%, rgba(212,175,55,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(245,197,66,.05) 0%, transparent 50%);
}
.steps-container{ max-width:1200px; margin:0 auto; }
.steps-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem; position:relative;
}

/* Connecting Lines */
.steps-grid::before{
  content:''; position:absolute; top:50px; left:12.5%; right:12.5%; height:2px;
  background: linear-gradient(90deg,
    var(--gold) 0%, var(--gold) 33%,
    rgba(212,175,55,.28) 33%, rgba(212,175,55,.28) 66%,
    rgba(212,175,55,.28) 66%, rgba(212,175,55,.28) 100%);
  z-index:1;
}

.step-item{ text-align:center; position:relative; z-index:2; transition: all .3s ease; }
.step-item:hover{ transform: translateY(-8px); }

.step-icon{
  width:100px; height:100px; margin:0 auto 1.5rem;
  background: linear-gradient(145deg, rgba(20,20,20,.8) 0%, rgba(10,10,10,.9) 100%);
  border:2px solid rgba(212,175,55,.35);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:#9aa0a6; transition: all .4s ease;
  backdrop-filter: blur(20px); position:relative; overflow:hidden;
  box-shadow: var(--glow);
}
.step-icon::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at center, rgba(245,197,66,.16) 0%, transparent 70%);
  opacity:0; transition: opacity .3s ease;
}
.step-icon:hover::before, .step-icon.active::before{ opacity:1; }
.step-icon.active{
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 30px rgba(212,175,55,.28), 0 0 60px rgba(212,175,55,.12);
  background: linear-gradient(145deg, rgba(245,197,66,.08) 0%, rgba(212,175,55,.06) 100%);
}
.step-icon:hover{ border-color: rgba(212,175,55,.6); color: var(--gold); transform: scale(1.05); }

.step-title{
  font-size:1.25rem; font-weight:700; color: var(--text);
  margin-bottom:.75rem; transition: color .3s ease;
}
.step-title.active{ color: var(--gold); }
.step-item:hover .step-title{ color: var(--gold); }

.step-description{
  font-size:.95rem; color: var(--text-2); line-height:1.5; transition: color .3s ease;
}
.step-item:hover .step-description{ color:#e5e7eb; }

/* Games Section */
.games-section{
  padding:4rem 2rem;
  background:
    radial-gradient(circle at 20% 80%, rgba(212,175,55,.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(245,197,66,.06) 0%, transparent 50%);
}
.games-container{ max-width:1200px; margin:0 auto; }
.games-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(400px,1fr)); gap:2rem; }

.game-category{
  background: linear-gradient(145deg, rgba(20,20,20,.82) 0%, rgba(10,10,10,.92) 100%);
  border:1px solid rgba(212,175,55,.28);
  border-radius:24px; padding:3rem 2rem; text-align:center; position:relative; overflow:hidden;
  transition: all .4s ease; backdrop-filter: blur(20px);
}
.game-category::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(245,197,66,.14) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(212,175,55,.1) 0%, transparent 50%);
  opacity:0; transition: opacity .4s ease; pointer-events:none;
}
.game-category:hover::before{ opacity:1; }
.game-category:hover{
  transform: translateY(-8px);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 40px rgba(212,175,55,.12);
}

.game-icon{
  width:120px; height:120px; margin:0 auto 2rem;
  background: linear-gradient(135deg, rgba(245,197,66,.16) 0%, rgba(212,175,55,.1) 100%);
  border:3px solid rgba(212,175,55,.35);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:3rem; color: var(--gold); transition: all .4s ease; position:relative; z-index:2;
}
.game-category:hover .game-icon{
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(245,197,66,.22) 0%, rgba(212,175,55,.16) 100%);
  box-shadow: 0 0 40px rgba(212,175,55,.28), 0 0 80px rgba(212,175,55,.12);
  transform: scale(1.05);
}

.game-title{
  font-size:2rem; font-weight:800; color: var(--text);
  margin-bottom:1rem; letter-spacing:1px; position:relative; z-index:2; transition: color .3s ease;
}
.game-category:hover .game-title{ color: var(--gold); }

.game-description{
  font-size:1rem; color: var(--text-2); margin-bottom:2rem;
  line-height:1.6; position:relative; z-index:2; transition: color .3s ease;
}
.game-category:hover .game-description{ color:#e5e7eb; }

.game-btn{
  background: var(--gold-grad);
  color:#0B0B0D; border:none; padding:1rem 2rem; border-radius:50px;
  font-size:1rem; font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; gap:.75rem; transition: all .3s ease;
  position:relative; z-index:2; box-shadow: var(--glow); text-transform:uppercase; letter-spacing:.5px;
  border:1px solid rgba(212,175,55,.35);
}
.game-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212,175,55,.35);
  filter: brightness(1.03);
}
.game-btn i{ font-size:1.1rem; transition: transform .3s ease; }
.game-btn:hover i{ transform: translateX(4px); }

/* ==== Ajustes do carrossel de vencedores (ganhos.php) ==== */
/* Mata qualquer animação antiga e deixa o JS (rAF) controlar o movimento */
.ttt-wins__track{
  animation:none !important;
  transform: translate3d(0,0,0);
  will-change: transform;
  margin:0; padding:.9rem; list-style:none;
  display:flex; gap:.9rem; width:max-content;
  user-select:none; cursor:grab;
}
.ttt-wins__viewport.is-dragging .ttt-wins__track{ cursor:grabbing; }

/* Mobile Responsive (sections) */
@media (max-width:768px){
  .nav-menu{ display:none; }

  .hero-banner{ flex-direction:column; text-align:center; gap:2rem; }
  .hero-title{ font-size:2.5rem; }
  .hero-subtitle{ font-size:2rem; }

  /* Banner/hero (imagens de fundo): manter ~80% sem corte */
  .carousel-container{
    width:80%;
    max-width:80%;
    margin:0 auto !important;
    height:auto;                /* deixa a altura fluir */
  }
  .hero-slide{
    position:relative;
    background-size:contain !important; /* evita corte */
    background-position:center !important;
    background-repeat:no-repeat !important;
    min-height:200px;
  }

  .logo-image{ height:44px; max-width:260px; }

  .steps-section,.games-section{ padding:3rem 1rem; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  .steps-grid::before{ display:none; }
  .step-icon{ width:80px; height:80px; font-size:2rem; margin-bottom:1rem; }
  .step-title{ font-size:1.1rem; margin-bottom:.5rem; }
  .step-description{ font-size:.9rem; }
  .games-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .game-category{ padding:2rem 1.5rem; border-radius:20px; }
  .game-icon{ width:100px; height:100px; font-size:2.5rem; margin-bottom:1.5rem; }
  .game-title{ font-size:1.6rem; margin-bottom:.75rem; }
  .game-description{ font-size:.9rem; margin-bottom:1.5rem; }
  .game-btn{ padding:.875rem 1.75rem; font-size:.9rem; }
}

@media (max-width:480px){
  .steps-grid{ grid-template-columns:1fr; }
  .hero-title{ font-size:2rem; }
  .hero-subtitle{ font-size:1.5rem; }

  /* Banner ainda mais compacto */
  .hero-slide{ min-height:180px; }
  .logo-image{ height:40px; max-width:220px; }
}

/* Animation on scroll */
.step-item, .game-category{
  opacity:0; transform: translateY(30px); transition: all .6s ease;
}
.step-item.animate-fade-in-up, .game-category.animate-fade-in-up{
  opacity:1; transform: translateY(0);
}
.step-item:nth-child(1){ transition-delay:.1s; }
.step-item:nth-child(2){ transition-delay:.2s; }
.step-item:nth-child(3){ transition-delay:.3s; }
.step-item:nth-child(4){ transition-delay:.4s; }
.game-category:nth-child(1){ transition-delay:.1s; }
.game-category:nth-child(2){ transition-delay:.3s; }

/* Prize Carousel (se usar este carrossel separado) */
.prize-carousel{
  padding:2rem 0; background: var(--bg); overflow:hidden;
}
.prize-track{
  display:flex; gap:1.5rem; animation: scroll 30s linear infinite; padding:1rem 0;
}
.prize-item{
  min-width:200px;
  background: linear-gradient(135deg, rgba(245,197,66,.12), rgba(212,175,55,.07));
  border:1px solid rgba(212,175,55,.28);
  border-radius:16px; padding:1.5rem; text-align:center; position:relative; white-space:nowrap;
  box-shadow: var(--glow);
}
.prize-icon{
  width:60px; height:60px; margin:0 auto 1rem;
  background: var(--gold-grad);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#0B0B0D; font-size:1.5rem; border:1px solid rgba(212,175,55,.35);
}
.prize-name{
  font-size:.9rem; font-weight:600; color: var(--text); margin-bottom:.5rem;
}
.prize-value{
  font-size:1.1rem; font-weight:800; color: var(--gold);
}
@keyframes scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Footer */
.footer{
  background:#0f0f0f;
  border-top:1px solid rgba(212,175,55,.18);
  padding:3rem 0 2rem;
}
.footer-container{ max-width:1400px; margin:0 auto; padding:0 2rem; }
.footer-content{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; margin-bottom:2rem;
}
.footer-brand{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.5rem; font-weight:800; color: var(--gold);
  margin-bottom:1rem; text-shadow: 0 0 12px rgba(212,175,55,.25);
}
.footer-description{ color: var(--text-2); line-height:1.6; margin-bottom:1rem; }
.footer-section h3{ color: var(--text); font-weight:700; margin-bottom:1rem; }
.footer-links{ list-style:none; }
.footer-links li{ margin-bottom:.5rem; }
.footer-links a{
  color: var(--text-2); text-decoration:none; transition: color .3s ease;
}
.footer-links a:hover{ color: var(--gold); }
.footer-bottom{
  border-top:1px solid rgba(212,175,55,.18);
  padding-top:2rem; text-align:center; color:#6b7280; font-size:.9rem;
}

/* Scrollbar (Gold) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: transparent !important; }
::-webkit-scrollbar-thumb{ background: var(--gold); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--gold-hover); }