/* ============================================================
   Player — player.css
   Version: 1.7 | 2026-06-21

   Sections:
     1.  Design Tokens
     2.  Reset & Base
     3.  Router States
     4.  Shared Keyframes
     5.  CTF Flag
     6.  Player Card — Stage Spotlight + Side-by-Side
     7.  VID Curio
     8.  Tab Console
     9.  Curio — OTL
     10. Curio — SUM
     11. Curio — OBJ
     12. Curio — TRM
     13. Curio — QUZ
     14. Responsive
   ============================================================ */


/* ── 1. Design Tokens ──────────────────────────────────────── */

:root {
  --bg-darkest:  #001525;
  --bg-dark:     #052035;
  --bg-mid:      #0a2d45;
  --bg-raised:   #0e3554;

  --border-subtle: rgba(99,214,214,0.12);
  --border-mid:    rgba(99,214,214,0.25);
  --border-strong: rgba(99,214,214,0.45);

  --color-green:  #CCE50C;
  --color-teal:   #63d6d6;
  --color-orange: #ff4433;

  --text-primary:   #e8f0f4;
  --text-secondary: #b8cdd8;
  --text-muted:     #7a9bb5;

  --font-display: 'Ramabhadra', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  --radius-card: 14px;
  --radius-inner: 10px;
}


/* ── 2. Reset & Base ───────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  /* min-height: 100vh on body below means the page sits exactly at the
     viewport boundary whenever widget/activity content is shorter than
     the window — a borderline case where some browsers spuriously show a
     vertical scrollbar with literally nothing to scroll to (confirmed:
     scrollHeight === clientHeight in this state, zero real overflow).
     overflow-y: auto on html (not body — body needs to grow freely so
     genuinely tall content still produces a normal page scrollbar) only
     ever shows a scrollbar when there's real overflow, removing the
     spurious case without changing real-scroll behavior. */
  overflow-y: auto;
}
body {
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
#player-root { flex: 1; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }


/* ── 3. Router States ──────────────────────────────────────── */

.plyr-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 60vh;
  gap: 16px; text-align: center; padding: 32px 24px;
}
.plyr-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border-mid);
  border-top-color: var(--color-teal);
  border-radius: 50%;
  animation: plyrSpin 0.7s linear infinite;
}
.plyr-state-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.08em; }
.plyr-error-icon  { font-size: 40px; opacity: 0.25; }
.plyr-error-msg   { font-size: 14px; color: var(--text-muted); max-width: 380px; line-height: 1.6; }
.plyr-error-code  { font-family: var(--font-mono); font-size: 11px; color: var(--color-orange); opacity: 0.7; margin-top: 8px; }


/* ── 4. Shared Keyframes ───────────────────────────────────── */

@keyframes plyrSpin      { to { transform: rotate(360deg); } }
@keyframes plyrFadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes plyrFadeInUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plyrSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plyrPop       { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes plyrPulse     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25) rotate(20deg); } }


/* ── 5. CTF Flag ───────────────────────────────────────────── */

