:root {
  --space-deep: #040613;
  --space-navy: #090e26;
  --space-card: rgba(12, 19, 48, 0.82);
  --space-card-alt: rgba(16, 25, 62, 0.72);

  /* Colors extracted directly from APOLLO PG Logo */
  --apollo-green: #38ef38;
  --apollo-lime: #a3e635;
  --planet-cyan: #18c5e8;
  --visor-blue: #1d74d8;
  --orbit-indigo: #6366f1;
  --orbit-purple: #818cf8;
  --pg-gold: #ffb703;
  --pg-orange: #fb8500;
}

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

body {
  font-family: 'Kanit', sans-serif;
  background: radial-gradient(ellipse at top, #0c1438 0%, #050819 60%, #02030a 100%);
  min-height: 100vh;
  color: #f0f6ff;
  overflow-x: hidden;
  position: relative;
}

/* COSMIC SPACE AMBIENT BACKGROUND */
.space-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.45;
}

.nebula-cyan {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(24, 197, 232, 0.4), transparent 70%);
  top: -80px;
  right: -90px;
}

.nebula-green {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(56, 239, 56, 0.25), transparent 70%);
  top: 38%;
  left: -140px;
}

.nebula-indigo,
.nebula-pumpkin {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(251, 133, 0, 0.28), rgba(99, 102, 241, 0.25) 55%, transparent 72%);
  bottom: 5%;
  right: -120px;
}

/* HALLOWEEN AMBIENT FLOATING LAYER */
.halloween-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.float-spook {
  position: absolute;
  font-size: 22px;
  opacity: 0.28;
  filter: drop-shadow(0 0 10px rgba(251, 133, 0, 0.6));
  animation: driftSpook 9s ease-in-out infinite alternate;
}

.spook-1 { top: 14%; left: 6%; animation-duration: 7s; }
.spook-2 { top: 34%; right: 7%; animation-duration: 9s; font-size: 20px; }
.spook-3 { top: 65%; left: 8%; animation-duration: 8.5s; }
.spook-4 { top: 82%; right: 9%; animation-duration: 6.5s; font-size: 18px; }

@keyframes driftSpook {
  0% { transform: translateY(0) rotate(-8deg); }
  100% { transform: translateY(-18px) rotate(10deg); }
}

/* HALLOWEEN TOP RIBBON */
.halloween-ribbon {
  background: linear-gradient(90deg, #1b0b2e 0%, #7c2d12 50%, #1b0b2e 100%);
  border-bottom: 1px solid rgba(251, 133, 0, 0.55);
  color: #fed7aa;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(251, 133, 0, 0.6);
}

.cobweb-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 78px;
  height: 78px;
  pointer-events: none;
  z-index: 1;
}

.logo-pumpkin-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 20px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
  animation: floatPlanet 2.5s ease-in-out infinite alternate;
}

