/* Anteprima (Player): intestazione, area con lettera-box, gizmo SVG, gizmo di ritaglio, controlli sotto il canvas.
   Le variabili del tema stanno in app.css (§7.1 del contratto). */

#anteprima {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* --- intestazione «Player» ------------------------------------------------ */

.ant-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 36px;
  padding: 0 8px 0 12px;
  flex: none;
  border-bottom: 1px solid var(--bordo);
}

.ant-titolo {
  font-size: var(--t-scheda);
  font-weight: 600;
  color: var(--testo);
}

.ant-testa-destra {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ant-testa-destra .controllo { margin: 0; }

/* --- area del video ------------------------------------------------------- */

.ant-area {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  overflow: auto;
  background: #0E0E0E;
  position: relative;
}

/* la scena ha le misure CSS del rettangolo della tela: centrata se entra, scorrevole se no (zoom 100 %) */
.ant-scena {
  position: relative;
  flex: none;
  margin: auto;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ant-scena[hidden] { display: none; }

.ant-canvas,
.ant-gizmo,
.ant-ritaglio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ant-canvas { display: block; }

.ant-gizmo,
.ant-ritaglio {
  overflow: visible;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.ant-gizmo[hidden],
.ant-ritaglio[hidden] { display: none; }

.ant-gizmo [data-maniglia],
.ant-ritaglio [data-lato] { pointer-events: all; }

/* rettangolo della clip selezionata */
.ant-gizmo-rett {
  fill: transparent;
  stroke: #FFFFFF;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: move;
}

.ant-gizmo.bloccato .ant-gizmo-rett { cursor: default; }

.ant-gizmo-maniglia {
  fill: #FFFFFF;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 1;
}

.ant-gizmo-maniglia[data-maniglia="nw"],
.ant-gizmo-maniglia[data-maniglia="se"] { cursor: nwse-resize; }
.ant-gizmo-maniglia[data-maniglia="ne"],
.ant-gizmo-maniglia[data-maniglia="sw"] { cursor: nesw-resize; }
.ant-gizmo-maniglia[data-maniglia="n"],
.ant-gizmo-maniglia[data-maniglia="s"] { cursor: ns-resize; }
.ant-gizmo-maniglia[data-maniglia="e"],
.ant-gizmo-maniglia[data-maniglia="w"] { cursor: ew-resize; }

.ant-gizmo-asta {
  stroke: #FFFFFF;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ant-gizmo-rotazione {
  fill: #FFFFFF;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 1;
  cursor: grab;
}

.ant-gizmo.in-rotazione .ant-gizmo-rotazione { cursor: grabbing; }

.ant-gizmo-maniglia:hover,
.ant-gizmo-rotazione:hover { fill: var(--accento); }

/* guide d'allineamento (centro e bordi della tela) */
.ant-guida {
  stroke: var(--aggancio);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

/* etichetta dei gradi durante la rotazione */
.ant-gradi {
  position: absolute;
  transform: translate(-50%, 8px);
  padding: 2px 6px;
  border-radius: var(--r-campo);
  background: var(--rialzato);
  color: var(--testo);
  font-size: var(--t-tooltip);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}

.ant-gradi[hidden] { display: none; }

/* --- gizmo di ritaglio ----------------------------------------------------- */

.ant-ritaglio-velo {
  fill: rgba(0, 0, 0, 0.6);
  fill-rule: evenodd;
  pointer-events: none;
}

.ant-ritaglio-cornice {
  fill: transparent;
  stroke: #FFFFFF;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ant-ritaglio-esterno {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.ant-ritaglio-terzo {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ant-ritaglio-maniglia {
  fill: #FFFFFF;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 1;
}

.ant-ritaglio-maniglia:hover { fill: var(--accento); }

.ant-ritaglio-maniglia[data-lato="n"],
.ant-ritaglio-maniglia[data-lato="s"] { cursor: ns-resize; }
.ant-ritaglio-maniglia[data-lato="e"],
.ant-ritaglio-maniglia[data-lato="w"] { cursor: ew-resize; }
.ant-ritaglio-maniglia[data-lato="nw"],
.ant-ritaglio-maniglia[data-lato="se"] { cursor: nwse-resize; }
.ant-ritaglio-maniglia[data-lato="ne"],
.ant-ritaglio-maniglia[data-lato="sw"] { cursor: nesw-resize; }

/* barra ✓ ✗ Ripristina sotto il rettangolo di ritaglio */
.ant-ritaglio-azioni {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--r-pulsante);
  background: var(--rialzato);
  box-shadow: var(--ombra-menu);
  white-space: nowrap;
}

.ant-ritaglio-azioni[hidden] { display: none; }

.ant-ritaglio-azioni .ant-ritaglio-etichetta {
  font-size: var(--t-corpo);
  color: var(--testo-2);
  margin-right: 4px;
}

.ant-ritaglio-azioni .btn-icona.conferma { color: var(--ok); }
.ant-ritaglio-azioni .btn-icona.annulla { color: var(--errore); }

/* --- controlli sotto il canvas ---------------------------------------------- */

.ant-controlli {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  flex: none;
  border-top: 1px solid var(--bordo);
}

.ant-tempo {
  font-size: var(--t-corpo);
  font-variant-numeric: tabular-nums;
  color: var(--testo-2);
  white-space: nowrap;
}

.ant-tempo-corrente { color: var(--testo); }

.ant-controlli-centro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ant-controlli-destra {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.ant-controlli-destra .controllo { margin: 0; }

.ant-riproduci.btn-icona { width: 32px; height: 32px; }

.ant-controlli .btn-icona:focus-visible,
.ant-testa .btn-icona:focus-visible,
.ant-ritaglio-azioni .btn-icona:focus-visible,
.ant-ritaglio-azioni .btn:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
}

/* --- schermo intero ---------------------------------------------------------- */

#anteprima:fullscreen {
  background: #000;
  border-radius: 0;
}

#anteprima:fullscreen .ant-testa { display: none; }

#anteprima:fullscreen .ant-area { background: #000; }

#anteprima:fullscreen .ant-controlli {
  background: rgba(18, 18, 18, 0.9);
  border-top-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ant-gizmo *, .ant-ritaglio * { transition: none; }
}