/* Despiece: un juguete en el cielo. Colores vivos, volúmenes gordos y letras redondas. */

@font-face { font-family: "Lilita One"; src: url("fuentes/LilitaOne-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fuentes/Nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  color-scheme: light;

  --cielo-alto: #6cc6f4;
  --cielo-medio: #9bdcf8;
  --cielo-bajo: #d3f1fc;
  --tinta: #1d4468;
  --tinta-2: #3d6484;
  --blanco: #ffffff;
  --superficie: #f6fbff;
  --borde: #bfdcef;

  --madera: #c98745;
  --madera-clara: #e0a55e;
  --madera-oscura: #8a5426;
  --madera-texto: #ffe27a;

  --verde: #55cc37;
  --verde-oscuro: #2e9a1f;
  --azul: #3b8df2;
  --azul-oscuro: #1f62c4;
  --amarillo: #ffcf33;
  --amarillo-oscuro: #d99a0b;
  --rojo: #ee4a48;

  --letra-titulo: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --letra-texto: "Nunito", system-ui, sans-serif;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;

  --hueco-caja: 21px;
  --hueco-bandeja: 38px;
  --alto-nav: 68px;
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
/* Una app no se selecciona como un texto, ni saca burbujas al mantener pulsado. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
img, svg { -webkit-user-drag: none; }
.lamina-dibujo { pointer-events: none; }
::selection { background: var(--azul); color: var(--blanco); }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cielo-medio);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1, h2, p { margin: 0; }

#contenedor {
  position: fixed;
  inset: 0 0 calc(var(--alto-nav) + var(--seguro-abajo)) 0;
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
}
body.sin-navegacion #contenedor { inset: 0; }
body.sin-navegacion .navegacion-principal { display: none; }

.carril-pantallas { display: flex; height: 100%; width: 100%; will-change: transform; }
.carril-pantallas.en-movimiento { transition: transform 380ms var(--curva); }

.pantalla {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  padding-top: var(--seguro-arriba);
  background:
    radial-gradient(60% 18% at 15% 62%, rgb(255 255 255 / 0.55), transparent 70%),
    radial-gradient(50% 14% at 88% 34%, rgb(255 255 255 / 0.5), transparent 70%),
    linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo-medio) 48%, var(--cielo-bajo) 100%);
}

/* ---- Tablón de madera ------------------------------------------------------------------ */
.tablon {
  position: relative;
  display: block;
  padding: var(--e-2) var(--e-5) calc(var(--e-2) + 2px);
  border-radius: 10px;
  background:
    repeating-linear-gradient(178deg, rgb(255 255 255 / 0.06) 0 3px, transparent 3px 9px, rgb(90 45 10 / 0.07) 9px 11px, transparent 11px 19px),
    linear-gradient(180deg, var(--madera-clara), var(--madera));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.32), inset 0 -3px 0 rgb(90 45 10 / 0.3), 0 4px 0 var(--madera-oscura), 0 7px 12px rgb(20 70 120 / 0.25);
  color: var(--madera-texto);
  font: 400 2.25rem/1.05 var(--letra-titulo);
  letter-spacing: 0.01em;
  text-align: center;
}
.tablon span { position: relative; text-shadow: 0 3px 0 var(--madera-oscura), 0 0 1px var(--madera-oscura); }
.tablon::before, .tablon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #e7ad2c 60%, #9b6a10);
  box-shadow: 0 1px 0 var(--madera-oscura);
}
.tablon::before { left: 9px; }
.tablon::after { right: 9px; }

