/* ============================================================
   AoE2 Results — SISTEMA DE CARDS
   FUENTE ÚNICA DE VERDAD.
   Todas las páginas enlazan este archivo. No dupliques estas
   reglas en ningún HTML: si una card se ve distinta en algún
   lado, es porque alguien copió esto en vez de enlazarlo.

   Proporciones derivadas de la card de referencia 318×444 px.
   La escala es automática: la card toma su tamaño del ancho
   del contenedor .scene (container query). Por eso .scene
   DEBE declarar container-type — está resuelto acá abajo, no
   hay que acordarse en cada página.
   ============================================================ */

:root{
  --parch:#e8dcc0;
  --parch-dim:#a89877;
  /* Intensidad global del tinte de tier sobre la ilustración.
     Se ajusta desde el panel de admin. 0 = sin tinte, 1 = pleno. */
  --tintk:1;
}

/* ---------- contenedor: define la escala de toda la card ---------- */
.scene{
  container-type:inline-size;   /* imprescindible: habilita las unidades cqw */
  perspective:1200px;
  cursor:pointer;
}
.flipper{position:relative;width:100%;height:100%;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,.15,.2,1)}
.scene.flip .flipper{transform:rotateY(180deg)}
/* El contexto 3D TERMINA en .flipper: cada cara se aplana.
   Dos motivos, los dos empíricos:
   · mix-blend-mode adentro de un preserve-3d es comportamiento indefinido y
     algunos motores lo descartan al rasterizar por GPU — el velo de tier
     desaparecía en escritorio y se veía bien en el celular.
   · translateZ(0) fuerza una capa propia: sin eso backface-visibility falla
     en varios navegadores móviles y el dorso se ve espejado. */
.face{position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* el contexto 3D termina acá: el contenido de cada cara se rasteriza en 2D */
  transform-style:flat;-webkit-transform-style:flat}
.face.bk{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}

/* ---------- marco ----------
   font-size:8.5cqw hace que TODO el interior escale solo.
   A 318px de ancho, 1em = 27px y el nombre queda en 25px,
   igual que la card de referencia. */
.card{
  position:relative;width:100%;height:100%;
  font-size:8.5cqw;
  border-radius:4.40%;
  padding:4.09%;
  background:
    /* destello especular: va EN EL FONDO, no como capa superpuesta.
       El .inner es opaco y cubre el centro, así que este gradiente
       sólo puede verse en el anillo del marco. Nunca sobre la
       ilustración. (Una capa con z-index no sirve: preserve-3d
       rompe el orden de apilado.) */
    linear-gradient(115deg,
      transparent 0%, transparent 32%,
      rgba(255,255,255,.30) 42%, rgba(255,255,255,.55) 48%,
      rgba(255,255,255,.28) 55%, transparent 66%, transparent 100%),
    var(--edge);
  /* bisel: luz arriba-izquierda, sombra abajo-derecha */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),
    inset 1.5px 0 0 rgba(255,255,255,.20),
    inset 0 -1.5px 0 rgba(0,0,0,.55),
    inset -1.5px 0 0 rgba(0,0,0,.40),
    0 12px 34px rgba(0,0,0,.6);
  /* defaults; los sobreescribe la clase de tier */
  --edge:linear-gradient(140deg,#3f464e,#8e9aa8 9%,#4b535c 20%,#b3bfcd 31%,
    #5a636d 43%,#97a3b1 55%,#434a52 67%,#8794a2 79%,#3a4149 90%,#6c7681);
  --tier:#8a95a3;--tier-lt:#c8d2de;--tint:rgba(120,140,165,.15);
}

/* ---------- tiers ----------
   Gradientes de 10 paradas: las bandas alternadas de luz y sombra
   son lo que hace que se lea como metal y no como plástico. */
