/* ===== PLABS Lab Stage Premium V2 =====
   Lab tab = full viewport, NO top header in any course/lesson.
   Chrome (tips / tabs / instructions) lives in bottom bar (.plux-dock). */

/* —— Kill all top chrome on Lab —— */
#lessonModal.lesson--lab .lesson__head,
#lessonModal.lesson--lab .lingo-wiz,
#lessonModal.lesson--lab .tipsbtn,
#lessonModal.lesson--lab .lesson__tabs,
#lessonModal:has([data-panel="build"].is-active) .lesson__head,
#lessonModal:has([data-panel="build"].is-active) .lingo-wiz,
#lessonModal:has([data-panel="build"].is-active) .tipsbtn,
#lessonModal:has([data-panel="build"].is-active) .lesson__tabs {
  display: none !important;
}

#lessonModal.lesson--lab .lesson,
#lessonModal:has([data-panel="build"].is-active) .lesson {
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0b1220;
  overflow: hidden;
}

#lessonModal.lesson--lab .lesson__close,
#lessonModal:has([data-panel="build"].is-active) .lesson__close {
  position: fixed !important;
  top: 10px;
  right: 10px;
  z-index: 60;
}

#lessonModal.lesson--lab .ltab-panel[data-panel="build"],
#lessonModal:has([data-panel="build"].is-active) .ltab-panel[data-panel="build"] {
  flex: 1;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  margin: 0;
  padding: 0 0 48px; /* slim bottom nav */
  overflow: hidden;
}

#lessonModal.lesson--lab .studio,
#lessonModal:has([data-panel="build"].is-active) .studio,
#lessonModal.lesson--lab .studio__stage,
#lessonModal:has([data-panel="build"].is-active) .studio__stage {
  flex: 1;
  min-height: 0;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#lessonModal.lesson--lab .studio__blocks,
#lessonModal:has([data-panel="build"].is-active) .studio__blocks {
  /* keep Blockly usable when present; still no top chrome */
  max-height: none;
}

#lessonModal.lesson--lab .studio__objective,
#lessonModal:has([data-panel="build"].is-active) .studio__objective {
  display: none !important;
}

/* Full-bleed play labs: hide redundant studio chrome */
.studio.studio--gamedev .studio__objective,
.studio.studio--unitylab .studio__objective,
.studio.studio--tinker .studio__objective,
.studio.studio--pro .studio__objective {
  display: none !important;
}
.studio.studio--gamedev .studio__actions,
.studio.studio--unitylab .studio__actions,
.studio.studio--gamedev .studio__msg,
.studio.studio--unitylab .studio__msg,
.studio.studio--gamedev .codepeek,
.studio.studio--unitylab .codepeek,
.studio.studio--gamedev #codePeekToggle,
.studio.studio--unitylab #codePeekToggle {
  display: none !important;
}

/* Bigger play surface — all gamedev / unity / tinker */
.studio.studio--gamedev #gameHolder.studio__canvas,
.studio.studio--gamedev .studio__canvas,
.studio.studio--unitylab #gameHolder.studio__canvas,
.studio.studio--unitylab .studio__canvas {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  overflow: hidden;
  padding: 0;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}
.studio.studio--tinker #gameHolder.studio__canvas,
.studio.studio--tinker .studio__canvas {
  min-height: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}
.studio.studio--pro #gameHolder.studio__canvas,
.studio.studio--pro .studio__canvas {
  min-height: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}

#lessonModal.lesson--lab .studio.studio--gamedev #gameHolder.studio__canvas,
#lessonModal.lesson--lab .studio.studio--unitylab #gameHolder.studio__canvas,
#lessonModal.lesson--lab .studio.studio--tinker #gameHolder.studio__canvas,
#lessonModal.lesson--lab .studio.studio--pro #gameHolder.studio__canvas,
#lessonModal:has([data-panel="build"].is-active) .studio #gameHolder.studio__canvas {
  height: calc(100vh - 48px) !important;
  min-height: calc(100vh - 48px) !important;
  max-height: calc(100vh - 48px) !important;
}

