/* cs-max 2026-10-18: pictures + display type for the two CS player panels (Zombie Plague #csDash, CS 1.6 Public
   #flowCsPub). Owner: "upgrade it with the maximum, use chatgpt add pictures ... change to better fonts".
   Pictures (ChatGPT, /assets/cs-art-20261018/) come from js/cs-art-20261018.js: weapon renders on every skin card,
   the case's own crate on case chips, the current map's scene behind the live server card, medals on the top 3.
   Type: Chakra Petch - the site's own display face (style.css @font-face, latin + latin-ext) - for card titles,
   player names and headline numbers; Inter stays for text, JetBrains Mono for small figures. Loaded last. */

/* ---------- display type ---------- */
#flowCsPub :is(.cspub-h, .cspub-hero__title, .cspub-profile__name, .cspub-shop-item__name),
#flowCs #csDash.pp-dash.zp-max :is(.pp-card__title, .cs-section-title, .zpm-inv__title h2, #csBadge, .pp-item__name) {
  font-family: 'Chakra Petch', Inter, system-ui, sans-serif; letter-spacing: .01em;
}
#flowCsPub .cspub-h,
#flowCs #csDash.pp-dash.zp-max :is(.pp-card__title, .cs-section-title, .zpm-inv__title h2) {
  font-weight: 700; font-size: 21px; line-height: 1.25;
}
#flowCs #csDash.pp-dash.zp-max .pp-cs-board-card .pp-card__title { font: 600 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: .04em; }
#flowCsPub .cspub-hero__title { font-weight: 700; font-size: 34px; }
#flowCsPub .cspub-profile__name, #flowCs #csDash.pp-dash.zp-max #csBadge { font-weight: 700; }
/* headline numbers: squared HUD digits */
#flowCsPub :is(.cspub-money b, .cspub-today b, .cspub-counts b, .cspub-eco b, .cspub-live b.cspub-live__count, .cspub-shop-item__price),
#flowCs #csDash.pp-dash.zp-max :is(#csPacks, #csRank, #csLevel, #csLiveOnline, .pp-cs-tier__copy strong, .cs-combat-stats strong, .cs-item-stat strong,
  .pp-cs-metrics strong, .pp-cs-economy-grid strong, .cs-race-stat > strong, .pp-item__price) {
  font-family: 'Chakra Petch', Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: .01em;
}
#flowCsPub .cspub-money .cspub-money__main b { font-size: 34px; }
#flowCsPub .cspub-live b.cspub-live__count, #flowCs #csDash.pp-dash.zp-max #csLiveOnline { font-size: 44px; }
#flowCs #csDash.pp-dash.zp-max #csLevel { font-size: 54px; }
/* the leader name is a player name, often non-Latin: keep Inter there */
#flowCs #csDash.pp-dash.zp-max #csLeaderName { font-family: Inter, system-ui, sans-serif; }

/* ---------- skin cards: the weapon on show (CS2 inventory look) ---------- */
#flowCsPub .cspub-skins, #flowCs #csDash.pp-dash.zp-max .zpm-skins { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
#flowCsPub .cspub-skin.has-img, #flowCs #csDash.pp-dash.zp-max .zpm-skin.has-img {
  padding-top: 104px; align-content: start;
  background:
    radial-gradient(70% 58% at 50% 28%, color-mix(in srgb, var(--rar) 30%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--rar) 12%, rgba(4, 20, 35, .8)), rgba(4, 20, 35, .78) 70%);
}
#flowCsPub .cspub-skin.has-img::before, #flowCs #csDash.pp-dash.zp-max .zpm-skin.has-img::before {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px;   /* rarity bar moves to the bottom edge */
}
#flowCsPub .cspub-skin__img, #flowCs #csDash.pp-dash.zp-max .zpm-skin__img {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: 82%; height: 80px; object-fit: contain; pointer-events: none;
  filter: brightness(1.18) contrast(1.05) drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px color-mix(in srgb, var(--rar) 38%, transparent));
  transition: transform .2s ease;
}
#flowCsPub .cspub-skin.has-img:hover .cspub-skin__img,
#flowCs #csDash.pp-dash.zp-max .zpm-skin.has-img:hover .zpm-skin__img { transform: translateX(-50%) scale(1.06); }
#flowCsPub .cspub-skin.has-img .cspub-skin__qty, #flowCs #csDash.pp-dash.zp-max .zpm-skin.has-img .zpm-skin__qty {
  padding: 3px 6px; border-radius: 4px; background: rgba(4, 12, 22, .75);
}

/* ---------- case chips: the case's own crate ---------- */
#flowCsPub .cspub-chip.has-img { padding: 4px 10px 4px 4px; }
#flowCsPub .cspub-chip__img, #flowCs #csDash.pp-dash.zp-max .zpm-chip.has-case img { width: 34px; height: 24px; object-fit: contain; }

/* ---------- live server: the current map's scene ---------- */
#flowCsPub .cspub-box.cspub-live.has-map,
#flowCs #csDash.pp-dash.zp-max .pp-cs-intel.has-map {
  background:
    linear-gradient(180deg, rgba(7, 18, 29, .12) 0, rgba(7, 18, 29, .5) 90px, rgba(7, 18, 29, .9) 175px, rgba(7, 18, 29, .96) 100%),
    var(--cs-map-art) center top / 100% auto no-repeat,
    rgba(7, 18, 29, .9);
}
#flowCsPub .cspub-live.has-map :is(.cspub-h, .cspub-live__count, #cspubLiveMap),
#flowCs #csDash.pp-dash.zp-max .pp-cs-intel.has-map :is(.pp-card__title, #csLiveOnline, #csLiveMap) { text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }

/* ---------- rankings: medals for the top three ---------- */
#flowCsPub .cspub-top__pos.is-medal,
#flowCs #csDash.pp-dash.zp-max .pp-cs-rank-pill.zpm-medal,
#flowCs #csDash.pp-dash.zp-max .pp-board tbody tr:nth-child(-n+3) .pp-cs-rank-pill.zpm-medal {
  display: inline-block; width: 22px; height: 27px; vertical-align: middle; overflow: hidden;
  color: transparent; font-size: 0; background: var(--medal) center / contain no-repeat;
}

@media (max-width: 640px) {
  #flowCsPub .cspub-hero__title { font-size: 26px; }
  #flowCsPub .cspub-skins, #flowCs #csDash.pp-dash.zp-max .zpm-skins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #flowCsPub .cspub-skin.has-img, #flowCs #csDash.pp-dash.zp-max .zpm-skin.has-img { padding-top: 78px; }
  #flowCsPub .cspub-skin__img, #flowCs #csDash.pp-dash.zp-max .zpm-skin__img { height: 58px; top: 12px; }
  #flowCsPub .cspub-skin__name, #flowCs #csDash.pp-dash.zp-max .zpm-skin__name { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #flowCsPub .cspub-skin__img, #flowCs #csDash.pp-dash.zp-max .zpm-skin__img { transition: none; }
}