/* Play Wild Pokies Casino Australia — Stylesheet */
/* Dark bronze/gold theme for playwildpokie.com */

/* ============================================
   CSS VARIABLES - Color Scheme
   ============================================ */
:root {
  /* Background colors */
  --bg-primary: #0d0d0d;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #141414;
  --bg-card: #1e1a18;
  --bg-card-alt: #1c1916;
  --bg-card-hover: #2a2520;
  --bg-header: rgba(13, 13, 13, 0.98);

  /* Accent colors */
  --gold-primary: #FFB800;
  --gold-light: #FFC933;
  --gold-dark: #CC9300;
  --gold-gradient: linear-gradient(180deg, #FFB800 0%, #FF8C00 100%);
  --orange: #FF6B00;
  --orange-light: #FF8C33;
  --red: #FF3333;

  /* Button colors */
  --btn-green: #4CAF50;
  --btn-green-hover: #45a049;
  --btn-green-dark: #3d8b40;
  --btn-gold: linear-gradient(180deg, #FFB800 0%, #FF8C00 100%);
  --btn-gold-hover: linear-gradient(180deg, #FFC933 0%, #FFB800 100%);

  /* Text colors */
  --text-white: #FFFFFF;
  --text-light: #F5F5F5;
  --text-gray: #AAAAAA;
  --text-gray-light: #CCCCCC;
  --text-gold: #FFB800;
  --text-muted: #888888;

  /* Borders */
  --border-gold: 1px solid #FFB800;
  --border-gold-light: 1px solid rgba(255, 184, 0, 0.3);
  --border-dark: 1px solid #333333;
  --border-card: 1px solid #2a2520;

  /* Shadows */
  --shadow-gold: 0 0 20px rgba(255, 184, 0, 0.3);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-btn: 0 4px 15px rgba(0, 0, 0, 0.3);

  /* Spacing */
  --section-padding: 80px 0;
  --container-width: 1200px;
  --container-padding: 0 20px;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-white);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--gold-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--gold-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 700;
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-padding);
}

.section {
  padding: var(--section-padding);
}

.section-alt {
  background-color: var(--bg-secondary);
}

.section-dark {
  background-color: var(--bg-tertiary);
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-header);
  border-bottom: 1px solid rgba(255, 184, 0, 0.2);
  backdrop-filter: blur(10px);
}

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

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 50px;
  width: auto;
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-white);
}

.logo-text span {
  color: var(--gold-primary);
}

.header-buttons {
  display: flex;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}

.btn-green {
  background-color: var(--btn-green);
  color: var(--text-white);
  box-shadow: var(--shadow-btn);
}

.btn-green:hover {
  background-color: var(--btn-green-hover);
  transform: translateY(-2px);
  color: var(--text-white);
}

.btn-gold {
  background: var(--btn-gold);
  color: var(--bg-primary);
  box-shadow: var(--shadow-btn);
}

.btn-gold:hover {
  background: var(--btn-gold-hover);
  transform: translateY(-2px);
  color: var(--bg-primary);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--gold-primary);
  color: var(--gold-primary);
}

.btn-outline:hover {
  background: var(--gold-primary);
  color: var(--bg-primary);
}

.btn-large {
  padding: 16px 40px;
  font-size: 1.1rem;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  padding: 56px 0 40px;
  background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1510 50%, var(--bg-primary) 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center top, rgba(255, 184, 0, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Slow-drifting aurora wash behind the hero content */
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -30%;
  width: 120vw;
  height: 140%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 25% 40%, rgba(255, 107, 0, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 75% 55%, rgba(255, 184, 0, 0.14) 0%, transparent 45%);
  animation: hero-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.hero-inner h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0;
}

.hero-inner h1 span {
  color: var(--gold-primary);
}

.hero-inner .hero-intro {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-gray-light);
  margin: 0;
  max-width: 640px;
}

/* Attention-pulling primary CTA */
.btn-pulse {
  position: relative;
  animation: btn-glow 2.4s ease-in-out infinite;
}

.btn-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  border: 2px solid rgba(255, 184, 0, 0.55);
  animation: btn-ring 2.4s ease-out infinite;
  pointer-events: none;
}

.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Hero trust chips */
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--text-gray-light);
}

.trust-chips li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-chips li::before {
  content: '✓';
  color: var(--gold-primary);
  font-weight: 700;
}

.hero-image {
  position: relative;
  z-index: 1;
}

.hero-image img {
  border-radius: 16px;
  box-shadow: var(--shadow-gold);
}

/* Short-viewport tier: keep the whole hero above the fold on laptops */
@media (max-height: 720px) {
  .hero {
    padding: 36px 0 28px;
  }

  .hero-inner {
    gap: 14px;
  }

  .hero-inner h1 {
    font-size: clamp(1.55rem, 3vw, 2rem);
  }

  .hero-inner .hero-intro {
    font-size: 0.98rem;
  }

  .trust-chips {
    font-size: 0.82rem;
  }
}