/* —— AnimLab: slim header, huge viewport —— */
.animlab {
  gap: 8px !important;
  padding: 8px !important;
  min-height: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
}
.animlab__hero {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  padding: 6px 10px !important;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 0 rgba(42, 31, 69, 0.06);
}
.animlab__brand {
  font-size: 10px !important;
  order: 0;
}
.animlab__title {
  font-size: 15px !important;
  margin: 0 !important;
  width: auto !important;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.animlab__sub {
  display: none !important;
}
.animlab__progress {
  padding: 4px 10px !important;
  margin-left: auto;
  flex-shrink: 0;
}
.animlab__prog-num {
  font-size: 14px !important;
}
.animlab__grid {
  flex: 1 !important;
  min-height: 0 !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.7fr) !important;
}
.animlab__stage-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  gap: 6px;
  padding: 8px !important;
}
.animlab__toolbar,
.animlab__toolbar--sub {
  padding: 6px 8px !important;
  gap: 4px !important;
  flex-wrap: wrap;
}
.animlab__tool,
.animlab__btn,
.animlab__chip {
  padding: 5px 8px !important;
  font-size: 11px !important;
}
.animlab__viewport {
  background: #100037 !important;
  flex: 1 1 auto !important;
  min-height: min(48vh, 420px) !important;
  max-height: none !important;
  height: min(52vh, 460px) !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.animlab__canvas {
  min-height: min(48vh, 420px) !important;
  max-height: none !important;
  height: 100% !important;
  width: 100% !important;
}
.animlab__timeline {
  padding: 6px !important;
}
.animlab__panel {
  overflow: auto;
  max-height: min(68vh, 640px);
  padding: 8px !important;
  gap: 8px !important;
}
.animlab__block h3 {
  margin-bottom: 6px !important;
  font-size: 10px !important;
}
.animlab__mission {
  padding: 6px 8px !important;
  font-size: 12px !important;
}
.animlab__code {
  rows: 4;
  min-height: 72px !important;
  max-height: 100px !important;
}
.animlab__note {
  font-size: 10px !important;
}
.plux-howto-wrap {
  margin: 0 0 6px !important;
  border-radius: 12px !important;
}
.plux-howto-wrap > summary {
  padding: 7px 10px !important;
  font-size: 11px !important;
}

@media (max-width: 900px) {
  .animlab__grid {
    grid-template-columns: 1fr !important;
  }
  .animlab__viewport,
  .animlab__canvas {
    min-height: min(42vh, 360px) !important;
    height: min(44vh, 380px) !important;
  }
  .animlab__panel {
    max-height: none;
  }
}

/* —— Unity Lab: coach as glass overlay, taller stage —— */
.unitylab {
  gap: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  height: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
.unitylab__sky {
  opacity: 0.85;
}
.unitylab__top {
  position: absolute !important;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 8 !important;
  gap: 8px !important;
  pointer-events: none;
}
.unitylab__top > * {
  pointer-events: auto;
}
.unitylab__coach {
  max-width: min(100%, 420px) !important;
}
.unitylab__coach-face {
  width: 36px !important;
  height: 36px !important;
  font-size: 1.15rem !important;
}
.unitylab__bubble {
  padding: 6px 10px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}
.unitylab__bubble strong {
  font-size: 0.88rem !important;
}
.unitylab__bubble p {
  font-size: 0.75rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.unitylab__progress {
  padding: 5px 9px !important;
  min-width: 100px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
}
.unitylab__arena {
  flex: 1 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100%;
}
.unitylab__stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  align-items: center !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}
.unitylab__top,
.unitylab__coach,
.unitylab__progress {
  display: none !important;
}
.unitylab__hero {
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.unitylab__hero-img {
  height: min(82vh, 920px) !important;
  max-width: min(100%, 1100px) !important;
  object-position: center center !important;
}
.unitylab .ul-hero {
  width: auto !important;
  height: 100% !important;
  max-height: none !important;
  transform-origin: center center;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.unitylab .ul-hero--facezoom {
  transform: scale(1.35) !important;
  transform-origin: center 80px !important;
}
.unitylab__dock {
  margin-top: 0 !important;
  padding: 10px 12px 12px !important;
  flex-shrink: 0;
}
.unitylab__card {
  min-width: 88px !important;
  padding: 9px 11px !important;
}
.unitylab__grid {
  min-height: min(56vh, 520px) !important;
  padding: 56px 10px 10px;
  box-sizing: border-box;
}
.unitylab__grid .unitylab__stage {
  height: auto !important;
  min-height: min(48vh, 440px) !important;
  padding-top: 0;
}

@media (max-width: 720px) {
  .unitylab__stage {
    min-height: min(46vh, 400px) !important;
    height: min(48vh, 420px) !important;
    padding-top: 52px;
  }
  .unitylab__hero-img {
    height: min(42vh, 360px) !important;
  }
  .unitylab .ul-hero {
    height: min(44vh, 340px) !important;
  }
}

/* Kids light themes: keep premium glass on animlab hero */
body.pl-kids #lessonModal.lesson--lingo .animlab__hero,
#lessonModal.lesson--lingo .animlab__hero {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 2px solid #fff !important;
}
body.pl-kids[data-world="anim"] .studio.studio--gamedev:has(.unitylab) #gameHolder.studio__canvas,
body.pl-kids[data-world="anim"] #gameHolder.studio__canvas:has(.unitylab),
#lessonModal.lesson--lingo #gameHolder:has(.unitylab),
.studio.studio--unitylab #gameHolder.studio__canvas {
  min-height: min(68vh, 640px) !important;
  height: min(68vh, 640px) !important;
}
body.pl-kids[data-world="anim"] .unitylab {
  min-height: 100% !important;
  height: 100% !important;
}


#lessonModal.lesson--story .ltab-panel[data-panel="learn"].is-active {
  display: flex !important;
  flex-direction: column;
  overflow: auto;
}

/* Bottom chrome bar (tips + tabs) — all courses */
.plux-dock {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 55;
  max-width: none !important;
  width: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 2px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 -10px 28px rgba(0,0,0,.28) !important;
  background: rgba(8, 14, 28, 0.96) !important;
  backdrop-filter: blur(10px);
  padding: 8px 12px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
.plux-dock.is-collapsed .plux-dock__body { display: none !important; }
.plux-dock__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plux-dock__nav {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.plux-dock__nav button {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  font-weight: 800;
  font-size: 13px;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: Fredoka, Nunito, sans-serif;
}
.plux-dock__nav button.is-active {
  background: linear-gradient(180deg, #FE8101, #FE5F4C);
  border-color: transparent;
  color: #fff;
}
.plux-dock__btn {
  border: 0;
  background: #FE8101;
  color: #fff;
  font-weight: 900;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: Fredoka, Nunito, sans-serif;
}
.plux-dock__body {
  color: #ffedac;
  font-weight: 700;
  line-height: 1.4;
  font-size: 13px;
  max-height: 140px;
  overflow: auto;
  padding: 4px 2px 2px;
}
.plux-dock .plux-aku {
  --aku-size: 0.42;
  transform: scale(0.55);
  transform-origin: left bottom;
  height: 4.2em;
  width: 3.2em;
  filter: none;
}

#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro) .studio__actions,
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro) .studio__actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 50;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  margin: 0;
  background: rgba(8, 14, 28, 0.94);
  border-top: 1px solid rgba(255,255,255,.1);
}
#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab) .studio__msg,
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab) .studio__msg {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 100px;
  z-index: 49;
}


/* Kill Stage chrome + tips — max interaction area */
#lessonModal.lesson--lab .animlab__hero,
#lessonModal:has([data-panel="build"].is-active) .animlab__hero,
#lessonModal.lesson--lab .animlab__aurora,
#lessonModal:has([data-panel="build"].is-active) .animlab__aurora {
  display: none !important;
}
#lessonModal.lesson--lab .animlab,
#lessonModal:has([data-panel="build"].is-active) .animlab {
  padding: 0 !important;
  gap: 0 !important;
  height: calc(100vh - 48px) !important;
  min-height: calc(100vh - 48px) !important;
}
#lessonModal.lesson--lab .animlab__grid,
#lessonModal:has([data-panel="build"].is-active) .animlab__grid {
  height: 100% !important;
  min-height: 0 !important;
  gap: 6px !important;
  padding: 6px !important;
  box-sizing: border-box;
}
#lessonModal.lesson--lab .animlab__viewport,
#lessonModal:has([data-panel="build"].is-active) .animlab__viewport {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

