/* Coffee Mastery — player chrome + slide + widget styling. */
:root {
  --canvas: #14100D;
  --surface: #1E1813;
  --surface-alt: #2A211A;
  --ink: #F3EDE6;
  --ink-soft: #B3A697;
  --crema: #D9A05B;       /* primary accent */
  --espresso: #6F4427;
  --leaf: #7FA868;        /* success */
  --cherry: #C8553D;      /* danger */
  --border: #3A2E24;
  --radius: 12px;
  --shadow: 0 16px 48px -16px rgba(0,0,0,.7);
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  --serif: "Bricolage Grotesque", "Arial Black", sans-serif;
  --mono: "Spline Sans Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { margin: 0; font-family: var(--serif); }
hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }

/* ── Buttons: "roast ticket" system (v2 — replaces the rounded AI pill) ── */
.cm-btn {
  font-family: var(--mono); font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--crema); color: #1A1208;
  border: 2px solid #1A1208; border-radius: 3px;
  padding: 12px 22px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 4px 4px 0 var(--espresso);
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.cm-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--espresso); }
.cm-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--espresso); }
.cm-btn.lg { font-size: 15.5px; padding: 15px 28px; }
.cm-btn.small { font-size: 11.5px; padding: 8px 14px; box-shadow: 3px 3px 0 var(--espresso); }
.cm-btn.secondary { background: transparent; color: var(--crema); border-color: var(--crema); box-shadow: 4px 4px 0 rgba(111,68,39,.45); }
.cm-btn.secondary:hover { background: rgba(217,160,91,.1); }
.cm-btn.locked { background: var(--surface-alt); color: var(--ink-soft); border-color: var(--border); box-shadow: none; transform: none; cursor: not-allowed; }
.cm-btn .msr { font-size: 1.35em; }

.cm-input, .cm-select { font: inherit; width: 100%; padding: 11px 13px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--canvas); color: var(--ink); }
.cm-input:focus, .cm-select:focus { outline: none; border-color: var(--crema); }
.cm-widget-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.vspace { height: 18px; }

/* Object states */
.st-hover { filter: brightness(1.12); }
.st-down { transform: scale(.97); }
.st-visited { border-color: var(--ink-soft) !important; }
.st-selected { border-color: var(--crema) !important; box-shadow: 0 0 0 2px rgba(217,160,91,.35); }
.st-disabled { opacity: .45; pointer-events: none; }
.st-correct { border-color: var(--leaf) !important; box-shadow: 0 0 0 2px rgba(127,168,104,.3); }
.st-incorrect { border-color: var(--cherry) !important; box-shadow: 0 0 0 2px rgba(200,85,61,.3); }
.st-dropcorrect { border-color: var(--leaf) !important; background: rgba(127,168,104,.15) !important; }
.st-dropincorrect { border-color: var(--cherry) !important; background: rgba(200,85,61,.15) !important; }

/* ── Player layout ─────────────────────────────────────────── */
.player { display: grid; grid-template-columns: 280px 1fr; height: 100vh; }
.pl-side { border-right: 1px solid var(--border); background: rgba(30,24,19,.7); display: flex; flex-direction: column; min-height: 0; }
.pl-brand { padding: 18px 18px 10px; font-family: var(--serif); font-size: 19px; color: var(--crema); }
.pl-brand small { display: block; font-family: var(--sans); font-size: 11px; color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }
.pl-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pl-tab { flex: 1; font: inherit; font-size: 12px; padding: 7px 4px; background: none; border: 0; border-radius: 8px; color: var(--ink-soft); cursor: pointer; }
.pl-tab.active { background: var(--surface-alt); color: var(--ink); }
.pl-pane { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
.pl-menu-scene { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 12px 4px 4px; }
.pl-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink-soft); background: none; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.pl-menu-item:hover:not(.locked) { background: var(--surface-alt); color: var(--ink); }
.pl-menu-item.active { background: var(--surface-alt); color: var(--ink); }
.pl-menu-item.locked { opacity: .45; cursor: not-allowed; }
.pl-menu-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; }
.pl-menu-item.active .pl-menu-dot { background: var(--crema); border-color: var(--crema); }
.pl-menu-item.done .pl-menu-dot { background: var(--leaf); border-color: var(--leaf); }
.pl-menu-label { flex: 1; }
.pl-menu-lock { font-size: 10px; }
.pl-progress { padding: 12px 16px; border-top: 1px solid var(--border); }
.pl-progress-bar { height: 6px; background: var(--surface-alt); border-radius: 99px; overflow: hidden; }
#pl-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--espresso), var(--crema)); transition: width .3s; }
.pl-resource { display: flex; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; font-size: 14px; padding: 9px 8px; border-radius: 8px; }
.pl-resource:hover { background: var(--surface-alt); }
.pl-resource-icon { color: var(--crema); }
.pl-gloss-term { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--border); padding: 9px 6px; cursor: pointer; }
.pl-gloss-term:hover { color: var(--crema); }
#pl-notes h4 { margin-bottom: 8px; }
#pl-notes p { font-size: 13.5px; color: var(--ink-soft); }
.pl-dim, .sl-dim { color: var(--ink-soft); }

