/* © 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 · MI CLAN (la sección de los clanes): va después de mano.css
   El cuerpo de cada papelito (las filas de la lista, los del clan, el marco del emblema, los numeritos de la escalera) lo
   dibuja mano.js ([data-mano] y lo que registra app.js); aquí, solo el acomodo y las letras. El emblema lo pinta
   gatopons/emblemas.js en su lienzo. Letras: Dela para títulos, nombres y etiquetas; Rubik para leer; Gatopixel solo para
   números. Colores: los de la marca, exactos (el nombre del clan va del color de su pañuelo). */

/* ── Fundar: el emblema que sale del nombre (hierve mientras escribes) junto a sus campos ── */
.clan-fundar { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 18px 30px; align-items: center; }
.clan-vivo { display: grid; justify-items: center; gap: 0; }
.emblema { display: block; flex: none; }
.emblema.grande { width: 190px; height: 190px; rotate: -3deg; }
.emblema.enorme { width: 220px; height: 220px; }
.emblema.chico { width: 64px; height: 64px; }
.clan-tag-vivo { font: 400 30px/1 var(--titulo); letter-spacing: .02em; color: var(--crema); -webkit-text-stroke: 7px var(--tinta); paint-order: stroke fill;
  text-shadow: 3px 4px 0 var(--tinta); rotate: 2deg; translate: 0 -6px; }
