:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eaf3ef;
}

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: #203f3b;
  background:
    linear-gradient(rgba(239, 247, 243, .78), rgba(231, 241, 238, .9)),
    url("assets/protein-game/cell-environment-v1.webp") center / cover fixed;
}

.pg-standalone {
  width: min(100%, 1600px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(72px, calc(env(safe-area-inset-top) + 58px)) clamp(10px, 2vw, 30px) 30px;
  box-sizing: border-box;
}

.pg-standalone > .gb-protein-game {
  width: 100%;
  max-width: none;
  margin: 0;
}/* One visual system across every round on the wider game page. */

.pg-standalone .gb-protein-game__main {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(111, 204, 176, .10), transparent 28%),
    radial-gradient(circle at 88% 92%, rgba(171, 143, 221, .09), transparent 30%),
    rgba(246, 251, 249, .88);
  border: 1px solid rgba(112, 178, 165, .58);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(21, 64, 61, .16), inset 0 0 0 5px rgba(255, 255, 255, .38);
}

.pg-standalone .gb-protein-game__navigation-row {
  position: sticky;
  z-index: 80;
  top: 10px;
  margin-bottom: 10px;
}

.pg-standalone .gb-protein-game__nav {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.pg-standalone .pg-round-tab {
  position: relative;
  min-height: 74px;
  padding-top: 18px;
}

.pg-standalone .pg-round-tab em {
  display: block;
  margin-bottom: 3px;
  color: #668078;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .09em;
}

.pg-standalone .pg-round-tab--level em { color: #26745f; }

.pg-standalone .gb-protein-game__nav .pg-round-tab--level {
  background: rgba(224, 246, 237, .94) !important;
  border-color: #add8c9 !important;
}

.pg-standalone .gb-protein-game__nav .pg-round-tab--question {
  background: rgba(244, 241, 250, .95) !important;
  border-color: #d6cae8 !important;
}

.pg-standalone .gb-protein-game__nav .pg-round-tab.is-active {
  background: rgba(247, 252, 250, .98) !important;
  border-color: #42ae91 !important;
}

.pg-standalone .pg-round > :is(.gb-dna-builder, .gb-rna-nucleotide-builder, .gb-rna-builder, .gb-translation-intro, .gb-translation-game) {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0 0 25px 25px;
  box-shadow: none;
}

.pg-standalone .pg-round--question :is(.gb0__header, .gr2__header, .gti__header),
.pg-standalone .pg-round--level :is(.gb-dna-builder__topbar, .gb2__topbar, .gt3__topbar) {
  min-height: 54px;
  border-top: 1px solid rgba(166, 204, 195, .38);
}

.pg-standalone .pg-round--question .pg-structure-question{
  border-left: 4px solid #59ad94;
  background: linear-gradient(110deg, rgba(245, 252, 248, .95), rgba(239, 235, 248, .88));
}

@media (min-width: 1200px) {

  .pg-standalone .pg-round--question :is(.gb0__stage, .gr2__stage, .gti__stage) {
    padding-inline: clamp(28px, 4vw, 64px);
  }
}

.pg-back {
  position: fixed;
  z-index: 10000;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 15px;
  color: #eefaf6;
  background: rgba(19, 62, 60, .9);
  border: 1px solid rgba(207, 240, 229, .48);
  border-radius: 999px;
  box-shadow: 0 7px 24px rgba(12, 43, 42, .2);
  backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.pg-back:hover {
  background: #174f4a;
  transform: translateY(-1px);
}

.pg-back:focus-visible {
  outline: 3px solid #d7b8ef;
  outline-offset: 3px;
}

@media (max-width: 600px) {

  .pg-standalone {
    padding: max(66px, calc(env(safe-area-inset-top) + 56px)) 0 18px;
  }

  .pg-back {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .pg-standalone .gb-protein-game__navigation-row {
    top: 6px;
  }

  .pg-standalone .pg-round-tab {
    min-width: 150px;
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  .pg-back { transition: none; }
}

/* Desktop game cockpit: everything important fits inside one viewport. */
@media (min-width: 901px) and (min-height: 560px) {

  html,
  body { overflow: hidden; }

  .pg-standalone {
    height: calc(100dvh - 46px);
    min-height: 0;
    padding: 10px clamp(10px, 1.4vw, 22px);
  }

  .pg-standalone > .gb-protein-game,
  .pg-standalone .gb-protein-game__shell,
  .pg-standalone .gb-protein-game__main { height: 100%; }

  .pg-standalone .gb-protein-game__main {
    display: grid;
    grid-template: auto auto minmax(0, 1fr) / minmax(0, 1fr) 205px;
    column-gap: 8px;
    align-content: stretch;
  }

  .pg-standalone .gb-protein-game__navigation-row {
    position: relative;
    top: auto;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(350px, .95fr) minmax(0, 1.65fr);
    gap: 6px;
    margin: 0;
    padding: 6px;
  }

  .pg-standalone .gb-protein-game__nav-tools {
    min-width: 0;
    gap: 4px;
    padding: 0;
    border: 0;
    box-shadow: none;
    flex-wrap: nowrap;
  }

  .pg-standalone .pg-film {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 5px 9px;
    border-radius: 12px;
  }

  .pg-standalone .pg-film__play {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
  }

  .pg-standalone .pg-film small { font-size: 8px; }

  .pg-standalone .pg-film strong { font-size: 12px; }

  .pg-standalone .gb-protein-game__music { flex-basis: 34px; }

  .pg-standalone .gb-protein-game__nav {
    gap: 3px;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .pg-standalone .pg-round-tab {
    min-height: 48px;
    padding: 5px 4px 4px;
    border-radius: 10px;
  }

  .pg-standalone .pg-round-tab em {
    margin: 0;
    font-size: 7px;
    line-height: 1.1;
  }

  .pg-standalone .pg-round-tab strong { font-size: 10px; }

  .pg-standalone .pg-round-tab small { display: none; }

  .pg-standalone .gb-protein-game__nav button.is-active::before { display: none; }

  .pg-standalone .gb-protein-game__message { grid-column: 1 / -1; margin: 0; }

  .pg-standalone .pg-round {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
  }/* The layout rules below give visible rounds and overlays their geometry.
     Keep the native hidden state authoritative when the game changes round/state. */

  .pg-standalone .pg-round[hidden],
  .pg-standalone :is(.gb-dna-builder__overlay, .gb2__overlay, .gt3__overlay)[hidden] {
    display: none !important;
  }/* Let every round inhabit the new full-height game window. */

  .pg-standalone .pg-round > :is(.gb-dna-builder, .gb-rna-nucleotide-builder, .gb-rna-builder, .gb-translation-intro, .gb-translation-game),
  .pg-standalone .pg-round :is(.gb0__cabinet, .gr2__cabinet, .gb-dna-builder__cabinet, .gb2__cabinet, .gti__cabinet, .gt3__cabinet) {
    height: 100%;
    min-height: 100%;
  }

  .pg-standalone .pg-round :is(.gb0__cabinet, .gr2__cabinet, .gb-dna-builder__cabinet, .gb2__cabinet, .gti__cabinet, .gt3__cabinet) {
    display: flex;
    width: 100%;
    flex-direction: column;
  }

  .pg-standalone .pg-round--question :is(.gb0__stage, .gr2__stage, .gti__stage),
  .pg-standalone .pg-round--level :is(.gb-dna-builder__stage, .gb2__stage) {
    flex: 1 1 auto;
  }

  .pg-standalone .pg-round--question :is(.gb0__stage, .gr2__stage, .gti__stage) {
    display: grid;
    min-height: 0;
    align-content: center;
  }

  .pg-standalone .pg-round--level :is(.gb-dna-builder__stage, .gb2__stage) {
    min-height: 300px;
  }

  .pg-standalone .pg-round--level :is(.gb-dna-builder__overlay, .gb2__overlay) {
    display: grid;
    place-items: center;
  }

  .pg-standalone .pg-round--level .gt3__cabinet[data-gt3-phase="idle"] .gt3__stage {
    height: auto;
    min-height: 100%;
    flex: 1 1 auto;
  }

  .pg-standalone .pg-round--level .gt3__cabinet[data-gt3-phase="idle"] .gt3__overlay {
    position: absolute;
    inset: 0;
  }

  .pg-standalone .pg-scores {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    width: 100%;
    margin: 0;
    padding: 12px 10px;
    background: rgba(248, 252, 250, .72);
    border-left: 1px solid rgba(131, 183, 172, .26);
  }

  .pg-standalone .pg-scores ol { min-height: 0; }

  .pg-standalone .pg-scores li { font-size: 11px; }

  .pg-standalone .pg-scores li strong { font-size: 11px; }

  .pg-standalone .pg-round--level .gt3__stage { height: 230px; }

  .pg-standalone .pg-round--level .gt3__decoder-slot {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 4px;
  }

  .pg-standalone .pg-round--level .gt3__decoder {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px;
  }

  .pg-standalone .pg-round--level .gt3__code-scroll {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 7px;
  }

  .pg-standalone .pg-round--level .gt3__code-scroll-inner {
    width: 100%;
    min-width: 680px;
    min-height: 0;
  }

  .pg-standalone .pg-round--level .gt3__code-map {
    height: 100%;
    grid-template-rows: auto repeat(4, minmax(60px, 1fr));
  }

  .pg-standalone .pg-round--level :is(.gt3__code-row, .gt3__code-cell, .gt3__code-third-axis) { min-height: 76px; }

  .pg-standalone .pg-round--level :is(.gt3__code-cell > button, .gt3__code-third-axis b) { min-height: 18px; }

  .pg-standalone .pg-round--level .gt3__code-cell > button {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 18px;
    padding: 0 4px;
  }

  .pg-standalone .pg-round--level .gt3__code-cell > button > b { font-size: 12px; }

  .pg-standalone .pg-round--level .gt3__code-cell > button > em { font-size: 11px; }

  .pg-back {
    top: auto;
    right: auto;
    bottom: 6px;
    left: 50%;
    min-height: 34px;
    padding-inline: 11px;
    font-size: 11px;
    opacity: .9;
    transform: translateX(-50%);
  }

  .pg-back:hover { transform: translateX(-50%) translateY(-1px); }
}

@media (max-width: 1199px) {

  .pg-standalone .pg-scores { display: none; }
}

@media (min-width: 901px) and (max-width: 1199px) {

  .pg-standalone .gb-protein-game__main { grid-template-columns: minmax(0, 1fr); }

  .pg-standalone .pg-round { grid-column: 1; }
}

@media (min-width: 901px) and (max-height: 800px) {

  .pg-standalone .pg-round--question :is(.gb0__header, .gr2__header, .gti__header) {
    min-height: 42px;
    padding-block: 7px;
  }

  .pg-standalone .pg-round--question :is(.gb0__stage, .gr2__stage, .gti__stage) {
    padding-block: 12px 34px;
  }

  .pg-standalone .pg-round--question :is(.gb0__controls, .gr2__controls) {
    padding-block: 8px;
  }

  .pg-standalone .pg-round--question :is(.gb0__parts button, .gr2__parts button, .gb0__base-button, .gr2__base-button) {
    min-height: 48px;
  }

  .pg-standalone .pg-round--level .gt3__stage { height: 140px; min-height: 140px; }

  .pg-standalone .pg-round--level :is(.gt3__code-row, .gt3__code-cell, .gt3__code-third-axis) { min-height: 60px; }

  .pg-standalone .pg-round--level :is(.gt3__code-cell > button, .gt3__code-third-axis b) { min-height: 15px; }
}/* Shared DNA/RNA start menu over a paused preview of the real lane. */

.pg-standalone .gb-protein-game .pg-start-menu:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(14px, 3vw, 32px) !important;
  overflow-y: auto !important;
  background: rgba(222, 237, 233, .18) !important;
  backdrop-filter: none !important;
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pg-standalone .gb-protein-game .pg-start-menu > :is(.gb-dna-builder__overlay-panel, .gb2__overlay-panel, .gt3__overlay-panel) {
  width: min(100%, 760px) !important;
  max-height: 100% !important;
  box-sizing: border-box;
  padding: clamp(20px, 3vw, 32px) !important;
  overflow-y: auto;
  scrollbar-gutter: auto;
  text-align: center !important;
  color: #294b47 !important;
  background: linear-gradient(125deg, rgba(245, 251, 248, .95), rgba(236, 237, 245, .93)) !important;
  border-radius: 26px !important;
  box-shadow: 0 12px 36px #173e3a26 !important;
}

.pg-standalone .gb-protein-game .pg-start-menu :is(h3, p, button, strong, span, small) { font-family: inherit !important; }

.pg-standalone .gb-protein-game .pg-start-menu h3 {
  margin: 0 0 14px !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: #294b47 !important;
}

.pg-standalone .gb-protein-game .pg-start-menu > div > p:not([hidden]) {
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  color: #456560 !important;
}

.pg-standalone .gb-protein-game .pg-start-menu :is(.gb-dna-builder__overlay-actions, .gb2__mode-grid, .gt3__mode-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  margin: 22px 0 18px !important;
  width: 100% !important;
}

.pg-standalone .gb-protein-game .pg-start-menu :is(.gb-dna-builder__overlay-actions, .gb2__mode-grid, .gt3__mode-grid):has(> button:only-child),
.pg-standalone .gb-protein-game .pg-start-menu .gb-dna-builder__overlay-actions:has(> button[hidden]) { grid-template-columns: 1fr; }

.pg-standalone .gb-protein-game .pg-start-menu :is(.is-mode-card, .gb2__mode-card, .gt3__mode-card) {
  display: grid;
  align-content: center;
  gap: 6px;
  width: 100%;
  min-height: 132px !important;
  padding: 20px !important;
  box-sizing: border-box;
  border-radius: 20px !important;
  text-align: left;
}

.pg-standalone .gb-protein-game .pg-start-menu button[hidden] { display: none !important; }

.pg-standalone .gb-protein-game .pg-start-menu button strong { font-size: 18px !important; font-weight: 800 !important; line-height: 1.3; }

.pg-standalone .gb-protein-game .pg-start-menu button :is(span, small) { font-size: 14px !important; line-height: 1.45 !important; font-weight: 600 !important; }

.pg-standalone .gb-protein-game .pg-start-menu :is(.gb-dna-builder__shortcut, .gb2__shortcut, .gt3__shortcut) { font-size: 13px !important; margin: 0 !important; font-weight: 600 !important; text-align: center !important; }

.pg-standalone .gb-protein-game .gb-dna-builder[data-state="idle"] :is(.gb-dna-builder__track, .gb-dna-builder__target) { display: block; }

.pg-standalone .gb-protein-game .gb-dna-builder[data-state="idle"] .gb-dna-builder__direction { display: flex; }

.pg-standalone .gb-protein-game .gb-rna-builder[data-phase="idle"] .gb2__dna-window { display: block; }

.pg-standalone .gb-protein-game .gb-rna-builder[data-phase="idle"] .gb2__sequence-label { display: flex; }

.pg-standalone .gb-protein-game .gb-rna-builder[data-phase="idle"] .gb2__mrna { display: grid; }
@media (max-width: 900px), (max-height: 699px) {

  .pg-standalone .gb-protein-game :is(.gb-dna-builder[data-state="idle"] .gb-dna-builder__stage, .gb-rna-builder[data-phase="idle"] .gb2__stage) { min-height: 570px; }
}
@media (max-width: 560px) {

  .pg-standalone .gb-protein-game .pg-start-menu :is(.gb-dna-builder__overlay-actions, .gb2__mode-grid, .gt3__mode-grid) { grid-template-columns: 1fr; }

  .pg-standalone .gb-protein-game .pg-start-menu :is(.is-mode-card, .gb2__mode-card, .gt3__mode-card) { min-height: 112px !important; padding: 16px !important; }
}/* Keep live announcements available to screen readers without painting a second copy in the game. */

.pg-standalone .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}/*
  Laptop-first game frame. Earlier cockpit rules tried to keep every possible
  game state inside one viewport. On ordinary school laptops that made the
  actual game area shrink unpredictably. The frame now has one stable width
  and lets a level use its natural height instead of compressing its contents.
*/

.pg-standalone {
  width: min(100%, 1420px);
  padding: max(74px, calc(env(safe-area-inset-top) + 62px)) clamp(12px, 2vw, 28px) 28px;
}

.pg-standalone .gb-protein-game__main {
  overflow: visible;
}

.pg-film-menu {
  position: relative;
}

.pg-film-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 11px;
  color: #385c55;
  background: #f8fbfa;
  border: 1px solid #cbdedb;
  border-radius: 9px;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 800;
  list-style: none;
}

.pg-film-menu > summary::-webkit-details-marker { display: none; }

.pg-film-menu[open] > summary { color: #185b4c; background: #e2f5ed; border-color: #8cccb6; }

.pg-film-menu__panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 7px);
  left: 0;
  display: grid;
  width: max-content;
  min-width: 180px;
  gap: 5px;
  padding: 9px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #cbdedb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(35, 73, 67, .16);
}

.pg-film-menu__panel > strong {
  padding: 2px 5px 4px;
  color: #55716b;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pg-film-menu .pg-film {
  min-height: 36px;
  padding: 6px 9px;
  color: #294b47;
  background: #f5faf8;
  border: 1px solid #d6e6e1;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  text-align: left;
}

.pg-film-menu .pg-film:hover { background: #e7f5ef; }

@media (max-width: 900px) {

  .pg-standalone { padding-inline: 0; }

  .pg-film-menu__panel { left: auto; right: 0; }
}/* Immersive game cabinet: one self-contained game space instead of a web page of controls. */

.pg-standalone {
  width: min(100%, 1480px);
  padding-top: max(78px, calc(env(safe-area-inset-top) + 66px));
}

.pg-standalone .gb-protein-game__shell {
  position: relative;
  overflow: hidden;
  background: #103d3b;
  border: 1px solid rgba(113, 183, 166, .72);
  border-radius: 28px;
  box-shadow: 0 28px 76px rgba(20, 65, 60, .22), inset 0 0 0 6px rgba(255, 255, 255, .24);
}

.pg-standalone .gb-protein-game__main {
  min-height: min(820px, calc(100dvh - 112px));
  background: linear-gradient(145deg, #edf7f3, #e5f1ee);
}

.gb-protein-game__gamebar {
  position: sticky;
  z-index: 90;
  top: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 200px) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 7px 14px;
  color: #edf8f4;
  background: linear-gradient(105deg, #174f4a, #153b43 62%, #293c57);
  border-bottom: 1px solid rgba(203, 242, 228, .24);
  box-sizing: border-box;
}

.gb-protein-game__gamebar-title { display: grid; min-width: 0; gap: 1px; }

.gb-protein-game__gamebar-title > span { color: #a8ddcb; font-size: 8px; font-weight: 900; letter-spacing: .12em; }

.gb-protein-game__gamebar-title strong { overflow: hidden; font-size: 14px; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }

.gb-protein-game__gamebar-title small { color: #cae4dc; font-size: 9px; font-weight: 700; letter-spacing: .05em; }

.gb-protein-game__gamebar-progress { display: grid; gap: 7px; color: #cce8df; font-size: 9px; font-weight: 800; text-align: center; }

.gb-protein-game__gamebar-progress .gb-protein-game__journey-track { height: 5px; margin: 0; background: rgba(220, 247, 237, .22); }

.gb-protein-game__gamebar-actions { display: flex; align-items: center; gap: 6px; }

.gb-protein-game__gamebar-actions button { min-height: 38px; padding: 0 11px; color: #effaf6; background: rgba(255, 255, 255, .11); border: 1px solid rgba(220, 247, 237, .30); border-radius: 999px; cursor: pointer; font: 800 12px/1 Inter, system-ui, sans-serif; }

.gb-protein-game__gamebar-actions button:hover { background: rgba(255, 255, 255, .20); }

.gb-protein-game__gamebar-actions [data-gb-fullscreen] { width: 38px; padding: 0; font-size: 19px; }

.gb-protein-game__gamebar-actions .gb-protein-game__music { width: 38px; height: 38px; min-height: 38px; padding: 0; color: #effaf6; background: rgba(255, 255, 255, .11); border-color: rgba(220, 247, 237, .30); }

.gb-protein-game__menu {
  position: absolute;
  z-index: 120;
  top: 70px;
  right: 14px;
  left: 14px;
  max-width: 1080px;
  max-height: min(680px, calc(100dvh - 120px));
  margin: 0 auto;
  padding: 18px;
  overflow: auto;
  color: #2a4c46;
  background: linear-gradient(145deg, rgba(250, 254, 252, .99), rgba(237, 242, 250, .99));
  border: 1px solid #b6d6cc;
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(10, 44, 43, .38);
  box-sizing: border-box;
}

.gb-protein-game__menu[hidden] { display: none; }

.gb-protein-game__menu > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }

.gb-protein-game__menu > header span { color: #5a7c73; font-size: 9px; font-weight: 900; letter-spacing: .11em; }

.gb-protein-game__menu > header h2 { margin: 3px 0 0; font-size: 21px; }

.gb-protein-game__menu > header button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: #315a52; background: #eff7f3; border: 1px solid #c4ddd4; border-radius: 50%; cursor: pointer; font-size: 24px; }

.gb-protein-game__menu .gb-protein-game__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }

.gb-protein-game__menu .pg-round-tab { min-height: 86px; padding: 12px 9px; color: #315951; background: #f4faf7; border-color: #c8dfd7; border-radius: 13px; }

.gb-protein-game__menu .pg-round-tab--question { background: #f6f2fb; border-color: #d9cbea; }

.gb-protein-game__menu .pg-round-tab.is-active { color: #174f43; background: #dff4eb; border-color: #51ad90; box-shadow: 0 5px 14px rgba(45, 120, 97, .16); }

.gb-protein-game__menu .pg-round-tab em { color: #5c7c74; font-size: 8px; }

.gb-protein-game__menu .pg-round-tab strong { font-size: 12px; }

.gb-protein-game__menu .pg-round-tab small { font-size: 10px; }

.gb-protein-game__menu-tools { margin-top: 18px; padding-top: 16px; border-top: 1px solid #d4e5df; }

.gb-protein-game__menu-tools h3 { margin: 0 0 9px; color: #5c7c74; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.gb-protein-game__menu-tools > div { display: flex; flex-wrap: wrap; gap: 7px; }

.gb-protein-game__menu-tools :is(button, a) { min-height: 36px; padding: 0 11px; color: #315a52; background: #fff; border: 1px solid #c8dfd7; border-radius: 8px; font: 750 12px/1 Inter, system-ui, sans-serif; text-decoration: none; }

.gb-protein-game__menu-scores .pg-scores { display: none; }

.gb-protein-game__launch {
  position: absolute;
  z-index: 200;
  inset: 0;
  display: grid;
  min-height: min(820px, calc(100dvh - 112px));
  place-items: center;
  overflow: hidden;
  color: #f2fcf8;
  background: #113f3e;
}

.gb-protein-game__launch[hidden] { display: none; }

.gb-protein-game__launch-scene { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 44, 43, .91), rgba(16, 58, 62, .63) 53%, rgba(42, 40, 76, .50)), url("assets/protein-game/cell-environment-v1.webp") center / cover; }

.gb-protein-game__launch-scene::after { position: absolute; inset: 0; background: radial-gradient(circle at 72% 38%, rgba(151, 222, 195, .24), transparent 22%), radial-gradient(circle at 20% 75%, rgba(168, 139, 228, .18), transparent 28%); content: ""; }

.gb-protein-game__launch-copy { position: relative; width: min(100% - 40px, 720px); padding: clamp(28px, 5vw, 58px); text-align: center; }


.gb-protein-game__launch-copy h1 { margin: 16px auto; max-width: 19ch; font-size: clamp(32px, 5vw, 58px); line-height: 1.06; letter-spacing: -.04em; }

.gb-protein-game__launch-copy p { max-width: 50ch; margin: 0 auto 27px; color: #d5ebe3; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.55; }

.gb-protein-game__launch-copy button { min-height: 58px; padding: 0 25px; color: #143f3b; background: linear-gradient(135deg, #b8f0d9, #f5da83); border: 1px solid #fff0b0; border-radius: 999px; box-shadow: 0 14px 34px rgba(0, 0, 0, .26); cursor: pointer; font: 900 16px/1 Inter, system-ui, sans-serif; }

.gb-protein-game__launch-copy button b { margin-left: 8px; font-size: 20px; }

.gb-protein-game__launch-copy small { display: block; margin-top: 16px; color: #b9d9ce; font-size: 11px; }

.gb-protein-game__launch-copy button:hover { transform: translateY(-2px); filter: brightness(1.04); }

.gb-protein-game__shell:fullscreen { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }

.gb-protein-game__shell:fullscreen .gb-protein-game__main,
.gb-protein-game__shell:fullscreen .gb-protein-game__launch { min-height: 100dvh; }

@media (max-width: 700px) {

  .pg-standalone { padding-top: max(62px, calc(env(safe-area-inset-top) + 54px)); }

  .pg-standalone .gb-protein-game__shell { border-radius: 16px; }

  .gb-protein-game__gamebar { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; min-height: 58px; padding-inline: 9px; }

  .gb-protein-game__gamebar-progress { display: none; }

  .gb-protein-game__gamebar-title strong { font-size: 12px; }

  .gb-protein-game__gamebar-title small { font-size: 8px; }

  .gb-protein-game__gamebar-actions { gap: 4px; }

  .gb-protein-game__gamebar-actions button { min-height: 34px; padding-inline: 8px; }

  .gb-protein-game__gamebar-actions [data-gb-fullscreen] { display: none; }

  .gb-protein-game__gamebar-actions .gb-protein-game__music { width: 34px; height: 34px; min-height: 34px; }

  .gb-protein-game__menu { top: 64px; right: 7px; left: 7px; padding: 14px; }

  .gb-protein-game__menu .gb-protein-game__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gb-protein-game__menu .pg-round-tab { min-height: 78px; }

  .gb-protein-game__menu .pg-round-tab strong { font-size: 10px; }

  .gb-protein-game__launch-copy { width: min(100% - 20px, 620px); padding: 28px 18px; }
}

/* Question missions use the same fixed cabinet rhythm as the active levels:
   the scene may shrink, but the answer tray never leaves the frame. */
@media (min-width: 901px) {

  .pg-standalone .pg-round {
    overflow: hidden;
  }

  .pg-standalone .pg-round--question > :is(.gb-dna-builder, .gb-rna-nucleotide-builder, .gb-translation-intro),
  .pg-standalone .pg-round--question :is(.gb0__cabinet, .gr2__cabinet, .gti__cabinet) {
    display: flex;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }

  .pg-standalone .pg-round--question :is(.gb0__stage, .gr2__stage, .gti__stage) {
    min-height: 0;
    padding-block: clamp(10px, 1.5vh, 18px);
    flex: 1 1 0;
    overflow: hidden !important;
    align-content: center !important;
  }

  .pg-standalone .pg-round--question :is(.gb0__controls, .gr2__controls) {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin-top: auto;
  }

  .pg-standalone .pg-round--question .gb0__lesson--pairs .gb0__fragment {
    min-height: min(390px, 42vh);
  }

}/* Level 1 and 2 use one stable cockpit: scene, guidance, then the same base keyboard. */

.pg-standalone .pg-round--level :is(.gb-dna-builder__stage, .gb2__stage) {
  min-height: 0;
  flex: 1 1 auto;
}

.pg-standalone .pg-round--level .gb-dna-builder__helix-progress { display: none; }

.pg-standalone .pg-round--level :is(.gb-dna-builder__controls, .gb2__controls) {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  background: rgba(248, 252, 250, .96);
  border-top: 1px solid rgba(139, 187, 176, .34);
}

.pg-standalone .pg-round--level :is(.gb-dna-builder__base-button, .gb2__base-button) {
  min-height: 70px;
  border-radius: 999px;
  box-shadow: 0 6px 0 rgba(42, 92, 82, .24), 0 10px 22px rgba(42, 78, 82, .09);
}

.pg-standalone .pg-round--level :is(.gb-dna-builder__base-button > span, .gb2__base-button > strong) {
  font: 900 1.25rem Consolas, "Courier New", monospace;
}

.pg-standalone .pg-round--level :is(.gb-dna-builder__base-button, .gb2__base-button) small {
  font-size: .72rem;
  font-weight: 800;
}/* Start menus sit on calm, level-specific science imagery instead of a frozen half-built lane. */

.pg-standalone .gb-dna-builder[data-state="idle"] .gb-dna-builder__stage {
  background:
    linear-gradient(rgba(239, 248, 245, .28), rgba(235, 242, 249, .24)),
    url("assets/protein-game/dna-basepair-menu-bg-v1.png") center / cover no-repeat !important;
}

.pg-standalone .gb-rna-builder[data-phase="idle"] .gb2__stage {
  background:
    linear-gradient(rgba(239, 248, 245, .28), rgba(235, 242, 249, .24)),
    url("assets/protein-game/transcription-menu-bg-v1.png") center / cover no-repeat !important;
}

.pg-standalone .gb-dna-builder[data-state="idle"] :is(.gb-dna-builder__direction, .gb-dna-builder__track, .gb-dna-builder__target),
.pg-standalone .gb-rna-builder[data-phase="idle"] :is(.gb2__sequence-label, .gb2__dna-window, .gb2__mrna) {
  display: none !important;
}

@media (max-width: 560px) {

  .pg-standalone .pg-round--level :is(.gb-dna-builder__controls, .gb2__controls) { gap: 5px; padding: 8px 6px 10px; }

  .pg-standalone .pg-round--level :is(.gb-dna-builder__base-button, .gb2__base-button) { min-height: 60px; }
}/* Results are full, calm end screens rather than small scrollable overlays on top of the game. */

.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__decoder-slot { display: none !important; }

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__stage,
.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__stage,
.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__stage {
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto;
}

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__stage { background: linear-gradient(rgba(239,248,245,.35),rgba(235,242,249,.3)),url("assets/protein-game/dna-basepair-menu-bg-v1.png") center/cover no-repeat !important; }

@media (max-width:900px) {
  .pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__stage,
  .pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__stage,
  .pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__stage {
    min-height:calc(100svh - 110px) !important;
  }
}

.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__stage { background: linear-gradient(rgba(239,248,245,.35),rgba(235,242,249,.3)),url("assets/protein-game/transcription-menu-bg-v1.png") center/cover no-repeat !important; }

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay,
.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__overlay,
.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__overlay {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  min-height: 0 !important;
  height: 100% !important;
  place-items: center !important;
  padding: clamp(18px,3vw,38px) !important;
  overflow-y: auto !important;
  background: rgba(236,246,243,.22) !important;
  backdrop-filter: none !important;
  box-sizing: border-box;
}

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-panel,
.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__overlay-panel,
.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__overlay-panel {
  width: min(100%,980px) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: clamp(22px,3vw,34px) !important;
  color: #345852 !important;
  background: linear-gradient(125deg,rgba(247,252,249,.97),rgba(239,239,248,.96)) !important;
  border: 1px solid rgba(153,196,186,.65) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 52px rgba(32,78,70,.18) !important;
  text-align: center !important;
}

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-panel h3,
.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__overlay-panel h3,
.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__overlay-panel h3 { color: #294b47 !important; }

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dl,
.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__results,
.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__results {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  margin: 20px 0 0;
}

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dl > div,
.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__results > div,
.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__results > div {
  min-height: 72px;
  align-content: center;
  padding: 10px;
  color: #375d57;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(171,204,196,.62) !important;
  border-radius: 14px !important;
  text-align: center !important;
}

.pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-actions,
.pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__result-actions,
.pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__result-actions {
  display: flex !important;
  justify-content: center;
  gap: 12px !important;
  margin: 18px 0 0 !important;
}
@media (max-width: 900px) {

  .pg-standalone .gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dl,
  .pg-standalone .gb-rna-builder:is([data-phase="completed"], [data-phase="failed"]) .gb2__results,
  .pg-standalone .gt3__cabinet:is([data-gt3-phase="completed"], [data-gt3-phase="failed"]) .gt3__results { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Final laptop game-window finish: a stable cabinet with internal scrolling only. */
@media (min-width: 901px) {

  .pg-standalone .gb-protein-game__shell {
    height: min(860px, calc(100dvh - 118px));
  }

  .pg-standalone .gb-protein-game__main {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .pg-standalone .gb-protein-game__gamebar {
    flex: 0 0 auto;
  }

  .pg-standalone .gb-protein-game__message {
    flex: 0 0 auto;
  }

  .pg-standalone .pg-round {
    display: block;
    min-height: 0;
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #8bbfb0 transparent;
  }
}/* A compact mission map with a visible score desk instead of a giant drop-down. */

.gb-protein-game__menu {
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 0 18px;
}

.gb-protein-game__menu[hidden] { display: none; }

.gb-protein-game__menu > header { grid-column: 1 / -1; }

.gb-protein-game__menu .gb-protein-game__nav { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.gb-protein-game__menu .pg-round-tab { min-height: 58px; padding: 7px 8px; }

.gb-protein-game__menu .pg-round-tab em { margin-bottom: 2px; }

.gb-protein-game__menu .pg-round-tab strong { font-size: 10px; }

.gb-protein-game__menu .pg-round-tab small { display: none; }

.gb-protein-game__menu-tools { grid-column: 2; grid-row: 2; margin: 0; padding: 0 0 14px; border-top: 0; border-bottom: 1px solid #d4e5df; }

.gb-protein-game__menu-tools > div { display: grid; gap: 6px; }

.gb-protein-game__menu-tools :is(button, a) { display: flex; align-items: center; min-height: 33px; padding-inline: 9px; font-size: 11px; }

.gb-protein-game__menu-tools button[hidden] { display: none; }

.gb-protein-game__menu-tools .pg-film-card {
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 9px;
  color: #28584e;
  background: linear-gradient(135deg, #ffffff, #eaf6f0);
  border-color: #bfdcd1;
  border-radius: 11px;
  box-shadow: 0 3px 8px rgba(42, 95, 82, .07);
  text-align: left;
}

.gb-protein-game__menu-tools .pg-film-card:hover { background: linear-gradient(135deg, #f8fffb, #dff3e9); transform: translateY(-1px); }

.gb-protein-game__menu-tools .pg-film-card__play {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  padding-left: 2px;
  color: #ffffff;
  background: linear-gradient(145deg, #46aa8a, #27735f);
  border-radius: 50%;
  box-shadow: 0 3px 7px rgba(33, 99, 80, .22);
  font-size: 9px;
}

.gb-protein-game__menu-tools .pg-film-card > span:last-child { display: grid; gap: 1px; font-weight: 850; line-height: 1.05; }

.gb-protein-game__menu-tools .pg-film-card small { color: #6a887f; font-size: 7px; font-weight: 900; letter-spacing: .09em; }

.gb-protein-game__menu-tools .pg-film-card--middle .pg-film-card__play { background: linear-gradient(145deg, #6383a8, #445779); }

.gb-protein-game__menu-tools .pg-film-card--finale .pg-film-card__play { background: linear-gradient(145deg, #9275bb, #65447f); }

.gb-protein-game__menu-scores { grid-column: 2; grid-row: 3; }

.gb-protein-game__menu-scores .pg-scores { display: block; margin: 14px 0 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }

.gb-protein-game__menu-scores .pg-scores h2 { color: #315a52; font-size: 13px; font-weight: 850; }

.gb-protein-game__menu-scores .pg-scores-level { display: block; margin-top: -2px; font-size: 10px; }

.gb-protein-game__menu-scores .pg-scores ol { min-height: 0; }

.gb-protein-game__menu-scores .pg-scores li { min-height: 24px; padding: 5px 0; font-size: 11px; }

.gb-protein-game__menu-scores .pg-scores li strong { font-size: 11px; }

.gb-protein-game__menu-scores .pg-scores [data-status]:not([hidden]) { font-size: 10px; }

.gb-protein-game__gamebar-actions [data-gb-scores] { display: inline-flex; align-items: center; gap: 5px; color: #f3dc8d; }

/* One compact status strip in the shared toolbar replaces the repeated HUD
   rows inside the three active game boards. */
@media (min-width: 621px) {

  .gb-protein-game__gamebar { grid-template-columns: minmax(0, 1fr) minmax(230px, 360px) minmax(0, 1fr); gap: 12px; }

  .gb-protein-game__gamebar-title { grid-column: 1; grid-row: 1; }

  .gb-protein-game__gamebar-status { grid-column: 2; grid-row: 1; }

  .gb-protein-game__gamebar-progress { grid-column: 3; grid-row: 1; width: min(calc(100% - 170px), 190px); justify-self: end; margin-right: 170px; }

  .gb-protein-game__gamebar-actions { grid-column: 3; grid-row: 1; justify-self: end; }

  .gb-protein-game__gamebar-status { display: flex; min-width: 0; align-items:stretch; justify-content:center; overflow:hidden; border:1px solid rgba(220,247,237,.24); border-radius:10px; background:rgba(7,36,42,.18); }/* Keep this grid slot when a level has no live counters. Without the
     reserved slot, progress and actions move left and the toolbar jumps. */

  .gb-protein-game__gamebar-status[hidden] { display:flex; visibility:hidden; pointer-events:none; }

  .gb-protein-game__gamebar-status>span { display:grid; flex:1 1 0; min-width:0; align-content:center; gap:2px; padding:5px 10px; border-right:1px solid rgba(220,247,237,.18); text-align:center; }

  .gb-protein-game__gamebar-status>span:last-child { border-right:0; }

  .gb-protein-game__gamebar-status small { overflow:hidden; color:#b9dcd3; font-size:8px; font-weight:850; letter-spacing:.055em; text-overflow:ellipsis; white-space:nowrap; }

  .gb-protein-game__gamebar-status strong { color:#fff; font:900 14px/1.05 Consolas,"Courier New",monospace; }

  .gb-protein-game__gamebar-status.is-feedback > span { padding-inline:14px; }

  .gb-protein-game__gamebar-status.is-feedback strong { overflow:hidden; font:800 11px/1.25 Inter,system-ui,sans-serif; text-overflow:clip; white-space:normal; }

  .gb-protein-game :is(.gb-dna-builder__hud,.gb2__hud,.gt3__hud) { display:none!important; }
}

@media (min-width: 621px) and (max-width: 1100px) {

  .gb-protein-game__gamebar-progress { display: none; }
}/* Modern shared finish: every mission keeps its science content, but speaks the
   same calm game language inside the cabinet. */

.pg-standalone .gb-protein-game__shell {
  box-shadow: 0 30px 82px rgba(15, 59, 55, .26), 0 0 0 5px rgba(255, 255, 255, .27), inset 0 0 46px rgba(145, 220, 195, .08);
}

.gb-protein-game__gamebar {
  background: linear-gradient(105deg, #123f3d 0%, #1a5450 50%, #34466a 100%);
}

.gb-protein-game__gamebar::after {
  position: absolute;
  right: 17%;
  bottom: 0;
  left: 9%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(164, 239, 207, .7), transparent);
}

.gb-protein-game__gamebar-actions button { transition: transform .16s ease, background .16s ease, border-color .16s ease; }

.gb-protein-game__gamebar-actions button:hover { border-color: rgba(226, 255, 244, .7); transform: translateY(-1px); }

.gb-protein-game__menu .pg-round-tab { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }

.gb-protein-game__menu .pg-round-tab:not([data-locked="true"]):hover { transform: translateY(-2px); border-color: #75bca8; box-shadow: 0 8px 17px rgba(46, 110, 92, .12); }

.gb-protein-game__menu .pg-round-tab em::before { content: "● "; color: #4db28f; font-size: 7px; }

.pg-standalone .pg-round :is(.gb0__header, .gr2__header, .gb-dna-builder__topbar, .gb2__topbar, .gti__header, .gt3__topbar) {
  position: relative;
  overflow: hidden;
}

.pg-standalone .pg-round :is(.gb0__header, .gr2__header, .gb-dna-builder__topbar, .gb2__topbar, .gti__header, .gt3__topbar)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #78d1b1, #d1bbeb 55%, transparent);
  opacity: .78;
}

.pg-standalone .pg-round :is(.gb0__controls, .gr2__controls, .gb-dna-builder__controls, .gb2__controls, .gt3__decoder-slot) {
  box-shadow: 0 -8px 24px rgba(34, 80, 70, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.pg-standalone .pg-round button:focus-visible,
.gb-protein-game__menu button:focus-visible,
.gb-protein-game__gamebar button:focus-visible {
  outline: 3px solid #e8c875;
  outline-offset: 3px;
}/* The score desk is deliberately prominent: pupils can compare the three
   Endless modes without leaving the game. */

.gb-protein-game__menu-scores .pg-scores {
  padding: 14px 0 0;
  color: #30574f;
  border-top: 1px solid #d5e4de;
}

.gb-protein-game__menu-scores .pg-scores header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 9px; }

.gb-protein-game__menu-scores .pg-scores header > div { display: grid; gap: 1px; }

.gb-protein-game__menu-scores .pg-scores header small { color: #6b887f; font-size: 7px; font-weight: 900; letter-spacing: .09em; }

.gb-protein-game__menu-scores .pg-scores h2 { margin: 0; color: #254f47; font-size: 17px; letter-spacing: -.02em; }

.gb-protein-game__menu-scores .pg-scores-level { margin: 0; color: #648078; font-size: 10px; }

.gb-protein-game__menu-scores .pg-scores-live { color: #54ae8d; font-size: 13px; line-height: 1; text-shadow: 0 0 10px rgba(84, 174, 141, .52); }

.gb-protein-game__menu-scores .pg-scores nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 9px 0 8px; }

.gb-protein-game__menu-scores .pg-scores nav button { min-height: 27px; padding: 0 4px; color: #607b73; background: #f3f8f5; border: 1px solid #d3e3dd; border-radius: 7px; font: 800 9px/1 Inter, system-ui, sans-serif; cursor: pointer; }

.gb-protein-game__menu-scores .pg-scores nav button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #3a9278, #287061); border-color: #287061; box-shadow: 0 3px 8px rgba(35, 106, 88, .22); }

.gb-protein-game__menu-scores .pg-scores ol { min-height: 0; gap: 2px; }

.gb-protein-game__menu-scores .pg-scores li { min-height: 27px; padding: 5px 2px; color: #49675f; border-bottom: 1px solid #e2ece7; }

.gb-protein-game__menu-scores .pg-scores li:first-child { color: #5a4724; background: linear-gradient(90deg, rgba(247, 220, 141, .22), transparent); }

.gb-protein-game__menu-scores .pg-scores li:before { width: 16px; color: #7c958d; font-size: 9px; }

.gb-protein-game__menu-scores .pg-scores li:first-child:before { color: #b68120; }

.gb-protein-game__menu-scores .pg-scores [data-status]:not([hidden]) { margin: 8px 0 0; padding: 7px; color: #637b74; background: #f1f6f3; border-radius: 7px; line-height: 1.35; }

/* DNA pairing and RNA transcription share one diagram and answer layout. */
@media (min-width: 901px) {

  .pg-standalone .gb-protein-game .pg-round--question .pg-pairing-lesson {
    display: grid;
    width: min(100%, 1500px);
    height: 100%;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 22px;
    margin: 0 auto;
    padding: 0 !important;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-title {
    margin: 0 !important;
    color: #294f47 !important;
    font: 800 clamp(24px, 2.3vw, 34px)/1.2 Inter, system-ui, sans-serif !important;
    text-align: left;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    margin: 0;
    grid-template-rows: 32px minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 14px 18px;
    background: linear-gradient(125deg, #effaf3e8, #eee8f5e6) !important;
    border: 1px solid #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 7px 22px #395c4910 !important;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card .pg-pairing-direction {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
    padding: 0;
    color: #496861;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: 800 10px/1.3 Inter, system-ui, sans-serif;
    text-align: center;
    text-transform: uppercase;
    backdrop-filter: none;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card .pg-pairing-direction strong {
    display: grid;
    height: 28px;
    min-height: 0;
    place-items: center;
    margin: 0;
    color: #315f52;
    background: #e4f3ed;
    border: 1px solid #bdded1;
    border-radius: 8px;
    box-shadow: none;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card .pg-pairing-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--pg-pair-count), minmax(0, 156px));
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card .pg-pairing-column {
    display: grid;
    grid-template-rows: 38px 22px 38px 18px;
    gap: 0;
    height: 132px;
    min-height: 0;
    margin: 0;
    justify-items: center;
    align-items: center;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: none;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card .pg-pairing-column.is-active {
    border-color: #eabb47;
    background: #fff9e9;
    box-shadow: 0 0 0 3px #f4d57b30;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card :is(.gb0__mini-backbone, .gb0__base-arm) { display: none; }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card .pg-pairing-base {
    display: grid;
    width: 58px;
    height: 40px;
    min-height: 0;
    place-items: center;
    color: #294f47;
    background: var(--pg-pair-color, #f7fbf9);
    border: 2px solid var(--pg-pair-border, #b7cdc5);
    border-radius: 10px;
    box-shadow: none;
    font: 850 18px/1 Inter, system-ui, sans-serif;
  }

  .pg-pairing-base--a { --pg-pair-color: #f7d578; --pg-pair-border: #d5a72e; }

  .pg-pairing-base--t { --pg-pair-color: #7ac9e5; --pg-pair-border: #459dbb; }

  .pg-pairing-base--c { --pg-pair-color: #76d6b0; --pg-pair-border: #42a780; }

  .pg-pairing-base--g { --pg-pair-color: #baa1e6; --pg-pair-border: #8f72bd; }

  .pg-pairing-base--u { --pg-pair-color: #a27bd9; --pg-pair-border: #8056ba; }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card .pg-pairing-base.is-empty {
    color: #778e86;
    background: #f7fbf9;
    border: 2px dashed #acc5bc;
    box-shadow: none;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-card :is(.pg-pairing-result, .gb0__pair-name) {
    display: block;
    min-height: 22px;
    padding: 0;
    color: #496861;
    background: none;
    font: 600 10px/1.3 Inter, system-ui, sans-serif;
    text-align: center;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .gb0__pair-name span { margin-left: 4px; color: inherit; font-size: 9px; }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-note {
    min-height: 36px;
    margin: 0 !important;
    color: #496861 !important;
    font: 500 12px/1.5 Inter, system-ui, sans-serif !important;
    text-align: center;
  }

  .pg-standalone .gb-protein-game .pg-pairing-lesson .pg-pairing-note strong { color: #315f52 !important; }

  .pg-standalone .gb-protein-game .pg-pairing-prompt {
    height: 22px;
    margin: 0 0 8px !important;
    color: #315f52 !important;
    font: 750 13px/1.5 Inter, system-ui, sans-serif !important;
    letter-spacing: 0;
    text-align: center;
  }

  .pg-standalone .gb-dna-builder--level-0 .gb0__completion-controls {
    width: calc(100% - clamp(28px, 6vw, 140px));
    max-width: none;
    min-height: 74px;
    padding: 13px clamp(16px, 2vw, 28px);
    border-radius: 14px;
  }

  .pg-standalone .pg-round--question :is(.gb0__controls, .gr2__controls) > :is(.gb0__bases, .gb0__parts, .gr2__bases, .gr2__parts) {
    width: min(100%, 1280px);
    margin-inline: auto;
  }
}/* A short, intentional completion moment gives every unlocked mission a clear
   next step without sending pupils hunting in the menu. */

.pg-standalone .gb-protein-game__main { position: relative; }

.gb-protein-game__unlock-dialog {
  position: absolute;
  z-index: 110;
  inset: 64px 0 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(11, 50, 47, .25);
  backdrop-filter: blur(3px);
}

.gb-protein-game__unlock-dialog[hidden] { display: none; }

.gb-protein-game__unlock-dialog > div {
  width: min(100%, 500px);
  padding: clamp(24px, 4vw, 42px);
  color: #294e47;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(230,247,239,.98));
  border: 1px solid #9ed5c2;
  border-radius: 24px;
  box-shadow: 0 22px 56px rgba(11, 55, 49, .32), inset 0 0 0 5px rgba(255,255,255,.44);
  text-align: center;
}

.gb-protein-game__unlock-dialog > div > span { color: #32836b; font-size: 10px; font-weight: 900; letter-spacing: .13em; }

.gb-protein-game__unlock-dialog h2 { margin: 9px 0 8px; color: #1f5147; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }

.gb-protein-game__unlock-dialog p { margin: 0 auto 22px; max-width: 40ch; color: #54756d; line-height: 1.5; }

.gb-protein-game__unlock-dialog button { min-height: 48px; padding: 0 18px; border-radius: 999px; cursor: pointer; font: 850 14px/1 Inter, system-ui, sans-serif; }

.gb-protein-game__unlock-dialog [data-gb-unlock-action="next"] { color: #143d37; background: linear-gradient(135deg, #a9ead0, #f1d67b); border: 1px solid #d7e7ac; box-shadow: 0 7px 16px rgba(51, 111, 87, .18); }

.gb-protein-game__unlock-dialog [data-gb-unlock-action="stay"] { display: block; margin: 11px auto 0; color: #617b74; background: transparent; border: 0; font-size: 12px; }

/* One authoritative desktop geometry for the new cabinet.  Every mission gets
   the same available canvas; component-specific CSS may style its contents,
   but may not collapse the round itself. */
@media (min-width: 901px) {

  .pg-standalone .pg-round > :is(.gb-dna-builder, .gb-rna-nucleotide-builder, .gb-rna-builder, .gb-translation-intro, .gb-translation-game),
  .pg-standalone .pg-round :is(.gb0__cabinet, .gr2__cabinet, .gb-dna-builder__cabinet, .gb2__cabinet, .gti__cabinet, .gt3__cabinet) {
    height: 100%;
    min-height: 0;
  }

  .pg-standalone .pg-round .gt3__cabinet {
    display: flex;
    flex-direction: column;
  }

  .pg-standalone .pg-round .gt3__hud,
  .pg-standalone .pg-round .gt3__decoder-slot {
    flex: 0 0 auto;
  }

  .pg-standalone .pg-round .gt3__stage {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto;
  }

  .pg-standalone .pg-round .gt3__cabinet[data-gt3-phase="idle"] .gt3__stage {
    position: relative;
    min-height: 0;
  }

  .pg-standalone .pg-round .gt3__cabinet[data-gt3-phase="idle"] .gt3__overlay {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(14px, 2vw, 28px);
    overflow: hidden !important;
    place-items: center;
  }
}

/* Desktop menu: the journey is a single compact column, with a dedicated
   score desk beside it instead of mixing missions and scores together. */
@media (min-width: 701px) {

  .gb-protein-game__menu {
    max-width: 1120px;
    grid-template-columns: minmax(245px, 1fr) minmax(245px, 1fr) 285px;
    gap: 0 14px;
  }

  .gb-protein-game__menu .gb-protein-game__nav {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .gb-protein-game__menu .pg-round-tab {
    min-height: 50px;
    padding: 5px 24px 5px 9px;
    border-radius: 11px;
  }

  .gb-protein-game__menu .pg-round-tab em { margin-bottom: 1px; font-size: 7px; }

  .gb-protein-game__menu .pg-round-tab strong { font-size: 9px; }

  .gb-protein-game__menu .pg-round-tab .gb-protein-game__lock { right: 9px; width: 16px; height: 16px; font-size: 10px; }

  .gb-protein-game__menu-tools {
    grid-column: 3;
    grid-row: 1;
    padding-top: 48px;
  }

  .gb-protein-game__menu-scores {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
  }

  .gb-protein-game__menu-scores .pg-scores {
    height: 100%;
    margin: 0;
    padding: 0 0 0 14px;
    border-top: 0;
    border-left: 1px solid #d4e5df;
  }

  .gb-protein-game__menu > header {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    margin: 0;
  }
}

/* Menuet skal læses som tre tydelige områder – en kort missionliste, en
   centreret scoretavle og smalle filmgenveje – også på brede laptops. */
@media (min-width: 701px) {

  .pg-standalone .gb-protein-game__menu {
    right: auto;
    left: 50%;
    width: min(calc(100% - 44px), 1120px);
    max-width: 1120px;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr) minmax(0, .85fr);
    column-gap: 22px;
    transform: translateX(-50%);
  }

  .pg-standalone .gb-protein-game__menu .gb-protein-game__nav {
    width: 100%;
    grid-row: 2;
  }

  .pg-standalone .gb-protein-game__menu .pg-round-tab {
    min-height: 44px;
    padding: 7px 26px 7px 14px;
    border-radius: 14px !important;
    text-align: left;
    align-items: start;
  }

  .pg-standalone .gb-protein-game__menu .pg-round-tab strong { font-size: 12px; }

  .pg-standalone .gb-protein-game__menu .pg-round-tab em { font-size: 9px; }

  .pg-standalone .gb-protein-game__menu > header { position: static; grid-row: 1; margin: 0 0 16px; }

  .pg-standalone .gb-protein-game__menu > header h2 { font-size: 22px; }

  .pg-standalone .gb-protein-game__menu .pg-menu-heading { grid-column: 1 / -1; margin: 0 0 8px; color: #5c7c74; font: 800 11px/1.3 Inter,system-ui,sans-serif; letter-spacing: .06em; text-transform: uppercase; }

  .pg-standalone .gb-protein-game__menu-tools {
    width: 100%;
    grid-row: 2;
    padding-top: 0;
    border-bottom: 0;
    justify-self: end;
  }

  .pg-standalone .gb-protein-game__menu-tools .pg-film-card {
    min-height: 43px;
    padding-block: 6px;
    border-radius: 14px;
  }

  .pg-standalone .gb-protein-game__menu-scores {
    display: grid;
    width: min(100%, 460px);
    justify-self: center;
    align-self: start;
    grid-row: 2;
    padding: 14px;
    background: rgba(255,255,255,.65);
    border: 1px solid #d7e7e1;
    border-radius: 16px;
  }

  .pg-standalone .gb-protein-game__menu-scores .pg-scores {
    height: auto;
    padding: 0;
    border-left: 0;
    text-align: center;
  }

  .pg-standalone .gb-protein-game__menu-scores .pg-scores header {
    justify-content: center;
  }

  .pg-standalone .gb-protein-game__menu-scores .pg-scores header > div {
    justify-items: center;
  }

  .pg-standalone .gb-protein-game__menu-scores .pg-scores-live {
    display: none;
  }
}

/* The base choices are one shared classroom tool: the same soft, wide keys
   in the two structure rounds and the two active sequence rounds. */
@media (min-width: 901px) {

  .pg-standalone .pg-round :is(.gb0__bases, .gr2__bases) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0 -1px -1px;
    padding: 10px 14px 12px;
    background: rgba(248, 252, 250, .96);
    border-top: 1px solid rgba(139, 187, 176, .34);
  }

  .pg-standalone .pg-round :is(.gb0__base-button, .gr2__base-button, .gb-dna-builder__base-button, .gb2__base-button) {
    min-height: 64px !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 0 rgba(42, 92, 82, .24), 0 10px 22px rgba(42, 78, 82, .09) !important;
  }

  .pg-standalone .pg-round :is(.gb0__base-button, .gr2__base-button) {
    gap: 8px;
  }

  .pg-standalone .pg-round :is(.gb0__base-button strong, .gr2__base-button strong, .gb-dna-builder__base-button > span, .gb2__base-button > strong) {
    font: 900 1.25rem Consolas, "Courier New", monospace;
  }

  .pg-standalone .pg-round :is(.gb0__base-button small, .gr2__base-button small, .gb-dna-builder__base-button small, .gb2__base-button small) {
    font-size: .72rem;
    font-weight: 800;
  }

  .pg-standalone .pg-round :is(.gb0__base-button.is-target, .gr2__base-button.is-target) {
    box-shadow: 0 0 0 3px #ffd166, 0 6px 0 rgba(42, 92, 82, .24), 0 10px 22px rgba(42, 78, 82, .09) !important;
  }/* Baseparring gets its living model back without taking space from the
     actual choice. The helix grows with every correct pair. */

  .pg-standalone .pg-round--level .gb-dna-builder__stage { order: 1; }

  .pg-standalone .pg-round--level .gb-dna-builder__coach { order: 2; }

  .pg-standalone .pg-round--level .gb-dna-builder__helix-progress {
    display: grid !important;
    order: 3;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    flex: 0 0 88px;
    width: min(calc(100% - 28px), 760px);
    min-height: 0;
    margin: 4px auto 6px;
    padding: 6px 12px;
    gap: 12px;
    border: 1px solid rgba(111, 180, 161, .6);
    border-radius: 18px;
    background: linear-gradient(110deg, rgba(229, 246, 240, .9), rgba(238, 231, 247, .86));
    box-shadow: 0 6px 16px rgba(42, 82, 72, .08);
    box-sizing: border-box;
  }

  .pg-standalone .pg-round--level .gb-dna-builder__helix-graphic {
    width: 100% !important;
    height: 68px !important;
    aspect-ratio: 560 / 190;
  }

  .pg-standalone .pg-round--level .gb-dna-builder__helix-copy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .pg-standalone .pg-round--level .gb-dna-builder__helix-copy span { font-size: .62rem; }

  .pg-standalone .pg-round--level .gb-dna-builder__helix-copy strong { font-size: .8rem; }

  .pg-standalone .pg-round--level .gb-dna-builder__helix-copy small { display: none; }

  .pg-standalone .pg-round--level .gb-dna-builder__controls { order: 4; }
}

/* The three films belong to the same cabinet as the missions. Their old
   standalone minimum heights left an empty strip below the picture on a
   laptop-sized game frame. */
@media (min-width: 901px) and (min-height: 560px) {

  .pg-standalone .gb-protein-game__shell > :is(.gb-protein-game__intro, .gb-protein-game__outro, .gb-protein-game__finale) {
    height: 100%;
    min-height: 0 !important;
    border-radius: 26px;
  }

  .pg-standalone .gb-protein-game__shell > :is(.gb-protein-game__intro, .gb-protein-game__outro, .gb-protein-game__finale) :is(.gb-protein-game__intro-copy, .gb-protein-game__outro-copy, .gb-protein-game__finale-copy) {
    right: 0;
    bottom: clamp(26px, 4.2vh, 48px);
    left: 0;
    width: min(590px, calc(100% - 48px));
    max-width: none !important;
    margin-inline: auto;
    padding: clamp(18px, 2vw, 24px);
  }

  .pg-standalone .gb-protein-game__shell > :is(.gb-protein-game__intro, .gb-protein-game__outro, .gb-protein-game__finale) :is(.gb-protein-game__intro-copy, .gb-protein-game__outro-copy, .gb-protein-game__finale-copy) h3 {
    font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
  }

  .pg-standalone .gb-protein-game__shell > :is(.gb-protein-game__intro, .gb-protein-game__outro, .gb-protein-game__finale) :is(.gb-protein-game__intro-copy, .gb-protein-game__outro-copy, .gb-protein-game__finale-copy) > p:nth-of-type(2) {
    font-size: clamp(.86rem, 1.2vw, 1rem) !important;
  }
}/* The three question missions share one learning rhythm: a centred prompt,
   a clear hands-on model, then the answer tools. Science imagery stays calm
   in the background instead of competing with the question. */

.pg-standalone .pg-round--question :is(.gb0__header, .gr2__header, .gti__header) {
  display: none !important;
}

@media (min-width: 901px) {

  .pg-standalone .pg-round--question .pg-concept-note {
    margin-top: 11px !important;
    padding-top: 10px;
    color: #426660 !important;
    border-top: 1px solid rgba(151, 207, 191, .5);
    font-size: .77rem !important;
    line-height: 1.45 !important;
  }

  .pg-standalone .pg-round--question .pg-concept-note strong {
    color: #277a65;
  }

  .pg-standalone .pg-round--question .pg-structure-question:has(.pg-structure-figure) {
    padding-right: 168px !important;
    padding-left: 28px !important;
    text-align: left;
  }

  .pg-standalone .pg-round--question .pg-structure-question:has(.pg-structure-figure) :is(h4, p) {
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: left;
  }
}

@media (max-width: 700px) {

  .gb-protein-game__menu { display: block; }

  .gb-protein-game__menu-tools { margin-top: 14px; padding-top: 14px; border-top: 1px solid #d4e5df; border-bottom: 0; }

  .gb-protein-game__menu-tools > div { display: flex; flex-wrap: wrap; }

  .gb-protein-game__menu-scores .pg-scores { margin-top: 16px; padding-top: 14px; border-top: 1px solid #d4e5df; }

  .gb-protein-game__gamebar-actions [data-gb-scores] span { display: none; }

  .gb-protein-game__gamebar-actions [data-gb-scores] { width: 34px; padding: 0; justify-content: center; }
}

/* The genetic-code table is deliberately narrower than the game frame, so it
   reads as one centred lookup tool instead of a wall of cells. */
@media (min-width: 761px) {

  .pg-standalone .pg-round--level .gt3__decoder {
    width: min(calc(100% - 72px), 1260px);
    margin-inline: auto;
  }
}

/* Translation keeps one readable focal point: the fixed ribosome reads the
   centred codon, while the lookup table gets the remaining vertical space. */
@media (min-width: 901px) {

  .pg-standalone .pg-round--level .gt3__stage {
    height: clamp(180px, 26dvh, 260px) !important;
    flex: 0 0 clamp(180px, 26dvh, 260px);
  }

  .pg-standalone .pg-round--level .gt3__ribosome {
    top: 10px;
    width: 330px;
    height: 190px;
  }

  .pg-standalone .pg-round--level .gt3__mrna { bottom: 18px; }

  .pg-standalone .pg-round--level .gt3__code-map {
    min-height: 0;
    grid-template-rows: auto repeat(4, minmax(0, 1fr));
  }
}/* The helix is the reward for building the strand, not decoration for the
   mode picker. It appears only once the base-pairing lane is active. */

.pg-standalone .pg-round--level .gb-dna-builder[data-state="idle"] .gb-dna-builder__helix-progress {
  display: none !important;
}/* Spend the outer card's space on the game itself. */

body #main-content.pg-standalone {
  width: calc(100% - 24px);
  padding: 8px 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pg-standalone > .gb-protein-game { padding: 0; background: transparent; border: 0; box-shadow: none; }
@media (min-width: 901px) {

  .pg-standalone .gb-protein-game__shell { height: calc(100dvh - 94px); }

  body[data-current-page] #main-content.pg-standalone { height: auto; min-height: 0; }
}

body[data-current-page] #main-content.pg-standalone { padding: 8px 0 12px; }
@media (min-width: 901px) {

  .pg-standalone .pg-round--level .gt3__decoder-slot { flex: 1 1 0; min-height: 0; }

  .pg-standalone .pg-round--level :is(.gt3__code-row, .gt3__code-cell, .gt3__code-third-axis) { min-height: 0; }
}

body.subject-page #main-content.pg-standalone > .gb-protein-game.subject-model {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Feedback remains in the toolbar on narrow screens without covering the title. */
@media(max-width:620px){

 .gb-protein-game__gamebar-title{grid-column:1;grid-row:1}

 .gb-protein-game__gamebar-actions{grid-column:2;grid-row:1}

 .gb-protein-game__gamebar-status{grid-column:1/-1;grid-row:2;min-width:0;padding:6px 8px;border:1px solid rgba(220,247,237,.24);border-radius:10px;background:rgba(7,36,42,.18)}

 .gb-protein-game__gamebar-status[hidden]{display:block;visibility:hidden}

 .gb-protein-game__gamebar-status.is-feedback strong{display:block;color:#fff;font:800 11px/1.4 Inter,system-ui,sans-serif;white-space:normal}
}
/* Reserve changing text before answers arrive, so the centred lesson does
   not move when a heading or feedback wraps onto its next line. */

.pg-standalone .gb-protein-game__gamebar-status.is-feedback { overflow-y: auto; }

.pg-standalone .gb-protein-game__gamebar-status { height: 48px; align-content: center; }

.pg-standalone .gb-protein-game__gamebar-status.is-feedback strong { display: block; overflow: visible; }

.pg-standalone :is(.gb-dna-builder__feedback, .gb2__feedback) { min-height: 3lh; }

.pg-standalone :is(.gb0__stage, .gr2__stage, .gb-dna-builder__stage, .gb2__stage, .gti__stage, .gt3__stage) { overflow-anchor: none; }
@media (max-width: 620px) {

  .pg-standalone .pg-structure-question h4 { min-height: 3lh; }

  .pg-standalone .gb-protein-game__gamebar-status { height: 64px; }
}

/* On low laptop screens, spend space on the complete lesson rather than
   nested padding. DNA and RNA retain the same question/model rhythm. */
@media (min-width:901px) and (max-height:850px) {

  .pg-standalone :is(.gb0__lesson,.gr2__lesson) { padding: 0 !important; }

  .pg-standalone :is(.gb0__lesson,.gr2__lesson) .pg-structure-question { padding: 10px 18px !important; padding-right: 160px !important; }

  .pg-standalone :is(.gb0__lesson,.gr2__lesson) .pg-structure-question h4 { font-size: clamp(24px, 2vw, 28px) !important; }

  .pg-standalone :is(.gb0__backbone-card,.gr2__backbone-card) { padding: 8px 18px !important; }

  .pg-standalone :is(.gb0__backbone-heading,.gr2__backbone-heading) { margin-bottom: 8px; }

  .pg-standalone :is(.gb0__backbone-scroll,.gr2__backbone-scroll) { padding-block: 2px; }

  .pg-standalone :is(.gb0__chain,.gr2__chain) { padding-block: 3px; }
}

.pg-standalone .gb-protein-game :is(p,h4) { font-family: Inter,system-ui,sans-serif !important; }/* Keep retry feedback inside the scene so the codon table never moves. */

.pg-standalone .gt3__overlay:has(.gt3__overlay-panel--retry) { padding: 8px; }

.pg-standalone .gb-protein-game .gt3__overlay-panel--retry {
  width: min(100%, 650px);
  padding: 10px 18px !important;
  border-color: #dcb68a !important;
  background: #fffcf6 !important;
}

.pg-standalone .gb-protein-game .gt3__overlay-panel--retry h3 { margin: 0 0 4px !important; font: 850 18px/1.15 Inter, system-ui, sans-serif !important; }

.pg-standalone .gb-protein-game .gt3__overlay-panel--retry > p { margin: 4px 0 8px !important; font-size: 12px !important; line-height: 1.35 !important; }

.pg-standalone .gb-protein-game .gt3__overlay-panel--retry > .gt3__kicker { margin: 0 0 3px !important; color: #946a35 !important; font-size: 10px !important; }

.pg-standalone .gt3__overlay-panel--retry button { min-height: 36px; padding: 6px 14px; }

.gb-protein-game__launch-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

.gb-protein-game__launch-actions button[hidden] { display: none; }

.gb-protein-game__launch-copy button.is-secondary {
  min-height: 46px;
  color: #e2f1eb;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(204, 234, 222, .35);
  box-shadow: none;
  font-size: 13px;
}/* All calm missions share a short goal, science explanation and handoff. */

.pg-standalone .gb-protein-game .pg-start-menu > :is(.gb-dna-builder__overlay-panel, .gb2__overlay-panel, .gt3__overlay-panel) h3 {
  margin: 0 0 10px !important;
  color: #294b47 !important;
  font: 850 clamp(23px, 2.2vw, 30px)/1.18 Inter, system-ui, sans-serif !important;
  text-align: center;
}

.pg-standalone .gb-protein-game .pg-start-menu > :is(.gb-dna-builder__overlay-panel, .gb2__overlay-panel, .gt3__overlay-panel) > p:not([class*="kicker"]):not([class*="shortcut"]) {
  font: 500 14px/1.5 Inter, system-ui, sans-serif !important;
  text-align: center;
}

.pg-standalone .gb-protein-game__unlock-dialog .pg-mission-handoff {
  max-width: none;
  max-height: min(280px, 35dvh);
  overflow-y: auto;
  margin: 10px 0 0;
  padding: 12px 16px;
  color: #315f52;
  background: #edf7f1;
  border: 1px solid #cce2d5;
  border-radius: 12px;
  font: 500 14px/1.5 Inter, system-ui, sans-serif;
}
.pg-standalone .gb-protein-game__unlock-dialog .pg-mission-handoff > p {
  max-width: none;
  margin: 0 0 12px;
  color: inherit;
  text-align: left;
}
.pg-standalone .gb-protein-game__unlock-dialog .pg-mission-handoff > p:last-child { margin-bottom: 0; }
@media (min-width: 901px) {

  .pg-standalone .gb-protein-game__main { grid-template-rows: auto auto minmax(0, 1fr); }

  .pg-standalone .gb-protein-game__gamebar { grid-row: 1; }

  .pg-standalone .gb-protein-game__message { grid-row: 2; }

  .pg-standalone .pg-round { grid-row: 3; }

  .pg-standalone .gb-protein-game .pg-round--question :is(.gb0__stage, .gr2__stage) {
    display: grid;
    align-content: stretch !important;
    justify-items: center;
    padding: 18px 22px !important;
  }

  .pg-standalone .gb-protein-game :is(.gb0__parts, .gr2__parts) > button {
    height: 54px;
    min-height: 54px !important;
  }

  .pg-standalone .gb-protein-game :is(.gb0__lesson:not(.gb0__lesson--pairs), .gr2__lesson:not(.gr2__lesson--strand)) {
    display: grid;
    width: min(100%, 1500px);
    height: 100%;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    min-height: 0;
    align-items: stretch;
    gap: 18px;
    padding: 0 !important;
  }

  .pg-standalone .gb-protein-game :is(.gb0__lesson:not(.gb0__lesson--pairs), .gr2__lesson:not(.gr2__lesson--strand)) .pg-structure-question {
    width: 100%;
    margin: 0;
    padding: 16px 18px !important;
    padding-right: 18px !important;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pg-standalone .gb-protein-game :is(.gb0__lesson, .gr2__lesson) .pg-structure-figure { width: 88px; height: 82px; right: 12px; }

  .pg-standalone .gb-protein-game :is(.gb0__backbone-card, .gr2__backbone-card) { width: 100%; margin: 0; padding: 20px 24px !important; }
  @media (min-height: 801px) {

    .pg-standalone .gb-protein-game :is(.gb0__lesson:not(.gb0__lesson--pairs), .gr2__lesson:not(.gr2__lesson--strand)) { min-height: 0; }
  }

  .pg-standalone .pg-round--level .gt3__cabinet:not([data-gt3-phase="idle"]):not([data-gt3-phase="completed"]):not([data-gt3-phase="failed"]) .gt3__stage {
    height: clamp(205px, 28dvh, 270px) !important;
    flex: 0 0 clamp(205px, 28dvh, 270px) !important;
    transition: none !important;
  }
}
/* Let the score list fill its panel instead of leaving a wide white margin. */
.pg-standalone .gb-dna-builder[data-state="gameover"] :is(.gb-dna-builder__controls,.gb-dna-builder__helix-progress),
.pg-standalone .gb-rna-builder:is([data-phase="completed"],[data-phase="failed"]) .gb2__controls { display:none!important; }
.pg-standalone .gb-protein-game :is(.pg-extra-actions,.pg-practice-entry .gt3__result-actions) { display:flex;gap:10px;flex-wrap:wrap;padding-top:12px; }
.pg-standalone .gb-protein-game .pg-extra-actions button,
.pg-standalone .gb-protein-game .pg-practice-entry button { min-height:42px;padding:9px 14px;border:1px solid #bad6cd;border-radius:12px;background:#f1f8f5;color:#2b6053;font:700 14px/1.35 Inter,system-ui,sans-serif;cursor:pointer; }
.pg-standalone .gb-protein-game .pg-practice-entry { margin-top:14px;text-align:left; }
.pg-standalone .gb-protein-game .pg-practice-entry summary { color:#396555;font:700 14px/1.4 Inter,system-ui,sans-serif;cursor:pointer; }

.pg-standalone .gb-protein-game__menu-scores {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(135deg, #eaf6f0, #eeeaf6);
  border-color: #bed9ce;
}

.pg-standalone .gb-protein-game__menu-scores .pg-scores {
  grid-column: 1;
  grid-row: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.pg-standalone .gb-protein-game__menu-scores .pg-scores ol { gap: 5px; }

.pg-standalone .gb-protein-game__menu-scores .pg-scores li {
  padding: 8px 12px;
  border: 1px solid #d4e4df;
  border-radius: 12px;
  background: #ffffff70;
  text-align: left;
}

.pg-standalone .gb-protein-game__menu-scores .pg-scores li:first-child {
  background: linear-gradient(110deg, #fff0c4, #f9f5e7);
  border-color: #e8d69d;
}

.pg-standalone .gb-protein-game__menu-scores .pg-scores li:before {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  height: 24px;
  background: #dcebe5;
  border-radius: 50%;
  font-weight: 750;
}

.pg-standalone .gb-protein-game__menu-scores .pg-scores li:first-child:before { background: #f5d67e; color: #65501b; }/* A welcoming journey entrance, with one clear action and saved-position detail. */

.gb-protein-game__launch { justify-items: start; }

.gb-protein-game__launch-scene { background: linear-gradient(90deg,rgba(8,39,39,.94),rgba(14,49,53,.8) 39%,rgba(25,57,61,.32) 72%,rgba(35,55,67,.2)),url("assets/protein-game/cell-environment-v1.webp") 62% center/cover; }

.gb-protein-game__launch-copy { width: min(650px,60%); margin-left: clamp(24px,5vw,100px); padding: 34px 16px; text-align: left; }


.gb-protein-game__launch-copy h1 { max-width: none; margin: 18px 0 22px; color: #f7fcf9; font: 850 clamp(42px,5.2vw,76px)/1.04 Inter,system-ui,sans-serif; letter-spacing: -.045em; }

.gb-protein-game__launch-copy h1 em { color: #b8e5d0; font-style: normal; }

.gb-protein-game__launch-copy > p { max-width: 40ch; margin: 0 0 30px; color: #e0eeea; font-size: clamp(15px,1.4vw,18px); line-height: 1.65; }

.gb-protein-game__launch-actions { display: grid; grid-template-columns: minmax(0,1fr); justify-content: stretch; width: min(100%,430px); gap: 12px; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; text-align: left; color: #183f36; background: #c4e5d8; border: 1px solid #c4e5d8; border-radius: 8px; box-shadow: none; transition: background-color .15s ease; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button[hidden] { display: none; }

.pg-launch-button-copy { display: grid; gap: 5px; }

.pg-launch-button-copy strong { font: 700 16px/1.3 Inter,system-ui,sans-serif; }

.pg-launch-button-copy > span { font: 500 12px/1.3 Inter,system-ui,sans-serif; opacity: .83; }

.gb-protein-game__launch-copy button .pg-launch-arrow { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; margin: 0; border-radius: 0; background: none; }

.pg-launch-arrow svg { width: 22px; height: 22px; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button.is-secondary { min-height: 60px; color: #e6f3ed; background: transparent; border: 1px solid #c0dfd46b; box-shadow: none; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button.is-secondary .pg-launch-arrow { background: none; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button:hover { transform: none; filter: none; background: #d7eee4; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button.is-secondary:hover { background: #e3f5ed18; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button:active { box-shadow: none; background: #b0d6c7; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button.is-secondary:active { box-shadow: none; }

.gb-protein-game__launch-copy .gb-protein-game__launch-actions button:focus-visible { outline: 3px solid #c1f2dc; outline-offset: 5px; }
@media (max-width: 700px) {

  .gb-protein-game__launch { justify-items: center; }

  .gb-protein-game__launch-copy { width: calc(100% - 36px); max-width: 500px; margin: 0; padding: 28px 6px; }

  .gb-protein-game__launch-copy h1 { font-size: clamp(40px,10vw,58px); }

  .gb-protein-game__launch-scene { background: linear-gradient(90deg,#0c3031e8,#183e45c7),url("assets/protein-game/cell-environment-v1.webp") center/cover; }
}
@media (min-width: 701px) and (max-height: 740px) {

  .gb-protein-game__launch-copy { padding-block: 20px; }

  .gb-protein-game__launch-copy h1 { font-size: 52px; margin-block: 12px 18px; }

  .gb-protein-game__launch-copy > p { margin-bottom: 22px; }
}

.gb-protein-game__launch-copy .pg-launch-button-copy strong { font: 700 16px/1.3 Inter,system-ui,sans-serif !important; text-shadow: none !important; }

.gb-protein-game__launch-copy .pg-launch-button-copy > span { font: 500 12px/1.3 Inter,system-ui,sans-serif !important; text-shadow: none !important; }

.gb-protein-game__launch-copy button .pg-launch-arrow { color: inherit !important; }/* Compact result menus keep continuation and replay visible on laptops. */

.pg-standalone .gb-protein-game .pg-start-menu > .pg-result-panel{width:min(100%,880px)!important;padding:20px 26px!important;gap:10px!important}

.pg-standalone .gb-protein-game .pg-start-menu > .pg-result-panel h3{font-size:26px!important;line-height:1.2!important;margin:0 0 10px!important}

.pg-standalone .gb-protein-game .pg-start-menu > .pg-result-panel > p{margin:5px 0 12px!important;font-size:14px!important;line-height:1.45!important}

.pg-standalone .gb-protein-game .pg-result-panel :is(.gb2__result-actions,.gt3__result-actions,.gb-dna-builder__overlay-actions){display:flex!important;justify-content:center;flex-wrap:wrap;gap:10px!important;margin:12px 0!important}

.pg-standalone .gb-protein-game .pg-result-panel button{min-height:42px!important;padding:10px 18px!important;font-size:14px!important}

.pg-standalone .gb-protein-game .pg-result-panel .pg-result-details{width:100%;box-sizing:border-box}

.pg-standalone .gb-protein-game .pg-result-panel .pg-result-details[open]{max-height:220px;overflow:auto}
@media(max-width:600px){
.pg-standalone .gb-protein-game .pg-start-menu > .pg-result-panel{padding:16px!important}
.pg-standalone .gb-protein-game .pg-start-menu > .pg-result-panel h3{font-size:21px!important}}
@media(min-width:800px) and (max-height:800px){

 .pg-standalone .gb-protein-game .pg-start-menu:has(>.pg-result-panel){padding:12px!important}

 .pg-standalone .gb-protein-game .pg-start-menu > .pg-result-panel{padding:16px 22px!important}
}

.pg-standalone .gb-protein-game .pg-start-menu > .pg-outcome-card,
.pg-standalone .gb-protein-game__unlock-dialog > .pg-outcome-card{width:min(100%,720px)!important;padding:22px!important;border:1px solid #b6d8cc!important;border-radius:24px!important;background:linear-gradient(125deg,#f7fcf9,#eff5f7)!important;box-shadow:0 18px 45px #163f3526!important}

.pg-standalone .gb-protein-game .pg-outcome-card>:is(h2,h3){margin:0!important;color:#24584c!important;font:850 26px/1.2 Inter,system-ui,sans-serif!important;letter-spacing:-.025em}

.pg-standalone .gb-protein-game .pg-outcome-card>p{max-width:60ch;margin:0 auto!important;font:500 14px/1.45 Inter,system-ui,sans-serif!important}

.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-label{font:850 10px/1.3 Inter,system-ui,sans-serif!important}

.pg-standalone .gb-protein-game .pg-outcome-card>.pg-result-details{margin:0!important}

.pg-standalone .gb-protein-game .pg-start-menu:has(>.pg-outcome-card){padding:12px!important;background:#173e3526!important;backdrop-filter:blur(3px)!important}

.pg-standalone .gb-protein-game__unlock-dialog{inset:var(--pg-unlock-top,64px) 0 0;max-height:calc(100dvh - var(--pg-unlock-top,64px) - 12px);box-sizing:border-box;background:#173e3526;padding:12px}
@media(max-width:600px){
.pg-standalone .gb-protein-game .pg-outcome-card>:is(h2,h3){font-size:21px!important}
}/* These canonical rules override the older level-specific menu cards. */

.pg-standalone .gb-protein-game .pg-start-menu>.pg-result-panel.pg-outcome-card,
.pg-standalone .gb-protein-game__unlock-dialog>.pg-outcome-card{display:flex!important;flex-direction:column!important;gap:10px!important}

.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:8px 0!important}

.pg-standalone .gb-protein-game .pg-start-menu>.pg-result-panel.pg-outcome-card>.pg-outcome-actions>button,
.pg-standalone .gb-protein-game__unlock-dialog>.pg-outcome-card>.pg-outcome-actions>button{width:100%!important;min-height:44px!important;height:auto!important;margin:0!important;padding:10px 16px!important;border:1px solid #bad6cd!important;border-radius:14px!important;background:#f1f8f5!important;color:#2b6053!important;font:750 14px/1.35 Inter,system-ui,sans-serif!important;text-align:center!important;box-shadow:none!important}

.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-actions>button:first-child{grid-column:1/-1!important;background:linear-gradient(110deg,#b7ecd5,#f4dc85)!important;color:#193e35!important}

.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-actions>button:last-child:nth-child(2){grid-column:1/-1!important}
.pg-standalone .gb-protein-game .pg-result-panel.pg-outcome-card>.pg-outcome-actions>button.pg-endless-challenge{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#dcefe6!important;border-color:#73af98!important;color:#245846!important;box-shadow:0 3px 0 #b0d3c2!important}
.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-actions>button.pg-endless-challenge strong{font:800 16px/1.3 Inter,system-ui,sans-serif;color:inherit!important}
.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-actions>button.pg-endless-challenge small{font:500 12px/1.4 Inter,system-ui,sans-serif;color:inherit!important}
.pg-standalone .gb-protein-game .pg-result-panel.pg-outcome-card>.pg-outcome-actions>button.pg-endless-challenge:hover{background:#cce8da!important;border-color:#3d8d6d!important}

.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-label{font:850 10px/1.3 Inter,system-ui,sans-serif!important;letter-spacing:.12em!important;color:#32836b!important}
@media(max-width:600px){
.pg-standalone .gb-protein-game .pg-outcome-card>.pg-outcome-actions{grid-template-columns:1fr!important}}

.pg-standalone .gb-protein-game .pg-start-menu>.pg-result-panel.pg-outcome-card>.pg-outcome-actions>button:first-child,
.pg-standalone .gb-protein-game__unlock-dialog>.pg-outcome-card>.pg-outcome-actions>button:first-child{background:linear-gradient(110deg,#b7ecd5,#f4dc85)!important;color:#193e35!important;border-color:#c4ddb4!important}
@media(min-width:800px) and (max-height:800px){

 .pg-standalone .gb-protein-game .pg-start-menu>.pg-result-panel.pg-outcome-card,
 .pg-standalone .gb-protein-game__unlock-dialog>.pg-outcome-card{padding:16px!important;gap:8px!important}
}

.pg-standalone .gb-protein-game .pg-start-menu>.pg-result-panel.pg-outcome-card>:is(p,h3){margin:0 auto!important}

.pg-standalone .gb-protein-game .pg-start-menu>.pg-result-panel.pg-outcome-card>.pg-outcome-label{font:850 10px/1.3 Inter,system-ui,sans-serif!important}
/* Molecular references occupy the space between the question and fixed feedback. */
.pg-standalone .gb-protein-game :is(.gb0__lesson,.gr2__lesson) .pg-structure-question { padding:16px 18px!important; }
.pg-standalone .gb-protein-game :is(.gb0__lesson,.gr2__lesson) .pg-structure-question::before { display:none; }
.gb-protein-game .pg-dna-photo { position:relative;display:flex;flex-direction:column;flex:1 1 0;min-height:90px;overflow:hidden;margin:14px 0 0;border:1px solid #c4dbd1;border-radius:18px;background:#e8f3ef; }
.gb-protein-game .pg-dna-photo>img { display:block;width:100%;height:100%;min-height:0;flex:1 1 0;object-fit:cover; }
.gb-protein-game .pg-dna-photo>figcaption { flex:0 0 auto;padding:9px 12px;color:#315b50;background:#f4faf7;font:600 12px/1.4 Inter,system-ui,sans-serif;text-align:center; }
.gb-protein-game .pg-dna-photo .pg-dna-photo-parts { display:flex;justify-content:center;gap:8px;flex-wrap:wrap; }
.gb-protein-game .pg-dna-photo-parts>span { padding:5px 8px;border:1px dashed #9db9ad;border-radius:8px;color:#627b70; }
.gb-protein-game .pg-dna-photo-parts>span.is-built { border-style:solid;border-color:#39987a;background:#d6f0e4;color:#235b47; }
.pg-standalone .gb-protein-game .gb0__lesson--pairs .pg-pairing-card { background:linear-gradient(#f5faf82b,#f5faf82b),url("assets/protein-game/dna-basepair-closeup-v1.png") center/cover no-repeat!important; }
.pg-standalone .gb-protein-game .gb0__pair-bonds { display:flex;width:58px;min-height:22px;height:22px;justify-content:center;align-items:stretch;gap:10px; }
.pg-standalone .gb-protein-game .gb0__pair-bonds span { width:0;height:22px;border-top:0;border-left:3px dashed #168fd1;filter:none; }
.pg-standalone .gb-protein-game .pg-pairing-lesson .gb0__pair-name { display:flex!important;flex-direction:column;align-items:center;gap:2px;min-width:0;font-size:12px; }
.pg-standalone .gb-protein-game .pg-pairing-lesson .gb0__pair-name span { margin:0;font-size:11px; }
.pg-standalone .gb-protein-game .gb0__completion-controls>button,
.gb-protein-game .gb2__cinema-button { min-height:44px;padding:10px 18px!important;border:1px solid #296957!important;border-radius:14px!important;background:#2d7563!important;color:#f5fcf8!important;font:750 14px/1.3 Inter,system-ui,sans-serif!important;box-shadow:0 3px 0 #205345!important;cursor:pointer; }
.pg-standalone .gb-protein-game [data-gb-action="start-mission"],
.pg-standalone .gb-protein-game [data-gb2-action="start-standard"],
.pg-standalone .gb-protein-game [data-gt3-action="start-mission"] { background:linear-gradient(135deg,#347e6b,#245b50)!important;color:#f5fcf8!important;border-color:#347e6b!important; }
.gb-protein-game .gti__story-choices:has(.gti__trna-choice) { grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.gb-protein-game .gti__story-choices .gti__trna-choice { min-height:145px;padding:8px 6px;gap:7px; }
.gb-protein-game .gti__story-choices .gti__choice-trna { height:42px; }
@media(max-width:900px) {
 .gb-protein-game .pg-dna-photo { flex:0 0 200px; }
 .gb-protein-game .gti__story-choices:has(.gti__trna-choice) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.gb-protein-game .pg-dna-photo-view { position:relative;flex:1 1 0;min-height:0; }
.gb-protein-game .pg-dna-photo-view>img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }
.gb-protein-game .pg-dna-photo-markers { position:absolute;inset:0;width:100%;height:100%; }
.gb-protein-game .pg-dna-photo-markers circle { fill:#ffffff20;stroke:#ffffffcc;stroke-width:7;stroke-dasharray:12 9; }
.gb-protein-game .pg-dna-photo-markers text { fill:#1c5244;stroke:#ffffff;stroke-width:4;paint-order:stroke;font:800 60px Inter,system-ui,sans-serif;text-anchor:middle;dominant-baseline:central; }
.gb-protein-game .pg-dna-photo-markers .is-built circle { fill:#a8e4cd45;stroke:#288668;stroke-dasharray:none; }
.pg-standalone .gb-protein-game .gb0__completion-controls { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center; }
.pg-standalone .gb-protein-game .gb0__completion-controls>button { white-space:normal;max-width:280px; }
.pg-standalone .gb-protein-game .gb2__cinema-button { display:inline-flex;align-items:center;justify-content:center;width:auto!important;max-width:100%;height:auto!important;min-height:44px!important;margin:12px 0!important; }
.pg-standalone .gb-protein-game .gb2__cinema-button>span { display:none; }
@media(max-width:620px) { .pg-standalone .gb-protein-game .gb0__completion-controls { grid-template-columns:1fr; } }
@media(min-width:901px) and (max-height:700px) {
 .gb-protein-game .pg-dna-photo { min-height:60px;margin-top:8px; }
 .gb-protein-game .pg-dna-photo>figcaption { padding:5px 8px;font-size:11px; }
 .gb-protein-game .pg-dna-photo-parts>span { padding:3px 5px; }
}
/* Keep the molecular image fixed when the narrated instruction changes. */
@media(min-width:901px) {
 .pg-standalone .gb-protein-game :is(.gb0__lesson:not(.gb0__lesson--pairs),.gr2__lesson:not(.gr2__lesson--strand)) .pg-structure-question>h4 { font-size:24px!important;line-height:1.3!important;min-height:1lh;margin-bottom:7px!important; }
 .pg-standalone .gb-protein-game :is(.gb0__lesson:not(.gb0__lesson--pairs),.gr2__lesson:not(.gr2__lesson--strand)) .pg-structure-question>h4+p { min-height:3lh;flex:0 0 auto; }
 .pg-standalone .gb-protein-game :is(.gb0__lesson:not(.gb0__lesson--pairs),.gr2__lesson:not(.gr2__lesson--strand)) .pg-structure-question>.pg-concept-note { min-height:calc(2lh + 11px);flex:0 0 auto; }
}
/* Continue with the four nucleotides from the construction scene. */
.pg-standalone .gb-protein-game .pg-rna-pairing-card { background:linear-gradient(125deg,#effaf3e8,#eee8f5e6)!important; }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gb0__pair-column { display:grid;justify-items:center;align-items:center; }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gb0__mini-backbone { z-index:2;align-items:center; }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gb0__mini-backbone span { display:grid;place-items:center;color:#1b4d40;font:800 12px/1 Inter,system-ui,sans-serif; }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gb0__mini-phosphate { border-radius:50%; }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gb0__mini-sugar { clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%); }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gb0__mini-backbone i { height:3px;background:#8fc7b9; }
.gb-protein-game .pg-rna-hydrogen-bonds { display:flex;gap:5px;height:22px;opacity:0; }
.gb-protein-game .pg-rna-hydrogen-bonds.is-paired { opacity:1; }
.gb-protein-game .pg-rna-hydrogen-bonds i { display:block;width:0;height:22px;border-left:3px dashed #299cc5; }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gr2__chain-unit{width:126px;grid-template-columns:44px 20px 62px;grid-template-rows:54px 16px 48px}
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gr2__chain-unit--complementary{grid-template-columns:62px 20px 44px;grid-template-rows:48px 16px 54px}
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gr2__chain-phosphate{width:40px;height:40px}
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gr2__chain-sugar{width:62px;height:54px}
.pg-standalone .gb-protein-game .pg-rna-pairing-card .gr2__chain-base{width:54px;height:43px}
.gb-protein-game .pg-rna-photo .pg-dna-photo-markers text { font-size:42px;stroke-width:3; }
.pg-standalone .gb-protein-game .pg-rna-pairing-card .pg-pairing-grid::before,
.pg-standalone .gb-protein-game .pg-rna-pairing-card .pg-pairing-grid::after { display:none; }
.pg-standalone .gb-protein-game .gr2__lesson .pg-structure-question > p,
.pg-standalone .gb-protein-game .gr2__lesson .pg-pairing-note { font-family:Inter,system-ui,sans-serif!important; }
.pg-standalone .gb-protein-game .gb0__lesson--pairs :is(.pg-dna-pairing-card,.pg-rna-pairing-card) { background:linear-gradient(125deg,#effaf3e8,#eee8f5e6)!important; }
.pg-standalone .gb-protein-game .pg-pairing-lesson :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .gb0__pair-column { position:relative;gap:0;grid-template-rows:118px 22px 118px 26px;height:296px;padding:6px;border-color:transparent; }
.pg-standalone .gb-protein-game .pg-pairing-lesson :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .gb0__pair-column.is-active { border-color:#6aaf9a;background:#ffffff8f;box-shadow:0 9px 22px #345f5512;border-radius:22px; }
.pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) :is(.gb0__chain-unit,.gr2__chain-unit) { transform:translateX(-32px);z-index:2; }
.pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) :is(.gb0__chain-unit--complementary,.gr2__chain-unit--complementary) { transform:translateX(32px); }
.pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) :is(.gb0__pair-bonds,.pg-rna-hydrogen-bonds),
.pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) :is(.gb0__pair-bonds span,.pg-rna-hydrogen-bonds i) { height:27px;min-height:27px; }
@media(min-width:901px) {
 .pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .gb0__pair-column:not(:last-child)::before,
 .pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .gb0__pair-column:not(:last-child)::after { position:absolute;height:3px;background:#9fc6bd;content:"";z-index:1; }
 .pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .gb0__pair-column::before { top:33px;left:calc(50% + 31px);width:calc(100% - 112px); }
 .pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .gb0__pair-column::after { top:237px;left:calc(50% + 95px);width:calc(100% - 114px); }
}
@media(max-width:900px) {
 .pg-standalone .gb-protein-game :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .pg-pairing-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
}
@media(max-width:480px) {
 .pg-standalone .gb-protein-game .pg-pairing-lesson :is(.pg-dna-pairing-card,.pg-rna-pairing-card) .pg-pairing-grid { grid-template-columns:minmax(0,190px); }
}