/* Molecular Reaction Engine — modern cinematic canvas demo */

.reel-body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(91,140,255,.10), transparent 60%),
    radial-gradient(1000px 500px at 0% 110%, rgba(54,201,176,.10), transparent 60%),
    #060912;
  min-height:100vh;
}

/* top bar */
.reel-top{
  display:flex;align-items:center;gap:18px;padding:14px 26px;
  border-bottom:1px solid rgba(120,150,200,.14);
  background:rgba(10,15,26,.55);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:10;
}
.reel-top .back{color:var(--muted);text-decoration:none;font-size:14px}
.reel-top .back:hover{color:var(--ink)}
.reel-title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:.3px;
  color:#eaf2ff}
.reel-title .spark{color:var(--accent);filter:drop-shadow(0 0 8px var(--accent));animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reel-top .eq{margin-left:auto;font:600 16px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:#9af5e2;letter-spacing:.5px;
  padding:7px 14px;border-radius:10px;background:rgba(54,201,176,.08);
  border:1px solid rgba(54,201,176,.25);text-shadow:0 0 12px rgba(54,201,176,.4)}

/* layout */
.theatre{max-width:1120px;margin:0 auto;padding:24px 18px 70px}

.screen{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(130,160,210,.16);
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  aspect-ratio:16/9;
}
#stage{display:block;width:100%;height:100%}

/* film grain + vignette overlays */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%)}

/* title card */
.title-card{position:absolute;left:0;right:0;top:8%;text-align:center;pointer-events:none;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease}
.title-card.show{opacity:1;transform:translateY(0)}
.tc-kicker{font:700 12px/1 ui-monospace,monospace;letter-spacing:4px;color:var(--accent);
  text-shadow:0 0 14px rgba(54,201,176,.6);margin-bottom:8px}