/* ---- Botones de juego: gordos, con canto inferior que se hunde al pulsar -------------------- */
.boton {
  --cara: var(--blanco);
  --canto: var(--borde);
  --letra: var(--tinta);
  appearance: none;
  min-height: 46px;
  padding: var(--e-2) var(--e-4);
  border: 0;
  border-radius: 14px;
  background: var(--cara);
  box-shadow: 0 4px 0 var(--canto), 0 7px 10px rgb(20 70 120 / 0.2);
  color: var(--letra);
  font: 400 1.0625rem/1.1 var(--letra-titulo);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 90ms, box-shadow 90ms, filter 120ms;
}
.boton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--canto), 0 2px 4px rgb(20 70 120 / 0.2); }
.boton:disabled { filter: saturate(0.25); opacity: 0.6; cursor: default; }
.boton-primario, .boton-jugar { --cara: linear-gradient(180deg, #7ce45a, var(--verde)); --canto: var(--verde-oscuro); --letra: var(--blanco); }
.boton-primario, .boton-jugar, .boton-azul, .boton-amarillo { text-shadow: 0 2px 0 rgb(0 0 0 / 0.18); }
.boton-azul { --cara: linear-gradient(180deg, #66abf8, var(--azul)); --canto: var(--azul-oscuro); --letra: var(--blanco); }
.boton-amarillo { --cara: linear-gradient(180deg, #ffe066, var(--amarillo)); --canto: var(--amarillo-oscuro); --letra: #6b4300; text-shadow: 0 1px 0 rgb(255 255 255 / 0.5); }
.boton-peligro { --cara: var(--blanco); --canto: #e9b0af; --letra: #c62b2a; }
.boton-jugar { min-height: 62px; font-size: 1.625rem; border-radius: 18px; animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.03); } }

.boton-redondo {
  appearance: none;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e4f3fc);
  box-shadow: 0 3px 0 var(--borde), 0 5px 8px rgb(20 70 120 / 0.22);
  color: var(--azul-oscuro);
  cursor: pointer;
}
.boton-redondo svg { display: block; width: 100%; height: 100%; }
.boton-redondo:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--borde); }
.boton-redondo[aria-pressed="true"] { background: var(--azul); color: var(--blanco); box-shadow: 0 3px 0 var(--azul-oscuro); }
:focus-visible { outline: 3px solid var(--amarillo-oscuro); outline-offset: 2px; }

/* ---- Navegación ----------------------------------------------------------------------------- */
.navegacion-principal {
  position: fixed;
  inset: auto 0 0 0;
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  height: calc(var(--alto-nav) + var(--seguro-abajo));
  padding: var(--e-1) var(--e-2) calc(var(--e-1) + var(--seguro-abajo));
  background: linear-gradient(180deg, var(--madera-clara), var(--madera));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.3), 0 -4px 12px rgb(20 70 120 / 0.2);
}
.navegacion-principal button {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff4d6;
  font: 400 0.8125rem/1.1 var(--letra-titulo);
  letter-spacing: 0.02em;
  cursor: pointer;
  text-shadow: 0 1px 0 var(--madera-oscura);
}
.navegacion-principal svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 0 var(--madera-oscura)); }
.navegacion-principal .activo { background: linear-gradient(180deg, #ffe272, var(--amarillo)); color: #6b4300; text-shadow: none; box-shadow: 0 3px 0 var(--amarillo-oscuro); }
.navegacion-principal .activo svg { filter: none; }

/* ---- Portada --------------------------------------------------------------------------------- */
.portada { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding: var(--e-4) var(--e-4) var(--e-5); gap: var(--e-2); }
.portada-cabecera { text-align: center; display: grid; gap: var(--e-3); justify-items: center; }
.portada h1 { font-size: clamp(2.75rem, 14vw, 4rem); padding-inline: 32px; transform: rotate(-1.5deg); }
.portada-lema { max-width: 30ch; color: var(--tinta); font-size: 1.0625rem; line-height: 1.3; text-wrap: balance; }
.portada-lienzo { position: relative; min-height: 0; }
.portada-lienzo canvas, .mesa-lienzo canvas, .banco-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.portada-pie { display: grid; }

/* ---- Niveles ----------------------------------------------------------------------------------- */
.indice, .ajustes, .banco { padding: var(--e-4); }
.indice-cabecera { display: grid; justify-items: center; gap: var(--e-2); margin-bottom: var(--e-4); text-align: center; }
.indice-cabecera .tablon { padding-inline: 44px; }
.indice-resumen { color: var(--tinta); font-size: 1rem; line-height: 1.3; text-wrap: balance; }
.capitulo { margin-bottom: var(--e-5); }
.capitulo h2 { font: 400 1.375rem/1.2 var(--letra-titulo); color: var(--blanco); text-shadow: 0 2px 0 var(--azul-oscuro); margin-bottom: var(--e-2); }
.capitulo-laminas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3) var(--e-2); }
.lamina {
  appearance: none;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: var(--e-1) var(--e-1) var(--e-2);
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #e4f3fc);
  box-shadow: 0 4px 0 var(--borde), 0 6px 8px rgb(20 70 120 / 0.18);
  color: var(--azul-oscuro);
  cursor: pointer;
}
.lamina:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--borde); }
.lamina-numero {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 13px;
  background: var(--azul);
  color: var(--blanco);
  font: 400 0.9375rem/1.25 var(--letra-titulo);
}
.lamina-dibujo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.lamina-nombre { font: 400 0.875rem/1.1 var(--letra-titulo); }
.lamina-estrellas { display: flex; min-height: 15px; }
.lamina-estrellas svg { width: 15px; height: 15px; display: block; }
.lamina.actual { background: linear-gradient(180deg, #ffe272, var(--amarillo)); box-shadow: 0 4px 0 var(--amarillo-oscuro), 0 6px 8px rgb(20 70 120 / 0.18); color: #6b4300; }
.lamina.cerrada { background: #d7e6f0; box-shadow: 0 4px 0 #a8c0d2; color: #6d889d; cursor: default; }
.lamina.cerrada .lamina-numero { background: #8ba4b8; }
.lamina.cerrada .lamina-dibujo { filter: grayscale(1) brightness(1.1) opacity(0.55); }

/* ---- Ajustes ------------------------------------------------------------------------------------ */
.seccion { margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: 16px; background: rgb(255 255 255 / 0.82); box-shadow: 0 4px 0 var(--borde); }
.seccion h2 { font: 400 1.125rem/1.3 var(--letra-titulo); color: var(--azul-oscuro); margin-bottom: var(--e-1); }
.interruptor { display: grid; grid-template-columns: 1fr 52px; gap: var(--e-3); align-items: center; padding: var(--e-2) 0; cursor: pointer; position: relative; }
.interruptor input { position: absolute; right: 0; opacity: 0; width: 52px; height: 30px; margin: 0; }
.interruptor-marca { position: relative; width: 52px; height: 30px; border-radius: 15px; background: #c3d4e1; box-shadow: inset 0 2px 3px rgb(20 70 120 / 0.25); transition: background-color 160ms; }
.interruptor-marca::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--blanco); box-shadow: 0 2px 3px rgb(20 70 120 / 0.35); transition: transform 180ms var(--rebote); }
.interruptor input:checked + .interruptor-marca { background: var(--verde); }
.interruptor input:checked + .interruptor-marca::after { transform: translateX(22px); }
.interruptor input:focus-visible + .interruptor-marca { outline: 3px solid var(--amarillo-oscuro); outline-offset: 2px; }
.interruptor-texto strong { display: block; font-weight: 800; font-size: 1.0625rem; line-height: 1.25; }
.interruptor-texto small { display: block; font-weight: 700; font-size: 0.8125rem; line-height: 1.3; color: var(--tinta-2); }
.nota-ajuste { font-size: 0.9375rem; line-height: 1.35; margin: var(--e-1) 0 var(--e-3); }

/* ---- Banco de pruebas -------------------------------------------------------------------------- */
.banco-lienzo { position: relative; height: 240px; border-radius: 16px; overflow: hidden; background: rgb(255 255 255 / 0.35); margin-bottom: var(--e-4); }
#banco-inspector .inspector { position: static; max-height: 300px; margin-bottom: var(--e-4); }
.lista-datos { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; line-height: 1.35; }
.lista-datos li { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-1) 0; border-bottom: 1px solid var(--borde); }
.lista-datos li:last-child { border-bottom: 0; }

/* ---- Componentes del framework: los mismos nombres de clase que las plantillas de clase -------- */
.kit { padding: var(--e-4); }
.card { display: grid; gap: var(--e-3); margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4) var(--e-4); border-radius: 16px; background: rgb(255 255 255 / 0.88); box-shadow: 0 4px 0 var(--borde); line-height: 1.35; }
.pantalla > .card { margin: var(--e-4); }
.card h2 { font: 400 1.25rem/1.2 var(--letra-titulo); color: var(--azul-oscuro); }
.card code, .indice-resumen code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
.ui-formulario { display: grid; gap: var(--e-3); }
.ui-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.ui-menu { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ui-campo { display: grid; gap: var(--e-1); font-size: 0.875rem; font-weight: 800; }
.ui-campo input, .ui-campo select, .ui-campo textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--tinta);
  font: 700 1rem/1.3 var(--letra-texto);
}
.ui-campo input:focus, .ui-campo select:focus, .ui-campo textarea:focus { outline: 0; border-color: var(--azul); }
.ui-campo textarea { min-height: 80px; resize: vertical; }
.ui-check { display: flex; align-items: center; gap: var(--e-2); min-height: 44px; font-size: 0.9375rem; }
.ui-check input { width: 22px; height: 22px; accent-color: var(--verde); }
.ui-boton, button[type="submit"]:not(.boton) { min-height: 46px; padding: var(--e-2) var(--e-4); border: 0; border-radius: 14px; background: linear-gradient(180deg, #7ce45a, var(--verde)); box-shadow: 0 4px 0 var(--verde-oscuro); color: var(--blanco); font: 400 1.0625rem/1.1 var(--letra-titulo); cursor: pointer; }
.badge { display: inline-block; padding: 2px var(--e-3); border-radius: 999px; background: var(--azul); color: var(--blanco); font-size: 0.8125rem; font-weight: 800; }
.ui-lista { margin: 0; padding-left: var(--e-5); line-height: 1.4; }
.ui-tabla-scroll { overflow-x: auto; }
.ui-tabla-scroll table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ui-tabla-scroll th, .ui-tabla-scroll td { padding: var(--e-2); border-bottom: 1px solid var(--borde); text-align: left; }
.ui-tabla-scroll th { color: var(--azul-oscuro); font-weight: 800; }

/* ---- La mesa de juego ------------------------------------------------------------------------- */
.mesa {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100%;
  padding: var(--e-2) calc(var(--e-3) + var(--seguro-der)) calc(var(--e-3) + var(--seguro-abajo)) calc(var(--e-3) + var(--seguro-izq));
  gap: var(--e-2);
  touch-action: none;
}
.mesa-rotulo { display: flex; align-items: center; gap: var(--e-2); }
.mesa-titulo { flex: 1; min-width: 0; display: grid; justify-items: center; text-align: center; }
.mesa-numero { font: 400 1.5rem/1.1 var(--letra-titulo); color: var(--blanco); text-shadow: 0 2px 0 var(--azul-oscuro), 0 3px 4px rgb(20 70 120 / 0.3); }
.mesa-progreso { font-size: 0.8125rem; font-weight: 800; color: var(--tinta); line-height: 1.2; }

/* Las cuatro cajas: juguetes con tres huecos en triángulo y dos orejas a los lados. */
.cajas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); padding-inline: var(--e-2); min-height: 74px; isolation: isolate; }
.ranura-caja { position: relative; min-width: 0; }
.caja {
  position: relative;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--c-claro), var(--c) 55%, var(--c-oscuro));
  box-shadow: inset 0 2px 1px rgb(255 255 255 / 0.55), inset 0 -3px 0 rgb(0 0 0 / 0.14), 0 4px 0 var(--c-oscuro), 0 7px 9px rgb(20 70 120 / 0.25);
  display: grid;
  place-items: center;
}
.caja::before, .caja::after {
  content: "";
  position: absolute;
  top: 34%;
  width: 7px;
  height: 32%;
  background: var(--c-oscuro);
  border-radius: 3px;
  z-index: -1;
}
.caja::before { left: -5px; }
.caja::after { right: -5px; }
.caja-huecos { display: grid; grid-template-columns: repeat(2, var(--hueco-caja)); gap: 3px 5px; justify-items: center; }
.caja-huecos .hueco:first-child { grid-column: 1 / -1; }
.hueco {
  position: relative;
  flex: none;
  display: block;
  border-radius: 50%;
  width: var(--hueco-caja);
  height: var(--hueco-caja);
  background: var(--c-hondo, #5a6d7e);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.45), 0 1px 0 rgb(255 255 255 / 0.35);
}
.token { position: absolute; inset: -2px; display: block; will-change: transform; }
.token svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3)); }
.caja.entra { animation: caja-entra 420ms var(--rebote) both; animation-delay: 320ms; }
.caja.saliente { position: absolute; inset: 0; z-index: 3; animation: caja-sale 300ms 420ms ease-in forwards; }
.caja.saliente .caja-huecos { animation: caja-gira 300ms 120ms var(--rebote); }
@keyframes caja-entra { from { transform: translateY(-90px) scale(0.8); } }
@keyframes caja-sale { to { transform: translateY(-120px) scale(0.75); opacity: 0; } }
@keyframes caja-gira { 50% { transform: scale(1.18); } }

