/* ============================================================
   COSAS DE LA MESA: colores y materiales
   ============================================================
   Todo el bulto sale de UNA variable, --cu, que es el color que el elige:
   la franja clara y la oscura se sacan de ella con color-mix. Asi un solo
   dibujo vale para los dieciseis colores y no hay que mantener paletas.
   ============================================================ */
.pg-mesa{
  /* dos sombras, como los clips: la de contacto y la proyectada, las dos
     a escala de la pieza (--pgs lo pone el JS con su ancho real) */
  /* 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));
  background:none; mix-blend-mode:normal;
}
.pg-mesa svg{ display:block; width:100%; height:100%; overflow:visible; }

/* ---- los detalles que van ENCIMA de las rampas ----
   Las rampas de color las escribe el JS (mesa.js) como degradados de verdad;
   aqui solo quedan los detalles finos: aristas, juntas, brillos duros, veta,
   tizne. Nada de franjas planas: eso era lo que lo hacia dibujo animado. */
.pg-mesa .m-arista{ fill:#000; fill-opacity:.2; }
.pg-mesa .m-junta{ fill:#000; fill-opacity:.34; }
.pg-mesa .m-estria{ fill:#000; fill-opacity:.3; }
.pg-mesa .m-estria-luz{ fill:#fff; fill-opacity:.4; }
.pg-mesa .m-brillo-duro{ fill:#fff; fill-opacity:.5; }
.pg-mesa .m-veta{ fill:#8a6234; fill-opacity:.28; }
.pg-mesa .m-corte{ fill:#fff; fill-opacity:.16; }
.pg-mesa .m-corte2{ fill:#000; fill-opacity:.13; }
.pg-mesa .m-filo-corte{ fill:none; stroke:#000; stroke-opacity:.28; stroke-width:1.6; }
.pg-mesa .m-mina-brillo{ fill:#fff; fill-opacity:.3; }
.pg-mesa .m-clip{ fill:#9aa1a9; stroke:#5a6067; stroke-width:1.2; }
.pg-mesa .m-punto{ fill:#000; fill-opacity:.28; }
.pg-mesa .m-banda{ fill:#000; fill-opacity:.22; }
.pg-mesa .m-raya-papel{ fill:#000; fill-opacity:.16; }
.pg-mesa .m-papel-roto{ fill:#000; fill-opacity:.18; }
.pg-mesa .m-cera-brillo{ fill:#fff; fill-opacity:.3; }
.pg-mesa .m-recuadro{ fill:#b4302a; fill-opacity:.9; }
.pg-mesa .m-gastado{ fill:#000; fill-opacity:.1; }
.pg-mesa .m-sucio{ fill:#2e2c28; fill-opacity:.2; }
.pg-mesa .m-tizne{ fill:#2b2a28; fill-opacity:.3; }
.pg-mesa .m-cuchilla{ fill:#7f868e; }
.pg-mesa .m-cuchilla-filo{ fill:#f2f5f8; }
.pg-mesa .m-cuchilla-som{ fill:#000; fill-opacity:.3; }
.pg-mesa .m-canto-hueco{ fill:#fff; fill-opacity:.22; }
.pg-mesa .m-tornillo{ fill:#6f757c; }
.pg-mesa .m-tornillo-luz{ fill:#aeb5bc; }
.pg-mesa .m-ranura{ fill:#3a3f45; }
.pg-mesa .m-virutas-dentro{ fill:#c9a271; fill-opacity:.8; }
/* la viruta */
.pg-mesa .m-viruta-som{ fill:#8e6435; fill-opacity:.5; }
.pg-mesa .m-viruta-som2{ fill:#8e6435; fill-opacity:.3; }
.pg-mesa .m-viruta-luz{ fill:none; stroke:#fff; stroke-opacity:.3; stroke-width:5; }
.pg-mesa .m-estria-viruta{ fill:none; stroke:#8e6435; stroke-opacity:.34; stroke-width:2; }
.pg-mesa .m-canto-pintado{ fill:none; stroke:var(--cu,#b8332a); stroke-width:6; stroke-opacity:.92; }

/* ---- los dieciseis colores: uno por clase, y de ahi salen los tonos ---- */
.pg-cu0{ --cu:#b8332a; }  /* rojo */
.pg-cu1{ --cu:#d9701f; }  /* naranja */
.pg-cu2{ --cu:#e0ad12; }  /* amarillo */
.pg-cu3{ --cu:#3f8f47; }  /* verde */
.pg-cu4{ --cu:#2a6238; }  /* verde oscuro */
.pg-cu5{ --cu:#2f9cb0; }  /* cian */
.pg-cu6{ --cu:#2a66a8; }  /* azul */
.pg-cu7{ --cu:#1f3e74; }  /* azul marino */
.pg-cu8{ --cu:#71499f; }  /* morado */
.pg-cu9{ --cu:#cc5f92; }  /* rosa */
.pg-cu10{ --cu:#b5327a; }  /* fucsia */
.pg-cu11{ --cu:#7f5230; }  /* marron */
.pg-cu12{ --cu:#26262a; }  /* negro */
.pg-cu13{ --cu:#858a91; }  /* gris */
.pg-cu14{ --cu:#eae7e0; }  /* blanco */
.pg-cu15{ --cu:#e4d6b6; }  /* crema */

/* la muestra del cajon: sobre papel, que un lapiz blanco sobre fondo negro
   no se ve */
.pg-chip .pg-muestra.mesa{ background:#ded8c8; padding:2px; }
.pg-chip .pg-muestra.mesa > i{ display:flex; align-items:center; justify-content:center; }
.pg-chip .pg-muestra.mesa svg{ max-width:100%; max-height:100%; width:auto; height:100%; }
/* LA VIRUTA: gajos, pliegues y el ojo del centro. Uno de cada dos gajos va en
   sombra porque la viruta es FINA y la luz la atraviesa a trozos: sin esa
   alternancia se ve como una concha maciza, que es lo que pasaba antes. */
.pg-mesa .m-gajo{ fill:#dcb98c; }
.pg-mesa .m-gajo.m-gajo-som{ fill:#c09760; }
.pg-mesa .m-pliegue{ fill:none; stroke:#8e6435; stroke-opacity:.45; stroke-width:2; }
.pg-mesa .m-viruta-ojo{ fill:#8a6135; fill-opacity:.3; }
.pg-mesa .m-viruta-luz{ fill:none; stroke:#fff; stroke-opacity:.26; stroke-width:9; }
/* EL GRANO va en multiply: oscurece a manchas finas, que es como se comporta
   la textura de un material bajo la luz. Con 'normal' seria polvo encima. */
.pg-mesa .m-grano{ mix-blend-mode:multiply; }
/* EL FILO DEL OBJETO: un hilo de sombra pegadito al canto por dentro. Es lo
   que despega la pieza del fondo; sin el, el degradado llega al borde y el
   objeto parece recortado con tijeras. */
.pg-mesa .m-filo-obj{
  fill:none; stroke:#000; stroke-opacity:.3; stroke-width:1.4;
}

/* ---- PIEZAS DE FOTO ----
   Recortadas de sus propias fotos con recortar.py. No se tinen ni se les
   toca el color: ya traen el suyo y su luz. Solo se les pone la sombra a
   escala de la pieza, igual que a todo lo demas del tablero. */
.pg-foto{
  background-repeat:no-repeat; background-size:100% 100%; background-position:center;
  /* 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-chip .pg-muestra.foto{ background:#ded8c8; padding:2px; }

/* ====================================================================
   VIRUTAS Y MIGAS  (las dibuja virutas.js)
   ====================================================================
   LOS TONOS SALEN DE SUS FOTOS, no de la paleta de la cabeza. Medido sobre
   VIRUTAS2.png y VIRUTAS3.png: cuerpo de la madera (198,169,134), luz
   (225,192,157) y sombra (159,134,93). Cada gajo de la viruta esta girado lo
   suyo y coge la luz de otra manera, asi que se le da a cada uno un tono de
   esta escala en vez de un degradado unico: eso es lo que hace que se lea
   como cinta retorcida y no como abanico de cartulina.
   ==================================================================== */
.pg-mesa .v-gajo{ stroke:none; }
/* el cuerpo entero de la cinta, debajo de todo: asi no se ven costuras
   blancas entre gajo y gajo */
.pg-mesa .v-cuerpo{ fill:#cdac80; stroke:none; }
.pg-mesa .v-g0{ fill:#b3925f; }
.pg-mesa .v-g1{ fill:#c2a173; }
.pg-mesa .v-g2{ fill:#cfae82; }
.pg-mesa .v-g3{ fill:#dcbd94; }
.pg-mesa .v-g4{ fill:#e7cdab; }
.pg-mesa .v-g5{ fill:#f2dfc4; }

/* la veta: de dentro afuera, abriendose. Fina y floja: si canta, parece
   rayado a boli. */
.pg-mesa .v-veta{ fill:none; stroke:#8b6636; stroke-opacity:.13; stroke-width:.9; }
/* la rendija por donde se rajo la madera: se ve el papel de debajo, asi que
   va oscura y con el canto blando */
.pg-mesa .v-rendija{
  fill:none; stroke:#6f5028; stroke-opacity:.42; stroke-width:1.6;
  stroke-linecap:round;
}
/* las pocas que se abrieron del todo: por ahi se ve el papel */
.pg-mesa .v-rendija.v-rota{ stroke:#5c4020; stroke-opacity:.72; stroke-width:4.5; }
/* EL FILO PINTADO: la cara de fuera de la viruta es la superficie laqueada
   del lapiz. Es LO UNICO que cambia de color de un lapiz a otro — de ahi que
   una viruta de un lapiz rojo sea madera con un filo rojo, y no una viruta
   roja. */
.pg-mesa .v-filo{
  fill:none; stroke:var(--cu,#d9701f); stroke-opacity:.96;
  stroke-linejoin:round; stroke-linecap:round;
}
/* y el brillo de la laca corriendo por ese filo */
.pg-mesa .v-filo-luz{
  fill:none; stroke:#fff; stroke-opacity:.3;
  stroke-linejoin:round; stroke-linecap:round;
}

/* ---- LA VIRUTA DE CERA ----
   Un plastidecor no tiene madera: la viruta es de color entero, mas gorda y
   mas blanda. Se dobla en vez de rajarse, asi que ni veta ni festoneado
   fino. */
.pg-mesa .v-cera .v-g0{ fill:color-mix(in srgb, var(--cu,#d9701f) 62%, #000); }
.pg-mesa .v-cera .v-g1{ fill:color-mix(in srgb, var(--cu,#d9701f) 76%, #000); }
.pg-mesa .v-cera .v-g2{ fill:color-mix(in srgb, var(--cu,#d9701f) 90%, #000); }
.pg-mesa .v-cera .v-g3{ fill:var(--cu,#d9701f); }
.pg-mesa .v-cera .v-g4{ fill:color-mix(in srgb, var(--cu,#d9701f) 84%, #fff); }
.pg-mesa .v-cera .v-g5{ fill:color-mix(in srgb, var(--cu,#d9701f) 66%, #fff); }
.pg-mesa .v-cera .v-veta{ stroke:#000; stroke-opacity:.1; }
.pg-mesa .v-cera .v-rendija{ stroke:#000; stroke-opacity:.28; }
.pg-mesa .v-cera .v-filo{ stroke:color-mix(in srgb, var(--cu,#d9701f) 55%, #fff); stroke-opacity:.85; }
.pg-mesa .v-cera .v-filo-luz{ stroke-opacity:.45; }

/* ---- LOS GUSANILLOS DE LA GOMA ----
   No son virutas: la goma se enrolla sobre si misma al frotar y salen
   churros blandos, mas gordos por el medio y afilados por las puntas. Y
   nunca salen limpios: se llevan el grafito, asi que van sucios. */
.pg-mesa .v-hilo{
  fill:color-mix(in srgb, var(--cu,#eae7e0) 86%, #6c655a);
  stroke:color-mix(in srgb, var(--cu,#eae7e0) 52%, #4b453d);
  stroke-opacity:.5; stroke-width:.8;
}
.pg-mesa .v-hilo-luz{
  fill:none; stroke:#fff; stroke-opacity:.34; stroke-width:2.4;
  stroke-linecap:round;
}
.pg-mesa .v-polvo{ fill:#4a4640; fill-opacity:.3; }
/* el polvillo de la mina va aparte: es grafito, ni goma ni madera */
.pg-mesa .v-mina .v-hilo{ fill:#3c3d42; stroke:#212226; stroke-opacity:.55; }
.pg-mesa .v-mina .v-hilo-luz{ stroke-opacity:.22; }
.pg-mesa .v-mina .v-polvo{ fill:#2b2c30; fill-opacity:.42; }

/* ---- LAS VIRUTAS: EL FILO, EN OTRA CAPA DE FONDO ----
   Primero lo hice con mascara CSS y NO FUNCIONA POR file://: Chromium trata
   otro fichero local como otro origen y las mascaras exigen origen limpio.
   Medido en el navegador: sin mascara la capa pintaba (68 niveles de cambio),
   con mascara CERO. O sea que el color no se podia cambiar — que es
   exactamente lo que el decia mientras yo juraba que si, porque yo solo lo
   habia compuesto en Python y nunca en el navegador.
   Dos imagenes de fondo, en cambio, se apilan sin pedirle permiso a nadie:
   arriba el filo ya tenido (hay uno por color) y debajo la viruta. */
.pg-foto.pg-vir{
  background-image:var(--vir-filo), var(--vir-base);
  background-size:100% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
}

/* EL FILO DEL OBJETO: un hilo de sombra pegadito al canto por dentro. Es lo
   que despega la pieza del fondo; sin el, el degradado llega al borde y el
   objeto parece recortado con tijeras. */
.pg-mesa .m-filo-obj{
  fill:none; stroke:#000; stroke-opacity:.3; stroke-width:1.4;
}

/* ---- PIEZAS DE FOTO ----
   Recortadas de sus propias fotos con recortar.py. No se tinen ni se les
   toca el color: ya traen el suyo y su luz. Solo se les pone la sombra a
   escala de la pieza, igual que a todo lo demas del tablero. */
.pg-foto{
  background-repeat:no-repeat; background-size:100% 100%; background-position:center;
  /* 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-chip .pg-muestra.foto{ background:#ded8c8; padding:2px; }

/* ====================================================================
   VIRUTAS Y MIGAS  (las dibuja virutas.js)
   ====================================================================
   LOS TONOS SALEN DE SUS FOTOS, no de la paleta de la cabeza. Medido sobre
   VIRUTAS2.png y VIRUTAS3.png: cuerpo de la madera (198,169,134), luz
   (225,192,157) y sombra (159,134,93). Cada gajo de la viruta esta girado lo
   suyo y coge la luz de otra manera, asi que se le da a cada uno un tono de
   esta escala en vez de un degradado unico: eso es lo que hace que se lea
   como cinta retorcida y no como abanico de cartulina.
   ==================================================================== */
.pg-mesa .v-gajo{ stroke:none; }
/* el cuerpo entero de la cinta, debajo de todo: asi no se ven costuras
   blancas entre gajo y gajo */
.pg-mesa .v-cuerpo{ fill:#cdac80; stroke:none; }
.pg-mesa .v-g0{ fill:#b3925f; }
.pg-mesa .v-g1{ fill:#c2a173; }
.pg-mesa .v-g2{ fill:#cfae82; }
.pg-mesa .v-g3{ fill:#dcbd94; }
.pg-mesa .v-g4{ fill:#e7cdab; }
.pg-mesa .v-g5{ fill:#f2dfc4; }

/* la veta: de dentro afuera, abriendose. Fina y floja: si canta, parece
   rayado a boli. */
.pg-mesa .v-veta{ fill:none; stroke:#8b6636; stroke-opacity:.13; stroke-width:.9; }
/* la rendija por donde se rajo la madera: se ve el papel de debajo, asi que
   va oscura y con el canto blando */
.pg-mesa .v-rendija{
  fill:none; stroke:#6f5028; stroke-opacity:.42; stroke-width:1.6;
  stroke-linecap:round;
}
/* las pocas que se abrieron del todo: por ahi se ve el papel */
.pg-mesa .v-rendija.v-rota{ stroke:#5c4020; stroke-opacity:.72; stroke-width:4.5; }
/* EL FILO PINTADO: la cara de fuera de la viruta es la superficie laqueada
   del lapiz. Es LO UNICO que cambia de color de un lapiz a otro — de ahi que
   una viruta de un lapiz rojo sea madera con un filo rojo, y no una viruta
   roja. */
.pg-mesa .v-filo{
  fill:none; stroke:var(--cu,#d9701f); stroke-opacity:.96;
  stroke-linejoin:round; stroke-linecap:round;
}
/* y el brillo de la laca corriendo por ese filo */
.pg-mesa .v-filo-luz{
  fill:none; stroke:#fff; stroke-opacity:.3;
  stroke-linejoin:round; stroke-linecap:round;
}

/* ---- LA VIRUTA DE CERA ----
   Un plastidecor no tiene madera: la viruta es de color entero, mas gorda y
   mas blanda. Se dobla en vez de rajarse, asi que ni veta ni festoneado
   fino. */
.pg-mesa .v-cera .v-g0{ fill:color-mix(in srgb, var(--cu,#d9701f) 62%, #000); }
.pg-mesa .v-cera .v-g1{ fill:color-mix(in srgb, var(--cu,#d9701f) 76%, #000); }
.pg-mesa .v-cera .v-g2{ fill:color-mix(in srgb, var(--cu,#d9701f) 90%, #000); }
.pg-mesa .v-cera .v-g3{ fill:var(--cu,#d9701f); }
.pg-mesa .v-cera .v-g4{ fill:color-mix(in srgb, var(--cu,#d9701f) 84%, #fff); }
.pg-mesa .v-cera .v-g5{ fill:color-mix(in srgb, var(--cu,#d9701f) 66%, #fff); }
.pg-mesa .v-cera .v-veta{ stroke:#000; stroke-opacity:.1; }
.pg-mesa .v-cera .v-rendija{ stroke:#000; stroke-opacity:.28; }
.pg-mesa .v-cera .v-filo{ stroke:color-mix(in srgb, var(--cu,#d9701f) 55%, #fff); stroke-opacity:.85; }
.pg-mesa .v-cera .v-filo-luz{ stroke-opacity:.45; }

/* ---- LOS GUSANILLOS DE LA GOMA ----
   No son virutas: la goma se enrolla sobre si misma al frotar y salen
   churros blandos, mas gordos por el medio y afilados por las puntas. Y
   nunca salen limpios: se llevan el grafito, asi que van sucios. */
.pg-mesa .v-hilo{
  fill:color-mix(in srgb, var(--cu,#eae7e0) 86%, #6c655a);
  stroke:color-mix(in srgb, var(--cu,#eae7e0) 52%, #4b453d);
  stroke-opacity:.5; stroke-width:.8;
}
.pg-mesa .v-hilo-luz{
  fill:none; stroke:#fff; stroke-opacity:.34; stroke-width:2.4;
  stroke-linecap:round;
}
.pg-mesa .v-polvo{ fill:#4a4640; fill-opacity:.3; }
/* el polvillo de la mina va aparte: es grafito, ni goma ni madera */
.pg-mesa .v-mina .v-hilo{ fill:#3c3d42; stroke:#212226; stroke-opacity:.55; }
.pg-mesa .v-mina .v-hilo-luz{ stroke-opacity:.22; }
.pg-mesa .v-mina .v-polvo{ fill:#2b2c30; fill-opacity:.42; }

/* ---- LAS VIRUTAS DE FOTO, CON EL FILO TENIBLE ----
   La viruta es una foto de verdad (VIRUTA-01.png). Encima va una capa del
   color elegido, recortada por la mascara del canto laqueado y multiplicada:
   color x la luz del filo = el canto de ese color, con su relieve y sus
   brillos. La madera no se toca, que es lo que pasa de verdad — una viruta
   de un lapiz azul es cedro con el canto azul, no una viruta azul.
   El isolation es para que el multiply se quede DENTRO de la pieza y no
   multiplique tambien el periodico de debajo. */
/* (aqui vivia la version con mask-image del filo. NO FUNCIONA POR file://:
   Chromium trata otro fichero local como otro origen y las mascaras exigen
   origen limpio — medido, con mascara la capa cambiaba 0,00 y sin ella 68,4.
   La buena esta mas arriba: dos imagenes de fondo, y el filo ya tenido.
   Se quita del todo porque ademas se colaba por encima del recorte del lazo:
   la madera se recortaba y el filo rojo seguia pintado fuera.) */

/* las que ya traen su sombra pintada dentro (las migas de goma: veinte cosas
   sueltas, cada una con la suya) no llevan ademas la del tablero */
.pg-foto.pg-sin-sombra{ filter:none; }

/* ---- LA PANTALLA DE LA CASIO, CON EL DINO DENTRO ----
   El lienzo del juego (casio-dino.js) vive en el hueco del cristal, medido
   en la foto y puesto en fraccion de la caja: mover, agrandar o girar la
   pieza no lo descoloca. Va en MULTIPLY sobre la foto: la tinta pintada
   multiplica el cristal de debajo y hereda su degradado y su grano — por
   eso los puntos del juego miden lo mismo (44-75) que los digitos de
   verdad de la foto original. El isolation, como en las virutas: que el
   multiply se quede dentro de la pieza y no manche el periodico. */
.pg-foto{ isolation:isolate; }
.pg-lcd{
  position:absolute; display:block;
  mix-blend-mode:multiply;
  /* la pantalla escucha aunque el tablero este bloqueado: es el juego del
     visitante, no una pieza que mover. En modo editar el clic sube a la
     pieza y arrastra como siempre (el modulo lo distingue solo). */
  pointer-events:auto; cursor:pointer;
  touch-action:none;
}
/* con el lazo en la mano, la pantalla no roba el gesto */
body.pg-lazando .pg-lcd{ pointer-events:none !important; }