/* Goudster – NL/FR decks with Dutch-flag quiz buttons */
:root{
  --nl-blue:#21409a;
  --nl-red:#ff4b3a;
  --bg:#f3f4ff;
  --card:#ffffff;
  --ink:#0b1220;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:18px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* HEADER */
.header{
  background:linear-gradient(135deg,var(--nl-blue),var(--nl-red));
  color:#fff;
  padding:12px 16px;
}
.container{
  max-width:960px;
  margin:0 auto;
}
.header-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.logo a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1.2rem;
}
.tagline{
  margin-left:6px;
  font-size:.9rem;
  opacity:.9;
}
.nav-list{
  list-style:none;
  display:flex;
  gap:12px;
  padding:0;
  margin:0;
}
.nav-list a{
  color:#e5e7eb;
  text-decoration:none;
  font-size:.9rem;
}
.nav-list a.active,
.nav-list a:hover{
  color:#fff;
  text-decoration:underline;
}

/* LAYOUT */
.main{
  max-width:960px;
  margin:16px auto 32px;
  padding:0 16px;
}
.main--narrow{
  max-width:620px;
}
.intro h1{
  font-size:1.4rem;
  margin-bottom:4px;
}
.intro p{
  margin:0 0 12px;
  color:var(--muted);
}
.intro--center{
  text-align:center;
}

/* INDEX DECK GRID */
.deck-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.deck-card{
  display:block;
  padding:14px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 10px 25px rgba(15,23,42,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.deck-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 35px rgba(15,23,42,.12);
}
.deck-card h2{
  margin:4px 0;
  font-size:1.05rem;
}
.deck-card p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}
.deck-emoji{
  font-size:1.6rem;
}

/* DECK PAGE TABS */
.deck-name{ color:var(--nl-blue); }

.tabs{
  display:flex;
  gap:8px;
  margin:12px auto;
  max-width:520px;
}
.tab{
  flex:1;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#e5edff;
  cursor:pointer;
  font-size:.9rem;
}
.tab.active{
  background:var(--nl-blue);
  color:#fff;
}
.pane{ margin-top:8px; }

/* STUDY CARDS */
.card-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  margin:0 auto 8px;
  max-width:520px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
}
.card-emoji{ font-size:1.6rem; }
.card-nl{ font-weight:600; }
.card-fr{
  font-size:.9rem;
  color:var(--muted);
}

/* QUIZ LAYOUT */
.quiz-item{
  margin:0 auto 14px;
  padding:10px 0;
  max-width:520px;
}

/* 👉 Question text */
.quiz-label{
  margin:0 0 8px;
  text-align:center;
  font-size:1.3rem;
  font-weight:700;
}

.quiz-options{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* FLAG-STYLE QUIZ BUTTONS */
.quiz-opt{
  position:relative;
  width:100%;
  max-width:480px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  cursor:pointer;
  font-size:.95rem;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
  justify-content:flex-start;
}

/* 1 = red, 2 = white, 3 = blue */
.quiz-opt-1{
  background:#ff0000;
  color:#ffffff;
}
.quiz-opt-2{
  background:#ffffff;
  color:#000000;
  border-color:#dbe3ff;
}
.quiz-opt-3{
  background:#0047ff;
  color:#ffffff;
}

/* NUMBER CIRCLE */
.quiz-number{
  flex:0 0 34px;
  height:34px;
  border-radius:50%;
  border:2px solid #000;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.95rem;
}

/* Inject the number 1/2/3 from data-index */
.quiz-opt[data-index="1"] .quiz-number::before{ content:"1"; }
.quiz-opt[data-index="2"] .quiz-number::before{ content:"2"; }
.quiz-opt[data-index="3"] .quiz-number::before{ content:"3"; }

/* 👉 Center only the answer text */
.quiz-text{
  flex:1;
  text-align:center;
   font-size: 1.2rem;  /* ≈ 19px */
}

/* Feedback */
.quiz-opt.correct{
  box-shadow:0 0 0 3px #22c55e;
}
.quiz-opt.wrong{
  opacity:0.6;
}

/* SCORE */
.score-box{
  margin:10px auto 0;
  padding:6px 10px;
  border-radius:999px;
  background:#e5edff;
  font-size:.85rem;
  max-width:320px;
  text-align:center;
}

/* RESPONSIVE */
@media (max-width:600px){
  .header-content{
    flex-direction:column;
    align-items:flex-start;
  }
}

.quiz-number{
  flex:0 0 34px;
  height:34px;
  border-radius:50%;
  border:2px solid #000;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.95rem;
  color:#000;           /* ✅ number visible on red & blue */
}
.quiz-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
  margin:12px auto 4px;
  max-width:520px;
}

.quiz-nav-btn{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#e5edff;
  font-size:.85rem;
  cursor:pointer;
}

.quiz-nav-btn.quiz-nav-check{
  background:#22c55e;
  color:#fff;
  border-color:#16a34a;
}

.quiz-nav-status{
  font-size:.85rem;
  color:var(--muted);
}

/* End-of-quiz buttons */
.quiz-end {
  display: flex;          /* JS sets it to flex when visible */
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.quiz-end-btn {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: none;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* “Take another quiz” – soft blue */
.quiz-end-btn.quiz-again {
  background: #e0edff;
  color: #0047ab;
  box-shadow: 0 2px 6px rgba(0, 71, 171, 0.15);
}

/* “Resultat” – warm accent (orange/red) */
.quiz-end-btn.quiz-result {
  background: #ff6b35;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.25);
}

.quiz-end-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.quiz-end-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}