/* Los cinco huecos de espera. */
.bandeja { display: block; }
.bandeja-huecos { display: flex; justify-content: center; gap: var(--e-3); }
.bandeja .hueco {
  width: var(--hueco-bandeja);
  height: var(--hueco-bandeja);
  background: radial-gradient(circle at 50% 60%, #8b9aa8, #6d7d8c 70%);
  box-shadow: inset 0 3px 4px rgb(0 0 0 / 0.4), 0 2px 0 rgb(255 255 255 / 0.7);
  transition: box-shadow 200ms;
}
.bandeja.casi .hueco { box-shadow: inset 0 3px 4px rgb(0 0 0 / 0.4), 0 0 0 3px var(--rojo); }
.bandeja.llena .hueco { box-shadow: inset 0 3px 4px rgb(0 0 0 / 0.4), 0 0 0 3px var(--rojo), 0 0 12px var(--rojo); }

.mesa-lienzo { position: relative; min-height: 0; overflow: hidden; }
.mesa-nota {
  position: absolute;
  inset: auto var(--e-2) var(--e-1) var(--e-2);
  max-width: fit-content;
  margin-inline: auto;
  padding: var(--e-1) var(--e-3);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.92);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--tinta);
  pointer-events: none;
  text-wrap: balance;
  box-shadow: 0 2px 6px rgb(20 70 120 / 0.2);
}
.mesa-nota:empty { display: none; }
.mano { position: absolute; width: 58px; height: 58px; margin: -6px 0 0 -16px; pointer-events: none; animation: mano-toca 1.1s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgb(20 70 120 / 0.35)); transition: left 200ms, top 200ms; }
.mano[hidden] { display: none; }
@keyframes mano-toca { 50% { transform: translate(4px, 8px) scale(0.92); } }

