/**
 * BKA King of Assists poster and trophy editor.
 * Fixed render canvas: 1080 × 1620 (2:3 — matches design sample).
 */

@font-face {
  font-family: "BKA Bebas Neue";
  src: url("../fonts/bebas-neue/BebasNeue-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

.bka-poster,
.bka-poster * {
  box-sizing: border-box;
}

.bka-poster {
  /* Roboto Condensed has full Vietnamese glyphs; Bebas Neue does not (fallback mix). */
  --bka-text: "Roboto Condensed", "Roboto", "Segoe UI", Arial, sans-serif;
  --bka-navy: #071d49;
  --bka-royal: #0756d9;
  --bka-cyan: #09bfe8;
  position: relative;
  width: 1080px;
  height: 1620px;
  overflow: hidden;
  isolation: isolate;
  background: #f8f9f7;
  color: var(--bka-navy);
  font-family: var(--bka-text);
  transform-origin: top left;
  user-select: none;
}

.bka-poster__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.bka-poster__ranks-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bka-poster .bka-data-photo {
  position: absolute;
  overflow: hidden;
}

.bka-poster .bka-data-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bka-poster .bka-poster__hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.bka-poster__metric {
  position: absolute;
  z-index: 5;
  top: -29px;
  left: 779px;
  width: 225px;
  height: 216px;
  display: grid;
  place-items: end center;
  overflow: visible;
  text-align: center;
  pointer-events: none;
}

.bka-poster__metric strong {
  display: block;
  width: 100%;
  padding: 0 8px 4px;
  overflow: visible;
  font-family: "BKA Bebas Neue", Impact, sans-serif;
  font-size: 209px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: .9;
  letter-spacing: .025em;
  white-space: nowrap;
}

.bka-poster__hero {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.bka-poster__hero-photo {
  z-index: 1;
  top: 536px;
  left: 44px;
  width: 442px;
  height: 383px;
}

.bka-poster__identity {
  position: absolute;
  z-index: 3;
  top: 922px;
  left: 60px;
  width: 402px;
  height: 122px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 58px 30px;
  row-gap: 4px;
  align-content: start;
  overflow: visible;
  text-align: center;
  text-transform: uppercase;
}

.bka-poster__identity strong,
.bka-poster__identity span {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
}

.bka-poster__identity strong {
  height: auto;
  font-family: var(--bka-text);
  font-size: 48px;
  font-weight: 700;
  line-height: 54px;
  letter-spacing: -.01em;
}

.bka-poster__identity span {
  height: auto;
  color: var(--bka-royal);
  font-family: var(--bka-text);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

.bka-poster__top {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.bka-top-player {
  position: absolute;
  width: var(--bka-card-w);
  height: var(--bka-card-h);
}

.bka-top-player:nth-child(1) {
  --bka-card-w: 250px;
  --bka-card-h: 239px;
  --bka-photo-h: 149px;
  top: 311px;
  left: 774px;
}

.bka-top-player:nth-child(2) {
  --bka-card-w: 250px;
  --bka-card-h: 263px;
  --bka-photo-h: 173px;
  top: 572px;
  left: 774px;
}

.bka-top-player:nth-child(3) {
  --bka-card-w: 232px;
  --bka-card-h: 240px;
  --bka-photo-h: 150px;
  top: 853px;
  left: 736px;
}

.bka-top-player__photo {
  z-index: 1;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(var(--bka-photo-h) - 3px);
}

.bka-top-player__copy {
  position: absolute;
  z-index: 3;
  top: var(--bka-photo-h);
  left: 0;
  right: 0;
  height: calc(var(--bka-card-h) - var(--bka-photo-h));
  display: grid;
  place-items: center;
  padding: 0 14px;
  overflow: hidden;
  color: #fff;
  background: var(--bka-navy);
  border-top: 3px solid var(--bka-cyan);
  text-align: center;
  text-transform: uppercase;
}

.bka-top-player__copy strong,
.bka-top-player__copy span,
.bka-other-player__copy strong,
.bka-other-player__copy span {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
}

.bka-player-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.bka-top-player__copy .bka-player-lines {
  gap: 2px;
  transform: translateY(-2px);
}

.bka-top-player__copy strong {
  height: auto;
  font-family: var(--bka-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: .01em;
}

.bka-top-player__copy span {
  height: auto;
  color: var(--bka-cyan);
  font-family: var(--bka-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .02em;
}

.bka-poster__other {
  position: absolute;
  z-index: 5;
  top: 1118px;
  left: 61px;
  width: 941px;
  height: 193px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  pointer-events: none;
}

.bka-other-player {
  position: relative;
  min-width: 0;
  height: 193px;
}

.bka-other-player__photo {
  z-index: 1;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 136px;
}

.bka-other-player__copy {
  position: absolute;
  z-index: 2;
  top: 140px;
  left: 8px;
  right: 8px;
  height: 49px;
  display: grid;
  place-items: center;
  overflow: visible;
  text-align: center;
  text-transform: uppercase;
}

.bka-other-player__copy .bka-player-lines {
  gap: 1px;
  transform: translateY(-3px);
}

.bka-other-player__copy strong {
  height: auto;
  font-family: var(--bka-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}

.bka-other-player__copy span {
  height: auto;
  color: var(--bka-royal);
  font-family: var(--bka-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}

.bka-render-host {
  position: fixed;
  left: -12000px;
  top: 0;
  width: 1080px;
  height: 1620px;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}

/* Editor: reuse the Man of the Match row composition — preview left, fields right. */
.ctm__row[data-award-kind="king_assists"] > .ctm__media {
  min-height: 222px;
  padding: 0;
  background: #e2e8f0;
}

.ctm__row[data-award-kind="king_assists"] > .ctm__media > :not(.ctm__bka-preview-wrap) {
  display: none;
}

.ctm__row[data-award-kind="king_assists"] .ctm__fields {
  grid-template-columns: 1fr;
}

.ctm__bka-field {
  grid-column: auto;
  margin-top: 0;
}

.ctm__bka-toolbar {
  display: block;
}

.ctm__bka-scope {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.ctm__bka-status {
  display: none;
  min-height: 18px;
  margin-top: 7px;
  color: #64748b;
  font-size: 12px;
}

.ctm__bka-status.is-error {
  display: block;
  color: #b91c1c;
}

.ctm__bka-photo-editor {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, .1);
}

.ctm__bka-photo-editor[hidden],
.ctm__row.is-bka-locked .ctm__bka-photo-editor {
  display: none;
}

.ctm__bka-photo-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ctm__bka-photo-heading strong {
  color: #0f172a;
  font-size: 12px;
}

.ctm__bka-photo-heading span {
  color: #64748b;
  font-size: 10px;
}

.ctm__bka-photo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ctm__bka-photo-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 8px;
  background: #fff;
}

.ctm__bka-photo-thumb {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.ctm__bka-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ctm__bka-photo-meta {
  min-width: 0;
}

.ctm__bka-photo-meta strong,
.ctm__bka-photo-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctm__bka-photo-meta strong {
  color: #0f172a;
  font-size: 11px;
  line-height: 1.2;
}

.ctm__bka-photo-meta span {
  margin-top: 2px;
  color: #64748b;
  font-size: 9px;
  line-height: 1;
}

.ctm__bka-photo-change {
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid rgba(7, 86, 217, .28);
  border-radius: 7px;
  background: #eff6ff;
  color: #0756d9;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ctm__bka-photo-change:hover {
  border-color: #0756d9;
  background: #dbeafe;
}

.ctm__bka-preview-wrap {
  display: none;
  width: 148px;
  height: 222px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #e2e8f0;
  box-shadow: none;
}

.ctm__row[data-award-kind="king_assists"] .ctm__bka-preview-wrap.has-preview {
  display: block;
}

.ctm__bka-preview-wrap .bka-poster {
  transform: scale(.137037);
}

.ctm__row.is-bka-locked .ctm__bka-scope,
.ctm__row.is-bka-locked .ctm__award-kind {
  pointer-events: none;
  opacity: .62;
}

.ctm__bka-lock-note {
  display: none;
  margin-top: 8px;
  color: #475569;
  font-size: 12px;
}

.ctm-card--king-assists .ctm-card__stage {
  aspect-ratio: 2 / 3 !important;
}

.ctm-card--king-assists .ctm-card__badge {
  background: #0756d9;
  color: #fff;
}

@media (max-width: 720px) {
  .ctm__row[data-award-kind="king_assists"] > .ctm__media {
    width: 216px;
    min-height: 324px;
    justify-self: center;
  }

  .ctm__bka-preview-wrap {
    width: 216px;
    height: 324px;
  }

  .ctm__bka-preview-wrap .bka-poster {
    transform: scale(.2);
  }

  .ctm__bka-photo-list {
    grid-template-columns: 1fr;
  }
}