:root {
  --bg-top: #0a1533;
  --bg-bottom: #162a56;
  --card-bg: #0f2248;
  --card-border: #3d76d8;
  --text-main: #f5f9ff;
  --text-sub: #b9caea;
  --hover-glow: 0 0 0 2px rgba(125, 196, 255, 0.45), 0 12px 28px rgba(15, 44, 97, 0.45);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text-main);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  padding: 24px 18px 22px;
  display: flex;
  flex-direction: column;
}

.hero {
  width: 100%;
  margin: 0 0 18px;
  text-align: left;
  padding-left: 0;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  letter-spacing: 0.03em;
  text-transform: none;
}

.hero > p {
  margin: 8px 0 0;
  color: var(--text-sub);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.hero-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

.hero-icons {
  display: inline-flex;
  gap: 6px;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1;
  transform: translateY(1px);
}

.hero-icon.spade,
.hero-icon.club {
  color: #b08a48;
}

.hero-icon.heart,
.hero-icon.diamond {
  color: #ff1e1e;
}

.hero-choose {
  margin: 0;
  color: var(--text-sub);
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.games-grid {
  --games-columns: 2;
  --games-gap: 8px;
  width: min(1500px, 100%);
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--games-gap);
  flex: 1 0 auto;
}

.game-card {
  text-decoration: none;
  color: inherit;
  border: 2px solid var(--card-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(24, 52, 104, 0.72), rgba(11, 31, 71, 0.92));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.game-card-pulse,
.game-card-novo,
.game-card-burst,
.game-card-drop,
.game-card-snake13,
.game-card-blackjack,
.game-card-avalanche,
.game-card-cubix,
.game-card-slash,
.game-card-comingsoon {
  background: linear-gradient(180deg, rgba(3, 14, 42, 0.95), rgba(2, 9, 28, 0.99));
}

.game-card-snake13 {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}

.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-4px);
  border-color: #8ec3ff;
  box-shadow: var(--hover-glow);
}

.game-preview {
  position: relative;
  height: clamp(130px, 12vw, 190px);
  border-bottom: 1px solid rgba(153, 196, 255, 0.28);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.preview-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.game-card-drop .preview-bg {
  background:
    linear-gradient(180deg, rgba(10, 32, 68, 0.65), rgba(8, 27, 59, 0.92)),
    repeating-linear-gradient(
      to right,
      rgba(140, 184, 255, 0.08) 0,
      rgba(140, 184, 255, 0.08) 24%,
      rgba(140, 184, 255, 0.2) 24.2%,
      rgba(140, 184, 255, 0.2) 25%
    );
}

.carddrop-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 24%,
      rgba(112, 160, 255, 0.06) 24%,
      rgba(112, 160, 255, 0.06) 25%,
      transparent 25%,
      transparent 49%,
      rgba(112, 160, 255, 0.06) 49%,
      rgba(112, 160, 255, 0.06) 50%,
      transparent 50%,
      transparent 74%,
      rgba(112, 160, 255, 0.06) 74%,
      rgba(112, 160, 255, 0.06) 75%,
      transparent 75%
    );
}

.game-card-poker .preview-bg {
  background:
    linear-gradient(180deg, rgba(7, 29, 40, 0.78), rgba(8, 24, 50, 0.94)),
    repeating-linear-gradient(
      to right,
      rgba(151, 219, 197, 0.07) 0,
      rgba(151, 219, 197, 0.07) 19%,
      rgba(151, 219, 197, 0.16) 19.3%,
      rgba(151, 219, 197, 0.16) 20%
    );
}

.poker-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 24.5%,
      rgba(112, 160, 255, 0.05) 24.5%,
      rgba(112, 160, 255, 0.05) 25.5%,
      transparent 25.5%,
      transparent 49.5%,
      rgba(112, 160, 255, 0.05) 49.5%,
      rgba(112, 160, 255, 0.05) 50.5%,
      transparent 50.5%,
      transparent 74.5%,
      rgba(112, 160, 255, 0.05) 74.5%,
      rgba(112, 160, 255, 0.05) 75.5%,
      transparent 75.5%
    );
}

.game-card-suit .preview-bg {
  background:
    radial-gradient(circle at 16% 25%, rgba(98, 165, 255, 0.22), rgba(98, 165, 255, 0)),
    radial-gradient(circle at 82% 65%, rgba(122, 214, 255, 0.2), rgba(122, 214, 255, 0)),
    linear-gradient(180deg, rgba(22, 46, 92, 0.74), rgba(11, 28, 58, 0.95));
}