.tc-name{font-size:34px;font-weight:800;letter-spacing:.3px;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.8)}
.tc-sub{margin-top:6px;font-size:15px;color:#bcd0f0;text-shadow:0 1px 10px rgba(0,0,0,.8)}

/* phase rail */
.phase-rail{position:absolute;top:16px;left:16px;display:flex;gap:6px;pointer-events:none}
.phase-rail .ph{font:600 10px/1 ui-monospace,monospace;letter-spacing:1.5px;
  padding:6px 9px;border-radius:999px;color:#7388a8;
  background:rgba(20,28,46,.55);border:1px solid rgba(120,150,200,.14);transition:.3s}
.phase-rail .ph.on{color:#062018;background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 16px rgba(54,201,176,.55)}

/* caption */
.caption{position:absolute;left:50%;transform:translateX(-50%);bottom:58px;
  width:min(86%,820px);text-align:center;font-size:16px;line-height:1.5;color:#eef4ff;
  background:rgba(8,13,24,.62);backdrop-filter:blur(8px);
  padding:12px 18px;border-radius:14px;border:1px solid rgba(130,160,210,.18);
  text-shadow:0 1px 6px rgba(0,0,0,.7);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.caption b{color:#ffd479}
.caption .en{color:#9af5e2}

/* progress bar + dots */
.pbar{position:absolute;left:0;right:0;bottom:34px;height:3px;margin:0 18px;border-radius:3px;
  background:rgba(120,150,200,.16);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 10px var(--accent)}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:50%;background:#33415e;cursor:pointer;transition:.2s}
.dots i.on{background:var(--accent);transform:scale(1.3);box-shadow:0 0 10px var(--accent)}

/* legend */
.legend-bar{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:16px}
.legend-bar span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);
  padding:5px 11px;border-radius:999px;background:rgba(20,28,46,.5);border:1px solid rgba(120,150,200,.12)}
.legend-bar i{width:14px;height:14px;border-radius:50%;display:inline-block;
  box-shadow:0 0 8px currentColor}

/* transport */
.transport{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.transport button{background:rgba(22,33,60,.7);color:var(--ink);border:1px solid rgba(120,150,200,.18);
  padding:11px 16px;border-radius:12px;font-size:15px;transition:.15s}
.transport button:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.transport .primary{background:linear-gradient(135deg,var(--accent),#2fb89f);color:#06221a;border:none;
  font-weight:800;min-width:104px;box-shadow:0 6px 20px rgba(54,201,176,.35)}
.loop-toggle{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;margin-left:6px}

.hint{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}

/* ============================================================
   EMBED MODE  (body.embed) — compact, fills the frame, minimal chrome
   for sitting in the interactive-lecture's right-hand panel
   ============================================================ */
/* same look as standalone — only fit it to the panel (drop the page nav, use full width) */
body.embed{margin:0;background:#000}
body.embed .reel-top{display:none}
body.embed .theatre{max-width:none;padding:14px 18px 22px}

/* LECTURE MODE — clean panel: no in-canvas title card / legend / dots, single border */
body.lecmode,body.lecmode.reel-body{height:auto;overflow:hidden;background:transparent;}
body.lecmode .title-card,
body.lecmode .hint,
body.lecmode .pbar{display:none !important}   /* steps show progress; nav (prev/next/dots/loop) kept so students can browse reactions */
/* legend back — compact, fills the freed vertical space */
body.lecmode .legend-bar{margin-top:10px;gap:7px 11px;}
body.lecmode .legend-bar span{font-size:13px;padding:4px 11px;}
/* fill the wide iframe; the host gives it a short aspect so the molecules fill it (no empty black) */
body.lecmode .theatre{height:auto;display:flex;flex-direction:column;padding:6px 9px 9px;}
/* clean 16:9 animation; flex:0 1 auto → stays 16:9 when there's room, shrinks (never clips controls) when capped */
body.lecmode .screen{flex:0 1 auto;aspect-ratio:16/9;width:100%;min-height:0;border:none;box-shadow:none;border-radius:0;}
/* caption is lifted out of the canvas → plain text below the screen, no box */
body.lecmode .caption{position:static;transform:none;flex:none;margin:9px auto 0;width:auto;max-width:96%;min-height:2.5em;
  background:transparent;border:none;box-shadow:none;backdrop-filter:none;text-shadow:none;text-align:center;
  font:500 18px/1.45 ui-sans-serif,system-ui,Segoe UI,Roboto;color:#dbe6f5;}
body.lecmode .caption b{color:#ffd479}
body.lecmode .caption .en{color:#9af5e2}
body.lecmode .phase-rail .ph{font-size:11.5px;padding:7px 12px;letter-spacing:1.3px;}
body.lecmode .transport{flex:none;margin-top:6px;}

/* atom details panel + pause hint (pause-time interactivity) */
.atom-info{position:absolute;z-index:7;width:230px;max-width:62%;pointer-events:none;
  background:rgba(10,14,22,.93);border:1px solid rgba(130,160,210,.32);border-radius:12px;
  padding:11px 13px;color:#eaf2ff;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto;
  box-shadow:0 14px 36px rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.atom-info .ai-head{display:flex;align-items:center;gap:9px;font-size:15px;margin-bottom:9px}
.atom-info .ai-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 9px currentColor;flex:none}
.atom-info .ai-sym{margin-left:auto;font:700 12px ui-monospace,Menlo,Consolas,monospace;color:#9af5e2;
  border:1px solid rgba(154,245,226,.3);border-radius:6px;padding:2px 8px}
.atom-info .ai-rows{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12.5px;color:#b8c6df}
.atom-info .ai-rows b{color:#fff}
.atom-info .ai-note{margin:9px 0 0;font-size:12.5px;line-height:1.46;color:#cdd9ee}
.pause-badge{position:absolute;top:14px;right:14px;z-index:6;pointer-events:none;
  font:600 12px ui-sans-serif,system-ui;color:#cdd9ee;
  background:rgba(10,14,22,.6);border:1px solid rgba(130,160,210,.22);border-radius:999px;
  padding:7px 13px;backdrop-filter:blur(6px)}
body.theme-light .atom-info{background:rgba(248,242,231,.96);border-color:rgba(120,95,60,.3);color:#3a2c1c;
  box-shadow:0 14px 32px rgba(90,60,30,.24)}
body.theme-light .atom-info .ai-sym{color:#8a3214;border-color:rgba(138,50,20,.3)}
body.theme-light .atom-info .ai-rows{color:#6b5a42}
body.theme-light .atom-info .ai-rows b{color:#2e2114}
body.theme-light .atom-info .ai-note{color:#5b4a33}
body.theme-light .pause-badge{background:rgba(248,242,231,.85);border-color:rgba(120,95,60,.22);color:#6b5a42}

/* ============================================================
   NOIR THEME  (body.theme-noir) — near-black, atoms pop
   ============================================================ */
body.theme-noir.reel-body{
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(70,92,170,.07), transparent 60%),
    radial-gradient(900px 460px at 0% 110%, rgba(46,120,150,.06), transparent 60%),
    #000;
}
body.theme-noir .reel-top{background:rgba(8,8,10,.6);border-bottom:1px solid rgba(150,160,180,.1)}
body.theme-noir .screen{
  border:1px solid rgba(150,160,180,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.02);
}
body.theme-noir .vig{background:radial-gradient(120% 120% at 50% 45%, transparent 52%, rgba(0,0,0,.7) 100%)}

/* ============================================================
   LIGHT / PAPER THEME  (body.theme-light) — same reel, calm skin
   ============================================================ */
body.theme-light.reel-body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(214,182,140,.30), transparent 60%),
    radial-gradient(1000px 500px at 0% 110%, rgba(200,156,110,.26), transparent 60%),
    #f3ead9;
  color:#3a3026;
}
body.theme-light .reel-top{
  background:rgba(247,240,228,.72);border-bottom:1px solid rgba(120,95,60,.18);
}
body.theme-light .reel-title{color:#3a2c1c}
body.theme-light .reel-title .spark{color:#b4451f;filter:drop-shadow(0 0 8px rgba(180,69,31,.5))}
body.theme-light .reel-top .back{color:#7a6a52}
body.theme-light .reel-top .back:hover{color:#3a2c1c}
body.theme-light .reel-top .eq{
  color:#8a3214;background:rgba(180,69,31,.08);border:1px solid rgba(180,69,31,.25);
  text-shadow:none;
}
body.theme-light .screen{
  border:1px solid rgba(120,95,60,.22);
  box-shadow:0 26px 60px rgba(90,60,30,.28), inset 0 0 0 1px rgba(255,255,255,.3);
}
body.theme-light .grain{opacity:.03}
body.theme-light .vig{background:radial-gradient(120% 120% at 50% 45%, transparent 60%, rgba(80,55,25,.18) 100%)}
body.theme-light .title-card .tc-kicker{color:#b4451f;text-shadow:none}
body.theme-light .title-card .tc-name{color:#2e2114;text-shadow:0 2px 16px rgba(255,255,255,.6)}
body.theme-light .title-card .tc-sub{color:#6b5a42;text-shadow:none}
body.theme-light .phase-rail .ph{
  color:#8a7a60;background:rgba(247,240,228,.7);border:1px solid rgba(120,95,60,.18);
}
body.theme-light .phase-rail .ph.on{
  color:#fff;background:#b4451f;border-color:#b4451f;box-shadow:0 0 14px rgba(180,69,31,.45);
}
body.theme-light .caption{
  color:#3a2c1c;background:rgba(247,240,228,.82);border:1px solid rgba(120,95,60,.2);
  text-shadow:none;box-shadow:0 8px 26px rgba(90,60,30,.18);
}
body.theme-light .caption b{color:#b4451f}
body.theme-light .caption .en{color:#2f6b3d}
body.theme-light .pbar{background:rgba(120,95,60,.16)}
body.theme-light .pbar i{background:linear-gradient(90deg,#d98a3a,#b4451f);box-shadow:0 0 10px rgba(217,138,58,.5)}
body.theme-light .dots i{background:#cdbba0}
body.theme-light .dots i.on{background:#b4451f;box-shadow:0 0 10px rgba(180,69,31,.5)}
body.theme-light .legend-bar span{
  color:#6b5a42;background:rgba(247,240,228,.7);border:1px solid rgba(120,95,60,.16);
}
body.theme-light .transport button{
  background:rgba(247,240,228,.85);color:#3a2c1c;border:1px solid rgba(120,95,60,.2);
}
body.theme-light .transport button:hover{border-color:#d98a3a}
body.theme-light .transport .primary{
  background:linear-gradient(135deg,#d98a3a,#b4451f);color:#fff;
  box-shadow:0 6px 18px rgba(180,69,31,.3);
}
body.theme-light .loop-toggle{color:#7a6a52}
body.theme-light .hint{color:#8a7a60}