/* Deck player + review session — light theme on the HEB design system (heb.css loads first).
   Shared by StepStash and BoardStash. Everything here is scoped to .player (the host around
   #progress/#stage) except the header chips and the image lightbox. */

/* ---------- header chips (speed / hands-free / cards left) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: .42rem .75rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); font: 600 .78rem/1 var(--sans); color: var(--ink-soft);
}
.chip svg { width: 15px; height: 15px; display: block; }
.chip.speed { min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
button.chip:hover, a.chip:hover { border-color: var(--bar); color: var(--ink); }
.chip.hands.on { color: #fff; background: var(--teal); border-color: var(--teal); }
.chip.note { color: var(--accent); border-color: var(--accent-soft); }
.chip.note:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- progress ---------- */
.player .progress { display: flex; gap: 4px; margin: 1rem 0 1.25rem; }
.player .progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.player .progress i.done { background: var(--accent); }
.player .progress i.now { background: linear-gradient(90deg, var(--accent) 55%, var(--accent-soft)); }

/* ---------- card ---------- */
.player .stage { animation: rise .3s cubic-bezier(.22, .9, .3, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.player .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.7rem 1.75rem 1.4rem;
  min-height: 320px; display: flex; flex-direction: column; box-shadow: 0 18px 44px -32px rgba(13, 31, 77, .55);
}
.player .card .sec { font: 700 .68rem/1.3 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); margin-bottom: .85rem; }
.player .card h2 { margin: 0 0 .8rem; font: 700 1.55rem/1.25 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.player .card .body { font: 1.12rem/1.65 var(--serif); color: var(--ink); margin: 0; }
.player .card .detail {
  margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 0 .6rem .6rem 0; background: #fff8e6; border-left: 3px solid var(--highlight-line);
  font: 1rem/1.6 var(--serif); color: var(--ink); animation: rise .25s ease;
}
.player .detail-toggle {
  margin-top: 1rem; align-self: flex-start; font: 600 .8rem var(--sans); color: var(--highlight-line);
  border-bottom: 1px dashed currentColor; padding-bottom: 2px;
}
.player .detail-toggle:hover { color: #92400e; }
.player .card-foot { margin-top: auto; padding-top: 1.25rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.player .icon-btn {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); transition: all .15s ease;
}
.player .icon-btn:hover { color: var(--accent); border-color: var(--accent-soft); }
.player .icon-btn.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.player .icon-btn svg { width: 16px; height: 16px; }

/* ---------- action bar under the card ---------- */
.player .nav { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }
.player .btn {
  flex: 1; padding: .95rem 1.2rem; border-radius: 10px; font: 600 .95rem/1 var(--sans);
  background: var(--bar); color: #fff; transition: background .15s ease, transform .1s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1.5px solid var(--bar);
}
.player .btn:hover { background: var(--bar-active); border-color: var(--bar-active); }
.player .btn:active { transform: scale(.985); }
.player .btn.pri { background: var(--accent); border-color: var(--accent); }
.player .btn.pri:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.player .btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink-soft); flex: none; width: 54px; }
.player .btn.ghost:hover { color: var(--ink); border-color: var(--bar); }
.player .btn.ghost.wide, .player .btn.ghost.grow { width: auto; }
.player .btn.ghost.wide { display: flex; width: 100%; margin-top: 1rem; color: var(--accent); border-color: var(--accent-soft); }
.player .btn.ghost.wide:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.player .btn.ghost.grow { flex: 1; }
.player .btn:disabled { opacity: .35; pointer-events: none; }
.player .btn svg { width: 20px; height: 20px; display: block; }
.player .btn.ghost svg { margin: 0 auto; }
.player .hint { text-align: center; font: .74rem var(--sans); color: var(--ink-faint); margin-top: .85rem; }