#lessonModal.lesson--lab .unitylab,
#lessonModal:has([data-panel="build"].is-active) .unitylab {
  height: calc(100vh - 48px) !important;
  min-height: calc(100vh - 48px) !important;
  border-radius: 0 !important;
}
#lessonModal.lesson--lab .unitylab__stage,
#lessonModal:has([data-panel="build"].is-active) .unitylab__stage {
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  padding-top: 0 !important;
}
#lessonModal.lesson--lab .unitylab__hero-img,
#lessonModal:has([data-panel="build"].is-active) .unitylab__hero-img {
  height: min(78vh, 860px) !important;
  max-width: min(100%, 980px) !important;
}
#lessonModal.lesson--lab .unitylab__webgl,
#lessonModal.lesson--lab .unitylab__webgl iframe,
#lessonModal:has([data-panel="build"].is-active) .unitylab__webgl,
#lessonModal:has([data-panel="build"].is-active) .unitylab__webgl iframe {
  height: calc(100vh - 140px) !important;
  min-height: calc(100vh - 140px) !important;
  border-radius: 0 !important;
}

.plux-dock.plux-dock--navonly {
  padding: 6px 10px !important;
  background: rgba(8, 14, 28, 0.92) !important;
  min-height: 48px;
  justify-content: center;
}
.plux-dock.plux-dock--navonly .plux-dock__nav {
  width: 100%;
  justify-content: center;
}
.plux-dock.plux-dock--navonly .plux-aku,
.plux-dock.plux-dock--navonly .plux-dock__btn,
.plux-dock.plux-dock--navonly .plux-dock__body {
  display: none !important;
}


