:root{
  --fp-accent: #3B5F98;
  --fp-accent-2: #2f4f7e;
  --fp-accent-ink: #ffffff;

  --fp-ink: rgba(15, 23, 42, 0.96);
  --fp-muted: rgba(0,0,0,.65);
  --fp-border: rgba(0,0,0,.08);

  --fp-ok: #3B5F98;
  --fp-bad: #64748b;
  --fp-ok-bg: rgba(59,95,152,.10);
  --fp-bad-bg: rgba(100,116,139,.12);
  
  --fp-radius: 20px;
}

/* GLOBAL RESET: Verhindert seitliches Scrollen auf Mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

html {
  scroll-padding-top: 140px; 
}

/* =========================
   SEO SECTION
   ========================= */
.fp-seo{
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 0 18px;
  color: var(--fp-ink);
  font-family: sans-serif;
}

.fp-seo h1{
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
  margin: 12px 0 12px;
}

.fp-seo p{
  margin: 0 0 12px;
  color: var(--fp-muted);
  max-width: 75ch;
  line-height: 1.6;
}

.fp-seo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 16px;
  margin: 20px 0;
}

.fp-seo-card, .fp-faq{
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

.fp-seo-card h2{ font-size: 18px; margin: 0 0 8px; }
.fp-faq{ margin-top: 24px; }
.fp-faq h2{ margin: 0 0 12px; font-size: 20px; }
.fp-faq details{ border-top: 1px solid var(--fp-border); padding: 12px 0; }
.fp-faq details:first-of-type{ border-top: 0; }
.fp-faq summary{ cursor: pointer; font-weight: 700; color: var(--fp-ink); }
.fp-faq p{ margin: 8px 0 0; color: var(--fp-muted); max-width: none; }

/* =========================
   APP WRAPPER
   ========================= */
#fp-app{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  color: var(--fp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  width: 100%; /* Ensure fits in viewport */
}

/* =========================
   BASE / CARDS
   ========================= */
.fp-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--fp-radius);
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.fp-inner{
  background: #f8fafc;
  border: 1px solid var(--fp-border);
  border-radius: 16px;
  padding: 16px;
}

.fp-row{ display:flex; gap:12px; flex-wrap:wrap; }
.fp-col{ flex:1 1 280px; }

.fp-h1{
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 16px;
  color: var(--fp-ink);
  max-width: 100%;
  overflow-wrap: break-word; /* Prevents overflow on long words */
}

.fp-h2{
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--fp-ink);
}

.fp-muted{
  color: var(--fp-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.fp-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 20px 0;
  width: 100%;
}

/* =========================
   HERO
   ========================= */
.fp-hero{
  background: linear-gradient(135deg, var(--fp-accent) 0%, #1e3a63 100%);
  color: #fff;
  text-align: center;
  padding: 40px 24px;
}
.fp-hero-icon{ font-size: 48px; margin-bottom: 8px; display: block; }
.fp-club-label{
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  opacity: .9;
  font-weight: 700;
}
.fp-headline{
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 800;
  margin: 10px 0 0;
  color: #fff;
}
.fp-subheadline{
  font-size: 16px;
  margin: 12px auto 0;
  max-width: 60ch;
  opacity: .95;
  color: rgba(255,255,255,0.9);
}

/* =========================
   GRID / TILES
   ========================= */
.fp-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.fp-tile{
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--fp-border);
  background: #fdfdfd;
  cursor: pointer;
  transition: all .15s ease;
}
.fp-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border-color: rgba(59,95,152,.3);
}
.fp-tile strong{ display:block; font-size: 16px; margin-bottom: 4px; color: var(--fp-ink); }
.fp-tile span{ font-size: 14px; color: var(--fp-muted); }

/* =========================
   BUTTONS
   ========================= */
#fp-app .fp-btn{
  appearance: none;
  border: none !important;
  background-color: var(--fp-accent) !important;
  color: var(--fp-accent-ink) !important;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#fp-app .fp-btn:hover{ background-color: var(--fp-accent-2) !important; color: #fff !important; }

#fp-app .fp-btn.secondary{
  background-color: #f1f5f9 !important;
  color: #334155 !important;
}
#fp-app .fp-btn.secondary:hover{ background-color: #e2e8f0 !important; }

#fp-app .fp-btn:disabled{
  background-color: #cbd5e1 !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: .8;
}

/* =========================
   PILLS / HUD
   ========================= */
.fp-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: #f1f5f9;
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

/* Sticky HUD */
.fp-sticky{
  position: sticky;
  top: 20px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  margin-bottom: 24px;
}

.fp-progress{
  height: 8px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 12px;
}
.fp-progress-bar{
  height: 100%;
  width: 0%;
  background: var(--fp-accent);
  transition: width .3s ease;
}
.fp-progress-meta{ margin-top: 6px; font-size: 13px; color: var(--fp-muted); text-align: right; }

