/* Career-specific immersive activity presentations --------------------- */

.immersive-game-shell {
  --imm-a: var(--beta-accent, #4767a8);
  --imm-b: var(--beta-accent-dark, #25365f);
  --imm-soft: var(--beta-soft, #eaf0ff);
  --imm-good: var(--beta-support, #147c73);
  --imm-good-dark: var(--beta-support-dark, #075d56);
}

.immersive-activity {
  position: relative;
  margin-block: 1rem;
  padding: clamp(0.8rem, 2.2vw, 1.15rem);
  overflow: hidden;
  color: var(--beta-ink, #35162d);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--imm-a) 14%, transparent), transparent 12rem),
    rgba(255, 255, 255, 0.92);
  border: 2px solid color-mix(in srgb, var(--imm-a) 28%, white);
  border-radius: 20px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--imm-b) 10%, transparent);
}

.immersive-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.immersive-heading small {
  color: var(--imm-a);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.immersive-heading h3 {
  margin: 0.12rem 0 0;
  color: var(--imm-b);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  line-height: 1.1;
}

.immersive-heading > span {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0.35rem 0.65rem;
  color: var(--imm-b);
  background: var(--imm-soft);
  border: 2px solid color-mix(in srgb, var(--imm-a) 35%, white);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 950;
}

.immersive-activity button {
  min-width: 48px;
  min-height: 48px;
  padding: 0.55rem 0.7rem;
  color: var(--imm-b);
  background: white;
  border: 2px solid var(--imm-a);
  border-radius: 12px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--imm-b) 26%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--font-rounded, ui-rounded, system-ui, sans-serif);
  font-weight: 850;
  line-height: 1.18;
}

.immersive-activity button:not(:disabled):hover {
  color: white;
  background: var(--imm-a);
  transform: translateY(-1px);
}

.immersive-activity button:not(:disabled):active {
  box-shadow: none;
  transform: translateY(2px);
}

.immersive-activity button:is(.is-selected, [aria-pressed="true"]) {
  color: white;
  background: var(--imm-good-dark);
  border-color: var(--imm-good-dark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--imm-good) 23%, transparent);
}

.immersive-activity button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.immersive-activity button:focus-visible {
  outline: 4px solid var(--beta-sun, #f0bd4b);
  outline-offset: 3px;
}

.immersive-control-bank {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.8rem;
}

.immersive-control {
  min-width: 0;
  margin: 0;
  padding: 0.65rem;
  color: var(--imm-b);
  background: var(--imm-soft);
  border: 2px solid color-mix(in srgb, var(--imm-a) 28%, white);
  border-radius: 14px;
}

.immersive-control legend {
  padding-inline: 0.3rem;
  font-weight: 950;
}

.immersive-control > div {
  display: grid;
  gap: 0.4rem;
}

.immersive-setting {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0.4rem 0.5rem !important;
  box-shadow: none !important;
}

/* AI engineer: model validation lab ------------------------------------ */

.immersive-model-lab {
  --imm-a: #6b54a6;
  --imm-b: #33245e;
  --imm-soft: #f0ebff;
}

.model-lab-layout {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(220px, 1.1fr) minmax(190px, 0.9fr);
}

.model-camera {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  overflow: hidden;
  color: #eafaff;
  background:
    linear-gradient(rgba(92, 213, 229, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 213, 229, 0.12) 1px, transparent 1px),
    radial-gradient(circle, #263d63, #111a32);
  background-size: 20px 20px, 20px 20px, auto;
  border: 5px solid #788cac;
  border-radius: 16px;
  box-shadow: inset 0 0 28px rgba(83, 225, 240, 0.14);
}

.model-camera > span {
  font-size: 4rem;
  filter: drop-shadow(0 0 12px rgba(92, 225, 230, 0.45));
}

.model-camera > strong {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.model-scan-line {
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background: #78f4ef;
  box-shadow: 0 0 12px #78f4ef;
  animation: immersive-scan 2.6s ease-in-out infinite alternate;
}

.model-confidence {
  display: grid;
  width: min(82%, 270px);
  gap: 0.25rem;
}

.model-confidence::before {
  height: 10px;
  content: "";
  background: linear-gradient(90deg, #5fe0d2 0 78%, rgba(255,255,255,.18) 78%);
  border: 1px solid #c5ffff;
  border-radius: 999px;
}

.model-confidence b {
  font-size: 0.72rem;
  text-align: center;
}

.model-dashboard {
  display: grid;
  align-content: center;
  gap: 0.48rem;
  padding: 0.8rem;
  color: #223257;
  background: #effcff;
  border: 3px solid #536c99;
  border-radius: 16px;
}

.model-dashboard > div {
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: white;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 850;
}

.model-dashboard i {
  width: 18px;
  height: 18px;
  background: #bc5668;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #843745;
}

.model-dashboard i.is-on {
  background: #35b68e;
  box-shadow: 0 0 0 2px #147c68, 0 0 10px #35b68e;
}

.model-test-bench {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.model-test-switch {
  display: grid;
  min-width: 0;
  min-height: 84px !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15rem 0.55rem;
  text-align: left;
}

.model-test-switch > span {
  grid-row: 1 / -1;
  font-size: 1.45rem;
}

/* Electrical engineer: live circuit ----------------------------------- */

.immersive-circuit-board {
  --imm-a: #d49022;
  --imm-b: #60400c;
  --imm-soft: #fff5cf;
}

.circuit-workbench {
  position: relative;
  display: grid;
  min-height: 230px;
  grid-template-columns: repeat(7, minmax(38px, 1fr));
  align-items: center;
  gap: 0.25rem;
  padding: clamp(0.75rem, 3vw, 1.2rem);
  color: #edfaff;
  background:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.09) 2px, transparent 3px),
    #173d48;
  background-size: 22px 22px;
  border: 5px solid #315f68;
  border-radius: 18px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.24);
}

.circuit-node {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 105px;
  place-items: center;
  align-content: center;
  gap: 0.18rem;
  padding: 0.45rem;
  color: #173d48;
  background: #f4fbff;
  border: 3px solid #d7ecf0;
  border-radius: 13px;
  text-align: center;
}

.circuit-node > span {
  font-size: 1.6rem;
}

.circuit-node small,
.circuit-node strong {
  font-size: 0.68rem;
}

.circuit-wire {
  position: relative;
  z-index: 1;
  display: block;
  height: 10px;
  background: #768a8f;
  border: 3px solid #c0d3d5;
  border-radius: 999px;
}

.immersive-circuit-board[data-ready="3"] .circuit-wire {
  background: repeating-linear-gradient(90deg, #ffe76e 0 10px, #f4a72a 10px 18px);
  box-shadow: 0 0 12px rgba(255, 223, 79, 0.75);
  animation: immersive-current 0.8s linear infinite;
}

.circuit-lamp {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 116px;
  place-items: center;
  align-content: center;
  gap: 0.2rem;
  color: #173d48;
  background: #d6e1e2;
  border: 4px solid white;
  border-radius: 50% 50% 14px 14px;
  text-align: center;
}

.circuit-lamp > span {
  font-size: 2.5rem;
  filter: grayscale(1);
}

.circuit-lamp.is-lit {
  background: #fff5a7;
  box-shadow: 0 0 34px rgba(255, 230, 91, 0.85);
}

.circuit-lamp.is-lit > span {
  filter: none;
}

/* Mechanical engineer: mechanism rig ---------------------------------- */

.immersive-mechanism-rig {
  --imm-a: #557285;
  --imm-b: #263d4d;
  --imm-soft: #e8f0f3;
}

.mechanism-machine {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.8rem;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    #334b59;
  background-size: 18px 18px;
  border: 5px solid #708692;
  border-radius: 17px;
}

.mechanism-bay {
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  padding: 0.65rem;
  color: #243c4b;
  background: #e4ecef;
  border: 3px solid #a8bcc4;
  border-radius: 12px;
  text-align: center;
}

.mechanism-motion {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  background: white;
  border: 4px solid #607b89;
  border-radius: 50%;
  font-size: 2rem;
}

.mechanism-bay.is-running {
  color: #075d56;
  background: #e2fff7;
  border-color: #3c9a8c;
}

.mechanism-bay.is-running .mechanism-motion {
  animation: immersive-gear 2.2s linear infinite;
}

.mechanism-bay small,
.mechanism-bay strong {
  font-size: 0.75rem;
}

.mechanism-parts,
.brain-link-board {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.mechanism-parts > div,
.brain-link-board > div {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.mechanism-parts h4,
.brain-link-board h4 {
  margin: 0;
  color: var(--imm-b);
  font-size: 0.85rem;
}

.mechanism-job,
.mechanism-part,
.brain-task,
.brain-measure {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15rem 0.55rem;
  text-align: left;
}

.mechanism-job > span,
.mechanism-part > span,
.brain-task > span,
.brain-measure > span {
  grid-row: 1 / -1;
  font-size: 1.35rem;
}

/* Chemical engineer: process vessel ----------------------------------- */

.immersive-reactor-console {
  --imm-a: #177d83;
  --imm-b: #0a4b52;
  --imm-soft: #e1f7f5;
}

.reactor-scene {
  display: grid;
  min-height: 250px;
  grid-template-columns: minmax(100px, 0.6fr) minmax(190px, 1.25fr) minmax(130px, 0.7fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem;
  overflow: hidden;
  color: #133c43;
  background:
    linear-gradient(rgba(20, 95, 101, 0.08) 1px, transparent 1px),
    #e9fbfd;
  background-size: 18px 18px;
  border: 4px solid #4f8b92;
  border-radius: 18px;
}

.reactor-feed {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.2rem;
  text-align: center;
}

.reactor-feed > span {
  font-size: 2rem;
}

.reactor-feed > i {
  width: 12px;
  height: 12px;
  background: #47bde0;
  border-radius: 50% 50% 55% 45%;
  transform: rotate(45deg);
  animation: immersive-drop 1.2s ease-in infinite;
}

.immersive-reactor-console[data-flow="slow"] .reactor-feed > i { animation-duration: 1.9s; }
.immersive-reactor-console[data-flow="fast"] .reactor-feed > i { animation-duration: 0.55s; }
.reactor-feed > i:nth-of-type(2) { animation-delay: -0.35s; }
.reactor-feed > i:nth-of-type(3) { animation-delay: -0.7s; }

.reactor-vessel {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: end;
  overflow: hidden;
  background: linear-gradient(90deg, #dfe8eb, #fff, #bccdd2);
  border: 6px solid #52737b;
  border-radius: 30px 30px 70px 70px;
  box-shadow: inset 0 0 24px rgba(22, 75, 83, 0.18);
}

.reactor-vessel > strong {
  position: relative;
  z-index: 3;
  margin-bottom: 0.65rem;
  color: #173f45;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.reactor-liquid {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 57%;
  overflow: hidden;
  background: #9adbd0;
}

.immersive-reactor-console[data-heat="high"] .reactor-liquid { background: #ef9b83; }
.immersive-reactor-console[data-heat="cool"] .reactor-liquid { background: #91c9e7; }
.immersive-reactor-console[data-ready="3"] .reactor-liquid { background: #9be7c4; }

.reactor-liquid i {
  position: absolute;
  width: 17px;
  height: 17px;
  background: rgba(255,255,255,.62);
  border-radius: 50%;
  animation: immersive-bubble 2.2s ease-in infinite;
}

.reactor-liquid i:nth-child(1) { left: 24%; bottom: 12%; }
.reactor-liquid i:nth-child(2) { left: 51%; bottom: 2%; animation-delay: -.8s; }
.reactor-liquid i:nth-child(3) { left: 76%; bottom: 18%; animation-delay: -1.4s; }

.reactor-paddle {
  position: absolute;
  z-index: 2;
  top: 24%;
  font-size: 3rem;
  animation: immersive-gear 4s linear infinite;
}

.immersive-reactor-console[data-mix="medium"] .reactor-paddle { animation-duration: 2.3s; }
.immersive-reactor-console[data-mix="high"] .reactor-paddle { animation-duration: .75s; }

.reactor-gauges {
  display: grid;
  gap: 0.65rem;
}

.reactor-gauges > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem;
  background: white;
  border: 2px solid #6c969c;
  border-radius: 12px;
  font-size: 0.75rem;
}

.reactor-gauges meter {
  width: 100%;
}

/* Ultrasound technician: scanner -------------------------------------- */

.immersive-ultrasound-scan {
  --imm-a: #4c668d;
  --imm-b: #263955;
  --imm-soft: #e8eff9;
}

.ultrasound-console {
  display: grid;
  grid-template-columns: 85px minmax(220px, 1fr) minmax(145px, 0.55fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  color: #eef8ff;
  background: #202d43;
  border: 6px solid #7889a2;
  border-radius: 18px;
}

.ultrasound-probe {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
}

.ultrasound-probe span {
  display: grid;
  width: 48px;
  height: 68px;
  place-items: center;
  background: linear-gradient(#eef3f8, #8b9eb3);
  border: 3px solid #4e6176;
  border-radius: 24px 24px 10px 10px;
  transform: rotate(16deg);
}

.ultrasound-probe i {
  width: 50px;
  height: 42px;
  border-right: 4px solid #a5b9c8;
  border-bottom: 4px solid #a5b9c8;
  border-radius: 0 0 28px 0;
}

.ultrasound-screen {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.1), transparent 23%),
    #05080d;
  border: 5px solid #95a8b8;
  border-radius: 12px;
}

.ultrasound-screen::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.38;
  background-image:
    radial-gradient(circle, white 0 1px, transparent 1.4px),
    radial-gradient(circle, #a4d8ff 0 1px, transparent 1.5px);
  background-position: 0 0, 7px 11px;
  background-size: 13px 15px, 17px 19px;
}

.immersive-ultrasound-scan[data-gain="low"] .ultrasound-screen::before { opacity: .14; }
.immersive-ultrasound-scan[data-gain="high"] .ultrasound-screen::before { opacity: .78; }

.ultrasound-target {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  color: white;
  text-shadow: 0 0 15px white;
  font-size: 3.5rem;
  transform: translate(-50%, -50%);
}

.immersive-ultrasound-scan[data-depth="shallow"] .ultrasound-target { top: 27%; }
.immersive-ultrasound-scan[data-depth="deep"] .ultrasound-target { top: 74%; }

.ultrasound-focus-line {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 8%;
  left: 8%;
  border-top: 2px dashed #60dcff;
}

.immersive-ultrasound-scan[data-focus="top"] .ultrasound-focus-line { top: 27%; }
.immersive-ultrasound-scan[data-focus="bottom"] .ultrasound-focus-line { top: 74%; }

.ultrasound-screen small {
  position: absolute;
  z-index: 4;
  top: 0.45rem;
  left: 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.ultrasound-readout {
  display: grid;
  gap: 0.5rem;
}

.ultrasound-readout span {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem;
  background: #31425b;
  border: 1px solid #7186a4;
  border-radius: 9px;
  font-size: 0.72rem;
}

/* Dermatologist: observation chart ------------------------------------ */

.immersive-skin-chart {
  --imm-a: #b43d72;
  --imm-b: #652247;
  --imm-soft: #ffebf3;
}

.skin-chart-layout {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(210px, 0.75fr) minmax(0, 1.25fr);
}

.skin-map {
  position: relative;
  display: grid;
  min-height: 310px;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  overflow: hidden;
  color: #62254a;
  background:
    linear-gradient(rgba(180,61,114,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,61,114,.08) 1px, transparent 1px),
    #fff9fb;
  background-size: 18px 18px;
  border: 4px solid #d7a7bb;
  border-radius: 16px;
}

.skin-figure {
  position: relative;
  display: grid;
  width: 120px;
  height: 205px;
  place-items: start center;
  font-size: 3.4rem;
}

.skin-figure i,
.skin-figure b {
  position: absolute;
  top: 52px;
  width: 58px;
  height: 102px;
  content: "";
  background: #f1c9b4;
  border: 4px solid #9f6278;
  border-radius: 26px 26px 16px 16px;
}

.skin-figure b {
  top: 145px;
  width: 82px;
  height: 48px;
  background: linear-gradient(90deg, transparent 44%, #9f6278 44% 55%, transparent 55%);
  border: 0;
}

.skin-observation-dot {
  position: absolute;
  top: 46%;
  left: 43%;
  width: 15px;
  height: 15px;
  background: #8f4161;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #8f4161, 0 0 0 9px rgba(180,61,114,.14);
}

.skin-map > strong,
.skin-map > small {
  position: relative;
  z-index: 3;
  text-align: center;
}

.skin-map > strong {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.skin-map > small {
  max-width: 180px;
}

.skin-clipboard {
  display: grid;
  gap: 0.55rem;
}

.skin-chart-action {
  display: grid;
  min-width: 0;
  min-height: 66px !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}

.skin-chart-action > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: white;
  background: var(--imm-b);
  border-radius: 50%;
}

.skin-chart-action small {
  display: block;
  margin-top: 0.12rem;
}

.skin-chart-action.is-warning:not(.is-selected) {
  border-style: dashed;
}

/* Neuroscientist: measurement lab ------------------------------------- */

.immersive-brain-lab {
  --imm-a: #7151a0;
  --imm-b: #3c2a61;
  --imm-soft: #f0eafb;
}

.brain-lab-scene {
  display: grid;
  min-height: 245px;
  grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem;
  color: #e8f6ff;
  background:
    linear-gradient(rgba(113,81,160,.12) 1px, transparent 1px),
    #202c48;
  background-size: 20px 20px;
  border: 5px solid #647696;
  border-radius: 18px;
}

.brain-visual {
  position: relative;
  display: grid;
  min-height: 190px;
  place-items: center;
}

.brain-visual > span {
  position: relative;
  z-index: 2;
  font-size: 5.2rem;
  filter: drop-shadow(0 0 18px rgba(185,126,255,.65));
}

.brain-visual i {
  position: absolute;
  width: 76%;
  height: 40%;
  border: 2px solid #65dbea;
  border-radius: 50%;
  animation: immersive-pulse 2.5s ease-in-out infinite;
}

.brain-visual i:nth-of-type(2) { width: 55%; height: 70%; animation-delay: -.7s; }
.brain-visual i:nth-of-type(3) { width: 38%; height: 92%; animation-delay: -1.4s; }

.brain-monitors {
  display: grid;
  gap: 0.5rem;
}

.brain-monitors article {
  position: relative;
  display: grid;
  min-height: 60px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.1rem 0.55rem;
  padding: 0.5rem;
  overflow: hidden;
  color: #263955;
  background: #eef8ff;
  border: 2px solid #748dab;
  border-radius: 10px;
}

.brain-monitors article > span {
  grid-row: 1 / -1;
  font-size: 1.35rem;
}

.brain-monitors article > i {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 45%;
  height: 12px;
  opacity: .28;
  background: repeating-linear-gradient(90deg, #6a55a4 0 3px, transparent 3px 8px);
}

.brain-monitors article.is-linked {
  border-color: #2aa894;
  box-shadow: inset 5px 0 #2aa894;
}

.brain-monitors article.is-linked > i {
  opacity: .8;
  animation: immersive-signal 1.4s linear infinite;
}

/* Microbiologist: clean bench ----------------------------------------- */

.immersive-sterile-bench {
  --imm-a: #21877c;
  --imm-b: #0a554f;
  --imm-soft: #e4f8f3;
}

.sterile-bench-scene {
  position: relative;
  display: grid;
  min-height: 265px;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.7fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(31,135,124,.08) 1px, transparent 1px),
    #effcff;
  background-size: 18px 18px;
  border: 5px solid #71a6a5;
  border-radius: 18px;
}

.bench-shield {
  position: absolute;
  top: 16px;
  right: 8%;
  left: 8%;
  height: 42%;
  opacity: .62;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(150,222,231,.23));
  border: 3px solid #85bcc4;
  border-radius: 12px;
}

.sealed-dish {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 240px);
  aspect-ratio: 1.5;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  color: #0a554f;
  background: rgba(216,255,244,.76);
  border: 8px double #4a9d90;
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba(32,135,124,.23);
}

.sealed-dish i {
  position: absolute;
  width: 13px;
  height: 13px;
  background: #a261aa;
  border-radius: 46% 54% 61% 39%;
}

.sealed-dish i:nth-child(1) { top: 31%; left: 28%; }
.sealed-dish i:nth-child(2) { right: 32%; bottom: 29%; transform: scale(1.4); }
.sealed-dish i:nth-child(3) { top: 54%; left: 47%; transform: scale(.7); }

.sealed-dish strong {
  position: absolute;
  right: 12px;
  bottom: 8px;
  padding: 0.2rem 0.35rem;
  background: white;
  border-radius: 5px;
  font-size: 0.62rem;
  letter-spacing: .08em;
}

.bench-status {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.5rem;
}

.bench-status span {
  padding: 0.55rem;
  color: #6f3443;
  background: #fff0f2;
  border: 2px solid #d4a2aa;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

.bench-status span.is-on {
  color: #075d56;
  background: #ddfff7;
  border-color: #38a894;
}

.sterile-bench-scene.has-contamination {
  box-shadow: inset 0 0 0 7px rgba(177, 57, 74, 0.34);
}

.sterile-tool-tray {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.sterile-tool {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15rem 0.55rem;
  text-align: left;
}

.sterile-tool > span {
  grid-row: 1 / -1;
  font-size: 1.4rem;
}

.sterile-tool.is-danger:not(.is-selected) {
  color: #73313d;
  border-color: #b94b5b;
  border-style: dashed;
}

/* Network and robotics: route simulators ------------------------------- */

.immersive-packet-network {
  --imm-a: #5369a7;
  --imm-b: #283a69;
  --imm-soft: #e8edff;
}

.immersive-robot-cell {
  --imm-a: #277589;
  --imm-b: #164857;
  --imm-soft: #e2f4f7;
}

.immersive-route-layout {
  display: grid;
  align-items: start;
  gap: 0.75rem;
  grid-template-columns: minmax(250px, 1fr) minmax(180px, 0.48fr);
}

.immersive-route-grid {
  display: grid;
  width: min(100%, 520px);
  justify-self: center;
  gap: 0.38rem;
  grid-template-columns: repeat(var(--immersive-grid), minmax(48px, 1fr));
  padding: 0.7rem;
  background:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25% 75%, rgba(255,255,255,.08) 75%),
    var(--imm-b);
  background-size: 30px 30px;
  border: 5px solid color-mix(in srgb, var(--imm-a) 50%, white);
  border-radius: 18px;
}

.immersive-route-cell {
  position: relative;
  display: grid;
  min-width: 48px;
  min-height: 66px;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  color: var(--imm-b);
  background: #f7fbff;
  border: 3px solid transparent;
  border-radius: 12px;
}

.immersive-route-cell::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -0.55rem;
  width: 0.55rem;
  height: 4px;
  content: "";
  background: color-mix(in srgb, var(--imm-a) 50%, white);
}

.immersive-route-cell:nth-child(4n)::after {
  display: none;
}

.immersive-route-cell small {
  font-size: 0.65rem;
  font-weight: 900;
}

.immersive-route-cell strong {
  font-size: 1.35rem;
}

.immersive-route-cell.is-goal {
  border-color: var(--beta-sun, #f0bd4b);
}

.immersive-route-cell.is-obstacle {
  color: white;
  background: #773c49;
  border-color: white;
}

.immersive-route-cell.is-visited {
  color: white;
  background: var(--imm-good-dark);
}

.immersive-route-cell.is-current {
  z-index: 2;
  color: white;
  background: var(--imm-a);
  border-color: white;
  box-shadow: 0 0 0 4px var(--beta-sun, #f0bd4b);
  animation: immersive-pulse 1.3s ease-in-out infinite;
}

.immersive-route-console {
  display: grid;
  gap: 0.65rem;
}

.immersive-route-console ol {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.immersive-route-console li {
  display: grid;
  min-height: 52px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem;
  color: var(--imm-b);
  background: var(--imm-soft);
  border: 2px solid color-mix(in srgb, var(--imm-a) 25%, white);
  border-radius: 10px;
}

.immersive-route-console li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: white;
  background: var(--imm-b);
  border-radius: 50%;
  font-weight: 900;
}

.immersive-route-console li.is-complete {
  background: #e1fff7;
  border-color: var(--imm-good);
}

.immersive-dpad {
  display: grid;
  width: min(100%, 210px);
  justify-self: center;
  gap: 0.35rem;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: repeat(3, minmax(52px, 1fr));
}

.immersive-dpad button {
  padding: 0.3rem;
  font-size: 1.35rem;
}

.immersive-dpad button[data-direction="up"] { grid-area: up; }
.immersive-dpad button[data-direction="left"] { grid-area: left; }
.immersive-dpad button[data-direction="right"] { grid-area: right; }
.immersive-dpad button[data-direction="down"] { grid-area: down; }

.immersive-route-console p {
  margin: 0;
  color: var(--imm-b);
  font-size: 0.76rem;
  text-align: center;
}

/* Game developer and firefighter: staged simulations ------------------ */

.immersive-playtest-maze {
  --imm-a: #bd3f83;
  --imm-b: #64234e;
  --imm-soft: #ffebf6;
}

.immersive-fire-scene {
  --imm-a: #b94c3d;
  --imm-b: #6a2824;
  --imm-soft: #fff0e8;
}

.playtest-preview,
.fire-exterior-scene {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 5px solid var(--imm-b);
  border-radius: 18px;
}

.playtest-preview {
  display: grid;
  place-items: center;
  color: white;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    #27264d;
  background-size: 34px 34px;
}

.maze-grid {
  position: absolute;
  inset: 24px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, 1fr);
}

.maze-grid i {
  border: 5px solid #817aae;
  border-top-color: transparent;
  border-radius: 4px;
}

.playtest-preview[data-stage-count="0"] .maze-grid {
  opacity: .16;
}

.maze-player,
.maze-goal,
.maze-bug {
  position: absolute;
  z-index: 2;
  font-size: 2rem;
}

.maze-player { bottom: 18%; left: 18%; }
.maze-goal { top: 17%; right: 17%; }
.maze-bug { top: 42%; left: 49%; transition: transform .3s, opacity .3s; }
.maze-bug.is-fixed { opacity: 0; transform: scale(.1) rotate(180deg); }

.playtest-preview > strong,
.fire-exterior-scene > strong {
  position: absolute;
  z-index: 3;
  top: 0.55rem;
  left: 0.7rem;
  padding: 0.25rem 0.4rem;
  color: white;
  background: rgba(0,0,0,.55);
  border-radius: 5px;
  font-size: 0.65rem;
  letter-spacing: .1em;
}

.fire-exterior-scene {
  background: linear-gradient(#bce9fb 0 64%, #b1d8a8 64%);
}

.fire-house {
  position: absolute;
  right: 13%;
  bottom: 17%;
  font-size: 7rem;
}

.fire-house i {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 45px;
  height: 70px;
  opacity: .7;
  background: radial-gradient(ellipse, #728693 0 35%, transparent 38%);
  animation: immersive-smoke 2.4s ease-in-out infinite alternate;
}

.fire-truck {
  position: absolute;
  bottom: 15%;
  left: 9%;
  font-size: 4.2rem;
  transition: transform .35s;
}

.fire-exterior-scene[data-stage-count="0"] .fire-truck {
  transform: translateX(-140%);
}

.fire-radio {
  position: absolute;
  top: 22%;
  left: 24%;
  padding: .35rem;
  opacity: .34;
  background: white;
  border-radius: 50%;
  font-size: 2rem;
}

.fire-radio.is-ready {
  opacity: 1;
  box-shadow: 0 0 0 7px rgba(255,255,255,.4);
}

.fire-stage-zone {
  position: absolute;
  bottom: 8%;
  left: 7%;
  padding: .35rem .55rem;
  opacity: .38;
  color: #6a2824;
  background: #fff7a1;
  border: 3px dashed #b94c3d;
  border-radius: 8px;
  font-size: .65rem;
  font-weight: 950;
}

.fire-stage-zone.is-ready {
  opacity: 1;
}

.immersive-sequence-track {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.immersive-sequence-track li {
  display: grid;
  min-height: 105px;
  place-items: center;
  align-content: center;
  gap: .35rem;
  padding: .55rem;
  color: var(--imm-b);
  background: var(--imm-soft);
  border: 2px dashed color-mix(in srgb, var(--imm-a) 42%, white);
  border-radius: 12px;
  text-align: center;
}

.immersive-sequence-track li.is-filled {
  background: color-mix(in srgb, var(--imm-good) 12%, white);
  border-color: var(--imm-good);
  border-style: solid;
}

.immersive-sequence-track li > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: white;
  background: var(--imm-b);
  border-radius: 50%;
  font-weight: 900;
}

.immersive-sequence-track li button {
  min-height: 48px !important;
  padding: .2rem .45rem;
  box-shadow: none;
}

.immersive-token-tray {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  margin-top: .65rem;
}

.immersive-token-tray button {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  text-align: left;
}

.immersive-token-tray button > span {
  font-size: 1.35rem;
}

.immersive-token-tray p {
  grid-column: 1 / -1;
  margin: 0;
  padding: .65rem;
  background: var(--imm-soft);
  border-radius: 10px;
  text-align: center;
}

/* Music producer: mix desk -------------------------------------------- */

.immersive-mix-console {
  --imm-a: #bd3c7f;
  --imm-b: #64214a;
  --imm-soft: #ffebf5;
}

.mix-studio {
  padding: .8rem;
  color: white;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    #26243b;
  background-size: 17px 17px;
  border: 6px solid #57516c;
  border-radius: 18px;
}

.mix-speakers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.mix-speakers span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  background: #161421;
  border: 5px solid #6e687e;
  border-radius: 12px;
  font-size: 2rem;
}

.mix-speakers i {
  height: 5px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #e660a4, transparent);
  box-shadow: 0 0 12px #e660a4;
}

.mix-waveform {
  display: flex;
  height: 74px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-block: .55rem;
  padding: .45rem;
  background: #111520;
  border: 2px solid #626b83;
  border-radius: 9px;
}

.mix-waveform i {
  width: 5px;
  height: var(--bar);
  background: linear-gradient(#55e0d4, #c23e83);
  border-radius: 999px;
  animation: immersive-meter 1s ease-in-out infinite alternate;
}

.mix-waveform i:nth-child(3n) { animation-delay: -.35s; }
.mix-waveform i:nth-child(4n) { animation-delay: -.72s; }

.mix-channels {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mix-channel {
  min-width: 0;
  margin: 0;
  padding: .6rem;
  color: #28243b;
  background: #e8e9ef;
  border: 3px solid #777487;
  border-radius: 12px;
}

.mix-channel legend {
  padding-inline: .3rem;
  color: white;
  font-weight: 900;
}

.mix-meter {
  position: relative;
  width: 18px;
  height: 92px;
  margin: 0 auto .35rem;
  overflow: hidden;
  background: #242231;
  border: 2px solid #57536b;
  border-radius: 999px;
}

.mix-meter i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--level);
  background: linear-gradient(#f35d6b 0 18%, #e6bd4f 18% 40%, #4ccf9d 40%);
  transition: height .25s;
}

.mix-channel > strong {
  display: block;
  margin-bottom: .4rem;
  font-size: .72rem;
  text-align: center;
}

.mix-channel > div:last-child {
  display: grid;
  gap: .35rem;
}

.mix-choice {
  min-height: 48px !important;
  padding: .32rem !important;
  font-size: .72rem;
}

/* Veterinarian: exam room and chart drawers --------------------------- */

.immersive-vet-exam {
  --imm-a: #b43d72;
  --imm-b: #662348;
  --imm-soft: #ffebf3;
}

.vet-exam-room {
  display: grid;
  min-height: 260px;
  grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: .75rem;
  padding: .8rem;
  background:
    linear-gradient(rgba(180,61,114,.07) 1px, transparent 1px),
    #f7fcff;
  background-size: 20px 20px;
  border: 4px solid #91aabb;
  border-radius: 18px;
}

.vet-patient {
  display: grid;
  min-height: 200px;
  place-items: center;
  align-content: center;
  gap: .2rem;
  color: #55314a;
  background: linear-gradient(#dff4f6 0 69%, #b8d9d4 69%);
  border: 4px solid white;
  border-radius: 20px;
  box-shadow: 0 5px 0 rgba(66, 102, 108, .14);
}

.vet-patient > span {
  font-size: 5.2rem;
}

.vet-patient > strong {
  font-size: .72rem;
  letter-spacing: .1em;
}

.vet-chart-drawers {
  display: grid;
  gap: .55rem;
}

.vet-chart-drawer {
  display: grid;
  min-width: 0;
  min-height: 64px !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: .1rem .55rem;
  text-align: left;
}

.vet-chart-drawer > span {
  grid-row: 1 / -1;
  font-size: 1.4rem;
}

.vet-chart-drawer.is-filled {
  color: var(--imm-good-dark);
  background: #e3fff8;
  border-color: var(--imm-good);
}

.vet-note-tray {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: .75rem;
}

.vet-note {
  display: grid;
  min-width: 0;
  min-height: 95px !important;
  align-content: center;
  gap: .18rem;
  text-align: left;
}

.vet-note > span {
  font-size: 1.4rem;
}

/* Motion, accessibility, and responsive layout ------------------------- */

@keyframes immersive-scan {
  from { top: 18%; }
  to { top: 82%; }
}

@keyframes immersive-current {
  from { background-position-x: 0; }
  to { background-position-x: 18px; }
}

@keyframes immersive-gear {
  to { transform: rotate(360deg); }
}

@keyframes immersive-drop {
  from { opacity: 0; transform: translateY(-8px) rotate(45deg); }
  50% { opacity: 1; }
  to { opacity: 0; transform: translateY(28px) rotate(45deg); }
}

@keyframes immersive-bubble {
  from { opacity: 0; transform: translateY(8px) scale(.5); }
  30% { opacity: .8; }
  to { opacity: 0; transform: translateY(-80px) scale(1.3); }
}

@keyframes immersive-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes immersive-signal {
  to { background-position-x: 16px; }
}

@keyframes immersive-smoke {
  from { opacity: .35; transform: translate(-8px, 2px) scale(.8); }
  to { opacity: .72; transform: translate(10px, -12px) scale(1.2); }
}

@keyframes immersive-meter {
  from { transform: scaleY(.72); }
  to { transform: scaleY(1); }
}

@media (max-width: 820px) {
  .immersive-control-bank,
  .mix-channels,
  .vet-note-tray {
    grid-template-columns: 1fr;
  }

  .model-lab-layout,
  .skin-chart-layout,
  .brain-lab-scene,
  .vet-exam-room,
  .immersive-route-layout {
    grid-template-columns: 1fr;
  }

  .circuit-workbench {
    grid-template-columns: 1fr;
  }

  .circuit-wire {
    width: 10px;
    height: 28px;
    justify-self: center;
  }

  .circuit-node,
  .circuit-lamp {
    width: min(100%, 340px);
    justify-self: center;
  }

  .reactor-scene {
    grid-template-columns: minmax(90px, .55fr) minmax(180px, 1fr);
  }

  .reactor-gauges {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ultrasound-console {
    grid-template-columns: 70px minmax(200px, 1fr);
  }

  .ultrasound-readout {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .immersive-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .immersive-heading > span {
    align-self: flex-start;
  }

  .model-test-bench,
  .mechanism-machine,
  .mechanism-parts,
  .brain-link-board,
  .sterile-tool-tray,
  .ultrasound-readout {
    grid-template-columns: 1fr;
  }

  .reactor-scene,
  .ultrasound-console,
  .sterile-bench-scene {
    grid-template-columns: 1fr;
  }

  .reactor-gauges {
    grid-column: auto;
  }

  .ultrasound-probe {
    display: none;
  }

  .ultrasound-readout {
    grid-column: auto;
  }

  .immersive-route-grid {
    gap: .24rem;
    padding: .45rem;
  }

  .immersive-route-cell {
    min-width: 38px;
    min-height: 52px;
  }

  .fire-house {
    right: 5%;
    font-size: 5.5rem;
  }

  .fire-truck {
    left: 4%;
    font-size: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-activity *,
  .immersive-activity *::before,
  .immersive-activity *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .immersive-activity,
  .immersive-activity button,
  .circuit-workbench,
  .reactor-scene,
  .ultrasound-console,
  .brain-lab-scene,
  .mix-studio,
  .immersive-route-grid {
    border: 2px solid CanvasText;
    forced-color-adjust: auto;
  }

  .immersive-activity button:is(.is-selected, [aria-pressed="true"]),
  .immersive-route-cell.is-current,
  .immersive-route-cell.is-visited {
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }
}

/* Microbiologist: living-light microscope rescue --------------------- */

.immersive-microbe-rescue {
  --imm-a: #00a99c;
  --imm-b: #16547a;
  --imm-soft: #e3fff9;
  --microbe-cyan: #58f8ff;
  --microbe-violet: #c375ff;
  --microbe-gold: #ffe36a;
  color: #153c48;
}

.microbe-rescue-heading > span {
  color: #064b4b;
  background: #d6fff5;
  border-color: #64cbbb;
}

.microbe-rescue-layout {
  display: grid;
  align-items: stretch;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
}

.microbe-microscope-console,
.microbe-mission-console {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 0.75rem;
  background: #102839;
  border: 4px solid #24637a;
  border-radius: 20px;
  box-shadow: inset 0 0 25px rgba(88, 248, 255, 0.08), 0 7px 0 #08202c;
}

.microbe-eyepiece {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(88, 248, 255, 0.14), transparent 48%),
    #020c18;
  border: 9px double #4ca4b2;
  border-radius: 42% 45% 39% 46%;
  box-shadow:
    inset 0 0 48px rgba(88, 248, 255, 0.18),
    0 0 0 5px #061722;
}

.microbe-eyepiece.filter-violet {
  background:
    radial-gradient(circle at center, rgba(195, 117, 255, 0.25), transparent 50%),
    #100923;
  border-color: #a86dde;
}

.microbe-eyepiece.filter-gold {
  background:
    radial-gradient(circle at center, rgba(255, 227, 106, 0.24), transparent 50%),
    #19150a;
  border-color: #c7aa43;
}

.microbe-grid {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background:
    linear-gradient(rgba(160, 243, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 243, 255, 0.18) 1px, transparent 1px);
  background-size: 26px 26px;
}

.microbe-creature {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 150px;
  height: 120px;
  place-items: center;
  color: var(--microbe-cyan);
  filter: blur(0);
  transform: translate(-50%, -50%);
  transition: filter 240ms ease, transform 240ms ease, opacity 240ms ease;
  animation: microbe-creature-drift 2.8s ease-in-out infinite alternate;
}

.microbe-creature strong {
  position: relative;
  z-index: 2;
  font-size: clamp(4.2rem, 10vw, 7rem);
  line-height: 1;
  text-shadow: 0 0 12px currentColor, 0 0 30px currentColor;
}

.filter-violet .microbe-creature {
  color: var(--microbe-violet);
}

.filter-gold .microbe-creature {
  color: var(--microbe-gold);
}

.microbe-creature i {
  position: absolute;
  width: 26px;
  height: 26px;
  background: currentColor;
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 46% 54% 64% 36%;
  box-shadow: 0 0 16px currentColor;
}

.microbe-creature i:nth-child(1) {
  top: 5%;
  left: 8%;
  transform: scale(0.62) rotate(18deg);
}

.microbe-creature i:nth-child(2) {
  right: 5%;
  bottom: 9%;
  transform: scale(0.84) rotate(-22deg);
}

.microbe-creature i:nth-child(3) {
  right: 2%;
  top: 9%;
  transform: scale(0.42);
}

.microbe-eyepiece.focus-distance-1 .microbe-creature {
  filter: blur(4px);
  transform: translate(-50%, -50%) scale(1.08);
}

.microbe-eyepiece.focus-distance-2 .microbe-creature,
.microbe-eyepiece.focus-distance-3 .microbe-creature {
  filter: blur(9px);
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(1.22);
}

.microbe-eyepiece.is-captured .microbe-creature {
  filter: none;
  opacity: 0.48;
}

.microbe-crosshair {
  position: absolute;
  z-index: 5;
  inset: 50% auto auto 50%;
  width: 76%;
  height: 76%;
  border: 2px solid rgba(230, 255, 255, 0.54);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.microbe-crosshair span:first-child,
.microbe-crosshair span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: rgba(230, 255, 255, 0.54);
  transform: translate(-50%, -50%);
}

.microbe-crosshair span:first-child {
  width: 112%;
  height: 1px;
}

.microbe-crosshair span:last-child {
  width: 1px;
  height: 112%;
}

.microbe-scan-wave {
  position: absolute;
  z-index: 6;
  top: -25%;
  right: 0;
  left: 0;
  height: 22%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(88, 248, 255, 0.72), transparent);
}

.immersive-microbe-rescue:is(.outcome-fuzzy, .outcome-fuzz-lock, .outcome-captured) .microbe-scan-wave {
  animation: microbe-scan-pass 720ms ease-out;
}

.microbe-fuzz-cloud {
  position: absolute;
  z-index: 7;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.outcome-fuzzy .microbe-fuzz-cloud {
  opacity: 0.42;
}

.outcome-fuzz-lock .microbe-fuzz-cloud {
  opacity: 0.82;
}

.microbe-fuzz-cloud i {
  position: absolute;
  width: 54px;
  height: 54px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 114, 208, 0.85) 0 5px, rgba(102, 240, 255, 0.78) 5px 10px);
  border-radius: 42% 58% 35% 65%;
  filter: blur(1px);
  animation: microbe-fuzz-float 1.4s ease-in-out infinite alternate;
}

.microbe-fuzz-cloud i:nth-child(1) { top: 8%; left: 8%; }
.microbe-fuzz-cloud i:nth-child(2) { top: 17%; right: 13%; transform: scale(0.64); }
.microbe-fuzz-cloud i:nth-child(3) { top: 48%; left: 19%; transform: scale(0.82); }
.microbe-fuzz-cloud i:nth-child(4) { right: 24%; bottom: 12%; transform: scale(1.1); }
.microbe-fuzz-cloud i:nth-child(5) { right: 6%; bottom: 42%; transform: scale(0.52); }
.microbe-fuzz-cloud i:nth-child(6) { bottom: 7%; left: 40%; transform: scale(0.7); }

.microbe-capture-flash {
  position: absolute;
  z-index: 10;
  top: 16%;
  left: 50%;
  padding: 0.35rem 0.65rem;
  color: #05212a;
  background: var(--microbe-gold);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 25px var(--microbe-gold);
  font-family: var(--font-rounded);
  font-weight: 950;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.outcome-captured .microbe-capture-flash {
  animation: microbe-capture-pop 850ms cubic-bezier(0.2, 1.35, 0.45, 1) both;
}

.microbe-view-label {
  position: absolute;
  z-index: 8;
  right: 0.65rem;
  bottom: 0.65rem;
  padding: 0.3rem 0.5rem;
  color: #dffeff;
  background: rgba(1, 10, 18, 0.78);
  border: 1px solid #4ca4b2;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 850;
}

.microbe-live-readout {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.microbe-live-readout > span {
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem;
  color: #bcd9e2;
  background: #071620;
  border: 1px solid #35677a;
  border-radius: 9px;
}

.microbe-live-readout small {
  color: #7fa5b2;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.microbe-live-readout strong {
  font-size: 0.76rem;
}

.microbe-live-readout .is-ready {
  color: #dffff6;
  border-color: #4dcbab;
  box-shadow: inset 4px 0 #4dcbab;
}

.microbe-live-readout .is-warning {
  color: #ffe3f3;
  border-color: #e767a9;
  box-shadow: inset 4px 0 #e767a9;
}

.microbe-mission-console {
  color: #eafcff;
}

.microbe-specimen-brief {
  display: grid;
  align-items: center;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.7rem;
  background: #08202d;
  border: 2px solid #35748a;
  border-radius: 13px;
}

.microbe-specimen-brief > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--microbe-cyan);
  background: #03121b;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 11px currentColor;
}

.microbe-specimen-brief :where(small, strong, p) {
  margin: 0;
}

.microbe-specimen-brief small {
  color: #8bdce0;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.microbe-specimen-brief p {
  margin-top: 0.2rem;
  color: #bcd7df;
  font-size: 0.76rem;
}

.microbe-focus-console {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  background: #08202d;
  border: 2px solid #35748a;
  border-radius: 13px;
}

.microbe-focus-dial {
  display: grid;
  align-items: center;
  gap: 0.55rem;
  grid-template-columns: auto 1fr auto;
}

.microbe-focus-dial button {
  width: 48px;
  height: 48px;
  color: #eaffff;
  background: #153b4c;
  border: 2px solid #5d9eb2;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 950;
}

.microbe-focus-dial > div {
  position: relative;
  display: grid;
  min-height: 54px;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, #28586b 0 2px, transparent 2px 24%),
    #061721;
  border: 2px solid #35748a;
  border-radius: 999px;
}

.microbe-focus-dial > div > span {
  position: absolute;
  left: var(--focus-x);
  width: 18px;
  height: 42px;
  background: var(--microbe-cyan);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 14px var(--microbe-cyan);
  transition: left 220ms ease;
}

.microbe-focus-dial > div strong {
  z-index: 2;
  color: #071720;
  text-shadow: 0 0 3px #fff;
}

.microbe-filter-deck {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0.7rem;
  background: #08202d;
  border: 2px solid #35748a;
  border-radius: 13px;
}

.microbe-filter-deck legend {
  padding-inline: 0.35rem;
  color: #eafcff;
  font-weight: 900;
}

.microbe-filter-deck button {
  display: grid;
  min-height: 50px;
  align-items: center;
  gap: 0.45rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.55rem;
  color: #dffaff;
  text-align: left;
  background: #112f3e;
  border: 2px solid #416f82;
  border-radius: 9px;
  cursor: pointer;
}

.microbe-filter-deck button.is-selected {
  color: #06202a;
  background: var(--microbe-cyan);
  border-color: #fff;
  box-shadow: 0 0 14px rgba(88, 248, 255, 0.48);
}

.microbe-scan-actions {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}

.microbe-scan-actions button {
  min-height: 60px;
  padding: 0.6rem;
  border: 2px solid;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 900;
}

.microbe-clean-button {
  color: #d9fbff;
  background: #13475a;
  border-color: #5eb7c8;
}

.microbe-scan-button {
  color: #06202a;
  background: linear-gradient(110deg, var(--microbe-cyan), var(--microbe-gold));
  border-color: #fff;
  box-shadow: 0 0 15px rgba(88, 248, 255, 0.32);
}

.microbe-slide-dock {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.8rem;
  padding: 0.65rem;
  background: #e4f8f7;
  border: 3px solid #69aaa8;
  border-radius: 16px;
}

.microbe-slide-dock button {
  display: grid;
  min-height: 106px;
  align-content: center;
  gap: 0.18rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.65rem;
  color: #164c54;
  text-align: left;
  background: #fff;
  border: 2px solid #8cc0bf;
  border-radius: 12px;
  cursor: pointer;
}

.microbe-slide-dock button > small {
  grid-column: 1 / -1;
  color: #517a7d;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.microbe-slide-dock button > span {
  grid-row: 2 / 4;
  font-size: 1.8rem;
}

.microbe-slide-dock button em {
  color: #517a7d;
  font-size: 0.68rem;
  font-style: normal;
}

.microbe-slide-dock button.is-active {
  border-color: #176674;
  box-shadow: 0 0 0 3px rgba(23, 102, 116, 0.18);
}

.microbe-slide-dock button.is-captured {
  color: #084e43;
  background: #dcfff2;
  border-color: #4dba9a;
}

.microbe-atlas {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.8rem;
  padding: 0.75rem;
  background:
    radial-gradient(circle at 8% 12%, #fff 0 3px, transparent 4px),
    #f4efff;
  border: 3px solid #9b79c4;
  border-radius: 17px;
}

.microbe-atlas > div {
  grid-column: 1 / -1;
}

.microbe-atlas article {
  display: grid;
  min-height: 104px;
  align-content: center;
  gap: 0.25rem;
  padding: 0.6rem;
  color: #745f83;
  background: rgba(255, 255, 255, 0.7);
  border: 2px dashed #b9a6c5;
  border-radius: 12px;
}

.microbe-atlas article > span {
  font-size: 1.8rem;
}

.microbe-atlas article small {
  font-size: 0.68rem;
  line-height: 1.35;
}

.microbe-atlas article.is-saved {
  color: #3c1859;
  background: #fff;
  border-color: #9b54c5;
  border-style: solid;
  box-shadow: inset 5px 0 #9b54c5;
}

.microbe-atlas.is-complete {
  border-color: #4dba9a;
  box-shadow: 0 0 0 5px rgba(77, 186, 154, 0.16);
}

.microbe-screen-safety {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
  padding: 0.65rem 0.75rem;
  color: #20505a;
  background: #e8fbff;
  border: 1px solid #8cc8d1;
  border-radius: 11px;
  font-size: 0.76rem;
}

@keyframes microbe-creature-drift {
  from { margin-top: -7px; margin-left: -5px; }
  to { margin-top: 8px; margin-left: 6px; }
}

@keyframes microbe-scan-pass {
  0% { top: -25%; opacity: 0; }
  25% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

@keyframes microbe-fuzz-float {
  from { margin-top: -4px; opacity: 0.7; }
  to { margin-top: 5px; opacity: 1; }
}

@keyframes microbe-capture-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
  35%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(1.12) rotate(2deg); }
}

@media (max-width: 860px) {
  .microbe-rescue-layout {
    grid-template-columns: 1fr;
  }

  .microbe-mission-console {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .microbe-specimen-brief,
  .microbe-scan-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 580px) {
  .microbe-mission-console,
  .microbe-live-readout,
  .microbe-slide-dock,
  .microbe-atlas {
    grid-template-columns: 1fr;
  }

  .microbe-specimen-brief,
  .microbe-scan-actions,
  .microbe-atlas > div {
    grid-column: auto;
  }

  .microbe-eyepiece {
    min-height: 320px;
  }

  .microbe-screen-safety {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .microbe-creature,
  .microbe-fuzz-cloud i,
  .immersive-microbe-rescue .microbe-scan-wave,
  .immersive-microbe-rescue .microbe-capture-flash {
    animation: none !important;
  }

  .microbe-creature,
  .microbe-focus-dial > div > span {
    transition: none;
  }
}

@media (forced-colors: active) {
  .immersive-microbe-rescue,
  .microbe-microscope-console,
  .microbe-mission-console,
  .microbe-eyepiece,
  .microbe-slide-dock,
  .microbe-atlas,
  .microbe-live-readout > span {
    color: CanvasText;
    background: Canvas;
    border: 2px solid CanvasText;
    forced-color-adjust: auto;
  }

  .immersive-microbe-rescue button:is(.is-selected, .is-active, .is-captured),
  .microbe-atlas article.is-saved {
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }
}