/* Isolated translation mission and endless-highscore interface. */
.gb-translation-game .gt3__code-cell b { font-size:11px; }
.gb-translation-game .gt3__code-cell em { font-size:11px; line-height:1.25; }
.gb-translation-game .gt3__code-cell>button { grid-template-columns:32px minmax(0,1fr); min-height:32px; padding:4px; }
.gb-translation-game .gt3__code-third-axis b { min-height:32px; }
.gb-translation-game .gt3__code-column, .gb-translation-game .gt3__code-row { font-size:14px; }
.gb-translation-game .gt3__code-column--axis::before { font-size:10px; top:-17px; }
.gb-translation-game .gt3__code-scroll { padding-top:20px; }
.gb-translation-game .gt3__learning { padding:14px 18px; background:#f0f8f5; border-top:1px solid #d5e4e2; border-bottom:1px solid #d5e4e2; }
.gb-translation-game .gt3__learning[hidden] { display:none; }
.gb-translation-game .gt3__learning-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gb-translation-game .gt3__learning-top>span { color:#426b61; font-size:.68rem; font-weight:800; letter-spacing:.06em; }
.gb-translation-game .gt3__learning p { margin:7px 0 0!important; color:#284e45!important; font-size:.85rem!important; line-height:1.5!important; }
.gb-translation-game .gt3__learning button { min-height:38px; padding:7px 13px; cursor:pointer; border:1px solid #b5d3c9; border-radius:8px; }
.gb-translation-game .gt3__learning .gt3__primary { margin-top:12px; background:#23755e; color:#fff; }
.gb-translation-game .gt3__quiet-button { flex-shrink:0; background:#fff; color:#345e53; }
.gb-translation-game .gt3__quiet-button small { margin-left:5px; opacity:.65; }
.gb-translation-game .gt3__practice-entry { display:grid; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid #d5e4e2; }
.gb-translation-game .gt3__practice-entry button { display:grid; gap:5px; padding:12px 15px; border:1px solid #9dc7b9; border-radius:10px; background:#f1faf6; color:#245f4f; cursor:pointer; text-align:left; }
.gb-translation-game .gt3__practice-entry span { font-size:.76rem; line-height:1.5; }
.gb-translation-game .gt3__recap { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:8px; margin:14px 0; text-align:left; }
.gb-translation-game .gt3__recap>div { display:grid; gap:3px; padding:10px 12px; background:#f1f7f5; border-radius:8px; }
.gb-translation-game .gt3__recap strong { color:#256b56; font-family:Consolas,monospace; }
.gb-translation-game .gt3__recap span { color:#314e47; font-size:.8rem; }
.gb-translation-game .gt3__recap small { color:#54736a; font-size:.7rem; }
.gb-translation-game .gt3__review { margin-top:12px; text-align:left; }
.gb-translation-game .gt3__review summary { padding:10px 0; color:#326b59; cursor:pointer; font-size:.8rem; }
.gb-translation-game .gt3__review button { padding:10px; border:1px solid #9dc7b9; border-radius:8px; background:#f1faf6; color:#245f4f; cursor:pointer; }
.gb-translation-game .gt3__cabinet:is([data-gt3-phase="idle"],[data-gt3-phase="completed"],[data-gt3-phase="failed"]) .gt3__stage { height:auto; min-height:300px; }
.gb-translation-game .gt3__cabinet:is([data-gt3-phase="idle"],[data-gt3-phase="completed"],[data-gt3-phase="failed"]) .gt3__overlay { position:relative; inset:auto; overflow:visible; min-height:300px; padding:18px; }
.gb-translation-game .gt3__cabinet:is([data-gt3-phase="idle"],[data-gt3-phase="completed"],[data-gt3-phase="failed"]) .gt3__overlay-panel { max-height:none; overflow:visible; }
.gb-translation-game .gt3__cabinet:is([data-gt3-phase="idle"],[data-gt3-phase="completed"],[data-gt3-phase="failed"]) .gt3__scene { display:none; }
@media(pointer:coarse) { .gb-translation-game .gt3__learning button { min-height:44px; } }
.gb-translation-game{--gt3-ink:#26383d;--gt3-muted:#687e83;--gt3-line:#d5e4e2;--gt3-mint:#66cba8;--gt3-blue:#67bfe9;--gt3-purple:#9c70d6;--gt3-coral:#ef7e72;--gt3-amber:#f0bd56;width:min(100%,1080px);color:var(--gt3-ink);font-family:Inter,"Source Sans 3",system-ui,sans-serif;container-type:inline-size}
.gb-translation-game,.gb-translation-game *{box-sizing:border-box}.gb-translation-game button{font:inherit}.gb-translation-game button:focus-visible,.gb-translation-game [tabindex="0"]:focus-visible{outline:3px solid #2878a5;outline-offset:3px}
.gt3__cabinet{overflow:hidden;background:#fff;border:1px solid var(--gt3-line);border-radius:16px;box-shadow:0 15px 38px rgba(42,78,82,.11)}
.gt3__hud{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--gt3-line);border-bottom:1px solid var(--gt3-line)}.gt3__hud>div{display:grid;min-width:0;gap:2px;padding:8px 4px;background:#fff;text-align:center}.gt3__hud small{color:#71858a;font-size:clamp(.48rem,1vw,.62rem);font-weight:900;letter-spacing:.05em}.gt3__hud strong{overflow:hidden;color:#2a3d42;font:900 clamp(.78rem,1.7vw,1rem) Consolas,"Courier New",monospace;text-overflow:ellipsis;white-space:nowrap}.gt3__hud [data-gt3-lives]{color:var(--gt3-coral)}
.gt3__stage{position:relative;height:500px;overflow:hidden;background:linear-gradient(rgba(90,145,138,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(90,145,138,.055) 1px,transparent 1px),radial-gradient(circle at 50% 45%,#fff 0,#f7fbfa 60%,#eef7f4 100%);background-size:24px 24px,24px 24px,auto;outline:none;isolation:isolate}.gt3__timer{position:absolute;top:0;right:0;left:0;z-index:25;height:6px;background:#e6efed}.gt3__timer span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#64c9a6,#edc45f 70%,#ef8177);transform-origin:left center;will-change:transform}.gt3__speed-notice{position:absolute;top:15px;left:50%;z-index:30;padding:6px 11px;color:#5e4b27;background:#fff4d6;border:1px solid #e4c46e;border-radius:99px;box-shadow:0 7px 16px rgba(77,59,104,.1);font-size:.66rem;font-weight:900;letter-spacing:.07em;transform:translateX(-50%)}.gt3__speed-notice[hidden]{display:none}
.gt3__scene{position:absolute;inset:0}.gt3__ribosome{position:absolute;top:128px;left:50%;z-index:7;width:390px;height:220px;transform:translateX(-50%)}.gt3__ribosome-large{position:absolute;top:0;left:50%;display:grid;width:340px;height:155px;place-items:center;color:#3f6d62;background:rgba(180,225,210,.72);border:3px solid #69b59c;border-radius:50% 48% 35% 39%;font-size:.62rem;font-weight:900;letter-spacing:.08em;transform:translateX(-50%)}.gt3__ribosome-small{position:absolute;right:22px;bottom:0;left:22px;display:grid;height:92px;place-items:end center;padding-bottom:10px;color:#60756f;background:#edf8f4;border:3px solid #69b59c;border-radius:35% 38% 52% 48%;font-size:.57rem;font-weight:900;letter-spacing:.06em}.gt3__active-site{position:absolute;top:91px;left:50%;z-index:4;display:grid;width:105px;height:83px;place-items:end center;padding-bottom:9px;color:#766393;background:rgba(255,255,255,.62);border:2px dashed #a78aca;border-radius:45% 45% 25% 25%;font-size:.5rem;font-style:normal;font-weight:900;transform:translateX(-50%)}
.gt3__mrna{position:absolute;right:2%;bottom:70px;left:2%;z-index:12;display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:5px}.gt3__mrna::before{position:absolute;right:20px;left:20px;bottom:23px;z-index:-1;height:8px;content:"";background:#8cbce4;border-radius:999px;box-shadow:0 3px 0 #5d94c2}.gt3__mrna>strong{z-index:2;color:#4b79a0;background:rgba(247,251,250,.88);border-radius:5px;font:900 .72rem Consolas,"Courier New",monospace;text-align:center}.gt3__mrna-track{position:relative;display:grid;min-width:0;grid-template-columns:repeat(var(--gt3-codon-count),minmax(0,1fr));align-items:center;gap:4px}.gt3__codon{position:relative;display:flex;min-width:0;justify-content:center;gap:1px;padding:4px 2px 12px;background:#f0f5fa;border:1px solid #c0d1de;border-radius:8px;opacity:.5;transform:scale(.94)}.gt3__codon.is-read{background:#e3f5ee;border-color:#9dcfbe;opacity:.74}.gt3__codon.is-upcoming{opacity:.48}.gt3__codon.is-active{z-index:4;background:#fff7dd;border:3px solid #e0b64e;box-shadow:0 0 0 4px rgba(240,189,86,.18),0 7px 16px rgba(79,95,95,.12);opacity:1;transform:scale(1)}.gt3__codon.is-active.is-advancing{animation:gt3-codon-hop .58s cubic-bezier(.22,.75,.25,1) both}.gt3__codon small{position:absolute;right:-2px;bottom:-14px;left:-2px;overflow:hidden;color:#647b78;font-size:.43rem;font-weight:900;text-align:center;text-overflow:ellipsis;white-space:nowrap}.gt3__codon.is-active small{color:#88691f}.gt3__rna-base,.gt3__anti-base,.gt3__choice-base{display:grid;width:30px;height:32px;place-items:center;color:#26383d;border-radius:4px;font:900 .8rem Consolas,"Courier New",monospace}.gt3__rna-base{width:clamp(16px,2.15cqw,23px);height:28px;font-size:.67rem}.gt3__rna-base[data-base="A"],.gt3__anti-base[data-base="A"],.gt3__choice-base[data-base="A"]{background:#ffd477}.gt3__rna-base[data-base="U"],.gt3__anti-base[data-base="U"],.gt3__choice-base[data-base="U"]{color:#fff;background:#9861d4}.gt3__rna-base[data-base="C"],.gt3__anti-base[data-base="C"],.gt3__choice-base[data-base="C"]{background:#68d5a6}.gt3__rna-base[data-base="G"],.gt3__anti-base[data-base="G"],.gt3__choice-base[data-base="G"]{background:#b69ae6}
.gt3__chain{position:absolute;top:22px;right:4%;left:4%;z-index:16;display:grid;gap:6px;color:#5e7378;text-align:center}.gt3__chain>strong{font-size:.56rem;letter-spacing:.08em}.gt3__chain>div{display:flex;min-height:46px;align-items:center;justify-content:center;overflow-x:auto;padding:2px 6px}.gt3__chain span{position:relative;display:grid;flex:0 0 auto;width:47px;height:47px;place-items:center;align-content:center;color:#26383d;background:var(--gt3-aa);border:2px solid rgba(68,88,91,.25);border-radius:50%;box-shadow:0 4px 10px rgba(42,78,82,.08)}.gt3__chain span b{font-size:.65rem}.gt3__chain span small{font-size:.4rem}.gt3__chain span i{position:absolute;top:50%;left:100%;width:13px;height:3px;background:#7f9a95}.gt3__chain em{color:#829397;font-size:.65rem;font-style:normal}
.gt3__empty-site{position:absolute;top:160px;left:50%;z-index:15;display:grid;gap:6px;color:#725b97;font-size:.62rem;font-weight:900;text-align:center;transform:translateX(-50%)}.gt3__empty-site i{font-size:1.2rem;font-style:normal}.gt3__bound-trna{position:absolute;top:91px;left:50%;z-index:15;width:100px;height:210px;transform:translateX(-50%);animation:gt3-trna-bind .7s ease both}.gt3__bound-amino{position:absolute;top:0;left:50%;display:grid;width:45px;height:45px;place-items:center;background:var(--gt3-aa);border:2px solid rgba(65,79,83,.25);border-radius:50%;font-size:.66rem;font-weight:900;transform:translateX(-50%)}.gt3__bound-body{position:absolute;top:37px;left:50%;display:grid;width:52px;height:105px;place-items:center;color:#694f91;background:#e8def7;border:3px solid #9875c7;border-radius:12px 12px 30px 30px;font-size:.56rem;font-weight:900;transform:translateX(-50%)}.gt3__bound-anti{position:absolute;right:0;bottom:32px;left:0;display:flex;justify-content:center;gap:2px}.gt3__bonds{position:absolute;right:4px;bottom:7px;left:4px;display:flex;justify-content:center;gap:8px}.gt3__bonds i{width:3px;height:22px;background:repeating-linear-gradient(to bottom,#33ace6 0 4px,transparent 4px 7px)}
.gt3__feedback{position:absolute;right:12px;bottom:16px;left:12px;z-index:20;min-height:1.3em;margin:0!important;color:#62777d!important;font-size:.68rem!important;font-weight:850;text-align:center}.gt3__feedback[data-type="correct"]{color:#208469!important}.gt3__feedback[data-type="wrong"]{color:#c4524c!important}
.gt3__choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px;background:#f7faf9;border-top:1px solid var(--gt3-line)}.gt3__choice{position:relative;display:grid;min-height:112px;grid-template-columns:52px 1fr;grid-template-rows:55px auto;align-items:center;gap:3px 7px;padding:8px;color:#31474d;background:#fff;border:2px solid #d3e1df;border-radius:11px;box-shadow:0 5px 12px rgba(42,78,82,.07);cursor:pointer}.gt3__choice:hover:not(:disabled){border-color:#65b89f;transform:translateY(-2px)}.gt3__choice:disabled{cursor:not-allowed;opacity:.68}.gt3__choice.is-wrong{background:#fff0ef;border-color:#df796f;animation:gt3-shake .2s linear}.gt3__choice>em{position:absolute;top:4px;right:7px;color:#788c90;font-size:.56rem;font-style:normal;font-weight:900}.gt3__choice-amino{display:grid;width:49px;height:49px;place-items:center;align-content:center;background:var(--gt3-aa);border:1px solid rgba(65,79,83,.22);border-radius:50%}.gt3__choice-amino b{font-size:.66rem}.gt3__choice-amino small{font-size:.42rem}.gt3__choice-trna{display:grid;height:48px;place-items:center;color:#76599d;background:#e9e0f7;border:2px solid #a688cf;border-radius:12px 12px 24px 24px;font-size:.54rem;font-weight:900}.gt3__choice-anticodon{display:flex;grid-column:1/-1;align-items:center;justify-content:center;gap:2px;color:#66797e;font:800 .55rem Consolas,"Courier New",monospace}.gt3__choice-base{width:22px;height:24px;font-size:.63rem}
.gt3__overlay{position:absolute;inset:0;z-index:35;display:grid;place-items:center;padding:18px;background:rgba(242,249,247,.94);backdrop-filter:blur(5px);overflow-y:auto}.gt3__overlay[hidden]{display:none}.gt3__overlay-panel{width:min(100%,760px);max-height:calc(100% - 2px);overflow-y:auto;padding:clamp(18px,3vw,28px);color:#52686e;background:#fff;border:2px solid #bad9d1;border-radius:14px;box-shadow:0 16px 38px rgba(42,78,82,.16);text-align:center;scrollbar-gutter:stable}.gt3__overlay-panel h3{margin:0;color:#26383d;font-size:clamp(1.3rem,3vw,1.9rem)}.gt3__overlay-panel p{color:inherit!important}.gt3__kicker{margin:0 0 7px!important;color:#2c886f!important;font-size:.66rem!important;font-weight:900;letter-spacing:.1em}.gt3__primary,.gt3__overlay-panel button{min-height:44px;padding:8px 15px;color:#31524a;background:#fff;border:1px solid #9fc8bd;border-radius:9px;cursor:pointer;font-weight:850}.gt3__overlay-panel .gt3__primary{color:#174f42;background:#ddf4ea;border:2px solid #75c4aa}.gt3__mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.gt3__mode-grid--single{width:min(100%,520px);grid-template-columns:1fr;margin-inline:auto}.gt3__mode-card{display:grid;min-height:108px!important;align-content:center;gap:5px;text-align:left}.gt3__mode-card strong{font-size:.95rem}.gt3__mode-card span,.gt3__mode-card small{font-size:.7rem;line-height:1.4}.gt3__mode-card small{color:#765ba1}.gt3__shortcut{font-size:.62rem!important;font-weight:800}.gt3__record{width:max-content;margin:9px auto!important;padding:5px 10px;color:#6b521b!important;background:#fff0bd;border:1px solid #ddb64e;border-radius:99px;font-size:.63rem!important;font-weight:900;letter-spacing:.07em}.gt3__result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:13px 0}.gt3__results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}.gt3__results>div{display:grid;gap:2px;padding:8px;background:#f5f9f8;border:1px solid #d5e4e2;border-radius:7px;text-align:left}.gt3__results dt{font-size:.61rem}.gt3__results dd{margin:0;color:#293d42;font:900 .76rem Consolas,"Courier New",monospace}
.gt3__overlay-panel .gt3__cinema-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:12px auto 4px;padding-inline:22px;color:#213932;background:linear-gradient(135deg,#ffe48a,#a5ead6);border-color:#f4d45f;box-shadow:0 8px 22px rgba(79,159,132,.18)}
.gt3__cinema-button:hover{filter:brightness(1.035);transform:translateY(-1px)}
@keyframes gt3-trna-bind{from{opacity:0;transform:translate(110px,-85px) scale(.72)}to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes gt3-shake{0%,100%{transform:translateX(0)}35%{transform:translateX(-4px)}70%{transform:translateX(4px)}}@keyframes gt3-codon-hop{0%{opacity:.35;transform:translateX(-70%) scale(.88)}70%{opacity:1;transform:translateX(5%) scale(1.04)}100%{opacity:1;transform:translateX(0) scale(1)}}
@container (max-width:760px){.gt3__hud{grid-template-columns:repeat(4,minmax(0,1fr))}.gt3__stage{height:500px}.gt3__choices{grid-template-columns:repeat(3,minmax(0,1fr))}.gt3__choice:last-child:nth-child(3n+2){grid-column:2}.gt3__results{grid-template-columns:repeat(2,minmax(0,1fr))}.gt3__mrna{right:1%;left:1%;grid-template-columns:25px minmax(0,1fr) 25px}.gt3__mrna-track{gap:2px}.gt3__rna-base{width:clamp(14px,2.15cqw,20px);height:26px;font-size:.61rem}.gt3__codon{padding-inline:1px}}
@container (max-width:480px){.gt3__topbar{padding-inline:9px}.gt3__topbar strong{font-size:.82rem}.gt3__topbar p{font-size:.52rem}.gt3__actions{gap:3px}.gt3__actions button{width:32px;height:32px}.gt3__stage{height:470px}.gt3__ribosome{top:126px;width:330px}.gt3__ribosome-large{width:295px}.gt3__mrna{right:0;left:0;grid-template-columns:25px minmax(0,1fr) 25px;overflow:hidden}.gt3__mrna-track{width:590px;grid-template-columns:repeat(var(--gt3-codon-count),59px);gap:0;transform:translateX(calc(50% - (var(--gt3-active-index) + .5) * 59px))}.gt3__codon{margin-inline:2px}.gt3__rna-base{width:15px;height:25px;font-size:.57rem}.gt3__choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:8px 6px}.gt3__choice{min-height:98px;grid-template-columns:42px 1fr;grid-template-rows:44px auto;padding:6px}.gt3__choice:last-child{grid-column:1/-1}.gt3__choice-amino{width:40px;height:40px}.gt3__choice-trna{height:40px}.gt3__footer{align-items:flex-start;flex-direction:column}.gt3__footer button{align-self:flex-end}.gt3__mode-grid{grid-template-columns:1fr}.gt3__result-actions{flex-direction:column}.gt3__result-actions button{width:100%}.gt3__overlay{padding:9px}.gt3__overlay-panel{padding:16px 10px}.gt3__chain{top:14px}.gt3__chain span{width:40px;height:40px}}
/* All 20 standard amino acids: compact, consistent choices and guided help. */
/* The genetic code is the active tool in Level 3; tRNA appears after the amino acid is decoded. */
.gt3__decoder-slot{padding:8px 10px 0;background:#f7faf9;border-top:1px solid var(--gt3-line)}
.gt3__decoder{display:grid;gap:5px;padding:8px 9px;background:#fff;border:1px solid #cddfdb;border-radius:14px;box-shadow:0 8px 20px rgba(42,78,82,.07)}
.gt3__decoder-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#276d5c;font:900 .68rem Consolas,"Courier New",monospace;letter-spacing:.08em}
.gt3__decoder-heading>span{padding:3px 7px;color:#4b746a;background:#eef8f5;border:1px solid #c8e2da;border-radius:99px;font-size:.54rem;letter-spacing:.07em;white-space:nowrap}
.gt3__decode-path{display:flex;align-items:center;justify-content:flex-end;gap:5px}.gt3__decode-path>span{display:flex;align-items:center;gap:5px;padding:4px 6px;background:#eef8f5;border:1px solid #bfddd5;border-radius:8px}.gt3__decode-path small{font-size:.49rem;font-weight:800}.gt3__decode-path b{display:grid;width:22px;height:22px;place-items:center;color:#fff;background:#328d74;border-radius:50%;font:900 .66rem Consolas,"Courier New",monospace}.gt3__decode-path i{color:#58a58f;font-style:normal;font-weight:900}.gt3__decode-path>strong{padding:6px 9px;color:#6f5418;background:#fff1bd;border:2px solid #e1b33f;border-radius:8px;font-size:.67rem;white-space:nowrap}
.gt3__code-scroll{overflow-x:auto;padding:1px;scrollbar-color:#a9cfc6 #eef5f3}.gt3__code-scroll-inner{min-width:760px}.gt3__code-map{display:grid;grid-template-columns:44px repeat(4,minmax(0,1fr)) 35px;gap:3px}.gt3__code-corner,.gt3__code-column,.gt3__code-row,.gt3__code-third-title{display:grid;place-items:center;margin:0;border-radius:7px;text-align:center}.gt3__code-corner{position:sticky;left:0;z-index:5;gap:0;padding:3px;color:#60777c;background:#edf4f2;font-size:.52rem}.gt3__code-corner span{font-size:.78rem}.gt3__code-column,.gt3__code-third-title{min-height:28px}.gt3__code-third-title{position:sticky;right:0;z-index:5;padding:2px;color:#60777c;background:#edf4f2;box-shadow:-5px 0 9px rgba(42,78,82,.08);font-size:.46rem;line-height:1.05}.gt3__code-row{position:sticky;left:0;z-index:4;min-height:128px;box-shadow:5px 0 9px rgba(42,78,82,.08)}.gt3__code-column[data-base="U"],.gt3__code-row[data-base="U"],.gt3__code-third-axis b[data-base="U"]{color:#fff;background:#9861d4}.gt3__code-column[data-base="C"],.gt3__code-row[data-base="C"],.gt3__code-third-axis b[data-base="C"]{background:#68d5a6}.gt3__code-column[data-base="A"],.gt3__code-row[data-base="A"],.gt3__code-third-axis b[data-base="A"]{background:#ffd477}.gt3__code-column[data-base="G"],.gt3__code-row[data-base="G"],.gt3__code-third-axis b[data-base="G"]{background:#b69ae6}.gt3__code-column.is-guide,.gt3__code-row.is-guide,.gt3__code-third-axis b.is-guide{outline:3px solid #278d72;outline-offset:1px;box-shadow:0 0 0 4px rgba(39,141,114,.13)}
.gt3__code-cell,.gt3__code-third-axis{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:2px;min-height:128px}.gt3__code-cell{padding:2px;background:#f4f8f7;border:1px solid #dfe9e7;border-radius:7px}.gt3__code-cell.is-active-cell{background:#eaf7f2;border:2px solid #62b79f}.gt3__code-cell>button{display:grid;width:100%;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:4px;min-height:28px;padding:2px 5px;color:#52676c;background:#fff;border:1px solid #d6e3e0;border-radius:6px;cursor:pointer;text-align:left}.gt3__code-cell>button:not(:disabled):hover{z-index:2;color:#285f52;background:#effaf6;border-color:#54ad94;box-shadow:0 4px 10px rgba(42,78,82,.12);transform:translateY(-1px)}.gt3__code-cell>button:focus-visible{z-index:3;outline:3px solid #2878a5;outline-offset:1px}.gt3__code-cell>button:disabled{cursor:default;opacity:1}.gt3__code-cell>button[data-stop="true"]{color:#fff;background:#7c8583;border-color:#68716f}.gt3__code-cell>button[data-start="true"]{color:#174c3b;background:#c9f1df;border-color:#55ad8f}.gt3__code-cell>button[data-start="true"] b::after{content:" START";font-size:.42rem;letter-spacing:.03em}.gt3__code-cell b{font:900 .56rem Consolas,"Courier New",monospace}.gt3__code-cell em{overflow:hidden;font-size:.47rem;font-style:normal;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.gt3__code-cell>button.is-correct-codon{z-index:2;color:#5c4613;background:#fff0ae;border:2px solid #dea82b;box-shadow:0 3px 9px rgba(116,83,16,.16);transform:scale(1.025)}.gt3__code-cell>button.is-wrong-codon{z-index:2;color:#813c36;background:#fff0ef;border:2px solid #df796f;animation:gt3-shake .2s linear}.gt3__code-third-axis{position:sticky;right:0;z-index:4;padding:2px 0;background:#fff;box-shadow:-5px 0 9px rgba(42,78,82,.08)}.gt3__code-third-axis b{display:grid;min-height:28px;place-items:center;border-radius:6px;font:900 .58rem Consolas,"Courier New",monospace}
.gt3__decoder-note{margin:0!important;color:#64797e!important;font-size:.62rem!important;font-weight:750;text-align:center}
@container (max-width:480px){.gt3__decoder-slot{padding:6px 5px 0}.gt3__decoder{padding:7px 5px}.gt3__decoder-heading{align-items:flex-start;flex-direction:column;gap:4px}.gt3__decoder-note{text-align:left}}
@media (prefers-reduced-motion:reduce){.gb-translation-game *,.gb-translation-game *::before,.gb-translation-game *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* The only level utility is anchored in the footer instead of its own row. */

/* Keep the full mRNA visible while the ribosome advances one codon at a time. */
.gt3__mrna-track{margin-inline:8cqw}
.gt3__ribosome{width:360px}.gt3__ribosome,.gt3__empty-site,.gt3__bound-trna{left:calc(16.8% + var(--gt3-progress) * 66.4%)}
.gt3__ribosome.is-advancing,.gt3__empty-site.is-advancing{animation:gt3-ribosome-step .58s cubic-bezier(.22,.75,.25,1) both}
.gt3__active-site{line-height:1.35;text-align:center}
@keyframes gt3-ribosome-step{from{transform:translateX(calc(-50% - 7.4cqw))}70%{transform:translateX(calc(-50% + .55cqw))}to{transform:translateX(-50%)}}
@container (max-width:480px){.gt3__mrna-track{margin-inline:0;transform:translateX(calc(50cqw - 30px - (var(--gt3-active-index) + .5) * 59px))}.gt3__ribosome{width:330px}.gt3__ribosome,.gt3__empty-site,.gt3__bound-trna{left:50%}.gt3__ribosome.is-advancing,.gt3__empty-site.is-advancing{animation:none}}
@media (prefers-reduced-motion:reduce){.gt3__ribosome.is-advancing,.gt3__empty-site.is-advancing{animation-duration:.01ms!important}}
.gt3__biology-note{max-width:660px;margin:9px auto!important;padding:8px 10px;color:#4d6469!important;background:#eef8f5;border:1px solid #bcded4;border-radius:9px;font-size:.7rem!important;line-height:1.42!important;text-align:left}.gt3__biology-note strong{color:#267761}

/* Level 3 prioritises the complete codon table: keep the ribosome scene compact. */
.gt3__stage{height:420px}
.gt3__chain{top:14px;gap:3px}.gt3__chain>div{min-height:34px;padding-block:0}.gt3__chain>strong{font-size:.51rem}.gt3__chain em{font-size:.59rem}
.gt3__ribosome{top:92px;width:310px;height:178px}.gt3__ribosome-large{width:278px;height:122px;border-width:2px;font-size:.55rem}.gt3__ribosome-small{right:18px;bottom:0;left:18px;height:70px;padding-bottom:7px;border-width:2px;font-size:.5rem}.gt3__active-site{top:70px;width:82px;height:64px;padding-bottom:6px;border-width:2px;font-size:.44rem}
.gt3__empty-site{top:126px;font-size:.55rem}.gt3__empty-site i{font-size:1rem}.gt3__bound-trna{top:72px;width:84px;height:174px}.gt3__bound-amino{width:38px;height:38px;font-size:.58rem}.gt3__bound-body{top:31px;width:45px;height:86px;border-width:2px;font-size:.5rem}.gt3__bound-anti{bottom:27px}.gt3__bonds{bottom:5px;gap:6px}.gt3__bonds i{height:18px}
.gt3__mrna{bottom:47px}.gt3__mrna::before{bottom:20px;height:7px}.gt3__codon{padding-top:3px}.gt3__feedback{bottom:11px;font-size:.61rem!important}
.gt3__code-scroll-inner{min-width:720px}.gt3__code-map{grid-template-columns:39px repeat(4,minmax(0,1fr)) 30px;gap:2px}.gt3__code-corner{font-size:.46rem}.gt3__code-corner span{font-size:.66rem}.gt3__code-column,.gt3__code-third-title{min-height:24px}.gt3__code-column{font-size:.78rem}.gt3__code-third-title{font-size:.4rem}.gt3__code-row,.gt3__code-cell,.gt3__code-third-axis{min-height:116px}.gt3__code-cell>button,.gt3__code-third-axis b{min-height:25px}.gt3__code-cell>button{grid-template-columns:33px minmax(0,1fr);gap:3px;padding:1px 4px}.gt3__code-cell b{font-size:.52rem}.gt3__code-cell em{font-size:.43rem}
@container (max-width:760px){.gt3__stage{height:420px}}
@container (max-width:480px){.gt3__stage{height:390px}.gt3__ribosome{top:92px;width:286px}.gt3__ribosome-large{width:255px;height:112px}.gt3__mrna{bottom:43px}.gt3__bound-trna{top:70px}.gt3__code-column{font-size:.72rem}}

/* Final compact pass: show the codon table sooner and use the stage only for the active translation step. */
.gt3__chain{top:9px}.gt3__chain>div{min-height:28px}.gt3__chain>strong{font-size:.48rem}
.gt3__ribosome{top:53px;width:250px;height:145px}.gt3__ribosome-large{width:228px;height:98px;font-size:.49rem}.gt3__ribosome-small{right:14px;left:14px;height:57px;padding-bottom:5px;font-size:.45rem}.gt3__active-site{top:56px;width:68px;height:52px;padding-bottom:4px;font-size:.39rem}
.gt3__empty-site{top:95px;font-size:.5rem}.gt3__empty-site i{font-size:.88rem}.gt3__bound-trna{top:45px;width:72px;height:145px}.gt3__bound-amino{width:33px;height:33px;font-size:.5rem}.gt3__bound-body{top:27px;width:38px;height:72px;font-size:.43rem}.gt3__bound-anti{bottom:22px}.gt3__bonds{bottom:3px}.gt3__bonds i{height:14px}
.gt3__mrna{bottom:32px}.gt3__mrna::before{bottom:18px;height:6px}.gt3__codon{padding-bottom:10px}.gt3__feedback{bottom:7px;font-size:.56rem!important}
@container (max-width:480px){.gt3__ribosome{top:51px;width:230px;height:140px}.gt3__ribosome-large{width:210px;height:93px}.gt3__ribosome-small{height:55px}.gt3__active-site{top:53px}.gt3__bound-trna{top:43px}.gt3__mrna{bottom:30px}}

/* The ribosome stays fixed; the mRNA strand travels through its active site from right to left. */
.gt3__ribosome,.gt3__empty-site,.gt3__bound-trna{left:50%}
.gt3__ribosome{top:45px}
.gt3__mrna{bottom:70px;overflow:hidden}
.gt3__mrna::before{display:none}
.gt3__ribosome{width:280px;height:160px}.gt3__ribosome-large{width:255px;height:106px}.gt3__ribosome-small{height:65px}.gt3__active-site{top:61px;width:76px;height:57px}
.gt3__mrna-track{z-index:0;width:660px;grid-template-columns:repeat(var(--gt3-codon-count),66px);gap:0;margin-inline:0;transform:translateX(calc(50cqw - 28px - (var(--gt3-active-index) + .5) * 66px))}
.gt3__mrna-track::after{position:absolute;right:-36px;bottom:18px;left:0;z-index:-1;height:6px;background:#8cbce4;border-radius:999px;box-shadow:0 3px 0 #5d94c2;content:""}
.gt3__codon{margin-inline:2px}.gt3__rna-base{width:25px;height:30px;font-size:.72rem}
.gt3__mrna-track.is-advancing{animation:gt3-mrna-flow .7s cubic-bezier(.22,.75,.25,1) both}
@keyframes gt3-mrna-flow{from{transform:translateX(calc(50cqw - 28px - (var(--gt3-active-index) + .5) * 66px + 66px))}to{transform:translateX(calc(50cqw - 28px - (var(--gt3-active-index) + .5) * 66px))}}
@keyframes gt3-mrna-flow-mobile{from{transform:translateX(calc(50cqw - 30px - (var(--gt3-active-index) + .5) * 59px + 59px))}to{transform:translateX(calc(50cqw - 30px - (var(--gt3-active-index) + .5) * 59px))}}
@container (max-width:480px){.gt3__ribosome{top:42px}.gt3__mrna{bottom:65px}.gt3__mrna-track{width:590px;grid-template-columns:repeat(var(--gt3-codon-count),59px);transform:translateX(calc(50cqw - 30px - (var(--gt3-active-index) + .5) * 59px))}.gt3__mrna-track.is-advancing{animation-name:gt3-mrna-flow-mobile}}

.gt3__feedback[data-type="correct"]{visibility:hidden}
.gt3__feedback[data-type="stop"]{color:#7658a2!important}

/* The scene now explains itself visually; labels and helper boxes no longer cover the ribosome. */
.gt3__chain>strong{display:none}
.gt3__chain{top:8px;min-height:34px}.gt3__chain>div{min-height:34px}
.gt3__active-site{display:none}
.gt3__decoder-heading{justify-content:flex-start}
.gt3__decoder-heading>span,.gt3__decoder-note{display:none}

/* The mode picker is fitted to the compact Level 3 stage instead of becoming a scrolling panel. */
.gt3__overlay{padding:8px}
.gt3__overlay-panel{width:min(100%,760px);max-height:100%;padding:14px 22px;border-width:1px}
.gt3__overlay-panel h3{font-size:clamp(1.2rem,2.6vw,1.65rem)}
.gt3__overlay-panel>p{margin:7px auto!important;font-size:.82rem!important;line-height:1.35!important}
.gt3__mode-grid{gap:8px;margin:10px 0}.gt3__mode-card{min-height:74px!important;padding:10px 12px}.gt3__mode-card strong{font-size:.84rem}.gt3__mode-card span,.gt3__mode-card small{font-size:.63rem;line-height:1.25}
.gt3__shortcut{margin:6px 0 0!important;font-size:.56rem!important}
@container (max-width:480px){.gt3__overlay-panel{padding:12px 10px}.gt3__overlay-panel>p{font-size:.74rem!important}.gt3__mode-card{min-height:66px!important;padding:8px 10px}}

/* The codon-table axis is intentionally quiet: it labels the lookup without taking vertical space. */
.gt3__code-column,.gt3__code-third-title{min-height:19px}
.gt3__code-corner{padding:1px;font-size:.42rem}.gt3__code-corner span{font-size:.58rem}
.gt3__code-column{font-size:.68rem}.gt3__code-third-title{font-size:.36rem}

/* One clear label makes the structure recognisable without reintroducing visual clutter. */
.gt3__ribosome-large::after{color:#356c60;content:"RIBOSOM";font:900 .58rem Consolas,"Courier New",monospace;letter-spacing:.1em}

/* The start menu shares the compact height of the game scene. */
.gt3__cabinet[data-gt3-phase="idle"] .gt3__overlay{overflow:hidden}
.gt3__cabinet[data-gt3-phase="idle"] .gt3__overlay-panel{overflow:hidden}

/* The selection screen may be taller than the active translation scene, so its content stays complete and centred. */
.gt3__cabinet[data-gt3-phase="idle"] .gt3__stage{height:310px;min-height:310px}
.gt3__cabinet[data-gt3-phase="idle"] .gt3__overlay{display:flex;align-items:center;justify-content:center}
.gt3__cabinet[data-gt3-phase="idle"] .gt3__overlay-panel{display:block;max-height:none}

/* Read the genetic-code table in the same order as the three bases in the codon. */
.gt3__code-scroll{position:relative;padding-top:12px}
.gt3__code-column{position:relative}
.gt3__code-column--axis::before{position:absolute;top:-13px;left:0;color:#5c7478;content:"2. anden base →";font:850 .44rem Inter,"Source Sans 3",system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap}
.gt3__code-third-title{gap:0;font-size:.36rem!important}.gt3__code-third-title b{font-size:.62rem;line-height:.75}
@container (max-width:480px){.gt3__cabinet[data-gt3-phase="idle"] .gt3__stage{height:300px;min-height:300px}.gt3__code-column--axis::before{font-size:.4rem}}