/* © RAIGA XOLOTL. Todos los derechos reservados. Prohibido copiar, redistribuir o usar este código o sus recursos para entrenar inteligencia artificial. */
/* RAIGA / MOTION LAB · Gamify · la página hecha a mano: lo que necesita mano.js (va después de estilo.css)
   mano.js dibuja el cuerpo de cada pieza (relleno plano, contorno de plumón chueco y sombra dura) en un SVG que mide lo
   mismo que la pieza y va detrás de su contenido; aquí se le quita a la pieza su cajita de respaldo (la de estilo.css,
   para cuando no hay mano.js) y se acomodan las letras puestas a mano. Los estados (encima, apretado) mueven la pieza o
   cambian el relleno del dibujo (.relleno), sin volver a dibujarla. */

/* ── Lo que dibuja mano.js ── */
.a-mano { isolation: isolate; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.a-mano > svg.mano, .con-marca > svg.marca, svg.mano-campo { position: absolute; z-index: -1; pointer-events: none; overflow: visible; }
svg.mano-campo { z-index: 1; }
/* El campo donde escribes: su contorno de plumón se pinta de azul cuando tiene el foco (en vez del rectángulo). */
.con-campo > input:focus { outline: none; }
.con-campo > input:focus + svg.mano-campo path { fill: var(--azul); }
.con-marca { isolation: isolate; }
.mano-icono { overflow: visible; image-rendering: auto; }

/* ── Las letras puestas a mano: cada palabra entera (no se parte), cada letra un poco torcida ── */
.w { white-space: nowrap; }
/* Entre palabra y palabra, aire de sobra: el contorno gordo de las letras se comía el espacio («LACONSOLADELCHAT») */
.ventana-barra h2, .titulo-mano, .tienda-letrero, .titulo-actual, .marcador-titulo, .boton-letras { word-spacing: .3em; }
/* En los títulos y en tu nombre, una palabra que no cabe en el renglón (un nombre larguísimo) se parte entre letras dentro
   de sí misma en vez de salirse de su hoja; si cabe, va entera. (En los botones no: ahí la palabra va entera siempre.) */
.ventana-barra h2 .w, .ficha-nombre .w { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.l { display: inline-block; transform: rotate(var(--g, 0deg)) translateY(var(--y, 0)); }
.titulo-mano {
  font: 400 26px/1.05 var(--titulo); letter-spacing: .01em; color: var(--crema);
  -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--tinta);
}

/* ── Apretar: la pieza baja hasta su sombra (y la sombra se esconde) ── */
.boton:active > svg.mano .sombra, .pad:active > svg.mano .sombra, .opcion:active > svg.mano .sombra,
.mas-boton:active > svg.mano .sombra, .comando:active > svg.mano .sombra, .codigo:active > svg.mano .sombra,
.cmd-donde:active > svg.mano .sombra, .hud-boton:active > svg.mano .sombra, .hud-jugador:active > svg.mano .sombra,
.filtro:active > svg.mano .sombra, .pestana:active > svg.mano .sombra, .vb:active > svg.mano .sombra { visibility: hidden; }
.boton[disabled]:active > svg.mano .sombra, .pad[disabled]:active > svg.mano .sombra { visibility: visible; }

/* ── Encima: el papel se pinta (sin redibujar el contorno). Solo con ratón: en el celular el dedo deja la pieza «encima»
   después de tocarla y una pestaña pintada de lima se leía como escogida. ── */
@media (hover: hover) {
  .cmd-donde:hover > svg.mano .relleno, .mas-boton:hover > svg.mano .relleno, .opcion[data-color="papel"]:not([disabled]):hover > svg.mano .relleno,
  .opcion:not([data-color]):not([disabled]):hover > svg.mano .relleno, .filtro[aria-pressed="false"]:hover > svg.mano .relleno,
  .pestana[aria-selected="false"]:hover > svg.mano .relleno, .hud-boton:hover > svg.mano .relleno { fill: var(--lima); }
  .comando:hover > svg.mano .relleno, .codigo:hover > svg.mano .relleno { fill: var(--azul); }
  button.dex:hover > svg.mano .relleno { fill: var(--crema); }
}