/* ================================================================
   Community, learning, health, and science activity presentations
   ================================================================ */

.community-game-shell {
  --community-ink: #30213c;
  --community-plum: #6f2458;
  --community-pink: #d94182;
  --community-teal: #087b76;
  --community-blue: #246989;
  --community-gold: #efb53c;
  --community-paper: #fffdfa;
  --community-line: color-mix(in srgb, var(--community-plum) 22%, white);
  overflow: hidden;
  background:
    radial-gradient(circle at 96% 0%, rgba(239, 181, 60, 0.22), transparent 11rem),
    linear-gradient(145deg, #fffdfa, #fff1f7);
  border: 1px solid var(--community-line);
}

.community-activity {
  display: grid;
  gap: 1rem;
  margin-block: 1rem;
}

.community-habitat-field-map,
.community-research-pipeline,
.community-ecosystem-board,
.community-dental-chart,
.community-emergency-command,
.community-gene-safeguards,
.community-fair-hiring,
.community-research-shelves,
.community-media-literacy,
.community-scooter-material,
.community-helmet-impact,
.community-movement-room {
  isolation: isolate;
}

.community-scene-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.community-scene-heading small,
.community-scene-heading h3 {
  display: block;
  margin: 0;
}

.community-scene-heading small {
  color: var(--community-plum);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.community-scene-heading h3 {
  margin-top: 0.15rem;
  color: var(--community-ink);
  font-family: var(--font-rounded, ui-rounded, system-ui, sans-serif);
  font-size: clamp(1.25rem, 3.2vw, 1.8rem);
}

.community-scene-heading > span {
  flex: 0 0 auto;
  padding: 0.5rem 0.7rem;
  color: white;
  background: var(--community-plum);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.community-activity button {
  min-width: 48px;
  min-height: 48px;
  touch-action: manipulation;
}

.community-activity button:not(:disabled) {
  cursor: pointer;
}

.community-activity button:focus-visible {
  outline: 4px solid var(--community-gold);
  outline-offset: 3px;
}

.community-activity button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.habitat-note-card,
.pipeline-step-card,
.ecosystem-feature,
.dental-note-card,
.command-action-card,
.gene-plan-card,
.hiring-practice-card,
.research-book-card,
.media-question-card,
.helmet-evidence-card,
.movement-activity-card {
  display: grid;
  min-width: 0;
  min-height: 70px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem 0.65rem;
  padding: 0.7rem;
  color: var(--community-ink);
  background: white;
  border: 2px solid var(--community-line);
  border-radius: 15px;
  box-shadow: 0 3px 0 rgba(48, 33, 60, 0.12);
  text-align: left;
}

.habitat-note-card > span,
.pipeline-step-card > span,
.ecosystem-feature > span,
.dental-note-card > span,
.command-action-card > span,
.gene-plan-card > span,
.hiring-practice-card > span,
.research-book-card > span,
.media-question-card > span,
.helmet-evidence-card > span,
.movement-activity-card > span {
  grid-row: 1 / 3;
  font-size: 1.4rem;
}

.habitat-note-card small,
.ecosystem-feature small,
.dental-note-card small,
.command-action-card small,
.gene-plan-card small,
.hiring-practice-card small,
.media-question-card small,
.helmet-evidence-card small,
.movement-activity-card small {
  font-size: 0.75rem;
}

.community-activity button:is(.is-selected, .is-assigned, .is-filled, .is-connected, .is-ready, .is-restored) {
  color: white;
  background: var(--community-teal);
  border-color: var(--community-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--community-teal) 22%, transparent);
}

/* Habitat field map -------------------------------------------- */

.habitat-field-layout {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
}

.habitat-field-scene {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background:
    linear-gradient(#bce8f1 0 38%, transparent 38%),
    linear-gradient(#8fd084 38% 100%);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(41, 99, 72, 0.18);
}

.habitat-field-scene::after {
  position: absolute;
  right: 10%;
  bottom: 9%;
  left: 10%;
  height: 42%;
  content: "";
  background: radial-gradient(ellipse, #75cad8, #2e8ca7 70%);
  border: 8px solid #d7c278;
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.16);
}

.habitat-sun,
.habitat-reeds,
.habitat-pond,
.habitat-field-kit,
.habitat-map-pin {
  position: absolute;
  z-index: 2;
}

.habitat-sun {
  top: 7%;
  right: 9%;
  color: #f4c640;
  font-size: 3.5rem;
}

.habitat-reeds {
  right: 7%;
  bottom: 31%;
  font-size: 2rem;
}

.habitat-pond {
  z-index: 3;
  bottom: 23%;
  left: 28%;
  color: white;
  font-size: 1.5rem;
  font-weight: 900;
}

.habitat-field-kit {
  bottom: 11%;
  left: 9%;
  font-size: 2rem;
}

.habitat-map-pin {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  background: var(--community-plum);
  border: 4px solid white;
  border-radius: 50% 50% 50% 10%;
  box-shadow: 0 4px 8px rgba(48, 33, 60, 0.25);
  font-weight: 950;
  transform: rotate(-45deg);
}

.habitat-map-pin > b {
  font-weight: 950;
  transform: rotate(45deg);
}

.habitat-map-pin.pin-1 { top: 19%; left: 18%; }
.habitat-map-pin.pin-2 { top: 47%; right: 20%; }
.habitat-map-pin.pin-3 { bottom: 17%; left: 48%; }
.habitat-map-pin.pin-4 { top: 31%; right: 38%; }

.habitat-map-pin.is-marked {
  background: var(--community-teal);
  transform: rotate(-45deg) scale(1.12);
}

.habitat-field-log {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 0.9rem;
  background: #fff9df;
  border: 3px solid #d8b95d;
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(120, 89, 21, 0.12);
}

.habitat-field-log > div:first-child strong,
.habitat-field-log > div:first-child small {
  display: block;
}

.habitat-field-log > div:last-child {
  display: grid;
  gap: 0.55rem;
}

/* Biotech research pipeline ------------------------------------ */

.research-pipeline-scene {
  display: grid;
  min-height: 300px;
  grid-template-columns: 110px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
    repeating-linear-gradient(90deg, #d7eff7 0 28px, #eefaff 28px 56px);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(36, 105, 137, 0.16);
}

.pipeline-tank,
.pipeline-report {
  display: grid;
  min-height: 150px;
  place-items: center;
  color: white;
  background: linear-gradient(160deg, var(--community-blue), #1b405d);
  border: 5px solid white;
  border-radius: 22px;
  box-shadow: 0 5px 0 rgba(27, 64, 93, 0.2);
}

.pipeline-tank {
  position: relative;
  overflow: hidden;
  border-radius: 55px 55px 20px 20px;
}

.pipeline-tank > span {
  z-index: 2;
  font-size: 2.2rem;
}

.pipeline-tank > i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42%;
  background: #72d8dc;
  animation: community-liquid 1.8s ease-in-out infinite alternate;
}

.pipeline-track {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  list-style: none;
}

.pipeline-track::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -1rem;
  left: -1rem;
  height: 14px;
  content: "";
  background: #245f7f;
  border: 4px solid white;
  border-radius: 999px;
}

.pipeline-station {
  display: grid;
  min-height: 135px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  place-items: center;
  gap: 0.35rem;
  padding: 0.55rem;
  color: var(--community-blue);
  background: white;
  border: 3px solid #88c5d7;
  border-radius: 17px;
  text-align: center;
}

.pipeline-station > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: white;
  background: var(--community-blue);
  border-radius: 50%;
  font-weight: 950;
}

.pipeline-station > div small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
}

.pipeline-station > button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  color: white;
  background: var(--community-plum);
  border: 0;
  border-radius: 50%;
}

.pipeline-station.is-filled {
  color: #075f59;
  background: #e3fbf5;
  border-color: var(--community-teal);
}

.pipeline-report {
  gap: 0.35rem;
  align-content: center;
  text-align: center;
}

.pipeline-report > span {
  font-size: 2.2rem;
}

.pipeline-report > b {
  font-size: 0.7rem;
}

.pipeline-card-tray,
.research-book-cart {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Ecosystem board ---------------------------------------------- */

.ecosystem-map {
  position: relative;
  display: grid;
  min-height: 330px;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(150deg, #dff3bd, #b7e6cf 52%, #b8dded);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(49, 104, 64, 0.16);
}

.ecosystem-zone {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: 240px;
  align-content: center;
  gap: 0.45rem;
  padding: 0.8rem;
  color: #264d37;
  background: rgba(255, 255, 255, 0.82);
  border: 4px dashed rgba(38, 77, 55, 0.42);
  border-radius: 36% 22% 32% 20%;
  text-align: center;
}

.ecosystem-zone > span {
  font-size: 2.8rem;
}

.ecosystem-zone > small {
  font-weight: 800;
}

.ecosystem-zone.zone-2 {
  margin-top: 2rem;
  border-radius: 48% 35%;
}

.ecosystem-zone.zone-3 {
  border-radius: 25% 40% 24% 37%;
}

.ecosystem-zone.is-restored {
  color: white;
  background: rgba(8, 123, 118, 0.9);
  border-style: solid;
}

.ecosystem-stream {
  position: absolute;
  z-index: 1;
  right: 18%;
  bottom: 8%;
  left: 18%;
  color: #247fa2;
  font-size: 2.5rem;
  font-weight: 950;
  letter-spacing: 0.4em;
  transform: rotate(-4deg);
}

.ecosystem-feature-tray,
.dental-note-tray,
.command-action-tray,
.media-question-tray,
.movement-activity-tray {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Dental chart -------------------------------------------------- */

.dental-chart-layout {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
}

.dental-mouth-board {
  position: relative;
  display: grid;
  min-height: 320px;
  place-items: center;
  overflow: hidden;
  color: #8a2f63;
  background: radial-gradient(ellipse at center, #ffdde9 0 42%, #bc4e77 43% 62%, #8c2b59 63%);
  border: 5px solid white;
  border-radius: 48% 48% 42% 42%;
  box-shadow: 0 7px 0 rgba(111, 36, 88, 0.18);
}

.dental-teeth {
  display: grid;
  width: min(85%, 430px);
  grid-template-columns: repeat(6, minmax(35px, 1fr));
  gap: 0.4rem;
}

.dental-teeth i {
  display: grid;
  min-height: 62px;
  place-items: center;
  color: #f7f1dc;
  background: white;
  border: 3px solid #e4d9bd;
  border-radius: 14px 14px 24px 24px;
  font-style: normal;
  font-size: 2rem;
}

.dental-teeth i.is-highlighted {
  color: var(--community-teal);
  border-color: var(--community-teal);
  box-shadow: 0 0 0 4px rgba(8, 123, 118, 0.2);
}

.dental-mouth-board > strong {
  padding: 0.35rem 0.6rem;
  color: white;
  background: #6f2458;
  border-radius: 999px;
  font-size: 0.72rem;
}

.dental-mirror {
  position: absolute;
  top: 9%;
  right: 7%;
  color: #ddeef4;
  font-size: 2rem;
  transform: rotate(-35deg);
}

.dental-chart-drawers {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.dental-chart-drawer {
  display: grid;
  min-width: 0;
  min-height: 92px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem 0.65rem;
  padding: 0.75rem;
  color: var(--community-ink);
  background: white;
  border: 3px solid #e0bdd0;
  border-left-width: 9px;
  border-radius: 15px;
  text-align: left;
}

.dental-chart-drawer > span {
  grid-row: 1 / 3;
  font-size: 1.5rem;
}

/* Emergency command map ---------------------------------------- */

.command-map-scene {
  position: relative;
  display: grid;
  min-height: 340px;
  align-content: end;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(#374768 0 48%, #5e806c 48%);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(55, 71, 104, 0.22);
}

.command-weather,
.command-town {
  position: absolute;
  z-index: 1;
}

.command-weather {
  top: 9%;
  right: 8%;
  font-size: 3rem;
  animation: community-storm 1.6s ease-in-out infinite alternate;
}

.command-town {
  top: 39%;
  left: 8%;
  font-size: 2.7rem;
}

.command-phase-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.command-phase {
  display: grid;
  min-width: 0;
  min-height: 130px;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.75rem;
  color: #29344d;
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid white;
  border-radius: 18px;
  text-align: left;
}

.command-phase > span {
  display: grid;
  width: 38px;
  height: 38px;
  grid-row: 1 / 3;
  place-items: center;
  color: white;
  background: #374768;
  border-radius: 50%;
  font-weight: 950;
}

.command-phase small {
  font-size: 0.74rem;
}

/* Gene safeguards ---------------------------------------------- */

.gene-lab-scene {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  padding: 1rem;
  background: linear-gradient(145deg, #e7e7ff, #dff9f4);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(68, 51, 111, 0.15);
}

.gene-chamber {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
  overflow: hidden;
  color: white;
  background: radial-gradient(circle, #6d50ad, #2c315e 68%);
  border: 8px solid #c8e8f0;
  border-radius: 110px 110px 28px 28px;
}

.gene-chamber::before {
  position: absolute;
  inset: 18px;
  content: "";
  border: 3px dashed rgba(255, 255, 255, 0.5);
  border-radius: 90px 90px 20px 20px;
}

.gene-chamber > span {
  z-index: 2;
  font-size: 5rem;
  animation: community-gene 3s linear infinite;
}

.gene-chamber > i {
  z-index: 2;
  width: 24px;
  height: 24px;
  background: #634e82;
  border: 3px solid white;
  border-radius: 50%;
}

.gene-chamber.is-reviewing > i {
  background: #42d3bd;
  box-shadow: 0 0 14px #42d3bd;
}

.gene-chamber > strong {
  z-index: 2;
  padding: 0.35rem 0.55rem;
  background: #252b52;
  border-radius: 999px;
  font-size: 0.68rem;
}

.gene-safeguard-console,
.hiring-practice-grid,
.helmet-evidence-grid {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Fair hiring room --------------------------------------------- */

.hiring-room-scene {
  display: grid;
  min-height: 270px;
  align-content: center;
  gap: 1rem;
  padding: 1.2rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    repeating-linear-gradient(90deg, #f6ddea 0 32px, #fff4f9 32px 64px);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(111, 36, 88, 0.15);
}

.hiring-table {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 3rem;
}

.hiring-table > i {
  display: grid;
  width: min(45%, 240px);
  height: 90px;
  place-items: center;
  background: #8b5d3e;
  border: 5px solid white;
  border-radius: 50%;
  box-shadow: 0 8px 0 #5b3825;
  font-style: normal;
}

.hiring-fairness-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem;
  color: var(--community-plum);
  background: white;
  border: 2px solid #e2bfd2;
  border-radius: 13px;
}

.hiring-fairness-meter::before {
  grid-column: 1;
  grid-row: 1;
  height: 16px;
  content: "";
  background: #f2dfe9;
  border-radius: 999px;
}

.hiring-fairness-meter > span {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  width: var(--fair-progress);
  height: 16px;
  background: var(--community-teal);
  border-radius: 999px;
  transition: width 220ms ease;
}

.hiring-fairness-meter > strong {
  font-size: 0.72rem;
}

.hiring-practice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Interactive research shelves -------------------------------- */

.research-shelf-wall {
  position: relative;
  min-height: 390px;
  padding: 1rem 1rem 4.5rem;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, #683c2c 0 10px, transparent 10px 80px),
    #efd7b2;
  border: 7px solid #6f432f;
  border-radius: 18px;
  box-shadow: inset 0 0 0 5px #fff4dd, 0 7px 0 rgba(75, 44, 32, 0.18);
}

.research-shelf-wall > ol {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.7rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.research-shelf-slot {
  display: grid;
  min-width: 0;
  min-height: 250px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  place-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  color: #54311f;
  background:
    repeating-linear-gradient(90deg, #a74364 0 12px, #f0c34a 12px 24px, #2a8a83 24px 36px) bottom / auto 70px no-repeat,
    rgba(255, 250, 235, 0.9);
  border: 4px solid #8a5b3b;
  border-radius: 10px;
  text-align: center;
}

.research-shelf-slot > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: white;
  background: #6f432f;
  border-radius: 50%;
  font-weight: 950;
}

.research-shelf-slot > button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  color: white;
  background: var(--community-plum);
  border: 0;
  border-radius: 50%;
}

.research-shelf-slot.is-filled {
  background:
    repeating-linear-gradient(90deg, #087b76 0 12px, #efb53c 12px 24px, #6f2458 24px 36px) bottom / auto 90px no-repeat,
    #eafff8;
  border-color: var(--community-teal);
}

.shelf-lamp,
.shelf-desk {
  position: absolute;
  z-index: 3;
}

.shelf-lamp {
  top: 8px;
  right: 12px;
  font-size: 2rem;
}

.shelf-desk {
  right: 1rem;
  bottom: 0.7rem;
  padding: 0.45rem 0.7rem;
  background: #8a5b3b;
  border-radius: 10px;
  font-size: 1.4rem;
}

/* Media literacy studio ---------------------------------------- */

.media-studio-scene {
  position: relative;
  min-height: 320px;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(150deg, #292950, #53356b 60%, #8d416c);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(41, 41, 80, 0.2);
}

.media-tool-wall {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-tool-screen {
  display: grid;
  min-width: 0;
  min-height: 235px;
  align-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  color: #dffcff;
  background:
    linear-gradient(rgba(32, 67, 82, 0.85), rgba(32, 67, 82, 0.85)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(117, 225, 231, 0.16) 8px 9px);
  border: 8px solid #17172f;
  border-radius: 18px;
  box-shadow: 0 0 0 3px #6da6b9, 0 8px 0 #17172f;
  text-align: center;
}

.media-tool-screen > span {
  font-size: 3rem;
}

.media-tool-screen.is-connected {
  color: white;
  background:
    linear-gradient(rgba(8, 123, 118, 0.88), rgba(8, 123, 118, 0.88)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 255, 255, 0.15) 8px 9px);
}

.media-studio-lights {
  position: absolute;
  right: 0;
  bottom: 0.7rem;
  left: 0;
  color: #efb53c;
  font-size: 2rem;
  letter-spacing: 2rem;
  text-align: center;
}

/* Scooter material rig ----------------------------------------- */

.scooter-rig-scene {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(#9ed9ec 0 61%, #5b6871 61%);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(54, 79, 91, 0.18);
}

.scooter-rig-scene::after {
  position: absolute;
  right: 0;
  bottom: 22%;
  left: 0;
  height: 8px;
  content: "";
  background: repeating-linear-gradient(90deg, white 0 48px, transparent 48px 86px);
}

.scooter-rain {
  position: absolute;
  top: 12%;
  right: 8%;
  color: #3b7999;
  font-size: 2rem;
  animation: community-rain 1s linear infinite;
}

.scooter-model {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #222d35;
}

.scooter-model > i {
  width: 8px;
  height: 125px;
  margin-left: 120px;
  background: #222d35;
  border-radius: 999px;
  transform: rotate(-8deg);
}

.scooter-model > strong {
  color: #d94182;
  font-size: 2.6rem;
  letter-spacing: -0.2em;
  text-shadow: 0 4px 0 #6f2458;
  transition: transform 220ms ease;
}

.scooter-rig-scene.strength-low .scooter-model > strong {
  transform: rotate(3deg) scaleX(0.9);
}

.scooter-rig-scene.strength-high .scooter-model > strong {
  transform: rotate(0) scaleX(1.08);
}

.scooter-rig-scene.mass-light .scooter-model {
  transform: translateY(-8px);
}

.scooter-model > b {
  margin-top: -15px;
  font-size: 2.4rem;
  letter-spacing: 3.2rem;
}

.scooter-load {
  position: absolute;
  top: 13%;
  left: 12%;
  padding: 0.55rem 0.7rem;
  color: white;
  background: #38434a;
  border: 4px solid white;
  border-radius: 14px;
  font-size: 1.2rem;
  font-weight: 950;
}

.scooter-rig-readout {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scooter-rig-readout > span {
  padding: 0.45rem;
  color: white;
  background: rgba(26, 38, 46, 0.88);
  border-radius: 9px;
  font-size: 0.72rem;
  text-align: center;
}

.scooter-rig-readout b {
  display: block;
  color: #7be4dc;
  text-transform: uppercase;
}

.scooter-control-bank {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scooter-control {
  min-width: 0;
  margin: 0;
  padding: 0.75rem;
  background: white;
  border: 2px solid var(--community-line);
  border-radius: 16px;
}

.scooter-control legend {
  padding-inline: 0.35rem;
  color: var(--community-plum);
  font-weight: 900;
}

.scooter-control > div {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scooter-setting {
  min-width: 0 !important;
  padding: 0.45rem;
  color: var(--community-plum);
  background: #fff7fb;
  border: 2px solid #d7a8c2;
  border-radius: 10px;
  font-weight: 850;
}

.scooter-setting.is-selected {
  color: white;
  background: var(--community-teal);
  border-color: var(--community-teal);
}

/* Helmet impact rig -------------------------------------------- */

.helmet-rig-scene {
  display: grid;
  min-height: 340px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(240px, 1.2fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    repeating-linear-gradient(90deg, #d7e2e8 0 28px, #eef5f7 28px 56px);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(51, 77, 90, 0.16);
}

.helmet-drop-tower {
  position: relative;
  display: grid;
  min-height: 285px;
  justify-items: center;
  align-content: space-between;
  padding: 0.6rem;
  border: 12px solid #435967;
  border-bottom-width: 20px;
  border-radius: 20px 20px 8px 8px;
}

.helmet-drop-tower > i {
  width: 80%;
  height: 14px;
  background: #435967;
}

.helmet-drop-tower > span {
  color: #b43d60;
  font-size: 2.5rem;
  animation: community-drop 1.2s ease-in-out infinite;
}

.helmet-drop-tower > strong {
  font-size: 4rem;
}

.helmet-drop-tower > b {
  width: 86%;
  height: 24px;
  background: repeating-linear-gradient(45deg, #efb53c 0 12px, #313b42 12px 24px);
}

.helmet-sensor-screen {
  display: grid;
  min-height: 200px;
  align-content: center;
  gap: 0.8rem;
  padding: 1rem;
  color: #d8fbff;
  background: #183746;
  border: 9px solid #425d6b;
  border-radius: 20px;
  box-shadow: inset 0 0 25px rgba(90, 221, 226, 0.22);
  text-align: center;
}

.helmet-sensor-screen small {
  letter-spacing: 0.12em;
}

.helmet-sensor-screen > span {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.helmet-sensor-screen i {
  width: 42px;
  height: 12px;
  background: #335563;
  border-radius: 999px;
}

.helmet-sensor-screen i.is-on {
  background: #51dccb;
  box-shadow: 0 0 10px #51dccb;
}

/* Movement room ------------------------------------------------- */

.movement-room-scene {
  position: relative;
  display: grid;
  min-height: 330px;
  align-items: end;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4rem 1rem 1rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    repeating-linear-gradient(90deg, #dfd5ee 0 42px, #f4effa 42px 84px);
  border: 5px solid white;
  border-radius: 28px;
  box-shadow: 0 7px 0 rgba(83, 48, 116, 0.14);
}

.movement-wall-bar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  color: #8b68aa;
  background: #e6d9ef;
  border: 4px solid white;
  border-radius: 10px;
  font-size: 1.7rem;
  letter-spacing: 1rem;
  text-align: center;
}

.movement-station {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: 220px;
  align-content: center;
  gap: 0.45rem;
  padding: 0.75rem;
  color: #563074;
  background: rgba(255, 255, 255, 0.92);
  border: 4px dashed #a685bc;
  border-radius: 28px 28px 14px 14px;
  text-align: center;
}

.movement-station > span {
  font-size: 3rem;
}

.movement-station > small {
  font-weight: 800;
}

.movement-station.is-ready {
  color: white;
  background: #563074;
  border-color: white;
  border-style: solid;
}

/* Motion -------------------------------------------------------- */

@keyframes community-liquid {
  from { transform: translateY(8px) skewY(-3deg); }
  to { transform: translateY(-5px) skewY(3deg); }
}

@keyframes community-storm {
  from { transform: translateX(-6px); }
  to { transform: translateX(8px); }
}

@keyframes community-gene {
  to { transform: rotate(1turn); }
}

@keyframes community-rain {
  from { transform: translate(0, -8px); }
  to { transform: translate(-12px, 12px); }
}

@keyframes community-drop {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(26px); }
}

/* Responsive and accessibility -------------------------------- */

@media (max-width: 820px) {
  .habitat-field-layout,
  .dental-chart-layout,
  .gene-lab-scene {
    grid-template-columns: 1fr;
  }

  .habitat-field-log > div:last-child,
  .gene-safeguard-console {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-pipeline-scene {
    grid-template-columns: 1fr;
  }

  .pipeline-tank,
  .pipeline-report {
    min-height: 95px;
  }

  .pipeline-track {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    padding-block: 0.35rem;
  }

  .hiring-practice-grid,
  .research-shelf-wall > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-shelf-slot {
    min-height: 190px;
  }

  .scooter-control-bank {
    grid-template-columns: 1fr;
  }

  .helmet-rig-scene {
    grid-template-columns: 1fr;
  }

  .helmet-drop-tower {
    min-height: 240px;
  }

}

@media (max-width: 580px) {
  .community-scene-heading {
    flex-direction: column;
  }

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

  .habitat-field-scene {
    min-height: 320px;
  }

  .habitat-field-log > div:last-child,
  .gene-safeguard-console,
  .hiring-practice-grid,
  .helmet-evidence-grid,
  .ecosystem-feature-tray,
  .dental-note-tray,
  .command-action-tray,
  .media-question-tray,
  .movement-activity-tray,
  .scooter-rig-readout {
    grid-template-columns: 1fr;
  }

  .ecosystem-map,
  .command-phase-grid,
  .media-tool-wall,
  .movement-room-scene {
    grid-template-columns: 1fr;
  }

  .ecosystem-zone,
  .ecosystem-zone.zone-2,
  .ecosystem-zone.zone-3 {
    min-height: 150px;
    margin-top: 0;
    border-radius: 20px;
  }

  .ecosystem-stream {
    display: none;
  }

  .dental-mouth-board {
    min-height: 270px;
  }

  .dental-teeth {
    gap: 0.2rem;
  }

  .dental-teeth i {
    min-height: 48px;
    font-size: 1.3rem;
  }

  .command-map-scene {
    min-height: 525px;
  }

  .command-phase {
    min-height: 100px;
  }

  .gene-chamber {
    min-height: 265px;
  }

  .hiring-table {
    gap: 0.35rem;
    font-size: 2rem;
  }

  .hiring-fairness-meter {
    grid-template-columns: 1fr;
  }

  .hiring-fairness-meter > strong {
    grid-column: 1;
  }

  .research-shelf-wall > ol {
    grid-template-columns: 1fr;
  }

  .research-shelf-slot {
    min-height: 145px;
  }

  .media-tool-screen {
    min-height: 155px;
  }

  .media-studio-lights {
    display: none;
  }

  .scooter-rig-scene {
    min-height: 390px;
  }

  .scooter-rig-readout {
    right: 0.6rem;
    bottom: 0.6rem;
    left: 0.6rem;
  }

  .scooter-control > div {
    grid-template-columns: 1fr;
  }

  .movement-room-scene {
    min-height: 660px;
  }

  .movement-station {
    min-height: 155px;
  }
}

@media (pointer: coarse) {
  .community-activity button {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-tank > i,
  .command-weather,
  .gene-chamber > span,
  .scooter-rain,
  .helmet-drop-tower > span {
    animation: none;
  }

  .community-activity *,
  .community-activity *::before,
  .community-activity *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .community-game-shell,
  .habitat-field-scene,
  .habitat-field-log,
  .research-pipeline-scene,
  .pipeline-tank,
  .pipeline-report,
  .ecosystem-map,
  .ecosystem-zone,
  .dental-mouth-board,
  .dental-chart-drawer,
  .command-map-scene,
  .command-phase,
  .gene-lab-scene,
  .gene-chamber,
  .hiring-room-scene,
  .research-shelf-wall,
  .research-shelf-slot,
  .media-studio-scene,
  .media-tool-screen,
  .scooter-rig-scene,
  .helmet-rig-scene,
  .helmet-sensor-screen,
  .movement-room-scene,
  .movement-station {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }

  .habitat-field-scene::after,
  .pipeline-track::before,
  .pipeline-tank > i,
  .ecosystem-stream,
  .command-weather,
  .command-town,
  .gene-chamber::before,
  .media-studio-lights,
  .scooter-rig-scene::after,
  .scooter-rain {
    display: none;
  }

  .community-activity button {
    color: ButtonText;
    background: ButtonFace;
    border: 2px solid ButtonText;
    box-shadow: none;
  }

  .community-activity button:is(.is-selected, .is-assigned, .is-filled, .is-connected, .is-ready, .is-restored, [aria-pressed="true"]) {
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
    forced-color-adjust: none;
  }

  .community-activity button:focus-visible {
    outline-color: Highlight;
  }
}