/* NO HEAD CROP — interactive character area fills lab */
#lessonModal.lesson--lab .unitylab__stage,
#lessonModal:has([data-panel="build"].is-active) .unitylab__stage,
#lessonModal.lesson--lab .unitylab__arena,
#lessonModal:has([data-panel="build"].is-active) .unitylab__arena,
#lessonModal.lesson--lab .unitylab__hero,
#lessonModal:has([data-panel="build"].is-active) .unitylab__hero {
  overflow: visible !important;
}
#lessonModal.lesson--lab .unitylab,
#lessonModal:has([data-panel="build"].is-active) .unitylab {
  overflow: hidden !important; /* keep dock clipped, stage inside flexes */
  display: flex !important;
  flex-direction: column !important;
}
#lessonModal.lesson--lab .unitylab__arena,
#lessonModal:has([data-panel="build"].is-active) .unitylab__arena {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
#lessonModal.lesson--lab .unitylab__stage,
#lessonModal:has([data-panel="build"].is-active) .unitylab__stage {
  flex: 1 1 auto !important;
  min-height: calc(100vh - 200px) !important;
  height: auto !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.animlab__block--export,
[data-plux-hide-export] { display: none !important; }

/* AnimLab: viewport dominates */
#lessonModal.lesson--lab .animlab__viewport,
#lessonModal:has([data-panel="build"].is-active) .animlab__viewport {
  flex: 1 1 auto !important;
  min-height: calc(100vh - 220px) !important;
  height: auto !important;
  width: 100% !important;
}
#lessonModal.lesson--lab .animlab-rick-root,
#lessonModal:has([data-panel="build"].is-active) .animlab-rick-root {
  overflow: visible !important;
  font-size: clamp(9px, 1.35vh, 14px);
}

/* Hide Export panels across labs — work controls stay */
.kritalab__block:has([data-act="export"]),
.blendlab__block:has([data-act="export"]),
.dublab__block:has([data-act="export"]),
.spectra__block:has([data-act="export"]),
.stopmotionlab .sms__copy,
.sms__block:has([data-act="export"]),
.plwb__btn[data-act="export"],
.animlab__links { display: none !important; }