/* ---------- intro / done ---------- */
.player .card.intro > .sec, .player .card.intro > h2 { display: none; }   /* the deck header above already shows them */
.player .intro-hook { font: 600 1.3rem/1.45 var(--serif); color: var(--bar); margin: 0 0 1rem; }
.player .intro-why { font: 1.02rem/1.65 var(--serif); color: var(--ink-soft); margin: 0 0 1.3rem; }
.player .obj { list-style: none; padding: 0; margin: 0; }
.player .obj li { position: relative; padding-left: 1.6rem; margin-bottom: .65rem; font: 1rem/1.55 var(--serif); color: var(--ink); }
.player .obj li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- questions ---------- */
.player .q { font: 700 1.2rem/1.45 var(--serif); color: var(--ink); margin: 0 0 1.2rem; }
.player .opt {
  display: block; width: 100%; text-align: left; padding: .85rem 1rem; margin-bottom: .55rem; border-radius: 10px;
  background: var(--surface); border: 1.5px solid var(--line-strong); font: .97rem/1.5 var(--sans); color: var(--ink); transition: all .14s ease;
}
.player .opt:hover:not(:disabled) { border-color: var(--bar); background: var(--bg); }
.player .opt.correct { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.player .opt.wrong { background: #fff1f2; border-color: #fb7185; color: #9f1239; }
.player .opt:disabled { cursor: default; }
.player .explain {
  margin-top: .85rem; padding: .85rem 1rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
  font: .97rem/1.6 var(--serif); color: var(--ink-soft); animation: rise .25s ease;
}
.player .explain b { color: var(--ink); }
.player .check { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--line-strong); }
.player .check-label { font: 700 .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: .6rem; }
.player .check-q { font: 700 1.04rem/1.45 var(--serif); margin: 0 0 .85rem; color: var(--ink); }
.player .check-opts .opt { padding: .72rem .9rem; font-size: .93rem; }

.player .score { text-align: center; padding: .4rem 0 .2rem; }
.player .score .n { font: 700 3.4rem/1 var(--serif); color: var(--bar); letter-spacing: -.02em; }
.player .score .l { font: 600 .74rem var(--sans); color: var(--ink-faint); margin-top: .6rem; text-transform: uppercase; letter-spacing: .1em; }
.player .take { list-style: none; padding: 0; margin: 0; }
.player .take li {
  display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; margin-bottom: .55rem; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line); font: 1rem/1.55 var(--serif);
}
.player .take li span { flex: 1; }
.player .review-cta { margin-top: 1.25rem; padding: 1.1rem; border-radius: 12px; background: var(--accent-tint); border: 1px solid var(--accent-soft); text-align: center; }
.player .review-cta > div { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .35rem; font-family: var(--sans); }
.player .review-cta svg { width: 18px; height: 18px; color: var(--accent); }
.player .review-cta b { font-size: .95rem; color: var(--ink); }
.player .review-cta span { display: block; font: .84rem/1.5 var(--sans); color: var(--ink-soft); margin-bottom: .85rem; }
.player .review-cta .btn { display: inline-flex; width: auto; padding: .75rem 1.5rem; }
.player .allright { text-align: center; color: var(--ink-soft); font: italic 1rem var(--serif); margin: 1.25rem 0 .25rem; }
.player .empty { padding: 3rem 1rem; text-align: center; color: var(--ink-faint); font: italic 1rem var(--serif); border: 1px dashed var(--line-strong); border-radius: 12px; }
.player .empty a { color: var(--accent); font-style: normal; font-weight: 600; font-family: var(--sans); }

