/* The player card (account-card.js), drawn like the app's PlayerCard.swift: a dark plate with both top corners cut and
   the bottom edge torn off the wall, a cyan copy of the same shape behind it, a chrome frame, the photo fading into the
   plate, the position in the corner, the name on a pasted strip, the @handle in lime, and a lime camera sticker.
   Sizes follow the card's width (cqw), as the app's do, so the card reads the same at 260px and at 340px. */
.pcard {
  /* Cut top corners (11% of the width on both edges) and a torn bottom edge, as percentages of the card's own box. */
  --pcard-shape: polygon(11% 0, 89% 0, 100% 8.25%, 100% 96.6%, 96.5% 99.1%, 93.8% 97.2%, 90.1% 100%, 86.7% 97.9%,
    82.4% 99.4%, 79.9% 96.8%, 75.2% 99.8%, 71.6% 98%, 68.9% 96.9%, 64.3% 99.6%, 61% 97.4%, 56.6% 100%, 53.2% 98.1%,
    50% 96.7%, 45.9% 99.5%, 42.7% 97.3%, 38.1% 99.9%, 34.8% 98.2%, 31.5% 96.8%, 27.3% 99.7%, 23.9% 97.6%, 19.6% 100%,
    16.2% 97.1%, 12.8% 99.2%, 8.4% 97.8%, 5.1% 100%, 2.2% 97.4%, 0 96.6%, 0 8.25%);
  --pcard-chrome: linear-gradient(135deg, #f5f5f5, #737373 30%, #e0e0e0 52%, #595959 74%, #cccccc);
  --pcard-cut: calc(11cqw - 3.5px);
  container-type: inline-size;
  position: relative; width: min(100%, 320px); aspect-ratio: 3 / 4; margin: 8px auto 30px;
  rotate: -2deg;
}
/* The cyan copy of the card, offset down and right: what shows past the torn edge. */
.pcard::before {
  content: ""; position: absolute; inset: 0; background: var(--cyan); clip-path: var(--pcard-shape); translate: 7px 7px;
}

/* The face: the ink outline is this layer showing 3px round the plate and photo laid inside it. */
.pcard__photo { position: absolute; inset: 0; background: var(--ink); clip-path: var(--pcard-shape); }
.pcard__photo::before {
  content: ""; position: absolute; inset: 3px; clip-path: var(--pcard-shape);
  background:
    radial-gradient(circle at 60% 26%, rgba(198, 255, 61, 0.5), rgba(198, 255, 61, 0.16) 30%, transparent 52%),
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.07) 44%, transparent 58%),
    linear-gradient(180deg, #333336, var(--tarmac) 50%, var(--ink));
}
/* The photo fills the top 62% and fades into the plate; top corners cut to the card's shape. */
.pcard__img, .pcard__initials {
  position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: 62%;
  clip-path: polygon(11% 0, 89% 0, 100% 13.3%, 100% 100%, 0 100%, 0 13.3%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.pcard__img { object-fit: cover; }
.pcard__initials {
  display: grid; place-items: center; padding-top: 10cqw;
  font-family: var(--brand); font-weight: 800; font-size: 34cqw; letter-spacing: -0.06em; line-height: 1;
  color: var(--ink); -webkit-text-stroke: 3px var(--lime); paint-order: stroke fill; opacity: 0.85;
}
/* Shade from the top left, so the position and city read on any photo. */
.pcard__photo::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: 62%;
  background: linear-gradient(135deg, rgba(16, 16, 20, 0.6), transparent 52%);
}

/* The chrome frame, inset 6px, stopping above the tear. Its corners are cut too, the diagonals drawn in. */
.pcard__frame {
  position: absolute; top: 6px; left: 6px; right: 6px; bottom: calc(4.5cqw + 10px); pointer-events: none;
  border: 2px solid transparent; border-image: var(--pcard-chrome) 1;
  clip-path: polygon(var(--pcard-cut) 0, calc(100% - var(--pcard-cut)) 0, 100% var(--pcard-cut), 100% 100%, 0 100%, 0 var(--pcard-cut));
  background:
    linear-gradient(to bottom right, transparent 50%, #d6d6d6 50% calc(50% + 2px), transparent calc(50% + 2px)) top left / var(--pcard-cut) var(--pcard-cut) no-repeat border-box,
    linear-gradient(to bottom left, transparent 50%, #8c8c8c 50% calc(50% + 2px), transparent calc(50% + 2px)) top right / var(--pcard-cut) var(--pcard-cut) no-repeat border-box;
}
/* The pink tag arc with its ball, sprayed over the photo (TagArcMark). */
.pcard__frame::after {
  content: ""; position: absolute; top: 8cqw; left: 40cqw; width: 46cqw; height: 12cqw;
  border-top: 3px solid var(--pink); border-radius: 50% 50% 0 0 / 100% 100% 0 0; rotate: -8deg; opacity: 0.95;
}
.pcard__frame::before {
  content: ""; position: absolute; top: 4.5cqw; left: 60cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--pink);
}

/* A strip of lime tape over the top right corner. */
.pcard__tape {
  position: absolute; top: 3cqw; right: -7cqw; z-index: 3; width: 30cqw; height: 7cqw;
  background: var(--lime); opacity: 0.85; rotate: 42deg;
}

.pcard__pos {
  position: absolute; top: 9cqw; left: 8.5cqw; z-index: 1; margin: 0;
  font-family: var(--brand); font-weight: 800; font-size: 15cqw; line-height: 1; letter-spacing: -0.04em; color: var(--paper);
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--lime);
}
.pcard__city {
  position: absolute; top: 26cqw; left: 9cqw; z-index: 1; max-width: 50cqw; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: max(10px, 4.5cqw); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper); text-shadow: 1px 1px 0 var(--ink);
}