/* ===== AnimLab UX V3: stage left / tools+missions right ===== */
#lessonModal.lesson--lab .animlab__grid,
#lessonModal:has([data-panel="build"].is-active) .animlab__grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 360px) !important;
  gap: 0 !important;
  padding: 0 !important;
  height: calc(100vh - 48px) !important;
}
#lessonModal.lesson--lab .animlab__stage-card,
#lessonModal:has([data-panel="build"].is-active) .animlab__stage-card {
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#lessonModal.lesson--lab .animlab__toolbar,
#lessonModal.lesson--lab .animlab__toolbar--sub,
#lessonModal:has([data-panel="build"].is-active) .animlab__toolbar,
#lessonModal:has([data-panel="build"].is-active) .animlab__toolbar--sub {
  display: none !important; /* tools live in right panel */
}
#lessonModal.lesson--lab .animlab__viewport,
#lessonModal:has([data-panel="build"].is-active) .animlab__viewport {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}
#lessonModal.lesson--lab .animlab__timeline,
#lessonModal:has([data-panel="build"].is-active) .animlab__timeline {
  flex-shrink: 0;
  padding: 8px 10px !important;
  background: rgba(8,14,28,.92);
}
#lessonModal.lesson--lab .animlab__panel,
#lessonModal:has([data-panel="build"].is-active) .animlab__panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow: auto !important;
  max-height: calc(100vh - 48px) !important;
  padding: 10px 12px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: rgba(12, 18, 34, 0.96) !important;
  border-left: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
#lessonModal.lesson--lab .animlab__block,
#lessonModal:has([data-panel="build"].is-active) .animlab__block {
  display: block !important;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
}
#lessonModal.lesson--lab .animlab__block h3,
#lessonModal:has([data-panel="build"].is-active) .animlab__block h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fb923c !important;
}
#lessonModal.lesson--lab .animlab__missions,
#lessonModal:has([data-panel="build"].is-active) .animlab__missions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#lessonModal.lesson--lab .animlab__mission,
#lessonModal:has([data-panel="build"].is-active) .animlab__mission {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}
#lessonModal.lesson--lab .animlab__mission.is-done,
#lessonModal:has([data-panel="build"].is-active) .animlab__mission.is-done {
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
}
#lessonModal.lesson--lab .animlab__actions,
#lessonModal.lesson--lab .animlab__actions--work,
#lessonModal:has([data-panel="build"].is-active) .animlab__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#lessonModal.lesson--lab .animlab__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px 2px;
}
#lessonModal.lesson--lab .animlab__panel-head .animlab__prog-num {
  font-size: 1.1rem;
  color: #fbbf24;
}
/* Smaller Rick so full figure fits */
#lessonModal.lesson--lab .animlab-rick-root,
#lessonModal:has([data-panel="build"].is-active) .animlab-rick-root {
  font-size: clamp(5.5px, 0.82vh, 8.2px) !important;
  overflow: hidden !important;
}
#lessonModal.lesson--lab .animlab-rick-root .stars,
#lessonModal:has([data-panel="build"].is-active) .animlab-rick-root .stars {
  align-items: center !important;
  padding-bottom: 1.2rem !important;
  padding-top: 1rem;
}
@media (max-width: 900px) {
  #lessonModal.lesson--lab .animlab__grid,
  #lessonModal:has([data-panel="build"].is-active) .animlab__grid {
    grid-template-columns: 1fr !important;
  }
  #lessonModal.lesson--lab .animlab__panel,
  #lessonModal:has([data-panel="build"].is-active) .animlab__panel {
    max-height: 42vh !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
  }
}