.tCOM{ /* Comunitario — hierro forjado */
  --edge:linear-gradient(140deg,#3f464e 0%,#8e9aa8 9%,#4b535c 20%,#b3bfcd 31%,
    #5a636d 43%,#97a3b1 55%,#434a52 67%,#8794a2 79%,#3a4149 90%,#6c7681 100%);
  --tier:#8a95a3;--tier-lt:#c8d2de;--tint:rgba(120,140,165,.15)}
.tC{ /* acero pulido */
  --edge:linear-gradient(140deg,#8a939e 0%,#eef3f8 9%,#97a0ab 20%,#ffffff 31%,
    #a8b1bc 43%,#e3eaf1 55%,#8e97a2 67%,#dfe6ee 79%,#838c97 90%,#b9c2cd 100%);
  --tier:#c9d2dc;--tier-lt:#f6fafd;--tint:rgba(200,212,228,.13)}
.tB{ /* bronce */
  --edge:linear-gradient(140deg,#6b4520 0%,#d9a066 9%,#7d5427 20%,#f0c48a 31%,
    #8a5c2c 43%,#c99459 55%,#67421f 67%,#b9854b 79%,#5e3c1c 90%,#9c6d38 100%);
  --tier:#c89058;--tier-lt:#efc394;--tint:rgba(200,144,88,.15)}
.tA{ /* oro */
  --edge:linear-gradient(140deg,#7a5c1e 0%,#f4d891 9%,#8f6c25 20%,#fff0c0 31%,
    #a07c2c 43%,#e2c176 55%,#745718 67%,#d2b062 79%,#6b5015 90%,#ad8a35 100%);
  --tier:#d9ab4c;--tier-lt:#f8e2a6;--tint:rgba(217,171,76,.15)}
.tS{ /* magenta a oro */
  --edge:linear-gradient(140deg,#7d2554 0%,#f7cbe6 9%,#922e63 20%,#ffe3f2 31%,
    #a8467a 43%,#e0a3c8 55%,#8a3a68 67%,#d9a86a 82%,#a07c2c 92%,#f0d79a 100%);
  --tier:#e08cc0;--tier-lt:#fbd9ec;--tint:rgba(224,140,192,.16)}
.tMEC{ /* Mecenas — verde, sin tier de torneo */
  --edge:linear-gradient(140deg,#3f5c22 0%,#cfe6a8 9%,#4a6b2a 20%,#e2f2c8 31%,
    #5c7f38 43%,#b4d48c 55%,#3a5520 67%,#a8cc80 79%,#35501c 90%,#8fbf5e 100%);
  --tier:#a3c072;--tier-lt:#dcf0bc;--tint:rgba(163,192,114,.16)}

/* brillo que barre el marco al pasar el cursor.
   Se anima la posición de la capa de destello del fondo. */
.mShine .card{
  background-size:260% 260%,100% 100%;
  background-position:130% 50%,0 0;
  transition:background-position .9s cubic-bezier(.3,.1,.2,1);
}
.mShine:hover .card{background-position:-30% 50%,0 0}

/* sin destello fijo (deja sólo el bisel) */
.noSheen .card{background:var(--edge)}

/* ---------- interior ---------- */
.inner{position:relative;width:100%;height:100%;border-radius:1.57%;overflow:hidden;
  background:#150f09;box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,220,192,.12);
  /* grupo de aislamiento explícito: el velo de .ctint necesita un fondo
     bien definido contra el cual mezclarse */
  isolation:isolate}

/* ilustración: <img> con transform para poder encuadrar (pan + zoom) */
.cbgwrap{position:absolute;inset:0;overflow:hidden;z-index:1}
img.cbg{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;
  transform-origin:center;filter:saturate(.85) contrast(1.04);
  user-select:none;-webkit-user-drag:none;pointer-events:none}
.cbgwrap::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,10,6,.5) 0%,rgba(14,10,6,.04) 24%,
    rgba(14,10,6,.5) 50%,rgba(14,10,6,.95) 71%,#0e0a06 100%)}
/* velo con el color del tier: unifica ilustraciones de paletas distintas */
/* Velo con el color del tier: unifica ilustraciones de paletas distintas.
   MODO SCREEN, no overlay. Medido sobre una ilustración oscura (38,28,18),
   que es el caso real de este arte:
       overlay .20  → corrimiento de color 6/255, separación entre tiers 1.7
       screen  .14  → corrimiento 36/255,      separación 8.3
   overlay conserva luces y sombras del fondo, así que sobre un fondo oscuro
   no tiene con qué trabajar y el velo desaparece. screen aclara HACIA el
   color del tier, que es lo que un arte oscuro necesita.
   La intensidad se regula desde el panel con --tintk. */
.ctint{position:absolute;inset:0;background:var(--tint);mix-blend-mode:screen;
  opacity:var(--tintk);z-index:2;pointer-events:none}
.cnoimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#2a231a;font-size:1.4em;z-index:1}

/* ---------- frente ---------- */
.ctop{position:absolute;top:3.15%;left:4.72%;right:4.72%;display:flex;justify-content:space-between;z-index:5}
.cbrand{font-family:'Cinzel',serif;font-size:.320em;letter-spacing:.3em;color:var(--parch-dim);
  text-transform:uppercase;text-shadow:0 1px 3px #000}
.cbadge{font-family:'Cinzel',serif;font-size:.360em;letter-spacing:.16em;color:var(--tier-lt);
  border:1px solid var(--tier);padding:.080em .280em;border-radius:2px;background:rgba(14,10,6,.68)}
.cseal{position:absolute;top:9.91%;right:4.72%;width:13.84%;aspect-ratio:1;border-radius:50%;z-index:5;
  border:1px solid var(--tier);background:radial-gradient(circle at 34% 28%,var(--tint),rgba(14,10,6,.92));
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.cseal .s1{font-family:'Cinzel',serif;font-size:.560em;color:var(--tier-lt);line-height:1}
/* Sello dibujado (flor de lis de Mecenas). Sin seal_sub la flor va sola y
   centrada, así que ocupa el disco entero.

   OJO con la unidad: .sglyph vive dentro de .s1, que ya está en .560em, así
   que estos em se multiplican por 0.56 antes de llegar a píxeles. Por eso los
   valores parecen grandes y no lo son: 1.9em acá son 0.53em de la card.
   Relación 1.74/1.90 = el ratio del viewBox del símbolo (470/512): cualquier
   otra proporción deforma la flor.
   Queda en ~80% del anillo punteado, sin tocarlo. */
.cseal .s1 .sglyph{display:block;width:1.74em;height:1.90em}
.cseal .s2{font-size:.240em;letter-spacing:.1em;color:var(--parch-dim);margin-top:1px}
.cseal::after{content:'';position:absolute;inset:9%;border:1px dotted rgba(232,220,192,.3);border-radius:50%}
.cbody{position:absolute;left:0;right:0;bottom:0;padding:0 5.35% 3.38%;z-index:5}
.crule{height:1px;background:linear-gradient(90deg,transparent,var(--tier),transparent);
  margin-bottom:.440em;opacity:.8}
.ckick{font-family:'Cinzel',serif;font-size:.380em;letter-spacing:.26em;color:var(--tier-lt);
  text-transform:uppercase;margin-bottom:.240em}
/* ---------- variante compacta ----------
   .ckick/.cev/.cctx están dimensionados para la card grande del perfil. En una
   card de ~180px (tira de competidores, directorio) 1em ≈ 15px y .380em cae a
   ~5,8px: ilegible. .compact sube sólo el renglón de etiqueta y le afloja el
   tracking. No toca el resto: el nombre sigue mandando en la jerarquía. */
.scene.compact .ckick{font-size:.52em;letter-spacing:.12em}
/* .92em = 25px en la card de referencia. El JS lo achica si el nombre es largo. */
.cnm{font-family:'Cinzel',serif;color:#fff;font-weight:600;line-height:1.05;font-size:.92em;white-space:nowrap}
.cev{font-size:.400em;color:var(--parch);margin-top:.280em;line-height:1.4}
.cctx{font-size:.320em;letter-spacing:.14em;color:var(--tier-lt);margin-top:.200em;text-transform:uppercase}
.cdt{font-size:.360em;color:var(--parch-dim);margin-top:.200em}

/* ---------- dorso ---------- */
.bkin{position:relative;width:100%;height:100%;border-radius:1.57%;overflow:hidden;
  background:radial-gradient(ellipse at 50% 34%,#1c140c 0%,#120d08 55%,#0b0805 100%);
  box-shadow:inset 0 0 0 1px rgba(232,220,192,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:5.86% 6.92% 4.05%}
.bkweave{position:absolute;inset:0;opacity:.055;
  background-image:repeating-linear-gradient(45deg,var(--parch) 0 1px,transparent 1px 9px),
                   repeating-linear-gradient(-45deg,var(--parch) 0 1px,transparent 1px 9px)}
.bkfr{position:absolute;inset:3.46%;border:1px solid var(--tier);opacity:.42;border-radius:3px}
.bkh{position:relative;z-index:3;font-family:'Cinzel',serif;font-size:.320em;letter-spacing:.34em;
  color:var(--parch-dim);text-transform:uppercase}
.bkm{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.720em}
.bklogo{width:25.16%;aspect-ratio:1;background-size:contain;background-repeat:no-repeat;
  background-position:center;opacity:.9}
.bkq{font-family:'Cinzel',serif;font-size:.640em;line-height:1.5;color:#fff;text-align:center;
  font-style:italic;max-width:90%}
.bkau{font-size:.340em;letter-spacing:.14em;color:var(--tier-lt);text-transform:uppercase;
  opacity:.85;margin-top:.160em;text-align:center}
.bkf{position:relative;z-index:3;width:100%;text-align:center}
.bkd{height:1px;background:linear-gradient(90deg,transparent,var(--tier),transparent);
  opacity:.6;margin-bottom:.440em}
.bkcid{font-size:.360em;letter-spacing:.22em;color:var(--parch)}
/* Link de verificación sobre el código. Hereda color y tracking: tiene que
   leerse como el código que ya era, no como un botón pegado encima. */
.bkcid .bkverify{color:inherit;text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;text-decoration-color:var(--tier)}
.bkcid .bkverify:hover{color:var(--tier-lt);text-decoration-color:var(--tier-lt)}
.bkmt{font-size:.280em;letter-spacing:.11em;color:#6d6152;margin-top:.160em;line-height:1.75}