.clan-campos { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.clan-campos label { font: 400 15px/1.15 var(--titulo); color: var(--tinta); }
.clan-campos label small { font: 600 13px/1.2 var(--texto); color: var(--suave); }
.clan-campos input[type="text"] { width: 100%; max-width: 420px; flex: none; }
.clan-campos input.clan-tag-campo { max-width: 150px; text-transform: uppercase; font-family: var(--titulo); font-weight: 400; letter-spacing: .06em; }
.clan-campos .boton { margin-top: 8px; }
.clan-campos > p { max-width: 52ch; }

/* ── Las listas: cada clan en su papelito, un poco chueco ── */
.clan-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.clan-fila { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 12px 10px;
  background: var(--papel); border: 2px solid var(--tinta); }
.clan-fila:nth-child(3n + 1) { rotate: -.45deg; }
.clan-fila:nth-child(3n + 2) { rotate: .35deg; translate: 4px 0; }
.clan-fila-texto { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.clan-fila-texto > b { font: 400 19px/1.1 var(--titulo); overflow-wrap: anywhere; }
.clan-fila .fila { gap: 8px; }
.clan-vacio { font: 400 19px/1.2 var(--titulo); rotate: -1deg; }
.chip.clan-tag { font: 400 14px/1 var(--titulo); letter-spacing: .03em; }
.chip.clan-tag[data-color="rojo"], .chip.clan-tag[data-color="azul"], .chip.clan-tag[data-color="tinta"] { color: var(--crema); -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; }

/* ── Mi clan: el emblema grande y sus datos ── */
.clan-heroe { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 20px 32px; align-items: center; }
.clan-escudo { display: grid; place-items: center; padding: 8px; background: var(--papel); border: 2px solid var(--tinta); rotate: -2.5deg; justify-self: center; }
.clan-datos { display: grid; gap: 12px; min-width: 0; justify-items: start; }
.clan-nombre { font: 400 40px/1.05 var(--titulo); letter-spacing: .01em; color: var(--crema); -webkit-text-stroke: 8px var(--tinta); paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--tinta); overflow-wrap: anywhere; rotate: -1deg; transform-origin: left center; }
.clan-nombre[data-panuelo="red"] { color: var(--rojo); }
.clan-nombre[data-panuelo="blue"] { color: var(--azul); }
.clan-nombre[data-panuelo="lime"] { color: var(--lima); }
.clan-datos .fila { gap: 8px; }
.clan-datos .barra { width: 100%; max-width: 460px; height: 22px; }
.clan-xp { font: 400 15px/1 var(--pixel); color: var(--tinta); }
.clan-cifras { display: flex; flex-wrap: wrap; gap: 14px 30px; }

/* ── Dos hojas lado a lado ── */
.clan-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.clan-par > .ventana:nth-child(2) .ventana-barra h2 { rotate: .8deg; }

/* ── El banco y el cofre ── */
.clan-donar { display: flex; flex-wrap: wrap; gap: 10px; }
.clan-donar .boton:nth-child(2n) { rotate: 1deg; }
.clan-donar .boton:nth-child(3n) { rotate: -.8deg; }

/* ── Lo que da cada nivel: una escalera con su numerito en un círculo de plumón ── */
.clan-escalera { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.clan-escalera li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0 10px;
  background: var(--linea-suave, none) 0 100% / 240px 6px repeat-x; font: 500 15px/1.3 var(--texto); }
.clan-escalera li[data-ya="false"] { color: var(--suave); }
.clan-escalera li[aria-current="true"] > span { font-weight: 800; color: var(--tinta); }
.clan-escalera small { font: 400 15px/1 var(--pixel); color: var(--suave); white-space: nowrap; }
.clan-escalera li[data-ya="true"] small { color: var(--tinta); }
.clan-nv { display: grid; place-items: center; width: 36px; height: 36px; font: 400 20px/1 var(--pixel); color: var(--tinta);
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 50%; rotate: -6deg; }
.clan-escalera li:nth-child(2n) .clan-nv { rotate: 5deg; }
.clan-nv[data-mano="rojo"] { color: var(--crema); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; }

/* ── Los del clan: su icono, su nombre y, si caben, los botones del líder en el mismo renglón (si no, en el de abajo) ── */
.clan-miembros { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.clan-miembro { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 10px 14px 12px;
  background: var(--papel); border: 2px solid var(--tinta); }
.clan-miembro:nth-child(2n) { rotate: .3deg; }
.clan-miembro:nth-child(3n) { rotate: -.35deg; translate: 3px 0; }
.clan-miembro > .pix { flex: none; width: 30px; height: 30px; rotate: -8deg; }
.clan-miembro-texto { display: grid; gap: 3px; flex: 1 1 230px; min-width: 0; }
.clan-miembro-texto > b { font: 400 17px/1.15 var(--titulo); overflow-wrap: anywhere; }
.clan-miembro > .fila { flex: 0 1 auto; margin-left: auto; gap: 8px; justify-content: flex-end; }

/* ── Invitar y lo que decide el líder ── */
.clan-pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.clan-pendientes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0 10px;
  background: var(--linea-suave, none) 0 100% / 240px 6px repeat-x; }
.clan-colores { gap: 8px; }
.clan-color[data-panuelo="red"] { background: var(--rojo); } .clan-color[data-panuelo="blue"] { background: var(--azul); }
.clan-color[data-panuelo="lime"] { background: var(--lima); } .clan-color[data-panuelo="cream"] { background: var(--crema); }
.clan-color[data-panuelo="ink"] { background: var(--tinta); }
.clan-color[data-panuelo="red"], .clan-color[data-panuelo="blue"], .clan-color[data-panuelo="ink"] { color: var(--crema); -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; }
.clan-color[aria-pressed="true"] { rotate: -3deg; translate: 0 -2px; }
.clan-color[disabled] { cursor: not-allowed; opacity: 1; }
.clan-salir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.cmds.clan-cmds .cmd { grid-template-columns: 236px minmax(0, 1fr); }

/* ── El celular ── */
/* (con el menú de lado, dos hojas por renglón caben de 1180 px para arriba; abajo de eso LOS NIVELES quedaba de 4 renglones) */
@media (max-width: 1180px) {
  .clan-par { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .clan-fundar, .clan-heroe { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .clan-campos { justify-items: stretch; width: 100%; }
  .clan-campos .boton { justify-self: stretch; }
  .emblema.grande { width: 160px; height: 160px; }
  .emblema.enorme { width: 180px; height: 180px; }
  .emblema.chico { width: 52px; height: 52px; }
  .clan-nombre { font-size: 30px; -webkit-text-stroke-width: 6px; text-shadow: 3px 4px 0 var(--tinta); text-align: center; transform-origin: center; }
  .clan-datos { justify-items: center; text-align: center; }
  .clan-datos .fila, .clan-cifras { justify-content: center; }
  .clan-fila { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 12px 12px 8px; }
  .clan-fila > .boton, .clan-fila > .fila { grid-column: 1 / -1; justify-self: end; }
  /* Lo que el líder le hace a cada quien, en un solo renglón: si no cabe, el letrero más largo se parte en dos. */
  .clan-miembro > .fila { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; gap: 6px; flex-wrap: nowrap; }
  .clan-miembro > .fila > .boton { flex: 0 1 auto; min-width: 0; }
  .clan-miembro .boton.mini { font-size: 12px; min-height: 40px; padding: 6px 8px 7px; }
  .cmds.clan-cmds .cmd { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .clan-escalera li { grid-template-columns: 40px minmax(0, 1fr); }
  .clan-escalera small { grid-column: 2; }
  /* (los que ya se tienen: el numerito lima o rojo ya lo dice; la palomita sola en su renglón sobra) */
  .clan-escalera li[data-ya="true"] small { display: none; }
}