.starfield {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #ffffff, transparent),
    radial-gradient(2px 2px at 28% 8%, #818cf8, transparent),
    radial-gradient(1.5px 1.5px at 52% 24%, #38ef38, transparent),
    radial-gradient(2px 2px at 78% 14%, #ffb703, transparent),
    radial-gradient(1.5px 1.5px at 88% 36%, #18c5e8, transparent),
    radial-gradient(2px 2px at 18% 54%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 64% 62%, #818cf8, transparent),
    radial-gradient(2px 2px at 36% 82%, #ffb703, transparent),
    radial-gradient(1.5px 1.5px at 82% 78%, #ffffff, transparent);
  background-size: 320px 320px;
  animation: twinkleStars 6s ease-in-out infinite alternate;
}

@keyframes twinkleStars {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}

#root {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.sale-page {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 95px;
  background: linear-gradient(180deg, rgba(7, 11, 30, 0.88) 0%, rgba(10, 15, 38, 0.92) 100%);
  border-inline: 1px solid rgba(99, 102, 241, 0.22);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(24, 197, 232, 0.12);
  backdrop-filter: blur(12px);
}

/* 1. PROFILE CARD & SPACE COVER BANNER */
.profile-card {
  position: relative;
  background: #060a1e;
  border-bottom: 2px solid var(--planet-cyan);
  box-shadow: 0 6px 24px rgba(24, 197, 232, 0.18);
}

.profile-cover {
  width: 100%;
  aspect-ratio: 1000 / 355;
  position: relative;
  overflow: hidden;
}

.apollo-cover-banner {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 78% 45%, rgba(29, 116, 216, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 25% 30%, rgba(99, 102, 241, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #040716 0%, #0b1336 55%, #060919 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 38px;
  position: relative;
  overflow: hidden;
}

.cover-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(2px 2px at 35% 15%, #818cf8, transparent),
    radial-gradient(2.5px 2.5px at 55% 75%, #38ef38, transparent),
    radial-gradient(2px 2px at 48% 30%, #ffb703, transparent),
    radial-gradient(1.5px 1.5px at 88% 20%, #18c5e8, transparent);
  opacity: 0.85;
}

/* Floating Planets matching the Logo */
.cover-planet-cyan {
  position: absolute;
  right: 125px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #67e8f9, #0891b2 70%, #083344);
  box-shadow: 0 0 14px rgba(24, 197, 232, 0.7);
  opacity: 0.9;
  animation: floatPlanet 4s ease-in-out infinite alternate;
}

.cover-planet-lime {
  position: absolute;
  left: 42%;
  bottom: 32px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9f99d, #65a30d 75%);
  box-shadow: 0 0 12px rgba(163, 230, 53, 0.65);
  opacity: 0.85;
}

@keyframes floatPlanet {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(10deg); }
}

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

.cover-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, var(--visor-blue), var(--planet-cyan));
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  margin-bottom: 5px;
  box-shadow: 0 0 12px rgba(24, 197, 232, 0.5);
}

.cover-headline {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--apollo-green);
  text-shadow: 0 2px 0 #14532d, 0 0 18px rgba(56, 239, 56, 0.6);
  letter-spacing: 0.02em;
}

.cover-headline span {
  color: var(--pg-gold);
  text-shadow: 0 2px 0 #7c2d12, 0 0 18px rgba(255, 183, 3, 0.75);
}

.cover-sub {
  font-size: 11.5px;
  color: #bae6fd;
  margin-top: 3px;
}

.cover-logo-orbit-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
}

.orbit-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spinOrbit 18s linear infinite;
}

@keyframes spinOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cover-hero-logo {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--planet-cyan);
  box-shadow: 0 0 22px rgba(24, 197, 232, 0.65), 0 0 36px rgba(56, 239, 56, 0.3);
}

.profile-cover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to top, #060a1e 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.profile-info {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 16px 14px;
  margin-top: -42px;
  position: relative;
  z-index: 3;
}

.profile-avatar {
  width: 82px;
  height: 82px;
  border-radius: 18px;
  border: 2.5px solid var(--apollo-green);
  box-shadow: 0 0 20px rgba(56, 239, 56, 0.55), 0 4px 14px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
  overflow: hidden;
  background: #000;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.profile-text {
  flex: 1;
  padding-bottom: 2px;
}

.profile-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--apollo-green);
  text-shadow: 0 0 12px rgba(56, 239, 56, 0.45);
}

.title-pg {
  color: var(--pg-gold);
  text-shadow: 0 0 12px rgba(255, 183, 3, 0.55);
}

.profile-desc {
  font-size: 12.5px;
  color: #cbd5e1;
  margin-top: 2px;
}

/* 2. CTA SECTION (Cosmic Green & Solar Gold PG Buttons) */
.cta-section {
  padding: 14px 16px 16px;
}

.cta-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--planet-cyan);
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(24, 197, 232, 0.45);
}

.click-hint {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

.cta-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #22c55e 0%, #4ade80 48%, #facc15 100%);
  color: #030712;
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 20px 14px 52px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 22px rgba(56, 239, 56, 0.45), 0 0 15px rgba(24, 197, 232, 0.25);
  animation: registerBounce 1.53s linear infinite;
}

.cta-btn-messenger {
  background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 50%, #18c5e8 100%);
  color: #ffffff;
  border: 1px solid rgba(103, 232, 249, 0.45);
  box-shadow: 0 4px 20px rgba(24, 197, 232, 0.35);
  animation: none;
}

.cta-img-icon {
  height: 38px;
  width: 38px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 8px;
  position: absolute;
  left: 12px;
  border: 1px solid var(--pg-gold);
  background: #000;
}

