:root{
  --jeuninfo-primary: #e10000;
  --jeuninfo-bg: #ffffff;
  --jeuninfo-text: #222222;
  --jeuninfo-card-width: 820px;
}
.jeuninfo-toc-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  margin:22px 0;
  padding:0 12px;
  box-sizing:border-box;
  opacity:0;
  transform:translateY(-10px);
  animation:jeuninfo-toc-fade 0.52s ease forwards;
}
@keyframes jeuninfo-toc-fade{
  to{ opacity:1; transform:translateY(0); }
}
.jeuninfo-toc-card{
  width:var(--jeuninfo-width, var(--jeuninfo-card-width));
  max-width:100%;
  background: linear-gradient(145deg, rgba(255,255,255,1), rgba(245,245,245,1));
  border-radius:20px;
  padding:18px;
  box-shadow: 14px 14px 36px rgba(0,0,0,0.10), -14px -14px 28px rgba(255,255,255,0.9);
  border:1px solid rgba(0,0,0,0.04);
  color:var(--jeuninfo-text);
  transition:box-shadow 0.18s, transform 0.18s;
}
.jeuninfo-toc-card:hover{ transform:translateY(-4px); box-shadow: 18px 18px 46px rgba(0,0,0,0.12); }

.jeuninfo-toggle-top{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.jeuninfo-toggle-btn-top{ background:transparent; color:var(--jeuninfo-primary); padding:6px 10px; border-radius:10px; font-weight:800; border:1px solid rgba(0,0,0,0.05); cursor:pointer; }

.jeuninfo-toc-card .jeuninfo-toc-title{ font-weight:800; color:var(--jeuninfo-primary); font-size:20px; text-align:center; margin-bottom:10px; }
.jeuninfo-toc-card .jeuninfo-toc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:320px; overflow:auto; padding:6px; }
.jeuninfo-toc-card .jeuninfo-toc-list li{ line-height:1.3; padding:6px 10px; border-radius:8px; transition:background 0.18s, transform 0.12s; }
.jeuninfo-toc-card .jeuninfo-toc-list li:hover{ background: rgba(225,16,16,0.06); transform:translateX(4px); }
.jeuninfo-toc-card .jeuninfo-toc-list li.level-h2{ font-weight:700; color:rgba(0,0,0,0.85); }
.jeuninfo-toc-card .jeuninfo-toc-list li.level-h3{ margin-left:6px; color:rgba(0,0,0,0.75); }
.jeuninfo-toc-card .jeuninfo-toc-list li.level-h4{ margin-left:12px; color:rgba(0,0,0,0.65); font-size:0.95em; }
.jeuninfo-toc-card .jeuninfo-toc-list a{ color:inherit; text-decoration:none; display:block; }
.jeuninfo-toc-card .jeuninfo-toc-list a.active{ color:var(--jeuninfo-primary); text-decoration:underline; font-weight:800; }

/* CTA */
.jeuninfo-toc-card .jeuninfo-toc-quiz{ margin-top:12px; display:flex; justify-content:center; align-items:center; gap:10px; }
.jeuninfo-quiz-cta{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:8px 12px; border-radius:10px; background:linear-gradient(90deg, rgba(225,16,16,1), rgba(255,80,80,1)); color:#fff; box-shadow: 0 6px 18px rgba(225,16,16,0.18); font-weight:800; }
.jeuninfo-lottie{ width:36px; height:36px; display:inline-block; }
.jeuninfo-quiz-text{ color:#fff; font-weight:800; }

/* collapsed state */
.jeuninfo-toc-wrapper.jeuninfo-collapsed .jeuninfo-toc-list,
.jeuninfo-toc-wrapper.jeuninfo-collapsed .jeuninfo-toc-quiz{ display:none; }
.jeuninfo-toc-wrapper.jeuninfo-collapsed .jeuninfo-toggle-btn-top{ background:var(--jeuninfo-primary); color:#fff; }

/* responsive */
@media(max-width:900px){
  .jeuninfo-toc-wrapper{ margin:12px 0; padding:0 8px; }
  .jeuninfo-toc-card{ width:100%; padding:12px; border-radius:14px; }
  .jeuninfo-toc-card .jeuninfo-toc-list{ max-height:220px; display:block; }
  .jeuninfo-toc-card .jeuninfo-toc-list li{ padding:8px; margin:6px 0; }
}