@keyframes ctfSwipeIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes ctfFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ctfCodeSpring {
  0%   { transform: scale(0);    opacity: 0; }
  55%  { transform: scale(1.14); opacity: 1; }
  72%  { transform: scale(0.96); }
  86%  { transform: scale(1.05); }
  100% { transform: scale(1);    opacity: 1; }
}
.ctf-wrap { padding: 24px 20px; }
.ctf-box {
  border: 5px solid #63d6d6; background: #001525;
  border-radius: var(--radius-card); padding: 28px 24px; text-align: center;
  overflow: hidden; max-width: 480px; margin: 0 auto;
  animation: ctfSwipeIn 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
.ctf-header {
  font-family: 'Ramabhadra', sans-serif; font-size: 28px; color: #CCE50C;
  margin-bottom: 6px; opacity: 0; animation: ctfFadeUp 0.4s ease 0.3s forwards;
}
.ctf-id {
  font-family: 'Share Tech Mono', monospace; font-size: 13px; color: #7a9bb5;
  margin-bottom: 12px; opacity: 0; animation: ctfFadeUp 0.4s ease 0.45s forwards;
}
.ctf-code {
  display: inline-block; font-family: 'Share Tech Mono', monospace;
  font-size: 22px; font-weight: 700; color: #fff;
  border: 3px solid #CCE50C; border-radius: 8px;
  padding: 12px 32px; letter-spacing: 3px; background: #000;
  opacity: 0; animation: ctfCodeSpring 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.6s forwards;
}
.ctf-note {
  font-family: 'Inter', sans-serif; font-size: 13px; color: #7a9bb5;
  margin-top: 14px; line-height: 1.6; opacity: 0;
  animation: ctfFadeUp 0.4s ease 0.9s forwards;
}


/* ── 6. Player Card — Stage Spotlight + Side-by-Side ──────── */

.plyr-player-card {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1.5px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: plyr-card;
}

/* Green header bar */
.plyr-player-header {
  background: var(--color-green);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.plyr-player-brand {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--bg-darkest);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.plyr-player-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.plyr-hdr-badge {
  background: rgba(0,21,37,0.15);
  border: 1px solid rgba(0,21,37,0.25);
  border-radius: 20px;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bg-darkest);
  white-space: nowrap;
}
.plyr-hdr-badge strong { font-weight: 700; color: var(--bg-darkest); }

/* ── Stage row — video + panel ──────────────────────────── */

.plyr-stage-row {
  display: flex;
  flex-direction: column;
  background: var(--bg-mid);
}

.plyr-stage-video {
  width: 100%;
  background: #000;
  line-height: 0;
  flex-shrink: 0;
}

.plyr-stage-panel {
  position: relative;
  background: var(--bg-mid);
  border-top: 3px solid var(--color-teal);
}

.plyr-stage-row.no-panel .plyr-stage-video { border-bottom: none; }

/* Persistent collapse/restore handle — sits between video and panel as
   its own element, never nested inside the panel it controls, so it can
   never be hidden along with it. Narrow (stacked) layout hides it
   entirely — collapse only applies in side-by-side mode.

   Full-height strip with real background contrast (--bg-raised, lighter
   than the surrounding --bg-mid) and a solid teal border on both sides —
   an earlier version tried a thin strip + floating pill, but against
   actual content (dark page, busy video thumbnail) the pill read as
   nearly invisible. This version is deliberately more present: wider,
   solid-colored, full height, so it reads as a real control at a glance
   rather than something you have to go looking for. */
.plyr-panel-handle {
  display: none;
}

/* QUZ section */
.plyr-quz-zone {
  background: var(--bg-darkest);
  border-top: 1px solid var(--border-subtle);
  padding: 16px 20px 20px;
}

/* ── Container query — side-by-side at wide widths ───────── */
@container plyr-card (min-width: 720px) {

  .plyr-stage-row {
    flex-direction: row;
    align-items: stretch;
  }

  .plyr-stage-video {
    flex: 1 1 68%;
    min-width: 0;
    transition: flex-basis 0.2s ease;
  }

  .plyr-stage-panel {
    width: 32%;
    border-top: none;
    border-left: none;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, opacity 0.2s ease;
  }

  .plyr-console {
    flex: 1;
    overflow-y: auto;
    max-height: 100%;
  }

  /* The strip — full height, diagonal hash texture (not a flat solid
     fill) so it reads as a distinct, grabbable control rather than a
     plain colored rectangle. Real borders on both sides. flex: 0 0 Npx
     (not width + flex-shrink) so it can't get squeezed or rounded away
     by flex math while the panel transitions. */
  .plyr-panel-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    min-width: 26px;
    background-color: var(--bg-raised);
    background-image: repeating-linear-gradient(
      135deg,
      var(--bg-raised) 0px,
      var(--bg-raised) 4px,
      var(--bg-mid) 4px,
      var(--bg-mid) 8px
    );
    border: none;
    border-left: 1px solid var(--border-mid);
    border-right: 1px solid var(--border-mid);
    color: var(--color-teal);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .plyr-panel-handle:hover {
    background-image: repeating-linear-gradient(
      135deg,
      var(--bg-mid) 0px,
      var(--bg-mid) 4px,
      var(--bg-raised) 4px,
      var(--bg-raised) 8px
    );
    border-left-color: var(--color-teal);
    border-right-color: var(--color-teal);
  }

  /* Icon sits in a solid circle backdrop so it stays sharp against the
     hash texture instead of getting visually lost in the stripes. */
  .plyr-panel-handle-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  /* Collapsed state — panel hides, video naturally fills the freed
     space via flex (no hardcoded calc() against the strip's width).
     Strip flips to green to confirm the state actually changed, not
     just the arrow direction. */
  .plyr-stage-row.panel-collapsed .plyr-stage-video { flex-basis: 100%; }
  .plyr-stage-row.panel-collapsed .plyr-stage-panel  { width: 0; opacity: 0; overflow: hidden; border-left: none; }
  .plyr-stage-row.panel-collapsed .plyr-panel-handle {
    border-left-color: var(--color-green);
    border-right-color: var(--color-green);
    color: var(--color-green);
  }
}

/* Collapse state is toggled directly via class in JS */


/* ── 7. VID Curio ──────────────────────────────────────────── */

.plyr-vid-wrap { width: 100%; line-height: 0; }

.plyr-vid-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

.plyr-vid-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* ── 8. Tab Console ────────────────────────────────────────── */

.plyr-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-dark);
  padding: 0 16px;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.plyr-tab-bar::-webkit-scrollbar { display: none; }

