/* LA CÁSCARA DE LOS JUEGOS DE FRASES EN 3D (incendio, pizza, huerto).
 *
 * Desde el 27/10/2026, a petición del usuario: «que ocupe todo el área de la
 * pantalla, con el micro y la caja de texto flotando», y que se vea bien en el
 * ordenador, el iPad y el móvil. Es el estilo del resto de juegos —el título en
 * Bree Serif arriba al centro, el medallón de volver arriba a la izquierda (lo
 * pone juego-comun.js), el micro grande y redondo abajo— con la escena 3D
 * haciendo de paisaje.
 *
 *   · LA ESCENA ES FIJA A TODA LA PANTALLA (`position: fixed; inset: 0`) y no
 *     `100dvh`: el Safari 15 del iPad no tiene `dvh`, y `100vh` en iOS incluye
 *     la barra del navegador y corta el micro. El lienzo lo dimensiona el motor
 *     con un ResizeObserver, y la cámara abre el ángulo en pantallas estrechas
 *     (mundo.js, `fitCamera`) para que en un móvil de pie no se salga la escena.
 *   · 🔊 Y ↺ VAN ARRIBA A LA DERECHA, los dos: la esquina de la izquierda es del
 *     medallón de volver, que está por encima (z-index 900).
 *   · LA BARRA DE ABAJO es crema translúcida y flota sobre la escena; respeta
 *     la zona segura de los móviles con muesca.
 *   · Lo que entendió Jev y la lista de frases son del banco de pruebas: sólo
 *     con ?debug=1 (la clase la pone game.js).
 */
* { box-sizing: border-box; }
:root { color-scheme: only light; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Nunito', system-ui, sans-serif; color: #3b2f16; background: #a9dcf5;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}

#stage { position: fixed; inset: 0; overflow: hidden; background: #a9dcf5; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }

/* El título, como en los demás juegos: Bree Serif con halo claro, porque debajo
   hay cielo y a veces tejado. */
h1 {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 3; margin: 0; pointer-events: none; white-space: nowrap;
  font: 400 clamp(22px, 4.2vw, 38px) 'Bree Serif', Georgia, serif; color: #3b2f16;
  text-shadow: 0 0 3px #fffdf7, 0 0 3px #fffdf7, 0 0 10px rgba(255,253,247,.9), 0 2px 6px rgba(255,253,247,.8);
}
h1 #title-emoji { font-size: .8em; }

#verdict {
  position: fixed; top: calc(clamp(22px, 4.2vw, 38px) + 26px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 3; max-width: calc(100% - 140px); text-align: center; pointer-events: none;
  font-size: clamp(16px, 2.4vw, 22px); font-weight: 900;
  text-shadow: 0 0 3px #fffdf7, 0 0 3px #fffdf7, 0 0 10px rgba(255,253,247,.9);
}
#verdict:empty { display: none; }

/* 🔊 y ↺: arriba a la derecha (ui.js los mete en #stage con .corner). */
html #stage .corner {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  font-size: 24px; line-height: 1; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,253,247,.88); color: #3b2f16; box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
/* Con `html` delante para ganar al CSS que inyecta ui.js (que los pone uno a
   cada lado, y el de la izquierda caía encima del medallón de volver). */
html #stage .corner.right { right: calc(12px + env(safe-area-inset-right)); left: auto; }
html #stage .corner.left  { right: calc(74px + env(safe-area-inset-right)); left: auto; }

/* ── La barra de abajo: el micro y lo que se oye (o la caja de escribir). ── */
#voice {
  position: fixed; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: min(720px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px;
  border-radius: 999px; background: rgba(255,253,247,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
#mic {
  flex: none; width: clamp(64px, 9vw, 84px); height: clamp(64px, 9vw, 84px); border-radius: 50%; padding: 0; border: 0;
  font-size: clamp(28px, 4vw, 38px); line-height: 1; background: #d9cfb8; position: relative; cursor: pointer;
  transition: background .2s, transform .15s;
}
#mic:active { transform: scale(.94); }
#mic.listening::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 4px solid #7fcf6a; animation: ring 1.4s ease-out infinite;
}
#mic.hearing::after { animation-duration: .6s; border-color: #3f9a2b; }
#mic.off-perm { background: #e8b4a8; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
#heard {
  flex: 1; min-width: 0; min-height: 48px; font-size: clamp(18px, 2.6vw, 24px); line-height: 1.25;
  padding: 6px 8px; display: flex; align-items: center; overflow: hidden;
}
#heard .interim { color: #84704c; }
#heard .hint { color: #9a8a66; font-size: clamp(15px, 2vw, 18px); }

/* La caja de escribir (?teclado=1, o sin Web Speech): flota encima de la barra. */
form {
  position: fixed; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom) + clamp(64px, 9vw, 84px) + 28px);
  width: min(720px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px;
}
form[hidden] { display: none; }
#msg {
  flex: 1; min-width: 0; font-size: 20px; padding: 12px 16px; border-radius: 999px;
  border: 2px solid #c9b88f; background: rgba(255,253,247,.94); color: inherit;
  -webkit-user-select: text; user-select: text;
}
#msg:focus { outline: 3px solid #e3a33b; border-color: transparent; }
.typing { display: none; align-items: center; gap: 8px; color: #3b2f16; font-size: 15px; white-space: nowrap;
  background: rgba(255,253,247,.88); padding: 6px 10px; border-radius: 999px; }
.typing.on { display: flex; }
.typing .spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #e0d5bb; border-top-color: #e3a33b; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#reset:not(.corner) { display: none; }

/* El ▶ de la introducción tapa la escena entera, como antes. */
.intro-veil { position: fixed !important; border-radius: 0 !important; z-index: 5; }

/* ── Sólo con ?debug=1: lo que entendió Jev y la lista de frases. ── */
#panel, #history { display: none; }
html.debug #panel {
  display: block; position: fixed; z-index: 3; left: 12px; top: 80px; width: min(420px, calc(100% - 24px));
  font: 12px ui-monospace, monospace; background: rgba(255,253,247,.92); border-radius: 10px; padding: 8px 10px;
}
html.debug #panel[hidden] { display: none; }
#panel .act { font-size: 14px; margin: 2px 0; }
#panel .act b { color: #b0521c; }
#panel .raw { color: #84704c; margin-top: 6px; line-height: 1.5; }
#panel .neg { color: #b02a2a; font-weight: 700; }

/* Móvil de pie: el título más pequeño y lejos de los botones de las esquinas. */
@media (max-width: 520px) {
  h1 { top: calc(74px + env(safe-area-inset-top)); font-size: 24px; }
  #verdict { top: calc(108px + env(safe-area-inset-top)); max-width: calc(100% - 24px); }
}