.herramientas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.herramientas .boton { padding-inline: var(--e-1); font-size: 1rem; }

.mesa.atascada .herramientas { display: none; }
.mesa.terminada { grid-template-rows: auto minmax(0, 1fr) auto; }
.mesa.terminada .cajas, .mesa.terminada .bandeja, .mesa.terminada .herramientas { display: none; }

.veredicto {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4) var(--e-4);
  border-radius: 20px;
  background: var(--superficie);
  box-shadow: 0 5px 0 var(--borde), 0 10px 18px rgb(20 70 120 / 0.28);
  animation: veredicto-entra 420ms var(--rebote) both;
}
.veredicto[hidden] { display: none; }
.veredicto h2 { font: 400 1.75rem/1.1 var(--letra-titulo); color: var(--azul-oscuro); text-wrap: balance; }
.veredicto.perdida h2 { color: #c62b2a; }
.veredicto p { font-size: 0.9375rem; line-height: 1.3; color: var(--tinta-2); text-wrap: pretty; }
.veredicto-acciones { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e-2); margin-top: var(--e-1); }
.veredicto-sellos { display: flex; gap: var(--e-1); }
.veredicto-sellos[hidden] { display: none; }
.sello { width: 48px; height: 48px; }
.sello:nth-child(2) { transform: translateY(-5px); }
.sello svg { display: block; width: 100%; height: 100%; }
.sello.ganado { animation: sello-cae 420ms var(--rebote) both; animation-delay: calc(300ms + var(--orden) * 160ms); }
@keyframes veredicto-entra { from { transform: translateY(40px) scale(0.92); opacity: 0; } }
@keyframes sello-cae { from { transform: scale(2.4) rotate(-30deg); opacity: 0; } }