.game-card-burst .preview-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(103, 180, 255, 0.2), rgba(103, 180, 255, 0)),
    linear-gradient(180deg, rgba(16, 37, 77, 0.78), rgba(10, 26, 55, 0.95));
}

.game-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 15, 34, 0.08), rgba(6, 15, 34, 0.5));
  z-index: 2;
}

.game-card-pulse .game-preview,
.game-card-novo .game-preview,
.game-card-burst .game-preview,
.game-card-drop .game-preview,
.game-card-snake13 .game-preview,
.game-card-blackjack .game-preview,
.game-card-avalanche .game-preview,
.game-card-cubix .game-preview,
.game-card-slash .game-preview,
.game-card-comingsoon .game-preview {
  background: linear-gradient(180deg, #07173f 0%, #04112f 58%, #020a1f 100%);
}

.game-card-snake13 .game-preview::after,
.game-card-blackjack .game-preview::after,
.game-card-avalanche .game-preview::after,
.game-card-cubix .game-preview::after,
.game-card-slash .game-preview::after,
.game-card-comingsoon .game-preview::after {
  display: none;
}

.game-card-pulse .game-preview::after,
.game-card-novo .game-preview::after,
.game-card-burst .game-preview::after,
.game-card-drop .game-preview::after,
.game-card-blackjack .game-preview::after,
.game-card-avalanche .game-preview::after,
.game-card-cubix .game-preview::after,
.game-card-slash .game-preview::after,
.game-card-comingsoon .game-preview::after {
  background: linear-gradient(180deg, rgba(2, 8, 22, 0.28), rgba(1, 5, 16, 0.7));
}

.preview-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center !important;
  display: block;
  z-index: 1;
  transform: scaleY(1.14) !important;
  transform-origin: center center !important;
}

.game-play-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  min-width: 56px;
  height: 26px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(116, 181, 255, 0.85);
  background: linear-gradient(180deg, rgba(46, 128, 240, 0.98), rgba(24, 86, 182, 0.98));
  color: #eaf4ff;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(4, 20, 46, 0.65);
  box-shadow: 0 6px 14px rgba(3, 20, 49, 0.45);
  pointer-events: none;
}

.game-card-poker .preview-image {
  transform: scale(1.06, 1.14) !important;
  transform-origin: center center !important;
}

.game-card-burst .preview-image {
  object-position: center center !important;
  transform: scaleY(1.14) !important;
  transform-origin: center center !important;
}

.game-card-pulse .preview-image {
  object-position: center center !important;
  transform: scaleY(1.14) !important;
  transform-origin: center center !important;
}

.game-card-suit .preview-image {
  transform: translateY(10px) scaleY(1.24) !important;
  transform-origin: center center !important;
}

.game-card-novo .preview-image {
  object-position: center center !important;
  transform: scaleY(1.14) !important;
  transform-origin: center center !important;
}

.game-card-drop .preview-image {
  object-position: center center !important;
  transform: scaleY(1.14) !important;
  transform-origin: center center !important;
}

.game-card-blackjack .preview-image,
.game-card-avalanche .preview-image,
.game-card-slash .preview-image,
.game-card-snake13 .preview-image {
  object-position: center center !important;
  transform: scaleY(1.1) !important;
  transform-origin: center center !important;
  z-index: 3;
}

.game-card-cubix .preview-image {
  object-position: center center !important;
  transform: scaleY(1.1) !important;
  transform-origin: center center !important;
  z-index: 3;
}

.game-meta {
  margin-top: auto;
  padding: 8px 8px 8px;
  text-align: center;
}

.game-meta h2 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.12;
  letter-spacing: 0.02em;
}

@media (min-width: 861px) {
  .games-grid {
    --games-columns: 4;
    --games-gap: 10px;
    width: min(1500px, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--games-gap);
  }

  .game-preview {
    height: clamp(124px, 10.6vw, 172px);
  }

  .game-meta h2 {
    font-size: 1.02rem;
  }
}

@media (min-width: 1200px) {
  .games-grid {
    --games-columns: 5;
    --games-gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--games-gap);
  }

  .game-preview {
    height: clamp(120px, 8.2vw, 154px);
  }

  .game-meta h2 {
    font-size: 0.96rem;
  }
}

