/* HistoricJackpot — base.css : reset, tokens, typography */
:root{
  --color-bg: #0D3B44;
  --color-surface: #144B56;
  --color-accent: #D97B4B;
  --color-bg-light: #F7F4EC;
  --color-text-light: #171C1B;
  --color-text-dark: #EEF4F2;
  --color-warning: #B4531F;
  --color-success: #2C6E5B;
  --font-head: 'Outfit', system-ui, sans-serif;
  --font-body: 'Lora', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden]{ display:none !important; }

body{
  margin:0;
  background: var(--color-bg-light);
  color: var(--color-text-light);
  font-family: var(--font-body);
  line-height:1.6;
  font-size:1.05rem;
}

h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight:700;
  line-height:1.2;
  color: var(--color-bg);
  margin-top:0;
}

a { color: var(--color-success); text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--color-warning); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

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

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background: var(--color-accent);
  color:#171C1B;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  font-family: var(--font-head);
  font-weight:700;
  border-radius: 0 0 6px 0;
}
.skip-link:focus{
  left:0;
  top:0;
}

/* Age gate */
#age-gate-overlay{
  position: fixed;
  inset: 0;
  background: rgba(13,59,68,0.96);
  color: var(--color-text-dark);
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.5rem;
}
#age-gate-box{
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  max-width: 480px;
  width:100%;
  padding: 2rem;
  text-align:center;
}
#age-gate-box h2{ color: var(--color-text-dark); }
#age-gate-box p{ color: var(--color-text-dark); }
.age-gate-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-top:1.5rem;
  flex-wrap:wrap;
}
.age-gate-actions button{
  font-family: var(--font-head);
  font-weight:700;
  font-size:1rem;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  border: 2px solid var(--color-accent);
  cursor:pointer;
}
#age-yes{ background: var(--color-accent); color:#171C1B; }
#age-no{ background: transparent; color: var(--color-text-dark); }
#age-yes:hover, #age-yes:focus{ background:#c26a3c; }
#age-no:hover, #age-no:focus{ background: rgba(255,255,255,0.1); }

@media (prefers-reduced-motion: no-preference){
  .route-list li{
    animation: fadeIn 0.35s ease-in both;
  }
  .route-list li:nth-child(2){ animation-delay: 0.05s; }
  .route-list li:nth-child(3){ animation-delay: 0.1s; }
  .route-list li:nth-child(4){ animation-delay: 0.15s; }
  .route-list li:nth-child(5){ animation-delay: 0.2s; }
  .route-list li:nth-child(6){ animation-delay: 0.25s; }
  .route-list li:nth-child(7){ animation-delay: 0.3s; }
  @keyframes fadeIn{
    from{ opacity:0; transform: translateY(6px); }
    to{ opacity:1; transform: translateY(0); }
  }
}

small.verify, p.verify-note, .verify-tag{
  color: var(--color-warning);
  font-size:0.9rem;
  font-weight:600;
}