/* ============================================================================
   daily5-theme.css — unified look & feel for the Daily 5 family
   (main / movies / finishlyric / collegefootball)
   ----------------------------------------------------------------------------
   All four share the same quiz structure (#quiz .quiz-card, #question,
   #answers, the progress ring). This file is the single source of truth for
   how a Daily 5 game LOOKS while playing: card, pills, question, answers,
   correct/wrong feedback, and per-game accent. It is linked LAST on each page
   so it wins the cascade; a few properties use !important to override the
   older per-page inline styles. Per-game accent comes from a body class
   (d5-daily5 / d5-movies / d5-lyric / d5-cfb).
   ========================================================================== */

:root{
  --d5-accent:#2f6bff;
  --d5-accent2:#6a9bff;
  --d5-soft:rgba(47,107,255,.16);
  --d5-card:#161c27;
  --d5-edge:#242d3d;
  --d5-tile:#1c2431;
  --d5-ink:#eef2fb;
  --d5-muted:#93a0b8;
  --d5-good:#3ddc84;
  --d5-bad:#ff5d63;
}
body.d5-daily5{--d5-accent:#2f6bff;--d5-accent2:#6a9bff;--d5-soft:rgba(47,107,255,.16);}
body.d5-movies{--d5-accent:#ff5c8a;--d5-accent2:#ff8fb0;--d5-soft:rgba(255,92,138,.16);}
body.d5-lyric {--d5-accent:#a855f7;--d5-accent2:#c58bff;--d5-soft:rgba(168,85,247,.17);}
body.d5-cfb   {--d5-accent:#22c55e;--d5-accent2:#5ee49a;--d5-soft:rgba(34,197,94,.16);}

/* Soft accent glow behind the play area */
body[class*="d5-"] .quiz-container{position:relative;}
body[class*="d5-"] .quiz-container::before{
  content:"";position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:min(680px,120%);height:320px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 60% at 50% 0,var(--d5-soft),transparent 70%);
}

/* ---- Card ---- */
body[class*="d5-"] .quiz-card{
  position:relative;z-index:1;
  background:var(--d5-card) !important;
  border:1px solid var(--d5-edge) !important;
  border-radius:18px !important;
  overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9) !important;
}
/* animated accent sweep along the top edge */
body[class*="d5-"] .quiz-card::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--d5-accent),var(--d5-accent2),transparent);
  background-size:200% 100%;animation:d5sweep 4s linear infinite;
}
@keyframes d5sweep{to{background-position:-200% 0;}}

/* ---- Progress ring: paint the active arc in the game's accent ---- */
body[class*="d5-"] #ringFill,
body[class*="d5-"] .ring-fg{stroke:var(--d5-accent) !important;}

/* ---- Pills (subject + difficulty). Works for the finishlyric badge
   elements and for the inline subject/difficulty spans the other loaders emit. ---- */
body[class*="d5-"] #tagCat{
  background:var(--d5-soft) !important;color:var(--d5-accent2) !important;border:none !important;
}
body[class*="d5-"] #tagEra{
  background:rgba(255,255,255,.06) !important;color:var(--d5-muted) !important;border:none !important;
}

/* ---- Question text ---- */
body[class*="d5-"] #question,
body[class*="d5-"] .quiz-question{
  color:var(--d5-ink) !important;
}

/* ---- Answers: unified for BOTH markups
        older games: #answers li > button    finishlyric: #answers li ---- */
body[class*="d5-"] #answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
body[class*="d5-"] #answers li{margin:0;opacity:0;transform:translateY(8px);animation:d5rise .38s ease forwards;}
body[class*="d5-"] #answers li:nth-child(1){animation-delay:.04s;}
body[class*="d5-"] #answers li:nth-child(2){animation-delay:.10s;}
body[class*="d5-"] #answers li:nth-child(3){animation-delay:.16s;}
body[class*="d5-"] #answers li:nth-child(4){animation-delay:.22s;}
@keyframes d5rise{to{opacity:1;transform:none;}}

/* The clickable element differs per game; style both identically. */
body[class*="d5-"] #answers li > button,
body[class*="d5-"] #answers li.d5-choice,
body[class*="d5-"] #answers li[data-choice]{
  width:100%;text-align:left;font:inherit;font-size:1.02rem;font-weight:600;cursor:pointer;
  color:var(--d5-ink) !important;background:var(--d5-tile) !important;
  border:1.5px solid var(--d5-edge) !important;border-radius:14px !important;
  padding:15px 16px 15px 18px !important;position:relative;display:block;
  transition:transform .12s ease,border-color .18s ease,background .18s ease;
}
/* left accent bar grows on hover */
body[class*="d5-"] #answers li > button::before,
body[class*="d5-"] #answers li[data-choice]::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:0;border-radius:0 4px 4px 0;background:var(--d5-accent);transition:height .18s ease;
}
body[class*="d5-"] #answers li > button:hover:not(:disabled),
body[class*="d5-"] #answers li[data-choice]:hover{
  transform:translateY(-2px);border-color:var(--d5-accent) !important;background:#212b3a !important;
}
body[class*="d5-"] #answers li > button:hover:not(:disabled)::before,
body[class*="d5-"] #answers li[data-choice]:hover::before{height:60%;}
body[class*="d5-"] #answers li > button:focus-visible,
body[class*="d5-"] #answers li[data-choice]:focus-visible{outline:2px solid var(--d5-accent2);outline-offset:2px;}

/* ---- Correct / wrong feedback (class-driven, both markups) ---- */
/* Solid, unmistakable green/red — a subtle tint over the dark tile was too
   close to the base color and just read as "went dark" on phones. */
body[class*="d5-"] #answers li.correct,
body[class*="d5-"] #answers li > button.correct{
  background:#1f9d57 !important;border-color:#3ddc84 !important;
  color:#fff !important;font-weight:700 !important;animation:d5pop .32s ease;opacity:1 !important;transform:none !important;
}
body[class*="d5-"] #answers li.wrong,
body[class*="d5-"] #answers li > button.wrong{
  background:#d23b42 !important;border-color:#ff8286 !important;
  color:#fff !important;font-weight:700 !important;animation:d5shake .4s ease;opacity:1 !important;transform:none !important;
}
@keyframes d5pop{0%{transform:scale(1);}40%{transform:scale(1.03);}100%{transform:scale(1);}}
@keyframes d5shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}

@media (prefers-reduced-motion: reduce){
  body[class*="d5-"] .quiz-card::after{animation:none;}
  body[class*="d5-"] #answers li{opacity:1;transform:none;animation:none;}
  body[class*="d5-"] #answers li.correct,
  body[class*="d5-"] #answers li > button.correct,
  body[class*="d5-"] #answers li.wrong,
  body[class*="d5-"] #answers li > button.wrong{animation:none;}
}