.fx {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  animation-play-state: running !important;
  will-change: transform, opacity, top;
}

/* TEMP: animacoes da home desativadas por enquanto.
   Mantidas abaixo para reativacao futura. */

.drop-fall {
  width: 38px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid rgba(240, 248, 255, 0.8);
  background: linear-gradient(180deg, #ffffff 0%, #dbe9ff 100%);
  box-shadow: 0 6px 12px rgba(4, 18, 43, 0.35);
  top: -64px;
  transform: translateX(-50%);
  animation: dropFall 4.2s linear infinite;
}

.drop-fall.f1 { left: 22%; animation-delay: 0s; }
.drop-fall.f2 { left: 50%; animation-delay: 1.4s; }
.drop-fall.f3 { left: 78%; animation-delay: 2.8s; }

.drop-slot {
  bottom: 18px;
  width: 42px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(128, 182, 255, 0.55);
  background: rgba(40, 78, 145, 0.35);
}

.drop-slot.s1 { left: 12%; }
.drop-slot.s2 { left: 34%; }
.drop-slot.s3 { left: 56%; }
.drop-slot.s4 { left: 78%; }

.poker-card {
  width: 38px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #e5efff 100%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
  top: -62px;
  transform: translateX(-50%);
  animation: pokerDrop 5.8s linear infinite;
}

.poker-card.p1 { left: 22%; animation-delay: 0s; }
.poker-card.p2 { left: 50%; animation-delay: 1.2s; }
.poker-card.p3 { left: 78%; animation-delay: 2.4s; }

.poker-slot {
  bottom: 14px;
  width: 40px;
  height: 22px;
  border: 1px solid rgba(218, 235, 255, 0.7);
  border-radius: 6px;
  background: rgba(35, 70, 135, 0.45);
  animation: slotPulse 4.8s ease-in-out infinite;
}

.poker-slot.s1 { left: 12%; animation-delay: 0s; }
.poker-slot.s2 { left: 34%; animation-delay: 0.4s; }
.poker-slot.s3 { left: 56%; animation-delay: 0.8s; }
.poker-slot.s4 { left: 78%; animation-delay: 1.2s; }

.suit-big {
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.08));
  transform: translate(-50%, -50%) scale(0.94);
  animation: suitGlow 6s ease-in-out infinite;
}

