@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');

:root {
  --navy: #071b33;
  --blue: #0b3b66;
  --cyan: #13c5c9;
  --teal: #0d8f9c;
  --violet: #6e40c9;
  --purple: #7a2fb6;
  --pink: #e85d8f;
  --cream: #f7f4ec;
  --white: #ffffff;
  --ink: #132033;
  --muted: #607087;
  --success: #20a464;
  --danger: #d84949;
  --gold: #e6b83c;
  --shadow: 0 20px 55px rgba(5, 22, 44, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 15%, rgba(19,197,201,.12), transparent 25rem),
    radial-gradient(circle at 85% 10%, rgba(110,64,201,.10), transparent 28rem),
    #eef4f7;
  color: var(--ink);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  position: sticky; top: 0; z-index: 100;
  min-height: 74px; padding: 10px clamp(14px,4vw,44px);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(7,27,51,.94); color: white;
  backdrop-filter: blur(12px);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:52px; height:52px; object-fit:contain; }
.brand strong, .brand span { display:block; }
.brand strong { font-size:1rem; }
.brand span { font-size:.78rem; opacity:.75; margin-top:3px; }
.icon-btn { border:1px solid rgba(255,255,255,.25); background:transparent; color:white; border-radius:12px; padding:9px 11px; }

.progress-shell { height:7px; background:#d9e4e8; position:sticky; top:74px; z-index:99; }
.progress-fill { width:0; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)); transition:width .5s ease; }