/* Unity Rick stage */
.unitylab--rick .unitylab__stage {
  background: radial-gradient(ellipse at 50% 70%, #2a0a55 0%, #100037 55%, #070018 100%) !important;
  overflow: hidden !important;
}
.unitylab .ul-hero--rick {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  overflow: hidden;
}
.unitylab .ul-hero--rick .animlab-rick-root {
  position: absolute !important;
  inset: 0 !important;
  font-size: clamp(5.2px, 0.85vh, 8px) !important;
  overflow: hidden !important;
  pointer-events: none;
}
.unitylab .ul-hero--rick .animlab-rick-root .stars {
  align-items: center !important;
  padding-bottom: 10% !important;
}
.unitylab.unitylab--face .ul-hero--rick .animlab-rick-root {
  font-size: clamp(9px, 1.6vh, 13px) !important;
  transform: translateY(8%);
}
.unitylab.unitylab--hand .ul-hero--rick .animlab-rick-root {
  font-size: clamp(10px, 1.8vh, 14px) !important;
  transform: translate(-18%, 12%) scale(1.15);
  transform-origin: center center;
}


/* Drag layer above Rick */
#lessonModal.lesson--lab .animlab__viewport,
#lessonModal:has([data-panel="build"].is-active) .animlab__viewport {
  position: relative !important;
}
#lessonModal.lesson--lab .animlab__canvas,
#lessonModal:has([data-panel="build"].is-active) .animlab__canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  touch-action: none !important;
  cursor: grab;
}
#lessonModal.lesson--lab .animlab-rick-root,
#lessonModal:has([data-panel="build"].is-active) .animlab-rick-root {
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ANIM orange panel polish */
#lessonModal.lesson--lab .animlab__panel {
  background: rgba(28, 20, 16, 0.96) !important;
  border-left: 1px solid rgba(251, 146, 60, 0.25) !important;
}
#lessonModal.lesson--lab .plux-dock.plux-dock--navonly {
  background: rgba(28, 20, 16, 0.96) !important;
  border-top: 1px solid rgba(251, 146, 60, 0.3) !important;
}

/* ===== PLABS Lab + Lesson modal layout fixes (2026-08-10) =====
   Blockly studios + story typewriter + deco under lab tabs */

/* Hide stage deco while Lab is active (sprites were overlaying the workspace) */
#lessonModal.lesson--lab .kids-stage-deco,
#lessonModal:has([data-panel="build"].is-active) .kids-stage-deco {
  display: none !important;
}

/* Kids shell paints every panel as a white card — undo that on Lab */
body.pl-kids #lessonModal.lesson--lab .ltab-panel[data-panel="build"],
body.pl-kids #lessonModal:has([data-panel="build"].is-active) .ltab-panel[data-panel="build"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 56px !important;
  overflow: hidden !important;
}

/* Default Blockly studio: usable 2-col layout that fills the viewport */
#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab),
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  align-content: stretch !important;
}

#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__blocks,
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__blocks {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__stage,
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__stage {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__canvas,
#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) #gameHolder,
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__canvas,
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) #gameHolder {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 180px !important;
  aspect-ratio: auto !important;
}

#lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__actions,
#lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__actions {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 5;
  grid-column: 1 / -1;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 18, 32, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Camera / gesture fxlab: full-bleed stage, no skinny side column */
#lessonModal.lesson--lab .studio.studio--fxlab,
#lessonModal.lesson--lab .studio.studio--tinker,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--fxlab,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--tinker {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

#lessonModal.lesson--lab .studio.studio--fxlab .studio__blocks,
#lessonModal.lesson--lab .studio.studio--tinker .studio__blocks,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--fxlab .studio__blocks,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--tinker .studio__blocks {
  display: none !important;
}

#lessonModal.lesson--lab .studio.studio--fxlab .studio__stage,
#lessonModal.lesson--lab .studio.studio--tinker .studio__stage,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--fxlab .studio__stage,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--tinker .studio__stage {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#lessonModal.lesson--lab .studio.studio--fxlab .studio__canvas,
#lessonModal.lesson--lab .studio.studio--tinker .studio__canvas,
#lessonModal.lesson--lab .studio.studio--fxlab #gameHolder,
#lessonModal.lesson--lab .studio.studio--tinker #gameHolder,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--fxlab .studio__canvas,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--tinker .studio__canvas {
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  max-height: none !important;
}

/* Story / instructions / quiz panels: readable scroll, no clipped typewriter */
#lessonModal .ltab-panel[data-panel="story"],
#lessonModal .ltab-panel[data-panel="quiz"],
#lessonModal .ltab-panel[data-panel="class"] {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: none;
  min-height: 0;
}