.plyr-tab-btn {
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.plyr-tab-btn:hover  { color: var(--text-secondary); }
.plyr-tab-btn.active { color: var(--color-teal); border-bottom-color: var(--color-teal); }

.plyr-tab-panel {
  display: none;
  padding: 20px;
  animation: plyrFadeIn 0.2s ease forwards;
}
.plyr-tab-panel.active { display: block; }


/* ── 9. Curio — OTL ───────────────────────────────────────── */

.plyr-otl-toolbar {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.plyr-otl-ctrl-btn {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
}
.plyr-otl-ctrl-btn:hover { color: var(--color-teal); border-color: var(--color-teal); }

.plyr-otl-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.plyr-otl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
  transition: background 0.12s, color 0.12s;
}
.plyr-otl-row:hover     { background: var(--bg-raised); color: var(--text-primary); }
.plyr-otl-row.is-parent { cursor: pointer; font-weight: 500; color: var(--text-primary); }
.plyr-otl-row.is-leaf   { cursor: default; color: var(--text-muted); }

.plyr-otl-icon {
  font-size: 8px;
  color: var(--color-teal);
  width: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plyr-otl-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--border-mid);
}

.plyr-otl-label { flex: 1; }

.plyr-otl-children {
  margin-left: 24px;
  padding-left: 14px;
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 1px;
}
.plyr-otl-children[hidden] { display: none; }
.plyr-otl-children:not([hidden]) { animation: plyrSlideDown 0.18s ease forwards; }

.plyr-otl-children .plyr-otl-row {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 10px;
  font-weight: 400;
}
.plyr-otl-children .plyr-otl-row.is-parent { color: var(--text-secondary); font-weight: 500; }
.plyr-otl-children .plyr-otl-children .plyr-otl-row { font-size: 12px; }


/* ── 10. Curio — SUM ──────────────────────────────────────── */

.plyr-sum-wrap { display: flex; flex-direction: column; gap: 14px; }

.plyr-sum-para {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}


/* ── 11. Curio — OBJ ──────────────────────────────────────── */

.plyr-obj-list { display: flex; flex-direction: column; gap: 16px; }

.plyr-obj-item {
  opacity: 0;
  animation: plyrFadeInUp 0.3s ease forwards;
}

.plyr-obj-row { display: flex; align-items: flex-start; gap: 12px; }

.plyr-obj-bullet {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-green);
  margin-top: 7px;
}

.plyr-obj-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; flex: 1; }

.plyr-obj-bubbles {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; padding-left: 18px;
}

.plyr-obj-bubble {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: 20px; padding: 3px 10px;
  font-family: var(--font-mono); font-size: 10px;
  white-space: nowrap;
}
.plyr-obj-bubble-name { color: var(--text-secondary); }
.plyr-obj-bubble-sep  { color: var(--border-mid); }
.plyr-obj-bubble-ref  { color: var(--color-green); font-weight: 700; }


/* ── 12. Curio — TRM ──────────────────────────────────────── */

.plyr-trm-toolbar { display: flex; gap: 6px; margin-bottom: 16px; }

.plyr-trm-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  background: transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.plyr-trm-view-btn:hover  { color: var(--text-secondary); border-color: var(--border-mid); }
.plyr-trm-view-btn.active { color: var(--color-teal); border-color: var(--color-teal); background: rgba(99,214,214,0.08); }

/* List view */
.plyr-trm-list { display: flex; flex-direction: column; }

.plyr-trm-list-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}
.plyr-trm-list-row:last-child { border-bottom: none; }

.plyr-trm-list-term {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  text-align: right;
}

.plyr-trm-term-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.2;
}

.plyr-trm-acronym {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--color-green);
  background: rgba(204,229,12,0.1);
  border: 1px solid rgba(204,229,12,0.25);
  border-radius: 4px; padding: 1px 6px;
  letter-spacing: 0.04em; flex-shrink: 0;
}

.plyr-trm-list-def {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  border-left: 2px solid var(--border-subtle);
  padding-left: 14px;
}

