/* DG KOF XV HUB 1.20.0 — Player Card v3.1
 * Single source of truth for the public player card.
 *
 * Layout contract:
 *   identity -> character stage -> footer
 *
 * The card has no fixed/min-height. The character stage derives its height
 * from the card width and the saved artwork aspect ratio. This prevents the
 * old 620px spacer bug and keeps the footer in normal flow.
 */

.dgkof-hub .dgkof-player-grid,
.dgkof-directory-same-card .dgkof-player-grid,
.dgkof-directory-v2 .dgkof-player-grid {
  align-items: start !important;
}

.dgkof-player-card-v31 {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 18px !important;
  background: #090c0d !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
  container-type: inline-size !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg,
      rgba(3,5,6,.12) 0%,
      rgba(3,5,6,.20) 23%,
      rgba(3,5,6,.10) 42%,
      rgba(3,5,6,.62) 60%,
      rgba(4,6,7,.97) 76%,
      rgba(5,7,8,1) 100%),
    linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 58%,rgba(0,0,0,.42));
}

.dgkof-player-card-v31 .dgkof-player-v31-content {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

/* Identity/header: fixed only within a card width breakpoint, never by viewport. */
.dgkof-player-card-v31 .dgkof-player-v31-identity {
  position: relative !important;
  flex: 0 0 174px !important;
  width: 100% !important;
  height: 174px !important;
  min-height: 174px !important;
  display: grid !important;
  grid-template-columns: 96px 54px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 18px 16px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-badge {
  position: relative !important;
  z-index: 30 !important;
  width: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
  display: grid !important;
  place-items: center !important;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.70)) !important;
  cursor: help !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-badge .dgkof-category-badge {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.dgkof-player-card-v31 .dgkof-category-badge-fallback {
  display: grid !important;
  place-items: center !important;
  width: 86px !important;
  height: 86px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 14px !important;
  background: rgba(10,13,14,.75) !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 26px !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-avatar {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  background: #222 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.65) !important;
  pointer-events: auto !important;
  align-self: center !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-avatar span {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 18px !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-identity-copy {
  min-width: 0 !important;
  width: 100% !important;
  max-height: 124px !important;
  overflow: hidden !important;
  padding: 0 !important;
  align-self: center !important;
}

.dgkof-player-card-v31 .dgkof-label-v31 {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 25px !important;
  padding: 0 9px !important;
  box-sizing: border-box !important;
  border-left: 3px solid #ff303b !important;
  border-top: 1px solid rgba(255,255,255,.20) !important;
  border-right: 1px solid rgba(255,255,255,.16) !important;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(8,11,12,.78) !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-identity h3 {
  max-width: 100% !important;
  margin: 5px 0 0 !important;
  font-size: clamp(26px,6.1cqi,43px) !important;
  line-height: .91 !important;
  letter-spacing: -.035em !important;
  font-style: italic !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  text-shadow: 0 3px 15px rgba(0,0,0,.75) !important;
  overflow-wrap: anywhere !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-identity h3 a {
  color: #fff !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-location {
  margin: 7px 0 0 !important;
  color: #cbd2d4 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-location span {
  font-size: 8px !important;
  color: #ff3943 !important;
}

/* The old quick-stat row was an abandoned card generation. It is not rendered
 * in the current footer, so keep it out of the layout if legacy markup appears. */
.dgkof-player-card-v31 .dgkof-player-v31-quick {
  display: none !important;
}

/* Character stage: its height is derived from card width, not from viewport or
 * a minimum card height. Zoom/framing variables affect only the image. */
.dgkof-player-card-v31 .dgkof-player-v31-characters {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: calc(100cqw / 3 / var(--dgkof-frame-ratio,1)) !important;
  min-height: 96px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-showcase-compact {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-card-compact {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: var(--dgkof-character-slot-border,1px solid rgba(255,255,255,.28)) !important;
  border-radius: var(--dgkof-character-area-radius,0px) !important;
  background: var(--dgkof-character-card-bg,rgba(16,19,20,.78)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  container-type: inline-size !important;
  box-sizing: border-box !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-card-compact:last-child {
  border-right: 0 !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-art-compact {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: var(--dgkof-character-art-bg,linear-gradient(145deg,rgba(39,44,46,.78),rgba(7,10,11,.9))) !important;
  border-radius: var(--dgkof-character-area-radius,0px) !important;
  box-sizing: border-box !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-art-compact img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: var(--dgkof-character-fit,cover) !important;
  object-position: var(--dgkof-character-pos-x,50%) var(--dgkof-character-pos-y,0%) !important;
  transform: scale(var(--dgkof-character-scale,1.10)) !important;
  transform-origin: var(--dgkof-character-origin-x,50%) var(--dgkof-character-origin-y,0%) !important;
  border: var(--dgkof-character-image-border,0) !important;
  box-sizing: border-box !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-card-compact > strong {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 15px 5px 7px !important;
  box-sizing: border-box !important;
  color: #fff !important;
  font-size: clamp(7px,2.8cqw,10px) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  background: linear-gradient(180deg,transparent,rgba(5,7,8,.94)) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
  pointer-events: none !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-art-compact span {
  align-self: center !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #888 !important;
}

/* Footer is always the final row in normal flow. */
.dgkof-player-card-v31 .dgkof-player-v31-footer {
  position: relative !important;
  flex: 0 0 68px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  height: 68px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(255,255,255,.20) !important;
  background: linear-gradient(180deg,rgba(7,10,11,.70),rgba(3,5,6,.94)) !important;
  pointer-events: none !important;
}

.dgkof-player-card-v31 .dgkof-player-challenge-v31 {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.28) !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dgkof-player-card-v31 .dgkof-player-challenge-v31 span {
  font-weight: 900 !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-footer-spacer {
  display: block !important;
  width: 1px !important;
  height: 1px !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-match-stat {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: #fff !important;
}

.dgkof-player-card-v31 .dgkof-v31-icon {
  display: grid !important;
  place-items: center !important;
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 7px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.dgkof-player-card-v31 .dgkof-v31-ft-icon { font-size: 8px !important; }

.dgkof-player-card-v31 .dgkof-player-v31-match-stat > div {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-match-stat b {
  font-size: 14px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-match-stat small {
  color: #aeb6b9 !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.dgkof-player-card-v31 .dgkof-v31-separator,
.dgkof-player-card-v31 .dgkof-player-v31-footer-stat,
.dgkof-player-card-v31 .dgkof-player-v31-footer-location {
  display: none !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-brand {
  justify-self: end !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 50px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.dgkof-player-card-v31 .dgkof-player-v31-brand .dgkof-kof-xv-logo {
  display: block !important;
  width: 92px !important;
  height: 50px !important;
  max-width: 92px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  overflow: visible !important;
}

/* Top-5 rank is independent from the content flow. */
.dgkof-player-card-v31 .dgkof-top5-rank-v31 {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 20 !important;
  width: 86px !important;
  height: 58px !important;
  border: 1px solid rgba(255,211,84,.55) !important;
  border-radius: 9px !important;
  background: rgba(5,8,9,.78) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.38) !important;
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  grid-template-rows: 1fr 14px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  color: #fff !important;
  pointer-events: none !important;
}

.dgkof-player-card-v31 .dgkof-top5-rank-v31 .dgkof-rank-crown {
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  color: #ffd14a !important;
  font-size: 21px !important;
}

.dgkof-player-card-v31 .dgkof-top5-rank-v31 b { font-size: 18px !important; line-height: 1 !important; font-weight: 950 !important; }
.dgkof-player-card-v31 .dgkof-top5-rank-v31 small { font-size: 7px !important; letter-spacing: .11em !important; color: #c5cacc !important; font-weight: 900 !important; align-self: start !important; }

/* Category tooltip and saved character-area presentation settings. */
.dgkof-player-card-v31 .dgkof-player-v31-badge::after {
  content: attr(data-category);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%,-4px);
  z-index: 40;
  max-width: 240px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 6px;
  background: rgba(7,10,11,.96);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  color: #fff;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.dgkof-player-card-v31 .dgkof-player-v31-badge:hover::after,
.dgkof-player-card-v31 .dgkof-player-v31-badge:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,0);
}

@media (hover:none) {
  .dgkof-player-card-v31 .dgkof-player-v31-badge::after { display: none !important; }
}

.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-area-mode-clean .dgkof-character-card-compact {
  background: transparent !important;
  border-right: 0 !important;
}
.dgkof-player-card-v31 .dgkof-player-v31-characters .dgkof-character-area-mode-clean .dgkof-character-art-compact {
  background: transparent !important;
}

/* Container breakpoints. These are card-width breakpoints, not viewport hacks. */
@container (max-width: 380px) {
  .dgkof-player-card-v31 .dgkof-player-v31-identity {
    grid-template-columns: 62px 42px minmax(0,1fr) !important;
    flex-basis: 154px !important;
    height: 154px !important;
    min-height: 154px !important;
    padding: 13px 10px 7px !important;
    gap: 7px !important;
  }
  .dgkof-player-card-v31 .dgkof-player-v31-badge { width: 62px !important; height: 62px !important; flex-basis: 62px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-avatar { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-footer { flex-basis: 60px !important; height: 60px !important; min-height: 60px !important; padding: 7px 6px !important; column-gap: 7px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-brand,
  .dgkof-player-card-v31 .dgkof-player-v31-brand .dgkof-kof-xv-logo { width: 62px !important; min-width: 62px !important; max-width: 62px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-brand { height: 38px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-brand .dgkof-kof-xv-logo { height: 38px !important; max-height: 38px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-match-stat { gap: 4px !important; }
  .dgkof-player-card-v31 .dgkof-v31-icon { width: 22px !important; height: 22px !important; flex-basis: 22px !important; font-size: 10px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-match-stat b { font-size: 11px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-match-stat small { font-size: 7px !important; }
}

@container (max-width: 300px) {
  .dgkof-player-card-v31 .dgkof-player-v31-identity {
    grid-template-columns: 52px 38px minmax(0,1fr) !important;
    flex-basis: 144px !important;
    height: 144px !important;
    min-height: 144px !important;
    padding: 10px 8px 6px !important;
    gap: 6px !important;
  }
  .dgkof-player-card-v31 .dgkof-player-v31-badge { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-avatar { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-location { display: none !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-footer { flex-basis: 56px !important; height: 56px !important; min-height: 56px !important; }
  .dgkof-player-card-v31 .dgkof-player-challenge-v31 { height: 32px !important; min-height: 32px !important; padding: 6px 8px !important; font-size: 10px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-brand,
  .dgkof-player-card-v31 .dgkof-player-v31-brand .dgkof-kof-xv-logo { width: 56px !important; min-width: 56px !important; max-width: 56px !important; }
  .dgkof-player-card-v31 .dgkof-player-v31-brand .dgkof-kof-xv-logo { height: 36px !important; max-height: 36px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dgkof-player-card-v31 *,
  .dgkof-player-card-v31 *::before,
  .dgkof-player-card-v31 *::after { transition: none !important; animation: none !important; }
}