/* ---------- visuals ---------- */
.player .viz { margin: 1.25rem 0 .25rem; }
.player .viz-cap { font: 600 .74rem var(--sans); color: var(--ink-faint); text-align: center; margin-top: .75rem; letter-spacing: .02em; }
.player .flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.player .flow-node {
  flex: 1; min-width: 92px; padding: .8rem .7rem; border-radius: 10px; text-align: center; background: var(--bg); border: 1px solid var(--line);
  opacity: 0; transform: translateY(10px) scale(.96); animation: pop .45s cubic-bezier(.2, .9, .3, 1.1) forwards; font-family: var(--sans);
}
.player .flow-node b { display: block; font-size: .86rem; line-height: 1.3; color: var(--ink); }
.player .flow-node i { display: block; font-style: normal; font-size: .72rem; color: var(--ink-faint); margin-top: .3rem; line-height: 1.35; }
.player .flow-node:last-child { border-color: var(--accent-soft); background: var(--accent-tint); }
.player .flow-arrow { align-self: center; color: var(--accent); font-size: 17px; opacity: 0; animation: fade .4s ease forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: .85; } }
.player .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.player .cmp-row + .cmp-row { margin-top: 8px; }
.player .cmp-col { padding: .8rem .9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-family: var(--sans); }
.player .cmp-col:last-child { border-color: var(--accent-soft); background: var(--accent-tint); }
.player .cmp-col h4 { margin: 0 0 .2rem; font: 700 .9rem/1.3 var(--sans); color: var(--ink); }
.player .cmp-col p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); }
.player .cmp-row { opacity: 0; animation: pop .45s cubic-bezier(.2, .9, .3, 1.1) forwards; }
.player .tl { position: relative; padding-left: 22px; font-family: var(--sans); }
.player .tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), var(--accent-soft)); }
.player .tl-item { position: relative; padding-bottom: .9rem; opacity: 0; animation: slide .45s cubic-bezier(.2, .9, .3, 1) forwards; }
.player .tl-item::before { content: ""; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.player .tl-item b { display: block; font-size: .9rem; color: var(--ink); }
.player .tl-item i { font-style: normal; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
@keyframes slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.player .stat { text-align: center; padding: 1.1rem .7rem; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.player .stat .n { font: 700 2.9rem/1 var(--serif); color: var(--bar); animation: pop .5s cubic-bezier(.2, .9, .3, 1.1) both; }
.player .stat .l { margin-top: .6rem; font: 600 .86rem/1.45 var(--sans); color: var(--ink-soft); animation: pop .5s .12s cubic-bezier(.2, .9, .3, 1.1) both; }

/* ---------- image slides + lightbox ---------- */
.player .slide-card { padding: 1rem; }
.player .slide-wrap { display: block; width: 100%; padding: 0; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); cursor: zoom-in; }
.player .slide-img { display: block; width: 100%; height: auto; }
.player .slide-cap { text-align: center; font: 600 .84rem var(--sans); color: var(--ink-soft); margin-top: .75rem; }
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(8, 18, 55, .9); padding: 16px; cursor: zoom-out; animation: rise .2s ease; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 10px; box-shadow: 0 30px 80px -20px #000; }
.lb-close { position: fixed; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 17px; border: 1px solid rgba(255, 255, 255, .25); }

/* ---------- narration controls ---------- */
.player .spk:hover { color: var(--teal); border-color: #99d5cc; }
.player .spk.playing { color: #fff; background: var(--teal); border-color: var(--teal); }
.player .spk.loading { color: #b45309; border-color: #f5c98b; background: #fff7ed; }
.player .spk.loading svg { display: none; }
.player .spk.loading::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #f5c98b; border-top-color: #b45309; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
select.voice { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: 999px; padding: .4rem .7rem; font: 600 .78rem var(--sans); }

/* ---------- review session ---------- */
.player #controls { display: flex; margin-top: 1rem; }
.player #controls > .grades { flex: 1; }
.player .review-card { min-height: 280px; }
.player .review-front { font: 700 1.25rem/1.45 var(--serif); color: var(--ink); margin: .25rem 0 .2rem; }
.player .ropts { list-style: none; padding: 0; margin: .9rem 0 0; }
.player .ropts li { padding: .65rem .85rem; margin-bottom: .45rem; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); font: .93rem/1.45 var(--sans); color: var(--ink-soft); }
.player .review-back { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); animation: rise .25s ease; }
.player .review-answer { font: 1.05rem/1.6 var(--serif); color: var(--ink); white-space: pre-line; }
.player .grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.player .grade {
  padding: .75rem .3rem; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface);
  display: flex; flex-direction: column; gap: .2rem; align-items: center; transition: all .14s ease; font-family: var(--sans);
}
.player .grade:hover { transform: translateY(-1px); border-color: var(--bar); }
.player .grade b { font-size: .9rem; font-weight: 700; }
.player .grade i { font-style: normal; font-size: .72rem; color: var(--ink-faint); }
.player .grade.g-again b { color: var(--accent); } .player .grade.g-again { border-color: var(--accent-soft); }
.player .grade.g-hard b { color: #b45309; }
.player .grade.g-good b { color: #1d4ed8; }
.player .grade.g-easy b { color: var(--teal); } .player .grade.g-easy { border-color: #99d5cc; }
.player .rv-msg { text-align: center; color: var(--ink-soft); font: 1rem/1.6 var(--serif); margin: 1.25rem 0 .25rem; }
.player .rv-msg span { color: var(--ink-faint); font-size: .92rem; }
.player .rv-total { text-align: center; color: var(--ink-faint); font: .8rem var(--sans); margin-top: .85rem; }
.player .rv-seen { font: 600 .74rem var(--sans); color: var(--ink-faint); }

@media (max-width: 640px) {
  .player .card { padding: 1.25rem 1.1rem 1.1rem; border-radius: 14px; min-height: 280px; }
  .player .card h2 { font-size: 1.32rem; }
  .player .card .body { font-size: 1.05rem; }
  .player .score .n { font-size: 2.8rem; }
  .player .grades { gap: .35rem; }
}