/* Hero / CTA animations */
@keyframes hero-drift {
  from {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    transform: translateX(-46%) translateY(-24px) scale(1.08);
  }
}

@keyframes btn-glow {
  0%,
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 4px 15px rgba(0, 0, 0, 0.3),
      0 0 26px rgba(255, 184, 0, 0.55);
  }
}

@keyframes btn-ring {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .btn-pulse,
  .btn-pulse::after {
    animation: none;
  }

  .btn-pulse::after {
    opacity: 0.5;
    transform: none;
  }

  .btn-gold:hover {
    transform: none;
  }
}

/* ============================================
   WHY CHOOSE US SECTION
   ============================================ */
.why-choose {
  background: var(--bg-secondary);
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 2.2rem;
  color: var(--text-white);
  margin-bottom: 15px;
}

.section-header p {
  font-size: 1.1rem;
  color: var(--text-gray);
  max-width: 700px;
  margin: 0 auto;
}

.section-intro {
  font-size: 1.1rem;
  color: var(--text-gray-light);
  margin-bottom: 30px;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 40px;
}

.feature-card {
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: 12px;
  padding: 30px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold-primary);
  transform: translateY(-5px);
}

.feature-card h3 {
  color: var(--gold-primary);
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--text-gray-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ============================================
   CONTENT BLOCKS
   ============================================ */
.content-block {
  margin-bottom: 60px;
}

.content-block-with-image {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}

.content-block-with-image .content-block-text h3 {
  font-size: 1.6rem;
  color: var(--gold-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 184, 0, 0.2);
}

.content-block-with-image .content-block-text p {
  color: var(--text-gray-light);
  margin-bottom: 15px;
  font-size: 1rem;
}

.content-block-image {
  position: sticky;
  top: 100px;
}

.content-block-image a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-block-image a:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-gold);
}

.content-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

.content-block h3 {
  font-size: 1.6rem;
  color: var(--gold-primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 184, 0, 0.2);
}

.content-block p {
  color: var(--text-gray-light);
  margin-bottom: 15px;
  font-size: 1rem;
}

.content-block strong {
  color: var(--text-white);
}

.content-list {
  margin: 20px 0;
}

.content-list li {
  padding: 10px 0 10px 25px;
  position: relative;
  color: var(--text-gray-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.content-list li:last-child {
  border-bottom: none;
}

.content-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--gold-primary);
  border-radius: 50%;
}

.content-list li strong {
  color: var(--gold-primary);
}

/* ============================================
   BONUSES SECTION
   ============================================ */
.bonuses-section {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.bonus-table-wrapper {
  overflow-x: auto;
  margin: 30px 0;
}

.bonus-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.bonus-table th {
  background: linear-gradient(180deg, #2a2520 0%, #1e1a18 100%);
  color: var(--gold-primary);
  padding: 18px 20px;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 2px solid var(--gold-primary);
}

.bonus-table td {
  padding: 16px 20px;
  color: var(--text-gray-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 1rem;
}

.bonus-table tr:hover td {
  background: rgba(255, 184, 0, 0.05);
}

.bonus-table tr:last-child td {
  border-bottom: none;
}

/* ============================================
   VIP SECTION
   ============================================ */
.vip-tiers {
  display: inline-block;
  background: rgba(255, 184, 0, 0.1);
  padding: 10px 20px;
  border-radius: 8px;
  color: var(--gold-primary);
  font-weight: 600;
  margin: 15px 0;
}

.vip-perks {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 25px;
  margin: 20px 0;
  border: var(--border-gold-light);
}

.vip-perks li {
  padding: 12px 0 12px 30px;
  position: relative;
  color: var(--text-gray-light);
}

.vip-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--btn-green);
  font-weight: bold;
}

/* ============================================
   WAGERING SECTION
   ============================================ */
.wagering-info {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 30px;
  margin: 25px 0;
  border-left: 4px solid var(--gold-primary);
}

.wagering-info p {
  margin-bottom: 15px;
}

.wagering-list {
  margin: 20px 0;
}

.wagering-list li {
  padding: 10px 0;
  color: var(--text-gray-light);
  display: flex;
  align-items: center;
  gap: 10px;
}

.wagering-list li::before {
  content: '•';
  color: var(--gold-primary);
  font-size: 1.5rem;
}

/* ============================================
   GAMES SECTION
   ============================================ */
.games-section {
  background: var(--bg-tertiary);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.game-card {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: var(--border-card);
}

.game-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-gold);
}

.game-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.game-card-content {
  padding: 25px;
}

.game-card-content h3 {
  color: var(--gold-primary);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.game-card-content p {
  color: var(--text-gray-light);
  font-size: 0.95rem;
}

.games-list {
  columns: 2;
  column-gap: 30px;
  margin: 20px 0;
}

.games-list li {
  padding: 8px 0 8px 20px;
  position: relative;
  color: var(--text-gray-light);
  break-inside: avoid;
}

.games-list li::before {
  content: '🎰';
  position: absolute;
  left: 0;
  font-size: 0.9rem;
}

/* Jackpot amounts */
.jackpot-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--bg-card);
  border-radius: 8px;
  margin-bottom: 10px;
  border: var(--border-card);
}