.pl-main { display: flex; flex-direction: column; min-height: 0; }
.pl-top { display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--border); }
#pl-slide-title { font-family: var(--serif); font-size: 17px; flex: 1; }
.pl-iconbtn { font: inherit; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.pl-iconbtn.active { color: var(--crema); border-color: var(--crema); }
.pl-vol { width: 80px; accent-color: var(--crema); }

#sl2-stage { flex: 1; overflow-y: auto; padding: 32px 40px; position: relative; }
.sl2-slide-root { max-width: 1040px; margin: 0 auto; position: relative; min-height: 100%; }

/* captions */
#pl-captions { position: sticky; bottom: 6px; margin: 0 auto; max-width: 760px; text-align: center; background: rgba(20,16,13,.92); border: 1px solid var(--border); color: var(--ink); border-radius: 10px; padding: 8px 16px; font-size: 15px; display: none; z-index: 5; }
#pl-captions.on { display: block; }

/* bottom bar */
.pl-bottom { border-top: 1px solid var(--border); background: rgba(20,16,13,.92); padding: 10px 22px; display: flex; flex-direction: column; gap: 8px; }
#pl-seek-row { display: flex; align-items: center; gap: 12px; }
#pl-seek { flex: 1; accent-color: var(--crema); }
#pl-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); min-width: 86px; text-align: right; }
.pl-nav-row { display: flex; align-items: center; gap: 12px; }
#pl-gate { flex: 1; font-size: 13px; color: var(--crema); }
#pl-gate.pulse { animation: gp .5s; }
@keyframes gp { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#pl-play, #pl-replay { width: 38px; }

/* ── Slide typography ──────────────────────────────────────── */
.sl-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--crema); font-weight: 700; margin-bottom: 10px; font-family: var(--sans); }
.sl-h1 { font-size: 56px; line-height: 1.02; margin-bottom: 14px; }
.sl-h2 { font-size: 32px; line-height: 1.08; margin-bottom: 14px; }
.sl-lead { font-size: 17px; color: var(--ink-soft); max-width: 700px; margin: 0 0 16px; }
.sl-hint { margin-top: 16px; font-size: 13px; color: var(--crema); }
.sl-bullets { color: var(--ink); line-height: 2; padding-left: 22px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.ok-text { color: var(--leaf); } .bad-text { color: var(--cherry); }

/* timeline objects start hidden; engine paints them */
.tl-obj { opacity: 0; }

/* slide transitions */
@keyframes trFade { from { opacity: 0; } }
@keyframes trPush { from { opacity: 0; transform: translateX(60px); } }
@keyframes trZoom { from { opacity: 0; transform: scale(.94); } }
@keyframes trWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tr-fade .sl2-slide-root { animation: trFade .5s ease; }
.tr-push .sl2-slide-root { animation: trPush .45s ease; }
.tr-zoom .sl2-slide-root { animation: trZoom .5s ease; }
.tr-wipe .sl2-slide-root { animation: trWipe .55s ease; }

/* emphasis animations */
@keyframes ePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes eShake { 0%,100% { translate: 0 0; } 20%,60% { translate: -7px 0; } 40%,80% { translate: 7px 0; } }
@keyframes eGrow { 50% { transform: scale(1.18); } }
@keyframes eSpin { to { rotate: 360deg; } }
@keyframes eTeeter { 25% { rotate: 4deg; } 75% { rotate: -4deg; } }
.emph-pulse { animation: ePulse 1.2s ease; }
.emph-shake { animation: eShake .6s ease; }
.emph-grow { animation: eGrow 1s ease; }
.emph-spin { animation: eSpin 1.2s ease; }
.emph-teeter { animation: eTeeter .9s ease 2; }

/* layers */
.sl2-layer { display: none; position: absolute; inset: 0; z-index: 10; align-items: center; justify-content: center; padding: 30px; }
.sl2-layer.layer-on { display: flex; animation: trZoom .3s ease; }
.sl2-layer.modal { background: rgba(20,16,13,.72); backdrop-filter: blur(4px); }
.sl2-layer-card { background: var(--surface); border: 1px solid var(--crema); border-radius: var(--radius); padding: 26px 30px; max-width: 540px; box-shadow: var(--shadow); }
.sl2-layer-card h3 { margin-bottom: 8px; }
.sl2-layer-card .cm-btn { margin-top: 14px; }

/* lightbox */
.sl2-lightbox-overlay { position: fixed; inset: 0; background: rgba(10,8,6,.78); backdrop-filter: blur(5px); z-index: 100; display: grid; place-items: center; padding: 30px; }
.sl2-lightbox { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; max-width: 620px; max-height: 80vh; overflow-y: auto; padding: 30px 34px; position: relative; box-shadow: var(--shadow); }
.sl2-lightbox-close { position: absolute; top: 12px; right: 12px; font: inherit; background: var(--surface-alt); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
.sl2-lightbox h3 { color: var(--crema); margin-bottom: 10px; }
.sl2-lightbox h4 { margin: 14px 0 4px; }

/* ── Title slide ───────────────────────────────────────────── */
.title-bg { position: absolute; inset: -32px -40px; z-index: 0; }
.title-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) saturate(1.1); }
.title-inner { position: relative; z-index: 1; padding: 50px 10px; }
.title-stats { display: flex; gap: 44px; margin: 26px 0 30px; }
.title-stat-n { font-family: var(--serif); font-size: 52px; color: var(--crema); line-height: 1; }
.title-stat-l { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.title-kbd { margin-top: 22px; font-size: 12.5px; color: var(--ink-soft); font-family: var(--mono); }

/* ── Journey ───────────────────────────────────────────────── */
.journey-step { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.journey-step-t { font-family: var(--serif); color: var(--crema); min-width: 110px; }
.journey-step-b { color: var(--ink-soft); font-size: 14.5px; }
.journey-photo img { width: 100%; height: 100%; max-height: 480px; object-fit: cover; border-radius: var(--radius); }

/* ── Zoom region ───────────────────────────────────────────── */
.cm-zoom-frame { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); }
.cm-zoom-img { width: 100%; display: block; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.cm-zoom-controls { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cm-scrollpanel { overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.cm-scrollpanel h4 { color: var(--crema); margin: 10px 0 4px; }
.cm-scrollpanel p { font-size: 14px; color: var(--ink-soft); margin: 0 0 8px; }
.cm-web { width: 100%; height: 150px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* ── Dial ──────────────────────────────────────────────────── */
.cm-dial-wrap { text-align: center; }
.cm-dial { position: relative; width: 150px; height: 150px; margin: 8px auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--surface-alt), var(--surface)); border: 2px solid var(--border); cursor: grab; touch-action: none; }
.cm-dial:focus { outline: 2px solid var(--crema); outline-offset: 3px; }
.cm-dial-tick { position: absolute; left: 50%; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; background: var(--ink-soft); opacity: .5; }
.cm-dial-needle { position: absolute; left: 50%; top: 50%; width: 4px; height: 58px; margin-left: -2px; margin-top: -58px; transform-origin: 50% 100%; background: var(--crema); border-radius: 3px; transition: transform .08s linear; }
.cm-dial-hub { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: var(--surface-alt); border: 2px solid var(--crema); }
.cm-dial-readout, .cm-slider-readout { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.cm-slider input { width: 100%; accent-color: var(--crema); }

/* roast swatch custom states */
.roast-swatch { width: 84px; height: 84px; border-radius: 50% 6px 50% 50%; margin-bottom: 14px; border: 1px solid var(--border); background: #6b7d4f; transition: background .4s; position: relative; }
.roast-swatch::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 3px; margin-left: -1.5px; background: rgba(0,0,0,.3); border-radius: 2px; }
.roast-swatch.st-custom { /* custom states drive background below */ }
.roast-swatch[data-state="green"] { background: #6b7d4f; }
.roast-swatch[data-state="light"] { background: #C49A6C; }
.roast-swatch[data-state="medlight"] { background: #A8784C; }
.roast-swatch[data-state="medium"] { background: #7C5434; }
.roast-swatch[data-state="dark"] { background: #4A2E1B; }
.roast-swatch[data-state="burnt"] { background: #221510; }
.fly-bean { position: absolute; right: 30px; bottom: 26px; width: 26px; height: 18px; background: var(--espresso); border-radius: 50%; border: 1px solid var(--crema); }
.roast-card { position: relative; overflow: hidden; }

/* ── Markers / hotspots ────────────────────────────────────── */
.machine-scene { margin-top: 8px; }
.machine-photo { position: relative; border-radius: var(--radius); overflow: hidden; }
.machine-photo img { width: 100%; max-height: 460px; object-fit: cover; display: block; filter: brightness(.85); }
.cm-marker { position: absolute; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.cm-marker-dot { position: absolute; inset: 4px; border-radius: 50%; background: var(--crema); color: #2A1B0E; font-weight: 800; display: grid; place-items: center; }
.cm-marker-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--crema); animation: mpulse 1.6s infinite; }
@keyframes mpulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.cm-marker.st-visited .cm-marker-dot { background: var(--leaf); }
.cm-marker.st-visited .cm-marker-pulse { display: none; }
.cm-marker-pop { position: absolute; max-width: 330px; background: var(--surface); border: 1px solid var(--crema); border-radius: 10px; padding: 14px 16px; z-index: 5; box-shadow: var(--shadow); }
.cm-marker-pop-title { font-weight: 700; color: var(--crema); margin-bottom: 4px; }
.cm-marker-pop p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.cm-hotspot { position: absolute; background: transparent; border: 0; cursor: pointer; }
.cm-hotspot-visible { border: 2px dashed rgba(217,160,91,.65); border-radius: 10px; animation: mpulse2 2s infinite; }
@keyframes mpulse2 { 50% { border-color: rgba(217,160,91,.2); } }

/* ── Drag & drop ───────────────────────────────────────────── */
.cm-dd-tray { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.cm-dd-item { background: var(--surface-alt); border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 14px; font-size: 14px; cursor: grab; user-select: none; }
.cm-dd-item.dragging { opacity: .4; }
.cm-dd-item.armed { border-color: var(--crema); }
.cm-dd-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cm-dd-zone { background: var(--surface); border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 14px; min-height: 150px; }
.cm-dd-zone.over { border-color: var(--crema); background: var(--surface-alt); }
.cm-dd-zone-label { font-family: var(--serif); color: var(--crema); margin-bottom: 10px; }
.cm-dd-zone-body { display: flex; flex-direction: column; gap: 8px; }

/* ── Checkbox / radio ──────────────────────────────────────── */
.cm-check { display: flex; align-items: center; gap: 10px; cursor: pointer; border: 1.5px solid transparent; border-radius: 9px; padding: 8px 10px; }
.cm-check-box { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 5px; flex: 0 0 auto; display: grid; place-items: center; }
.cm-check.st-selected .cm-check-box { background: var(--crema); border-color: var(--crema); }
.cm-check.st-selected .cm-check-box::after { content: "✓"; color: #2A1B0E; font-weight: 800; font-size: 13px; }
.cm-radiogroup { display: flex; flex-direction: column; gap: 8px; }
.cm-radio { display: flex; align-items: center; gap: 10px; font: inherit; text-align: left; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; cursor: pointer; }
.cm-radio-dot { width: 17px; height: 17px; border: 2px solid var(--border); border-radius: 50%; flex: 0 0 auto; }
.cm-radio.st-selected { border-color: var(--crema); }
.cm-radio.st-selected .cm-radio-dot { background: var(--crema); border-color: var(--crema); box-shadow: inset 0 0 0 3px var(--surface); }
.cm-toggle.st-selected { background: var(--espresso); color: var(--ink); border-color: var(--crema); }

/* ── Character ─────────────────────────────────────────────── */
.scenario-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; }
.cm-char { position: relative; width: 150px; height: 210px; }
.cm-char-face { position: absolute; left: 50%; top: 0; width: 92px; height: 100px; margin-left: -46px; background: #C8956C; border-radius: 44% 44% 40% 40%; }
.cm-char-hair { position: absolute; left: 50%; top: -8px; width: 100px; height: 46px; margin-left: -50px; background: #3A2A1E; border-radius: 50% 50% 0 0; z-index: 1; }
.cm-char-eye { position: absolute; top: 42px; width: 10px; height: 10px; background: #261A12; border-radius: 50%; transition: all .3s; }
.cm-char-eye.l { left: 24px; } .cm-char-eye.r { right: 24px; }
.cm-char-brow { position: absolute; top: 30px; width: 18px; height: 3px; background: #3A2A1E; border-radius: 2px; transition: all .3s; }
.cm-char-brow.l { left: 20px; } .cm-char-brow.r { right: 20px; }
.cm-char-mouth { position: absolute; left: 50%; bottom: 18px; width: 30px; height: 12px; margin-left: -15px; border: 3px solid #261A12; border-top: 0; border-radius: 0 0 22px 22px; transition: all .3s; }
.cm-char-body { position: absolute; top: 96px; left: 50%; width: 130px; height: 110px; margin-left: -65px; background: #51382A; border-radius: 26px 26px 0 0; }
.cm-char-apron { position: absolute; left: 50%; top: 18px; width: 84px; height: 92px; margin-left: -42px; background: var(--espresso); border-top: 4px solid var(--crema); border-radius: 12px 12px 0 0; }
.cm-char[data-expr="upset"] .cm-char-mouth { border-radius: 22px 22px 0 0; border-top: 3px solid #261A12; border-bottom: 0; height: 10px; bottom: 14px; }
.cm-char[data-expr="upset"] .cm-char-brow.l { transform: rotate(18deg); top: 28px; }
.cm-char[data-expr="upset"] .cm-char-brow.r { transform: rotate(-18deg); top: 28px; }
.cm-char[data-expr="happy"] .cm-char-mouth { height: 16px; width: 36px; margin-left: -18px; }
.cm-char[data-expr="happy"] .cm-char-brow.l, .cm-char[data-expr="happy"] .cm-char-brow.r { top: 26px; transform: none; }
.scenario-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; max-width: 300px; position: relative; }
.scenario-bubble::before { content: ""; position: absolute; top: -8px; left: 46%; border: 8px solid transparent; border-bottom-color: var(--border); border-top: 0; }
.scenario-bubble p { margin: 0; font-style: italic; font-size: 14.5px; }
.ix-prompt { font-weight: 600; font-size: 16px; margin: 0 0 12px; }

/* ── Quiz ──────────────────────────────────────────────────── */
.qz-host { max-width: 760px; }
.qz-meta { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.qz-stem { font-size: 22px; margin-bottom: 16px; }
.qz-hint { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.qz-opts { display: flex; flex-direction: column; gap: 9px; }
.qz-opt { font: inherit; font-size: 15px; text-align: left; color: var(--ink); background: var(--surface-alt); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 15px; cursor: pointer; }
.qz-opt-check { padding-left: 42px; position: relative; }
.qz-opt-check::before { content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 4px; }
.qz-opt-check.st-selected::before { background: var(--crema); border-color: var(--crema); }
.qz-match-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.qz-match-left { font-weight: 500; }
.qz-seq-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; background: var(--surface-alt); border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px; margin-bottom: 8px; }
.qz-seq-num { font-family: var(--mono); color: var(--crema); font-weight: 700; }
.qz-seq-btn { font: inherit; width: 30px; height: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--ink); cursor: pointer; }
.qz-seq-btn:disabled { opacity: .3; }
.qz-hotspot-scene { position: relative; border-radius: var(--radius); min-height: 300px; background-size: cover; background-position: center; border: 1px solid var(--border); }
.qz-hotspot-region { position: absolute; background: rgba(217,160,91,.08); border: 2px dashed rgba(217,160,91,.5); border-radius: 8px; cursor: pointer; }
.qz-wb-sentence { font-size: 17px; line-height: 2.1; }
.qz-wb-blank { font: inherit; font-family: var(--mono); background: var(--surface-alt); border: 1.5px dashed var(--crema); border-radius: 7px; color: var(--crema); padding: 3px 10px; margin: 0 3px; cursor: pointer; }
.qz-wb-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qz-wb-word { font: inherit; background: var(--surface-alt); border: 1.5px solid var(--border); border-radius: 99px; color: var(--ink); padding: 7px 15px; cursor: pointer; }
.qz-wb-word.armed { border-color: var(--crema); color: var(--crema); }
.qz-wb-word.used { opacity: .3; pointer-events: none; }
.qz-likert-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.qz-likert-stmt { font-size: 14.5px; }
.qz-likert-opts { display: flex; gap: 10px; }
.qz-likert-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface-alt); cursor: pointer; }
.qz-likert-dot.st-selected { background: var(--crema); border-color: var(--crema); }
.qz-likert-legend { font-size: 12px; color: var(--ink-soft); margin-top: 8px; text-align: right; }
.qz-fb { display: none; margin-top: 14px; font-size: 14px; padding: 11px 14px; border-radius: 9px; }
.qz-fb.show { display: block; }
.qz-fb.ok { background: rgba(127,168,104,.13); color: var(--leaf); }
.qz-fb.bad { background: rgba(200,85,61,.13); color: #e9a08f; }
.qz-fb.warn { background: rgba(217,160,91,.13); color: var(--crema); }
.qz-actions { display: flex; gap: 10px; margin-top: 16px; }
.qz-actions.center { justify-content: center; }
.qz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; max-width: 760px; }
.qz-review-flag { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.qz-review-flag.ok { color: var(--leaf); } .qz-review-flag.bad { color: var(--cherry); }
.qz-review-item { margin-bottom: 16px; max-width: 760px; }
.results-card { text-align: center; max-width: 540px; margin: 8px auto; }
.results-score { font-family: var(--serif); font-size: 72px; color: var(--crema); line-height: 1; }
.results-card .qz-actions { justify-content: center; }

/* ── Certificate ───────────────────────────────────────────── */
.cm-cert { border: 2px solid var(--crema); border-radius: 18px; padding: 46px; text-align: center; max-width: 640px; margin: 6px auto 0; background: radial-gradient(ellipse at top, rgba(217,160,91,.1), transparent 60%), var(--surface); }
.cm-cert-eyebrow { letter-spacing: .22em; text-transform: uppercase; font-size: 12px; color: var(--crema); }
.cm-cert-course { font-family: var(--serif); font-size: 40px; margin-top: 8px; }
.cm-cert-sub { color: var(--ink-soft); margin-bottom: 22px; }
.cm-cert-presented { font-size: 13px; color: var(--ink-soft); }
.cm-cert-name { font-family: var(--serif); font-size: 32px; border-bottom: 1px solid var(--border); display: inline-block; padding: 2px 34px 10px; margin: 4px 0 16px; }
.cm-cert-meta { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }

/* exit overlay */
body.course-exited #sl2-stage { opacity: .25; pointer-events: none; }

/* ── Responsive + print ────────────────────────────────────── */
@media (max-width: 980px) {
  .player { grid-template-columns: 1fr; }
  .pl-side { display: none; }
  .two-col, .three-col { grid-template-columns: 1fr; }
  .sl-h1 { font-size: 38px; }
}
@media print {
  .pl-side, .pl-top, .pl-bottom, .sl2-layer, #pl-captions { display: none !important; }
  .player { display: block; }
  html, body { background: #fff; color: #111; }
  .cm-cert, .results-card { border-color: #333; background: #fff; color: #111; }
  .results-score, .cm-cert-course, .cm-cert-name { color: #111; }
}

/* Material Symbols icon spans (replaces emojis curriculum-wide) */
.msr {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  font-size: 1.18em; line-height: 0;
  display: inline-block; vertical-align: -0.185em;
  letter-spacing: normal; text-transform: none;
  font-variation-settings: 'FILL' 1, 'opsz' 24;
}