/* ══════════════════════════════════════════════════════════════════ COP · REGISTRO DE ÍCONOS — UN concepto, UN archivo, UNA regla ------------------------------------------------------------------ Para cambiar la moneda en TODO el sitio se reemplaza `moneda.png`. No se toca este archivo, no se toca ninguna página. Ese es el punto. ⚠ POR QUÉ UN NOMBRE NUEVO Y NO `.cp-coin` `.cp-coin` está definida en 9 lugares distintos (cop-ui-topbar.css, topbar.css y 7 páginas que se copiaron el bloque entero). Tocarla habría cambiado el significado de algo que ya existe, que es exactamente cómo rompí 58 páginas la primera vez y 10 la segunda. `.cop-ico` no existía en ninguna parte: enlazar este archivo no puede cambiar nada hasta que se cambie el marcado a mano. ⚠ EL ORDEN DE ESTE ARCHIVO NO ES DECORATIVO base → media queries → modificadores de tamaño. Los modificadores van ÚLTIMOS a propósito: tienen la misma especificidad que la regla base, así que si fueran antes, la media query de móvil le pisaría el tamaño a `--xl` y los íconos grandes de hitos/misiones se achicarían. Hoy no se achican. No reordenar. ══════════════════════════════════════════════════════════════════ */ .cop-ico{ display:inline-block; flex:0 0 auto; /* dos variables a propósito: `--cop-ico` es el tamaño del contexto (lo fijan las media queries y los modificadores) y `--cop-ico-x` es la corrección óptica del dibujo. Al ser variables distintas, el orden del archivo no puede hacer que una le pise la otra. */ width:calc(var(--cop-ico,32px) * var(--cop-ico-x,1)); height:calc(var(--cop-ico,32px) * var(--cop-ico-x,1)); background-repeat:no-repeat; background-position:center; background-size:contain; /* el ícono se apoya en la línea de texto como lo hacía el span */ vertical-align:middle; } /* ── Los conceptos. Una línea por cada uno. ──────────────────────── */ .cop-ico--moneda{background-image:url('moneda.png')} /* ⚠ La gema va 15 % más grande que la moneda A PROPÓSITO. Es un rombo: sus puntas se comen las esquinas de la caja, así que con el mismo tamaño se lee más chica que un círculo. Medido contra la moneda a 26px, 30px y 32px: 15 % es donde las dos pesan igual en la barra. */ .cop-ico--gema {background-image:url('gema.png'); --cop-ico-x:1.15} /* ⚠ XP NO es la gema. Hasta el 04/08 el badge de experiencia usaba la forma de la gema y por eso "cambiar la gema" cambiaba también el XP. Son dos conceptos y ahora son dos archivos. */ .cop-ico--xp {background-image:url('xp.png')} /* ⚠ EL PUNTO DE TORNEO (07/09/2026). Franco mandó el arte: la moneda azul con el rayo de CP y «TOURNAMENTS POINTS» alrededor. Es un CONCEPTO DISTINTO de la moneda —una paga la entrada, el otro es lo que se gana— y por eso es su propio ícono y no la moneda teñida. ⚠⚠ VA 15 % MÁS GRANDE QUE LA MONEDA, y no por la forma sino por el DIBUJO. La moneda es un círculo liso y se reconoce a 16 px; éste tiene dos anillos concéntricos y la palabra «TOURNAMENTS POINTS» siguiendo el borde. Mirado al lado de la moneda a 18 px en la tarjeta de torneo, al mismo tamaño se lee como una mancha azul; con 15 % más se distingue el anillo, que es lo que hace que no se confunda con la moneda de un vistazo. Es la misma razón por la que la gema va más grande, con otra causa: ahí el problema es la forma, acá el detalle. */ .cop-ico--punto {background-image:url('punto-torneo.webp?v=1'); --cop-ico-x:1.15} /* ══ INSIGNIAS DE DIVISIÓN ════════════════════════════════════════ El nivel del jugador: la misma insignia en la página de rangos, en las tarjetas del ranking, en el perfil y en cualquier otro lado. Diez divisiones, de la 10 a la 1. Cambiar el dibujo de una es reemplazar su PNG; no se toca este archivo. ═══════════════════════════════════════════════════════════════ */ .cop-div{ display:inline-block; flex:0 0 auto; height:var(--cop-div,1.45em); /* ⚠ El escudo es un hexágono VERTICAL: el dibujo ocupa 346×484 del lienzo de 512. Si la caja fuera cuadrada, sobraría casi un tercio de aire a los costados y la insignia quedaría separada del texto. Se fija la altura y el ancho sale de la proporción del dibujo. */ aspect-ratio:346/484; background:center/contain no-repeat; vertical-align:middle; } .cop-div--10{background-image:url('division-10.png')} .cop-div--9 {background-image:url('division-9.png')} .cop-div--8 {background-image:url('division-8.png')} .cop-div--7 {background-image:url('division-7.png')} .cop-div--6 {background-image:url('division-6.png')} .cop-div--5 {background-image:url('division-5.png')} .cop-div--4 {background-image:url('division-4.png')} .cop-div--3 {background-image:url('division-3.png')} .cop-div--2 {background-image:url('division-2.png')} .cop-div--1 {background-image:url('division-1.png')} /* ⚠ La insignia se mide en `em`, no en píxeles, a diferencia de la moneda. Aparece dentro de textos de tamaños muy distintos —el nombre grande del perfil, la fila chica del ranking, el chip de la barra— y en todos tiene que pesar lo mismo que la letra que la acompaña. Con un tamaño fijo habría que corregirlo en cada lugar. */ /* ── Tamaños por pantalla (los mismos que tenía `.cp-coin`) ──────── */ /* ⚠ Subidos de 26/18/16 a 32/24/21 (Franco, 04/08): a los tamaños viejos la moneda y la gema casi no se leían en la barra. */ @media(max-width:760px){ .cop-ico{--cop-ico:24px} } @media(max-width:380px){ .cop-ico{--cop-ico:21px} } /* ── Modificadores de tamaño · VAN ÚLTIMOS, ver la nota de arriba ── */ .cop-ico--xl{--cop-ico:34px} /* hitos.html y misiones.html, dentro de .mc-premio */ .cop-ico--sm{--cop-ico:20px} /* tienda.html, los que traían el tamaño en el style */ /* ⚠⚠ EL ÍCONO DE «USUARIOS» (10/09/2026). Franco pidió en el historial de Mega Spin *«sacar el "3 jugadores" de ahí para poner "3 (logo usuarios)"»*, y el dibujo ya existía… COPIADO EN DOS PANTALLAS (`survival.html` y `explorar.html`, cada una con su `const ICO_GENTE` armado a mano). Con Mega Spin habrían sido tres copias del mismo camino SVG, que es exactamente la historia que este archivo existe para no repetir. ⚠ ES EL ÚNICO DEL REGISTRO QUE SE DIBUJA CON MÁSCARA Y NO CON `background-image`, y hay una razón: los otros cuatro son ARTE (la moneda, la gema, el XP, el punto de torneo) y tienen su color propio; éste es un GLIFO que tiene que tomar el color del texto que acompaña —gris al lado de un dato, blanco al lado de un título—. Con la máscara el dibujo se pinta con `currentColor` y no hace falta un archivo por color. Por eso apaga explícitamente `background-image`: la clase base no pone ninguno, pero dejarlo escrito evita que alguien herede uno. ⚠ EL SVG VA EN LÍNEA (data URI) y no como archivo suelto: son 300 bytes y un archivo más sería un pedido de red más por una silueta. (Las copias de `ICO_GENTE` de survival y explorar también se fueron.) */ /* ⚠⚠ `.cop-ico--gente` SE BORRÓ EL 24/09/2026 (tanda 4): nadie lo usaba y dibujaba el símbolo VIEJO de dos usuarios. Franco: «sacar el símbolo de 2 usuarios viejo de toda la app y usar siempre el nuevo, como componente fijo». El nuevo es el Dúo de `cop-ico.js`: `` (o `COPIco.hueco('u1')`). */