.jackpot-list li span {
  color: var(--gold-primary);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ============================================
   PROMO BANNER
   ============================================ */
.promo-banner {
  border-radius: 16px;
  overflow: hidden;
  margin: 40px 0;
  box-shadow: var(--shadow-card);
}

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

/* ============================================
   BANKING SECTION
   ============================================ */
.banking-section {
  background: var(--bg-secondary);
}

.banking-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 30px 0;
}

.banking-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 30px;
  border: var(--border-card);
}

.banking-card h3 {
  color: var(--gold-primary);
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.banking-card p {
  color: var(--text-gray-light);
  margin-bottom: 15px;
}

.banking-card ul li {
  padding: 8px 0 8px 20px;
  position: relative;
  color: var(--text-gray-light);
}

.banking-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--btn-green);
}

/* Times and limits */
.times-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 25px 0;
}

.time-card {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 10px;
  border-left: 3px solid var(--gold-primary);
}

.time-card h5 {
  color: var(--gold-primary);
  font-size: 1rem;
  margin-bottom: 10px;
}

.time-card p {
  color: var(--text-gray-light);
  font-size: 0.95rem;
}

/* ============================================
   MOBILE SECTION
   ============================================ */
.mobile-section {
  background: var(--bg-primary);
}

.mobile-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 30px 0;
}

.mobile-feature {
  text-align: center;
  padding: 30px;
  background: var(--bg-card);
  border-radius: 12px;
  border: var(--border-card);
}

.mobile-feature h3 {
  color: var(--gold-primary);
  margin-bottom: 15px;
}

.mobile-feature p {
  color: var(--text-gray-light);
}

/* ============================================
   GETTING STARTED SECTION
   ============================================ */
.getting-started {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin: 40px 0;
}

.step-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  border: var(--border-card);
  position: relative;
}

.step-number {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--gold-gradient);
  color: var(--bg-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.step-card h3 {
  color: var(--gold-primary);
  margin-top: 15px;
  margin-bottom: 15px;
}

.step-card p {
  color: var(--text-gray-light);
  font-size: 0.95rem;
}

.step-card ul {
  text-align: left;
  margin: 15px 0;
}

.step-card ul li {
  padding: 5px 0;
  color: var(--text-gray-light);
  font-size: 0.9rem;
}

/* ============================================
   SECURITY SECTION
   ============================================ */
.security-section {
  background: var(--bg-tertiary);
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 30px 0;
}

.security-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 30px;
  border: var(--border-card);
}

