/* Introduções manipuláveis: cenário → escolha → programa → consequência. */
.mt-lab { margin: 24px 0; border: 2px solid #d9d6ed; border-bottom-width: 6px; border-radius: 24px; overflow: hidden; background: white; color: #293849; font-family: "Avenir Next", system-ui, sans-serif; }
.mt-eyebrow { margin: 24px 24px 10px; color: #087f75; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.mt-title { margin: 0 24px 12px; font-size: clamp(23px, 3vw, 32px); line-height: 1.15; }
.mt-instruction { margin: 0 24px 24px; font-size: 16px; line-height: 1.6; }
.mt-scene { padding: 26px; background: #152b40; background-image: linear-gradient(0deg, #152b4066, #152b4022), var(--mt-scene); background-size: cover; background-position: center; }
.mt-stage { min-height: 230px; display: flex; justify-content: center; align-items: center; gap: 24px; }
.mt-character { width: clamp(72px, 15vw, 130px); height: 130px; object-fit: contain; filter: drop-shadow(0 8px 4px #10253f55); }
.mt-machine { min-width: 0; max-width: 350px; flex: 1; min-height: 166px; border: 3px solid #c8f4ed; border-bottom-width: 8px; border-radius: 20px; background: #f8fffc; padding: 20px; text-align: center; box-shadow: 0 10px 0 #132b4844; }
.mt-machine__label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #52657a; }
.mt-object { min-height: 65px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 12px; white-space: pre-line; overflow-wrap: anywhere; font-weight: 900; font-size: clamp(25px, 5vw, 42px); line-height: 1.2; color: #087f75; }
.mt-object small { flex-basis: 100%; font-size: 12px; margin-top: 10px; }
.mt-gauge { display: none; height: 24px; border: 2px solid #bbd6cc; background: #e8f0ed; border-radius: 7px; padding: 3px; margin-top: 14px; overflow: hidden; }
.mt-gauge i { display: block; width: 0; height: 100%; background: #13a790; border-radius: 3px; transition: width .6s ease; }
.mt-lab[data-kind="battery"] .mt-gauge { display: block; }
.mt-lab[data-kind="gate"] .mt-machine { border-color: #abb5c7; border-radius: 60px 60px 12px 12px; }
.mt-lab[data-kind="gate"][data-state="success"] .mt-machine { border-color: #13a790; box-shadow: 0 0 28px #77ead880; }
.mt-lab[data-kind="chest"] .mt-machine { border-color: #d5a852; background: #fff1ce; border-radius: 50px 50px 12px 12px; }
.mt-lab[data-kind="card"] .mt-machine { border-color: #ac94ed; }
.mt-lab[data-kind="safe"] .mt-object { font-size: 25px; }
.mt-lab[data-kind="maze"] .mt-stage { display: block; min-height: 0; }
.mt-lab[data-kind="draw"] .mt-stage { margin: auto; max-width: 400px; display: block; background: white; }
.mt-lab[data-kind="score"] .mt-object { font-size: 28px; color: #846117; }
.mt-letter { padding: 3px; font-size: 26px; }
.mt-letter.is-found { background: #d0f19b; border-radius: 5px; color: #314c15; }
.mt-controls { border: 0; margin: 24px 24px 16px; padding: 0; }
.mt-controls legend { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.mt-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-choice { min-width: 52px; min-height: 46px; padding: 9px 16px; border: 2px solid #d9d6ed; border-bottom-width: 5px; background: white; color: #43405d; border-radius: 12px; font: 800 17px system-ui; cursor: pointer; }
.mt-choice[aria-pressed="true"] { color: #543bb5; border-color: #785ce0; background: #eee9ff; }
.mt-choice:focus-visible { outline: 3px solid #087f75; outline-offset: 4px; }
.mt-controls:disabled .mt-choice { opacity: .55; cursor: wait; }
.mt-code { background: #29283f; color: #bbf1e7; font: 15px/1.7 var(--mono); margin: 0 24px; padding: 18px; border-radius: 14px; overflow-x: auto; }
.mt-actions { margin: 18px 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.mt-actions .btn { font-size: 13px; }
.mt-status { padding: 16px 24px 20px; margin: 0; font-size: 15px; line-height: 1.55; background: #f4f5fa; min-height: 78px; border-top: 1px solid #e5e3ef; }
.mt-lab[data-state="success"] .mt-status { background: #e7f8f0; color: #176345; }
.mt-lab[data-state="retry"] .mt-status { background: #fff4dc; color: #77551d; }
.mt-lab[data-state="success"] .mt-machine { animation: mt-pop .4s ease both; }
@keyframes mt-pop { 0% { transform: scale(.96); } 65% { transform: scale(1.03); } 100% { transform: scale(1); } }
@media (max-width: 500px) { .mt-scene { padding: 14px 10px; }.mt-stage { gap: 8px; }.mt-character { width: 60px; height: 85px; }.mt-machine { padding: 14px 10px; }.mt-eyebrow,.mt-title,.mt-instruction { margin-left: 16px; margin-right: 16px; }.mt-controls,.mt-actions { margin-left: 16px; margin-right: 16px; }.mt-code { margin-inline: 16px; font-size: 12px; }.mt-actions .btn { width: 100%; }.mt-letter { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .mt-lab * { animation: none !important; transition: none !important; } }