/* ═══════════════════════════════════════════════════════════════════════════════
   TARJETA DE PERFIL A PANTALLA COMPLETA (18-profile-card.js)
   ═══════════════════════════════════════════════════════════════════════════════
   Una sola pieza con toda la información pública del perfil, pensada para llenar
   la pantalla en desktop y en móvil landscape (y en carta vertical en portrait).

   ── CÓMO ESCALA ──────────────────────────────────────────────────────────────
   `.pcard` tiene proporción fija y se ajusta al eje que limite (aspect-ratio +
   max-height). Es además un container query (`container-type: size`), así que
   `.pcard-inner` fija su font-size en `cqh` y TODO lo de dentro mide en `em`:
   un único juego de medidas vale para 360px de alto y para 1440p. Si tocas algo
   aquí, usa `em` — un `px` suelto rompe el escalado en móvil.

   ── NADA HACE WRAP ───────────────────────────────────────────────────────────
   Ningún texto salta de línea: va todo en `white-space: nowrap` y es el JS quien
   le baja el font-size hasta que cabe (_pcardFitText). De ahí que los textos
   ajustables lleven `overflow: hidden` y sean bloques o ítems flex/grid — hace
   falta un ancho definido contra el que medir. Única excepción: el lema, que es
   una frase y sí se compone en varias líneas.

   ── ESTRUCTURA ───────────────────────────────────────────────────────────────
   Panel de identidad (izquierda, cristal) + columna de datos (derecha) con una
   tira de cifras, el bloque de atributos y el Multipal. Los paneles son
   translúcidos con blur para que el fondo equipado se siga viendo sin comerse
   la legibilidad.

   Los cosméticos se reutilizan tal cual: `.pframe-*` va en `.pcard` y `.frame-*`
   en `.pcard-avatar-wrap` (profile.css). */

body.pcard-open { overflow: hidden; }

.pcard-stage {
  --pcard-pad:  clamp(10px, 2.2vmin, 34px);
  --tool-inset: clamp(8px, 1.6vmin, 20px);
  --tool-size:  38px;
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  padding: var(--pcard-pad);
  /* Banda propia para .pcard-tools: en portrait la tarjeta mide el 100% del
     escenario y los botones le caían encima. Reservando el alto arriba, la
     tarjeta nunca los alcanza y quedan siempre despejados. */
  padding-top: calc(var(--tool-inset) + var(--tool-size) + 10px);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 12% -5%, var(--red-subtle) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 88% 108%, var(--accent-glow) 0%, transparent 55%);
  opacity: 0; transition: opacity .22s var(--ease-out);
}
.pcard-stage.open { opacity: 1; }

/* z-index alto y no 2: por encima de la tarjeta, su marco animado, el velo del
   fondo y la capa de partículas — pase lo que pase, los botones se ven. */
.pcard-tools {
  position: absolute; top: var(--tool-inset); right: var(--tool-inset); z-index: 20;
  display: flex; gap: 8px;
}
.pcard-tool {
  width: var(--tool-size); height: var(--tool-size); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.pcard-tool:hover  { background: var(--surface-3); color: var(--text-1); border-color: var(--border-hi); }
.pcard-tool:active { transform: scale(.92); }

/* ── LA TARJETA ─────────────────────────────────────────────────────────────── */
.pcard {
  --ar: 16 / 10;
  aspect-ratio: var(--ar);
  width: 100%; max-width: 1500px; max-height: 100%;
  position: relative; overflow: hidden;
  container-type: size;
  border-radius: var(--radius-xl);
  /* `backwards` y no `both`: con fill hacia delante la animación se quedaría
     dueña de `transform` para siempre y el parallax de ratón no podría tocarlo
     (mismo motivo por el que .profile-animate se quita a mano en 07-boot.js). */
  animation: pcardIn .32s var(--ease-out) backwards;
}
/* Especificidad cero para que cualquier .pframe-* gane: los marcos degradados
   pintan su borde con background (padding-box/border-box) y su propia sombra, y
   una regla normal de .pcard los anularía (mismo truco que .profile-identity.mini). */
:where(.pcard) {
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
@keyframes pcardIn { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .pcard { animation: none; } }

/* Fondo equipado a sangre completa. Sin fondo, el scrim solo aporta profundidad. */
.pcard-bg {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background-image: var(--pbg-url, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity .25s ease;
}
.pcard-bg.is-active { opacity: 1; }
/* En retrato la tarjeta ocupa toda la pantalla: si el fondo trae versión vertical
   (`has-v`, la pone 18-profile-card.js), se usa esa en lugar de recortar la
   apaisada a un ratio que se come la composición. */
@media (orientation: portrait) {
  .pcard-bg.has-v { background-image: var(--pbg-url-v); }
}
/* Velo en degradado: casi opaco donde va la identidad y más abierto a la derecha,
   para que la imagen se lea como banner. Los paneles de cristal ponen el resto de
   la legibilidad; sin este velo, un fondo claro en tema claro lava la tarjeta. */
.pcard-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--surface-1) 92%, transparent) 0%,
      color-mix(in srgb, var(--surface-1) 78%, transparent) 45%,
      color-mix(in srgb, var(--surface-1) 62%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface-0) 60%, transparent), transparent 60%);
}