main { max-width:1280px; margin:auto; }
.screen { display:none; min-height:calc(100vh - 81px); padding:clamp(28px,5vw,72px) clamp(18px,5vw,64px); animation:fade .5s ease; }
.screen.active { display:block; }
@keyframes fade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.hero-screen.active { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px; overflow:hidden; }
.hero-copy h1 { font-family:"Playfair Display",serif; font-size:clamp(4rem,10vw,8.5rem); line-height:.86; margin:.2em 0; color:var(--navy); letter-spacing:-.06em; }
.eyebrow { display:inline-flex; padding:7px 11px; border-radius:999px; background:#dff6f5; color:#08747e; text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.72rem; }
.lead { font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.6; max-width:650px; color:#38516a; }
.name-box { max-width:500px; margin:28px 0 16px; }
.name-box label { display:block; font-weight:700; margin-bottom:8px; }
.name-box input, .tutor-input-row input {
  width:100%; border:1px solid #b9cbd4; border-radius:14px; padding:14px 16px; background:white; color:var(--ink);
}
.primary-btn, .secondary-btn {
  border:0; border-radius:14px; padding:13px 19px; font-weight:800; transition:.2s ease;
}
.primary-btn { color:white; background:linear-gradient(135deg,var(--teal),var(--violet)); box-shadow:0 10px 24px rgba(64,57,174,.25); }
.primary-btn:hover { transform:translateY(-2px); }
.secondary-btn { background:#e6edf1; color:#23415b; }
.microcopy { font-size:.8rem; color:var(--muted); margin-top:18px; }

.professor-stage { min-height:620px; position:relative; display:flex; align-items:flex-end; justify-content:center; }
.professor { position:relative; width:min(620px,100%); z-index:2; filter:drop-shadow(0 30px 35px rgba(6,26,48,.24)); }
.professor-float { animation:float 4s ease-in-out infinite; }
@keyframes float { 50%{transform:translateY(-10px)} }
.speech-bubble { position:absolute; z-index:5; top:4%; right:0; width:min(390px,75%); padding:18px 20px; border-radius:20px 20px 6px 20px; background:white; box-shadow:var(--shadow); line-height:1.55; font-weight:600; }
.scanner-ring { position:absolute; border:2px solid rgba(19,197,201,.32); border-radius:50%; animation:pulse 3s infinite; }
.ring-one { width:460px;height:460px;bottom:70px; }
.ring-two { width:560px;height:560px;bottom:20px; animation-delay:1s; }
@keyframes pulse { 50%{transform:scale(1.06);opacity:.35} }

.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:30px; }
.section-head h2 { font-family:"Playfair Display",serif; font-size:clamp(2.2rem,5vw,4.2rem); margin:.25em 0 .1em; color:var(--navy); line-height:1; }
.section-head p { color:var(--muted); max-width:700px; line-height:1.6; }
.mission-score { white-space:nowrap; background:white; border:1px solid #cddde4; border-radius:16px; padding:12px 16px; font-weight:800; box-shadow:0 8px 20px rgba(10,33,55,.08); }

.model-layout { display:grid; grid-template-columns:1.45fr .75fr; gap:24px; }
.model-panel, .info-panel, .drop-card, .lab-bench, .reagent-rack, .scope-controls, .quiz-card {
  background:rgba(255,255,255,.86); border:1px solid rgba(150,179,192,.45); border-radius:24px; box-shadow:var(--shadow);
}
.model-panel { padding:18px; min-height:610px; }
.model-tabs { display:flex; gap:8px; }
.tab { border:0; border-radius:12px; padding:10px 14px; background:#e7eff3; color:#29465e; font-weight:700; }
.tab.active { background:var(--navy); color:white; }
.bacteria-viewer { position:relative; height:520px; display:grid; place-items:center; perspective:1100px; overflow:hidden; user-select:none; }
.bacteria-model { width:520px; height:250px; position:relative; transform-style:preserve-3d; transform:rotateX(-12deg) rotateY(-18deg); transition:transform .08s linear; }
.layer { position:absolute; inset:0; border-radius:48% 52% 48% 52% / 52% 47% 53% 48%; box-shadow:inset 0 0 28px rgba(0,0,0,.20), 0 10px 25px rgba(7,27,51,.15); }
.outer-negative { display:none; background:linear-gradient(145deg,#d6548e,#8b2e97); transform:translateZ(46px) scale(1.08); border:9px solid #f1a8c6; }
.peptidoglycan-thin { display:none; background:#e8b657; transform:translateZ(34px) scale(1.04); }
.peptidoglycan-thick { background:repeating-linear-gradient(35deg,#6f45c7 0 11px,#8d64d7 11px 19px); transform:translateZ(40px) scale(1.07); border:12px solid #b99be9; }
.membrane { background:repeating-linear-gradient(90deg,#17a1a9 0 8px,#7ce3df 8px 16px); transform:translateZ(22px) scale(1.02); }
.cytoplasm { background:radial-gradient(circle at 35% 35%,#bdeef0,#50bcca); transform:translateZ(10px) scale(.96); overflow:hidden; }
.negative-model .outer-negative,.negative-model .peptidoglycan-thin { display:block; }
.negative-model .peptidoglycan-thick { display:none; }
.dna { position:absolute; width:200px;height:80px; border:7px dotted #fff; border-radius:50%; left:150px;top:85px; transform:rotate(-14deg); opacity:.9; }
.ribosomes { position:absolute; inset:0; background-image:radial-gradient(circle,#075d67 0 3px,transparent 4px); background-size:38px 32px; opacity:.65; }
.surface-nodes { position:absolute; inset:-25px; background-image:radial-gradient(circle,#ffdd77 0 4px,transparent 5px); background-size:38px 42px; }
.cell-shadow { position:absolute; width:470px;height:100px;border-radius:50%;background:rgba(5,22,42,.20);filter:blur(22px);bottom:-90px;left:24px;transform:translateZ(-60px); }
.hotspot { position:absolute; width:25px;height:25px;border:4px solid white;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 7px rgba(19,197,201,.2),0 0 22px var(--cyan);z-index:12;animation:hot 1.5s infinite; }
.hotspot.discovered { background:var(--success); animation:none; }
@keyframes hot { 50%{transform:scale(1.18)} }
.hs1{left:55px;top:48px}.hs2{left:120px;bottom:45px}.hs3{left:265px;top:125px}.hs4{right:100px;top:90px}.hs5{right:38px;top:60px}.hs6{right:75px;bottom:42px}.hs7{left:220px;top:15px}.hs8{right:190px;top:20px}
.positive-model .negative-only { display:none; }
.negative-model .positive-only { display:none; }
.drag-hint { position:absolute; bottom:12px; color:var(--muted); font-size:.85rem; }

.info-panel { padding:25px; align-self:stretch; }
.info-panel h3 { font-size:1.65rem; margin:.6em 0; }
.info-panel p { line-height:1.65; color:#4b6277; }
.info-badge { display:inline-block; border-radius:999px; padding:6px 10px; background:#e8e2fb; color:#5c35aa; font-size:.75rem; font-weight:800; }
.fact-list { margin:18px 0; display:grid; gap:10px; }
.fact { padding:11px; border-left:4px solid var(--cyan); background:#edf8f8; border-radius:0 10px 10px 0; font-size:.88rem; }

.build-zone { display:grid; grid-template-columns:.7fr 1.3fr; gap:24px; align-items:start; }
.component-bank { display:grid; gap:10px; }
.component { border:1px solid #b7ccd6; border-radius:13px; padding:13px 14px; background:white; color:#29465e; text-align:left; font-weight:700; box-shadow:0 7px 15px rgba(7,27,51,.07); }
.component.dragging { opacity:.4; }
.component.used { opacity:.35; pointer-events:none; text-decoration:line-through; }
.drop-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.drop-card { padding:20px; text-align:center; min-height:450px; }
.mini-cell { width:180px;height:95px;margin:25px auto;border-radius:50%; }
.positive-mini { background:#7b45c2;border:13px solid #bba0e3;box-shadow:inset 0 0 0 9px #2db7be; }
.negative-mini { background:#46bbc2;border:8px solid #e8b657;box-shadow:0 0 0 9px #b24d8b; }
.dropzone { border:2px dashed #87a8b7;border-radius:14px;padding:19px;color:#638093;transition:.2s; }
.dropzone.over { background:#dff6f5;border-color:var(--teal); }
.drop-card ul { text-align:left; padding-left:20px; line-height:1.8; color:#37536a; }
.feedback-line { min-height:28px; text-align:center; margin:18px; font-weight:700; }
.centered { display:block; margin:18px auto; }

.stain-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:24px; }
.lab-bench { padding:28px; min-height:500px; background:linear-gradient(180deg,#f8fcfd,#d7e4e8); }
.slide { height:340px;border-radius:22px;background:rgba(255,255,255,.9);border:8px solid rgba(255,255,255,.8);box-shadow:inset 0 0 0 2px #a8c3cf,0 20px 30px rgba(7,27,51,.18);display:flex;align-items:center;justify-content:space-evenly;overflow:hidden;position:relative; }
.sample { position:relative;width:220px;height:100px;border-radius:50%;background:#d8e9ec;border:10px solid #b5c9ce;transition:all .9s ease; }
.sample-label { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:900;color:#4d6571;z-index:3; }
.molecule-cloud { position:absolute;inset:-20px;opacity:0;transition:.7s;background-image:radial-gradient(circle,#7a2fb6 0 5px,transparent 6px);background-size:30px 28px;animation:drift 3s linear infinite; }
@keyframes drift { to{background-position:60px 40px} }
.sample.violet-stained { background:#7b37a8;border-color:#7e55ae; }
.sample.violet-stained .molecule-cloud { opacity:.8; }
.sample.complexed { box-shadow:inset 0 0 0 6px #e8bf52,0 0 30px rgba(126,55,168,.45); }
.pos-sample.decolorized { background:#6f2ea3;border-color:#7e55ae; }
.neg-sample.decolorized { background:#e8eef0;border-color:#d3dde0;box-shadow:none; }
.neg-sample.decolorized .molecule-cloud { opacity:0; }
.neg-sample.counterstained { background:#e35d8f;border-color:#f3a8bf; }
.pos-sample.counterstained { background:#6f2ea3;border-color:#7e55ae; }
.reaction-caption { margin-top:22px;text-align:center;font-weight:800;color:#29465e; }
.reagent-rack { padding:20px;display:grid;gap:12px;align-content:start; }
.reagent { border:0;border-radius:16px;padding:14px;text-align:left;color:white;font-weight:800; }
.reagent span { display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.25);margin-right:9px; }
.reagent.violet{background:#6f2ea3}.reagent.iodine{background:#9a6d1f}.reagent.alcohol{background:#288ca0}.reagent.safranin{background:#d74f7d}
.reagent.completed { opacity:.45; }
.science-note { margin:22px 0;padding:16px 18px;border-left:5px solid var(--violet);background:white;border-radius:0 14px 14px 0;line-height:1.6; }

.microscope-layout { display:grid;grid-template-columns:1.2fr .8fr;gap:24px; }
.scope-body { min-height:560px;position:relative;display:grid;place-items:center;background:radial-gradient(circle,#e8f5f6,#c8dde2);border-radius:28px;overflow:hidden; }
.eyepiece { position:absolute;top:45px;width:90px;height:120px;background:#17354e;border-radius:22px 22px 10px 10px; }
.scope-arm { position:absolute;width:330px;height:420px;border:65px solid #1c4c68;border-left-color:transparent;border-bottom-color:#1c4c68;border-radius:50%;transform:rotate(-18deg); }
.scope-stage { position:relative;z-index:3;width:330px;height:330px;border:16px solid #0c273e;border-radius:50%;background:#092036;display:grid;place-items:center;box-shadow:0 18px 35px rgba(7,27,51,.25); }
.microscope-field { width:285px;height:285px;border-radius:50%;background-color:#f8f2e7;overflow:hidden;transition:filter .2s,transform .3s;background-size:100% 100%; }
.blur-heavy { filter:blur(7px); }.blur-medium { filter:blur(3px); }.focused { filter:none; }
.scope-base { position:absolute;bottom:28px;width:430px;height:95px;border-radius:50%;background:#173f59; }
.scope-controls { padding:24px;display:grid;gap:12px;align-content:start; }
.scope-controls label { font-weight:800; }
.scope-controls input,.scope-controls select { width:100%; }
.scope-controls select { padding:11px;border-radius:12px;border:1px solid #a9c0cb;background:white; }
.diagnosis-buttons { display:grid;gap:10px;margin-top:10px; }
.diagnosis-buttons button { border:1px solid #9db8c4;background:white;border-radius:12px;padding:12px;font-weight:700; }
.feedback-box { min-height:58px;background:#eef4f7;border-radius:12px;padding:12px;color:#37536a;line-height:1.5; }

.video-shell { position:relative;background:#06111e;border-radius:24px;overflow:hidden;box-shadow:var(--shadow); }
.video-shell video { width:100%;display:block;max-height:670px; }
.video-question { position:absolute;inset:0;background:rgba(4,15,28,.82);display:grid;place-items:center;padding:20px; }
.question-card { width:min(640px,96%);background:white;border-radius:22px;padding:24px; }
.question-card h3 { font-size:1.35rem;line-height:1.35; }
#videoOptions,.quiz-answers { display:grid;gap:10px; }
.answer-btn { border:1px solid #b7cad3;background:white;border-radius:13px;padding:12px 14px;text-align:left;font-weight:650; }
.answer-btn:hover { border-color:var(--teal);background:#eefafa; }
.answer-btn.correct { background:#dcf5e7;border-color:var(--success); }
.answer-btn.wrong { background:#fae2e2;border-color:var(--danger); }

.quiz-card { max-width:780px;margin:auto;padding:28px; }
.quiz-card h3 { font-size:1.45rem;line-height:1.4; }
.results-screen { text-align:center; }
.results-banner { display:flex;justify-content:center;align-items:center;gap:20px; }
.badge-medal { font-size:5rem;animation:float 3s infinite; }
.results-banner h2 { font-family:"Playfair Display",serif;font-size:clamp(2.4rem,6vw,5rem);margin:.1em 0; }
.metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:800px;margin:36px auto; }
.metric { background:white;border-radius:18px;padding:22px;box-shadow:0 10px 25px rgba(7,27,51,.09); }
.metric span { display:block;font-size:2rem;font-weight:900;color:var(--violet); }
.metric small { color:var(--muted); }
.badges-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;max-width:1000px;margin:30px auto; }
.badge-card { background:white;border:1px solid #d1dfe5;border-radius:18px;padding:18px; }
.badge-card.locked { filter:grayscale(1);opacity:.45; }
.badge-card .emoji { font-size:2.5rem; }
.result-actions { display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px; }

.certificate-screen { background:#e7edf0; }
.certificate-paper { width:min(1000px,100%);margin:auto;background:#fffdf7;border:16px double #123e5c;padding:45px;text-align:center;box-shadow:var(--shadow);position:relative; }
.certificate-paper:before,.certificate-paper:after { content:"";position:absolute;width:75px;height:75px;border-color:#d5aa34;border-style:solid; }
.certificate-paper:before { left:16px;top:16px;border-width:4px 0 0 4px; }
.certificate-paper:after { right:16px;bottom:16px;border-width:0 4px 4px 0; }
.certificate-paper img { width:105px; }
.certificate-kicker { text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#17496a; }
.certificate-paper h2 { font-family:"Playfair Display",serif;font-size:3rem;margin:.35em; }
.certificate-paper h3 { font-family:"Playfair Display",serif;font-size:2.5rem;color:#6f2ea3;border-bottom:2px solid #d6b14b;display:inline-block;padding:0 30px 7px; }
.certificate-paper h4 { font-size:1.25rem;color:#123e5c; }
.certificate-stats { display:flex;justify-content:center;gap:45px;margin:30px; }
.signature { margin-top:45px; }
.signature span { display:block;font-family:"Playfair Display",serif;font-size:1.5rem;border-bottom:1px solid #38516a;width:260px;margin:auto;padding-bottom:5px; }
.signature small { display:block;margin-top:7px;color:var(--muted); }
.certificate-code { font-size:.75rem;color:#7a8795;margin-top:25px; }

.tutor { position:fixed;right:18px;bottom:18px;z-index:150; }
.tutor-toggle { border:0;border-radius:999px;padding:13px 18px;background:var(--navy);color:white;font-weight:800;box-shadow:0 10px 30px rgba(7,27,51,.3); }
.tutor-panel { width:min(370px,calc(100vw - 28px));height:520px;background:white;border-radius:20px;box-shadow:0 22px 55px rgba(7,27,51,.30);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto auto;position:absolute;right:0;bottom:58px; }
.tutor-head { background:var(--navy);color:white;padding:14px;display:flex;justify-content:space-between;align-items:center; }
.tutor-head strong,.tutor-head span { display:block; }
.tutor-head span { font-size:.72rem;opacity:.7;margin-top:3px; }
.tutor-head button { border:0;background:transparent;color:white;font-size:1.5rem; }
.tutor-messages { padding:14px;overflow-y:auto;background:#f2f7f8;display:flex;flex-direction:column;gap:10px; }
.bot-message,.user-message { max-width:85%;padding:10px 12px;border-radius:14px;line-height:1.45;font-size:.88rem; }
.bot-message { background:white;align-self:flex-start;border:1px solid #d8e4e9; }
.user-message { background:#dff6f5;align-self:flex-end;color:#0f5660; }
.quick-prompts { padding:8px 12px;display:flex;gap:6px;overflow-x:auto; }
.quick-prompts button { white-space:nowrap;border:1px solid #b9cbd4;background:white;border-radius:999px;padding:7px 9px;font-size:.75rem; }
.tutor-input-row { padding:10px;display:flex;gap:7px;border-top:1px solid #dbe5e9; }
.tutor-input-row input { padding:10px; }
.tutor-input-row button { border:0;background:var(--teal);color:white;border-radius:10px;padding:0 12px;font-weight:700; }
.toast { position:fixed;left:50%;bottom:24px;transform:translate(-50%,130px);background:#102f48;color:white;border-radius:14px;padding:12px 18px;z-index:300;transition:.3s;box-shadow:var(--shadow); }
.toast.show { transform:translate(-50%,0); }

@media(max-width:900px){
  .hero-screen.active,.model-layout,.build-zone,.stain-layout,.microscope-layout { grid-template-columns:1fr; }
  .professor-stage { min-height:500px; }
  .model-panel { min-height:auto; }
  .bacteria-viewer { height:430px; }
  .bacteria-model { transform:scale(.78) rotateX(-12deg) rotateY(-18deg); }
  .drop-grid { grid-template-columns:1fr; }
  .section-head { align-items:flex-start;flex-direction:column; }
}
@media(max-width:600px){
  .brand span { display:none; }
  .hero-copy h1 { font-size:4.5rem; }
  .professor-stage { min-height:390px; }
  .speech-bubble { top:0;width:88%;font-size:.85rem; }
  .bacteria-viewer { height:330px; }
  .bacteria-model { transform:scale(.58) rotateX(-12deg) rotateY(-18deg); }
  .slide { flex-direction:column;height:500px; }
  .sample { width:180px;height:80px; }
  .metrics { grid-template-columns:1fr; }
  .certificate-paper { padding:25px 14px;border-width:9px; }
  .certificate-paper h2 { font-size:2rem; }
  .certificate-paper h3 { font-size:1.8rem; }
  .certificate-stats { flex-direction:column;gap:8px; }
}
@media print {
  body * { visibility:hidden !important; }
  #certificatePaper,#certificatePaper * { visibility:visible !important; }
  #certificatePaper { position:absolute;left:0;top:0;width:100%;box-shadow:none;border:12px double #123e5c; }
  .no-print,.topbar,.progress-shell,.tutor { display:none !important; }
}


/* FIX: decorative model layers must not intercept hotspot clicks */
.bacteria-model .layer,
.bacteria-model .layer *,
.bacteria-model .cell-shadow,
.bacteria-model .dna,
.bacteria-model .ribosomes,
.bacteria-model .surface-nodes {
  pointer-events: none;
}

.bacteria-model .hotspot {
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}