/* =========================
   QUESTIONS / ANSWERS (FIXED)
   ========================= */
.fp-answers{
  display: flex; /* Better control than grid for wrapping */
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}

/* Desktop: 2 columns for answers if enough space */
@media(min-width: 768px) {
  .fp-answers { 
    display: grid;
    grid-template-columns: 1fr; 
  } 
}

#fp-app .fp-answer{
  text-align: left;
  width: 100%;
  max-width: 100%; /* Prevent overflow */
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  color: #334155 !important;
  font-size: 16px;
  line-height: 1.4;
  transition: all .1s ease;
  position: relative;
  box-sizing: border-box; /* Includes padding in width */
  
  /* CRITICAL FIXES FOR TEXT WRAPPING */
  white-space: normal !important; /* Force text wrap */
  height: auto !important; /* Allow button to grow vertically */
  overflow-wrap: break-word; /* Break long words */
  word-wrap: break-word; /* Legacy support */
  hyphens: auto; /* Optional: Hyphenate words */
  display: block; /* Ensure block behavior */
}

#fp-app .fp-answer:hover{
  border-color: var(--fp-accent);
  background: #fff;
  box-shadow: 0 4px 12px rgba(59,95,152,.15);
}
#fp-app .fp-answer:active{ transform: scale(0.99); }

#fp-app .fp-answer.is-selected{
  background: var(--fp-accent) !important;
  color: #fff !important;
  border-color: var(--fp-accent);
  box-shadow: 0 4px 12px rgba(59,95,152,.3);
}

#fp-app .fp-answer:disabled{ opacity: .7; cursor: not-allowed; }

/* =========================
   RESULTS
   ========================= */
.fp-ok{ color: var(--fp-ok); font-weight: 700; }
.fp-bad{ color: var(--fp-bad); font-weight: 700; }

.fp-result{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  margin: 20px 0;
}
.fp-big{ font-size: 56px; font-weight: 800; line-height: 1; color: var(--fp-ink); }
.fp-big-sub{ font-size: 20px; opacity: .5; margin-left: 4px; font-weight: 400; }

/* Inputs */
.fp-input{
  width: 100%;
  max-width: 320px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 16px;
}

/* Leaderboard */
.fp-leader{ display: grid; gap: 8px; margin-top:12px; }
.fp-leader-row{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 14px;
}
.fp-rank{ font-weight: 800; color: var(--fp-accent); }
.fp-name{ font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-score{ font-weight: 700; }
.fp-date{ font-size: 11px; color: var(--fp-muted); display: block; }

/* Review List */
.fp-review-list{ display: grid; gap: 16px; margin-top: 16px; }
.fp-review-item{
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  overflow-wrap: break-word; /* Prevents overflow here too */
}
.fp-review-top{ display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

/* CTA Area */
.fp-cta{ margin-top: 24px; display: flex; gap: 12px; }

/* =========================
   MOBILE OPTIMIZATION
   ========================= */
@media (max-width: 720px){
  html { scroll-padding-top: 160px; }

  /* Container Padding for Fixed Footer */
  #fp-app{
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    padding-left: 14px;
    padding-right: 14px;
    width: 100vw; /* Strict width */
    max-width: 100%;
  }

  .fp-card {
    padding: 16px 14px 24px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .fp-h1{
    font-size: 18px !important;
    margin-bottom: 12px !important;
    hyphens: auto;
    word-break: break-word;
  }
  
  /* Sticky Header Smaller */
  .fp-sticky{
    top: 10px;
    padding: 10px 12px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
  }
  .fp-pill{ font-size: 11px !important; padding: 4px 8px !important; }
  
  /* Fixed Bottom CTA */
  .fp-cta{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,.1);
    margin: 0;
    /* Respect Safe Area (iPhone X+) */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,.05);
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
  }
  
  .fp-cta .fp-btn{
    flex: 1;
    padding: 14px;
    font-size: 16px; /* Better touch target */
  }

  /* Answers optimized for touch & TEXT WRAP */
  #fp-app .fp-answer{
    padding: 12px 14px !important;
    font-size: 15px !important;
    min-height: 54px; /* Touch target size */
    display: flex;
    align-items: center;
    /* Ensure wrapping specifically on mobile */
    white-space: normal !important;
    line-height: 1.35 !important;
  }
  
  /* Leaderboard mobile tweak */
  .fp-leader-row{ grid-template-columns: 30px 1fr auto; font-size: 13px; }
  
  /* Hide specific desktop hints if space is tight */
  .fp-progress-meta { display: none; }
}

/* =========================
   ANIMATIONS (NEW)
   ========================= */
@keyframes fp-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.fp-shake {
  animation: fp-shake 0.4s ease-in-out;
  border-color: var(--fp-bad) !important;
  background-color: var(--fp-bad-bg) !important;
}