@keyframes registerBounce {
  0% { transform: translateY(0); }
  16.3% { transform: translateY(9px); }
  19.6% { transform: translateY(9px); }
  24.2% { transform: translateY(0); }
  26.5% { transform: translateY(-5px); }
  28.8% { transform: translateY(0); }
  31.0% { transform: translateY(-3px); }
  33.3% { transform: translateY(0); }
  35.6% { transform: translateY(-2px); }
  37.9% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* 2.5 HALLOWEEN COSMIC MYSTERY BOX GIMMICK */
.halloween-gimmick-section {
  padding: 0 16px 16px;
}

.halloween-box {
  background:
    radial-gradient(circle at top right, rgba(251, 133, 0, 0.22), transparent 65%),
    radial-gradient(circle at bottom left, rgba(56, 239, 56, 0.14), transparent 65%),
    linear-gradient(145deg, #0d1333, #170f2e);
  border: 1.5px solid rgba(251, 133, 0, 0.55);
  border-radius: 14px;
  padding: 14px 14px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), inset 0 0 18px rgba(251, 133, 0, 0.12);
}

.halloween-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #fb8500, #ffb703);
  color: #030712;
  padding: 2px 10px;
  border-radius: 99px;
  margin-bottom: 6px;
}

.halloween-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff3b0;
  margin-bottom: 2px;
}

.halloween-sub {
  font-size: 11.5px;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.pumpkin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pumpkin-btn {
  background: rgba(15, 23, 58, 0.85);
  border: 1px solid rgba(251, 133, 0, 0.45);
  border-radius: 10px;
  padding: 10px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #f8fafc;
  font-family: 'Kanit', sans-serif;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.pumpkin-btn:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--apollo-green);
  box-shadow: 0 0 16px rgba(251, 133, 0, 0.45);
}

.pumpkin-btn.selected {
  background: linear-gradient(135deg, rgba(251, 133, 0, 0.28), rgba(56, 239, 56, 0.22));
  border-color: var(--apollo-green);
  box-shadow: 0 0 18px rgba(56, 239, 56, 0.45);
}

.pumpkin-emoji {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(251, 133, 0, 0.65));
  animation: floatPlanet 2s ease-in-out infinite alternate;
}

.pumpkin-label {
  font-size: 11px;
  font-weight: 600;
  color: #fed7aa;
}

.pumpkin-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(6, 199, 85, 0.12);
  border: 1px solid rgba(56, 239, 56, 0.45);
  animation: depositSlideIn 0.35s ease-out;
}

.pumpkin-res-title {
  font-size: 12px;
  color: #e2e8f0;
  margin-bottom: 6px;
}

.pumpkin-res-title strong {
  color: var(--apollo-green);
}

.pumpkin-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.pumpkin-code {
  font-family: monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: #040716;
  border: 1px solid var(--pg-gold);
  color: var(--pg-gold);
  padding: 4px 12px;
  border-radius: 6px;
}

.pumpkin-copy-btn {
  background: linear-gradient(135deg, var(--apollo-green), #22c55e);
  color: #030712;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-family: 'Kanit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pumpkin-hint {
  font-size: 11px;
  color: #94a3b8;
}

/* 3. JACKPOT WIN SECTION (Space Station Cards) */
.jackpot-win-section {
  padding: 0 16px 16px;
}

.jackpot-win-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.win-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(16, 28, 70, 0.78), rgba(10, 17, 44, 0.88));
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.win-card:hover {
  border-color: var(--planet-cyan);
  box-shadow: 0 0 16px rgba(24, 197, 232, 0.28);
  transform: scale(1.01);
}

.win-card.win-new {
  border-color: var(--apollo-green);
  animation: winFadeLeft 0.6s ease-out;
}

@keyframes winFadeLeft {
  0% { opacity: 0; transform: translate(-30px); }
  100% { opacity: 1; transform: translate(0); }
}

.win-game-thumb-img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(24, 197, 232, 0.35);
}

.win-card-info {
  flex: 1;
  min-width: 0;
}