.security-card h3 {
  color: var(--gold-primary);
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.security-card p {
  color: var(--text-gray-light);
  margin-bottom: 15px;
}

.security-card ul li {
  padding: 8px 0 8px 25px;
  position: relative;
  color: var(--text-gray-light);
}

.security-card ul li::before {
  content: '🔒';
  position: absolute;
  left: 0;
  font-size: 0.85rem;
}

.warning-box {
  background: rgba(255, 51, 51, 0.1);
  border: 1px solid var(--red);
  border-radius: 12px;
  padding: 25px;
  margin: 30px 0;
}

.warning-box h3 {
  color: var(--red);
  margin-bottom: 15px;
}

.warning-box p {
  color: var(--text-gray-light);
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-section {
  background: var(--bg-secondary);
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: var(--bg-card);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  border: var(--border-card);
}

.faq-question {
  padding: 20px 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: var(--bg-card-hover);
}

.faq-question h3 {
  color: var(--gold-primary);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.faq-toggle {
  color: var(--gold-primary);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 25px 20px;
  color: var(--text-gray-light);
  line-height: 1.7;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

/* ============================================
   WHY DIFFERENT SECTION
   ============================================ */
.why-different {
  background: linear-gradient(180deg, var(--bg-primary) 0%, #1a1510 50%, var(--bg-primary) 100%);
  position: relative;
}

.why-different::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(255, 184, 0, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.why-different-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.why-different-content p {
  color: var(--text-gray-light);
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.8;
}

.final-cta {
  margin-top: 40px;
  padding: 30px;
  background: rgba(255, 184, 0, 0.1);
  border: var(--border-gold-light);
  border-radius: 12px;
}

.final-cta p {
  font-size: 1.2rem;
  color: var(--text-white);
  margin-bottom: 25px;
  font-weight: 500;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--bg-primary);
  border-top: 1px solid rgba(255, 184, 0, 0.2);
  padding: 40px 0;
}

.footer-content {
  text-align: center;
}

.footer-disclaimer {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  font-style: italic;
}

.footer-disclaimer a {
  color: var(--gold-primary);
}

/* ============================================
   CTA SECTIONS
   ============================================ */
.cta-box {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.15) 0%, rgba(255, 140, 0, 0.1) 100%);
  border: var(--border-gold-light);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  margin: 40px 0;
}

.cta-box p {
  font-size: 1.15rem;
  color: var(--text-white);
  margin-bottom: 25px;
}

.cta-box strong {
  color: var(--gold-primary);
}

/* ============================================
   IMAGE GRID
   ============================================ */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
}

.image-grid img {
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease;
}

.image-grid img:hover {
  transform: scale(1.02);
}

/* ============================================
   TEXT EMPHASIS
   ============================================ */
.text-gold {
  color: var(--gold-primary);
}

.text-highlight {
  background: linear-gradient(180deg, transparent 60%, rgba(255, 184, 0, 0.3) 60%);
}

.text-bold {
  font-weight: 700;
  color: var(--text-white);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .content-block-with-image {
    grid-template-columns: 1fr;
  }

  .content-block-image {
    position: static;
    order: -1;
    margin-bottom: 25px;
  }

  .games-grid {
    grid-template-columns: 1fr;
  }

  .banking-methods {
    grid-template-columns: 1fr;
  }

  .security-grid {
    grid-template-columns: 1fr;
  }

  .times-grid {
    grid-template-columns: 1fr;
  }

  .mobile-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 50px 0;
  }

  .header-inner {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 15px;
    justify-content: space-between;
  }

  .logo {
    flex-shrink: 0;
  }

  .logo img {
    height: 40px;
  }

  .logo-text {
    display: none;
  }

  .header-buttons {
    width: auto;
    flex-shrink: 0;
  }

  .btn {
    padding: 10px 20px;
    font-size: 0.85rem;
  }

  .hero {
    padding: 40px 0 32px;
  }

  .hero-inner h1 {
    font-size: 1.9rem;
  }

  .section-header h2 {
    font-size: 1.8rem;
  }

  .content-block h3 {
    font-size: 1.4rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .games-list {
    columns: 1;
  }

  .bonus-table th,
  .bonus-table td {
    padding: 12px 15px;
    font-size: 0.9rem;
  }

  .image-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-inner h1 {
    font-size: 1.6rem;
  }

  .trust-chips {
    gap: 6px 14px;
    font-size: 0.8rem;
  }

  .btn-large {
    padding: 14px 30px;
    font-size: 1rem;
  }

  .feature-card {
    padding: 20px;
  }

  .faq-question {
    padding: 15px 20px;
  }

  .faq-question h3 {
    font-size: 0.95rem;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ============================================
   MULTI-PAGE CHROME
   Added for the multi-page conversion — navigation,
   breadcrumbs, inner page hero, info boxes, footer nav.
   ============================================ */

/* Header: sticky, dark bg, gold accents */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-header);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-gold-light);
}

.header-inner {
  gap: 24px;
}

.logo img {
  max-height: 50px;
}

.header-nav {
  display: flex;
  gap: 22px;
  flex: 1;
  justify-content: center;
}

.header-nav a {
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.header-nav a:hover,
.header-nav a.active {
  color: var(--gold-primary);
  border-bottom-color: var(--gold-primary);
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: var(--border-gold-light);
  color: var(--gold-primary);
  width: 44px;
  height: 44px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
}

@media (max-width: 992px) {
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-header);
    padding: 20px;
    gap: 10px;
    border-bottom: var(--border-gold-light);
  }
  .header-nav.mobile-open {
    display: flex;
  }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Breadcrumbs */
.breadcrumbs {
  padding: 16px 0 8px;
  font-size: 0.9rem;
}

.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.breadcrumbs-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs-list a {
  color: var(--text-gray-light);
}

.breadcrumbs-list a:hover {
  color: var(--gold-primary);
}

.breadcrumbs-list span[aria-current="page"] {
  color: var(--gold-primary);
  font-weight: 500;
}

.breadcrumbs-sep {
  color: var(--text-muted);
}

/* Page hero (inner pages) */
.page-hero {
  padding: 80px 0 40px;
  background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1510 50%, var(--bg-primary) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(255, 184, 0, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

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

.page-hero h1 {
  font-size: 2.4rem;
  margin-bottom: 20px;
  line-height: 1.15;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero .hero-intro {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: var(--text-gray-light);
}

.page-hero .hero-image {
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-gold);
}

.page-hero .hero-image img {
  border-radius: 16px;
}

/* Main container for inner pages */
.main-container {
  padding: 40px 0 60px;
}

.main-container .section {
  padding: 30px 0;
}

.main-container h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--text-white);
  position: relative;
  padding-bottom: 10px;
}

.main-container h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--gold-gradient);
}

.main-container h3 {
  font-size: 1.3rem;
  margin: 20px 0 12px;
  color: var(--gold-primary);
}

.main-container p {
  margin-bottom: 16px;
  color: var(--text-gray-light);
}

.main-container ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 20px;
}

.main-container ol.content-list {
  padding-left: 20px;
  list-style: decimal;
  color: var(--text-gray-light);
}

.main-container ol.content-list li {
  padding-left: 8px;
  margin-bottom: 10px;
}