/* Marcos de partículas: su ::before (profile.css) vive en z-index 0, igual que la
   capa de fondo, así que una imagen equipada lo tapaba. Aquí se sube por encima
   del fondo y el contenido pasa a z-index 2. */
.pcard.pframe-starfield::before,
.pcard.pframe-embers::before,
.pcard.pframe-confetti::before,
.pcard.pframe-glitter::before,
.pcard.pframe-fireflies::before { z-index: 1; }

.pcard-inner {
  --pc-accent: var(--gold);
  position: relative; z-index: 2;
  height: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
  gap: 1.1em; padding: 1.3em;
  font-size: clamp(9px, 4.1cqh, 30px);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-1); line-height: 1.35;
}

/* Superficie común de todos los bloques: cristal translúcido sobre el fondo. */
.pcard-panel {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-1) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-hi) 75%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
/* Rótulo de sección: minúscula versalita + filete hasta el borde. */
.pcard-panel-head {
  display: flex; align-items: center; gap: .6em;
  font-size: .58em; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.pcard-panel-head::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: color-mix(in srgb, var(--border-hi) 70%, transparent);
}

/* ── PANEL DE IDENTIDAD ─────────────────────────────────────────────────────── */
/* Todo centrado, igual en horizontal que en vertical: el avatar manda el eje y el
   resto de la identidad se alinea con él. */
.pcard-side {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .28em; padding: 1.3em 1.2em; min-width: 0;
}
/* Filo superior con el color de la casa: ancla la tarjeta a su identidad sin
   añadir otro texto. */
.pcard-side::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: .2em;
  background: linear-gradient(90deg, var(--pc-accent) 0%, color-mix(in srgb, var(--pc-accent) 35%, transparent) 60%, transparent 100%);
}

/* Solo existe como ámbito para los efectos animados de marco (profile.css los
   escribe como "<ámbito> .frame-*" para que no aparezcan en los avatares mini). */
.pcard-avatar-scope { display: inline-flex; }

.pcard-avatar-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: .22em; margin-bottom: .5em; flex-shrink: 0;
  /* --deco-k solo escala el micro-ajuste --dx/--dy del catálogo (≤8px en las dos
     decoraciones que lo usan); el tamaño y los anclajes se rehacen en `em` justo
     debajo, porque los de profile.css están en px y no seguirían a la tarjeta. */
  --deco-k: 1.6;
}
/* Decoración a escala de la tarjeta. Referencia de profile.css: avatar 46px →
   fuente 22px y anclajes -16/-8/-13px. Aquí el avatar mide 6.4em, así que la
   fuente es 6.4em × 22/46 = 3.06em; los anclajes van en `em` de la PROPIA
   decoración (-16/22, -8/22, -13/22) y se dividen por --ds, que ya está dentro
   de su font-size, para que un `scale` del catálogo no desplace el anclaje. */
.pcard-avatar-wrap .avatar-decoration                { font-size: calc(3.06em * var(--ds)); }
.pcard-avatar-wrap .avatar-decoration.deco-top       { top: calc(-.727em / var(--ds)); }
.pcard-avatar-wrap .avatar-decoration.deco-top-right { top: calc(-.364em / var(--ds)); right: calc(-.364em / var(--ds)); }
.pcard-avatar-wrap .avatar-decoration.deco-top-left  { top: calc(-.364em / var(--ds)); left:  calc(-.364em / var(--ds)); }
.pcard-avatar-wrap .avatar-decoration.deco-left      { left: calc(-.591em / var(--ds)); }
/* font-size da el tamaño del emoji; width/height van en em de ESTE elemento, así
   que 1.78em × 3.6em = 6.4em de la tarjeta (el valor que asumen los anclajes de
   la decoración de arriba). Si cambias uno, recalcula el otro. */
