/* A translucent workspace, with opaque text only where reading requires it. */
.gb-protein-game .gb-protein-game__navigation-row {grid-template-columns:minmax(0,1fr);gap:12px;}
.gb-protein-game .gb-protein-game__navigation-row .gb-protein-game__nav-tools {display:flex;width:100%;max-width:none;gap:10px;padding:0;border:0;background:none;box-shadow:none;justify-self:stretch;flex-wrap:wrap;}
.gb-protein-game .pg-film {flex:1 1 190px;display:flex;align-items:center;gap:13px;min-height:86px;padding:14px 18px;text-align:left;border:1px solid #bfd5d1;border-radius:23px!important;overflow:hidden;color:#f1faf5;background:linear-gradient(90deg,#244f51f2,#244f5180),url('assets/protein-game/cell-environment-v1.webp') center/cover;box-shadow:inset 0 1px 0 #ffffff70,0 5px 14px #254d4814;cursor:pointer;}
.gb-protein-game .pg-film--middle {background-image:linear-gradient(90deg,#3d4961f2,#3d496170),url('assets/protein-game/nuclear-pore-mrna-v1.webp');}
.gb-protein-game .pg-film--finale {background-image:linear-gradient(90deg,#4b4561f2,#4b456165),url('assets/protein-game/ribosome-translation-v1.webp');}
.gb-protein-game .pg-film[hidden] {display:none;}
.gb-protein-game .pg-film__play {display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;border:1px solid #ffffff9a;background:#ffffff20;font-size:1rem;padding-left:3px;}
.gb-protein-game .pg-film>span:last-child {display:grid;gap:6px;}
.gb-protein-game .pg-film small {font-size:.61rem;letter-spacing:.075em;color:#d9eae7;line-height:1.3;}
.gb-protein-game .pg-film strong {font-size:.96rem;color:#fff;line-height:1.3;}
.gb-protein-game .gb-protein-game__nav-tools .gb-protein-game__music {flex:0 0 48px;min-height:48px;align-self:center;}
.gb-protein-game .gti__copy {width:100%;max-width:none;text-align:left!important;padding:20px 24px;background:linear-gradient(120deg,#edf7f4ac,#e8e7f27a)!important;}
.gb-protein-game .gti__copy :is(h4,p) {text-align:left!important;margin-left:0!important;margin-right:0!important;}
.gb-protein-game .gti__copy .gti__eyebrow {font-size:.64rem!important;letter-spacing:.07em;margin-bottom:8px!important;}
.gb-protein-game .gti__copy h4 {font-size:1.18rem!important;line-height:1.4;margin-top:0!important;}
.gb-protein-game :is(.gb0__build-card,.gb0__backbone-card,.gr2__build-card,.gr2__strand) {background:linear-gradient(130deg,#edf5f42b,#d6cfe83b)!important;border-color:#ffffff80!important;}
.gb-protein-game .gb0__chain-unit.is-current {background:#e7f4ed65!important;}
.gb-protein-game :is(.gb0__concept,.gr2__concept) {background:#eff7f3a3;border-radius:20px;border-color:#ffffff9a;}
.gb-protein-game .gti__reading-note {padding:12px 16px;background:#e7f3ecc0;border-radius:16px;color:#355b51!important;}
@media(max-width:600px){.gb-protein-game .pg-film {flex-basis:100%;min-height:70px;padding:12px 16px;}.gb-protein-game .gb-protein-game__nav-tools .gb-protein-game__music {margin-left:auto;}.gb-protein-game .gti__copy {padding:16px;}}
.gb-protein-game :is(.gb0__backbone-card,.gb0__build-card,.gr2__build-card,.gr2__strand,.gti__ribosome-card,.gti__explore-card,.gti__frame-task,.gti__frame-explanation) {
 background:linear-gradient(130deg,#eaf5f32b,#d8d3e83b)!important;border:1px solid #ffffff80!important;border-radius:28px!important;
 box-shadow:inset 0 1px 0 #ffffffb0,0 12px 30px #37545c0c!important;
}
.gb-protein-game :is(.gb0__backbone-card,.gr2__strand) {width:fit-content;max-width:100%;min-width:min(100%,260px);padding:20px 25px;}
.gb-protein-game :is(.gb0__controls,.gr2__controls,.gb-dna-builder__controls,.gb2__controls,.gti__stage) {background-color:transparent;}
.gb-protein-game :is(.gb0__parts,.gr2__parts) button {background:linear-gradient(130deg,#ffffffc9,#e1ede77a);}
.gb-protein-game .gb0__chain-unit.is-current {background:#f3fff8b0;border-radius:22px;}
.gb-protein-game :is(.gb0__backbone-scroll,.gr2__strand-scroll) {background:transparent;}
.gb-protein-game .gb-protein-game__nav-tools {flex-wrap:wrap;max-width:156px;}
.gb-protein-game .gb-protein-game__nav-film {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:65px;color:#3e6470;background:linear-gradient(145deg,#eef7fa,#dae9ed);border-color:#b9d4da;}
.gb-protein-game .gb-protein-game__nav-film small {font-size:.5rem;white-space:normal;}
.gb-protein-game .gb-protein-game__nav-film[hidden] {display:none;}

/* The same lightweight cutaway is used in the lesson and playable scene. */
.gb-protein-game .gt3__ribosome {background:url('assets/protein-game/ribosome-cutaway-v1.svg') center/100% 100% no-repeat;filter:drop-shadow(0 8px 7px #344f5628);}
.gb-protein-game .gt3__ribosome :is(.gt3__ribosome-large,.gt3__ribosome-small) {background:none;border:0;box-shadow:none;}
.gb-protein-game .gt3__ribosome-large::after {content:'RIBOSOM';color:#493e60;font-size:.52rem;letter-spacing:.13em;}
.gb-protein-game .gt3__ribosome .gt3__active-site {background:#efe8ffa8;border:1px dashed #867298;box-shadow:inset 0 0 15px #ede8f360;}
.gb-protein-game .gti__ribosome {background:url('assets/protein-game/ribosome-cutaway-v1.svg') center/100% 100% no-repeat;}
.gb-protein-game .gti__ribosome :is(.gti__ribosome-large,.gti__ribosome-small) {background:none;border:0;box-shadow:none;color:#4e4268;}
.gb-protein-game .gti__copy {background:linear-gradient(130deg,#ffffffe0,#f1faf6b3);}
.gb-protein-game .gti__actors {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;}
.gb-protein-game .gti__actors button {display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 20px;min-width:0;background:linear-gradient(140deg,#ffffff9c,#e0eeea75);border:1px solid #ffffffcc;border-radius:28px!important;color:#2e5654;box-shadow:0 6px 20px #3c626412;cursor:pointer;}
.gb-protein-game .gti__actors button strong {font-size:1.15rem;}
.gb-protein-game .gti__actors button small {font-size:.74rem;line-height:1.4;}
.gb-protein-game .gti__actor-art {height:135px;width:100%;position:relative;display:flex;justify-content:center;align-items:center;}
.gb-protein-game .gti__actor-art--mrna {gap:2px;}
.gb-protein-game .gti__actor-art--mrna:before {content:'';position:absolute;left:0;right:0;top:40%;height:4px;background:#bc9b55;}
.gb-protein-game .gti__actor-art--mrna i {z-index:1;display:grid;place-items:center;background:#ebce82;border:1px solid #c6a359;border-radius:8px 8px 14px 14px;width:25px;height:37px;font-style:normal;font-weight:750;color:#554b2f;}
.gb-protein-game .gti__actor-art--trna {flex-direction:column;}
.gb-protein-game .gti__actor-art--trna b {font-size:.6rem;background:radial-gradient(circle at 30% 20%,#fff2df,#e0b0a1);border:1px solid #cfa194;border-radius:50%;padding:14px 7px;color:#644e44;}
.gb-protein-game .gti__actor-art--trna i {height:53px;width:38px;border:8px double #9b89b5;border-block:0;border-radius:40%;position:relative;}
.gb-protein-game .gti__actor-art--trna i:after {content:'';position:absolute;top:14px;left:-20px;width:61px;height:19px;border:5px solid #9b89b5;border-radius:40%;}
.gb-protein-game .gti__actor-art--trna em {background:#e1d7ef;padding:5px 12px;border-radius:10px;font-style:normal;color:#594574;font-size:.68rem;}
.gb-protein-game .gti__actor-art--ribosome {background:url('assets/protein-game/ribosome-cutaway-v1.svg') center/contain no-repeat;}
.gb-protein-game .gti__task-panel {width:100%;padding:22px 26px;background:linear-gradient(120deg,#eff9f5ee,#f1eff8db);border:1px solid #ffffffe0;border-radius:24px;text-align:left;box-shadow:0 8px 25px #3f62600e;}
.gb-protein-game .gti__task-panel h4 {color:#294f50;font-size:1.08rem;line-height:1.45;margin:8px 0 12px;}
.gb-protein-game .gti__task-panel p {color:#3f6263!important;font-size:.86rem!important;line-height:1.55!important;}
.gb-protein-game .gti__task-panel button {padding:12px 18px;min-height:46px;border:1px solid #95bdb1;background:linear-gradient(135deg,#377465,#24564f);color:white;box-shadow:0 3px 0 #214b43;cursor:pointer;font-weight:650;font-size:.84rem;line-height:1.4;}
.gb-protein-game .gti__machine-choices {display:flex;flex-wrap:wrap;gap:10px;}
.gb-protein-game .gti__machine-choices button {flex:1 1 180px;}
.gb-protein-game .gti__machine {position:relative;width:min(100%,650px);min-height:330px;padding:45px 30px 0;isolation:isolate;}
.gb-protein-game .gti__machine-body {position:absolute;z-index:-1;left:0;right:0;top:0;height:285px;background:url('assets/protein-game/ribosome-cutaway-v1.svg') center/100% 100% no-repeat;filter:drop-shadow(0 8px 15px #3e4b6129);}
.gb-protein-game .gti__machine-sites {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 30px;}
.gb-protein-game .gti__machine-sites>div {display:flex;flex-direction:column;gap:13px;align-items:center;}
.gb-protein-game .gti__machine-sites small {font-size:.66rem;font-weight:800;letter-spacing:.06em;color:#473b5c;}
.gb-protein-game .gti__machine-carrier {display:flex;flex-direction:column;justify-content:space-between;align-items:center;min-height:111px;width:100%;padding:10px 3px 6px;border:1px solid #c8bbde;border-radius:35% 35% 20% 20%;background:linear-gradient(#f3d9c6ee,#d4c4e69c 43%,#f7ecffcc);font-size:.75rem;font-weight:750;color:#4d3d60;}
.gb-protein-game .gti__machine-carrier i {font-size:.6rem;font-style:normal;}
.gb-protein-game .gti__machine-carrier.is-empty {background:transparent;border-style:dashed;color:#62526f;}
.gb-protein-game .gti__machine-rna {display:grid;grid-template-columns:25px repeat(3,1fr) 25px;gap:10px;align-items:center;margin-top:5px;color:#3c5360;}
.gb-protein-game .gti__machine-rna b {padding:7px 3px;background:linear-gradient(#ffebba,#e7cb84);border:1px solid #c3a363;border-radius:8px;font-family:monospace;text-align:center;color:#594924;letter-spacing:.18em;}
.gb-protein-game .gti__machine-caption {margin-top:36px!important;padding:10px 14px;border-radius:15px;background:#f7fcf2e0;color:#375650!important;font-size:.8rem!important;line-height:1.5!important;text-align:center;}
.gb-protein-game .gti__model-note {font-size:.75rem!important;color:#44655e!important;padding:0 14px;}
.gb-protein-game .gti__handoff {display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;padding:28px 0;}
.gb-protein-game .gti__handoff span {padding:16px;border:1px solid #fff;background:#ecf7eeaa;border-radius:20px;font-weight:650;color:#315e55;}
.gb-protein-game .gti__feedback:not(:empty) {background:#f4faf3ed;border:1px solid #c2d9cd;border-radius:18px;padding:14px 18px;}
@media(max-width:600px) {
 .gb-protein-game .gb-protein-game__nav-tools {max-width:none;}
 .gb-protein-game .gti__actors {gap:7px;}
 .gb-protein-game .gti__actors button {padding:8px 5px 12px;border-radius:18px!important;}
 .gb-protein-game .gti__actors button strong {font-size:.85rem;}
 .gb-protein-game .gti__actors button small {font-size:.61rem;}
 .gb-protein-game .gti__actor-art {height:105px;}
 .gb-protein-game .gti__actor-art--mrna i {width:12px;height:25px;font-size:.52rem;}
 .gb-protein-game .gti__actor-art--trna b {padding:10px 3px;font-size:.47rem;}
 .gb-protein-game .gti__actor-art--trna i {height:40px;width:25px;}
 .gb-protein-game .gti__actor-art--trna i:after {left:-13px;width:38px;}
 .gb-protein-game .gti__task-panel {padding:16px;}
 .gb-protein-game .gti__machine {padding:45px 5px 0;}
 .gb-protein-game .gti__machine-sites {padding:0 19px;gap:5px;}
 .gb-protein-game .gti__machine-sites small {font-size:.53rem;}
 .gb-protein-game .gti__machine-rna {gap:4px;grid-template-columns:16px repeat(3,1fr) 16px;}
 .gb-protein-game .gti__machine-rna b {font-size:.72rem;}
}