.pcard__plate {
  position: absolute; top: 58.5%; left: 9cqw; right: 9cqw; bottom: 0; z-index: 1; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2.5cqw; padding-bottom: 15cqw;
}
.pcard__name {
  width: 100%; padding: 1.6cqw 3cqw; text-align: center; overflow-wrap: anywhere; text-wrap: balance;
  font-family: var(--brand); font-weight: 800; font-size: clamp(13px, 8cqw, 28px); line-height: 1.05; letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--pink); rotate: -1.5deg;
}
.pcard__handle {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--body); font-weight: 900; font-style: italic; font-size: clamp(13px, 6.8cqw, 22px); color: var(--lime); rotate: -3deg;
}
.pcard__played {
  margin-top: auto;
  font-family: var(--mono); font-size: max(9px, 3.8cqw); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242, 240, 234, 0.6);
}

/* The camera sticker, on the photo's lower right edge and hanging off it. */
.pcard__cam {
  position: absolute; top: calc(62% - 22cqw); right: -5cqw; z-index: 3; display: grid; place-items: center;
  width: clamp(44px, 16cqw, 54px); height: clamp(44px, 16cqw, 54px);
  color: var(--ink); background: var(--lime); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); rotate: -6deg; cursor: pointer;
  transition: rotate var(--fast) var(--pop), translate var(--fast) var(--out), box-shadow var(--fast) var(--out);
}
.pcard__cam svg { width: 46%; height: 46%; }
.pcard__cam:active { translate: 3px 3px; box-shadow: 0 0 0 var(--ink); }
.pcard__cam:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.pcard__cam:disabled { opacity: 0.6; cursor: progress; }
@media (hover: hover) { .pcard__cam:not(:disabled):hover { rotate: 0deg; translate: 0 -2px; } }

.pcard__status { min-height: 1.4em; margin: -14px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: rgba(242, 240, 234, 0.8); }
.pcard__status:empty { min-height: 0; }