/* =============================================
   drawly — Styles  (Mobile-first, Vanilla CSS)
   ============================================= */

/* === 1. Variables === */
:root {
  --heiss-500: #F97316;
  --heiss-600: #EA580C;
  --heiss-700: #C2410C;
  --kalt-500:  #06B6D4;
  --kalt-600:  #0891B2;
  --kalt-700:  #0E7490;
  --bg:           #FAFAF9;
  --surface:      #FFFFFF;
  --border:       #E7E5E4;
  --text-primary: #0F172A;
  --text-sec:     #64748B;

  /* Active mode — default heiss, toggled via .mode-kalt on body */
  --accent:     var(--heiss-500);
  --accent-btn: var(--heiss-600);
  --accent-txt: var(--heiss-700);

  --page-pad:    16px;
  --content-max: 640px;
  --btn-h:       56px;
  --radius-pill: 999px;
}

body.mode-kalt {
  --accent:     var(--kalt-500);
  --accent-btn: var(--kalt-600);
  --accent-txt: var(--kalt-700);
}

/* === 2. Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  /* room for fixed generate button on mobile */
  padding-bottom: calc(var(--btn-h) + env(safe-area-inset-bottom, 0px) + 24px);
}
img, svg { max-width: 100%; display: block; }
a  { color: inherit; }
button { cursor: pointer; font-family: inherit; background: none; border: none; }

/* Visually hidden (screen-reader only) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === 3. Page Layout === */
.page-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* === 4. Header === */
.site-header {
  padding: 28px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.site-header--simple { align-items: flex-start; }

.logo-link { display: inline-block; text-decoration: none; line-height: 0; }
.wordmark  { height: 34px; width: auto; }
.tagline {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  color: var(--text-sec);
  letter-spacing: 0.01em;
}

/* === 5. Lottery Nav === */
.lottery-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 20px 0 32px;
}
.lottery-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 200ms, color 200ms;
  min-height: 44px;
}
.lottery-pill--active {
  border-color: var(--accent);
  color: var(--accent-txt);
}

/* === 6. Generator Section === */
.generator-section { display: flex; flex-direction: column; gap: 24px; }

.mode-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  text-align: center;
}

.mode-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  transition: border-color 200ms, color 200ms, background-color 200ms;
  min-height: 44px;
}
.mode-pill--active {
  border-color: var(--accent);
  color: var(--accent-txt);
  background-color: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
/* Fallback for browsers without color-mix */
@supports not (background-color: color-mix(in srgb, red 10%, white)) {
  .mode-pill--active { background-color: var(--surface); }
}

.mode-desc {
  font-size: 0.85rem;
  color: var(--text-sec);
  text-align: center;
  line-height: 1.65;
  min-height: 3.3em;
  transition: opacity 150ms ease;
}
.mode-desc.fade-out { opacity: 0; }

/* === 7. Slider === */
.slider-group { display: flex; flex-direction: column; gap: 10px; }

.slider-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.slider-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: color 200ms;
}

.slider-track-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slider-end {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-sec);
  min-width: 16px;
  text-align: center;
}

.slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
  /* Filled-track via CSS custom property set from JS */
  background:
    linear-gradient(var(--accent-btn), var(--accent-btn)) 0 / var(--fill, 0%) 100% no-repeat,
    var(--border);
  transition: background-color 200ms;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-btn);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer;
  transition: background 200ms, transform 100ms;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-btn);
  border: none;
  cursor: pointer;
  transition: background 200ms;
}
.slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* === 8. Generate Button === */
.btn-generate {
  /* Mobile: fixed at bottom of viewport */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--btn-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 200;
  background: var(--accent-btn);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  border: none;
  transition: background 200ms, opacity 200ms;
  touch-action: manipulation;
}
.btn-generate:hover   { filter: brightness(0.92); }
.btn-generate:active  { filter: brightness(0.85); }
.btn-generate:disabled { opacity: 0.5; pointer-events: none; }

/* === 9. Results === */
.results-wrap {
  margin-top: 36px;
  position: relative;
}
.results-wrap.is-animating { min-height: 200px; overflow: hidden; }

