/* Light, modern visual theme for the isolated protein-synthesis game. */
.gb-protein-game {
  --gpm-ink: #25343b;
  --gpm-muted: #60767c;
  --gpm-line: #d8e6e5;
  --gpm-surface: #ffffff;
  --gpm-soft: #f4f9f8;
  --gpm-mint: #e5f6ef;
  --gpm-blue: #eaf4ff;
  --gpm-lavender: #f1ebff;
  --gpm-shadow: 0 12px 32px rgba(42, 78, 82, .1);
  width: min(100%, 1080px);
  margin-top: 18px;
  color: var(--gpm-ink);
}

.gb-protein-game__nav {
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--gpm-line);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(42, 78, 82, .08);
}
.gb-protein-game__navigation-row .gb-protein-game__nav { margin-bottom:0; }
.gb-protein-game__nav button {
  min-height: 46px;
  gap: 1px;
  padding: 5px 8px;
  color: #476067;
  background: #f6faf9;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: Inter, "Source Sans 3", system-ui, sans-serif;
}
.gb-protein-game__nav button strong { font-family: inherit; font-size: .76rem; letter-spacing: .035em; }
.gb-protein-game__nav button small { color: #71868b; font-size: .62rem; }
.gb-protein-game__nav button[data-locked="true"] { color: #9aabad; background: #f2f5f4; }
.gb-protein-game__nav button.is-active {
  color: #185b4c;
  background: #def4eb;
  border-color: #a9dac8;
  box-shadow: none;
}
.gb-protein-game__nav button:focus-visible { outline-color: #2878a5; }
.gb-protein-game__message { color: #6c5b3f !important; font-size: .76rem !important; }

/* Shared light cabinet language. */
.gb-dna-builder--level-0 .gb0__cabinet,
.gb-rna-nucleotide-builder .gr2__cabinet,
.gb-dna-builder .gb-dna-builder__cabinet,
.gb-rna-builder .gb2__cabinet,
.gb-translation-intro .gti__cabinet,
.gb-translation-game .gt3__cabinet {
  background: var(--gpm-surface);
  border: 1px solid var(--gpm-line);
  border-radius: 16px;
  box-shadow: var(--gpm-shadow);
}

/* Level 0 and Level 2 lesson cards. */
.gb-dna-builder--level-0,
.gb-rna-nucleotide-builder { color: var(--gpm-ink); }
.gb-dna-builder--level-0 .gb0__header,
.gb-rna-nucleotide-builder .gr2__header {
  min-height: 54px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #f3faf7, #edf6ff);
  border-bottom: 1px solid var(--gpm-line);
}
.gb-dna-builder--level-0 .gb0__header,
.gb-rna-nucleotide-builder .gr2__header,
.gb-dna-builder .gb-dna-builder__topbar,
.gb-rna-builder .gb2__topbar { min-height:54px; }
.gb-dna-builder--level-0 .gb0__header-actions,
.gb-rna-nucleotide-builder .gr2__header-actions,
.gb-dna-builder .gb-dna-builder__topbar-actions,
.gb-rna-builder .gb2__top-actions { align-items:center; gap:6px; }
.gb-dna-builder--level-0 .gb0__header-actions > button,
.gb-rna-nucleotide-builder .gr2__header-actions > button,
.gb-dna-builder .gb-dna-builder__topbar-actions > button,
.gb-rna-builder .gb2__top-actions > button {
  width:34px;
  height:34px;
  min-height:34px;
  flex:0 0 34px;
  border-radius:9px;
  box-shadow:none;
}
.gb-dna-builder--level-0 .gb0__header p,
.gb-rna-nucleotide-builder .gr2__header p { color: #33836e !important; }
.gb-dna-builder--level-0 .gb0__header h3,
.gb-rna-nucleotide-builder .gr2__header h3 { color: var(--gpm-ink) !important; font-size: 1rem !important; }
.gb-dna-builder--level-0 .gb0__header-actions > span,
.gb-rna-nucleotide-builder .gr2__header-actions > span {
  color: #38515a;
  background: #fff;
  border: 1px solid #cbdcda;
  box-shadow: none;
}
.gb-dna-builder--level-0 .gb0__stage,
.gb-rna-nucleotide-builder .gr2__stage {
  min-height: 0;
  padding: 18px 16px 52px;
  background: linear-gradient(180deg, #fbfdfd, #f0f8f7);
}
.gb-dna-builder--level-0 .gb0__eyebrow,
.gb-rna-nucleotide-builder .gr2__eyebrow { color: #348b73 !important; font-family: inherit !important; }
.gb-dna-builder--level-0 .gb0__task-title,
.gb-rna-nucleotide-builder .gr2__title { margin-bottom: 10px !important; color: var(--gpm-ink) !important; font-size: 1.12rem !important; }
.gb-dna-builder--level-0 .gb0__concept,
.gb-rna-nucleotide-builder .gr2__concept {
  margin-bottom: 10px;
  color: #3f555c;
  background: #eef8f4;
  border-color: #c7e3da;
  border-left-color: #69bda4;
}
.gb-dna-builder--level-0 .gb0__concept strong,
.gb-rna-nucleotide-builder .gr2__concept strong { color: #24443d; }
.gb-dna-builder--level-0 .gb0__concept--important,
.gb-rna-nucleotide-builder .gr2__concept--important { background: #fff8e9; border-color: #ead7a6; border-left-color: #e6b74d; }
.gb-dna-builder--level-0 .gb0__recipe,
.gb-rna-nucleotide-builder .gr2__recipe { margin-bottom: 10px; }
.gb-dna-builder--level-0 .gb0__recipe li,
.gb-rna-nucleotide-builder .gr2__recipe li {
  min-height: 34px;
  color: #718489;
  background: #fff;
  border-color: #d7e4e2;
  font-family: inherit;
  box-shadow: 0 2px 7px rgba(42, 78, 82, .035);
}
.gb-dna-builder--level-0 .gb0__recipe li.is-active,
.gb-rna-nucleotide-builder .gr2__recipe li.is-active { color: #33484f; border-color: #efc96d; box-shadow: 0 0 0 2px rgba(239,201,109,.22); }
.gb-dna-builder--level-0 .gb0__recipe li.is-done,
.gb-rna-nucleotide-builder .gr2__recipe li.is-done { color: #33705f; border-color: #a9d9c8; }
.gb-dna-builder--level-0 .gb0__build-card,
.gb-rna-nucleotide-builder .gr2__build-card {
  min-height: 124px;
  padding: 14px;
  background: #fff;
  border-color: #d6e5e3;
  box-shadow: 0 7px 20px rgba(42,78,82,.055);
}
.gb-dna-builder--level-0 .gb0__build-slot,
.gb-rna-nucleotide-builder .gr2__slot { color: #708287; background: #f7faf9; border-color: #b9ccca; }
.gb-dna-builder--level-0 .gb0__build-slot.is-filled,
.gb-rna-nucleotide-builder .gr2__slot.is-filled { color: #243238; box-shadow: 0 4px 10px rgba(42,78,82,.12); }
.gb-dna-builder--level-0 .gb0__build-link,
.gb-rna-nucleotide-builder .gr2__build-card > i { background: #bfd8d2; box-shadow: none; }
.gb-dna-builder--level-0 .gb0__backbone-card { color:#344b51; background:#fff; border-color:#d6e5e3; box-shadow:0 7px 20px rgba(42,78,82,.055); }
.gb-dna-builder--level-0 .gb0__backbone-heading span { color:#698086; }
.gb-dna-builder--level-0 .gb0__chain-end { color:#28745f; }
.gb-dna-builder--level-0 .gb0__chain-unit + .gb0__chain-unit::before,
.gb-dna-builder--level-0 .gb0__chain-bond,
.gb-dna-builder--level-0 .gb0__chain-base-bond { background:#9fc6bd; }
.gb-dna-builder--level-0 .gb0__chain-phosphate,
.gb-dna-builder--level-0 .gb0__chain-sugar,
.gb-dna-builder--level-0 .gb0__chain-base { color:#718388; background:#f7faf9; border-color:#b8cdca; }
.gb-dna-builder--level-0 .gb0__chain-unit.is-current { background:#f1faf6; outline-color:#8acbb5; }
.gb-dna-builder--level-0 .gb0__backbone-note { color:#526970!important; }
.gb-dna-builder--level-0 .gb0__backbone-note strong { color:#2f474d; }
.gb-rna-nucleotide-builder .gr2__backbone-card { color:#344b51; background:#fff; border-color:#d6e5e3; box-shadow:0 7px 20px rgba(42,78,82,.055); }
.gb-rna-nucleotide-builder .gr2__backbone-heading span { color:#755c9f; }
.gb-rna-nucleotide-builder .gr2__chain-end { color:#745aa7; }
.gb-rna-nucleotide-builder .gr2__chain-unit.is-current { background:rgba(152,100,216,.045); outline-color:rgba(152,100,216,.22); }
.gb-rna-nucleotide-builder .gr2__chain-phosphate,
.gb-rna-nucleotide-builder .gr2__chain-sugar,
.gb-rna-nucleotide-builder .gr2__chain-base { color:#73868a; background:#f7faf9; border-color:#b9ccca; }
.gb-rna-nucleotide-builder .gr2__chain-bond,
.gb-rna-nucleotide-builder .gr2__chain-base-bond,
.gb-rna-nucleotide-builder .gr2__chain-unit + .gr2__chain-unit::before { background:#bfd8d2; }
.gb-rna-nucleotide-builder .gr2__backbone-note { color:#526970!important; }
.gb-rna-nucleotide-builder .gr2__direction-note { color:#6c5a8c!important; }
.gb-rna-nucleotide-builder .gr2__backbone-note strong,
.gb-rna-nucleotide-builder .gr2__direction-note strong { color:#263b40; }
.gb-dna-builder--level-0 .gb0__explanation,
.gb-dna-builder--level-0 .gb0__pair-instruction,
.gb-dna-builder--level-0 .gb0__antiparallel,
.gb-rna-nucleotide-builder .gr2__explanation,
.gb-rna-nucleotide-builder .gr2__strand-copy,
.gb-rna-nucleotide-builder .gr2__rna-note { color: #526970 !important; }
.gb-dna-builder--level-0 .gb0__overview,
.gb-rna-nucleotide-builder .gr2__overview {
  margin-top: 14px;
  background: rgba(255,255,255,.78);
  border-color: #d7e5e3;
}
.gb-dna-builder--level-0 .gb0__overview h4,
.gb-rna-nucleotide-builder .gr2__overview h4 { color: #34494f !important; }
.gb-dna-builder--level-0 .gb0__overview-item,
.gb-rna-nucleotide-builder .gr2__overview-item { color: #687b80; background: #f8fbfa; border-color: #c9d9d7; }
.gb-dna-builder--level-0 .gb0__overview-item.is-built,
.gb-rna-nucleotide-builder .gr2__overview-item.is-built { color: #385d54; border-color: #87c8b2; }
.gb-dna-builder--level-0 .gb0__fragment,
.gb-rna-nucleotide-builder .gr2__strand { background: #fff; border-color: #cddfdd; }
.gb-dna-builder--level-0 .gb0__direction,
.gb-rna-nucleotide-builder .gr2__strand { color: #40565c; }
.gb-dna-builder--level-0 .gb0__direction strong,
.gb-rna-nucleotide-builder .gr2__strand > strong { box-shadow: none; }
.gb-dna-builder--level-0 .gb0__pair-name { color: #3a5157; }
.gb-dna-builder--level-0 .gb0__bond-explainer { color: #245875; }
.gb-dna-builder--level-0 .gb0__bond-explainer span { color: #397ea5; }
.gb-dna-builder--level-0 .gb0__feedback,
.gb-rna-nucleotide-builder .gr2__feedback { color: #3f5960 !important; font-family: inherit !important; font-weight: 700 !important; }
.gb-dna-builder--level-0 .gb0__controls,
.gb-rna-nucleotide-builder .gr2__controls { padding: 11px; background: #f4f9f8; border-top: 1px solid var(--gpm-line); }
.gb-dna-builder--level-0 .gb0__parts button,
.gb-rna-nucleotide-builder .gr2__parts button { min-height: 52px; background: #fff; border-color: #c5d8d5; box-shadow: 0 3px 8px rgba(42,78,82,.08); }
.gb-dna-builder--level-0 .gb0__parts,
.gb-rna-nucleotide-builder .gr2__parts { width:min(100%,760px); margin-right:auto; margin-left:auto; gap:10px; }
.gb-dna-builder--level-0 .gb0__parts button,
.gb-rna-nucleotide-builder .gr2__parts button {
  min-height:50px;
  grid-template-columns:42px minmax(0,1fr);
  gap:9px;
  padding:5px 12px;
  border:1px solid #c5d8d5;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(42,78,82,.08);
}
.gb-dna-builder--level-0 .gb0__parts button strong,
.gb-rna-nucleotide-builder .gr2__parts button strong { color:#263b40; font-size:.84rem; }
.gb-dna-builder--level-0 .gb0__parts button small,
.gb-rna-nucleotide-builder .gr2__parts button small { color:#6a7f84; font-size:.62rem; }
.gb-dna-builder--level-0 .gb0__part-icon,
.gb-rna-nucleotide-builder .gr2__part-icon {
  grid-row:1 / 3;
  width:38px;
  height:38px;
  color:#29433e;
  border:1px solid rgba(60,92,85,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  font:900 .9rem Consolas,"Courier New",monospace;
}
.gb-dna-builder--level-0 .gb0__part-icon--p,
.gb-rna-nucleotide-builder .gr2__part-icon--p { background:#f8e9c6; border-radius:50%; }
.gb-dna-builder--level-0 .gb0__part-icon--s,
.gb-rna-nucleotide-builder .gr2__part-icon--r {
  width:40px;
  height:38px;
  background:#b9e0d5;
  border:0;
  border-radius:0;
  clip-path:polygon(50% 0,96% 34%,79% 100%,21% 100%,4% 34%);
}
.gb-dna-builder--level-0 .gb0__control-prompt,
.gb-rna-nucleotide-builder .gr2__control-prompt { color: #4a6268 !important; font-family: inherit !important; }
.gb-dna-builder--level-0 .gb0__completion-controls { color:#43595f; background:#fff; border-color:#b8d9cf; box-shadow:0 5px 15px rgba(42,78,82,.07); }
.gb-dna-builder--level-0 .gb0__completion-controls strong { color:#263b40; }
.gb-dna-builder--level-0 .gb0__completion-controls span { color:#61777c; }
.gb-dna-builder--level-0 .gb0__completion-controls .gb0__primary { color:#174f40; background:#d9f2e8; border-color:#94ceb9; box-shadow:0 3px 9px rgba(42,78,82,.09); }
.gb-dna-builder--level-0 .gb0__navigation-note { color:#3e7568!important; }
.gb-dna-builder--level-0 .gb0__direction-challenge { color:#40565c; background:#fff; border-color:#b8d9cf; box-shadow:0 5px 15px rgba(42,78,82,.07); }
.gb-dna-builder--level-0 .gb0__direction-challenge strong { color:#33836e; }
.gb-dna-builder--level-0 .gb0__direction-challenge span { color:#30494f; }
.gb-dna-builder--level-0 .gb0__direction-challenge small { color:#6b8085; }
.gb-dna-builder--level-0 .gb0__direction-choices button { color:#24584c; background:#f7fbfa; border-color:#9bcfbe; box-shadow:0 3px 8px rgba(42,78,82,.08); }
.gb-dna-builder--level-0 .gb0__base-button,
.gb-rna-nucleotide-builder .gr2__base-button { min-height: 54px; border-color: rgba(58,78,85,.14); box-shadow: 0 4px 10px rgba(42,78,82,.12); }
.gb-dna-builder--level-0 .gb0__base-button--a,
.gb-rna-nucleotide-builder .gr2__base-button--a { background: #f7ce70; }
.gb-dna-builder--level-0 .gb0__base-button--t,
.gb-rna-nucleotide-builder .gr2__base-button--t { background: #79c9eb; }
.gb-dna-builder--level-0 .gb0__base-button--c,
.gb-rna-nucleotide-builder .gr2__base-button--c { background: #6ed9aa; }
.gb-dna-builder--level-0 .gb0__base-button--g,
.gb-rna-nucleotide-builder .gr2__base-button--g { background: #bba1ec; }
.gb-dna-builder--level-0 .gb0__base-button--u,
.gb-rna-nucleotide-builder .gr2__base-button--u { color: #fff; background: #9864d8; }
.gb-dna-builder--level-0 .gb0__overlay,
.gb-rna-nucleotide-builder .gr2__overlay { background: rgba(237,246,245,.92); }
.gb-dna-builder--level-0 .gb0__overlay > div,
.gb-rna-nucleotide-builder .gr2__overlay > div { color: #41565c; background: #fff; border-color: #b8d9cf; box-shadow: 0 16px 42px rgba(42,78,82,.16); }
.gb-dna-builder--level-0 .gb0__overlay h3,
.gb-rna-nucleotide-builder .gr2__overlay h3 { color: var(--gpm-ink) !important; }

/* Level 1 endless game. */
.gb-dna-builder { --gb-ink: #26363d; --gb-muted: #6b8085; --gb-screen: #f7fbfb; --gb-screen-soft: #eef7f5; --gb-frame: #d7e6e3; width: min(100%,1080px); color: var(--gpm-ink); }
.gb-dna-builder__topbar { min-height: 52px; padding: 8px 12px 8px 15px; background: #f2f9f6; border-bottom: 1px solid var(--gpm-line); box-shadow: none; }
.gb-dna-builder__level { color: #286a59; background: #dff4eb; border: 1px solid #a9dac8; border-radius: 8px; box-shadow: none; }
.gb-dna-builder__icon-button { width: 34px; height: 34px; color: #3d5960; background: #fff; border-color: #c7d9d6; border-radius: 9px; box-shadow: none; }
.gb-dna-builder__hud { gap: 0; padding: 0; background: #fff; border-bottom: 1px solid var(--gpm-line); }
.gb-dna-builder__hud > div { padding: 7px 5px; background: #fff; border-right: 1px solid #e5eeec; }
.gb-dna-builder__hud small { color: #72868a; font-family: inherit; letter-spacing: .035em; }
.gb-dna-builder__hud strong { color: #293a40; font-family: inherit; font-size: clamp(.88rem,2vw,1.04rem); }
.gb-dna-builder__stage { height: 382px; min-height: 330px; background: linear-gradient(rgba(91,139,145,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(91,139,145,.075) 1px,transparent 1px),linear-gradient(180deg,#fbfdff,#edf7f5); background-size: 24px 24px,24px 24px,auto; }
.gb-dna-builder__scanlines { opacity: .12; }
.gb-dna-builder__direction { color: #456168; }
.gb-dna-builder__direction strong { box-shadow: none; }
.gb-dna-builder__pair::before,.gb-dna-builder__pair::after { background: #bdd7d1; box-shadow: none; }
.gb-dna-builder__base { border-color: rgba(52,69,75,.24); box-shadow: 0 4px 9px rgba(42,78,82,.13); }
.gb-dna-builder__base--top { top:62px; }
.gb-dna-builder__base--bottom { bottom:62px; }
.gb-dna-builder__bonds { top:110px; bottom:110px; left:16px; width:36px; gap:5px; filter:drop-shadow(0 0 4px rgba(34,157,220,.92)); }
.gb-dna-builder__bonds i { width:4px; background:repeating-linear-gradient(180deg,#168fd1 0 4px,transparent 4px 7px); }
.gb-dna-builder__pair[data-status="correct"] .gb-dna-builder__bonds { opacity:1; transform:scaleY(1); }
.gb-dna-builder__pair[data-status="correct"] .gb-dna-builder__base { box-shadow:0 0 0 2px rgba(30,151,211,.2),0 4px 9px rgba(42,78,82,.13); }
.gb-dna-builder__base--bottom { color: #71868a; background: #fff; border-color: #a8c0bd; }
.gb-dna-builder__base--bottom.gb-dna-builder__base--a { color:#243238; background:#f7ce70; }
.gb-dna-builder__base--bottom.gb-dna-builder__base--t { color:#243238; background:#79c9eb; }
.gb-dna-builder__base--bottom.gb-dna-builder__base--c { color:#243238; background:#6ed9aa; }
.gb-dna-builder__base--bottom.gb-dna-builder__base--g { color:#243238; background:#bba1ec; }
.gb-dna-builder__phosphate { background: #d9efe7; border-color: #76a99a; }
.gb-dna-builder__sugar { background: #b9deed; border-color: #75a7b8; }
.gb-dna-builder__sugar-base-link { background:#89bcb0; }
.gb-dna-builder__backbone-legend { color:#526970; background:rgba(255,255,255,.9); border-color:#c7dad7; }
.gb-dna-builder__pair.is-active .gb-dna-builder__base { box-shadow: 0 0 0 3px #fff,0 0 0 6px #69bda4,0 8px 18px rgba(42,78,82,.14); }
.gb-dna-builder__target { border-color: #e9bc55; box-shadow: inset 0 0 22px rgba(233,188,85,.1); }
.gb-dna-builder__target span { color: #5e4b1e; background: #f7d784; box-shadow: none; }
.gb-dna-builder__feedback { color: #3e585e; font-family: inherit; font-weight: 700; }
.gb-dna-builder__feedback[data-type="correct"] { color: #25745e; }
.gb-dna-builder__feedback[data-type="wrong"] { color: #b3524b; }
.gb-dna-builder__helix-progress { min-height: 70px; padding-block: 6px; color: #354c52; background: #f7fbfa; border-color: #d7e6e3; box-shadow:0 5px 16px rgba(42,78,82,.06); }
.gb-dna-builder__helix-copy strong { color: #2b3e44; }
.gb-dna-builder__helix-copy small { color: #647b80; }
.gb-dna-builder__next-level { color:#174f40; background:#d9f2e8; border-color:#94ceb9; box-shadow:0 3px 9px rgba(42,78,82,.09); }
.gb-dna-builder__controls { gap: 7px; padding: 10px; background: #fff; border-top: 1px solid var(--gpm-line); }
.gb-dna-builder__base-button { min-height: 54px; border-color: rgba(58,78,85,.14); box-shadow: 0 4px 10px rgba(42,78,82,.12); }
.gb-dna-builder__base-button--a { background: #f7ce70; }
.gb-dna-builder__base-button--t { background: #79c9eb; }
.gb-dna-builder__base-button--c { background: #6ed9aa; }
.gb-dna-builder__base-button--g { background: #bba1ec; }
.gb-dna-builder__base-button--u { background: #9864d8; }
.gb-dna-builder__overlay { background: rgba(237,246,245,.92); }
.gb-dna-builder__overlay,
.gb2__overlay { overflow-y: auto; overscroll-behavior: contain; }
.gb-dna-builder__overlay-panel { max-height:calc(100% - 2px); overflow-y:auto; color: #41565c; background: #fff; border-color: #b8d9cf; border-radius: 14px; box-shadow: 0 16px 42px rgba(42,78,82,.16); scrollbar-gutter:stable; }
.gb-dna-builder .gb-dna-builder__overlay h3 { color: var(--gpm-ink); }
.gb-dna-builder__overlay-panel > p:not(.gb-dna-builder__overlay-kicker):not(.gb-dna-builder__shortcut) { color: #526970; }
.gb-dna-builder__overlay-kicker { color: #2e806a; }
.gb-dna-builder__primary-button { color: #174f40; background: #d9f2e8; border-color: #94ceb9; box-shadow: none; }
.gb-dna-builder__mode-button { color:#42535a; background:#fff; border-color:#c8d9d6; box-shadow:none; }
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-panel { width:min(100%,820px); max-height:none; overflow:visible; padding:clamp(18px,3vw,28px); border-color:#cbbde3; scrollbar-gutter:auto; }
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-kicker { color:#745aa7; font-family:Consolas,"Courier New",monospace; font-weight:900; letter-spacing:.08em; }
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0 0; }
.gb-dna-builder[data-state="idle"][data-mode-menu="single"] .gb-dna-builder__overlay-actions { width:min(100%,520px); grid-template-columns:1fr; margin-inline:auto; }
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions .is-mode-card { display:grid; min-height:112px; align-content:center; gap:5px; padding:14px 17px; text-align:left; }
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions .is-mode-card strong { color:#40555b; font-size:1rem; }
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions .is-mode-card span,
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions .is-mode-card small { display:block; color:#5d7378; font-size:.72rem; font-weight:650; line-height:1.35; }
.gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions .is-mode-card small { color:#745aa7; }
@media (max-width:680px) {
  .gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions { grid-template-columns:1fr; }
  .gb-dna-builder[data-state="idle"] .gb-dna-builder__overlay-actions .is-mode-card { min-height:88px; }
}
.gb-dna-builder__results > dl > div { background: #f6faf9; border-color: #d9e6e4; }
.gb-dna-builder__results dt { color:#5b7076; }
.gb-dna-builder__results dd { color:#263a40; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-panel { width:min(100%,640px); padding:13px 16px; scrollbar-gutter:auto; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-kicker { display:none; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-panel h3 { margin:0!important; font-size:clamp(1.35rem,3vw,1.65rem); }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-panel > p { margin:6px auto; font-size:.86rem; line-height:1.35; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__results { margin:8px auto 9px; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dl { grid-template-columns:repeat(4,minmax(0,1fr)); }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dl > div { display:grid; gap:1px; padding:5px 7px; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dt { font-size:.63rem; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dd { font-size:.78rem; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__overlay-actions { margin-top:2px; padding:2px; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__primary-button { min-height:39px; padding:7px 18px; }
.gb-dna-builder[data-state="gameover"] .gb-dna-builder__shortcut { display:none; }

/* Level 3 transcription. */
.gb-rna-builder { --gb2-ink:#26363d; --gb2-muted:#6b8085; --gb2-screen:#f7fbfb; width:min(100%,1080px); color:var(--gpm-ink); }
.gb2__topbar { min-height: 52px; padding: 8px 12px 8px 15px; background: #f4f0ff; border-bottom: 1px solid #ddd4ef; }
.gb2__topbar p { color: #7860a8; font-family: inherit; }
.gb2__topbar strong { color: #2d3740; }
.gb2__top-actions button { width: 34px; height: 34px; color: #514868; background: #fff; border-color: #d7cce9; border-radius: 9px; box-shadow: none; }
.gb2__hud { gap: 0; padding: 0; background: #fff; border-bottom: 1px solid var(--gpm-line); }
.gb2__hud > div { padding: 7px 4px; background: #fff; border-right: 1px solid #e6eeed; }
.gb2__hud small { color: #73878b; font-family: inherit; }
.gb2__hud strong { color: #293a40; font-family: inherit; }
.gb2__stage { height: 450px; background: linear-gradient(rgba(91,139,145,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(91,139,145,.07) 1px,transparent 1px),linear-gradient(180deg,#fbfdff,#edf7f5); background-size:24px 24px,24px 24px,auto; }
.gb2__sequence-label { color: #465f66; }
.gb2__sequence-label strong { box-shadow: none; }
.gb2__dna-pair::before,.gb2__dna-pair::after { background: #bdd7d1; }
.gb2__dna-backbone::before,.gb2__dna-backbone>i { background:#a9cdc4; }
.gb2__dna-backbone>b { color:#33494f; background:#e5f3ee; border-color:#83b4a7; }
.gb2__rna-backbone>b { color:#4a3c1e; }
.gb2__dna-base { border-color: rgba(52,69,75,.2); box-shadow: 0 4px 9px rgba(42,78,82,.13); }
.gb2__dna-bonds { color: #4eb6e8; }
.gb2__dna-pair.is-active .gb2__template-base { box-shadow: 0 0 0 3px #fff,0 0 0 6px #69bda4,0 8px 18px rgba(42,78,82,.14); }
.gb2__polymerase { --gb2-polymerase-x: -88%; width: 104px; height: 108px; color: #5b431d; background: linear-gradient(135deg,rgba(255,222,125,.43),rgba(255,183,132,.34)); border-width: 2px; border-color: rgba(226,163,78,.42); box-shadow: 0 5px 13px rgba(108,79,35,.09); transform: translateX(var(--gb2-polymerase-x)); backdrop-filter: none; }
.gb2__polymerase::after { right: -14px; width: 32px; height: 30px; background: rgba(255,255,255,.3); border-width: 2px; border-color: rgba(226,163,78,.46); }
.gb2__polymerase span,.gb2__polymerase strong,.gb2__polymerase i { text-shadow: none; }
.gb2__polymerase span { font-size: .52rem; }
.gb2__polymerase strong { font-size: .49rem; }
.gb2__polymerase i { display: none; }
.gb2__mrna { color: #40565c; background: rgba(255,255,255,.88); border-color: #c9dcd9; box-shadow: 0 5px 14px rgba(42,78,82,.08); }
.gb2__mrna-label { color: #745aa7; }
.gb2__feedback { color: #3f5960 !important; font-family: inherit !important; }
.gb2__feedback[data-type="correct"] { color:#25745e !important; }
.gb2__feedback[data-type="wrong"] { color:#b3524b !important; }
.gb2__controls { gap: 7px; padding: 10px; background: #fff; border-top: 1px solid var(--gpm-line); }
.gb2__base-button { min-height: 54px; border-color: rgba(58,78,85,.14); box-shadow: 0 4px 10px rgba(42,78,82,.12); }
.gb2__base-button--a { background:#f7ce70; }.gb2__base-button--t { background:#79c9eb; }.gb2__base-button--c { background:#6ed9aa; }.gb2__base-button--g { background:#bba1ec; }.gb2__base-button--u { background:#9864d8; }
.gb2__overlay { background: rgba(237,246,245,.92); }
.gb2__overlay-panel { color: #41565c; background: #fff; border-color: #cbbde3; border-radius: 14px; box-shadow: 0 16px 42px rgba(42,78,82,.16); }
.gb2__overlay-panel h3 { color: var(--gpm-ink); }
.gb2__kicker { color:#745aa7 !important; }
.gb2__primary,.gb2__overlay-panel button { color:#42535a; background:#fff; border-color:#c8d9d6; box-shadow:none; }
.gb2__overlay-panel .gb2__primary { color:#4c3c68; background:#ece3ff; border-color:#c7afe9; }
.gb2__overlay-panel .gb2__cinema-button { display:inline-flex; min-height:43px; align-items:center; justify-content:center; gap:8px; margin:9px auto 4px; color:#174f44; background:linear-gradient(135deg,#dcf6ec,#e8f0ff); border-color:#82cdb9; box-shadow:0 7px 18px rgba(66,146,127,.12); }
.gb2__overlay-panel .gb2__cinema-button:hover { filter:brightness(1.02); transform:translateY(-1px); }
.gb2__final-sequences p,.gb2__results > div { background:#f7faf9; border-color:#d9e6e4; }
.gb2__final-sequences span,.gb2__results dd { color:#2f4147; }
.gb2__result-actions { background:transparent; }
.gb2__mode-card { color:#40555b!important; text-align:left; }
.gb2__mode-card span { color:#5d7378; }
.gb2__mode-card small { color:#745aa7; }
.gb2__record-badge { color:#705314!important; background:#fff0b7; border:1px solid #e7c966; }
.gb-rna-builder[data-phase="completed"] .gb2__overlay-panel,
.gb-rna-builder[data-phase="failed"] .gb2__overlay-panel { width:min(100%,690px); padding:13px 16px; scrollbar-gutter:auto; }
.gb-rna-builder[data-phase="failed"] .gb2__overlay {
  place-items: start center;
  padding: 14px 18px 0;
  background: linear-gradient(180deg, rgba(237,246,245,.34), rgba(237,246,245,.08) 72%, transparent);
  backdrop-filter: none;
}
.gb-rna-builder[data-phase="failed"] .gb2__overlay-panel {
  max-height: calc(66% - 10px);
  background-color: rgba(255,255,255,.94);
  box-shadow: 0 12px 32px rgba(42,78,82,.14);
}
.gb-rna-builder[data-phase="completed"] .gb2__overlay-panel h3,
.gb-rna-builder[data-phase="failed"] .gb2__overlay-panel h3 { margin:0!important; font-size:clamp(1.35rem,3vw,1.65rem); }
.gb-rna-builder[data-phase="completed"] .gb2__overlay-panel > p,
.gb-rna-builder[data-phase="failed"] .gb2__overlay-panel > p { margin-block:7px; font-size:.86rem; line-height:1.35; }
.gb-rna-builder[data-phase="completed"] .gb2__final-sequences { gap:4px; margin:8px 0; }
.gb-rna-builder[data-phase="completed"] .gb2__final-sequences p { padding:5px 7px; }
.gb-rna-builder[data-phase="completed"] .gb2__result-actions,
.gb-rna-builder[data-phase="failed"] .gb2__result-actions { margin:8px 0; }
.gb-rna-builder[data-phase="completed"] .gb2__result-actions button,
.gb-rna-builder[data-phase="failed"] .gb2__result-actions button { min-height:39px; padding:6px 13px; }
.gb-rna-builder[data-phase="completed"] .gb2__results,
.gb-rna-builder[data-phase="failed"] .gb2__results { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin:8px 0; }
.gb-rna-builder[data-phase="completed"] .gb2__results > div,
.gb-rna-builder[data-phase="failed"] .gb2__results > div { padding:5px 7px; }

@media (max-width: 620px) {
  .gb-protein-game { margin-top: 12px; }
  .gb-protein-game__nav { border-radius: 11px; }
  .gb-dna-builder--level-0 .gb0__stage,
  .gb-rna-nucleotide-builder .gr2__stage { padding-inline: 9px; }
  .gb-dna-builder__stage { height: 340px; }
  .gb-dna-builder__track { inset:54px 0 72px; }
  .gb-dna-builder__base--top { top:54px; }
  .gb-dna-builder__base--bottom { bottom:54px; }
  .gb-dna-builder__bonds { top:102px; bottom:102px; }
  .gb2__stage { height: 430px; }
  .gb2__polymerase { --gb2-polymerase-x: -92%; width: 90px; height: 96px; }
  .gb-dna-builder[data-state="gameover"] .gb-dna-builder__results dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gb-rna-builder[data-phase="completed"] .gb2__results,
  .gb-rna-builder[data-phase="failed"] .gb2__results { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gb-dna-builder__overlay,
  .gb2__overlay { overflow-y: auto; }
}

/* One quiet, shared utility area instead of repeating intro/music in every level. */
.gb-protein-game__navigation-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
}

.gb-protein-game__nav-tools {
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 6px;
  background: #fff;
  border: 1px solid #d9e6e4;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(42, 78, 82, .08);
}

.gb-protein-game__nav-tool {
  min-height: 0;
  color: #405960;
  background: #f8fbfa;
  border: 1px solid #cbdedb;
  border-radius: 9px;
  box-shadow: none;
  cursor: pointer;
}

.gb-protein-game__nav-intro {
  display: grid;
  width: 46px;
  place-content: center;
  gap: 2px;
  padding: 3px;
  color: #57467a;
  background: #f7f3ff;
  border-color: #d8cdef;
}

.gb-protein-game__nav-intro span { font-size: .72rem; line-height: 1; }
.gb-protein-game__nav-intro small { font-size: .45rem; font-weight: 900; letter-spacing: .06em; }
.gb-protein-game__nav-tools .gb-protein-game__music { height: auto; min-height: 0; flex-basis: 38px; }

/* The selected chapter should be unmistakable without repeating its name below. */
.gb-protein-game__nav button.is-active::before {
  position: absolute;
  top: 4px;
  left: 7px;
  content: "DU ER HER";
  color: #24745f;
  font-size: .45rem;
  font-weight: 950;
  letter-spacing: .08em;
}

.gb-protein-game__nav button.is-active strong { font-weight: 950; }

/* Compact level headers: titles are useful; repeated chapter names and controls are not. */
.gb-dna-builder--level-0 .gb0__header,
.gb-rna-nucleotide-builder .gr2__header,
.gb-translation-intro .gti__header { min-height: 48px; padding-block: 8px; }

/* Shared centred chapter title across the three teaching introductions. */
.gb-dna-builder--level-0 .gb0__header,
.gb-rna-nucleotide-builder .gr2__header,
.gb-translation-intro .gti__header {
  justify-content: center;
  padding-inline: 16px;
  background: linear-gradient(90deg, #f3faf7, #edf6ff);
  border-bottom: 1px solid var(--gpm-line);
  text-align: center;
}

.gb-dna-builder--level-0 .gb0__header h3,
.gb-rna-nucleotide-builder .gr2__header h3,
.gb-translation-intro .gti__header h3 {
  width: 100%;
  margin: 0 !important;
  color: var(--gpm-ink) !important;
  font-family: Inter, "Source Sans 3", system-ui, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
}

.gb-dna-builder .gb-dna-builder__topbar { min-height: 44px; justify-content: flex-end; padding-block: 5px; }
.gb-rna-builder .gb2__topbar,
.gb-translation-game .gt3__topbar { min-height: 48px; padding-block: 6px; }


@media (max-width: 720px) {
  .gb-protein-game__navigation-row { grid-template-columns: 1fr; }
  .gb-protein-game__nav-tools { width: max-content; justify-self: end; padding: 4px; border-radius: 11px; }
  .gb-protein-game__nav-intro { width: 42px; min-height: 34px; }
  .gb-protein-game__nav-tools .gb-protein-game__music { height: 34px; min-height: 34px; flex-basis: 34px; }
  .gb-protein-game__nav button.is-active { min-height: 53px; }

  /* Keep every level readable on phones instead of squeezing six cards into one row. */
  .gb-protein-game__nav {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .gb-protein-game__nav::-webkit-scrollbar { display: none; }
  .gb-protein-game__nav button {
    flex: 0 0 142px;
    scroll-snap-align: start;
  }
}

@container (max-width: 480px) {
  .gb-dna-builder--level-0 .gb0__header h3,
  .gb-rna-nucleotide-builder .gr2__header h3,
  .gb-translation-intro .gti__header h3 { font-size: .92rem !important; }
}

@container (max-width: 430px) {
  .gb-dna-builder__track { inset:54px 0 72px; }
  .gb-dna-builder__base--top { top:54px; }
  .gb-dna-builder__base--bottom { bottom:54px; }
  .gb-dna-builder__bonds { top:102px; bottom:102px; }
  .gb-rna-builder[data-phase="completed"] .gb2__results,
  .gb-rna-builder[data-phase="failed"] .gb2__results { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Final production polish: calm motion, clear focus and tactile controls. */
.gb-protein-game {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gb-protein-game__nav button,
.gb-dna-builder--level-0 button,
.gb-rna-nucleotide-builder button,
.gb-dna-builder button,
.gb-rna-builder button,
.gb-translation-intro button,
.gb-translation-game button {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease,
    background-color .16s ease, filter .16s ease, opacity .16s ease;
}

.gb-protein-game__nav button {
  position: relative;
  overflow: hidden;
}

.gb-protein-game__nav button.is-active {
  box-shadow: inset 0 -2px 0 #59b99d;
}

.gb-protein-game__nav button.is-active::after {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 5px;
  height: 5px;
  content: "";
  background: #45a98b;
  border-radius: 50%;
}

.gb-dna-builder--level-0 .gb0__cabinet,
.gb-rna-nucleotide-builder .gr2__cabinet,
.gb-dna-builder .gb-dna-builder__cabinet,
.gb-rna-builder .gb2__cabinet,
.gb-translation-intro .gti__cabinet,
.gb-translation-game .gt3__cabinet {
  position: relative;
  overflow: hidden;
}

.gb-dna-builder--level-0 .gb0__cabinet::before,
.gb-rna-nucleotide-builder .gr2__cabinet::before,
.gb-dna-builder .gb-dna-builder__cabinet::before,
.gb-rna-builder .gb2__cabinet::before,
.gb-translation-intro .gti__cabinet::before,
.gb-translation-game .gt3__cabinet::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  height: 2px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, #62c4a6, #78c9ec 52%, #b69aeb);
  opacity: .72;
}

.gb-dna-builder--level-0 .gb0__parts button,
.gb-rna-nucleotide-builder .gr2__parts button,
.gb-dna-builder--level-0 .gb0__base-button,
.gb-rna-nucleotide-builder .gr2__base-button,
.gb-dna-builder__base-button,
.gb2__base-button {
  min-height:50px;
  gap:7px;
  padding:5px 11px;
  border:1px solid rgba(58,78,85,.14);
  border-radius:16px;
  box-shadow:0 4px 11px rgba(42,78,82,.11);
}

.gb-dna-builder--level-0 .gb0__base-button strong,
.gb-rna-nucleotide-builder .gr2__base-button strong,
.gb-dna-builder__base-button > span,
.gb2__base-button strong {
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  margin:0;
  color:inherit;
  background:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  font:900 1.05rem/1 Consolas,"Courier New",monospace;
}

.gb-dna-builder--level-0 .gb0__base-button small,
.gb-rna-nucleotide-builder .gr2__base-button small,
.gb-dna-builder__base-button small,
.gb2__base-button small { font-size:.66rem; font-weight:800; }

.gb-dna-builder--level-0 .gb0__base-button em,
.gb-rna-nucleotide-builder .gr2__base-button em,
.gb-dna-builder__base-button em,
.gb2__base-button em { top:5px; right:8px; font-size:.52rem; }

.gb-dna-builder--level-0 .gb0__bases,
.gb-rna-nucleotide-builder .gr2__bases { width:min(100%,960px); margin-right:auto; margin-left:auto; gap:8px; }

.gb-dna-builder__controls,
.gb2__controls { gap:8px; padding:9px 11px; }

.gb-dna-builder--level-0 .gb0__base-button--u strong,
.gb-rna-nucleotide-builder .gr2__base-button--u strong,
.gb-dna-builder__base-button--u > span,
.gb2__base-button--u strong { background:rgba(255,255,255,.18); }

@container (max-width:620px) {
  .gb-dna-builder--level-0 .gb0__parts button,
  .gb-rna-nucleotide-builder .gr2__parts button { min-height:46px; grid-template-columns:34px minmax(0,1fr); gap:6px; padding:4px 7px; border-radius:13px; }
  .gb-dna-builder--level-0 .gb0__part-icon,
  .gb-rna-nucleotide-builder .gr2__part-icon { width:31px; height:31px; font-size:.76rem; }
  .gb-dna-builder--level-0 .gb0__part-icon--s,
  .gb-rna-nucleotide-builder .gr2__part-icon--r { width:33px; height:31px; }
  .gb-dna-builder--level-0 .gb0__parts button strong,
  .gb-rna-nucleotide-builder .gr2__parts button strong { font-size:.7rem; }
  .gb-dna-builder--level-0 .gb0__parts button small,
  .gb-rna-nucleotide-builder .gr2__parts button small { font-size:.52rem; }
  .gb-dna-builder--level-0 .gb0__base-button,
  .gb-rna-nucleotide-builder .gr2__base-button,
  .gb-dna-builder__base-button,
  .gb2__base-button { min-height:48px; flex-direction:column; gap:1px; padding:4px 2px; border-radius:13px; }
  .gb-dna-builder--level-0 .gb0__base-button strong,
  .gb-rna-nucleotide-builder .gr2__base-button strong,
  .gb-dna-builder__base-button > span,
  .gb2__base-button strong { width:26px; height:26px; flex-basis:26px; font-size:.9rem; }
  .gb-dna-builder--level-0 .gb0__base-button small,
  .gb-rna-nucleotide-builder .gr2__base-button small,
  .gb-dna-builder__base-button small,
  .gb2__base-button small { font-size:.49rem; }
}

.gb-dna-builder--level-0 .gb0__base-button:disabled,
.gb-rna-nucleotide-builder .gr2__base-button:disabled,
.gb-dna-builder--level-0 .gb0__parts button:disabled,
.gb-rna-nucleotide-builder .gr2__parts button:disabled,
.gb-dna-builder__icon-button:disabled,
.gb2__top-actions button:disabled {
  opacity: .58;
  filter: saturate(.72);
}

.gb-dna-builder--level-0 button:focus-visible,
.gb-rna-nucleotide-builder button:focus-visible,
.gb-dna-builder button:focus-visible,
.gb-rna-builder button:focus-visible,
.gb-translation-intro button:focus-visible,
.gb-translation-game button:focus-visible,
.gb-protein-game__nav button:focus-visible {
  outline: 3px solid #2878a5;
  outline-offset: 3px;
}

.gb-dna-builder__overlay-panel,
.gb2__overlay-panel,
.gb-dna-builder--level-0 .gb0__overlay > div,
.gb-rna-nucleotide-builder .gr2__overlay > div {
  background-image: radial-gradient(circle at 100% 0, rgba(120,201,236,.14), transparent 34%);
}

/* A quiet ownership mark inside every playable/teaching surface. */
.gb-dna-builder--level-0 .gb0__stage::after,
.gb-rna-nucleotide-builder .gr2__stage::after,
.gb-dna-builder__stage::after,
.gb2__stage::after {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 8;
  padding: 4px 7px 4px 8px;
  pointer-events: none;
  content: "GYMBIO.DK";
  color: #276d5d;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(72, 145, 127, .28);
  border-radius: 999px;
  box-shadow: 0 2px 7px rgba(42, 78, 82, .08);
  font: 800 .58rem/1 Inter, "Source Sans 3", system-ui, sans-serif;
  letter-spacing: .12em;
  opacity: .78;
}

.gb-dna-builder__primary-button,
.gb2__primary,
.gb-dna-builder--level-0 .gb0__overlay .gb0__primary,
.gb-rna-nucleotide-builder .gr2__overlay .gr2__primary {
  border-radius: 9px;
  box-shadow: 0 5px 13px rgba(42,78,82,.11);
}

.gb-dna-builder__footer button,
.gb2__footer button {
  min-height: 36px;
  border-radius: 8px;
}

@media (hover: hover) {
  .gb-protein-game__nav button:not(:disabled):hover {
    color: #255c50;
    background: #eaf7f2;
    border-color: #c4e2d8;
  }

  .gb-dna-builder--level-0 .gb0__parts button:not(:disabled):hover,
  .gb-rna-nucleotide-builder .gr2__parts button:not(:disabled):hover,
  .gb-dna-builder--level-0 .gb0__base-button:not(:disabled):hover,
  .gb-rna-nucleotide-builder .gr2__base-button:not(:disabled):hover,
  .gb-dna-builder__base-button:not(:disabled):hover,
  .gb2__base-button:not(:disabled):hover {
    filter: brightness(1.025) saturate(1.04);
    transform: translateY(-2px);
    box-shadow: 0 8px 17px rgba(42,78,82,.16);
  }

  .gb-dna-builder__icon-button:not(:disabled):hover,
  .gb2__top-actions button:not(:disabled):hover,
  .gb-dna-builder__footer button:hover,
  .gb2__footer button:hover,
  .gb-dna-builder__primary-button:hover,
  .gb2__overlay-panel button:hover,
  .gb-dna-builder--level-0 .gb0__overlay button:hover,
  .gb-rna-nucleotide-builder .gr2__overlay button:hover {
    filter: brightness(1.02);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(42,78,82,.13);
  }
}

/* Smalle mobilkort: behold de fire fælles arkadeknapper på samme linje. */
@container (max-width:360px) {
  .gb-dna-builder__topbar,
  .gb2__topbar { gap:6px; padding-inline:8px; }
  .gb-dna-builder__topbar-actions,
  .gb2__top-actions { gap:3px; }
  .gb-dna-builder .gb-dna-builder__topbar-actions > button,
  .gb-rna-builder .gb2__top-actions > button {
    width:30px;
    height:30px;
    min-height:30px;
    flex-basis:30px;
  }
  .gb2__topbar > div:first-child { min-width:0; }
  .gb2__topbar > div:first-child strong { display:block; overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
  .gb2__topbar > div:first-child p { font-size:.5rem; }
}

/* Level state colours: white=open, green=completed, red=locked. */
.gb-protein-game__nav button[data-state="open"] {
  color: #3e565d;
  background: #fff;
  border-color: #d6e3e1;
}

.gb-protein-game__nav button[data-state="completed"] {
  color: #185b4c;
  background: #def4e9;
  border-color: #85cdb4;
}

.gb-protein-game__nav button[data-state="locked"] {
  color: #934840;
  background: #fff0ef;
  border-color: #efb8b3;
  cursor: not-allowed;
}

.gb-protein-game__nav button[data-state="open"].is-active {
  color: #28534a;
  background: #fff;
  border-color: #58b99d;
  box-shadow: inset 0 -2px 0 #58b99d, 0 0 0 2px rgba(88,185,157,.14);
}

.gb-protein-game__nav button[data-state="completed"].is-active {
  color: #144f42;
  background: #d6f1e5;
  border-color: #58b99d;
  box-shadow: inset 0 -2px 0 #45a98b, 0 0 0 2px rgba(69,169,139,.14);
}

.gb-protein-game__nav button.is-active::after { display: none; }

.gb-protein-game__lock {
  top: 7px;
  right: 8px;
  left: auto;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  font: 900 .62rem/1 system-ui, sans-serif;
}

.gb-protein-game__nav button[data-state="completed"] .gb-protein-game__lock {
  color: #fff;
  background: #3fa783;
}

.gb-protein-game__nav button[data-state="locked"] .gb-protein-game__lock {
  color: #fff;
  background: #d76c63;
}

.gb-protein-game__nav button[data-state="open"] small { color: #6e8388; }
.gb-protein-game__nav button[data-state="completed"] small { color: #367563; }
.gb-protein-game__nav button[data-state="locked"] small { color: #a96862; }

@media (hover: hover) {
  .gb-protein-game__nav button[data-state="open"]:hover { background: #fbfdfd; border-color: #bcd5d0; }
  .gb-protein-game__nav button[data-state="completed"]:hover { background: #d6f1e5; border-color: #72c3a8; }
  .gb-protein-game__nav button[data-state="locked"]:hover { background: #fff0ef; border-color: #efb8b3; filter: none; transform: none; }
}

.gb-dna-builder--level-0 button:not(:disabled):active,
.gb-rna-nucleotide-builder button:not(:disabled):active,
.gb-dna-builder button:not(:disabled):active,
.gb-rna-builder button:not(:disabled):active,
.gb-translation-intro button:not(:disabled):active,
.gb-translation-game button:not(:disabled):active,
.gb-protein-game__nav button:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(42,78,82,.1);
}

@media (prefers-reduced-motion: no-preference) {
  .gb-protein-game__panel:not([hidden]) .gb0__cabinet,
  .gb-protein-game__panel:not([hidden]) .gr2__cabinet,
  .gb-protein-game__panel:not([hidden]) .gb-dna-builder__cabinet,
  .gb-protein-game__panel:not([hidden]) .gb2__cabinet,
  .gb-protein-game__panel:not([hidden]) .gti__cabinet,
  .gb-protein-game__panel:not([hidden]) .gt3__cabinet {
    animation: gpm-soft-enter .34s ease-out both;
  }

  @keyframes gpm-soft-enter {
    from { opacity: .72; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .gb-protein-game *,
  .gb-protein-game *::before,
  .gb-protein-game *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 620px) {
  .gb-dna-builder--level-0 .gb0__cabinet,
  .gb-rna-nucleotide-builder .gr2__cabinet,
  .gb-dna-builder .gb-dna-builder__cabinet,
  .gb-rna-builder .gb2__cabinet,
  .gb-translation-intro .gti__cabinet,
  .gb-translation-game .gt3__cabinet { border-radius: 12px; }

  .gb-protein-game__nav button { min-height: 48px; padding-inline: 5px; }
  .gb-protein-game__nav button.is-active::after { right: 5px; top: 5px; }

  .gb-dna-builder--level-0 .gb0__stage::after,
  .gb-rna-nucleotide-builder .gr2__stage::after,
  .gb-dna-builder__stage::after,
  .gb2__stage::after {
    right: 8px;
    bottom: 7px;
    font-size: .52rem;
  }
}

/* Final current-level emphasis; intentionally follows every state-colour rule. */
.gb-protein-game__nav button.is-active,
.gb-protein-game__nav button[data-state="open"].is-active,
.gb-protein-game__nav button[data-state="completed"].is-active {
  z-index: 1;
  min-height: 54px;
  padding-top: 15px;
  border-width: 2px;
  border-color: #3aa889;
  box-shadow: 0 0 0 3px rgba(58, 168, 137, .16), 0 7px 16px rgba(42, 96, 82, .13), inset 0 -3px 0 #3aa889;
  transform: translateY(-2px);
}

@media (max-width: 620px) {
  .gb-protein-game__nav button.is-active { min-height: 53px; }
}

/* The teaching introductions contain the guidance; playable levels use the space for play. */
.gb-protein-game .gb-dna-builder__stage,
.gb-protein-game .gb2__stage,
.gb-protein-game .gt3__stage {
  height: 540px;
  min-height: 540px;
}

/* Level 3 needs room for the complete codon table, so its ribosome scene is deliberately compact. */
.gb-protein-game .gt3__stage {
  height: 230px;
  min-height: 230px;
}
@container (max-width: 520px) {
  .gb-protein-game .gb-dna-builder__stage,
  .gb-protein-game .gb2__stage,
  .gb-protein-game .gt3__stage {
    height: 480px;
    min-height: 480px;
  }

  .gb-protein-game .gt3__stage {
    height: 225px;
    min-height: 225px;
  }
}

/* The short knowledge checks use one shared, calm visual language. */
.gb-dna-builder--level-0 .gb0__direction-challenge,
.gti__direction-check,
.gb2__strand-choice button {
  border-radius: 12px;
}

.gb-dna-builder--level-0 .gb0__direction-challenge,
.gti__direction-check {
  background: #fff;
  border: 1px solid #c6ddd8;
  box-shadow: 0 5px 15px rgba(42, 78, 82, .07);
}

.gb-dna-builder--level-0 .gb0__direction-choices button,
.gti__direction-check button,
.gb2__strand-choice button {
  min-height: 42px;
  color: #34565a;
  background: #f8fbfa;
  border: 2px solid #afd3ca;
  border-radius: 10px;
  box-shadow: 0 4px 11px rgba(42, 78, 82, .06);
}

.gb2__strand-choice button {
  border-width: 2px;
  border-color: #afd3ca;
  box-shadow: 0 5px 14px rgba(42, 78, 82, .07);
}

.gb2__strand-choice button:hover {
  border-color: #5bad95;
  transform: translateY(-1px);
}