#lessonModal .plux-story,
#lessonModal .plux-howto,
#lessonModal .plux-type,
#lessonModal .story-type,
#lessonModal [data-plux-type] {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Dock stays above lab chrome and is never half-cut */
#lessonModal.lesson--lab .plux-dock,
#lessonModal:has([data-panel="build"].is-active) .plux-dock {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 860px) {
  #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab),
  #lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(160px, 38vh) minmax(0, 1fr) auto !important;
  }
}


/* ===== PLABS modal polish v2 (story / practice / fxlab) ===== */

/* Hide floating deco in lesson modal — it clips under tabs and covers labs */
#lessonModal .kids-stage-deco {
  display: none !important;
}

/* —— Story / Instrucciones: fill viewport, no white card gap —— */
#lessonModal.lesson--story .lesson,
body.pl-kids #lessonModal.lesson--story .lesson {
  background: #ffe08a !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#lessonModal.lesson--story .ltab-panel[data-panel="learn"],
body.pl-kids #lessonModal.lesson--story .ltab-panel[data-panel="learn"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

#lessonModal.lesson--story .plux-story {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100% !important;
  height: auto;
  border-radius: 0 !important;
  justify-content: center;
  padding: 24px 16px 72px;
  box-sizing: border-box;
}

#lessonModal.lesson--story .plux-ai-inline,
#lessonModal.lesson--story details.plux-ai-inline {
  width: min(920px, calc(100% - 24px));
  margin: 0 auto 16px;
}

/* —— Practice quiz: usable panel, no clipped top —— */
#lessonModal .ltab-panel[data-panel="practice"],
body.pl-kids #lessonModal .ltab-panel[data-panel="practice"] {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  max-height: none;
}

#lessonModal .plpq,
#lessonModal #plPracticeHost {
  min-height: min(60vh, 520px);
  padding-bottom: 24px;
}

#lessonModal .plpq__sky {
  display: none !important;
}

/* —— Fxlab / camera labs: keep content scrollable above dock —— */
#lessonModal.lesson--lab .studio.studio--tinker #gameHolder,
#lessonModal.lesson--lab .studio.studio--tinker .studio__canvas {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  place-items: unset !important;
}

#lessonModal.lesson--lab .fxlab {
  min-height: 100%;
  padding-bottom: 16px;
  box-sizing: border-box;
}

#lessonModal.lesson--lab .fxlab__stage,
#lessonModal.lesson--lab .fxlab__how,
#lessonModal.lesson--lab .fxlab__chips,
#lessonModal.lesson--lab .fxlab__score {
  max-width: min(720px, 100%);
}

#lessonModal.lesson--lab .fxlab__how {
  width: 100%;
}

#pluxDock {
  background: rgba(8, 14, 28, 0.94) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#pluxDock button,
#pluxDock .plux-dock__btn {
  color: #e2e8f0;
}

@media (max-width: 700px) {
  #lessonModal.lesson--story .plux-story {
    padding: 16px 10px 80px;
    gap: 12px;
  }
  #lessonModal.lesson--story .plux-story__row {
    gap: 12px;
  }
}

