/* ============================================================
   CARAS DE LOS OBJETOS 3D
   ============================================================
   Cada cara lleva su brillo en --b, calculado de su normal. El color sale
   del color de la pieza multiplicado por ese brillo: asi al girar, las caras
   se iluminan y se apagan solas y el objeto gira DE VERDAD.
   ============================================================ */
.pg-3d{
  position:absolute;
  /* DOS SOMBRAS, Y LAS DOS A LO ALTO QUE ESTA LA PIEZA (--pgs).
       · la de CONTACTO: pegada, corta y oscura. Es la que POSA la cosa; sin
         ella no hay papel debajo, hay cristal.
       · la PROYECTADA: la larga y blanda. El difuminado va MENOR que el
         desplazamiento a proposito: si es mayor, la sombra envuelve la pieza
         por los dos lados y eso es un HALO — y un halo es exactamente lo que
         hace que una cosa parezca levitando sobre una caja de luz.
     La direccion viene en --sx/--sy, ya girada al reves que la pieza, para
     que todas las sombras del tablero caigan hacia el mismo sitio. */
  filter:
    /* la de CONTACTO: pegada, corta y muy oscura. Es la que POSA la cosa. */
    drop-shadow(calc(var(--pgs,4px) * .16 * var(--sx,.34))
                calc(var(--pgs,4px) * .16 * var(--sy,.94))
                calc(var(--pgs,4px) * .12) rgba(30,23,12,.72))
    /* la PROYECTADA: la que dice a que altura esta. */
    drop-shadow(calc(var(--pgs,4px) * .70 * var(--sx,.34))
                calc(var(--pgs,4px) * .70 * var(--sy,.94))
                calc(var(--pgs,4px) * .42) rgba(30,23,12,.30))
    /* y la de AMBIENTE: ancha y casi invisible. Sin ella la sombra se acaba
       en seco a un diametro y la pieza vuelve a despegarse; con ella el
       papel tarda en recuperarse, que es lo que hace una habitacion.
       Medido sobre papel limpio, el papel queda al: 46% pegado al lapiz,
       71% a 10 px, 85% a 24, 93% a 48, 96% a 66 y 99% a 120. Antes era
       66% pegado y 100% a 24 px: un tiznon de diez pixeles en un lapiz de
       cincuenta y siete — de ahi que pareciera pegatina. */
    drop-shadow(calc(var(--pgs,4px) * 1.5 * var(--sx,.34))
                calc(var(--pgs,4px) * 1.5 * var(--sy,.94))
                calc(var(--pgs,4px) * 1.0) rgba(30,23,12,.14));
}
.pg-3d .t3{ position:absolute; inset:0; }
.t3-cara{
  position:absolute;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.10), transparent 12%, transparent 88%, rgba(0,0,0,.14)),
    color-mix(in srgb, var(--cu,#b8332a) calc(var(--b,1) * 100%), #000);
}
/* la madera del cono y el grafito de la mina no se tinen */
.t3-madera{ background:color-mix(in srgb, #dab98c calc(var(--b,1) * 100%), #000); }
.t3-mina{ background:color-mix(in srgb, #4a4b50 calc(var(--b,1) * 100%), #000); }
.t3-metal{ background:color-mix(in srgb, #c3cad2 calc(var(--b,1) * 100%), #000); }
.t3-goma{ background:color-mix(in srgb, #eab6b9 calc(var(--b,1) * 100%), #000); }
.t3-caja-frente, .t3-caja-lado, .t3-caja-tapa{
  background:color-mix(in srgb, var(--cu,#c8324a) calc(var(--b,1) * 100%), #000);
}
/* el grano, encima de todo el objeto: la textura no gira con cada cara, va
   pegada al material */
.pg-3d .t3-grano{
  position:absolute; inset:0; mix-blend-mode:multiply; opacity:.4;
  pointer-events:none;
}
/* la piel: la foto envuelta. Sin degradado encima —la foto ya trae su luz—,
   solo el brillo de la cara, que va en el filter. */
.t3-cara.t3-piel{ background:none; background-repeat:no-repeat; }

/* LA CAPA DEL REFLEJO. Va con `screen` porque un brillo SUMA luz, no la
   sustituye; y sin puntero, que la pieza se sigue cogiendo por debajo. */
.pg-3d canvas.t3-luz{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none; mix-blend-mode:screen;
}
.pg-3d canvas{ position:absolute; inset:0; }