/* Motor Dictado · escuchar y escribir */
.dc {
  --dc-noche: #1B2A5C;
  --dc-noche-2: #121c40;
  --dc-oro: #F5C542;
  --dc-crema: #fff8e8;
  --dc-tinta: #2b2140;
  --dc-mal: #ff7a6b;
  --dc-bien: #6be3a0;
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  background: radial-gradient(120% 80% at 50% 0%, #26397a 0%, var(--dc-noche-2) 70%); color: #fff;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.dc * { box-sizing: border-box; }
.dc button { font-family: inherit; }
.dc [hidden] { display: none !important; }
.dc button:focus-visible { outline: 3px solid var(--dc-oro); outline-offset: 2px; }

/* Arriba: casa, Lumi y su globo, contador */
.dc-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--dc-noche); border-bottom: 1px solid rgba(245,197,66,.25); min-height: 72px; }
.dc-casa { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; display: grid; place-items: center; cursor: pointer; }
.dc-lumi { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(245,197,66,.55)); }
.dc-globo { flex: 1; min-width: 0; background: var(--dc-crema); color: var(--dc-tinta); border-radius: 18px; padding: 8px 12px; min-height: 52px; display: flex; align-items: center; font-weight: 800; font-size: clamp(15px, 4.2vw, 21px); line-height: 1.15; box-shadow: 0 4px 0 rgba(0,0,0,.18); position: relative; }
.dc-globo::before { content: ""; position: absolute; left: -7px; top: 50%; translate: 0 -50%; border: 8px solid transparent; border-right-color: var(--dc-crema); border-left: 0; }
.dc-globo:empty { visibility: hidden; }
.dc-contador { flex: 0 0 auto; font-weight: 800; color: var(--dc-oro); min-width: 44px; text-align: center; }

