/* LEVEL 0 styles, isolated under .gb-dna-builder--level-0. */
.gb-dna-builder--level-0 { color: #eefcf5; }
.gb-dna-builder--level-0,
.gb-dna-builder--level-0 * { box-sizing: border-box; }

.gb-dna-builder--level-0 .gb0__cabinet { overflow: hidden; background: #0b2422; border: 1px solid #2f6a60; border-radius: 16px; box-shadow: 0 22px 54px rgba(11,46,40,.22), inset 0 0 0 5px #102f2c; }
.gb-dna-builder--level-0 .gb0__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; background: linear-gradient(180deg,#174e47,#123a36); border-bottom: 3px solid #071b1b; }
.gb-dna-builder--level-0 .gb0__header p,
.gb-dna-builder--level-0 .gb0__header h3 { max-width: none!important; margin: 0!important; color: #fff!important; }
.gb-dna-builder--level-0 .gb0__header p,
.gb-dna-builder--level-0 .gb0__header-actions > span { font-family: Consolas,"Courier New",monospace; font-weight: 900; letter-spacing: .08em; }
.gb-dna-builder--level-0 .gb0__header p { color: #56e39f; font-size: .72rem; }
.gb-dna-builder--level-0 .gb0__header h3 { font-size: 1.08rem!important; }
.gb-dna-builder--level-0 .gb0__header-actions { display:flex; align-items:center; gap:7px; }
.gb-dna-builder--level-0 .gb0__header-actions > span { flex: 0 0 auto; padding: 5px 8px; color: #08201d; background: #ffd166; border-radius: 4px; box-shadow: 3px 3px 0 #071b1b; font-size: .7rem; }

.gb-dna-builder--level-0 .gb0__stage { position: relative; min-height: 545px; overflow: hidden; padding: 22px 18px 64px; background: radial-gradient(circle at 50% 36%,#143b37 0,#081d1c 58%,#051514 100%); }
.gb-dna-builder--level-0 .gb0__lesson { width: min(100%,720px); margin: 0 auto; }
.gb-dna-builder--level-0 .gb0__eyebrow { margin: 0 0 3px!important; color: #56e39f!important; font: 900 .7rem Consolas,"Courier New",monospace!important; letter-spacing: .08em; text-align: center; }
.gb-dna-builder--level-0 .gb0__task-title { max-width: none!important; margin: 0 0 14px!important; color: #fff!important; font-size: 1.2rem!important; text-align: center; }
.gb-dna-builder--level-0 .gb0__explanation,
.gb-dna-builder--level-0 .gb0__pair-instruction,
.gb-dna-builder--level-0 .gb0__antiparallel { color: #dff8ef!important; text-align: center; }
.gb-dna-builder--level-0 .gb0__explanation { max-width: 610px; margin: 14px auto 0!important; font-size: .84rem!important; }

.gb-dna-builder--level-0 .gb0__build-card { display: grid; width: min(100%,600px); min-height: 138px; grid-template-columns: 118px 48px 148px 48px 118px; align-items: center; justify-content: center; margin: 0 auto; padding: 18px; background: rgba(2,15,14,.42); border: 1px solid #315e56; border-radius: 10px; }
.gb-dna-builder--level-0 .gb0__build-slot { display: grid; min-height: 82px; align-content: center; justify-items: center; gap: 2px; color: #99b9b0; background: rgba(255,255,255,.035); border: 2px dashed #4a746c; font-family: Consolas,"Courier New",monospace; text-transform: uppercase; }
.gb-dna-builder--level-0 .gb0__build-slot strong { font-size: 1.45rem; }
.gb-dna-builder--level-0 .gb0__build-slot small { font-size: .57rem; font-weight: 800; text-align: center; }
.gb-dna-builder--level-0 .gb0__build-slot--phosphate { width: 88px; height: 88px; min-height: 88px; justify-self: center; border-radius: 50%; }
.gb-dna-builder--level-0 .gb0__build-slot--sugar { position: relative; width: 120px; height: 100px; min-height: 100px; justify-self: center; clip-path: polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%); }
.gb-dna-builder--level-0 .gb0__build-slot--sugar::before { position: absolute; top: 12px; right: 22px; content: "O"; color: currentColor; font: 900 .62rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__build-slot--base { border-radius: 5px 18px 18px 5px; }
.gb-dna-builder--level-0 .gb0__build-slot.is-filled { color: #061716; border-style: solid; box-shadow: 4px 4px 0 #03100f; }
.gb-dna-builder--level-0 .gb0__build-slot--phosphate.is-filled { background: #f5e8c8; }
.gb-dna-builder--level-0 .gb0__build-slot--sugar.is-filled { background: #9dd8c9; }
.gb-dna-builder--level-0 .gb0__build-slot--a.is-filled { background: #ffd166; }
.gb-dna-builder--level-0 .gb0__build-slot--t.is-filled { background: #58c7f3; }
.gb-dna-builder--level-0 .gb0__build-slot--c.is-filled { background: #56e39f; }
.gb-dna-builder--level-0 .gb0__build-slot--g.is-filled { background: #c7a6ff; }
.gb-dna-builder--level-0 .gb0__build-link { height: 4px; background: #83b6a9; box-shadow: 0 2px 0 #061716; }
.gb-dna-builder--level-0 .gb0__build-slot.is-new { animation: gb0-place .48s ease both; }

/* The growing backbone makes the phosphodiester layout explicit: 5′—P—S—P—S—3′. */
.gb-dna-builder--level-0 .gb0__backbone-card { width:min(100%,720px); margin:0 auto; padding:12px 14px 10px; color:#dff8ef; background:rgba(2,15,14,.42); border:1px solid #315e56; border-radius:10px; }
.gb-dna-builder--level-0 .gb0__backbone-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; font:800 .7rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__backbone-heading span { color:#8cb8ad; letter-spacing:.08em; }
.gb-dna-builder--level-0 .gb0__backbone-scroll { overflow-x:auto; padding:5px 3px 9px; scrollbar-width:thin; }
.gb-dna-builder--level-0 .gb0__chain { display:flex; width:max-content; min-width:100%; align-items:flex-start; justify-content:center; padding:0 3px 2px; }
.gb-dna-builder--level-0 .gb0__chain-end { display:grid; min-width:30px; height:54px; place-items:center; color:#56e39f; font:900 .72rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__chain-unit { position:relative; display:grid; width:126px; grid-template-columns:44px 20px 62px; grid-template-rows:54px 16px 48px; align-items:center; justify-items:center; }
.gb-dna-builder--level-0 .gb0__chain-unit + .gb0__chain-unit::before { position:absolute; top:25px; left:-1px; width:14px; height:3px; content:""; background:#8ebbb0; transform:translateX(-100%); }
.gb-dna-builder--level-0 .gb0__chain-phosphate { display:grid; width:40px; height:40px; grid-row:1; place-content:center; color:#79958e; background:#132c29; border:2px dashed #52766f; border-radius:50%; }
.gb-dna-builder--level-0 .gb0__chain-bond { width:100%; height:3px; grid-row:1; background:#8ebbb0; }
.gb-dna-builder--level-0 .gb0__chain-sugar { display:grid; width:62px; height:54px; grid-row:1; place-content:center; color:#79958e; background:#132c29; border:2px dashed #52766f; clip-path:polygon(50% 0,100% 37%,82% 100%,18% 100%,0 37%); }
.gb-dna-builder--level-0 .gb0__chain-base-bond { width:3px; height:16px; grid-column:3; grid-row:2; background:#8ebbb0; }
.gb-dna-builder--level-0 .gb0__chain-base { display:grid; width:54px; height:43px; grid-column:3; grid-row:3; place-content:center; color:#79958e; background:#132c29; border:2px dashed #52766f; border-radius:5px 14px 14px 5px; }
.gb-dna-builder--level-0 .gb0__chain-phosphate strong,.gb-dna-builder--level-0 .gb0__chain-sugar strong,.gb-dna-builder--level-0 .gb0__chain-base strong { font:900 .95rem Consolas,"Courier New",monospace; line-height:1; }
.gb-dna-builder--level-0 .gb0__chain-phosphate small,.gb-dna-builder--level-0 .gb0__chain-sugar small,.gb-dna-builder--level-0 .gb0__chain-base small { margin-top:3px; font:800 .38rem Consolas,"Courier New",monospace; text-transform:uppercase; }
.gb-dna-builder--level-0 .gb0__chain-phosphate.is-filled { color:#152321; background:#f5e8c8; border-style:solid; }
.gb-dna-builder--level-0 .gb0__chain-sugar.is-filled { color:#11211e; background:#9dd8c9; border-style:solid; }
.gb-dna-builder--level-0 .gb0__chain-base.is-filled { color:#101d1b; border-style:solid; }
.gb-dna-builder--level-0 .gb0__chain-base--a.is-filled { background:#ffd166; }
.gb-dna-builder--level-0 .gb0__chain-base--t.is-filled { background:#58c7f3; }
.gb-dna-builder--level-0 .gb0__chain-base--c.is-filled { background:#56e39f; }
.gb-dna-builder--level-0 .gb0__chain-base--g.is-filled { background:#c7a6ff; }
.gb-dna-builder--level-0 .gb0__chain-unit.is-current { padding:2px; background:rgba(86,227,159,.05); outline:2px solid rgba(86,227,159,.3); outline-offset:2px; border-radius:8px; }
.gb-dna-builder--level-0 .gb0__chain-unit .is-new { animation:gb0-place .48s ease both; }
.gb-dna-builder--level-0 .gb0__backbone-note { margin:4px 0 0!important; color:#bcd8d1!important; font-size:.72rem!important; text-align:center; }
.gb-dna-builder--level-0 .gb0__backbone-note strong { color:#fff; }

.gb-dna-builder--level-0 .gb0__overview { width: min(100%,720px); margin: 20px auto 0; padding: 12px; background: rgba(7,31,29,.7); border: 1px solid #315e56; border-radius: 8px; }
.gb-dna-builder--level-0 .gb0__overview h4 { max-width: none!important; margin: 0 0 10px!important; color: #dff8ef!important; font-size: .82rem!important; text-align: center; }
.gb-dna-builder--level-0 .gb0__overview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.gb-dna-builder--level-0 .gb0__overview-item { display: grid; min-height: 58px; grid-template-columns: 24px 24px 1fr; align-items: center; gap: 3px; padding: 6px; color: #78938c; background: #091d1b; border: 1px dashed #3a5b55; border-radius: 5px; opacity: .62; }
.gb-dna-builder--level-0 .gb0__overview-item span { display: grid; width: 24px; height: 24px; place-items: center; color: #07201d; background: #9dd8c9; border-radius: 3px; font: 900 .65rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__overview-item span:first-child { background: #f5e8c8; border-radius: 50%; }
.gb-dna-builder--level-0 .gb0__overview-item strong { display: grid; height: 34px; place-items: center; color: #10221f; border-radius: 3px; font: 900 1rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__overview-item small { grid-column: 1/-1; font-size: .55rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.gb-dna-builder--level-0 .gb0__overview-item--a strong { background: #ffd166; }
.gb-dna-builder--level-0 .gb0__overview-item--t strong { background: #58c7f3; }
.gb-dna-builder--level-0 .gb0__overview-item--c strong { background: #56e39f; }
.gb-dna-builder--level-0 .gb0__overview-item--g strong { background: #c7a6ff; }
.gb-dna-builder--level-0 .gb0__overview-item.is-built { color: #dff8ef; border-style: solid; border-color: #6aa598; opacity: 1; animation: gb0-overview-in .45s ease both; }

.gb-dna-builder--level-0 .gb0__pair-instruction { margin: -5px 0 10px!important; font-size: .82rem!important; }
.gb-dna-builder--level-0 .gb0__fragment { width: min(100%,640px); margin: 0 auto; padding: 10px 12px 12px; background: rgba(2,15,14,.48); border: 1px solid #315e56; border-radius: 10px; }
.gb-dna-builder--level-0 .gb0__direction { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; color: #dff9ef; font: 800 .68rem Consolas,"Courier New",monospace; text-align: center; text-transform: uppercase; }
.gb-dna-builder--level-0 .gb0__direction strong { display: grid; min-height: 26px; place-items: center; color: #07201d; background: #ffd166; border-radius: 3px; box-shadow: 3px 3px 0 #061615; }
.gb-dna-builder--level-0 .gb0__direction--bottom strong { background: #58c7f3; }
.gb-dna-builder--level-0 .gb0__fragment-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px; width: min(100%,430px); margin: 10px auto; }
.gb-dna-builder--level-0 .gb0__fragment-grid::before,
.gb-dna-builder--level-0 .gb0__fragment-grid::after { position: absolute; right: 18px; left: 18px; z-index: 0; height: 4px; content: ""; background: #8fc7b9; box-shadow: 0 2px 0 #03100f; }
.gb-dna-builder--level-0 .gb0__fragment-grid::before { top: 17px; }
.gb-dna-builder--level-0 .gb0__fragment-grid::after { bottom: 35px; }
.gb-dna-builder--level-0 .gb0__pair-column { position: relative; z-index: 1; display: grid; grid-template-rows: 38px 15px 48px 38px 48px 15px 38px 18px; align-items: center; justify-items: center; }
.gb-dna-builder--level-0 .gb0__mini-backbone { z-index: 2; display: grid; width: 116px; grid-template-columns: 34px 44px 38px; align-items: center; }
.gb-dna-builder--level-0 .gb0__mini-backbone--top { transform: translateX(-26px); }
.gb-dna-builder--level-0 .gb0__mini-backbone--bottom { transform: translateX(26px); }
.gb-dna-builder--level-0 .gb0__mini-backbone span { display: grid; width: 34px; height: 34px; place-items: center; color: #061716; background: #9dd8c9; font: 900 .72rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__mini-backbone .gb0__mini-phosphate { background: #f5e8c8; border-radius: 50%; }
.gb-dna-builder--level-0 .gb0__mini-backbone .gb0__mini-sugar { clip-path: polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%); }
.gb-dna-builder--level-0 .gb0__mini-backbone i { height: 4px; background: #8fc7b9; }
.gb-dna-builder--level-0 .gb0__base-arm { display: block; width: 4px; height: 15px; background: #8fc7b9; box-shadow: 2px 0 0 #03100f; }
.gb-dna-builder--level-0 .gb0__fragment-base { display: grid; width: 50px; height: 48px; place-items: center; color: #061716; border: 2px solid rgba(255,255,255,.58); border-radius: 5px; box-shadow: 3px 3px 0 #03100f; font: 900 1.25rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__fragment-base--a { background: #ffd166; }
.gb-dna-builder--level-0 .gb0__fragment-base--t { background: #58c7f3; }
.gb-dna-builder--level-0 .gb0__fragment-base--c { background: #56e39f; }
.gb-dna-builder--level-0 .gb0__fragment-base--g { background: #c7a6ff; }
.gb-dna-builder--level-0 .gb0__fragment-base.is-empty { color: #9bbcb2; background: rgba(255,255,255,.035); border-style: dashed; box-shadow: none; }
.gb-dna-builder--level-0 .gb0__fragment-base.is-filled { animation: gb0-place .48s ease both; }
.gb-dna-builder--level-0 .gb0__pair-bonds { display: grid; width: 64px; min-height: 30px; align-content: center; gap: 6px; justify-self: center; }
.gb-dna-builder--level-0 .gb0__pair-bonds span { width: 64px; border-top: 4px dashed #62c9ff; filter: drop-shadow(0 0 4px rgba(98,201,255,.95)); animation: gb0-bond-in .42s ease both; }
.gb-dna-builder--level-0 .gb0__pair-name { display: grid; gap: 2px; color: #dff8ef; font: 800 .62rem Consolas,"Courier New",monospace; text-align: center; }
.gb-dna-builder--level-0 .gb0__pair-name strong { font: inherit; }
.gb-dna-builder--level-0 .gb0__pair-name span { color: #62c9ff; font-size: .58rem; }
.gb-dna-builder--level-0 .gb0__bond-explainer { display: flex; width: min(100%,500px); align-items: center; justify-content: center; gap: 12px; margin: 2px auto 9px; padding: 3px 8px; color: #dff5ff; text-align: left; }
.gb-dna-builder--level-0 .gb0__bond-explainer p { display: grid; gap: 2px; margin: 0!important; font-size: .68rem!important; line-height: 1.35!important; }
.gb-dna-builder--level-0 .gb0__bond-explainer strong { font: 900 .65rem Consolas,"Courier New",monospace; letter-spacing: .04em; }
.gb-dna-builder--level-0 .gb0__bond-explainer span { color: #9ee1ff; font-weight: 750; }
.gb-dna-builder--level-0 .gb0__bond-sample { display: grid; width: 40px; flex: 0 0 40px; gap: 5px; }
.gb-dna-builder--level-0 .gb0__bond-sample i { width: 40px; border-top: 3px dashed #62c9ff; filter: drop-shadow(0 0 3px rgba(98,201,255,.75)); }
.gb-dna-builder--level-0 .gb0__antiparallel { margin: 10px 0 0!important; color: #ffd166!important; font-size: .78rem!important; font-weight: 800!important; }
.gb-dna-builder--level-0 .gb0__fragment.is-complete { animation: gb0-fragment-complete .85s ease both; }

.gb-dna-builder--level-0 .gb0__feedback { position: absolute; right: 18px; bottom: 20px; left: 18px; min-height: 22px; margin: 0!important; color: #dff8ef!important; font: 800 .76rem Consolas,"Courier New",monospace!important; text-align: center; }
.gb-dna-builder--level-0 .gb0__feedback:empty { min-height: 0; }
.gb-dna-builder--level-0 [data-flash="correct"] .gb0__active-target { animation: gb0-correct .5s ease both; }
.gb-dna-builder--level-0 [data-flash="wrong"] .gb0__active-target,
.gb-dna-builder--level-0 .gb0__pair-column.is-wrong { animation: gb0-wrong .42s ease both; }

.gb-dna-builder--level-0 .gb0__controls { padding: 15px; background: #123a36; border-top: 3px solid #061716; }
.gb-dna-builder--level-0 .gb0__completion-controls { display:flex; width:min(100%,720px); align-items:center; justify-content:space-between; gap:16px; margin:0 auto; padding:10px 12px; color:#dff8ef; background:#0d2a27; border:1px solid #4c8b7c; border-radius:8px; }
.gb-dna-builder--level-0 .gb0__completion-controls > div { display:grid; gap:2px; text-align:left; }
.gb-dna-builder--level-0 .gb0__completion-controls strong { color:#fff; font-size:.82rem; }
.gb-dna-builder--level-0 .gb0__completion-controls span { color:#bcd8d1; font-size:.72rem; }
.gb-dna-builder--level-0 .gb0__completion-controls .gb0__primary { flex:0 0 auto; min-height:42px; padding:7px 15px; color:#061916; background:#56e39f; border:1px solid #a7ffcf; border-radius:7px; cursor:pointer; font-weight:900; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.gb-dna-builder--level-0 .gb0__completion-controls .gb0__primary:hover { filter:brightness(1.03); transform:translateY(-1px); box-shadow:0 7px 18px rgba(42,78,82,.14); }
.gb-dna-builder--level-0 .gb0__completion-controls .gb0__primary:focus-visible { outline:3px solid #4ca9d7; outline-offset:3px; }
.gb-dna-builder--level-0 .gb0__direction-result { max-width:540px; gap:5px!important; }
.gb-dna-builder--level-0 .gb0__direction-result span { line-height:1.4; }
.gb-dna-builder--level-0 .gb0__navigation-note { max-width:230px; margin:0!important; color:#bcd8d1!important; font-size:.68rem!important; font-weight:800; line-height:1.4; text-align:right; }
.gb-dna-builder--level-0 .gb0__direction-result b { color:inherit; }
.gb-dna-builder--level-0 .gb0__direction-challenge { display:grid; width:min(100%,760px); grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 18px; margin:0 auto; padding:12px 14px; color:#dff8ef; background:#0d2a27; border:1px solid #4c8b7c; border-radius:9px; }
.gb-dna-builder--level-0 .gb0__direction-challenge > div:first-child { display:grid; gap:3px; text-align:left; }
.gb-dna-builder--level-0 .gb0__direction-challenge strong { color:#7de5c1; font:900 .64rem Consolas,"Courier New",monospace; letter-spacing:.08em; }
.gb-dna-builder--level-0 .gb0__direction-challenge span { color:#fff; font-size:.78rem; font-weight:750; line-height:1.35; }
.gb-dna-builder--level-0 .gb0__direction-challenge small { grid-column:1/-1; color:#a9c9c1; font-size:.62rem; text-align:left; }
.gb-dna-builder--level-0 .gb0__direction-choices { display:flex; gap:8px; }
.gb-dna-builder--level-0 .gb0__direction-choices button { min-width:105px; min-height:44px; padding:7px 10px; color:#08201d; background:#fff; border:2px solid #8fc7b9; border-radius:7px; cursor:pointer; font:900 .78rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__direction-choices button:hover { background:#e7fff5; transform:translateY(-1px); }
.gb-dna-builder--level-0 .gb0__direction-choices button:focus-visible { outline:3px solid #62c9ff; outline-offset:2px; }
.gb-dna-builder--level-0 .gb0__direction-challenge.is-wrong { border-color:#ff8585; animation:gb0-wrong .42s ease both; }
.gb-dna-builder--level-0 .gb0__parts,
.gb-dna-builder--level-0 .gb0__bases { display: grid; gap: 9px; }
.gb-dna-builder--level-0 .gb0__parts { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 10px; }
.gb-dna-builder--level-0 .gb0__bases { grid-template-columns: repeat(5,minmax(0,1fr)); }
.gb-dna-builder--level-0 .gb0__parts button,
.gb-dna-builder--level-0 .gb0__base-button,
.gb-dna-builder--level-0 .gb0__overlay button { min-height: 58px; color: #061716; border: 2px solid rgba(255,255,255,.62); border-radius: 5px; box-shadow: 4px 4px 0 #04110f; cursor: pointer; font: inherit; touch-action: manipulation; }
.gb-dna-builder--level-0 .gb0__parts button { display: grid; grid-template-columns: 42px 1fr; align-items: center; padding: 7px 12px; text-align: left; background: #d8f2ea; }
.gb-dna-builder--level-0 .gb0__parts button small { grid-column: 2; }
.gb-dna-builder--level-0 .gb0__parts button:disabled { opacity: .48; cursor: default; }
.gb-dna-builder--level-0 .gb0__part-icon { display: grid; width: 36px; height: 36px; place-items: center; color: #061716; background: #9dd8c9; font-weight: 900; }
.gb-dna-builder--level-0 .gb0__part-icon--p { background: #f5e8c8; border-radius: 50%; }
.gb-dna-builder--level-0 .gb0__base-button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.gb-dna-builder--level-0 .gb0__base-button--a { background: #ffd166; }
.gb-dna-builder--level-0 .gb0__base-button--t { background: #58c7f3; }
.gb-dna-builder--level-0 .gb0__base-button--c { background: #56e39f; }
.gb-dna-builder--level-0 .gb0__base-button--g { background: #c7a6ff; }
.gb-dna-builder--level-0 .gb0__base-button--u { color: #fff; background: #8f56d9; border-color: #e0c6ff; }
.gb-dna-builder--level-0 .gb0__base-button strong { font: 900 1.35rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__base-button small { font-weight: 800; }
.gb-dna-builder--level-0 .gb0__base-button em { position: absolute; top: 4px; right: 6px; font: 900 .62rem Consolas,"Courier New",monospace; font-style: normal; opacity: .68; }
.gb-dna-builder--level-0 .gb0__base-button { position: relative; }
.gb-dna-builder--level-0 .gb0__control-prompt { margin: 0 0 10px!important; color: #fff!important; font-size: .8rem!important; font-weight: 800!important; text-align: center; }

.gb-dna-builder--level-0 .gb0__overlay { position: absolute; inset: 0; z-index: 12; display: grid; overflow-y: auto; place-items: center; padding: 18px; background: rgba(3,16,15,.92); backdrop-filter: blur(5px); }
.gb-dna-builder--level-0 .gb0__overlay > div { width: min(100%,600px); padding: 25px; color: #d7eee7; text-align: center; background: #0d2a27; border: 2px solid #4c8b7c; border-radius: 8px; box-shadow: 8px 8px 0 #03100f; }
.gb-dna-builder--level-0 .gb0__overlay h3 { max-width: none!important; margin: 5px 0 12px!important; color: #fff!important; font-size: 1.7rem!important; }
.gb-dna-builder--level-0 .gb0__overlay p { color: inherit!important; }
.gb-dna-builder--level-0 .gb0__unlock { color: #ffd166!important; font: 900 .8rem Consolas,"Courier New",monospace!important; letter-spacing: .08em; animation: gb0-unlock 1.3s ease both; }
.gb-dna-builder--level-0 .gb0__summary { margin: 15px 0; padding: 10px; background: #091f1d; border: 1px solid #315e56; border-radius: 6px; }
.gb-dna-builder--level-0 .gb0__summary p { margin: 5px 0!important; }
.gb-dna-builder--level-0 .gb0__overlay .gb0__primary { min-height: 48px; padding: 8px 20px; color: #061916; background: #56e39f; border-color: #a7ffcf; font-weight: 900; }

.gb-dna-builder--level-0 button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Pedagogical guide: show the recipe and the next action without changing gameplay. */
.gb-dna-builder--level-0 .gb0__concept { display: grid; width: min(100%,660px); grid-template-columns: 180px 1fr; align-items: center; gap: 12px; margin: 0 auto 12px; padding: 10px 13px; color: #dff8ef; background: #102f2c; border: 1px solid #47796f; border-left: 5px solid #56e39f; border-radius: 6px; font-size: .78rem; }
.gb-dna-builder--level-0 .gb0__concept strong { color: #fff; }
.gb-dna-builder--level-0 .gb0__concept--important { background: #2d2918; border-color: #81743f; border-left-color: #ffd166; }
.gb-dna-builder--level-0 .gb0__recipe { display: grid; width: min(100%,600px); grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0 auto 12px; padding: 0; list-style: none; }
.gb-dna-builder--level-0 .gb0__recipe li { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 6px; min-height: 38px; padding: 5px 7px; color: #88aaa1; background: #071d1b; border: 1px solid #315e56; border-radius: 5px; font: 800 .66rem Consolas,"Courier New",monospace; }
.gb-dna-builder--level-0 .gb0__recipe li strong { display: grid; width: 23px; height: 23px; place-items: center; color: #071b1b; background: #78968e; border-radius: 50%; }
.gb-dna-builder--level-0 .gb0__recipe li.is-active { color: #fff; border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,.28); }
.gb-dna-builder--level-0 .gb0__recipe li.is-active strong { background: #ffd166; }
.gb-dna-builder--level-0 .gb0__recipe li.is-done { color: #c9f7e3; border-color: #3e896f; }
.gb-dna-builder--level-0 .gb0__recipe li.is-done strong { background: #56e39f; }
.gb-dna-builder--level-0 .gb0__overview-item em { grid-column: 1/-1; color: #7f9c94; font: 900 .48rem Consolas,"Courier New",monospace; font-style: normal; text-align: center; }
.gb-dna-builder--level-0 .gb0__overview-item.is-built em { color: #56e39f; }
.gb-dna-builder--level-0 .gb0__base-button:disabled { opacity: .38; cursor: default; filter: saturate(.55); }
.gb-dna-builder--level-0 .gb0__parts button.is-next,
.gb-dna-builder--level-0 .gb0__base-button.is-target { border-color: #fff7b8; box-shadow: 0 0 0 3px #ffd166,4px 4px 0 #04110f; transform: translateY(-1px); }
.gb-dna-builder--level-0 .gb0__control-prompt { font: 900 .72rem Consolas,"Courier New",monospace!important; letter-spacing: .02em; }
.gb-dna-builder--level-0 .gb0__pair-instruction { width: max-content; max-width: 100%; margin: -2px auto 10px!important; padding: 5px 9px; color: #071b1b!important; background: #ffd166; border-radius: 4px; font: 900 .68rem Consolas,"Courier New",monospace!important; }
.gb-dna-builder--level-0 .gb0__pair-name { min-width: 150px; color: #fff; }

@keyframes gb0-place { 0%{opacity:.25;transform:translateY(18px) scale(.86)} 70%{transform:translateY(-2px) scale(1.04)} 100%{opacity:1;transform:none} }
@keyframes gb0-overview-in { 0%{opacity:.3;transform:scale(.88)} 100%{opacity:1;transform:none} }
@keyframes gb0-bond-in { 0%{opacity:0;transform:scaleX(0)} 100%{opacity:1;transform:scaleX(1)} }
@keyframes gb0-correct { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 4px rgba(86,227,159,.48),0 0 26px rgba(86,227,159,.4)} }
@keyframes gb0-wrong { 0%,100%{transform:translateX(0);filter:none} 25%{transform:translateX(-5px);filter:drop-shadow(0 0 8px rgba(255,93,93,.7))} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
@keyframes gb0-fragment-complete { 0%,100%{box-shadow:none} 45%{box-shadow:0 0 0 4px rgba(255,209,102,.5),0 0 30px rgba(86,227,159,.45)} }
@keyframes gb0-unlock { 0%{opacity:0;transform:scale(.85)} 35%,80%{opacity:1;transform:scale(1.05)} 100%{transform:scale(1)} }

@media (max-width: 620px) {
  .gb-dna-builder--level-0 .gb0__stage { min-height: 590px; padding-inline: 9px; }
  .gb-dna-builder--level-0 .gb0__header { padding-inline: 12px; }
  .gb-dna-builder--level-0 .gb0__header h3 { font-size: .95rem!important; }
  .gb-dna-builder--level-0 .gb0__build-card { min-height: 120px; grid-template-columns: 74px 24px 92px 24px 74px; padding-inline: 6px; }
  .gb-dna-builder--level-0 .gb0__build-slot { min-height: 68px; }
  .gb-dna-builder--level-0 .gb0__build-slot--phosphate { width: 68px; height: 68px; min-height: 68px; }
  .gb-dna-builder--level-0 .gb0__build-slot--sugar { width: 92px; height: 78px; min-height: 78px; }
  .gb-dna-builder--level-0 .gb0__build-slot strong { font-size: 1.05rem; }
  .gb-dna-builder--level-0 .gb0__build-slot small { font-size: .46rem; }
  .gb-dna-builder--level-0 .gb0__overview { padding-inline: 7px; }
  .gb-dna-builder--level-0 .gb0__overview-grid { gap: 5px; }
  .gb-dna-builder--level-0 .gb0__overview-item { grid-template-columns: 18px 18px 1fr; gap: 2px; padding: 4px 2px; }
  .gb-dna-builder--level-0 .gb0__overview-item span { width: 18px; height: 18px; font-size: .52rem; }
  .gb-dna-builder--level-0 .gb0__overview-item strong { height: 29px; font-size: .85rem; }
  .gb-dna-builder--level-0 .gb0__overview-item small { font-size: .44rem; }
  .gb-dna-builder--level-0 .gb0__fragment { padding-inline: 6px; }
  .gb-dna-builder--level-0 .gb0__fragment-grid { gap: 4px; }
  .gb-dna-builder--level-0 .gb0__fragment-grid::before { top: 14px; }
  .gb-dna-builder--level-0 .gb0__fragment-grid::after { bottom: 30px; }
  .gb-dna-builder--level-0 .gb0__pair-column { grid-template-rows: 32px 12px 42px 34px 42px 12px 32px 16px; }
  .gb-dna-builder--level-0 .gb0__mini-backbone { width: 86px; grid-template-columns: 25px 34px 27px; }
  .gb-dna-builder--level-0 .gb0__mini-backbone--top { transform: translateX(-18px); }
  .gb-dna-builder--level-0 .gb0__mini-backbone--bottom { transform: translateX(18px); }
  .gb-dna-builder--level-0 .gb0__mini-backbone span { width: 25px; height: 28px; font-size: .58rem; }
  .gb-dna-builder--level-0 .gb0__fragment-base { width: 40px; height: 42px; }
  .gb-dna-builder--level-0 .gb0__pair-bonds,
  .gb-dna-builder--level-0 .gb0__pair-bonds span { width: 48px; }
  .gb-dna-builder--level-0 .gb0__parts button { grid-template-columns: 34px 1fr; padding-inline: 7px; font-size: .72rem; }
  .gb-dna-builder--level-0 .gb0__part-icon { width: 30px; height: 30px; }
  .gb-dna-builder--level-0 .gb0__base-button { min-height: 60px; flex-direction: column; gap: 0; }
  .gb-dna-builder--level-0 .gb0__base-button small { font-size: .58rem; }
  .gb-dna-builder--level-0 .gb0__base-button em { top: 2px; right: 4px; font-size: .5rem; }
  .gb-dna-builder--level-0 .gb0__bases { gap: 4px; }
  .gb-dna-builder--level-0 .gb0__overlay > div { padding: 18px 13px; }
  .gb-dna-builder--level-0 .gb0__concept { grid-template-columns: 1fr; gap: 3px; padding: 8px 10px; }
  .gb-dna-builder--level-0 .gb0__recipe { gap: 4px; }
  .gb-dna-builder--level-0 .gb0__recipe li { grid-template-columns: 20px 1fr; gap: 3px; padding: 4px; font-size: .52rem; }
  .gb-dna-builder--level-0 .gb0__recipe li strong { width: 19px; height: 19px; }
  .gb-dna-builder--level-0 .gb0__overview-item em { font-size: .4rem; }
  .gb-dna-builder--level-0 .gb0__pair-name { min-width: 110px; font-size: .52rem; }
  .gb-dna-builder--level-0 .gb0__bond-explainer { align-items: flex-start; gap: 8px; padding-inline: 2px; }
  .gb-dna-builder--level-0 .gb0__bond-explainer p { font-size: .58rem!important; }
  .gb-dna-builder--level-0 .gb0__bond-sample { width: 32px; flex-basis: 32px; }
  .gb-dna-builder--level-0 .gb0__bond-sample i { width: 32px; }
  .gb-dna-builder--level-0 .gb0__completion-controls { align-items:stretch; flex-direction:column; gap:8px; }
  .gb-dna-builder--level-0 .gb0__completion-controls .gb0__primary { width:100%; }
  .gb-dna-builder--level-0 .gb0__navigation-note { max-width:none; text-align:left; }
  .gb-dna-builder--level-0 .gb0__direction-challenge { grid-template-columns:1fr; gap:8px; padding:10px; }
  .gb-dna-builder--level-0 .gb0__direction-choices { width:100%; }
  .gb-dna-builder--level-0 .gb0__direction-choices button { min-width:0; flex:1; }
}

@media (max-width: 380px) {
  .gb-dna-builder--level-0 .gb0__bases { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .gb-dna-builder--level-0 .gb0__stage { min-height: 610px; }
  .gb-dna-builder--level-0 .gb0__base-button { min-height: 58px; padding-inline: 1px; }
  .gb-dna-builder--level-0 .gb0__base-button small { font-size: .48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-dna-builder--level-0 .gb0__build-slot.is-new,
  .gb-dna-builder--level-0 .gb0__overview-item.is-built,
  .gb-dna-builder--level-0 .gb0__fragment-base.is-filled,
  .gb-dna-builder--level-0 .gb0__pair-bonds span,
  .gb-dna-builder--level-0 [data-flash="correct"] .gb0__active-target,
  .gb-dna-builder--level-0 [data-flash="wrong"] .gb0__active-target,
  .gb-dna-builder--level-0 .gb0__pair-column.is-wrong,
  .gb-dna-builder--level-0 .gb0__fragment.is-complete,
  .gb-dna-builder--level-0 .gb0__unlock { animation: none; }
}