.pcard-avatar {
  width: 1.78em; height: 1.78em; font-size: 3.6em; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: 50%; overflow: hidden;
}
/* La pill de nivel es la ÚNICA forma en que el nivel aparece en la identidad:
   el perfil quitó su línea de rango para no repetir el dato. */
.pcard-level-badge {
  position: absolute; bottom: -.15em; right: -.15em; z-index: 2;
  background: var(--gold); color: var(--surface-0);
  font-size: .82em; font-weight: 800; letter-spacing: .02em;
  padding: .12em .55em; border-radius: 999px; border: .13em solid var(--surface-1);
  white-space: nowrap;
}

/* Los textos ajustables: bloque a ancho completo, una línea y recorte de
   seguridad por si el ajuste del JS se queda a un pelo (nunca debería). */
.pcard-name, .pcard-title, .pcard-affinity {
  display: block; width: 100%; min-width: 0;
  white-space: nowrap; overflow: hidden;
}
.pcard-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 3.1em; letter-spacing: .02em;
  line-height: 1.06; color: var(--text-1);
}
.pcard-title {
  margin-top: .1em;
  font-size: .92em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pc-accent);
}
.pcard-house { display: flex; align-items: center; justify-content: center; gap: .45em; width: 100%; margin-top: .5em; }
.pcard-house-ico { display: inline-flex; width: 1.35em; height: 1.35em; align-items: center; justify-content: center; flex-shrink: 0; }
.pcard-house-ico img, .pcard-house-ico svg { width: 100%; height: 100%; object-fit: contain; }
/* Ancho por contenido (no 100%) para que el nombre no se despegue de su escudo
   cuando el panel va centrado; encoger es cosa del ajuste del JS. */
.pcard-house-name { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; }
.pcard-affinity { font-size: .8em; color: var(--text-3); margin-top: .1em; }
.pcard-affinity img, .pcard-affinity svg { width: 1em; height: 1em; vertical-align: -.15em; }

/* Las insignias se reutilizan del perfil (.profile-badge), pero allí miden en rem
   y px: aquí se redefinen en em para que sigan la escala de la tarjeta. */
.pcard-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em; margin-top: .55em; font-size: .74em; }
.pcard-badges .profile-badge { font-size: 1em; gap: .3em; padding: .18em .7em; white-space: nowrap; }

/* El lema es la única excepción a la regla de "una línea": es una frase y se
   compone como tal. El bloque entero va centrado en el panel (justify-content),
   así que el lema se queda pegado al resto en vez de dejar un hueco en medio. */
.pcard-motto {
  margin-top: .9em; padding-top: .8em; width: 100%;
  font-size: .88em; font-style: italic; color: var(--text-2);
  line-height: 1.45; overflow-wrap: break-word;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* ── COLUMNA DE DATOS ───────────────────────────────────────────────────────── */
.pcard-main { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; min-height: 0; }
/* Los botones de la capa (compartir/cerrar) caen sobre la esquina superior
   derecha de la tarjeta, que es justo donde empieza esta columna: la primera
   fila reserva ese hueco para que no tapen ninguna cifra. */
.pcard-main > .pcard-panel:first-child > :first-child { padding-right: 2.4em; }

/* Tira de cifras: un solo bloque con filetes entre datos en vez de N cajitas
   sueltas — con 2 datos (docentes) o con 5 (estudiante) se lee igual de bien. */
.pcard-figures { flex: 0 0 auto; display: flex; flex-direction: column; }
.pcard-strip { display: flex; align-items: stretch; }
.pcard-stat {
  flex: 1 1 0; min-width: 0;
  padding: .85em .5em; text-align: center;
  border-left: 1px solid color-mix(in srgb, var(--border-hi) 55%, transparent);
}
.pcard-stat:first-child { border-left: 0; }
.pcard-stat-val {
  font-family: 'Bebas Neue', sans-serif; font-size: 2.2em; line-height: 1;
  letter-spacing: .02em; color: var(--text-1);
  display: flex; align-items: center; justify-content: center; gap: .18em;
  white-space: nowrap;
}
.pcard-stat-val svg { width: .78em; height: .78em; }
.pcard-stat-key {
  display: block; margin-top: .45em;
  font-size: .58em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap; overflow: hidden;
}

.pcard-xp { padding: 0 1.1em 1em; }
.pcard-xp-track {
  height: .45em; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--surface-3) 85%, transparent);
  border: 1px solid var(--border);
}
.pcard-xp-fill { height: 100%; border-radius: 999px; }
.pcard-xp-label {
  display: block; margin-top: .4em; font-size: .68em; color: var(--text-3);
  white-space: nowrap; overflow: hidden;
}
.pcard-xp-label svg { width: 1em; height: 1em; vertical-align: -.15em; }

