/* ============================================================================
   pulse-chip.css — KANONISK CSS för user-chippet och kosmetiken.
   Utbruten ur App\Helpers\UserChipService::styles() 2026-07-26 (Kenta: "det ska
   funka felfritt").

   VARFÖR filen finns:
   styles() skrev CSS:en inline och MAX EN GÅNG per request (static $stylesEmitted).
   Den som råkade anropa metoden först "ägde" stilblocket — och wall-post-card.php
   beräknade $__cosCss högst upp för VARJE post, även auto-/event-poster vars
   .pev-gren aldrig ekade variabeln. Bar en auto-posts författare ett märke slukades
   hela <style>-blocket tyst, och senare chip på samma sida (t.ex. Creators live i
   hub-railen) renderades helt ostylade: .uchip-ico föll tillbaka på bildens
   naturliga 512×512 = jättelik rankikon i högerrailen.

   Filen laddas ALLTID i pulse-skalet (layouts/default.php, direkt efter
   forre_pulse.css). Chip finns på hub, profil, forum, leaderboard, streaming,
   clips och coins — rutt-gating vore bara en ny variant av samma fälla.
   ~1 KB, filemtime-versionerad som allt annat.

   Klasserna sätts av UserChipService::renderChip/renderBadge/renderTitle.
   Ändra ALDRIG färg/storlek här utan att kolla pulse-coins.css, som speglar
   märket i butiksförhandsvisningen.
   ============================================================================ */

/* ── Rank-chippet (förslag B, Kenta 2026-07-17) ──────────────────────────────
   Stillren badge: ingen färgplatta — ikonen bär rankfärgen, texten är neutral
   och dämpad. Storlek = navbar-menyns 13px, weight 500. Temafärger via
   --dim/--ink2 så samma regler funkar i både ljust och mörkt tema. */
.uchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--dim, #5a6472);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* Rankikonen levereras i 512×512 från Epic — utan denna regel exploderar den. */
.uchip-ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}

.uchip-season { opacity: .65; font-weight: 500; }
.uchip-stat   { color: var(--dim, #8a93a0); font-weight: 400; }
.uchip-stat b { color: var(--ink2, #5a6472); font-weight: 600; }

/* ── Kosmetik (2026-07-26) ───────────────────────────────────────────────────
   Märket är EN sprite-fil för alla ikoner. --fcb styr storleken på ETT ställe;
   arket är 2x så nedskalning blir skarp på retina. Ramen bär sällsyntheten
   (ShopService rarity-färger) — därför kan samma ikon flyttas mellan nivåer
   utan att någon ritar om något. */
.fc-b {
  --fcb: 20px;
  --fcr: #C7C7C7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--fcb) + 7px);
  height: calc(var(--fcb) + 7px);
  border-radius: 7px;
  flex: 0 0 auto;
  vertical-align: middle;
  background: rgba(127, 138, 155, .10);
  background: color-mix(in srgb, var(--fcr) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fcr) 42%, transparent);
}
.fc-b.fc-lg { --fcb: 32px; }
.fc-b.fc-sm { --fcb: 15px; border-radius: 5px; }

.fc-r-uncommon  { --fcr: #319236; }
.fc-r-rare      { --fcr: #4C51F7; }
.fc-r-epic      { --fcr: #9D4DBB; }
.fc-r-legendary { --fcr: #FF8000; }
.fc-r-mythic    { --fcr: #F3AF19; }

.fc-badge {
  display: inline-block;
  width: var(--fcb, 24px);
  height: var(--fcb, 24px);
  /* ?v=<hash> KRAVS (2026-07-26): arket bytte fran 8 till 14 ikoner och alla
     webblasare satt kvar pa den gamla 480x48-filen — ratt CSS-positioner mot
     fel bild = tomma rutor och forskjutna ikoner. Hashen sätts automatiskt av
     TEMP/build_cosmetics.py vid varje bygge. Redigera den inte for hand. */
  background-image: url(/public/images/cosmetics/badges.png?v=0191e67c);
  background-repeat: no-repeat;
  /* Arket ar 10 kolumner brett. 'auto' pa hojden gor att flera RADER fungerar
     utan andring har — 2026-07-26 vaxte det fran 8 till 14 ikoner (1 -> 2 rader). */
  background-size: calc(var(--fcb, 24px) * 10) auto;
  flex: 0 0 auto;
}
.fc-badge[data-c="aimgod"]       { background-position: 0 0; }
.fc-badge[data-c="buskcampare"]  { background-position: calc(var(--fcb, 24px) * -1) 0; }
.fc-badge[data-c="byggaren"]     { background-position: calc(var(--fcb, 24px) * -2) 0; }
.fc-badge[data-c="clutchkung"]   { background-position: calc(var(--fcb, 24px) * -3) 0; }
.fc-badge[data-c="dansaren"]     { background-position: calc(var(--fcb, 24px) * -4) 0; }
.fc-badge[data-c="forsta-tusen"] { background-position: calc(var(--fcb, 24px) * -5) 0; }
.fc-badge[data-c="grindare"]     { background-position: calc(var(--fcb, 24px) * -6) 0; }
.fc-badge[data-c="hamstraren"]   { background-position: calc(var(--fcb, 24px) * -7) 0; }
.fc-badge[data-c="hotdroppare"]  { background-position: calc(var(--fcb, 24px) * -8) 0; }
.fc-badge[data-c="klippan"]      { background-position: calc(var(--fcb, 24px) * -9) 0; }
.fc-badge[data-c="lagspelare"]   { background-position: 0 calc(var(--fcb, 24px) * -1); }
.fc-badge[data-c="morgonpigg"]   { background-position: calc(var(--fcb, 24px) * -1) calc(var(--fcb, 24px) * -1); }
.fc-badge[data-c="nattuggla"]    { background-position: calc(var(--fcb, 24px) * -2) calc(var(--fcb, 24px) * -1); }
.fc-badge[data-c="solovargen"]   { background-position: calc(var(--fcb, 24px) * -3) calc(var(--fcb, 24px) * -1); }

/* Titeln: prosa, därför dämpad piller-form på metaraden — aldrig bredvid namnet. */
.fc-title {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--dim, #8a93a0);
  background: rgba(127, 138, 155, .12);
  box-shadow: inset 0 0 0 1px rgba(127, 138, 155, .18);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}