.win-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.win-game-name {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-multi {
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  margin-left: 8px;
  background: linear-gradient(135deg, var(--apollo-green), var(--planet-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.win-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.win-user {
  font-size: 11px;
  color: #94a3b8;
}

.win-detail {
  font-size: 12px;
  color: #cbd5e1;
}

.win-detail strong {
  color: var(--pg-gold);
}

/* 4. COUNTDOWN SECTION (Nebula Core Box) */
.countdown-section {
  padding: 0 16px 16px;
}

.countdown-box {
  background:
    radial-gradient(circle at top, rgba(99, 102, 241, 0.28), transparent 70%),
    linear-gradient(135deg, #0b1338, #121b4a);
  border: 1px solid rgba(24, 197, 232, 0.45);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.3s;
  box-shadow: inset 0 0 24px rgba(24, 197, 232, 0.12);
}

.countdown-box.urgent {
  border-color: var(--pg-gold);
  box-shadow: 0 0 26px rgba(255, 183, 3, 0.45);
  animation: jackpotPulse 1s ease-in-out infinite alternate;
}

@keyframes jackpotPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); box-shadow: 0 0 38px rgba(255, 183, 3, 0.65); }
}

.countdown-label {
  font-size: 14px;
  color: #bae6fd;
  margin-bottom: 6px;
}

.prize-pool {
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff3b0, var(--pg-gold), var(--pg-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: prizeGlow 2s ease-in-out infinite alternate;
  margin-bottom: 10px;
}

@keyframes prizeGlow {
  0% { filter: drop-shadow(0 0 6px rgba(255, 183, 3, 0.5)); }
  100% { filter: drop-shadow(0 0 18px rgba(56, 239, 56, 0.7)); }
}

.countdown-timer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.countdown-timer-label {
  font-size: 13px;
  color: #94a3b8;
}

.countdown-timer {
  font-size: 28px;
  font-weight: 800;
  color: var(--apollo-green);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(56, 239, 56, 0.5);
}

.countdown-timer.blink {
  color: var(--pg-gold);
  animation: timerBlink 0.8s ease-in-out infinite;
}

@keyframes timerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.jackpot-alert {
  font-size: 14px;
  font-weight: 700;
  color: var(--planet-cyan);
}

/* 5. PLAYER COUNTER */
.player-counter-section {
  padding: 12px 16px 0;
}

.live-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(16, 28, 70, 0.75);
  border: 1px solid rgba(56, 239, 56, 0.38);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  color: #e2e8f0;
  box-shadow: 0 0 18px rgba(56, 239, 56, 0.12);
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--apollo-green);
  box-shadow: 0 0 10px var(--apollo-green);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

.live-count-number {
  font-size: 18px;
  font-weight: 800;
  color: var(--apollo-green);
}

/* 6. DEPOSIT SECTION */
.deposit-section {
  padding: 0 16px 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--planet-cyan);
  margin-bottom: 12px;
  text-align: center;
  text-shadow: 0 0 10px rgba(24, 197, 232, 0.4);
}

.deposit-feed {
  background: rgba(12, 20, 52, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.deposit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.deposit-table thead tr {
  background: rgba(99, 102, 241, 0.25);
}

.deposit-table th {
  padding: 9px 10px;
  text-align: left;
  color: #bae6fd;
  font-weight: 700;
  font-size: 11px;
}

.deposit-table tbody tr {
  border-top: 1px solid rgba(99, 102, 241, 0.16);
}

.deposit-table td {
  padding: 8px 10px;
}

.deposit-new {
  animation: depositSlideIn 0.4s ease-out;
  background: rgba(56, 239, 56, 0.08);
}

@keyframes depositSlideIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.deposit-phone {
  color: #cbd5e1;
}

.dep-bank-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dep-bank-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.deposit-amount {
  color: var(--pg-gold);
  font-weight: 700;
}

.deposit-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--apollo-green);
  font-size: 11px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--apollo-green);
  animation: pulse 1.5s infinite;
  flex-shrink: 0;
}

.deposit-bottom-btn {
  background: linear-gradient(135deg, var(--pg-gold), var(--pg-orange)) !important;
  color: #030712 !important;
  animation: lineWiggle 1.5s infinite ease-in-out !important;
  box-shadow: 0 4px 20px rgba(255, 183, 3, 0.5) !important;
}

@keyframes lineWiggle {
  0% { transform: translate(0); }
  10% { transform: translate(-5px); }
  25% { transform: translate(5px); }
  40% { transform: translate(-5px); }
  55% { transform: translate(5px); }
  70% { transform: translate(0); }
  100% { transform: translate(0); }
}

/* 7. WITHDRAWAL SECTION */
.withdrawal-section {
  padding: 0 16px 16px;
}

