/* Interview quiz styling, shared by every track page (Java, Spring Boot,
 * Microservices, Kafka). Extracted from interview.html so a change to the
 * quiz UI is made once rather than in four copies. */
    .iv-wrap { max-width: 60rem; margin: 0 auto; }

    /* ---------- level cards ---------- */
    .lvl-card { cursor: pointer; border-radius: 1rem; border: 2px solid var(--phoenix-border-color, #e3e6ed);
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
    .lvl-card:hover { transform: translateY(-4px); box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.12); }
    .lvl-card.active { border-color: #2b6cff; box-shadow: 0 0 0 .2rem rgba(43,108,255,.15); }
    .lvl-ico { width: 3.2rem; height: 3.2rem; border-radius: .9rem; display: inline-flex;
      align-items: center; justify-content: center; font-size: 1.5rem; }
    .len-btn.active { background: #2b6cff; border-color: #2b6cff; color: #fff; }

    /* ---------- options ---------- */
    .opt {
      display: flex; align-items: flex-start; gap: .7rem; width: 100%; text-align: left;
      padding: .8rem 1rem; margin-bottom: .6rem; border-radius: .7rem; cursor: pointer;
      border: 2px solid var(--phoenix-border-color, #e3e6ed);
      background: var(--phoenix-body-bg, #fff); position: relative; overflow: hidden;
      transition: border-color .15s ease, background .15s ease, transform .1s ease;
    }
    .opt:hover:not(.locked):not(.struck) { border-color: #2b6cff; transform: translateX(3px); }
    .opt .key { flex: 0 0 1.8rem; height: 1.8rem; border-radius: .45rem; font-weight: 800; font-size: .82rem;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--phoenix-body-highlight, #f1f3f8); color: var(--phoenix-body-tertiary-color, #6b7280); }
    .opt.picked { border-color: #2b6cff; background: var(--phoenix-primary-bg-subtle, #e9f0ff); }
    .opt.right { border-color: #16a34a; background: rgba(22,163,74,.10); }
    .opt.wrong { border-color: #dc2626; background: rgba(220,38,38,.10); }
    .opt.locked { cursor: default; }
    .opt .mark { margin-left: auto; font-size: 1.05rem; }

    /* Lifeline strike: a line drawn from the RIGHT edge to the LEFT. */
    .opt.struck { opacity: .55; cursor: not-allowed; }
    .opt.struck .txt { position: relative; }
    .opt.struck .txt::after {
      content: ""; position: absolute; top: 50%; right: 0; height: 2px; width: 100%;
      background: #dc2626; transform-origin: right center; transform: scaleX(0);
      animation: strikeRtl .45s ease forwards;
    }
    @keyframes strikeRtl { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* ---------- answer reactions ----------
       The mascot is 200px in a ~960px card and sits off to the right, so a reaction confined
       to it plays in peripheral vision while the eye is still on the row that was clicked.
       These put the feedback on the row itself; the mascot then reinforces it. */
    .opt.celebrate { animation: optPop .55s cubic-bezier(.2,1.5,.4,1) 1; z-index: 2; }
    .opt.celebrate::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: linear-gradient(100deg, transparent, rgba(22,163,74,.35), transparent);
      transform: translateX(-100%); animation: optSweep .7s ease-out 1;
    }
    @keyframes optPop {
      0% { transform: scale(1); }
      45% { transform: scale(1.035); box-shadow: 0 .5rem 1.4rem rgba(22,163,74,.3); }
      100% { transform: scale(1); }
    }
    @keyframes optSweep { to { transform: translateX(100%); } }

    /* Wrong: a short settle, not a punishing shake. Two small nudges and it is done. */
    .opt.deflate { animation: optDeflate .45s ease-out 1; }
    @keyframes optDeflate {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      55% { transform: translateX(4px); }
      80% { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }
    /* The correct row breathes so the eye lands on the thing worth learning. */
    .opt.reveal { animation: optReveal 1.5s ease-in-out 2; }
    @keyframes optReveal {
      0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
      50% { box-shadow: 0 0 0 .32rem rgba(22,163,74,.22); }
    }

    /* ---------- result page ---------- */
    .r-score-big { font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; letter-spacing: -.04em;
      font-variant-numeric: tabular-nums; }
    .r-score-big.band-hi  { background: linear-gradient(100deg, #16a34a, #4ade80);
      -webkit-background-clip: text; background-clip: text; color: transparent; }
    .r-score-big.band-mid { background: linear-gradient(100deg, #2b6cff, #7c3aed);
      -webkit-background-clip: text; background-clip: text; color: transparent; }
    .r-score-big.band-lo  { background: linear-gradient(100deg, #b45309, #f59e0b);
      -webkit-background-clip: text; background-clip: text; color: transparent; }
    /* The result card arrives rather than appearing, which gives the number time to land. */
    .r-enter { animation: rEnter .55s cubic-bezier(.2,.9,.3,1) both; }
    @keyframes rEnter { from { opacity: 0; transform: translateY(14px) scale(.985); }
                        to   { opacity: 1; transform: none; } }

    @media (prefers-reduced-motion: reduce) {
      .opt.celebrate, .opt.deflate, .opt.reveal, .r-enter { animation: none !important; }
      .opt.celebrate::before { display: none; }
    }

    /* ---------- lifeline intro ----------
       The 50:50 button sits in a busy header and players were missing it entirely. At the start of
       a round a coach-mark points at it for a few seconds, and the button itself pulses, so the
       lifeline is noticed once without needing a dialog that has to be dismissed. */
    .lifeline-wrap { position: relative; }
    #btn-lifeline.ll-attract {
      animation: llPulse 1.15s ease-in-out 3;
      box-shadow: 0 0 0 0 rgba(245, 158, 11, .65);
    }
    @keyframes llPulse {
      0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245,158,11,.65); }
      55%  { transform: scale(1.09); box-shadow: 0 0 0 .55rem rgba(245,158,11,0); }
      100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    }
    .ll-coach {
      position: absolute; top: calc(100% + .6rem); right: 0; z-index: 20;
      background: #0f172a; color: #fff; border-radius: .6rem; padding: .55rem .8rem;
      font-size: .8rem; line-height: 1.35; width: max-content; max-width: min(19rem, 78vw);
      box-shadow: 0 .6rem 1.4rem rgba(15,23,42,.3);
      opacity: 0; transform: translateY(-6px);
      animation: llIn .32s ease forwards, llOut .4s ease 6s forwards;
      pointer-events: none;
    }
    .ll-coach::before {
      content: ""; position: absolute; bottom: 100%; right: 1.4rem;
      border: .42rem solid transparent; border-bottom-color: #0f172a;
    }
    .ll-coach b { color: #fbbf24; }
    @keyframes llIn  { to { opacity: 1; transform: translateY(0); } }
    @keyframes llOut { to { opacity: 0; transform: translateY(-6px); visibility: hidden; } }

    /* Someone who prefers less motion still gets the coach-mark, just without the movement. */
    @media (prefers-reduced-motion: reduce) {
      #btn-lifeline.ll-attract { animation: none; }
      .ll-coach { animation: llIn .01s ease forwards, llOut .01s ease 6s forwards; }
      /* The lifeline strike must still end up struck through, just without the sweep. */
      .opt.struck .txt::after { animation: none; transform: scaleX(1); }
    }

    /* The mascot ("Kavi") lives in js/interview-mascot.js and injects its own CSS. */

    /* ---------- misc ---------- */
    .q-text { font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
    .streak-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block;
      background: var(--phoenix-border-color, #d8dee9); }
    .streak-dot.ok { background: #16a34a; } .streak-dot.no { background: #dc2626; }
    .rev-item { border-left: 4px solid var(--phoenix-border-color, #e3e6ed); }
    .rev-item.ok { border-left-color: #16a34a; } .rev-item.no { border-left-color: #dc2626; }
    .iv-ad { max-width: 970px; margin: 1rem auto 0; text-align: center; }
    .iv-ad .lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
      color: var(--phoenix-body-tertiary-color, #8a94a6); margin-bottom: .2rem; }