/* Tables inside main-container */
.table-container {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 10px;
  border: var(--border-gold-light);
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
}

.table-container th,
.table-container td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: var(--border-card);
  color: var(--text-gray-light);
}

.table-container th {
  background: var(--bg-card-alt);
  color: var(--gold-primary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.table-container tr:last-child td {
  border-bottom: 0;
}

/* Info box callouts */
.info-box {
  background: rgba(255, 184, 0, 0.06);
  border-left: 4px solid var(--gold-primary);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 20px 0;
}

.info-box p {
  margin-bottom: 0;
  color: var(--text-light);
}

/* Pros/Cons */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

.pros,
.cons {
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: 10px;
  padding: 20px;
}

.pros h3,
.cons h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.pros h3 {
  color: var(--btn-green);
}

.cons h3 {
  color: var(--red);
}

.pros ul,
.cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pros li,
.cons li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: var(--text-gray-light);
}

.pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--btn-green);
  font-weight: 700;
}

.cons li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}

@media (max-width: 768px) {
  .pros-cons {
    grid-template-columns: 1fr;
  }
}

/* Footer nav */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  list-style: none;
  padding: 30px 0 20px;
  margin: 0;
  border-bottom: var(--border-card);
}

.footer-nav a {
  color: var(--text-gray-light);
  font-size: 0.9rem;
  transition: color 0.25s ease;
}

.footer-nav a:hover {
  color: var(--gold-primary);
}

footer.footer {
  background: var(--bg-tertiary);
  padding: 30px 0 40px;
  border-top: var(--border-gold-light);
  color: var(--text-gray-light);
  margin-top: 60px;
}

.footer .footer-content {
  text-align: center;
  padding-top: 20px;
  font-size: 0.85rem;
}

.footer .footer-content p {
  margin-bottom: 10px;
}

.footer .footer-disclaimer em {
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.6;
}

.footer .footer-disclaimer a {
  color: var(--gold-primary);
}

/* Footer authority block (regulators / responsible-gambling resources) */
.authority-section {
  padding: 30px 0 10px;
  border-bottom: var(--border-card);
  text-align: center;
}

.authority-section h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-gray);
  margin-bottom: 20px;
  font-weight: 600;
}

.authority-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;
  align-items: center;
}

.authority-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-gray-light);
  font-size: 0.8rem;
  text-align: center;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.25s ease, color 0.25s ease;
  min-width: 80px;
}

.authority-logo:hover {
  opacity: 1;
  color: var(--gold-primary);
}

.authority-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: grayscale(0.25);
  transition: filter 0.25s ease;
}

.authority-logo:hover img {
  filter: grayscale(0);
}

/* Content figure wrapper (per checklist §9) */
.content-figure {
  margin: 20px auto;
  max-width: 100%;
  text-align: center;
}

.content-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

.content-figure figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Small hero h1 on narrow screens */
@media (max-width: 768px) {
  .page-hero h1 {
    font-size: 1.8rem;
  }
  .page-hero {
    padding: 60px 0 30px;
  }
  .main-container h2 {
    font-size: 1.5rem;
  }
}

/* ============================================
   LOCALE SWITCHER
   ============================================ */
.locale-switcher {
  display: inline-flex;
  align-items: stretch;
  border: var(--border-gold-light);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 184, 0, 0.05);
}

.locale-option {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-gray-light);
  text-decoration: none;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: all 0.25s ease;
}

.locale-option + .locale-option {
  border-left: var(--border-gold-light);
}

.locale-option:hover {
  background: rgba(255, 184, 0, 0.15);
  color: var(--gold-primary);
}

.locale-option.is-active {
  background: var(--gold-gradient);
  color: #0d0d0d;
}

/* Desktop shows it in the header bar, mobile shows it inside the open nav drawer */
.locale-switcher-mobile {
  display: none;
}

/* Once the desktop nav collapses into the drawer, move the switcher inside it. */
@media (max-width: 992px) {
  .locale-switcher-desktop {
    display: none;
  }

  .locale-switcher-mobile {
    display: inline-flex;
    align-self: flex-start;
  }
}

/* ============================================
   FACTS TABLE ("at a glance")
   ============================================ */
.facts-table th[scope='row'] {
  width: 34%;
  color: var(--text-white);
  background: rgba(255, 184, 0, 0.04);
  font-weight: 600;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: 0;
  vertical-align: top;
}

.facts-table td {
  vertical-align: top;
}

