@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --gta-bg: #07060c;
  --gta-border: #1e1e35;
  --gta-card: #0f0e18;
  --gta-coral: #ff6b35;
  --gta-dim: #505060;
  --gta-gold: #f4a623;
  --gta-logo-blue: #1b5faa;
  --gta-muted: #9090a0;
  --gta-pink: #e91e8c;
  --gta-teal: #00d4c8;
  --gta-text: #ffffff;
  --ps5-blue: #0070d1;
  --xbox-green: #107c10;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--gta-bg);
  color: var(--gta-text);
  font-family: 'Inter', sans-serif;
}

.page { overflow-x: hidden; }

/* Hero */

.hero {
  position: relative;
  min-height: 680px;
  background: url('assets/lucia_moto.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 60px 20px;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 16, 0.8) 0%, rgba(8, 6, 14, 0.47) 40%, rgba(8, 6, 16, 0.87) 100%);
}

.hero__streak {
  position: absolute;
  height: 3px;
  filter: blur(42px);
  pointer-events: none;
}

.hero__streak--pink { width: 500px; top: 120px; left: 55%; background: var(--gta-pink); opacity: 0.55; transform: rotate(-8deg); }
.hero__streak--orange { width: 580px; top: 400px; left: -80px; background: var(--gta-coral); opacity: 0.45; transform: rotate(5deg); }
.hero__streak--blue { width: 550px; top: 580px; right: -80px; background: var(--gta-logo-blue); opacity: 0.5; transform: rotate(-5deg); }

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 1000px;
  text-align: center;
}

.eyebrow {
  margin: 0;
  color: var(--gta-coral);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
}

.headline {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 8vw, 108px);
  line-height: 0.95;
  background: linear-gradient(90deg, #ffffff 0%, #ff3c78 55%, #ff6b35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  margin: 0;
  color: var(--gta-muted);
  font-size: 18px;
  max-width: 600px;
}

.scroll-hint {
  margin: 0;
  color: var(--gta-pink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
}

/* Counter section */

.counter-section {
  position: relative;
  background: url('assets/vice_city.jpg') center/cover no-repeat;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.counter-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 6, 12, 0.93) 0%, rgba(7, 6, 12, 0.69) 50%, rgba(7, 6, 12, 0.93) 100%);
}

.counter-label {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--gta-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
}

.cards-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}

.platform-card {
  position: relative;
  flex: 1 1 320px;
  min-height: 280px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  border-top: 4px solid transparent;
}

.platform-card--ps5 { background-image: url('assets/lucia_boxing.jpg'); border-top-color: var(--ps5-blue); }
.platform-card--xbox { background-image: url('assets/jason.jpg'); border-top-color: var(--xbox-green); }

.platform-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 14, 0.8) 0%, rgba(6, 5, 14, 0.53) 50%, rgba(6, 5, 14, 0.8) 100%);
}

.platform-card__label,
.platform-card__count,
.platform-card__registered,
.platform-card__percentage {
  position: relative;
  z-index: 1;
  margin: 0;
}

.platform-card__label { font-size: 11px; font-weight: 700; letter-spacing: 3px; }
.platform-card--ps5 .platform-card__label { color: var(--ps5-blue); }
.platform-card--xbox .platform-card__label { color: var(--xbox-green); }

.platform-card__count {
  font-family: 'Anton', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  color: var(--gta-text);
}

.platform-card__registered { color: var(--gta-muted); font-size: 13px; }
.platform-card__percentage { color: var(--gta-dim); font-size: 11px; }

.counter-disclaimer {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 720px;
  color: var(--gta-dim);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* CTA section */

.cta-section {
  position: relative;
  background: url('assets/vice_city2.jpg') center/cover no-repeat;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.cta-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 6, 12, 0.94) 0%, rgba(7, 6, 12, 0.73) 50%, rgba(7, 6, 12, 0.94) 100%);
}

.cta-headline {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 52px);
  max-width: 860px;
  color: var(--gta-text);
}

.cta-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--gta-muted);
  font-size: 15px;
  max-width: 540px;
}

.button-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px 48px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.vote-btn:hover:not(:disabled) { transform: translateY(-2px); }
.vote-btn:disabled { opacity: 0.6; cursor: wait; }

.vote-btn--ps5 { background: linear-gradient(180deg, #0070d1 0%, #0050a0 100%); border-color: #3399ff; }
.vote-btn--xbox { background: linear-gradient(180deg, #107c10 0%, #0a5c0a 100%); border-color: #52b043; }

.vote-btn__label { color: #fff; font-size: 16px; font-weight: 700; }
.vote-btn__platform { color: rgba(255, 255, 255, 0.73); font-size: 10px; letter-spacing: 1px; }

.voted-state { position: relative; z-index: 1; }
.voted-state__text { margin: 0; font-size: 18px; color: var(--gta-text); }
.voted-check { color: var(--gta-teal); }

.status-message { position: relative; z-index: 1; margin: 0; color: var(--gta-gold); font-size: 14px; }

/* Footer */

.site-footer {
  background: #050508;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.copyright { margin: 0; color: var(--gta-dim); font-size: 11px; max-width: 1060px; }
.ip-disclaimer { margin: 0; color: #404050; font-size: 10px; max-width: 1060px; }

@media (max-width: 640px) {
  .counter-section, .cta-section { padding-left: 16px; padding-right: 16px; }
  .vote-btn { padding: 16px 32px; width: 100%; max-width: 320px; }
}