/* PL_QUEST_UX_FIX_20260812b — Unidad 6 laberinto limpio + howto colapsable */
#lessonModal.lesson--lab .studio.studio--quest .studio__msg,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest .studio__msg {
  display: none !important;
}
#lessonModal.lesson--lab .studio.studio--quest #gamePad,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest #gamePad {
  display: none !important;
}
#lessonModal.lesson--lab .studio.studio--quest .studio__actions,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest .studio__actions {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  background: rgba(11, 18, 32, 0.95) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
}
#lessonModal.lesson--lab .studio.studio--quest .studio__stage,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest .studio__stage {
  overflow: hidden !important;
}
#lessonModal.lesson--lab .studio.studio--quest #gameHolder.studio__canvas,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest #gameHolder.studio__canvas {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 6px !important;
}
#lessonModal.lesson--lab .studio.studio--quest .questview__stage,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest .questview__stage {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  max-height: min(42vh, 320px) !important;
  overflow: hidden !important;
}
#lessonModal.lesson--lab .studio.studio--quest .questview__stage canvas,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest .questview__stage canvas {
  max-width: 100% !important;
  max-height: min(42vh, 320px) !important;
  width: auto !important;
  height: auto !important;
}
#lessonModal.lesson--lab .studio.studio--quest .questpad,
#lessonModal:has([data-panel="build"].is-active) .studio.studio--quest .questpad {
  flex: 0 0 auto !important;
  padding-bottom: 2px;
}
#plCodeLabChrome {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  padding: 8px 10px 0;
  background: rgba(8, 14, 28, 0.55);
}
#plCodeLabChrome .plux-howto-wrap {
  margin: 0 0 6px;
  max-height: min(40vh, 280px);
  overflow: auto;
}
#lessonModal.lesson--lab .ltab-panel[data-panel="build"]:has(#plCodeLabChrome) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
#lessonModal.lesson--lab .ltab-panel[data-panel="build"]:has(#plCodeLabChrome) .studio {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Animación: una sola barra de instrucciones y la tira de frames siempre visible */
#lessonModal.lesson--lab .animlab,
#lessonModal:has([data-panel="build"].is-active) .animlab {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: calc(100vh - 48px) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 48px) !important;
}
#lessonModal.lesson--lab .animlab > [data-plux-howto],
#lessonModal:has([data-panel="build"].is-active) .animlab > [data-plux-howto] {
  flex: 0 0 auto;
}
#lessonModal.lesson--lab .animlab__grid,
#lessonModal:has([data-panel="build"].is-active) .animlab__grid {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#lessonModal.lesson--lab .animlab__viewport,
#lessonModal:has([data-panel="build"].is-active) .animlab__viewport,
#lessonModal.lesson--lab .animlab__canvas,
#lessonModal:has([data-panel="build"].is-active) .animlab__canvas {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
#lessonModal.lesson--lab .animlab__viewport,
#lessonModal:has([data-panel="build"].is-active) .animlab__viewport {
  overflow: hidden !important;
  flex: 1 1 auto !important;
}
#lessonModal.lesson--lab .animlab__timeline,
#lessonModal:has([data-panel="build"].is-active) .animlab__timeline {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 30 !important;
  min-height: 68px !important;
  background: #140c18 !important;
}
#lessonModal.lesson--lab .animlab__thumb,
#lessonModal:has([data-panel="build"].is-active) .animlab__thumb {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
}
#lessonModal.lesson--lab .animlab__coachhost,
#lessonModal:has([data-panel="build"].is-active) .animlab__coachhost {
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  width: min(280px, 42%) !important;
  max-width: 280px !important;
  z-index: 8 !important;
}
#lessonModal.lesson--lab .animlab__panel,
#lessonModal:has([data-panel="build"].is-active) .animlab__panel {
  max-height: 100% !important;
}


/* PLABS_ROBOT_FIT_V1 — electronics/robotics lab only.
   Keep the checklist, blocks, stage, buttons and code peek in separate boxes. */
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .ltab-panel[data-panel="build"],
body[data-world="robot"] #lessonModal.lesson--lab .ltab-panel[data-panel="build"] {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 8px 10px 64px !important;
  box-sizing: border-box !important;
}
body.pl-kids[data-world="robot"] #plRobotLabChrome,
body[data-world="robot"] #plRobotLabChrome {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
  max-height: 32vh;
  overflow: auto;
}
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab),
body[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 380px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  align-items: stretch !important;
  gap: 10px !important;
}
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__blocks,
body[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__blocks {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__stage,
body[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__stage {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__objective,
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .robotcmd,
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .gamepad,
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__msg,
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .studio__actions,
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .codepeek {
  flex: 0 0 auto !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 6 !important;
}
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) #gameHolder.studio__canvas,
body[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) #gameHolder.studio__canvas {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) #gameHolder canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}
body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--unitylab):not(.studio--tinker):not(.studio--pro):not(.studio--fxlab) .codepeek {
  max-height: 22vh !important;
  overflow: auto !important;
}