/* The club showcase (src/team_show.js): the logo big on the club's colours,
   the best man in front of it, his card beside him. The box's size is the
   page's; everything in it is placed in it. */
.ts {
  position: relative; overflow: hidden; isolation: isolate; min-height: 150px;
  border: 3px solid #0d1b2a; border-radius: 14px; box-shadow: 0 5px 0 #000;
  background: var(--tdeep, #13233a); color: #fff;
  font: 700 13px/1.2 'Rubik', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}
.ts-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at var(--lx, 64%) 44%, var(--tglow, #3ea6ff) 0%, transparent 62%),
    linear-gradient(165deg, var(--tc, #1e63d6) 0%, var(--tdeep, #13233a) 55%, #05080e 100%); }
/* light through the stadium haze, turning slowly behind him */
.ts-rays { position: absolute; left: var(--lx, 64%); top: 44%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 42%); mask-image: radial-gradient(circle, #000 0%, transparent 42%);
  animation: ts-spin 60s linear infinite; }
@keyframes ts-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ts-logo { position: absolute; left: var(--lx, 64%); top: 44%; height: 104%; max-width: 88%; aspect-ratio: 1; object-fit: contain;
  transform: translate(-50%, -50%); opacity: .96;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6)) drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
.ts-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: radial-gradient(ellipse 34% 55% at var(--lx, 64%) 100%, rgba(255, 255, 255, .16), transparent 70%),
              linear-gradient(to bottom, transparent, rgba(5, 8, 14, .75)); }
.ts { --lx: 67%; container-type: size; }
.ts-right { --lx: 33%; }

/* him */
.ts-fig { position: absolute; z-index: 1; top: 6%; bottom: 0; left: 38%; right: -4%; pointer-events: none; }
.ts-right .ts-fig { left: -4%; right: 38%; }
.ts-cv { display: block; width: 100%; height: 100%; }

/* the club: its name, and ‹ › to change it */
.ts-top { position: absolute; z-index: 2; top: 8px; left: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.ts-right .ts-top { align-items: flex-end; }
.ts-tag { display: inline-block; padding: 3px 7px 2px; border: 2px solid #0d1b2a; border-radius: 6px; background: #ffd23f; color: #0d1b2a;
  font: 900 10px/1 'Rubik', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 2px 0 #000; }
.ts-club { display: flex; align-items: center; gap: 6px; max-width: 100%; pointer-events: auto; }
.ts-right .ts-club { flex-direction: row; }
.ts-name { position: relative; display: grid; min-width: 0; line-height: 1; text-shadow: 0 0 3px #0d1b2a, 0 2px 0 #0d1b2a, 2px 0 0 #0d1b2a, -2px 0 0 #0d1b2a, 0 -2px 0 #0d1b2a; }
.ts-right .ts-name { text-align: right; }
.ts-name small { font: 900 11px/1.1 'Rubik', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.ts-name b { font: 400 clamp(28px, 12cqh, 46px)/.9 'Jersey 15', 'Rubik', system-ui, sans-serif; letter-spacing: .02em; color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the club list is the name itself: tap it for every club */
.ts-name select { position: absolute; inset: -4px; width: calc(100% + 8px); opacity: 0; cursor: pointer; font-size: 16px; }
.ts-arw { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0 0 3px; cursor: pointer;
  border: 3px solid #0d1b2a; border-radius: 10px; background: #fff; color: #0d1b2a; box-shadow: 0 3px 0 #000;
  font: 900 26px/1 'Rubik', system-ui, sans-serif; }
.ts-arw:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

/* his card */
.ts-card { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: flex; align-items: stretch; max-width: calc(58% - 10px);
  border: 3px solid #0d1b2a; border-radius: 10px; background: #0d1b2a; box-shadow: 0 4px 0 #000; overflow: hidden; }
.ts-right .ts-card { left: auto; right: 10px; flex-direction: row-reverse; }
.ts-ovr { flex: none; min-width: 48px; display: grid; place-items: center; padding: 4px 6px 1px; background: #9aa1ae; color: #0d1b2a;
  font: 400 clamp(28px, 11cqh, 42px)/1 'Jersey 15', 'Rubik', system-ui, sans-serif; }
.ts-ovr.ts-t90 { background: #fff; color: #7a5400; box-shadow: inset 0 0 0 3px #e0a800; }
.ts-ovr.ts-t85 { background: #ff3a55; color: #2a0006; }
.ts-ovr.ts-t80 { background: #ffd23f; color: #1a1500; }
.ts-ovr.ts-t75 { background: #c9ced8; color: #12161f; }
.ts-ovr.ts-t70 { background: #d98a4e; color: #1a1005; }
.ts-ovr.ts-t0 { background: #3a3f49; color: #fff; }
.ts-pn { display: grid; align-content: center; gap: 1px; min-width: 0; padding: 4px 9px 5px; }
.ts-right .ts-pn { text-align: right; }
.ts-pn small { font: 900 9px/1.1 'Rubik', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #ffd23f; }
.ts-pn b { font: 900 15px/1.1 'Rubik', system-ui, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-pn em { font: 800 12px/1.1 'Rubik', system-ui, sans-serif; font-style: normal; color: #c5d2e3; letter-spacing: .04em; white-space: nowrap; }
.ts-empty .ts-card { opacity: .6; }

/* no 3D here: his portrait on a card, his number behind him */
.ts-flat { position: absolute; inset: 0; display: grid; place-items: center; }
.ts-num { position: absolute; top: 0; left: 0; font: 400 clamp(60px, 46cqh, 170px)/1 'Jersey 15', system-ui; color: rgba(255, 255, 255, .3);
  -webkit-text-stroke: 3px rgba(13, 27, 42, .45); }
.ts-right .ts-num { left: auto; right: 0; }
.ts-face { position: relative; width: auto; height: min(68%, 200px); aspect-ratio: 1; image-rendering: pixelated; image-rendering: crisp-edges;
  border: 3px solid #0d1b2a; border-radius: 12px; background: var(--tc); box-shadow: 0 5px 0 #000;
  animation: ts-hop .62s ease-in-out infinite alternate, ts-shake 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ts-hop { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes ts-shake { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: -4deg; } 78% { rotate: 4deg; } 82% { rotate: -3deg; } 86% { rotate: 2deg; } }

/* a new club: the logo slams in behind him, the card slides in */
.ts-in .ts-logo { animation: ts-logo .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.ts-in .ts-card { animation: ts-card .4s .08s cubic-bezier(.2, 1.2, .4, 1) both; }
.ts-in.ts-right .ts-card { animation-name: ts-card-r; }
.ts-in .ts-name b { animation: ts-pop .35s cubic-bezier(.2, 1.5, .4, 1) both; }
.ts-in .ts-bg { animation: ts-flash .45s ease-out both; }
@keyframes ts-logo { from { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(-6deg); } to { opacity: .96; transform: translate(-50%, -50%); } }
@keyframes ts-card { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes ts-card-r { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes ts-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ts-flash { from { filter: brightness(1.8); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .ts-rays, .ts-face, .ts-in .ts-logo, .ts-in .ts-card, .ts-in .ts-name b, .ts-in .ts-bg { animation: none; }
}

/* a small box (a phone on its side): tighter type */
@media (max-height: 540px) {
  .ts-ovr { min-width: 40px; }
  .ts-pn b { font-size: 13px; }
  .ts-pn em { font-size: 11px; }
  .ts-arw { width: 30px; height: 30px; font-size: 22px; }
}

/* a box about as tall as it is wide (a phone held upright, a narrow
   column): the club across the top, him in the middle, his card across
   the bottom */
@container (max-aspect-ratio: 11/10) {
  .ts-bg { --lx: 50%; }
  .ts-fig, .ts-right .ts-fig { left: 0; right: 0; top: 24%; }
  .ts-top, .ts-right .ts-top { left: 6px; right: 6px; top: 6px; align-items: center; }
  .ts-name, .ts-right .ts-name { text-align: center; }
  .ts-name b { font-size: min(34px, 13cqw); }
  .ts-logo { height: 84%; top: 52%; }
  .ts-rays { top: 52%; }
  .ts-card, .ts-right .ts-card { left: 6px; right: 6px; bottom: 6px; max-width: none; flex-direction: row; }
  .ts-right .ts-pn { text-align: left; }
  .ts-ovr { min-width: 40px; font-size: 28px; }
  .ts-pn { padding: 3px 7px 4px; }
  .ts-pn b { font-size: 13px; }
  .ts-pn em { font-size: 11px; }
  .ts-arw { width: 30px; height: 30px; font-size: 22px; }
}

/* the jersey switch: Home / Away, in the corner the card does not use */
.ts-kit { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; gap: 0;
  border: 3px solid #0d1b2a; border-radius: 10px; box-shadow: 0 4px 0 #000; overflow: hidden; }
.ts-right .ts-kit { right: auto; left: 10px; }
.ts-kit button { padding: 6px 10px 5px; border: 0; background: #111621; color: #fff; cursor: pointer;
  font: 900 11px/1 var(--sans, 'Rubik', system-ui, sans-serif); text-transform: uppercase; letter-spacing: .06em; }
.ts-kit button + button { border-left: 2px solid #0d1b2a; }
.ts-kit button.on { background: #ffd23f; color: #0d1b2a; }