.withdrawal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--planet-cyan);
  margin-bottom: 12px;
  text-align: center;
  text-shadow: 0 0 10px rgba(24, 197, 232, 0.4);
}

.withdrawal-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wd-card {
  background: rgba(12, 20, 52, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  padding: 10px 12px;
  animation: wdFadeIn 0.5s ease-out;
}

@keyframes wdFadeIn {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.wd-bank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.wd-bank-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.wd-bank-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.wd-bank-name {
  font-size: 12px;
  color: #94a3b8;
}

.wd-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wd-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wd-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
}

.wd-user-meta {
  font-size: 11px;
  color: #94a3b8;
}

.wd-amount-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.wd-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--pg-gold);
}

.wd-status {
  font-size: 11px;
}

.wd-status.done {
  color: var(--apollo-green);
}

.wd-status.pending {
  color: #94a3b8;
}

/* 8. GAME SECTION */
.game-section {
  padding: 0 16px 16px;
}

.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.game-card {
  background: rgba(14, 23, 58, 0.85);
  border: 1px solid rgba(24, 197, 232, 0.3);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.game-card:hover {
  border-color: var(--apollo-green);
  box-shadow: 0 0 18px rgba(56, 239, 56, 0.3);
  transform: translateY(-2px);
}

.game-img-wrap {
  position: relative;
}

.game-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.hot-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(135deg, var(--pg-orange), var(--pg-gold));
  color: #000;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255, 183, 3, 0.8);
}

.game-info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.game-name {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
}

.game-online {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #94a3b8;
}

.green-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--apollo-green);
  animation: pulse 1.5s infinite;
  flex-shrink: 0;
}

.game-count {
  color: var(--apollo-green);
  font-weight: 700;
}

.game-cta-btn {
  display: flex;
  justify-content: center;
}

.game-cta-btn .cta-btn {
  width: 100%;
}

/* 9. SIMULATED LINE OA CHAT REVIEWS */
.slide-section {
  padding: 0 16px 20px;
}

.line-chat-widget {
  background: linear-gradient(180deg, #0b1332 0%, #070c22 100%);
  border: 1px solid rgba(24, 197, 232, 0.38);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 22px rgba(24, 197, 232, 0.14);
}

.line-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(90deg, #0f1c48, #142458);
  border-bottom: 1px solid rgba(24, 197, 232, 0.28);
}

.line-chat-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.line-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.line-header-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--apollo-green);
}

.line-verified-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #06c755;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #0b1332;
}

.line-oa-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}

.line-oa-sub {
  font-size: 11px;
  color: var(--pg-gold);
}

.line-slide-counter {
  font-size: 11px;
  font-weight: 700;
  color: #bae6fd;
  background: rgba(24, 197, 232, 0.16);
  border: 1px solid rgba(24, 197, 232, 0.35);
  padding: 2px 9px;
  border-radius: 99px;
}