/* 3-Ball animation */
.ball-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ball-anim__ball {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  left: -60px;
}
.ball-anim__ball:nth-child(1) {
  top: 16px;
  animation: ball-fly 950ms cubic-bezier(.35,0,.25,1) both;
}
.ball-anim__ball:nth-child(2) {
  top: 78px;
  animation: ball-fly 950ms cubic-bezier(.35,0,.25,1) 140ms both;
}
.ball-anim__ball:nth-child(3) {
  top: 140px;
  animation: ball-fly 950ms cubic-bezier(.35,0,.25,1) 280ms both;
}
@keyframes ball-fly {
  0%  { transform: translateX(0) rotate(0deg);                      opacity: 0; }
  8%  { opacity: 1; }
  88% { opacity: 1; }
  100%{ transform: translateX(calc(100vw + 120px)) rotate(520deg);  opacity: 0; }
}

/* Tip rows */
.tip {
  margin-bottom: 24px;
  opacity: 0;
  animation: tip-in 300ms ease forwards;
}
.tip-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-sec);
  margin-bottom: 6px;
}
.tip-balls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tip-balls__gap { width: 16px; flex-shrink: 0; }

.ball {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  transition: border-color 200ms, background 200ms, color 200ms;
}
.ball--bonus {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@keyframes tip-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* === 10. Affiliate CTA === */
.cta-affiliate {
  display: block;
  text-align: center;
  background: var(--accent-btn);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  height: 56px;
  line-height: 56px;
  border-radius: var(--radius-pill);
  margin-top: 8px;
  margin-bottom: 88px; /* clears fixed generate button on mobile */
  transition: filter 150ms;
  padding: 0 24px;
}
.cta-affiliate:hover { filter: brightness(0.9); }
[hidden] { display: none !important; }

/* === 11. Extension Banner === */
.extension-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 32px;
}
.extension-banner__text { font-size: 0.9rem; color: var(--text-sec); }
.extension-banner__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent);
  color: var(--accent-txt);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  transition: border-color 200ms, color 200ms;
}

/* === 12. Footer === */
.site-footer {
  padding: 24px 0 36px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-nav a {
  font-size: 0.875rem;
  color: var(--text-sec);
  text-decoration: none;
  transition: color 150ms;
}
.footer-nav a:hover { color: var(--text-primary); }
.footer-warning {
  font-size: 0.78rem;
  color: var(--text-sec);
}
.footer-warning a { text-decoration: underline; }

/* === 13. Static Pages === */
.static-page { padding-bottom: 0; }

.static-content { padding: 32px 0 48px; }

.static-content h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: 24px;
  line-height: 1.3;
}
.static-content h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 32px 0 10px;
}
.static-content p {
  color: var(--text-sec);
  margin-bottom: 16px;
  line-height: 1.75;
}
.static-content strong { color: var(--text-primary); }
.static-content a { color: var(--accent-txt); text-decoration: underline; }

.faq { margin-top: 8px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.faq-a { color: var(--text-sec); margin: 0 !important; }

/* === 14. Tablet & Desktop === */
@media (min-width: 768px) {
  :root { --page-pad: 32px; }

  body { padding-bottom: 0; } /* no fixed button on desktop */

  .site-header { padding-top: 40px; }
  .wordmark { height: 40px; width: auto; }
  .tagline { font-size: 1rem; }
  .mode-desc { font-size: 0.95rem; }

  /* Generate button: inline, not fixed */
  .btn-generate {
    position: static;
    display: block;
    width: 100%; max-width: 320px;
    margin: 0 auto;
    border-radius: var(--radius-pill);
    height: 52px;
    padding-bottom: 0;
  }

  /* Larger balls */
  .ball { width: 48px; height: 48px; font-size: 1.05rem; }
  .tip-balls { gap: 6px; }
  .tip-balls__gap { width: 20px; }
  .tip { margin-bottom: 32px; }

  /* Affiliate CTA */
  .cta-affiliate {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    height: 52px;
    line-height: 52px;
    font-size: 1.05rem;
    margin-bottom: 28px;
  }

  .static-content h1 { font-size: 2.1rem; }
}

@media (min-width: 1024px) {
  :root { --content-max: 720px; }
}

/* === 15. Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ball-anim { display: none; }
  .tip { animation: none; opacity: 1; }
  .mode-pill, .lottery-pill, .btn-generate, .cta-affiliate,
  .slider, .mode-desc { transition: none; }
}