/* Flashcard view */
.plyr-trm-flashcard { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.plyr-trm-fc-card {
  width: 100%; min-height: 140px;
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-inner);
  padding: 32px 24px; cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.plyr-trm-fc-card:hover    { border-color: var(--color-teal); }
.plyr-trm-fc-card.is-flipped { border-color: var(--color-green); }

.plyr-trm-fc-term { font-family: var(--font-display); font-size: 22px; color: var(--text-primary); }
.plyr-trm-fc-def  { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

.plyr-trm-fc-hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.plyr-trm-fc-nav { display: flex; align-items: center; gap: 20px; }

.plyr-trm-fc-nav-btn {
  font-size: 13px; color: var(--color-teal);
  padding: 6px 16px; border-radius: 8px;
  border: 1px solid var(--border-mid);
  transition: border-color 0.15s, background 0.15s;
}
.plyr-trm-fc-nav-btn:hover { border-color: var(--color-teal); background: rgba(99,214,214,0.08); }

.plyr-trm-fc-counter {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted); min-width: 48px; text-align: center;
}


/* ── 13. Curio — QUZ ──────────────────────────────────────── */

.plyr-quz-inner {
  display: flex;
  gap: 14px;
}

.plyr-quz-accent {
  width: 3px;
  background: var(--color-green);
  border-radius: 2px;
  flex-shrink: 0;
}

.plyr-quz-body { flex: 1; }

.plyr-quz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.plyr-quz-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--color-green);
}

.plyr-quz-refresh {
  font-size: 18px; line-height: 1;
  padding: 4px 8px; border-radius: 8px;
  color: var(--text-muted);
  transition: color 0.15s, transform 0.2s;
}
.plyr-quz-refresh:hover { color: var(--text-primary); transform: rotate(40deg); }
.plyr-quz-refresh.pulse { animation: plyrPulse 0.45s ease; }

.plyr-quz-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-inner);
  padding: 16px;
  background: var(--bg-mid);
  transition: border-color 0.3s;
  animation: plyrFadeInUp 0.25s ease forwards;
}
.plyr-quz-card.state-correct { border-color: var(--color-green); }
.plyr-quz-card.state-wrong   { border-color: var(--border-mid); }

.plyr-quz-stem {
  font-size: 14px; font-weight: 500;
  color: var(--text-primary); line-height: 1.6;
  margin-bottom: 12px;
}

.plyr-quz-answers { display: flex; flex-direction: column; gap: 7px; }

.plyr-quz-answer {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-raised);
  border: 2px solid var(--border-mid);
  border-radius: 8px; padding: 9px 12px;
  cursor: pointer; text-align: left; width: 100%;
  color: var(--text-secondary); font-size: 13px; line-height: 1.5;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
}
.plyr-quz-answer:hover:not(:disabled) {
  border-color: var(--color-teal);
  background: rgba(99,214,214,0.06);
  color: var(--text-primary);
  transform: translateX(2px);
}
.plyr-quz-answer:disabled { cursor: default; transform: none !important; }

.plyr-quz-answer.is-correct {
  border-color: var(--color-green) !important;
  background: rgba(204,229,12,0.1) !important;
  color: var(--text-primary) !important;
  animation: plyrPop 0.3s ease;
}
.plyr-quz-answer.is-wrong {
  border-color: var(--color-orange) !important;
  background: rgba(255,68,51,0.07) !important;
  opacity: 0.7;
}
.plyr-quz-answer.is-reveal {
  border-color: var(--color-green) !important;
  background: rgba(204,229,12,0.05) !important;
  opacity: 1 !important;
}

.plyr-quz-key {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text-muted); min-width: 16px; flex-shrink: 0;
}
.plyr-quz-answer.is-correct .plyr-quz-key { color: var(--color-green); }
.plyr-quz-answer.is-wrong   .plyr-quz-key { color: var(--color-orange); }

.plyr-quz-text { flex: 1; }

.plyr-quz-emoji {
  font-size: 16px; flex-shrink: 0;
  opacity: 0; transform: scale(0);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.plyr-quz-answer.is-correct .plyr-quz-emoji { opacity: 1; transform: scale(1); }

.plyr-quz-feedback {
  font-family: var(--font-mono); font-size: 12px;
  margin-top: 10px; min-height: 18px;
  opacity: 0; transition: opacity 0.2s;
}
.plyr-quz-feedback.show       { opacity: 1; }
.plyr-quz-feedback.is-correct { color: var(--color-green); }
.plyr-quz-feedback.is-wrong   { color: var(--text-muted); }

.plyr-quz-explanation {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.65; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  display: none;
}
.plyr-quz-explanation.show { display: block; }


/* ── 14. Responsive ────────────────────────────────────────── */

@media (max-width: 500px) {
  .plyr-player-header   { padding: 7px 12px; }
  .plyr-player-brand    { font-size: 13px; }
  .plyr-hdr-badge       { font-size: 9px; padding: 2px 7px; }
  .plyr-tab-btn         { padding: 10px 12px; font-size: 12px; }
  .plyr-tab-panel       { padding: 14px; }
  .plyr-quz-zone        { padding: 14px 14px 16px; }
  .plyr-trm-list-row    { grid-template-columns: 1fr; }
  .plyr-trm-list-term   { justify-content: flex-start; text-align: left; }
  .plyr-trm-list-def    { border-left: none; padding-left: 0; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
}