.line-chat-body {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 270px;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.line-chat-body.chat-fade {
  opacity: 0.15;
}

/* Automated Transfer Slip inside Chat */
.chat-slip-card {
  background: rgba(16, 28, 68, 0.9);
  border: 1px solid rgba(56, 239, 56, 0.38);
  border-radius: 12px;
  padding: 10px 12px;
}

.chat-slip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.chat-slip-bank {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-slip-bank-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.chat-slip-title {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}

.chat-slip-sub {
  font-size: 10.5px;
  color: #94a3b8;
}

.chat-slip-badge {
  background: rgba(6, 199, 85, 0.2);
  border: 1px solid rgba(56, 239, 56, 0.5);
  color: var(--apollo-green);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.chat-slip-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-slip-game {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-slip-game-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(24, 197, 232, 0.35);
}

.chat-slip-user {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
}

.chat-slip-meta {
  font-size: 11px;
  color: var(--planet-cyan);
}

.chat-slip-amount {
  font-size: 16px;
  font-weight: 800;
  color: var(--pg-gold);
  white-space: nowrap;
}

/* Chat Bubbles */
.chat-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.chat-msg-row.admin-side {
  justify-content: flex-end;
}

.chat-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.chat-admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--planet-cyan);
}

.chat-bubble-wrap {
  max-width: 84%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-bubble-wrap.admin-wrap {
  align-items: flex-end;
}

.chat-sender-name {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.verified-member-tag {
  font-size: 10px;
  color: var(--apollo-green);
  font-weight: 500;
}

.chat-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
}

.user-bubble {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #f8fafc;
  border-top-left-radius: 4px;
}

.admin-bubble {
  background: linear-gradient(135deg, rgba(6, 199, 85, 0.22), rgba(24, 197, 232, 0.2));
  border: 1px solid rgba(56, 239, 56, 0.4);
  color: #ecfdf5;
  border-top-right-radius: 4px;
}

.chat-time-meta {
  font-size: 10px;
  color: #64748b;
}

/* Footer Controls */
.line-chat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(6, 10, 28, 0.9);
  border-top: 1px solid rgba(99, 102, 241, 0.22);
}

.chat-nav-btn {
  background: rgba(24, 197, 232, 0.12);
  border: 1px solid rgba(24, 197, 232, 0.35);
  color: #bae6fd;
  font-family: 'Kanit', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.chat-nav-btn:hover {
  border-color: var(--apollo-green);
  color: #fff;
}

.chat-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: none;
  background: rgba(148, 163, 184, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-dot.active {
  width: 22px;
  background: var(--apollo-green);
  box-shadow: 0 0 8px var(--apollo-green);
}

/* FLOATING MENU & STICKY CTA */
.floating-menu {
  position: fixed;
  right: 12px;
  bottom: 84px;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.floating-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: 4px;
}

.floating-links[hidden] {
  display: none;
}

.float-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: 'Kanit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px #0009;
}

.line-btn { background: #06c755; }
.reg-btn { background: linear-gradient(135deg, var(--pg-gold), var(--pg-orange)); color: #000; }
.dep-btn { background: #0284c7; }

.float-toggle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2.5px solid var(--planet-cyan);
  box-shadow: 0 0 18px rgba(24, 197, 232, 0.7);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: #000;
  animation: floatPulse 2s ease-in-out infinite;
}

.float-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes floatPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(24, 197, 232, 0.6); }
  50% { box-shadow: 0 0 28px rgba(56, 239, 56, 0.85); }
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: linear-gradient(135deg, #060b22, #0c143a);
  border-top: 2px solid var(--planet-cyan);
  padding: 10px 16px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.7);
}

.sticky-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #22c55e 0%, #4ade80 48%, #facc15 100%);
  color: #030712;
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(56, 239, 56, 0.45);
  animation: lineWiggle 1.5s infinite ease-in-out, stickyGlow 2s ease-in-out infinite alternate;
}

@keyframes stickyGlow {
  0% { box-shadow: 0 4px 18px rgba(56, 239, 56, 0.4); }
  100% { box-shadow: 0 4px 28px rgba(255, 183, 3, 0.75); }
}

/* POPUPS */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(3, 6, 18, 0.86);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.popup-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.popup-box {
  background: linear-gradient(180deg, #0d163d, #060a1f);
  border: 1.5px solid var(--planet-cyan);
  border-radius: 18px;
  padding: 24px 20px;
  width: 100%;
  max-width: 340px;
  position: relative;
  text-align: center;
  box-shadow: 0 0 45px rgba(24, 197, 232, 0.35);
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.popup-crown {
  font-size: 40px;
  margin-bottom: 12px;
}

.popup-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--apollo-green);
  margin-bottom: 6px;
}

.popup-subtitle {
  font-size: 13px;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.win-pop-img {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(24, 197, 232, 0.4);
}

.win-pop-game {
  font-size: 18px;
  font-weight: 700;
  color: var(--planet-cyan);
  margin-bottom: 16px;
}

.win-pop-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.win-pop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(24, 197, 232, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
}

.win-pop-label {
  font-size: 13px;
  color: #94a3b8;
}

.win-pop-val {
  font-size: 13px;
  font-weight: 600;
}

.win-pop-multi {
  color: var(--apollo-green);
  font-size: 16px;
  font-weight: 800;
}

.win-pop-prize {
  background: linear-gradient(135deg, #fff3b0, var(--pg-gold), var(--pg-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 18px;
  font-weight: 800;
}

/* TOAST NOTIFICATION */
.toast-notif {
  position: fixed;
  bottom: 74px;
  left: 16px;
  right: 16px;
  max-width: 340px;
  z-index: 998;
  background: linear-gradient(135deg, #0b1336, #141f52);
  border: 1px solid var(--planet-cyan);
  border-radius: 12px;
  padding: 12px 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  box-shadow: 0 8px 26px rgba(24, 197, 232, 0.35);
}

.toast-notif.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.toast-text {
  flex: 1;
  font-size: 13px;
}

.toast-text strong {
  color: var(--apollo-green);
}

.toast-amount {
  color: var(--pg-gold);
  font-weight: 700;
}

.toast-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* POPUP 3: IN-PAGE REGISTRATION IFRAME MODAL */
.reg-modal-overlay {
  padding: 12px;
  z-index: 2500;
}

.reg-modal-box {
  width: 100%;
  max-width: 450px;
  height: 84vh;
  max-height: 760px;
  background: linear-gradient(180deg, #0b1332 0%, #060a1f 100%);
  border: 1.5px solid var(--planet-cyan);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 36px rgba(24, 197, 232, 0.35);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.25s ease;
}

.reg-modal-overlay.active .reg-modal-box {
  transform: translateY(0) scale(1);
}

.reg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(90deg, #0f1c48, #142458);
  border-bottom: 1px solid rgba(24, 197, 232, 0.35);
  flex-shrink: 0;
}

.reg-modal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reg-modal-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--apollo-green);
}

.reg-modal-title {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}

.reg-modal-sub {
  font-size: 10.5px;
  color: var(--apollo-green);
}

.reg-modal-close {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fecaca;
  font-family: 'Kanit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.reg-modal-close:hover {
  background: #ef4444;
  color: #fff;
}

.reg-iframe-wrap {
  position: relative;
  flex: 1;
  background: #ffffff;
  overflow: hidden;
}

.reg-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.reg-iframe-loader {
  position: absolute;
  inset: 0;
  background: #080f2c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #cbd5e1;
  font-size: 13px;
  z-index: 5;
  transition: opacity 0.25s ease;
}

.reg-iframe-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.reg-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(24, 197, 232, 0.25);
  border-top-color: var(--apollo-green);
  animation: regSpin 0.8s linear infinite;
}

@keyframes regSpin {
  to { transform: rotate(360deg); }
}

.reg-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: #060a1f;
  border-top: 1px solid rgba(24, 197, 232, 0.25);
  flex-shrink: 0;
}

.reg-footer-line {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--apollo-green);
  text-decoration: none;
}