.suit-big.h { left: 12%; top: 42%; color: #ff7070; animation-delay: 0s; }
.suit-big.d { left: 34%; top: 48%; color: #ffae63; animation-delay: 0.8s; }
.suit-big.c { left: 58%; top: 40%; color: #dfe9ff; animation-delay: 1.6s; }
.suit-big.s { left: 80%; top: 50%; color: #f4f7ff; animation-delay: 2.4s; }

.suit-small {
  font-size: 1.15rem;
  opacity: 0.28;
  bottom: 42px;
  transform: translateX(-50%);
}

.suit-small.sh1 { left: 16%; color: #ff8d8d; }
.suit-small.sh2 { left: 38%; color: #ffba7f; }
.suit-small.sh3 { left: 60%; color: #dfe9ff; }
.suit-small.sh4 { left: 82%; color: #f4f7ff; }

.burst-card {
  left: 50%;
  top: 42%;
  width: 50px;
  height: 70px;
  border-radius: 9px;
  border: 1px solid rgba(225, 242, 255, 0.85);
  background: linear-gradient(180deg, #ffffff 0%, #dcecff 100%);
  box-shadow: 0 8px 18px rgba(7, 22, 46, 0.35);
  transform: translate(-50%, -50%);
  animation: burstCardLoop 3.8s ease-in-out infinite;
}

.burst-piece {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(180deg, #9ed0ff 0%, #3f8af5 100%);
  box-shadow: 0 4px 12px rgba(20, 61, 126, 0.4);
  transform: translate(-50%, -50%);
}

.burst-piece.b1 {
  left: 28%;
  top: 56%;
  animation: burstPiece1 3.8s ease-in-out infinite;
}
.burst-piece.b2 {
  left: 42%;
  top: 42%;
  animation: burstPiece2 3.8s ease-in-out infinite;
}
.burst-piece.b3 {
  left: 58%;
  top: 58%;
  animation: burstPiece3 3.8s ease-in-out infinite;
}
.burst-piece.b4 {
  left: 74%;
  top: 44%;
  animation: burstPiece4 3.8s ease-in-out infinite;
}

.site-footer {
  width: min(1120px, 100%);
  margin: auto auto 0;
  padding-top: 10px;
  border-top: 1px solid rgba(188, 217, 255, 0.24);
  color: var(--text-sub);
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.footer-links a {
  color: #e6f1ff;
  text-decoration: none;
}

.footer-links .footer-play-link {
  font-size: 0.72rem;
  opacity: 0.62;
  color: var(--bg-bottom);
}

.footer-links .footer-play-link:hover {
  color: #60a5fa;
}

.footer-links a:hover {
  text-decoration: underline;
}

@keyframes dropFall {
  0% {
    top: -64px;
    opacity: 0;
    transform: translateX(-50%) rotate(-5deg);
  }
  10% {
    opacity: 0.95;
  }
  68% {
    top: 160px;
    opacity: 0.95;
    transform: translateX(-50%) rotate(3deg);
  }
  82% {
    opacity: 0;
  }
  100% {
    top: 160px;
    opacity: 0;
    transform: translateX(-50%) rotate(3deg);
  }
}

@keyframes pokerDrop {
  0% {
    top: -62px;
    opacity: 0;
    transform: translateX(-50%) rotate(-4deg);
  }
  10% {
    opacity: 0.9;
  }
  64% {
    top: 152px;
    opacity: 0.9;
    transform: translateX(-50%) rotate(2deg);
  }
  78% {
    opacity: 0;
  }
  100% {
    top: 152px;
    opacity: 0;
    transform: translateX(-50%) rotate(2deg);
  }
}

@keyframes slotPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(147, 197, 253, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 10px rgba(147, 197, 253, 0.55);
    transform: scale(1.03);
  }
}

@keyframes suitGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.65;
  }
  25% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.82;
  }
  75% {
    transform: translate(-50%, -50%) scale(1.02);
    opacity: 0.95;
  }
}

@keyframes burstLoop {
  0% { transform: translate(0, 0) scale(0.9) rotate(0deg); opacity: 0.5; }
  30% { transform: translate(-12px, -10px) scale(1.2) rotate(45deg); opacity: 0.92; }
  60% { transform: translate(14px, 6px) scale(0.98) rotate(96deg); opacity: 0.84; }
  100% { transform: translate(0, 0) scale(0.9) rotate(140deg); opacity: 0.5; }
}

@keyframes burstCardLoop {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.96);
    opacity: 0.82;
  }
  50% {
    transform: translate(-50%, -50%) rotate(3deg) scale(1.04);
    opacity: 1;
  }
}

@keyframes burstPiece1 {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(0.9); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) translate(-10px, -12px) scale(1.15); opacity: 0.95; }
}

@keyframes burstPiece2 {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(0.92); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) translate(10px, -14px) scale(1.18); opacity: 0.95; }
}

@keyframes burstPiece3 {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(0.9); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) translate(12px, 8px) scale(1.16); opacity: 0.92; }
}

@keyframes burstPiece4 {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(0.92); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) translate(-12px, 10px) scale(1.14); opacity: 0.92; }
}

@media (max-width: 860px) {
  .hero-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero-choose {
    position: static;
    transform: none;
    flex-basis: 100%;
    width: 100%;
    margin-top: 6px;
    text-align: center;
  }

  .games-grid {
    --games-columns: 2;
    --games-gap: 10px;
    width: min(760px, 94vw);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--games-gap);
  }
}

@media (max-width: 620px) {
  .games-grid {
    --games-columns: 1;
    --games-gap: 12px;
    width: min(320px, 86vw);
    grid-template-columns: 1fr;
    gap: var(--games-gap);
  }
}

.game-card-comingsoon {
  border-style: dashed;
  border-color: rgba(151, 186, 236, 0.76);
}

.game-card-comingsoon:hover,
.game-card-comingsoon:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: rgba(151, 186, 236, 0.76);
}

.coming-soon-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: 8px 12px;
  border: 1px solid rgba(180, 212, 255, 0.68);
  border-radius: 999px;
  color: #d8e9ff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(7, 28, 64, 0.82);
}

.homepage-seo {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #cfd8e3;
  text-align: left;
}

.homepage-seo h1 {
  font-size: 28px;
  margin-bottom: 12px;
  color: #ffffff;
}

.homepage-seo p {
  margin-bottom: 12px;
}