/* ── ATRIBUTOS ──────────────────────────────────────────────────────────────── */
/* El panel de atributos absorbe el alto sobrante de la columna. `flex: 1 1 0`
   (base 0, no `auto`) es lo que evita que el radar aporte su alto intrínseco y
   desborde la tarjeta: coge exactamente lo que queda. Para que el `height: 100%`
   del SVG tenga contra qué resolver, la fila del grid va en `stretch`; el SVG
   lleva viewBox, así que se escala y se centra solo sin deformarse. */
.pcard-attrs-panel {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: .5em;
  padding: .9em 1.1em 1em;
}
.pcard-attrs {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: stretch; gap: 1em;
}
.pcard-attrs-chart { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pcard-attrs-chart .radar-svg { width: 100%; height: 100%; display: block; }
/* Una sola rejilla para TODOS los ejes (las filas van en `display: contents`), no
   una por fila: así la columna de etiquetas mide lo mismo en todas y las barras
   arrancan y acaban alineadas. Con una rejilla por fila cada barra salía de un
   largo distinto. La etiqueta va en `auto`: se ajusta a la más larga sin cortarse. */
.pcard-axes {
  display: grid; grid-template-columns: minmax(0, auto) minmax(1.5em, 1fr) 1.3em;
  align-items: center; align-content: center;
  gap: .4em .55em; min-width: 0; font-size: .74em;
}
.pcard-axis { display: contents; }
.pcard-axis-name { color: var(--text-2); white-space: nowrap; overflow: hidden; }
.pcard-axis-bar {
  height: .45em; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--surface-3) 85%, transparent);
  border: 1px solid var(--border);
}
.pcard-axis-fill { display: block; height: 100%; border-radius: 999px; }
.pcard-axis-val { font-weight: 700; text-align: right; color: var(--text-1); white-space: nowrap; }

/* ── MULTIPAL ───────────────────────────────────────────────────────────────── */
/* El borde toma el color de la rareza; el resto de la superficie es la de
   cualquier panel (se sobreescribe solo border-color). */
.pcard-pet {
  --rc: var(--rar-common);
  /* `margin-top: auto` solo actúa si no hay panel de atributos (que ya absorbe el
     sobrante): entonces el Multipal se va abajo en vez de dejar un hueco muerto. */
  flex: 0 0 auto; margin-top: auto;
  display: flex; align-items: center; gap: .75em;
  padding: .7em .9em;
  border-color: color-mix(in srgb, var(--rc) 55%, transparent);
}
.pcard-pet.rarity-uncommon  { --rc: var(--rar-uncommon); }
.pcard-pet.rarity-rare      { --rc: var(--rar-rare); }
.pcard-pet.rarity-mythic    { --rc: var(--rar-mythic); }
.pcard-pet.rarity-legendary { --rc: var(--rar-legendary); }
.pcard-pet-emoji { font-size: 2em; line-height: 1; flex-shrink: 0; }
.pcard-pet-info { display: flex; flex-direction: column; gap: .12em; min-width: 0; flex: 1 1 auto; }
.pcard-pet-head { display: flex; align-items: center; gap: .5em; min-width: 0; }
.pcard-pet-name { font-weight: 700; white-space: nowrap; overflow: hidden; min-width: 0; }
.pcard-pet-rarity {
  flex-shrink: 0;
  font-size: .6em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .18em .7em; border-radius: 999px; color: var(--rc);
  border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent);
  background: color-mix(in srgb, var(--rc) 14%, transparent);
  white-space: nowrap;
}
.pcard-pet-sub { font-size: .74em; color: var(--text-3); white-space: nowrap; overflow: hidden; }