.reg-footer-ext {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--planet-cyan);
  text-decoration: none;
}

/* SAFE PAGE FOOTER & POLICY MODAL */
.safe-footer {
  margin: 8px 16px 24px;
  padding: 14px 12px;
  border-top: 1px solid rgba(99, 102, 241, 0.25);
  text-align: center;
}

.safe-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 11.5px;
}

.safe-policy-link {
  background: none;
  border: none;
  padding: 0;
  color: #94a3b8;
  font-family: 'Kanit', sans-serif;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.safe-policy-link:hover {
  color: var(--planet-cyan);
}

.safe-footer-copy {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.5;
}

.policy-modal-box {
  max-width: 380px;
  text-align: left;
}

.policy-modal-content {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.6;
  margin-top: 8px;
}

.policy-modal-content p {
  margin-bottom: 8px;
}

.policy-modal-content ul {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ASTRONEER SAFE PAGE SPECIFIC STYLES */
.astroneer-cover {
  position: relative;
  height: 195px;
  overflow: hidden;
  background: radial-gradient(circle at top right, #0e3a5c, #060b22);
}

.astroneer-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.75) saturate(1.15);
}

.astroneer-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 6, 19, 0.25) 0%, rgba(4, 6, 19, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px 26px;
}

.astro-features-section {
  padding: 0 16px 16px;
}

.astro-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.astro-feature-card {
  background: rgba(14, 23, 58, 0.85);
  border: 1px solid rgba(24, 197, 232, 0.32);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 0 14px rgba(24, 197, 232, 0.08);
}

.astro-feature-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

.astro-feature-title {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.astro-feature-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

.safe-steam-ext-btn {
  display: block;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(24, 197, 232, 0.14);
  border: 1px solid rgba(24, 197, 232, 0.4);
  color: #bae6fd;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.safe-steam-ext-btn:hover {
  border-color: var(--apollo-green);
  color: #fff;
}

.win-card img,
.win-game-img,
.win-game-thumb-img,
.astro-mission-thumb {
  width: 72px;
  height: 52px;
  max-width: 72px;
  max-height: 52px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(24, 197, 232, 0.48);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}