/* DNA Builder – Level 1. Every selector is scoped to .gb-dna-builder. */
.gb-dna-builder {
  --gb-ink: #eefcf5;
  --gb-muted: #a8cabf;
  --gb-screen: #071b1b;
  --gb-screen-soft: #0d2927;
  --gb-frame: #123e3a;
  --gb-green: #56e39f;
  --gb-blue: #58c7f3;
  --gb-amber: #ffd166;
  --gb-coral: #ff7b68;
  --gb-purple: #c7a6ff;
  --gb-target-x: 28%;
  width: min(100%, 1080px);
  margin: 32px auto 0;
  color: var(--gb-ink);
  font-family: Inter, "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.4;
  container-type: inline-size;
}

.gb-dna-builder,
.gb-dna-builder * {
  box-sizing: border-box;
}

.gb-dna-builder button {
  font: inherit;
}

.gb-dna-builder button:focus-visible,
.gb-dna-builder [tabindex="0"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.gb-dna-builder__cabinet {
  overflow: hidden;
  background: #0b2422;
  border: 1px solid #2f6a60;
  border-radius: 16px;
  box-shadow: 0 22px 54px rgba(11, 46, 40, 0.22), inset 0 0 0 5px #102f2c;
}

.gb-dna-builder__topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 14px 10px 18px;
  background: linear-gradient(180deg, #174e47, #123a36);
  border-bottom: 3px solid #071b1b;
  box-shadow: inset 0 -1px #2d7165;
}

.gb-dna-builder__level,
.gb-dna-builder__hud small,
.gb-dna-builder__feedback,
.gb-dna-builder__target span,
.gb-dna-builder__overlay-kicker,
.gb-dna-builder__speed-notice {
  font-family: Consolas, "Courier New", monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.gb-dna-builder__level {
  padding: 6px 9px;
  color: #08201d;
  background: var(--gb-green);
  border-radius: 4px;
  box-shadow: 3px 3px 0 #071b1b;
}

.gb-dna-builder__topbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.gb-dna-builder__icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: #0c2a28;
  border: 1px solid #4a8c7f;
  border-radius: 5px;
  box-shadow: 3px 3px 0 #061615;
  cursor: pointer;
  font-weight: 900;
}

.gb-dna-builder__icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gb-dna-builder__help {
  position: absolute;
  top: calc(100% + 8px);
  right: 58px;
  z-index: 30;
  display: grid;
  width: min(320px, calc(100vw - 24px));
  gap: 5px;
  padding: 11px 13px;
  color: #eafff7;
  background: #0b2422;
  border: 1px solid #69ad9e;
  border-radius: 5px;
  box-shadow: 5px 5px 0 #03100f;
  font-size: 0.82rem;
}

.gb-dna-builder__help[hidden] { display: none; }
.gb-dna-builder__help strong { color: var(--gb-green); }
.gb-dna-builder__help strong:not(:first-child) { margin-top: 5px; padding-top: 7px; border-top: 1px solid rgba(105,173,158,.34); }

.gb-dna-builder__hud {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  padding: 1px;
  background: #214943;
  border-bottom: 3px solid #071b1b;
}

.gb-dna-builder__hud > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 9px 8px;
  text-align: center;
  background: #0b2422;
}

.gb-dna-builder__hud small {
  color: var(--gb-muted);
  font-size: clamp(0.59rem, 1.5vw, 0.72rem);
}

