/* PLABS_MOBILE_LABS_V1 — figuras + labs 100% usables en celular (≤860px) */
/* Cargar DESPUÉS de animlab-rick.css / unitylab-heroes.css / lab-stage-premium.css */

@media (max-width: 860px) {
  /* —— AnimLab: pantalla más chica para que Rick quepa entero —— */
  html.pl-mobile .animlab__viewport,
  html.pl-mobile #lessonModal .animlab__viewport,
  html.pl-mobile #lessonModal.lesson--lab .animlab__viewport,
  html.pl-mobile #lessonModal:has([data-panel="build"].is-active) .animlab__viewport,
  .animlab__viewport,
  #lessonModal.lesson--lab .animlab__viewport,
  #lessonModal:has([data-panel="build"].is-active) .animlab__viewport {
    min-height: min(34vh, 280px) !important;
    height: min(36vh, 300px) !important;
    max-height: min(36vh, 300px) !important;
    overflow: hidden !important;
  }

  .animlab__canvas,
  #lessonModal.lesson--lab .animlab__canvas,
  #lessonModal:has([data-panel="build"].is-active) .animlab__canvas {
    min-height: inherit !important;
    height: 100% !important;
    max-height: none !important;
  }

  #lessonModal.lesson--lab .animlab__grid,
  #lessonModal:has([data-panel="build"].is-active) .animlab__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  #lessonModal.lesson--lab .animlab__panel,
  #lessonModal:has([data-panel="build"].is-active) .animlab__panel {
    max-height: min(38vh, 320px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  #lessonModal.lesson--lab .animlab__timeline,
  #lessonModal:has([data-panel="build"].is-active) .animlab__timeline {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  /* Rick: las medidas son rem (html), no el font-size del nodo.
     scale() sí achica pelo/brazos/pies y el hit-test del drag sigue el rect. */
  html.pl-mobile .animlab-rick-root,
  html.pl-mobile #lessonModal .animlab-rick-root,
  .animlab-rick-root,
  #lessonModal.lesson--lab .animlab-rick-root,
  #lessonModal:has([data-panel="build"].is-active) .animlab-rick-root {
    transform: scale(0.50) !important;
    transform-origin: 50% 62% !important;
    overflow: visible !important;
  }

  .animlab-rick-root .stars {
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 4% !important;
    padding-top: 10% !important;
    z-index: 2 !important;
  }

  .animlab-rick-root .ground {
    z-index: 0 !important;
    min-height: 10% !important;
    border-top-left-radius: 80% 28% !important;
    border-top-right-radius: 80% 28% !important;
  }

  .animlab-rick-root .rick {
    transform-origin: center bottom;
  }

  /* Guía del lab: compacta, debajo del escenario (no tapa a Rick ni el timeline) */
  html.pl-mobile .animlab__stage-card,
  #lessonModal.lesson--lab .animlab__stage-card,
  #lessonModal:has([data-panel="build"].is-active) .animlab__stage-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  html.pl-mobile .animlab__viewport,
  #lessonModal.lesson--lab .animlab__viewport {
    order: 1 !important;
  }

  html.pl-mobile .animlab__coachhost,
  #lessonModal .animlab__coachhost,
  #lessonModal.lesson--lab .animlab__coachhost {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    order: 2 !important;
    padding: 6px 8px 4px !important;
    box-sizing: border-box !important;
  }

  html.pl-mobile .animlab__timeline,
  #lessonModal.lesson--lab .animlab__timeline {
    order: 3 !important;
    position: relative !important;
    z-index: 8 !important;
  }

  html.pl-mobile .animlab__coachhost .plcoach {
    width: 100% !important;
    filter: none;
  }

  html.pl-mobile .animlab__coachhost .plcoach__bubble {
    max-height: none !important;
    padding: 8px 10px 7px !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  html.pl-mobile .animlab__coachhost .plcoach__tail {
    top: -6px !important;
    bottom: auto !important;
    left: 22px !important;
    transform: rotate(-135deg) !important;
  }

  html.pl-mobile .animlab__coachhost .plcoach__face {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
  }

  html.pl-mobile .animlab__coachhost .plcoach__title {
    font-size: 12px !important;
    white-space: normal !important;
    margin-bottom: 2px !important;
  }

  html.pl-mobile .animlab__coachhost .plcoach__line {
    font-size: 11px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    max-height: 4.8em !important;
  }

  html.pl-mobile .animlab__coachhost .plcoach__bar {
    margin-top: 4px !important;
  }

  html.pl-mobile .animlab__coachhost .plcoach__next {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  html.pl-mobile .animlab .plcoach__arrow {
    z-index: 25 !important;
  }

  /* —— UnityLab: stage + héroes (Emmet / Finn / etc.) —— */
  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,
  .studio.studio--unitylab .studio__canvas {
    min-height: min(52vh, 460px) !important;
    height: min(52vh, 460px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .unitylab,
  body.pl-kids[data-world="anim"] .unitylab {
    min-height: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  .unitylab__stage,
  .unitylab .unitylab__stage {
    min-height: min(48vh, 420px) !important;
    height: min(48vh, 420px) !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px 16px !important;
  }

  .unitylab__hero,
  .unitylab__hero-img,
  .unitylab .ul-hero {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: min(42vh, 360px) !important;
    max-height: min(48vh, 400px) !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Emmet: bajar scale para que quepa en el stage */
  .unitylab #emmet {
    width: 200px !important;
    height: 320px !important;
    transform: scale(0.72) !important;
    transform-origin: center center !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  /* Otros CSS heroes (Finn, Rey, etc.) */
  .unitylab .container-host {
    transform: scale(0.95) !important;
    transform-origin: center center !important;
  }

  .unitylab .person {
    transform-origin: center center;
  }

  .unitylab .ul-hero--facezoom {
    transform: scale(1.05) !important;
    transform-origin: center 40% !important;
  }

  /* Rick dentro de UnityLab */
  .unitylab--rick .unitylab__stage,
  .unitylab .ul-hero--rick {
    overflow: visible !important;
  }

  .unitylab .ul-hero--rick .animlab-rick-root {
    transform: scale(0.50) !important;
    transform-origin: 50% 58% !important;
    overflow: visible !important;
  }

  .unitylab.unitylab--face .ul-hero--rick .animlab-rick-root {
    transform: scale(0.72) translateY(4%) !important;
    transform-origin: 50% 40% !important;
  }

  .unitylab.unitylab--hand .ul-hero--rick .animlab-rick-root {
    transform: scale(0.68) translate(-8%, 6%) !important;
    transform-origin: 50% 50% !important;
  }

  /* —— Programación: shell móvil (nada se recorta, un scroll, dock fijo) —— */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .lesson,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .lesson {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--pl-vvh, 100dvh) !important;
    max-height: var(--pl-vvh, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .ltab-panel[data-panel="build"],
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .ltab-panel[data-panel="build"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .studio,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .studio {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio__stage,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .studio__stage,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .studio__stage {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  /* Evita que Blockly tape Ejecutar: el stage no debe clippear */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio.studio--lab,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio {
    display: flex !important;
    flex-direction: column !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio__actions {
    flex: 0 0 auto !important;
    z-index: 50 !important;
  }


  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plux-howto-wrap {
    margin: 4px 8px 0 !important;
  }

  /* Compact howto so the board keeps vertical room */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plux-howto-wrap summary,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plux-howto-wrap .plux-howto__summary {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 0 !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio__objective {
    font-size: 11px !important;
    line-height: 1.25 !important;
    padding: 0 10px !important;
    margin: 0 !important;
    max-height: 2.6em !important;
    overflow: hidden !important;
  }

  /* U1–U5 Blockly: tablero más grande; bloques/botones más chicos en celular */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--pro):not(.studio--unitylab) #gameHolder.studio__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--pro):not(.studio--unitylab) #gameHolder.studio__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--pro):not(.studio--unitylab) #gameHolder.studio__canvas {
    width: min(88vw, 34vh, 260px) !important;
    height: min(88vw, 34vh, 260px) !important;
    max-width: min(88vw, 34vh, 260px) !important;
    max-height: min(88vw, 34vh, 260px) !important;
    min-width: 200px !important;
    min-height: 200px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 4px auto 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    place-items: center !important;
    display: grid !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker) #gameHolder canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker) #gameHolder .p5Canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--pro):not(.studio--unitylab) .studio__blocks,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--tinker) .studio__blocks {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: min(28dvh, 220px) !important;
    min-height: 150px !important;
    max-height: min(32dvh, 240px) !important;
    overflow: hidden !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .blocklyToolboxDiv {
    width: 78px !important;
    max-width: 30% !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .blocklyTreeLabel {
    font-size: 9px !important;
    white-space: normal !important;
    line-height: 1.1 !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .blocklySvg,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .injectionDiv {
    max-width: 100% !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--unitylab):not(.studio--pro) .studio__actions,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--unitylab):not(.studio--pro) .studio__actions,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--unitylab):not(.studio--pro) .studio__actions {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 40 !important;
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr !important;
    gap: 6px !important;
    padding: 4px 8px 6px !important;
    margin: 0 !important;
    background: rgba(8, 14, 28, 0.96) !important;
    box-sizing: border-box !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker) #runBtn {
    grid-column: auto !important;
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 6px 8px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker) .studio__actions .btn {
    min-height: 36px !important;
    font-size: 12px !important;
    padding: 6px 6px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--unitylab) .studio__msg,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .studio:not(.studio--gamedev):not(.studio--tinker):not(.studio--unitylab) .studio__msg {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 2px 10px 8px !important;
    order: 4 !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .codepeek {
    max-width: 100% !important;
    overflow: auto !important;
  }

  /* U6 filtros / FX / cámara */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio.studio--tinker #gameHolder.studio__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .studio.studio--tinker #gameHolder.studio__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .studio.studio--tinker #gameHolder.studio__canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .filtview {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 6px 8px 12px !important;
    box-sizing: border-box !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .filtview__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__stage,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__three,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__map,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__stark {
    width: 100% !important;
    max-width: 100% !important;
    height: min(34vh, 260px) !important;
    min-height: 160px !important;
    max-height: min(36vh, 280px) !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__chips,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .filtview__chips {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__chip,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .filtview__chip,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__start {
    min-height: 44px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__pip {
    width: 72px !important;
    height: 54px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .fxlab__how {
    max-width: 100% !important;
    font-size: 13px !important;
  }

  /* U7–U10 GameDev: viewport + guía debajo + misiones con scroll */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .studio.studio--gamedev:not(.studio--unitylab) #gameHolder.studio__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal.lesson--lab .studio.studio--gamedev:not(.studio--unitylab) #gameHolder.studio__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal:has([data-panel="build"].is-active) .studio.studio--gamedev:not(.studio--unitylab) #gameHolder.studio__canvas {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 6px 8px 12px !important;
    gap: 8px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__hero {
    padding: 0 2px !important;
    gap: 6px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__title { font-size: 16px !important; }
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__sub { font-size: 11px !important; }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__stage-card {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__viewport,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__canvas--webgl {
    min-height: 180px !important;
    height: min(32vh, 240px) !important;
    max-height: min(34vh, 260px) !important;
    width: 100% !important;
    order: 1 !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    order: 2 !important;
    padding: 6px 4px 4px !important;
    box-sizing: border-box !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost .plcoach { width: 100% !important; filter: none; }
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost .plcoach__bubble {
    max-height: none !important;
    padding: 8px 10px 7px !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost .plcoach__tail {
    top: -6px !important;
    bottom: auto !important;
    left: 22px !important;
    transform: rotate(-135deg) !important;
  }
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost .plcoach__face {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
  }
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost .plcoach__title { font-size: 12px !important; white-space: normal !important; }
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost .plcoach__line { font-size: 11px !important; min-height: 0 !important; max-height: 4.8em !important; }
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__coachhost .plcoach__next { min-height: 34px !important; padding: 6px 12px !important; }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__panel {
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__code {
    min-height: 64px !important;
    max-height: 110px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__chip,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .gdlab__btn {
    min-height: 44px !important;
  }

  /* U11 NinjaLab */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plnj {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plnj__top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plnj__hud {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    font-size: 12px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plnj__stage {
    min-height: min(28vh, 200px) !important;
    max-height: min(34vh, 250px) !important;
    height: min(32vh, 230px) !important;
    overflow: hidden !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plnj__stage canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plnj__pad {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 8 !important;
    padding: 8px 8px 10px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plnj__pad button {
    min-width: 64px !important;
    min-height: 48px !important;
  }

  /* U12 KidPlay */
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plkp {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plkp__stage {
    min-height: 0 !important;
    margin: 0 8px 8px !important;
    padding: 10px !important;
    overflow: auto !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plkp__chip,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plkp__btn {
    min-height: 44px !important;
    max-width: 100% !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .plkp__drop {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .scratchlab {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .scratchlab__grid {
    display: flex !important;
    flex-direction: column !important;
  }

  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .scratchlab__canvas,
  html.pl-mobile body.pl-kids[data-world="code"] #lessonModal .scratchlab__stage-card {
    min-height: min(28vh, 200px) !important;
    max-height: min(34vh, 250px) !important;
    height: min(32vh, 230px) !important;
  }

  /* —— Robot —— */
  body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio {
    grid-template-columns: 1fr !important;
  }

  body.pl-kids[data-world="robot"] #lessonModal.lesson--lab .studio__blocks {
    height: min(36vh, 280px) !important;
  }

  body.pl-kids[data-world="robot"] #lessonModal.lesson--lab #gameHolder,
  body.pl-kids[data-world="robot"] .studio__canvas {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* —— Doblaje —— */
  .dublab,
  .dublab__grid {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dublab__panel,
  .dublab__stage,
  .dublab canvas,
  .dublab video {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.pl-kids[data-world="dub"] .mapwrap--dub .node__btn {
    width: 72px !important;
    height: 84px !important;
    font-size: 30px !important;
  }

  /* —— Mentes / FX / filtros —— */
  .fxlab,
  .filtview,
  .spectra,
  .plvb,
  .plvb__layout {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .plvb__layout {
    display: flex !important;
    flex-direction: column !important;
  }

  #lessonModal.lesson--lab .studio.studio--tinker #gameHolder,
  #lessonModal.lesson--lab .studio.studio--fxlab #gameHolder,
  #lessonModal.lesson--lab .studio.studio--quest #gameHolder {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  video,
  canvas {
    max-width: 100%;
  }

  /* Quest maze canvas */
  #lessonModal.lesson--lab .studio.studio--quest .questview__stage,
  #lessonModal.lesson--lab .studio.studio--quest .questview__stage canvas {
    max-width: 100% !important;
    max-height: min(38vh, 280px) !important;
  }

  /* Dock / safe area */
  #lessonModal.lesson--lab .plux-dock,
  #lessonModal:has([data-panel="build"].is-active) .plux-dock {
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }

  /* Lesson lab panel scroll */
  #lessonModal.lesson--lab .ltab-panel[data-panel="build"],
  #lessonModal:has([data-panel="build"].is-active) .ltab-panel[data-panel="build"] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 860px) {
  /* —— Maya Autodesk (mundo propio, no Animación) —— */
  html.pl-mobile body.pl-kids[data-world="maya"] #lessonModal .studio.studio--gamedev #gameHolder.studio__canvas,
  html.pl-mobile body.pl-kids[data-world="maya"] #lessonModal.lesson--lab .studio.studio--gamedev #gameHolder.studio__canvas {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.pl-mobile body.pl-kids[data-world="maya"] #lessonModal .mayalab {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  html.pl-mobile body.pl-kids[data-world="maya"] #lessonModal .mayalab__viewport {
    min-height: min(32vh, 240px) !important;
    height: min(34vh, 260px) !important;
    max-height: min(36vh, 280px) !important;
  }

  html.pl-mobile body.pl-kids[data-world="maya"] #lessonModal .mayalab__body {
    min-height: 0 !important;
  }
}

@media (max-width: 860px) and (max-height: 700px) {
  .unitylab #emmet {
    transform: scale(0.58) !important;
  }

  .unitylab .container-host {
    transform: scale(0.82) !important;
  }

  html.pl-mobile .animlab__viewport,
  html.pl-mobile #lessonModal .animlab__viewport,
  .animlab__viewport,
  #lessonModal.lesson--lab .animlab__viewport {
    min-height: min(30vh, 240px) !important;
    height: min(32vh, 260px) !important;
    max-height: min(32vh, 260px) !important;
  }

  html.pl-mobile .animlab-rick-root,
  .animlab-rick-root,
  #lessonModal.lesson--lab .animlab-rick-root {
    transform: scale(0.50) !important;
    transform-origin: 50% 60% !important;
  }
}

@media (max-width: 400px) {
  .unitylab #emmet {
    transform: scale(0.62) !important;
  }

  html.pl-mobile .animlab-rick-root,
  .animlab-rick-root,
  #lessonModal.lesson--lab .animlab-rick-root {
    transform: scale(0.5) !important;
    transform-origin: 50% 60% !important;
  }
}