@media (max-width: 600px) {
  .facts-table,
  .facts-table tbody,
  .facts-table tr {
    display: block;
  }

  .facts-table thead {
    display: none;
  }

  .facts-table tr {
    border-bottom: var(--border-card);
    padding: 6px 0;
  }

  .facts-table tr:last-child {
    border-bottom: 0;
  }

  .facts-table th[scope='row'],
  .facts-table td {
    display: block;
    width: auto;
    border-bottom: 0;
    padding: 6px 16px;
  }

  .facts-table th[scope='row'] {
    background: none;
    color: var(--gold-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0;
  }
}

/* ============================================
   NARROW-PHONE HEADER FIT
   The logo + Login + Sign Up + burger row overflowed the viewport below ~430px,
   giving the whole page a horizontal scrollbar. Shrink the row so it fits.
   ============================================ */
@media (max-width: 480px) {
  .header-inner {
    gap: 8px;
    padding: 10px 12px;
  }

  .logo img {
    max-height: 34px;
    height: 34px;
  }

  .header-buttons {
    gap: 6px;
  }

  .header-buttons .btn {
    padding: 9px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
  }

  .mobile-menu-toggle {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  /* Sign Up is the conversion action; Login also lives in the drawer-adjacent flow. */
  .header-buttons .btn-outline {
    display: none;
  }
}

/* ============================================
   HOMEPAGE "WHY CHOOSE" FEATURE CARDS
   Four cards, so override the shared 3-column grid here only (a 3+1 row orphans
   the last card). Breakpoints mirror the shared .features-grid rules.
   ============================================ */
.why-choose .features-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .why-choose .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .why-choose .features-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CLICKABLE IMAGES (affiliate /go links)
   Every content image is wrapped in an <a href="/go">. The wrapper must be a
   block so it does not add inline descender gaps under the image.
   ============================================ */
.img-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.img-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 184, 0, 0.25);
}

.img-link:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .img-link {
    transition: none;
  }

  .img-link:hover {
    transform: none;
  }
}

/* ============================================
   HERO DAILY DEAL (src/components/WildDeal.astro)
   A pokie-cabinet card: gold frame with marquee bulbs, a reel window for the
   headline amount and a countdown to local midnight. It is the first thing in
   the hero: left column on desktop, centred on top once the hero stacks.
   Animations are transform/opacity only and stop for reduced motion.
   ============================================ */
.hero-split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 34px;
}

.wild-deal {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 100%;
  max-width: 420px;
  margin-top: 16px; /* room for the topper sign that sits on the frame */
  animation: wild-deal-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (min-width: 993px) {
  .hero-split {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: clamp(36px, 4.5vw, 64px);
  }

  .hero-split .wild-deal {
    justify-self: stretch;
    max-width: none;
  }

  .hero-split .hero-inner {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    margin: 0;
  }

  .hero-split .hero-inner h1 {
    font-size: clamp(2rem, 1.1rem + 1.9vw, 2.8rem);
  }

  .hero-split .trust-chips {
    justify-content: flex-start;
  }
}

/* Warm glow behind the cabinet */
.wild-deal::before {
  content: '';
  position: absolute;
  inset: 6% -8% -6%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 120, 0, 0.34), rgba(255, 184, 0, 0.1) 60%, transparent);
  animation: wild-deal-glow 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}

.wild-deal__cabinet {
  position: relative;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, #4a2f0a 0%, #b07a1c 18%, #f5c85a 32%, #93611a 50%, #e2ae46 70%, #5e3c0e 100%);
  box-shadow:
    0 0 0 1px rgba(255, 214, 120, 0.4),
    0 24px 50px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(255, 140, 0, 0.22);
}

/* Marquee bulbs: two interleaved sets on the frame, lit in turn. The frame is half a
   tile wide and `round` always fits a whole number of tiles, so every edge gets a row
   of bulbs centred on the frame, corners included, whatever the card size. */
.wild-deal__cabinet::before,
.wild-deal__cabinet::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-position: 0 0;
  background-size: 32px 32px;
  background-repeat: round;
  pointer-events: none;
  animation: wild-deal-bulbs 1.1s linear infinite;
}