.gb-dna-builder__hud strong {
  overflow: hidden;
  color: #fff;
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(0.9rem, 2.3vw, 1.15rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-dna-builder__hud [data-gb-lives] {
  color: var(--gb-coral);
  letter-spacing: 0.08em;
}

.gb-dna-builder__stage {
  position: relative;
  height: clamp(340px, 47vw, 470px);
  min-height: 340px;
  overflow: hidden;
  background:
    linear-gradient(rgba(71, 154, 139, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 154, 139, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 70% 42%, #143b37 0, #081d1c 44%, #051514 100%);
  background-size: 22px 22px, 22px 22px, auto;
  isolation: isolate;
  outline: none;
}

.gb-dna-builder__scanlines {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(1, 11, 10, 0.15) 3px 4px);
  pointer-events: none;
}

.gb-dna-builder__direction {
  position: absolute;
  right: 18px;
  left: 18px;
  z-index: 7;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  color: #dff9ef;
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(0.72rem, 2vw, 0.88rem);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.gb-dna-builder__direction strong {
  display: grid;
  min-height: 28px;
  place-items: center;
  color: #07201d;
  background: var(--gb-amber);
  border-radius: 3px;
  box-shadow: 3px 3px 0 #061615;
  font-size: 0.88rem;
}

.gb-dna-builder__direction--top { top: 18px; }
.gb-dna-builder__direction--bottom { bottom: 54px; }
.gb-dna-builder__direction--bottom strong { background: var(--gb-blue); }

.gb-dna-builder__track {
  position: absolute;
  inset: 62px 0 88px;
  z-index: 3;
}

.gb-dna-builder__pair {
  position: absolute;
  top: 0;
  left: -34px;
  width: 68px;
  height: 100%;
  will-change: transform;
}

.gb-dna-builder__pair::before,
.gb-dna-builder__pair::after {
  position: absolute;
  left: -60px;
  width: 104px;
  height: 5px;
  content: "";
  background: #54a88f;
  box-shadow: 0 2px 0 #071b1b;
}

.gb-dna-builder__pair::before { top: 25px; }
.gb-dna-builder__pair::after { bottom: 25px; }

.gb-dna-builder__base,
.gb-dna-builder__phosphate,
.gb-dna-builder__sugar {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #061716;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
  text-shadow: none;
}

.gb-dna-builder__phosphate {
  left: 21px;
  width: 26px;
  height: 26px;
  background: #8bd7bd;
  border: 2px solid #0a312c;
  border-radius: 50%;
  font-size: 0.64rem;
}

.gb-dna-builder__sugar {
  left: 19px;
  width: 30px;
  height: 30px;
  background: #53a9c7;
  border: 2px solid #082d3b;
  clip-path: polygon(50% 0, 100% 36%, 82% 100%, 18% 100%, 0 36%);
  font-size: 0.66rem;
}

.gb-dna-builder__phosphate--top { top: 10px; }
.gb-dna-builder__sugar--top { top: 33px; }
.gb-dna-builder__phosphate--bottom { bottom: 10px; }
.gb-dna-builder__sugar--bottom { bottom: 33px; }
.gb-dna-builder__sugar-base-link { position:absolute; left:32px; z-index:1; display:block; width:4px; height:22px; background:#76a99a; border-radius:3px; }
.gb-dna-builder__sugar-base-link--top { top:58px; }
.gb-dna-builder__sugar-base-link--bottom { bottom:58px; }

.gb-dna-builder__backbone-legend { position:absolute; top:49px; right:14px; z-index:10; display:flex; align-items:center; gap:4px; padding:4px 7px; color:#496168; background:rgba(255,255,255,.86); border:1px solid #c7dad7; border-radius:999px; box-shadow:0 3px 9px rgba(42,78,82,.08); font-size:.55rem; font-weight:750; }
.gb-dna-builder__backbone-legend span { display:grid; width:20px; height:20px; place-items:center; color:#24373c; font:900 .58rem Consolas,"Courier New",monospace; }
.gb-dna-builder__legend-p { background:#d9efe7; border:1px solid #76a99a; border-radius:50%; }
.gb-dna-builder__legend-s { background:#b9deed; border:1px solid #75a7b8; clip-path:polygon(50% 0,100% 36%,82% 100%,18% 100%,0 36%); }
.gb-dna-builder__backbone-legend small { font-size:.52rem; }

.gb-dna-builder__base {
  left: 11px;
  width: 46px;
  height: 46px;
  border: 3px solid #071b1b;
  border-radius: 5px;
  box-shadow: 4px 4px 0 #03100f;
  font-size: 1.35rem;
}

.gb-dna-builder__base--top { top: 76px; }
.gb-dna-builder__base--bottom {
  bottom: 76px;
  color: #b7d0c8;
  background: #173a36;
  border-color: #729b8f;
  border-style: dashed;
}

.gb-dna-builder__base--a { background: var(--gb-amber); }
.gb-dna-builder__base--t { background: var(--gb-blue); }
.gb-dna-builder__base--c { background: var(--gb-green); }
.gb-dna-builder__base--g { background: var(--gb-purple); }

.gb-dna-builder__bonds {
  position: absolute;
  top: 124px;
  bottom: 124px;
  left: 20px;
  display: flex;
  width: 28px;
  justify-content: center;
  gap: 4px;
  filter: drop-shadow(0 0 3px rgba(98, 201, 255, 0.9));
  opacity: 0;
  transform: scaleY(.18);
  transform-origin: center;
  transition: opacity .2s ease, transform .28s ease;
}

.gb-dna-builder__bonds i { display: block; width: 3px; height: 100%; background: repeating-linear-gradient(180deg,#38aee6 0 4px,transparent 4px 8px); border-radius: 3px; }
.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__bonds i { animation: gb-dna-builder-bonds-form .32s ease both; }
.gb-dna-builder__pair[data-status="correct"] .gb-dna-builder__bonds i:nth-child(2) { animation-delay: .06s; }
.gb-dna-builder__pair[data-status="correct"] .gb-dna-builder__bonds i:nth-child(3) { animation-delay: .12s; }
.gb-dna-builder__pair[data-status="correct"] .gb-dna-builder__base--bottom { border-style: solid; }
.gb-dna-builder__pair[data-status="missed"] { opacity: 0.38; filter: grayscale(0.7); }
.gb-dna-builder__pair.is-active .gb-dna-builder__base { box-shadow: 0 0 0 4px #fff, 0 0 28px rgba(86, 227, 159, 0.8), 4px 4px 0 #03100f; }

.gb-dna-builder__target {
  position: absolute;
  top: 58px;
  bottom: 84px;
  left: var(--gb-target-x);
  z-index: 5;
  width: 112px;
  border: 3px solid rgba(255, 209, 102, 0.92);
  border-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 0 24px rgba(255, 209, 102, 0.12), 0 0 24px rgba(255, 209, 102, 0.14);
  transform: translateX(-56px);
  pointer-events: none;
}

.gb-dna-builder__target span {
  position: absolute;
  bottom: -29px;
  left: 50%;
  width: max-content;
  padding: 4px 8px;
  color: #091b19;
  background: var(--gb-amber);
  border-radius: 3px;
  box-shadow: 3px 3px 0 #03100f;
  font-size: 0.66rem;
  transform: translateX(-50%);
}

.gb-dna-builder__feedback {
  position: absolute;
  right: 18px;
  bottom: 12px;
  left: 18px;
  z-index: 9;
  min-height: 30px;
  color: #dbf8ed;
  font-size: clamp(0.68rem, 2vw, 0.82rem);
  text-align: center;
}

.gb-dna-builder__feedback[data-type="correct"] { color: var(--gb-green); }
.gb-dna-builder__feedback[data-type="wrong"] { color: #ffad9f; }

.gb-dna-builder__speed-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  padding: 8px 12px;
  color: #061916;
  background: var(--gb-amber);
  border: 2px solid #fff2b5;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #03100f;
  transform: translate(-50%, -50%);
  animation: gb-dna-builder-speed-pop 1.4s ease both;
}

.gb-dna-builder__speed-notice[hidden] { display: none; }

.gb-dna-builder__overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 16, 15, 0.86);
  backdrop-filter: blur(5px);
  overflow-y: auto;
}

.gb-dna-builder__overlay[hidden] { display: none; }

.gb-dna-builder__overlay-panel {
  width: min(100%, 610px);
  padding: clamp(22px, 5vw, 36px);
  text-align: center;
  background: #0d2a27;
  border: 2px solid #4c8b7c;
  border-radius: 8px;
  box-shadow: 8px 8px 0 #03100f;
}

.gb-dna-builder__overlay-kicker {
  margin: 0 0 10px;
  color: var(--gb-green);
  font-size: 0.72rem;
}

.gb-dna-builder .gb-dna-builder__overlay h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
}

.gb-dna-builder__overlay-panel > p:not(.gb-dna-builder__overlay-kicker):not(.gb-dna-builder__shortcut) {
  margin: 15px auto;
  color: #c4e1d8;
  font-size: clamp(0.94rem, 2vw, 1.08rem);
  line-height: 1.55;
}

.gb-dna-builder__results {
  margin: 15px auto 18px;
}

.gb-dna-builder__results[hidden],
.gb-dna-builder__new-record[hidden] {
  display: none;
}

.gb-dna-builder__new-record {
  margin: 0 0 10px !important;
  color: var(--gb-amber) !important;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem !important;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.gb-dna-builder__results dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.gb-dna-builder__results dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  color: #bcdcd2;
  background: #081f1d;
  border: 1px solid #315d56;
  border-radius: 4px;
  text-align: left;
}

.gb-dna-builder__results dt { font-size: 0.76rem; }
.gb-dna-builder__results dd {
  margin: 0;
  color: #fff;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
}

.gb-dna-builder__overlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.gb-dna-builder kbd {
  padding: 2px 7px;
  color: #09211e;
  background: var(--gb-amber);
  border: 0;
  border-radius: 3px;
  box-shadow: 2px 2px 0 #020c0b;
  font-family: Consolas, "Courier New", monospace;
}

.gb-dna-builder__primary-button {
  min-height: 48px;
  padding: 10px 22px;
  color: #061916;
  background: var(--gb-green);
  border: 2px solid #a7ffcf;
  border-radius: 5px;
  box-shadow: 5px 5px 0 #020c0b;
  cursor: pointer;
  font-weight: 900;
}

.gb-dna-builder__primary-button:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #020c0b; }
.gb-dna-builder__primary-button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #020c0b; }

.gb-dna-builder__mode-button {
  min-height: 46px;
  padding: 9px 18px;
  color: #253c43;
  background: #fff;
  border: 2px solid #9fc8c0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 850;
}
.gb-dna-builder__mode-button:hover { border-color:#62b9a2; transform:translateY(-1px); }
.gb-dna-builder__mode-button:focus-visible { outline:3px solid #2878a5; outline-offset:2px; }

.gb-dna-builder__shortcut {
  margin: 14px 0 0;
  color: var(--gb-muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.gb-dna-builder__helix-progress {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  width: min(calc(100% - 24px), 560px);
  min-height: 70px;
  margin: 10px auto;
  padding: 6px 14px;
  color: #dff8ef;
  background: linear-gradient(90deg, #071b1b, #0d302c);
  border: 1px solid #397469;
  border-radius: 11px;
}

.gb-dna-builder__helix-graphic {
  position: relative;
  display: grid;
  width: 48px;
  height: 58px;
  align-content: center;
  justify-items: center;
  gap: 1px;
}

.gb-dna-builder__helix-graphic::before,
.gb-dna-builder__helix-graphic::after {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 10px;
  content: "";
  border: 4px solid rgba(191, 225, 216, 0.42);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}
.gb-dna-builder__helix-graphic::before { left: 16px; transform: skewY(-12deg); }
.gb-dna-builder__helix-graphic::after { right: 16px; transform: skewY(12deg); }

.gb-dna-builder__helix-graphic span {
  position: relative;
  z-index: 2;
  display: block;
  width: 34px;
  height: 4px;
  background: #34534d;
  border-radius: 3px;
  transition: background .2s ease, filter .2s ease, transform .2s ease;
}
.gb-dna-builder__helix-graphic span:nth-child(6n+2),
.gb-dna-builder__helix-graphic span:nth-child(6n+6) { width: 50px; }
.gb-dna-builder__helix-graphic span:nth-child(6n+3),
.gb-dna-builder__helix-graphic span:nth-child(6n+5) { width: 68px; }
.gb-dna-builder__helix-graphic span:nth-child(6n+4) { width: 80px; }
.gb-dna-builder__helix-graphic span::before,
.gb-dna-builder__helix-graphic span::after { position: absolute; top: -2px; width: 8px; height: 8px; content: ""; background: #4a6862; border-radius: 50%; }
.gb-dna-builder__helix-graphic span::before { left: -4px; }
.gb-dna-builder__helix-graphic span::after { right: -4px; }
.gb-dna-builder__helix-graphic span.is-built { background: linear-gradient(90deg, var(--gb-amber) 0 45%, #62c9ff 45% 55%, var(--gb-blue) 55%); filter: drop-shadow(0 0 4px rgba(98, 201, 255, .68)); animation: gb-dna-builder-helix-build .42s ease both; }
.gb-dna-builder__helix-graphic span.is-built:nth-child(4n+2) { background: linear-gradient(90deg, var(--gb-green) 0 44%, #62c9ff 44% 56%, var(--gb-purple) 56%); }
.gb-dna-builder__helix-graphic span.is-built::before,
.gb-dna-builder__helix-graphic span.is-built::after { background: #bfe1d8; }
.gb-dna-builder__helix-graphic::before,
.gb-dna-builder__helix-graphic::after { content: none; }
.gb-dna-builder__helix-graphic svg { display: block; width: 100%; height: 100%; overflow: visible; transform: scale(var(--gb-helix-scale,.72)); transform-origin: center bottom; transition: transform .34s ease; }
.gb-dna-builder__helix-rail { fill: none; stroke: rgba(191,225,216,.62); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--gb-helix-offset,100); transition: stroke-dashoffset .38s ease; }
.gb-dna-builder__helix-rung { opacity: 0; transform: scaleX(.22); transform-box: fill-box; transform-origin: center; }
.gb-dna-builder__helix-rung line { stroke: #34534d; stroke-width: 3.5; stroke-linecap: round; }
.gb-dna-builder__helix-rung circle { fill: #4a6862; }
.gb-dna-builder__helix-rung.is-built { opacity: 1; animation: gb-dna-builder-helix-build .42s ease both; }
.gb-dna-builder__helix-rung.is-built line { stroke: #62c9ff; filter: drop-shadow(0 0 2px rgba(98,201,255,.95)); }
.gb-dna-builder__helix-rung--at.is-built circle:first-of-type { fill: var(--gb-amber); }
.gb-dna-builder__helix-rung--at.is-built circle:last-of-type { fill: var(--gb-blue); }
.gb-dna-builder__helix-rung--cg.is-built circle:first-of-type { fill: var(--gb-green); }
.gb-dna-builder__helix-rung--cg.is-built circle:last-of-type { fill: var(--gb-purple); }
.gb-dna-builder__helix-progress.is-complete { border-color: var(--gb-green); box-shadow: inset 0 0 22px rgba(86,227,159,.14); }
.gb-dna-builder__helix-copy span,
.gb-dna-builder__helix-copy strong,
.gb-dna-builder__helix-copy small { display: block; }
.gb-dna-builder__helix-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:1px 12px; }
.gb-dna-builder__helix-copy span { color: #62c9ff; font: 900 .58rem Consolas,"Courier New",monospace; letter-spacing: .08em; }
.gb-dna-builder__helix-copy strong { margin:0; color: #fff; font: 900 .9rem Consolas,"Courier New",monospace; white-space:nowrap; }
.gb-dna-builder__helix-copy b { color: var(--gb-green); }
.gb-dna-builder__helix-copy small { grid-column:1/-1; max-width: 420px; color: #b8d9cf; font-size: .66rem; line-height: 1.3; }
.gb-dna-builder__next-level { width:max-content; max-width:100%; min-height:36px; margin-top:8px; padding:7px 12px; color:#062019; background:var(--gb-green); border:1px solid #b9f8dc; border-radius:6px; font:800 .74rem system-ui,sans-serif; cursor:pointer; }
.gb-dna-builder__next-level--overlay { margin-top:0; }

.gb-dna-builder__controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #123a36;
  border-top: 3px solid #061716;
}

.gb-dna-builder__base-button {
  position: relative;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #061716;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 5px;
  box-shadow: 4px 4px 0 #04110f;
  cursor: pointer;
  touch-action: manipulation;
}

.gb-dna-builder__base-button > span {
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.45rem;
  font-weight: 900;
}

.gb-dna-builder__base-button small { font-size: 0.76rem; font-weight: 800; }
.gb-dna-builder__base-button em {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  opacity: 0.65;
}
.gb-dna-builder__base-button--a { background: var(--gb-amber); }
.gb-dna-builder__base-button--t { background: var(--gb-blue); }
.gb-dna-builder__base-button--c { background: var(--gb-green); }
.gb-dna-builder__base-button--g { background: var(--gb-purple); }
.gb-dna-builder__base-button--u { color: #fff; background: #8f56d9; border-color: #e0c6ff; }
.gb-dna-builder__base-button:hover { filter: brightness(1.08); transform: translate(-1px, -1px); }
.gb-dna-builder__base-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #04110f; }

.gb-dna-builder__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px 15px;
  color: #b8d9cf;
  background: #0b2422;
  border-top: 1px solid #2c5d55;
}

.gb-dna-builder__footer p { margin: 0; color: inherit !important; font-size: 0.83rem !important; line-height: 1.45 !important; }
.gb-dna-builder__footer button { flex: 0 0 auto; padding: 7px 10px; color: #dff8ef; background: transparent; border: 1px solid #568d81; border-radius: 4px; cursor: pointer; font-weight: 750; }

.gb-dna-builder[data-flash="wrong"] .gb-dna-builder__stage,
.gb-dna-builder[data-flash="missed"] .gb-dna-builder__stage { animation: gb-dna-builder-shake 180ms linear; }
.gb-dna-builder[data-flash="correct"] .gb-dna-builder__target { animation: gb-dna-builder-pulse 260ms ease-out; }

@keyframes gb-dna-builder-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  65% { transform: translateX(5px); }
}

@keyframes gb-dna-builder-pulse {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

@keyframes gb-dna-builder-helix-build {
  0% { opacity: .25; transform: scaleX(.25); }
  70% { transform: scaleX(1.12); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes gb-dna-builder-bonds-form {
  from { opacity: 0; transform: scaleY(.1); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes gb-dna-builder-speed-pop {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(0.82); }
  16%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.94); }
}

@container (max-width: 700px) {
  .gb-dna-builder__hud { grid-template-columns: repeat(3, 1fr); }
  .gb-dna-builder__topbar { gap: 8px; }
  .gb-dna-builder__direction { right: 10px; left: 10px; }
  .gb-dna-builder__direction span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gb-dna-builder__base-button { min-height: 64px; flex-direction: column; gap: 0; padding: 5px 2px; }
  .gb-dna-builder__base-button small { font-size: clamp(0.55rem, 2.1vw, 0.7rem); }
  .gb-dna-builder__footer { align-items: flex-start; }
}

@container (max-width: 430px) {
  .gb-dna-builder__topbar { padding-inline: 10px; }
  .gb-dna-builder__level { font-size: 0.7rem; }
  .gb-dna-builder__topbar-actions { gap: 5px; }
  .gb-dna-builder__icon-button { width: 34px; height: 34px; }
  .gb-dna-builder__help { right: 49px; }
  .gb-dna-builder__stage { min-height: 330px; height: 330px; }
  .gb-dna-builder__track { inset-block: 58px 82px; transform: scale(0.9); transform-origin: center; }
  .gb-dna-builder__target { top: 54px; bottom: 80px; }
  .gb-dna-builder__direction--top { top: 12px; }
  .gb-dna-builder__direction--bottom { bottom: 48px; }
  .gb-dna-builder__direction span { font-size: 0.65rem; }
  .gb-dna-builder__backbone-legend { top: 43px; right: 8px; gap: 3px; padding: 3px 5px; }
  .gb-dna-builder__backbone-legend span { width: 17px; height: 17px; font-size: .5rem; }
  .gb-dna-builder__backbone-legend small { font-size: .44rem; }
  .gb-dna-builder__overlay { padding: 12px; }
  .gb-dna-builder__overlay-panel { padding: 20px 14px; box-shadow: 5px 5px 0 #03100f; }
  .gb-dna-builder__shortcut { display: none; }
  .gb-dna-builder__controls { gap: 4px; padding: 9px 7px; }
  .gb-dna-builder__helix-progress { grid-template-columns: 43px 1fr; gap: 8px; width:calc(100% - 14px); min-height: 62px; margin:7px auto; padding:5px 9px; }
  .gb-dna-builder__helix-graphic { width: 39px; height:50px; transform:none; }
  .gb-dna-builder__helix-copy { gap:1px 7px; }
  .gb-dna-builder__helix-copy span { font-size:.5rem; }
  .gb-dna-builder__helix-copy strong { font-size: .76rem; }
  .gb-dna-builder__helix-copy small { font-size: .56rem; }
  .gb-dna-builder__base-button { min-height: 61px; }
  .gb-dna-builder__base-button > span { font-size: 1.2rem; }
  .gb-dna-builder__base-button small { font-size: 0.55rem; }
  .gb-dna-builder__base-button em { top: 2px; right: 4px; font-size: 0.52rem; }
  .gb-dna-builder__results dl { grid-template-columns: 1fr; }
  .gb-dna-builder__overlay-actions { flex-direction: column; }
  .gb-dna-builder__overlay-actions button { width: 100%; }
  .gb-dna-builder__footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-dna-builder *,
  .gb-dna-builder *::before,
  .gb-dna-builder *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .gb-dna-builder__scanlines { display: none; }
}

@media (max-width: 430px) {
  .gb-dna-builder {
    width: calc(100% + 64px);
    max-width: calc(100vw - 24px);
    margin-inline: -32px;
  }
}

/* The contextual help lives in the footer instead of taking up a header row. */
.gb-dna-builder__footer {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.gb-dna-builder__footer-help { position: relative; z-index: 2; }
.gb-dna-builder__footer-actions { display: flex; justify-content: flex-end; }
.gb-dna-builder__footer .gb-dna-builder__help-button {
  display: grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  color: #40575d;
  background: #fff;
  border: 1px solid #b9d4ce;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(42, 78, 82, .1);
  font-weight: 900;
}
.gb-dna-builder__help-button[aria-expanded="true"] { color: #185b4c; background: #e2f5ed; border-color: #8cccb6; }
.gb-dna-builder__footer .gb-dna-builder__help {
  top: auto;
  right: auto;
  bottom: calc(100% + 9px);
  left: 0;
  width: min(320px, calc(100cqw - 28px));
}
@container (max-width: 480px) {
  .gb-dna-builder__footer { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .gb-dna-builder__footer-actions { width: auto; }
  .gb-dna-builder__footer p { font-size: .7rem !important; }
}