/* team-mark.css — ported from teleport/web/css/team-mark.css (Teleport's own
   school-logo tile and player-face slot), so the Transfer Portal search can
   reuse Teleport's own playerFace()/teamMark() markup — real headshots, and
   each school's own colour/logo as the fallback — without pulling in
   Teleport's whole stylesheet. Only change from the source: --accent-deep
   (a token Teleport has and this app doesn't) is swapped for the closest
   equivalent this app already defines, --accent-hover. Keep this in sync by
   hand if Teleport's own team-mark.css changes. */

.tmark {
  --tm-size: 44px;
  --tm-radius: 13px;
  --tm-pad: 7px;
  --tm-bg: var(--surface-2);

  width: var(--tm-size); height: var(--tm-size);
  border-radius: var(--tm-radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--tm-pad); position: relative; overflow: hidden;
  background: var(--tm-bg);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(15, 15, 30, 0.13);
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s;
}
:root[data-theme="dark"] .tmark {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.42);
}

.tmark::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.20), transparent 52%);
  pointer-events: none;
}

.tmark-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  position: relative; z-index: 1;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.30));
}
.tmark.is-light .tmark-img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}

.tmark-fallback { display: none; position: relative; z-index: 1; color: rgba(255, 255, 255, 0.92); }
.tmark-fallback svg { width: 60%; height: 60%; }
.tmark.is-broken .tmark-img { display: none; }
.tmark.is-broken .tmark-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.tmark--plain,
.tmark--plainbg { background: var(--surface-2); color: var(--label-3); box-shadow: inset 0 0 0 1px var(--border-2); }
.tmark--plain::after,
.tmark--plainbg::after { display: none; }
.tmark--plain svg,
.tmark--plainbg svg { width: 55%; height: 55%; }
.tmark--plainbg { background: var(--accent-light); color: var(--accent-hover); }
:root[data-theme="dark"] .tmark--plainbg { color: var(--accent); }

.tmark--conf { --tm-pad: 6px; }
.tmark--conf .tmark-img { object-fit: contain; }

.tmark--conf.is-white .tmark-img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}

.tmark--conf.is-screen { isolation: isolate; }
.tmark--conf.is-screen .tmark-img {
  mix-blend-mode: screen;
  filter: contrast(1.15);
}
.tmark--conf.is-screen::after { display: none; }

.tmark--sm { --tm-size: 30px; --tm-radius: 9px;  --tm-pad: 4px; }
.tmark--md { --tm-size: 44px; --tm-radius: 13px; --tm-pad: 7px; }
.tmark--lg { --tm-size: 58px; --tm-radius: 17px; --tm-pad: 9px; }

/* ── The player face slot ─────────────────────────────────────────────── */
.face {
  --face-size: 36px;
  --face-radius: 50%;
  position: relative; display: block; flex-shrink: 0;
  width: var(--face-size); height: var(--face-size);
}
.face-img {
  width: 100%; height: 100%; display: block; box-sizing: border-box;
  border-radius: var(--face-radius);
  object-fit: cover; object-position: top center;
  background: var(--face-bg, var(--surface-2));
  border: 2px solid var(--face-bg, transparent);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.face .face-mark {
  --tm-size: 100%;
  --tm-radius: var(--face-radius);
}
.face-init {
  position: absolute; inset: 0; border-radius: var(--face-radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent-hover);
  font-size: calc(var(--face-size) * 0.34); font-weight: 700; letter-spacing: -0.02em;
}
:root[data-theme="dark"] .face-init { color: var(--accent); }

.face-check {
  position: absolute; right: -2px; bottom: -2px; z-index: 2;
  width: calc(var(--face-size) * 0.4); height: calc(var(--face-size) * 0.4);
  min-width: 13px; min-height: 13px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(0, 0, 0, 0.28);
}
.face-check svg { width: 62%; height: 62%; }

.face--xs { --face-size: 26px; }
.face--xs .face-mark { --tm-pad: 3px; }
.face--sm { --face-size: 36px; }
.face--sm .face-mark { --tm-pad: 5px; }
.face--lg { --face-size: 62px; --face-radius: 18px; }
.face--lg .face-mark { --tm-pad: 10px; }