/* Medio: escuchar, dibujo, cajas y lo escrito */
.dc-medio { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.dc-oir { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dc-oir-b { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--dc-oro); color: var(--dc-tinta); font-weight: 800; font-size: 26px; padding: 10px 22px; min-height: 60px; cursor: pointer; box-shadow: 0 5px 0 #b98f1c; }
.dc-oir-b span { font-size: 18px; }
.dc-oir-b:active { translate: 0 3px; box-shadow: 0 2px 0 #b98f1c; }
.dc-lento { background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.dc-dibujo { width: clamp(90px, 26vw, 150px); height: clamp(90px, 26vw, 150px); object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.dc-cajas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; max-width: 760px; }
.dc-pal { display: flex; gap: 4px; }
.dc-caja { width: 30px; height: 36px; border-radius: 8px; border: 2px dashed rgba(255,255,255,.4); display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--dc-oro); }
.dc-caja.dada { border-style: solid; border-color: var(--dc-oro); }
.dc-pantalla { width: min(100%, 760px); min-height: 72px; border-radius: 20px; background: var(--dc-crema); color: var(--dc-tinta); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 10px 14px; font-size: clamp(28px, 8vw, 44px); font-weight: 800; letter-spacing: .04em; line-height: 1.15; box-shadow: inset 0 3px 0 rgba(0,0,0,.08), 0 5px 0 rgba(0,0,0,.2); word-break: break-word; transition: box-shadow .2s, background .2s; }
.dc-pantalla.bien { background: #e7fff1; box-shadow: 0 0 0 4px var(--dc-bien), 0 5px 0 rgba(0,0,0,.2); }
.dc-car.mal { color: #fff; background: var(--dc-mal); border-radius: 8px; padding: 0 3px; animation: dc-tiembla .35s ease; }
.dc-esp { min-width: .5em; }
.dc-vacio { opacity: .35; }
.dc-cursor { color: var(--dc-oro); animation: dc-parpadeo 1s steps(1) infinite; font-weight: 400; margin-left: 2px; }
.dc-respuesta { background: rgba(245,197,66,.16); border: 2px solid var(--dc-oro); border-radius: 16px; padding: 8px 14px; font-weight: 800; font-size: clamp(18px, 5vw, 26px); text-align: center; }

/* Teclado */
.dc-teclado { padding: 6px max(6px, env(safe-area-inset-left, 0px)) 4px; display: flex; flex-direction: column; gap: 6px; align-items: center; background: rgba(0,0,0,.18); }
.dc-fila { display: flex; gap: 5px; justify-content: center; width: 100%; max-width: 760px; }
.dc-tecla { flex: 1 1 0; min-width: 0; max-width: 64px; height: 48px; border: 0; border-radius: 12px; background: #fff; color: var(--dc-tinta); font-weight: 800; font-size: 22px; cursor: pointer; box-shadow: 0 4px 0 #b9b2c9; padding: 0; touch-action: manipulation; }
.dc-tecla:active { translate: 0 3px; box-shadow: 0 1px 0 #b9b2c9; }
.dc-abc .dc-tecla { height: 52px; font-size: 24px; max-width: 72px; }
.dc-acento { background: #fdf0c6; }
.dc-signo { background: #e3e8ff; max-width: 48px; }
.dc-mayus { background: #e3e8ff; max-width: 60px; }
.dc-mayus.on { background: var(--dc-oro); }
.dc-espacio { flex: 5 1 0; max-width: 360px; font-size: 16px; }
.dc-borrar { flex: 1.6 1 0; max-width: 110px; background: #ffd9d4; }

/* Abajo */
.dc-abajo { display: flex; gap: 10px; justify-content: center; padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px)); }
.dc-btn { border: 0; border-radius: 999px; font-weight: 800; font-size: 19px; padding: 10px 22px; min-height: 52px; cursor: pointer; }
.dc-oro { background: var(--dc-oro); color: var(--dc-tinta); box-shadow: 0 5px 0 #b98f1c; min-width: 150px; }
.dc-oro:disabled { background: rgba(255,255,255,.16); color: rgba(255,255,255,.55); box-shadow: none; cursor: default; }
.dc-sec { background: rgba(255,255,255,.14); color: #fff; }
.dc-sec:disabled { opacity: .4; }

/* Fin */
.dc-fin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; }
.dc-fin h2 { margin: 0; font-size: clamp(26px, 7vw, 38px); color: var(--dc-oro); }
.dc-fin p { margin: 0; font-size: 18px; opacity: .9; }
.dc-fin-lumi { width: 120px; height: 120px; object-fit: contain; }
.dc-stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.dc-stats div { background: rgba(255,255,255,.1); border-radius: 16px; padding: 10px 16px; min-width: 96px; display: flex; flex-direction: column; }
.dc-stats b { font-size: 26px; color: var(--dc-oro); }
.dc-stats span { font-size: 14px; opacity: .85; }
.dc-fin-botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

@keyframes dc-tiembla { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
@keyframes dc-parpadeo { 50% { opacity: 0; } }
@media (max-width: 380px) {
  .dc-tecla { height: 44px; font-size: 19px; border-radius: 10px; }
  .dc-abc .dc-tecla { height: 46px; font-size: 21px; }
  .dc-fila { gap: 4px; }
  .dc-oir-b { font-size: 22px; padding: 8px 16px; min-height: 52px; }
}
@media (max-height: 640px) { .dc-dibujo { width: 80px; height: 80px; } .dc-medio { gap: 8px; padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .dc * { animation: none !important; transition: none !important; } }
/* v1.23 · teléfono acostado (adentro de una Aventura): todo entra en 390 px de alto */
@media (max-height: 480px) {
  .dc-top { min-height: 54px; padding: 4px 10px; }
  .dc-casa { width: 44px; height: 44px; }
  .dc-medio { gap: 6px; padding: 6px; }
  .dc-dibujo { width: 52px; height: 52px; }
  .dc-oir { gap: 6px; } .dc-oir .dc-btn, .dc-oir-b { min-height: 36px; padding: 4px 12px; font-size: 15px; }
  .dc-teclado { gap: 3px; padding-top: 3px; }
  .dc-fila { gap: 3px; }
  .dc-tecla, .dc-abc .dc-tecla { height: 30px; font-size: 17px; border-radius: 8px; box-shadow: 0 2px 0 #b9b2c9; }
  .dc-abajo { padding: 4px 10px max(4px, env(safe-area-inset-bottom, 0px)); }
}
.dc-emoji { display: flex; align-items: center; justify-content: center; font-size: clamp(64px, 18vw, 110px); line-height: 1; }   /* JUEGOS MOTORES */
.dc-emoji[hidden] { display: none; }
@media (max-height: 640px) { .dc-emoji { font-size: 62px; } }
@media (max-height: 480px) { .dc-emoji { font-size: 42px; } }
/* v2.95 · Franco (7 nov, el cartero): en el teléfono acostado, «Escuchar» y «Más despacio» quedaban arriba, fuera de la pantalla
   (el centro no entraba y se cortaba por arriba). Acostado, el medio va en fila: los botones de oír, el dibujo y lo que escribe. */
.dc-medio { justify-content: safe center; }
@media (orientation: landscape) and (max-height: 560px) {
  .dc-medio { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; align-content: center; justify-content: stretch; column-gap: 12px; row-gap: 6px; }
  .dc-oir { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; flex-wrap: nowrap; }
  .dc-medio > .dc-dibujo, .dc-medio > .dc-emoji { grid-column: 2; grid-row: 1 / span 3; }
  .dc-medio > :not(.dc-oir):not(.dc-dibujo):not(.dc-emoji) { grid-column: 3; }
  .dc-pantalla { min-height: 52px; font-size: 30px; padding: 6px 12px; }
}