.wild-deal__cabinet::before {
  background-image:
    radial-gradient(circle at 25% 25%, #fff8dc 0 1.6px, #ffc53a 2.6px, rgba(255, 170, 0, 0.35) 4px, transparent 6px),
    radial-gradient(circle at 75% 75%, #fff8dc 0 1.6px, #ffc53a 2.6px, rgba(255, 170, 0, 0.35) 4px, transparent 6px);
}

.wild-deal__cabinet::after {
  background-image:
    radial-gradient(circle at 75% 25%, #fff8dc 0 1.6px, #ffc53a 2.6px, rgba(255, 170, 0, 0.35) 4px, transparent 6px),
    radial-gradient(circle at 25% 75%, #fff8dc 0 1.6px, #ffc53a 2.6px, rgba(255, 170, 0, 0.35) 4px, transparent 6px);
  animation-delay: -0.55s;
}

.wild-deal__topper {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px 6px 13px;
  border: 2px solid #ffd36b;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5a1f 0%, #d61f0f 100%);
  box-shadow:
    0 6px 18px rgba(214, 31, 15, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--text-white);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wild-deal__flame {
  flex: none;
  width: 12px;
  height: 15px;
  transform-origin: 50% 100%;
  animation: wild-deal-flicker 1.3s ease-in-out infinite;
}

.wild-deal__screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 22px 18px;
  border-radius: 10px;
  text-align: center;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 140, 0, 0.2), transparent 65%),
    linear-gradient(180deg, #1f160d 0%, #110c07 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 184, 0, 0.28),
    inset 0 12px 30px rgba(0, 0, 0, 0.55);
}

.wild-deal__kicker {
  color: #ffcf66;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wild-deal__prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.wild-deal__upto {
  color: var(--text-gray-light);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.wild-deal__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The reel window */
.wild-deal__window {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  padding: 0.1em 0.2em;
  border-radius: 14px;
  background: linear-gradient(180deg, #070503 0%, #1a130b 100%);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.85),
    0 0 0 2px #8a5e14,
    0 0 0 4px #1b1209,
    0 0 26px rgba(255, 184, 0, 0.22);
  font-size: clamp(2.5rem, 2.1rem + 1.1vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
}

/* Payline arrows either side of the window */
.wild-deal__window::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -13px;
  right: -13px;
  height: 12px;
  margin-top: -6px;
  background:
    linear-gradient(to top right, #ff5a1f 50%, transparent 52%) 0 0 / 8px 6px no-repeat,
    linear-gradient(to bottom right, #ff5a1f 50%, transparent 52%) 0 100% / 8px 6px no-repeat,
    linear-gradient(to top left, #ff5a1f 50%, transparent 52%) 100% 0 / 8px 6px no-repeat,
    linear-gradient(to bottom left, #ff5a1f 50%, transparent 52%) 100% 100% / 8px 6px no-repeat;
  pointer-events: none;
}

/* Win flash once the last reel has stopped; same 9s period as the spin */
.wild-deal__window::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 17px;
  box-shadow:
    0 0 0 2px #ffe08a,
    0 0 32px 6px rgba(255, 200, 60, 0.6);
  opacity: 0;
  animation: wild-deal-win 9s ease-out 2.8s infinite;
  pointer-events: none;
}

.wild-deal__glyph {
  color: #ffc53a;
  text-shadow: 0 0 14px rgba(255, 160, 0, 0.45);
}

.wild-deal__glyph::before {
  content: attr(data-glyph);
}

.wild-deal__glyph--cur {
  margin-right: 0.04em;
  font-size: 0.72em;
}

.wild-deal__glyph--sep {
  align-self: flex-end;
  margin: 0 -0.01em 0.1em;
  font-size: 0.62em;
}

.wild-deal__reel {
  position: relative;
  display: block;
  width: 0.74em;
  height: 1.1em;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #0d0906 0%, #3a2b18 24%, #4b3920 50%, #3a2b18 76%, #0d0906 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 184, 0, 0.2);
}

/* Drum shading over the digits */
.wild-deal__reel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 26%, transparent 74%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

/* One digit per line: the strip is 1ch wide and breaks between every character.
   Resting on row 2 (index 1) shows the reel's own digit; see WildDeal.astro. */
.wild-deal__strip {
  display: block;
  width: 1ch;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
  transform: translateY(-1.1em);
  animation: wild-deal-spin 9s linear infinite;
  animation-delay: calc(0.5s + var(--i, 0) * 0.3s);
  will-change: transform;
}

.wild-deal__strip::before {
  content: attr(data-rows);
  display: block;
  color: #ffc53a;
  line-height: 1.1em;
  text-shadow: 0 0 14px rgba(255, 160, 0, 0.45);
  word-break: break-all;
}

.wild-deal__spins {
  margin-top: 8px;
  color: var(--text-white);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}

.wild-deal__spins strong {
  color: #ffc53a;
  font-size: 1.2em;
}

.wild-deal__terms {
  color: var(--text-gray);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Who gives the bonus and where it lands. The icon floats so only the first line is
   indented and narrow cards keep the full width for the rest of the text. */
.wild-deal__gift {
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 184, 0, 0.2);
  border-radius: 10px;
  background: rgba(255, 184, 0, 0.06);
  color: var(--text-gray-light);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: left;
}

.wild-deal__gift svg {
  float: left;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: var(--gold-primary);
}

.wild-deal__gift strong {
  color: var(--text-white);
  font-weight: 700;
}

/* Countdown */
.wild-deal__clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 184, 0, 0.3);
}

.wild-deal__ends {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ff9a3c;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wild-deal__live {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b1f;
}

.wild-deal__live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ff3b1f;
  animation: wild-deal-live 1.6s ease-out infinite;
}

/* LED readout: unlit 88:88:88 segments under the live digits */
.wild-deal__led {
  display: grid;
  padding: 4px 16px 6px;
  border-radius: 10px;
  background: #070504;
  box-shadow:
    inset 0 0 0 1px rgba(255, 184, 0, 0.22),
    inset 0 6px 18px rgba(0, 0, 0, 0.85);
  font-family: Consolas, 'Cascadia Mono', 'SFMono-Regular', Menlo, 'Roboto Mono', 'DejaVu Sans Mono', monospace;
  font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.wild-deal__led-off,
.wild-deal__led-on {
  grid-area: 1 / 1;
}

.wild-deal__led-off {
  color: rgba(255, 170, 40, 0.09);
}

.wild-deal__led-off::before {
  content: attr(data-ghost);
}

.wild-deal__led-on {
  color: #ffb13b;
  text-shadow: 0 0 10px rgba(255, 130, 0, 0.65);
}

.wild-deal__colon {
  animation: wild-deal-blink 1s linear infinite;
}

.wild-deal__meter {
  position: relative;
  display: block;
  width: min(100%, 230px);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.wild-deal__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff3b1f 0%, #ff8c00 55%, #ffd24d 100%);
  transform-origin: left center;
  transition: transform 1s linear;
}

.wild-deal__fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-100%);
  animation: wild-deal-shine 2.6s ease-in-out infinite;
}

.wild-deal__valid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-gray-light);
  font-size: 0.82rem;
  line-height: 1.4;
}

.wild-deal__valid svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--gold-primary);
}

.wild-deal__valid time {
  color: #ffd36b;
  font-weight: 700;
  white-space: nowrap;
}

.wild-deal .wild-deal__cta {
  width: 100%;
  margin-top: 14px;
  padding: 15px 20px;
  font-size: 1.05rem;
}

/* The site's pulse ring grows 14%, which would spill over the frame on a full-width
   button; this one grows mostly upwards and downwards. */
.wild-deal__cta.btn-pulse::after {
  animation-name: wild-deal-cta-ring;
}

.wild-deal__fine {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  text-wrap: balance;
}

/* Embers drifting up past the sides of the cabinet */
.wild-deal__embers {
  position: absolute;
  inset: 20% 0 0;
  z-index: -1;
  pointer-events: none;
}

.wild-deal__embers i {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff0b3 0%, #ffae2b 45%, rgba(255, 90, 0, 0) 72%);
  opacity: 0;
  animation: wild-deal-ember var(--t) linear var(--d) infinite;
}

/* Short laptop screens: keep the whole card above the fold */
@media (min-width: 993px) and (max-height: 760px) {
  .wild-deal__screen {
    gap: 4px;
    padding: 26px 20px 14px;
  }

  .wild-deal__window {
    font-size: 2.5rem;
  }

  .wild-deal__spins {
    margin-top: 4px;
    font-size: 1.3rem;
  }

  .wild-deal__gift {
    margin-top: 6px;
    padding: 7px 11px;
    font-size: 0.76rem;
  }

  .wild-deal__clock {
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
  }

  .wild-deal__led {
    font-size: 1.8rem;
  }

  .wild-deal .wild-deal__cta {
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .wild-deal__cabinet {
    padding: 13px;
    border-radius: 18px;
  }

  .wild-deal__cabinet::before,
  .wild-deal__cabinet::after {
    background-size: 26px 26px;
  }

  .wild-deal__screen {
    padding: 26px 16px 16px;
  }

  .wild-deal__topper {
    font-size: 0.72rem;
  }

  .wild-deal__kicker {
    font-size: 0.74rem;
    letter-spacing: 0.11em;
    text-wrap: balance;
  }

  .wild-deal__window {
    font-size: 2.3rem;
  }

  .wild-deal__spins {
    font-size: 1.25rem;
  }

  .wild-deal__led {
    padding: 3px 12px 5px;
    font-size: 1.75rem;
  }
}

@media (max-width: 360px) {
  .wild-deal__screen {
    padding-right: 13px;
    padding-left: 13px;
  }

  .wild-deal__valid {
    gap: 5px;
    font-size: 0.75rem;
  }
}

@keyframes wild-deal-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wild-deal-glow {
  from {
    opacity: 0.55;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes wild-deal-bulbs {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.25;
  }
}

@keyframes wild-deal-flicker {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
  40% {
    opacity: 0.85;
    transform: scale(1.12, 0.92) rotate(3deg);
  }
  70% {
    transform: scale(0.94, 1.08) rotate(-1deg);
  }
}

/* A strip spins down through TURNS whole turns (--turns x 10 rows of 1.1em), overshoots
   a quarter row and settles back on its digit, then rests until the next cycle. */
@keyframes wild-deal-spin {
  0% {
    transform: translateY(calc(var(--turns, 3) * -11em - 1.1em));
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1);
  }
  13% {
    transform: translateY(-0.84em);
    animation-timing-function: ease-in-out;
  }
  15.5%,
  100% {
    transform: translateY(-1.1em);
  }
}

@keyframes wild-deal-win {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  14%,
  100% {
    opacity: 0;
  }
}

@keyframes wild-deal-live {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes wild-deal-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.25;
  }
}

@keyframes wild-deal-shine {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}

@keyframes wild-deal-ember {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), -340px) scale(0.35);
  }
}

@keyframes wild-deal-cta-ring {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.04, 1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wild-deal,
  .wild-deal::before,
  .wild-deal *,
  .wild-deal *::before,
  .wild-deal *::after {
    animation: none !important;
    transition: none !important;
  }

  .wild-deal__embers {
    display: none;
  }
}