/* Halo de legibilidad cuando hay fondo equipado. Los paneles ya velan la imagen,
   así que solo lo necesita el texto que va suelto sobre ella: el del radar. */
.pcard-bg.is-active ~ .pcard-inner :is(.radar-axis-label, .radar-axis-val) {
  text-shadow: 0 1px 8px var(--surface-1), 0 0 3px var(--surface-1);
}

/* ── PARALLAX DE RATÓN (solo escritorio) ────────────────────────────────────
   La tarjeta se inclina hacia el cursor y sus capas se separan: el fondo se
   desplaza hacia un lado, el contenido hacia el otro y un brillo sigue al
   puntero. Los valores los escribe 18-profile-card.js en estas variables; si no
   hay ratón o el sistema pide menos movimiento no se enlaza nada y todas se
   quedan en cero, así que estas reglas son la identidad.

   No hay translateZ ni preserve-3d: `overflow: hidden` en .pcard fuerza
   transform-style: flat, así que la profundidad la dan las capas moviéndose a
   distinta velocidad, no la perspectiva real. */
.pcard-glare {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 42%);
}

@media (hover: hover) and (pointer: fine) {
  .pcard-stage { perspective: 1600px; }
  .pcard       { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
  .pcard-bg    { transform: scale(1.08) translate3d(var(--par-x, 0px), var(--par-y, 0px), 0); }
  .pcard-inner { transform: translate3d(var(--fore-x, 0px), var(--fore-y, 0px), 0); }
  .pcard, .pcard-bg, .pcard-inner, .pcard-glare {
    transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
  }
  /* Mientras el puntero se mueve la transición estorba: la tarjeta seguiría al
     cursor con retardo. Solo interesa para entrar y salir del efecto. */
  .pcard.is-tilting,
  .pcard.is-tilting .pcard-bg,
  .pcard.is-tilting .pcard-inner { transition: none; }
  .pcard.is-tilting .pcard-glare { opacity: 1; }
  /* Un click congela la pose y otro la suelta (_pcardToggleTiltFreeze). */
  .pcard { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard-bg, .pcard-inner, .pcard-glare { transition: none; }
}

/* ── PORTRAIT: una sola columna ─────────────────────────────────────────────── */
@media (orientation: portrait) {
  /* Sin proporción fija: los móviles van de 3/4 a 9/21 y cualquier ratio dejaría
     un hueco muerto en la mitad de ellos. Aquí la tarjeta ocupa la pantalla y es
     el contenido el que se reparte (el font-size en cqh sigue funcionando igual). */
  .pcard { aspect-ratio: auto; width: 100%; height: 100%; }
  /* Flex en columna en vez de grid: con filas `auto` nada cede y bastaba con que
     el contenido midiera unos píxeles de más para desbordar. Así identidad,
     cifras y Multipal miden por su contenido y el panel de atributos absorbe
     exactamente el alto que sobra — el mismo reparto que en horizontal. */
  .pcard-inner {
    display: flex; flex-direction: column;
    gap: .9em; padding: .9em;
    font-size: clamp(9px, 1.9cqh, 24px);
  }
  .pcard-side { flex: 0 0 auto; padding: 1.1em 1em; }
  .pcard-main { flex: 1 1 auto; min-height: 0; }
  /* La lista de ejes se va: el radar ya imprime el valor de cada eje bajo su
     etiqueta y en vertical el ancho no da para las dos cosas. */
  .pcard-attrs { grid-template-columns: 1fr; }
  .pcard-axes { display: none; }
}

/* Landscape muy bajo (móvil girado): la altura es el recurso escaso. Se quita el
   aire y desaparece la lista de ejes — el propio radar ya imprime el valor de
   cada eje bajo su etiqueta, así que no se pierde ningún dato. */
@media (orientation: landscape) and (max-height: 460px) {
  /* La banda de los botones también adelgaza: aquí cada píxel de alto cuenta. */
  .pcard-stage { --tool-size: 32px; --tool-inset: 6px; }
  .pcard-inner { gap: .8em; padding: .9em; }
  .pcard-main { gap: .8em; }
  .pcard-side { padding: 1em .9em; gap: .2em; }
  .pcard-avatar-wrap { margin-bottom: .3em; }
  .pcard-stat { padding: .6em .4em; }
  .pcard-xp { padding: 0 .9em .8em; }
  .pcard-attrs { grid-template-columns: 1fr; }
  .pcard-axes { display: none; }
}