/* ======================================================
   CANVAS PROVISIONAL - INICIO
   LABORATORIO DEL NUEVO SISTEMA DE PUZZLE

   Objetivo:
   - hacer visible la superficie Canvas;
   - comprobar su posición y dimensiones;
   - NO sustituye todavía al sistema SVG antiguo.
====================================================== */

/* ======================================================
   CONTENEDOR PRINCIPAL DEL SISTEMA CANVAS

   Ocupa las antiguas filas de:
   - construcción de la frase;
   - piezas disponibles.
====================================================== */

#puzzle-canvas-lab {
  grid-column: 2 / 4;
  grid-row: 2 / 4;

  position: relative;

  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;

  padding: 0;

  background: transparent;
  border: none;
}

#puzzle-canvas {
  display: block;

  width: 100%;
  height: 220px;

  background: white;
  border: 2px solid #b9a8df;
  border-radius: 10px;
}

/* ======================================================
   CANVAS TRANSPARENTE DE ARRASTRE

   Cubre toda la zona Canvas para permitir el movimiento
   de piezas entre el área inferior y la frase.
====================================================== */

#puzzle-drag-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  background: transparent;

  z-index: 10;
}

#sentence-zone-canvas-lab {
  display: flex;

  justify-content: center;
  align-items: center;

  width: 100%;
  min-height: 100px;

  margin-bottom: 12px;

  background: white;
  border: 2px solid #b9a8df;
  border-radius: 10px;

  box-sizing: border-box;

  text-align: center;
}

#sentence-zone-canvas-lab::before {
  content: attr(data-hint);

  font-family: "Teachers", sans-serif;
  font-size: 18px;
  font-weight: 600;

  color: #6f6485;
}

.canvas-sentence-slot {
  width: 120px;
  height: 64px;

  background: rgba(255, 255, 255, 0.35);
}

#check-button-canvas{
  min-width: 150px;
  padding: 14px 24px;

  border: none;
  border-radius: 12px;
  background: #31c950;
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.2s ease;
  cursor: pointer;
}

#check-button-canvas:hover {
  transform: scale(1.08);
}

/* ======================================================
   CANVAS PROVISIONAL - FIN
   LABORATORIO DEL NUEVO SISTEMA DE PUZZLE
====================================================== */