/* ================================

   QUIZ.CSS — Base + HUD + Anime Skin (opt-in)

   Pulito, leggibile, niente magia nera.

   ================================ */



/* ===== Base container ===== */

.ac-quiz{

  border:1px solid #e6e8ef;

  border-radius:12px;

  padding:18px;

  background:#fff;

  box-shadow:0 1px 3px rgba(0,0,0,.04);

  max-width:780px;

  margin:24px auto;

}

.ac-quiz__intro{ text-align:center }



/* ===== Buttons ===== */

.ac-quiz__btn{

  background:var(--primary-color);

  border:1px solid #d8dcef;

  border-radius:10px;

  padding:10px 14px;

  cursor:pointer;

}

.ac-quiz__btn--primary{ background:#2b5cff; color:#fff; border-color:#244de8 }

.ac-quiz__btn:disabled{ opacity:.6; cursor:not-allowed }



/* ===== Progress bar (più visibile) ===== */

.ac-quiz__progress{

  height:10px;

  background:#eef1fb;

  border:1px solid #dfe4ff;

  border-radius:10px;

  margin-bottom:14px;

  overflow:hidden;

  box-shadow:inset 0 1px 2px rgba(0,0,0,.03);

}

.ac-quiz__progress-bar{

  display:block;

  height:100%;

  width:0%;

  background:linear-gradient(90deg, #6ee0ff, #2b5cff, #845cff);

  box-shadow:0 0 6px rgba(43,92,255,.22);

  transition:width .3s ease-out;

}



/* ===== Quote + options ===== */

.ac-quiz__quote{ font-size:1.15rem; line-height:1.5; margin:8px 0 14px }

.ac-quiz__options{ list-style:none; margin:0; padding:0; display:grid; gap:10px }

.ac-quiz__option-row{ display:flex; justify-content:space-between; align-items:center; gap:12px }

.ac-quiz__optbtn{

  flex:1; text-align:left; padding:12px 14px;

  border:1px solid #e0e3ef; border-radius:10px;

  background:#fbfcff; color:var(--primary-color);

}

.ac-quiz__peek{ white-space:nowrap; font-size:.9rem }

.ac-quiz__optbtn.is-selected{ border-color:#244de8; box-shadow:0 0 0 3px rgba(43,92,255,.12) }

.ac-quiz__optbtn.is-correct{ background:#e8f7ef; border-color:#27ae60 }

.ac-quiz__optbtn.is-wrong  { background:#ffecec; border-color:#ff6b6b }

.ac-quiz__optbtn.is-muted  { opacity:.7 }



/* ===== Meta / Feedback ===== */

.ac-quiz__meta{ color:#6a7490; margin-top:6px }

.ac-quiz__feedback{

  margin-top:12px; padding:10px; border-radius:10px;

  background:#f6f8ff; border:1px solid #e1e6ff;

}



/* ===== Opera card (shortcode) ===== */

.ac-opera-card{

  display:flex; gap:12px; align-items:flex-start; margin-top:10px;

  border:1px solid #e8ebf7; border-radius:10px; padding:10px; background:#fff;

}

.ac-opera-card__img img{ width:90px; height:120px; object-fit:cover; border-radius:8px }

.ac-opera-card__title{ margin:0 0 4px }

.ac-opera-card__excerpt{ margin:0 0 6px; color:#5b6789 }

.ac-opera-card__cta{ font-weight:600 }



/* ===== Actions ===== */

.ac-quiz__actions{ display:flex; gap:10px; margin-top:14px }



/* ===== Result (score + breakdown + badge) ===== */

.ac-quiz__result{ text-align:center }

.ac-quiz__result p{ margin:.5rem 0 }

.ac-quiz__result-list{ list-style:none; margin:0; padding:0 }



.ac-quiz__breakdown{

  margin-top:10px; text-align:left; display:inline-block;

  font-size:.95rem; color:#444;

}

.ac-quiz__breakdown p{ margin:2px 0 }



.ac-quiz__badge-wrap{ text-align:center }

.ac-quiz__badge-img{

  display:inline-block; width:calc(75% - (2rem * 2)); height:auto; object-fit:contain;

  margin:2rem; align-items:center; border-radius:2rem;

}

.ac-quiz__badge-title{ margin:.25rem 0; font-size:1.05rem }

.ac-quiz__badge-text{ margin:0 0 .5rem; color:#5b6789 }



.ac-quiz__result-actions{

  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px;

}



/* ===== Gate (login) ===== */

.ac-quiz__gate{

  text-align:center; padding:18px; border:1px dashed #cfd6f3;

  border-radius:12px; background:#f7f9ff;

}



/* ===== HUD: Punti + Tempo ===== */

.ac-quiz__hud{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin:8px 0 10px;

  gap:12px;

  color:#2b5cff;

}

.ac-quiz__chip{

  display:inline-flex; align-items:center; gap:8px;

  padding:8px 12px; border:1px solid #d8dcef; border-radius:999px;

  background:#f7f9ff; color:#1a2a6b; box-shadow:0 1px 2px rgba(0,0,0,.04) inset;

  line-height:1; font-weight:600;

}

.ac-quiz__hud-points.ac-quiz__chip::before{ content:"⭐"; font-size:1.05rem; line-height:1 }

.ac-quiz__hud-timer.ac-quiz__chip{ font-variant-numeric:tabular-nums }

.ac-quiz__hud-timer.ac-quiz__chip::before{ content:"⏱️"; font-size:1.05rem; line-height:1 }

.ac-quiz__hud [data-acq-points],

.ac-quiz__hud [data-acq-timer]{ font-weight:700; color:#0e1b5d }

.ac-quiz__hud-timer.is-low{

  border-color:#ffd699; background:#fff8ec; color:#a65c00;

}

.ac-quiz__hud-timer.is-low::before{ content:"⚠️" }



/* ===== Error box ===== */

.ac-quiz-error{

  margin:12px auto; padding:12px 14px; border-radius:10px;

  border:1px solid #ffb4b4; background:#fff2f2; color:#b10000;

}



/* ===== Responsive niceties ===== */

@media (max-width:580px){

  .ac-opera-card__img img{ width:78px; height:104px }

  .ac-quiz__hud{ gap:8px }

  .ac-quiz__chip{ padding:7px 10px; font-size:.95rem }

}



/* =======================================================

   ANIME SKIN (opt-in): attiva con <div class="ac-quiz anime">

   ======================================================= */

.ac-quiz.anime{ position:relative; overflow:hidden }

.ac-quiz.anime::before,

.ac-quiz.anime::after{

  content:"";

  position:absolute; inset:auto -30% -40% -30%;

  height:220px;

  background:

    radial-gradient(70% 120% at 20% 50%, rgba(43,92,255,.12), transparent 60%),

    radial-gradient(70% 120% at 80% 40%, rgba(132,92,255,.10), transparent 60%);

  pointer-events:none; filter: blur(12px);

}



/* Intro ribbon */

.ac-quiz.anime .ac-quiz__intro h2{

  display:inline-block; padding:6px 14px;

  background:linear-gradient(180deg, #2b5cff, #214ae0);

  color:#fff; border-radius:10px; box-shadow:0 8px 22px rgba(43,92,255,.22);

  transform:skewX(-2deg);

}

.ac-quiz.anime .ac-quiz__intro p{ color:#4a5bd1 }



/* Buttons energizzati */

.ac-quiz.anime .ac-quiz__btn--primary{

  background:linear-gradient(180deg, #2b5cff 0%, #214ae0 100%);

  border-color:#214ae0;

  box-shadow:0 4px 10px rgba(43,92,255,.25), inset 0 0 0 1px rgba(255,255,255,.15);

}

.ac-quiz.anime .ac-quiz__btn--primary:hover{

  transform:translateY(-1px);

  box-shadow:0 8px 22px rgba(43,92,255,.30), inset 0 0 0 1px rgba(255,255,255,.18);

}



/* Quote “fumetto” */

.ac-quiz.anime .ac-quiz__quote{

  position:relative; padding:10px 12px; border-radius:12px;

  background:#f7f9ff; border:1px solid #dfe4ff;

}

.ac-quiz.anime .ac-quiz__quote::after{

  content:""; position:absolute; left:16px; bottom:-8px; width:14px; height:14px; transform:rotate(45deg);

  background:#f7f9ff; border-right:1px solid #dfe4ff; border-bottom:1px solid #dfe4ff;

}



/* Opzioni con outline manga */

.ac-quiz.anime .ac-quiz__optbtn{

  background:#fbfcff; border:2px solid #dfe4ff; box-shadow:0 1px 0 rgba(0,0,0,.03);

  transition: transform .05s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;

}

.ac-quiz.anime .ac-quiz__optbtn:hover{

  transform:translateY(-1px); border-color:#244de8; box-shadow:0 0 0 3px rgba(43,92,255,.12);

}

.ac-quiz.anime .ac-quiz__optbtn.is-selected{

  border-color:#244de8; background:linear-gradient(180deg, #eef2ff, #ffffff);

  box-shadow:0 0 0 4px rgba(43,92,255,.16);

}

.ac-quiz.anime .ac-quiz__optbtn.is-correct{

  background:#e8f7ef; border-color:#27ae60; box-shadow:0 0 0 3px rgba(39,174,96,.15);

}

.ac-quiz.anime .ac-quiz__optbtn.is-wrong{

  background:#ffecec; border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,.15);

}



/* Sbirciatina con icona */

.ac-quiz.anime .ac-quiz__peek a{

  position:relative; padding-left:1.25em; color:#2b5cff; text-decoration:none;

}

.ac-quiz.anime .ac-quiz__peek a:hover{ text-decoration:underline }

.ac-quiz.anime .ac-quiz__peek a::before{ content:"👁️"; position:absolute; left:0; top:0; width:1em }



/* Barra progresso coerente ma viva */

.ac-quiz.anime .ac-quiz__progress{

  height:10px; background:#eef1fb; border:1px solid #dfe4ff; border-radius:10px;

  overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.03);

}

.ac-quiz.anime .ac-quiz__progress-bar{

  background:linear-gradient(90deg, #6ee0ff, #2b5cff, #845cff);

  box-shadow:0 0 8px rgba(43,92,255,.25);

  transition:width .3s ease-out;

}



/* HUD anime */

.ac-quiz.anime .ac-quiz__chip{

  background:#f2f5ff; border-color:#d8dcef; box-shadow:0 0 0 3px rgba(43,92,255,.08) inset;

}

.ac-quiz.anime .ac-quiz__hud [data-acq-points],

.ac-quiz.anime .ac-quiz__hud [data-acq-timer]{ color:#162a8a }



/* Feedback + Opera card */

.ac-quiz.anime .ac-quiz__feedback{ background:#f6f8ff; border-color:#e1e6ff }

.ac-quiz.anime .ac-opera-card{ background:#fff; border-color:#e6e9fb; box-shadow:0 1px 2px rgba(0,0,0,.03) }

.ac-quiz.anime .ac-opera-card__cta a{ color:#2b5cff }



/* Badge finale con frame */

.ac-quiz.anime .ac-quiz__badge-wrap{ position:relative }

.ac-quiz.anime .ac-quiz__badge-wrap::before{

  content:""; position:absolute; inset:-10px; border:2px solid rgba(43,92,255,.15);

  border-radius:16px; pointer-events:none;

}



/* Result actions micro-hover */

.ac-quiz.anime .ac-quiz__result-actions .ac-quiz__btn:hover{ transform:translateY(-1px) }