/* ---- Inspector de escena ----------------------------------------------------------------------- */
.inspector {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 6;
  max-height: 68%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--e-2);
  padding: var(--e-3);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: 0 4px 0 var(--borde);
  touch-action: pan-y;
}
.inspector[hidden] { display: none; }
.inspector h2 { font: 400 1.0625rem/1.2 var(--letra-titulo); color: var(--azul-oscuro); }
.inspector-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px var(--e-2); margin: 0; }
.inspector-cifras dt { font-size: 0.625rem; line-height: 1.2; color: var(--tinta-2); }
.inspector-cifras dd { margin: 0; font-weight: 800; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.inspector-arbol { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 90px; touch-action: pan-y; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.inspector-arbol li { padding: 3px 2px 3px calc(var(--nivel) * 9px + 2px); border-bottom: 1px solid var(--borde); cursor: pointer; }
.inspector-arbol li.oculto { opacity: 0.45; }
.inspector-arbol li.elegido { background: #fff3c4; }
.inspector-nombre { display: block; font-size: 0.75rem; font-weight: 700; word-break: break-all; }
.inspector-pos { display: inline-block; margin-right: var(--e-2); font-size: 0.625rem; line-height: 1.35; color: var(--tinta-2); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---- Fallos de carga -------------------------------------------------------------------------- */
.aviso-error { padding: 40px var(--e-4); display: grid; gap: var(--e-3); align-content: start; text-align: center; }
.aviso-error h1 { font: 400 2rem/1.1 var(--letra-titulo); color: var(--blanco); text-shadow: 0 2px 0 var(--azul-oscuro); }
.aviso-error p { font-size: 1rem; line-height: 1.35; }

/* ---- Móvil en horizontal: el juguete en el centro y los controles a los lados ------------------ */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --hueco-caja: 17px; --hueco-bandeja: 28px; --alto-nav: 54px; }
  #contenedor { max-width: none; }
  .navegacion-principal { max-width: none; padding-left: calc(var(--e-2) + var(--seguro-izq)); padding-right: calc(var(--e-2) + var(--seguro-der)); }
  .navegacion-principal button { flex-direction: row; gap: var(--e-2); }
  .navegacion-principal svg { width: 20px; height: 20px; }

  .mesa {
    grid-template-columns: minmax(196px, 28%) minmax(0, 1fr) 112px;
    grid-template-rows: auto auto auto;
    grid-template-areas: "rotulo lienzo herramientas" "cajas lienzo herramientas" "bandeja lienzo herramientas";
    align-content: center;
    gap: var(--e-2);
  }
  .mesa-rotulo { grid-area: rotulo; }
  .cajas { grid-area: cajas; grid-template-columns: repeat(2, 1fr); gap: var(--e-2) var(--e-3); padding-inline: var(--e-2); min-height: 0; }
  .caja { min-height: 54px; }
  .bandeja { grid-area: bandeja; }
  .bandeja-huecos { gap: var(--e-2); }
  .mesa-lienzo { grid-area: lienzo; height: 100%; align-self: stretch; }
  .herramientas { grid-area: herramientas; grid-template-columns: 1fr; align-self: center; }
  .boton-redondo { width: 44px; height: 44px; }
  .mesa-numero { font-size: 1.125rem; }
  .mesa-progreso { font-size: 0.6875rem; }
  .mesa { grid-template-rows: auto auto minmax(0, 1fr); }
  .mesa-nota { font-size: 0.8125rem; }

  .mesa.atascada { grid-template-columns: minmax(196px, 28%) minmax(0, 1fr) minmax(220px, 34%); }
  .mesa.atascada .veredicto { grid-area: herramientas; align-self: center; }
  .mesa.terminada { grid-template-columns: minmax(0, 1fr) minmax(250px, 40%); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "rotulo veredicto" "lienzo veredicto"; }
  .mesa.terminada .veredicto { grid-area: veredicto; align-self: center; }
  .veredicto { max-height: 100%; overflow-y: auto; padding: var(--e-2) var(--e-3) var(--e-3); gap: var(--e-1); }
  .veredicto h2 { font-size: 1.375rem; }
  .veredicto p { font-size: 0.8125rem; }
  .sello { width: 34px; height: 34px; }

  .portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto; grid-template-areas: "cabecera lienzo" "pie lienzo"; align-content: center; padding-block: var(--e-2); padding-left: calc(var(--e-4) + var(--seguro-izq)); padding-right: calc(var(--e-4) + var(--seguro-der)); }
  .portada-cabecera { grid-area: cabecera; align-self: end; }
  .portada h1 { font-size: 2.25rem; }
  .portada-lema { display: block; font-size: 0.875rem; }
  .portada-lienzo { grid-area: lienzo; height: 100%; }
  .portada-pie { grid-area: pie; align-self: start; }
  .boton-jugar { min-height: 50px; font-size: 1.25rem; }

  .indice, .ajustes, .banco, .kit { padding-left: calc(var(--e-4) + var(--seguro-izq)); padding-right: calc(var(--e-4) + var(--seguro-der)); }
  .indice-cabecera .tablon { font-size: 1.5rem; padding-block: var(--e-1); }
  .capitulo-laminas { grid-template-columns: repeat(6, 1fr); }
  .ajustes, .banco, .kit { max-width: 640px; margin-inline: auto; }
}

/* ---- Tablet en vertical: más sitio para el juguete ---------------------------------------------- */
@media (orientation: portrait) and (min-width: 700px) {
  :root { --hueco-caja: 28px; --hueco-bandeja: 48px; }
  body.sin-navegacion #contenedor { max-width: none; }
  .cajas, .bandeja, .herramientas, .veredicto, .mesa-rotulo { width: 100%; max-width: 560px; justify-self: center; }
  .cajas { min-height: 96px; }
}

@media (max-height: 660px) {
  :root { --hueco-caja: 18px; --hueco-bandeja: 32px; }
  .cajas { min-height: 62px; }
  .portada h1 { font-size: 2.5rem; }
  .portada-lema { display: none; }
  .mesa-numero { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}