/* Premium enroll redesign — /jogos */

.enroll-page{
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(900px 650px at 78% 18%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 650px at 58% 88%, rgba(255,255,255,.04), transparent 62%),
    linear-gradient(180deg, rgba(10,10,12,1), rgba(12,12,16,1) 32%, rgba(8,8,10,1));
  position:relative;
}

.enroll-page:before{
  content:'';
  position:fixed;
  inset:-2px;
  pointer-events:none;
  opacity:.22;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.45), transparent 60%);
  mix-blend-mode:overlay;
  filter: blur(.15px);
}

.enroll-page:after{
  content:'';
  position:fixed;
  inset:-2px;
  pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity:.95;
}

.games{
  position:relative;
  padding-bottom: 10px;
}

.games-head{
  align-items:flex-start;
}

.enroll-title{
  font-size: 32px;
  font-weight: 1000;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.05;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.70));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.games-head .muted{
  max-width: 760px;
  font-size: 14px;
  opacity: .86;
  line-height: 1.35;
}

/* Grid: 3 por linha no desktop, com cards 15% menores */
.games-grid{
  --cardW: 404px; /* 475px * 0.85 */
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  justify-content:center;
  align-items:start;
  max-width: calc((var(--cardW) * 3) + 36px);
  margin-left:auto;
  margin-right:auto;
  padding: 0 12px;
}

.game-card{
  width: 100%;
  max-width: var(--cardW);
  display:block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:
    0 26px 80px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.07) inset;
}

.game-card:before{
  width: 10px;
  opacity: .95;
}

.game-card:hover{
  transform: translateY(-6px);
}

.game-card:hover .game-banner{
  box-shadow: 0 18px 60px rgba(0,0,0,.62);
}

.game-banner{
  margin: 14px;
  width: calc(100% - 28px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  overflow:hidden;
}

.game-banner-img{
  display:block;
  width: 100%;
  height: auto;
}

/* Details area */
.game-meta{
  padding: 6px 16px 16px;
}

.game-title{
  font-size: 15px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.rules-cta{
  margin: 0 14px;
  width: calc(100% - 28px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  padding: 11px 12px;
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}

.rules-cta:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  background: rgba(0,0,0,.34);
}

/* Premium enroll button */
.enroll-btn{
  width: 100%;
  max-width: 360px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.96);
  text-decoration:none;
  font-weight: 1000;
  letter-spacing: .9px;
  text-transform: uppercase;
  position:relative;
  overflow:hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.50);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.enroll-btn:before{
  content:'';
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(500px 180px at 18% 18%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(500px 180px at 80% 70%, rgba(0,0,0,.25), transparent 60%);
  opacity: .85;
  pointer-events:none;
}

.enroll-btn:after{
  content:'';
  position:absolute;
  top:-40%;
  left:-35%;
  width: 65%;
  height: 180%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.30) 45%, transparent 70%);
  transform: translateX(-40%) rotate(12deg);
  opacity: 0;
  pointer-events:none;
}

.enroll-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 26px 70px rgba(0,0,0,.58);
}

.enroll-btn:hover:after{
  opacity: .9;
  animation: enrollShine 900ms ease both;
}

@keyframes enrollShine{
  from{ transform: translateX(-60%) rotate(12deg); }
  to{ transform: translateX(220%) rotate(12deg); }
}

.enroll-btn:active{
  transform: translateY(0px) scale(.99);
}

.enroll-btn__label{ font-size: 12px; }
.enroll-btn__sub{ font-size: 10px; opacity: .80; letter-spacing: 1.2px; }

/* Per-game colors */
.enroll-btn--ilha{ background: linear-gradient(180deg, rgba(160,110,55,.98), rgba(95,55,25,.92)); }
.enroll-btn--casa{ background: linear-gradient(180deg, rgba(70,150,255,.98), rgba(30,75,175,.92)); }
.enroll-btn--arena{ background: linear-gradient(180deg, rgba(255,70,70,.98), rgba(160,18,18,.92)); }
.enroll-btn--cacadores{ background: linear-gradient(180deg, rgba(245,205,95,.98), rgba(165,120,18,.92)); }
.enroll-btn--fazenda{ background: linear-gradient(180deg, rgba(0,200,120,.98), rgba(0,110,70,.92)); }
.enroll-btn--mansao{ background: linear-gradient(180deg, rgba(165,120,255,.98), rgba(85,55,190,.92)); }

/* Match rows: keep consistent premium look */
.match-row{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.03);
}

/* Mobile tuning */
@media (max-width: 1200px){
  .games-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc((var(--cardW) * 2) + 18px);
  }
}

@media (max-width: 760px){
  .games-grid{
    grid-template-columns: 1fr;
    max-width: var(--cardW);
  }
}

@media (max-width: 520px){
  .enroll-title{ font-size: 26px; }
  .game-banner{ margin: 12px; width: calc(100% - 24px); }
  .rules-cta{ margin: 0 12px; width: calc(100% - 24px); }
}