/* Trazar · motor Trazar (v1.52, sesión de los motores). Mismo aire que Recta, Dictado y Preguntas. */
.tz {
  --tz-noche: #1B2A5C;
  --tz-noche-2: #121c40;
  --tz-oro: #F5C542;
  --tz-crema: #fff8e8;
  --tz-tinta: #2b2140;
  --tz-bien: #7be0a1;
  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(--tz-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;
}
.tz * { box-sizing: border-box; }
.tz button { font-family: inherit; }
.tz [hidden] { display: none !important; }
.tz button:focus-visible { outline: 3px solid var(--tz-oro); outline-offset: 2px; }

/* Arriba: lo que hay que hacer */
.tz-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--tz-noche); border-bottom: 1px solid rgba(245,197,66,.25); min-height: 76px; z-index: 3; }
.sj-hay-casa .tz-top { padding-left: 80px; }   /* la casa común de salir-juego.js */
.tz-casa { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; cursor: pointer; }
.tz-globo { flex: 1; min-width: 0; background: var(--tz-crema); color: var(--tz-tinta); border-radius: 18px; padding: 6px 12px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.tz-globo-txt { font-weight: 800; font-size: clamp(18px, 4.6vw, 26px); line-height: 1.15; }
.tz-globo-sub { font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; opacity: .75; line-height: 1.25; }
.tz-globo-sub:empty { display: none; }
.tz-redondo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; }
.tz-contador { flex: 0 0 auto; font-weight: 800; color: var(--tz-oro); min-width: 34px; text-align: center; font-size: 16px; }

/* El medio: la palabra y la hoja */
.tz-medio { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 6px; gap: 8px; }
.tz-tira { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.tz-tira-letra { min-width: 40px; padding: 0 8px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  font-size: 28px; font-weight: 800; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); border: 2px solid rgba(255,255,255,.18); }
.tz-tira-letra.hecha { background: rgba(123,224,161,.18); border-color: var(--tz-bien); color: var(--tz-bien); }
.tz-tira-letra.ahora { background: var(--tz-oro); border-color: var(--tz-oro); color: var(--tz-tinta); }
.tz-mesa { flex: 1; min-height: 0; display: flex; gap: 10px; justify-content: center; align-items: stretch; }
.tz-hoja { position: relative; flex: 1; min-width: 0; max-width: 760px; min-height: 180px; border-radius: 24px; background: var(--tz-crema);
  box-shadow: 0 6px 0 rgba(0,0,0,.22), inset 0 0 0 3px rgba(43,33,64,.06); overflow: hidden; }
.tz-hoja.sacude { animation: tz-sacude .35s ease; }
.tz-lienzo { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.tz-modelo { flex: 0 0 clamp(90px, 20vw, 160px); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px;
  border-radius: 20px; background: rgba(255,248,232,.92); color: var(--tz-tinta); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.tz-modelo-lienzo { width: 100%; flex: 1; min-height: 80px; }
.tz-modelo figcaption { font-weight: 800; font-size: 16px; }

/* Abajo: los botones (grandes, para dedos chicos) */
.tz-abajo { display: flex; gap: 8px; justify-content: center; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
.tz-boton { min-height: 56px; min-width: 56px; padding: 0 18px; border-radius: 18px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1);
  color: #fff; font-size: 18px; font-weight: 800; cursor: pointer; }
.tz-boton.oro { background: var(--tz-oro); border-color: var(--tz-oro); color: var(--tz-tinta); box-shadow: 0 4px 0 #b88a00; min-width: 140px; }
.tz-boton:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* El final */
.tz-fin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(18,28,64,.82); z-index: 5; }
.tz-fin-caja { background: var(--tz-crema); color: var(--tz-tinta); border-radius: 24px; padding: 22px 26px; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.tz-fin-caja h2 { margin: 0 0 4px; font-size: 30px; color: #b07a00; }
.tz-fin-caja p { margin: 0; font-size: 18px; font-weight: 700; }

@keyframes tz-sacude { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .tz-hoja.sacude { animation: none; } }
@media (max-width: 520px) {
  .tz-mesa { flex-direction: column; }
  .tz-modelo { flex: 0 0 auto; flex-direction: row; height: 92px; }
  .tz-modelo-lienzo { min-height: 0; height: 100%; }
  .tz-abajo { display: grid; grid-template-columns: 1fr 1fr; }
  .tz-boton { padding: 0 10px; font-size: 17px; }
  .tz-boton.oro { grid-column: 1 / -1; min-width: 0; }
}
@media (max-height: 460px) {   /* teléfono acostado */
  .tz-top { min-height: 60px; padding: 4px 8px; }
  .tz-tira-letra { height: 36px; font-size: 22px; }
  .tz-boton { min-height: 48px; }
}