/* ============================================================
   V5.1G — CHARACTER CARDS XL
   Det är .face/porträttkortet som ska bli större, INTE hela .party.
   V5.1E fortsätter hålla alla porträtt geometriskt lika.
   ============================================================ */

/* 16:9 — porträttkortet blir tydligt större.
   top:42px reserverar header/partinamn helt. */
body:not([data-pixel-layout="9"]) .parties .party .face{
  top:42px !important;
  bottom:-2px !important;
  right:-2px !important;

  width:6.45vw !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  aspect-ratio:auto !important;

  border-radius:0 !important;
  overflow:hidden !important;

  transform:none !important;
  transform-origin:bottom right !important;
  opacity:1 !important;
}

/* Ingen hover får trycka upp porträttkortet igen. */
body:not([data-pixel-layout="9"]) .parties .party:hover .face,
body:not([data-pixel-layout="9"]) .parties .party.hot .face{
  transform:none !important;
  opacity:1 !important;
}

/* V3-avataren fyller den nya större rutan. */
body:not([data-pixel-layout="9"]) .parties .party .face .v3Avatar{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

/* Själva figuren får maximalt utrymme men bottenlinjeras. */
body:not([data-pixel-layout="9"]) .parties .party .face > img,
body:not([data-pixel-layout="9"]) .parties .party .face .v3Avatar img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
  object-position:center bottom !important;

  transform:none !important;
  transform-origin:center bottom !important;
}

/* Färgkortet ska synas, men inte lägga glow över partinamnet. */
body:not([data-pixel-layout="9"]) .parties .party .face{
  box-shadow:
    inset 3px 0 0 color-mix(in srgb,var(--pc),transparent 10%),
    0 0 14px color-mix(in srgb,var(--pc),transparent 72%) !important;
}

/* Partinamnet får hela headern för sig själv. */
body:not([data-pixel-layout="9"]) .parties .party .head{
  position:relative !important;
  z-index:8 !important;
}

body:not([data-pixel-layout="9"]) .parties .party .name{
  position:relative !important;
  z-index:9 !important;
}

/* 9:16 får en separat proportional boost utan att bli grotesk. */
body[data-pixel-layout="9"] .parties .party .face{
  top:18% !important;
  bottom:-2% !important;
  right:-1% !important;
  width:13.6vw !important;
  height:auto !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  transform:none !important;
  opacity:1 !important;
  overflow:hidden !important;
}

body[data-pixel-layout="9"] .parties .party .face .v3Avatar{
  inset:0 !important;
}

body[data-pixel-layout="9"] .parties .party .face > img,
body[data-pixel-layout="9"] .parties .party .face .v3Avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:none !important;
}