:root{
  --bg:#081119;--surface:#0f202d;--surface2:#132736;--line:#26465a;--text:#eff8ff;--muted:#98acbc;
  --accent:#69ddff;--good:#65d58c;--bad:#ff7d7d;--warn:#ffd66e;--shadow:0 18px 48px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(circle at top,#112537 0,#091118 58%,#050a0f 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100vh}
button{font:inherit}
.hidden{display:none!important}
#app{max-width:1500px;margin:0 auto;padding:16px}
.surface{background:linear-gradient(180deg,rgba(16,33,46,.98),rgba(10,21,31,.98));border:1px solid rgba(115,165,197,.14);border-radius:24px;box-shadow:var(--shadow)}
.hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 20px;margin-bottom:16px}
.badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(20,53,72,.88);border:1px solid rgba(105,221,255,.24);font-size:12px;font-weight:800;letter-spacing:.08em;color:#c5f4ff}
h1{margin:12px 0 8px;font-size:38px}.hero p{margin:0;line-height:1.6;color:#d7e6f2;max-width:920px}
.ghost-btn,.primary-btn,.tiny-btn{border:none;border-radius:14px;padding:12px 16px;cursor:pointer;color:var(--text)}
.primary-btn{background:linear-gradient(180deg,#2c617f,#1a435b);font-weight:700}
.ghost-btn{background:#132535;border:1px solid rgba(255,255,255,.08)}
.tiny-btn{padding:10px 12px;background:#132535;border:1px solid rgba(255,255,255,.08);font-size:13px}
.section-pad{padding:22px}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:14px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800}h2{margin:6px 0 0;font-size:28px}.mini-help{max-width:480px;color:var(--muted);line-height:1.5}
.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.level-card{padding:18px;text-align:left;color:var(--text);border-radius:20px;border:1px solid rgba(115,165,197,.16);background:linear-gradient(180deg,rgba(18,36,52,.96),rgba(10,22,34,.96));cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.level-card:hover{transform:translateY(-2px);border-color:#5f8fb0}.level-badge{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(8,18,28,.6);border:1px solid rgba(255,255,255,.08);font-size:11px;color:#c8efff;font-weight:700}.level-title{font-size:20px;font-weight:800;margin-top:10px}.level-desc{margin-top:8px;color:#c2d3df;font-size:14px;line-height:1.55;min-height:56px}.level-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#aac1d1}.diff{color:#ffd884}
.hud-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}.hud-card{padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(16,33,46,.98),rgba(10,21,31,.98));border:1px solid rgba(115,165,197,.14);box-shadow:var(--shadow)}.hud-card span{display:block;font-size:12px;color:#8da8bb;text-transform:uppercase;letter-spacing:.08em}.hud-card strong{display:block;margin-top:8px;font-size:24px}.hud-card.danger strong{color:#ffe092}
.scene-panel{padding:12px 12px 14px}.scene-topbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.pill{padding:8px 12px;border-radius:999px;background:rgba(8,17,27,.62);border:1px solid rgba(255,255,255,.08);font-size:12px;color:#b9cddd}.pill.accent{border-color:rgba(105,221,255,.22);background:rgba(14,44,62,.85);color:#d7fcff}#scene-wrap{height:560px;border-radius:22px;overflow:hidden;border:1px solid rgba(121,170,201,.18);background:#020812}#scene3d{width:100%;height:100%;display:block}.hint{margin-top:10px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(8,16,25,.92),rgba(10,19,28,.92));border:1px solid rgba(255,255,255,.08);font-size:14px;color:#e1edf6}
.workbench{display:grid;grid-template-columns:420px minmax(0,1fr);gap:14px;margin-top:14px}.column-left,.column-right{display:flex;flex-direction:column;gap:14px}.card{padding:16px}.card-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#8ca5b8;margin-bottom:10px}.info-list{display:grid;gap:8px}.info-chip{padding:10px 12px;border-radius:14px;background:rgba(8,16,25,.65);border:1px solid rgba(255,255,255,.06);line-height:1.45;font-size:14px}.info-chip b{display:block;color:#9fcdf0;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}.info-chip.bad{border-color:rgba(255,125,125,.28);background:rgba(255,125,125,.07)}.muted{color:var(--muted)}.small{font-size:13px}.action-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.task-box{font-size:20px;font-weight:800;line-height:1.4;margin:14px 0 12px}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.action-btn{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#13283a,#102132);color:var(--text);padding:13px 14px;border-radius:15px;text-align:left;cursor:pointer;transition:transform .12s ease,border-color .12s ease}.action-btn:hover{transform:translateY(-1px);border-color:#69a8ce}.feedback{margin-top:12px;min-height:22px}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}
.flow-steps{display:grid;gap:8px}.flow-step{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:12px;background:rgba(8,16,25,.52);border:1px solid rgba(255,255,255,.06);color:#b8cad9;font-size:13px}.flow-step .dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.12);font-size:12px;flex:none}.flow-step.active{border-color:rgba(104,221,255,.25);background:rgba(14,39,55,.85);color:#eaf8ff}.flow-step.done{border-color:rgba(84,212,133,.22);background:rgba(18,43,33,.72)}
.result-panel{line-height:1.6}.result-table{width:100%;border-collapse:collapse;font-size:13px}.result-table th,.result-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}.result-table th{color:#9ec2dc}.flag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800}.flag.normal{background:rgba(89,212,135,.12);color:#7fe7a7;border:1px solid rgba(89,212,135,.25)}.flag.abnormal{background:rgba(255,213,109,.12);color:#ffdf86;border:1px solid rgba(255,213,109,.25)}.flag.critical{background:rgba(255,117,117,.12);color:#ff9393;border:1px solid rgba(255,117,117,.28)}
.toolbar-bottom{margin-top:14px;display:flex;justify-content:flex-start}.overlay{position:fixed;inset:0;background:rgba(3,8,13,.84);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.dialog{max-width:620px;width:100%;padding:22px}.dialog h3{margin:0 0 12px;font-size:28px}.dialog p,.dialog li{line-height:1.6;color:#d8e6f2}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
@media (max-width:1200px){.workbench{grid-template-columns:1fr}.hud-row{grid-template-columns:repeat(3,1fr)}#scene-wrap{height:500px}}
@media (max-width:760px){#app{padding:10px}.hero{padding:16px;flex-direction:column}h1{font-size:30px}.hud-row{grid-template-columns:repeat(2,1fr)}#scene-wrap{height:380px}.button-grid{grid-template-columns:1fr}}


/* v0.8.1 — bright clinical interface + medium-size 3D viewport */
:root {
  --bg:#f2f8fb;
  --surface:#ffffff;
  --surface2:#f5fafc;
  --line:#d3e2e9;
  --text:#183345;
  --muted:#627a8b;
  --accent:#027c9b;
  --good:#127c4c;
  --bad:#b93840;
  --warn:#9c6609;
  --shadow:0 6px 24px rgba(42,77,105,.07);
}
html,body{background:#f2f8fb;color:var(--text)}
body{color:var(--text)}
.surface{background:#fff;border-color:#d9e6ee;box-shadow:var(--shadow)}
.hero{background:linear-gradient(110deg,#fff 0%,#e9f7fb 100%);border-color:#d3e5ee;align-items:center;padding:13px 20px;margin-bottom:11px}
.hero h1{color:#153649;font-size:27px;margin:7px 0 4px}
.hero p{color:#567186;font-size:13px;line-height:1.35;max-width:960px}
.badge{background:#e7f5fc;border-color:#b9dfed;color:#08758e;font-size:10px;padding:5px 10px}
.hero-actions{flex:none}
.section-head .mini-help,.mini-help{color:#5b7687}
.eyebrow{color:#117d98}
h2{color:#1a394b}
.level-card{background:#fff;color:#1c3c4d;border-color:#d2e4ec;box-shadow:0 5px 18px rgba(42,77,105,.06)}
.level-card:hover{border-color:#6db3c9;box-shadow:0 10px 25px rgba(42,77,105,.1)}
.level-badge{background:#eaf7fa;border-color:#cbe8ed;color:#147f96}
.level-title{color:#173c50}
.level-desc{color:#5e7a8c}
.level-meta{border-top-color:#e8eff3;color:#718798}
.diff{color:#bb7b20}
.hud-row{gap:9px;margin-bottom:10px}
.hud-card{padding:9px 13px;background:#fff;border:1px solid #dce9ef;border-radius:14px;box-shadow:none}
.hud-card span{color:#637f92;font-size:11px}
.hud-card strong{font-size:20px;color:#184057;margin-top:3px}
.hud-card.danger{background:#fff9ed;border-color:#f5dfb9}
.hud-card.danger strong{color:#a05c13}
.scene-panel{padding:10px;border-color:#d7e6ed;background:#fff}
.scene-topbar{margin-bottom:8px}
.pill{background:#f0f7fa;border-color:#deedf3;color:#567385}
.pill.accent{background:#e6f6fc;border-color:#cae7f1;color:#08718c}
#scene-wrap{height:350px;width:min(100%,940px);margin:0 auto;border-radius:14px;background:#e8f4fa;border:1px solid #d3e5ed;position:relative}
#scene3d{width:100%;height:100%}
#scene-status{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;padding:20px;font-weight:600;font-size:14px;color:#547b8d;text-align:center;background:#e6f4fa;z-index:1;pointer-events:none}
#scene-status.hidden{display:none}
.hint{margin-top:8px;padding:9px 12px;background:#eff8fb;border-color:#daeaf1;color:#316077;font-size:13px}
.workbench{gap:10px;grid-template-columns:340px minmax(0,1fr);margin-top:10px}
.column-left,.column-right{gap:9px}
.card{padding:12px 14px;background:#fff;border-color:#dbe9f0}
.card-title{color:#4e7288;font-size:11px;margin-bottom:8px}
.info-list{gap:5px}
.info-chip{padding:7px 10px;background:#f4f9fc;border-color:#e4eef3;color:#263f51;font-size:13px}
.info-chip b{color:#567b91;font-size:10px;margin-bottom:2px}
.info-chip.bad{border-color:#edb5b8;background:#fff0f0}
.muted{color:#667f8f}
.task-box{color:#18394c;font-size:17px;margin:10px 0}
.action-btn{color:#215064;background:#f0f9fc;border:1px solid #cfe5ee;padding:11px 13px}
.action-btn:hover{border-color:#6faec6;background:#e8f5fa}
.feedback{color:#637a88}
.feedback.good{color:#127c4c}.feedback.bad{color:#b93840}
.flow-step{background:#f7fafc;border-color:#e6eff4;color:#607888;padding:7px 9px}
.flow-step .dot{border-color:#d2e3eb;color:#477083}
.flow-step.active{background:#e7f5fb;border-color:#97cedf;color:#175676}
.flow-step.done{background:#edfaf3;border-color:#a9dfbd;color:#1d7048}
.result-panel{color:#405f73}
.result-table th{color:#48758c}
.result-table th,.result-table td{border-bottom-color:#e5edf2}
.flag.normal{background:#e6f8eb;color:#167543;border-color:#afe0c3}
.flag.abnormal{background:#fff4dc;color:#9d6b17;border-color:#ecd49f}
.flag.critical{background:#fff0ef;color:#b74245;border-color:#efb7b7}
.ghost-btn,.tiny-btn{color:#2a556e;background:#eaf4f8;border:1px solid #cddfe9}
.primary-btn{color:#fff;background:linear-gradient(180deg,#1786a3,#116782)}
.overlay{background:rgba(14,32,45,.58)}
.dialog{color:#183445;background:#fff}
.dialog p,.dialog li{color:#486779}
.dialog h3{color:#214157}
.toolbar-bottom{margin-top:10px}
body.playing .hero p{display:none}
body.playing .hero h1{font-size:24px;margin:5px 0 0}
body.playing .hero{padding:9px 16px}
body.playing .badge{font-size:10px;padding:4px 9px}
@media(max-width:1200px){.workbench{grid-template-columns:320px minmax(0,1fr)}#scene-wrap{height:335px}}
@media(max-width:900px){.workbench{grid-template-columns:1fr}#scene-wrap{height:345px}.hud-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){#scene-wrap{height:270px}.hero h1{font-size:24px}.hero p{font-size:12px}.hud-card strong{font-size:18px}.hud-row{gap:6px}}
@media(max-width:440px){#scene-wrap{height:235px}.hud-row{grid-template-columns:repeat(2,1fr)}}


/* v0.8.2 — always-on 3D view alongside the decision workbench */
#app{max-width:1580px}
.play-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(510px,.92fr);
  align-items:start;
  gap:12px;
}
.play-layout > *{min-width:0}
.scene-panel{
  position:sticky;
  top:10px;
  z-index:2;
  padding:10px;
}
.scene-panel #scene-wrap{
  width:100%;
  height:clamp(295px,29vw,385px);
  background:#e8f4fa;
}
.scene-footnote{display:flex;align-items:center;gap:7px;margin:9px 4px 1px;color:#57798b;font-size:12px}
.watch-indicator{width:8px;height:8px;border-radius:50%;background:#2cb17d;box-shadow:0 0 0 4px #e2f8ee;flex:none}
.operation-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  max-height:max(430px,calc(100dvh - 157px));
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 5px 9px 0;
  overscroll-behavior:contain;
  scrollbar-color:#b0cfdd #f0f7fa;
  scrollbar-width:thin;
}
.operation-panel::-webkit-scrollbar{width:7px}
.operation-panel::-webkit-scrollbar-thumb{background:#b0cfdd;border-radius:30px}
.operation-panel::-webkit-scrollbar-track{background:#eff7fa;border-radius:30px}
.operation-panel .card{padding:12px 13px;border-radius:16px;box-shadow:none}
.action-card{position:sticky;top:0;z-index:3;background:#fff!important;box-shadow:0 7px 18px rgba(43,80,102,.11)!important;border:1px solid #c4dfe9!important}
.action-card .action-head{gap:8px}
.action-card .card-title{color:#137897;font-weight:800;font-size:12px}
.quick-identity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.quick-id{padding:8px 10px;background:#f0f8fb;border:1px solid #d7e8ee;border-radius:11px;min-width:0;overflow-wrap:anywhere;font-size:12px;line-height:1.4;color:#193d50}
.quick-id b{display:block;color:#567d90;text-transform:uppercase;letter-spacing:.055em;font-size:10px;margin-bottom:3px}
.quick-id strong{display:block;font-size:13px}
.quick-id span{color:#557589}
.action-card .task-box{margin:10px 0 9px;font-size:16px;line-height:1.4}
.action-card .button-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.action-card .action-btn{min-width:0;min-height:43px;padding:10px 11px;font-size:13px;font-weight:650}
.action-card .feedback{margin-top:8px;min-height:0;font-size:12px}
.compare-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.compare-column{min-width:0}
.compare-heading{display:flex;align-items:center;gap:6px;color:#396c86;font-weight:750;font-size:12px;margin-bottom:8px}
.compare-symbol{display:inline-flex;align-items:center;border-radius:5px;padding:3px 5px;font-size:9px;color:#fff;background:#1684a1;letter-spacing:.04em}
.tube-symbol{background:#8a609c}
.compare-columns .info-list{gap:5px;grid-template-columns:repeat(2,minmax(0,1fr))}
.compare-columns .info-chip{padding:6px 8px;font-size:12px;overflow-wrap:anywhere;line-height:1.35}
.compare-columns .info-chip b{font-size:10px;line-height:1.25}
.operation-panel .result-table{font-size:12px}
.operation-panel .result-table th,.operation-panel .result-table td{padding:7px 5px}
.extra-info summary{cursor:pointer;font-weight:750;color:#3d6c81;font-size:12px;list-style-position:inside}
.extra-info[open] summary{margin-bottom:10px}
.extra-info .info-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.toolbar-bottom{margin-top:9px}
@media(max-width:1170px){
  .play-layout{grid-template-columns:minmax(0,1fr) minmax(420px,.92fr)}
  .scene-panel #scene-wrap{height:320px}
  .compare-columns .info-list{grid-template-columns:1fr}
}
@media(max-width:920px){
  .play-layout{grid-template-columns:1fr;gap:10px}
  .operation-panel{max-height:none;overflow:visible;padding:0}
  .scene-panel{position:sticky;top:0;z-index:5}
  .scene-panel #scene-wrap{height:clamp(230px,45vw,340px)}
  .action-card{position:relative;top:auto}
  .compare-columns .info-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
  .scene-panel #scene-wrap{height:clamp(205px,56vw,260px)}
  .scene-panel{padding:7px;border-radius:14px}
  .scene-footnote{display:none}
  .compare-columns{grid-template-columns:1fr}
  .compare-columns .info-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .action-card .button-grid{grid-template-columns:1fr}
  .quick-identity{grid-template-columns:1fr 1fr}
  .scene-panel .pill{font-size:10px}
}

/* v0.9 */
.ref-notice{display:block;font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:#6e8796;margin-top:5px}
.level-card:focus-visible,.action-btn:focus-visible{outline:3px solid #5dacc6;outline-offset:2px}
#scene3d{background:#e8f4fa}

/* v0.9 */
.ref-notice{display:block;font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:#6e8796;margin-top:5px}
.level-card:focus-visible,.action-btn:focus-visible{outline:3px solid #5dacc6;outline-offset:2px}
#scene3d{background:#e8f4fa}


/* v1.0 — clean single-glance receiving card */
body.playing .hero{display:none}
body.playing .hud-row{margin-top:0}
#app{max-width:1580px}
.play-layout{grid-template-columns:minmax(0,1.12fr) minmax(475px,.88fr)}
.play-layout .scene-panel{border:1px solid #d6e6eb;box-shadow:0 12px 30px rgba(34,89,101,.08)}
.scene-panel #scene-wrap{height:clamp(290px,30vw,385px);border:0;background:#cfeaf1;border-radius:16px}
.scene-panel .hint{font-weight:650;color:#35697b;background:#eaf6f8;border:none}
.hud-card{border-radius:16px}
.hud-card strong{font-size:21px}
.hud-card.danger{border-color:#f1dab6}
.timer-track{background:#f1e6d1;height:6px;border-radius:9px;overflow:hidden;margin-top:5px}
#timer-fill{height:100%;width:100%;background:#24b4ad;border-radius:9px;transition:width .1s linear}
.hud-card.urgent{background:#fff0ef;border-color:#ffc6c1;animation:urgPulse 1s ease-in-out infinite}
.hud-card.urgent strong{color:#c74340}
.hud-card.urgent #timer-fill{background:#ec5e54}
@keyframes urgPulse{50%{box-shadow:0 0 0 4px rgba(235,84,80,.08)}}
.operation-panel{gap:9px;max-height:max(430px,calc(100dvh - 140px))}
.operation-panel .card{padding:14px;border-radius:18px}
.action-card .action-head{align-items:center}
.action-card .card-title{font-size:12px;letter-spacing:.10em}
.action-card .task-box{font-size:17px;margin:12px 0 12px;font-weight:800}
.action-card .button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.action-card .action-btn{font-size:13px;font-weight:700;min-height:49px;border-radius:12px;background:#eaf8fb;color:#155774;border-color:#acdce8}
.action-card .action-btn:first-child{background:#117c9a;color:#fff;border-color:#117c9a}
.action-card .action-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,94,113,.13)}
.compact-intake{margin-top:11px;padding:11px;border-radius:14px;background:linear-gradient(180deg,#f4fbfd,#ecf7fb);border:1px solid #d3e8ef}
.intake-head{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:850;color:#34718a;letter-spacing:.09em}
#intake-step-chip{color:#087781}
.quick-identity{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.quick-id{background:#fff;border:1px solid #d7e8ee;border-radius:10px;padding:8px;min-height:72px}
.quick-id b{font-size:10px;color:#477185}
.quick-id strong{font-size:13px;color:#183a4c;line-height:1.34}
.quick-id span{font-size:11px}
.sample-mini{display:flex;align-items:center;gap:12px;margin-top:9px;padding:9px;background:#fff;border:1px solid #e0edf1;border-radius:12px}
.sample-mini-text{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;font-size:12px;color:#557385;line-height:1.35}
.sample-mini-text strong{font-size:14px;color:#173d51}
.sample-mini-text small{font-size:11px;color:#638392}
.tube-preview{height:68px;width:40px;display:flex;align-items:flex-end;justify-content:center;flex:none}
.specimen-tube{width:24px;height:60px;border:2px solid #a2c2d2;border-radius:3px 3px 10px 10px;position:relative;background:linear-gradient(90deg,#e6f6fa,#fff,#d6edf3);overflow:visible}
.tube-cap{height:12px;width:30px;position:absolute;left:-5px;top:-6px;border-radius:5px 5px 2px 2px;border:1px solid rgba(61,83,100,.22);z-index:3}
.tube-fluid{position:absolute;left:1px;right:1px;bottom:1px;border-radius:0 0 7px 7px;opacity:.85}
.tube-sticker{position:absolute;top:18px;left:-4px;width:28px;padding:3px 1px;text-align:center;overflow:hidden;white-space:nowrap;font-size:4px;color:#2c5769;background:#fff;z-index:2}
.compact-intake.post-intake .sample-mini{display:none}
.compact-intake.post-intake{padding:9px 10px}
.compact-intake.post-intake .quick-identity{display:none}
.compare-card summary,.extra-info summary{font-size:12px;font-weight:750;color:#46778a;list-style-position:inside}
.compare-card .compare-columns{padding-top:12px}
.operation-panel .compare-card,.operation-panel .extra-info{box-shadow:none}
.ref-notice{display:block}
@media(max-width:1170px){.play-layout{grid-template-columns:minmax(0,1fr) minmax(405px,.9fr)}}
@media(max-width:920px){.play-layout{grid-template-columns:1fr}.operation-panel{max-height:none}.scene-panel #scene-wrap{height:clamp(250px,45vw,365px)}}
@media(max-width:580px){.scene-panel #scene-wrap{height:clamp(215px,55vw,270px)}.action-card .button-grid{grid-template-columns:1fr}}

/* v1.1: camera toggle and readable timer/penalty HUD */
.scene-topbar #btn-camera{margin-left:auto;white-space:nowrap;padding:7px 12px;font-size:12px}
.hud-card:nth-child(4) strong{color:#be5d3e}
.scene-panel #scene-wrap{background:#d9edf4}
@media(max-width:760px){.scene-topbar #btn-camera{margin-left:0}.scene-panel .pill{font-size:10px}}

/* v1.2: no answer highlighted before the user chooses. */
.action-card .action-btn,
.action-card .action-btn:first-child {
  appearance:none; background:linear-gradient(180deg,#ffffff,#f3f9fc);
  color:#245269; border:1px solid #c6dce6;
  box-shadow:0 2px 7px rgba(27,76,97,.05);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.action-card .action-btn:hover:not(:disabled) {background:#eefaff;border-color:#6daac0;transform:translateY(-1px)}
.action-card .action-btn.selected-correct,
.action-card .action-btn:first-child.selected-correct {
  background:#e3f9ed!important;color:#117849!important;border:2px solid #2ead73!important;
  box-shadow:0 0 0 3px rgba(46,173,115,.10)!important;
}
.action-card .action-btn.selected-wrong,
.action-card .action-btn:first-child.selected-wrong {
  background:#fff0f0!important;color:#ae3544!important;border:2px solid #e97882!important;
  box-shadow:0 0 0 3px rgba(233,120,130,.08)!important;
}
.action-card .action-btn.selected-neutral,
.action-card .action-btn:first-child.selected-neutral {
  background:#ebf6ff!important;color:#1b6a96!important;border:2px solid #5ca5cb!important;
}
.action-card .action-btn:disabled {cursor:default;opacity:.85;transform:none}
.action-card .action-btn.selected-correct:disabled,
.action-card .action-btn.selected-wrong:disabled {opacity:1}

/* v1.3 — pause feedback visible while moving, without revealing the answer */
.clock-state{display:block;margin-top:3px;font-size:10px;font-weight:700;line-height:1.35;color:#647f91;white-space:normal}
.clock-paused{background:linear-gradient(155deg,#e7f7ff,#f5fbff)!important;border-color:#84c5e0!important}
.clock-paused #hud-timer{color:#16799b!important}
.clock-paused .clock-state{color:#007aa0}
.clock-paused #timer-fill{background:linear-gradient(90deg,#58b7d2,#83d4e2)!important}

/* v1.4 — visual hierarchy and readable laboratory cutaway */
body{background:#edf4f7}
body.playing .hud-row{gap:8px;margin-bottom:10px}
.play-layout{grid-template-columns:minmax(0,1.14fr) minmax(430px,.86fr);gap:12px}
.play-layout .scene-panel{background:#fff;border-color:#cfdfe7;box-shadow:0 14px 32px rgba(34,83,107,.10)}
.scene-panel #scene-wrap{height:clamp(330px,31vw,404px);background:#dbe8ec;border-radius:14px}
.scene-topbar{margin-bottom:10px}
.scene-panel .hint{background:#e9f4f8;color:#285368;line-height:1.4}
.scene-footnote{font-size:11px;color:#6d8491}
.operation-panel{gap:8px;max-height:max(445px,calc(100dvh - 138px))}
.operation-panel .card{border:1px solid #d7e5eb;box-shadow:0 3px 10px rgba(29,83,109,.025);padding:12px 13px}
.action-card{border-color:#b5d7e4!important;box-shadow:0 10px 24px rgba(25,89,117,.10)!important}
.action-card .task-box{margin:8px 0 8px;font-size:17px;color:#143e54;line-height:1.36}
.action-card .button-grid{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.action-card .action-btn,.action-card .action-btn:first-child{min-height:49px;font-size:13px;background:linear-gradient(180deg,#fff,#f1f7fa);color:#24576a;border:1px solid #bcd7e2;box-shadow:0 2px 4px rgba(13,58,80,.045)}
.action-card .action-btn.selected-correct,.action-card .action-btn:first-child.selected-correct{background:#e3f9ed!important;color:#117849!important;border:2px solid #2ead73!important}
.action-card .action-btn.selected-wrong,.action-card .action-btn:first-child.selected-wrong{background:#fff0f0!important;color:#ae3544!important;border:2px solid #e97882!important}
.action-card .action-btn.selected-neutral,.action-card .action-btn:first-child.selected-neutral{background:#ebf6ff!important;color:#1b6a96!important;border:2px solid #5ca5cb!important}
.compact-intake{background:#f0f8fa;border-color:#d2e5ec;margin:0 0 9px;padding:10px}
.compact-intake.post-intake{display:none}
.quick-id{background:#fff;border:1px solid #cfdee5}
.quick-id b{color:#52788e}
.quick-id strong{font-weight:800}
.sample-mini{padding:7px 9px;margin-top:6px}
.quick-result{background:#f6fafb;border:1px solid #cbdfe7;border-radius:12px;padding:10px;margin:0 0 10px;max-height:216px;overflow:auto;font-size:12px;color:#264d60}
.quick-result>div:first-child{font-size:12px;margin-bottom:5px}
.quick-result .result-table{font-size:11px}
.quick-result .result-table th,.quick-result .result-table td{padding:6px 5px}
#clock-state{font-size:10px}
@media(max-width:1170px){.play-layout{grid-template-columns:minmax(0,1fr) minmax(400px,.9fr)}.scene-panel #scene-wrap{height:clamp(280px,31vw,365px)}}
@media(max-width:920px){.play-layout{grid-template-columns:1fr}.operation-panel{max-height:none}.scene-panel{position:relative;top:auto}.scene-panel #scene-wrap{height:clamp(245px,43vw,365px)}}
@media(max-width:580px){.scene-panel #scene-wrap{height:clamp(230px,56vw,290px)}.action-card .button-grid{grid-template-columns:1fr}}

/* v1.7 informational pages and policy links: keep away from gameplay controls */
.legal-footer{margin:26px 4px 14px;padding:16px 2px;border-top:1px solid #d8e8ed;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:#637d8d}
.legal-footer nav{display:flex;flex-wrap:wrap;gap:18px}
.legal-footer a{color:#216d8d;text-decoration:none}
.legal-footer a:hover{text-decoration:underline}
.legal-article{max-width:860px;margin:28px auto;padding:28px;background:#fff;border:1px solid #d5e4eb;border-radius:18px;color:#25485d;box-shadow:0 8px 26px rgba(35,79,97,.09);line-height:1.75}
.legal-article h1{font-size:28px;color:#163c52}
.legal-article h2{font-size:20px;color:#194b64;margin-top:24px}
.legal-article a{color:#1e759d}


/* v1.8: MOBILE ALWAYS-VISIBLE 3D SCENE
   The mobile 1-column grid previously limited sticky to the scene row; v1.4
   also overwrote .scene-panel with position:relative, disabling sticky entirely.
   Use normal block-flow: its containing block now spans the complete operation
   panel, so sticky lasts while users scroll through actions and case details. */
@media (max-width: 920px) {
  .play-layout {display:block;}
  .play-layout > .scene-panel {
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:12;
    margin-bottom:12px;
    box-shadow:0 9px 26px rgba(22,72,93,.19);
    isolation:isolate;
  }
  .play-layout > .operation-panel {
    max-height:none;
    overflow:visible;
    margin-top:0;
    padding:0;
  }
  .play-layout .action-card {position:relative;top:auto;}
  .scene-panel #scene-wrap {height:clamp(180px,31dvh,275px);}
  .scene-panel .hint {font-size:12px;padding:6px 9px;margin-top:6px;}
  .scene-panel .scene-footnote {display:none;}
  .scene-panel .scene-topbar {gap:5px;margin-bottom:6px;}
  .scene-panel .pill {padding:5px 8px;font-size:10px;}
  .scene-topbar #btn-camera {padding:6px 9px;font-size:11px;}
  .play-layout .scene-panel, .play-layout .operation-panel {min-width:0;}
}
@media (max-width:580px) {
  .scene-panel #scene-wrap {height:clamp(155px,28dvh,212px);}
  .scene-panel {padding:7px;}
  .scene-panel .hint {display:none;}
  .scene-panel .scene-topbar {flex-wrap:nowrap;}
  .scene-panel .scene-topbar #scene-title {display:none;}
  .scene-panel .pill.accent {
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    flex:1;min-width:0;
  }
  .scene-panel .scene-topbar #btn-camera {flex:none;order:2;}
  .play-layout .action-card .action-btn {min-height:48px;}
}
@media(max-width:580px) and (max-height:590px) {
  .scene-panel #scene-wrap {height:132px;}
}
@media(prefers-reduced-motion:reduce) {
  .play-layout .scene-panel {scroll-behavior:auto;}
}
.legal-article .legal-note {border-left:4px solid #1b84a0;padding:10px 14px;background:#eff8fb;border-radius:6px;margin:16px 0;color:#28546a}
.legal-article ul,.legal-article ol {padding-left:25px}
.legal-article footer {margin-top:24px;padding-top:13px;border-top:1px solid #dbe9ef;font-size:13px}
.legal-article footer a {margin-right:14px}
@media(max-width:580px){.legal-article{margin:10px;padding:18px;border-radius:14px}.legal-article h1{font-size:24px}.legal-article h2{font-size:18px}}

/* v1.9 — interactive educational microscopy, separate from answer buttons */
.micro-visual-tray{margin:8px 0 12px;}
.micrograph-frame{margin:0;border:1px solid #b9d3e0;border-radius:14px;overflow:hidden;background:#f1f8fb;}
.micrograph-label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;color:#164a62;font-size:12px;font-weight:850;letter-spacing:.05em}
.micrograph-label span{font-weight:650;font-size:11px;color:#4a788b}
.micrograph-zoom{display:block;width:100%;padding:0;border:0;background:#f5e2ed;cursor:zoom-in;}
.micrograph-zoom img{display:block;width:100%;max-height:280px;object-fit:cover;object-position:center;aspect-ratio:16 / 10;}
.micrograph-zoom:focus-visible{outline:3px solid #1386bd;outline-offset:-3px}
.micrograph-frame figcaption{font-size:11px;color:#567688;padding:7px 10px;line-height:1.35;background:#fff}
.micro-recognized{margin:0;padding:7px 11px;background:#e5f6ec;color:#177448;font-size:12px;font-weight:700}
.micro-learning{margin-top:10px;padding:10px 11px;border:1px solid #bfdcca;background:#eefbf2;border-radius:11px;font-size:12px;color:#265f43}
.micro-lightbox{position:fixed;z-index:90;inset:0;background:rgba(9,24,36,.91);display:flex;align-items:center;justify-content:center;padding:14px}
.micro-lightbox-content{max-width:min(1100px,95vw);max-height:94dvh;overflow:auto;text-align:right;background:#fff;border-radius:17px;padding:10px}
.micro-lightbox-content img{display:block;max-width:100%;max-height:75dvh;width:auto;height:auto;border-radius:9px}
.micro-lightbox-content .tiny-btn{margin-bottom:8px}
.micro-lightbox-content p{text-align:left;color:#47677a;font-size:12px;padding:0 8px}
.ads-outside-placeholder{max-width:820px;margin:175px auto 24px;padding:14px;text-align:center;border:1px dashed #cfdee4;border-radius:10px;color:#66808c;background:#f4f9fa;display:flex;flex-direction:column;gap:3px}
.ads-outside-placeholder span{font-weight:750;font-size:12px}
.ads-outside-placeholder small{font-size:11px;}
@media(max-width:920px){.micrograph-zoom img{max-height:235px}.ads-outside-placeholder{display:none}}
@media(max-width:580px){.micrograph-zoom img{max-height:220px;aspect-ratio:16 / 11}}

/* v2.0: microbiology pacing selector on the level screen */
.level-options{width:min(100%,470px);display:flex;flex-direction:column;gap:6px;align-items:stretch}
.pace-label{color:#225d74;font-weight:800;font-size:13px}
.pace-select{width:100%;max-width:100%;font:inherit;font-weight:700;font-size:13px;color:#164b61;border:1px solid #b8d7e3;border-radius:11px;padding:10px 12px;background:#eff9fc;cursor:pointer}
.pace-select:focus-visible{outline:3px solid #53a4bb;outline-offset:2px}
.level-options .mini-help{font-size:12px;line-height:1.5;max-width:none}
@media(max-width:780px){.section-head{flex-direction:column;align-items:stretch}.level-options{width:100%}}