/* ---------------------------------------------------------------------------
   The upgrade moment and the milestone cards (src/upgrade_fx.js). All
   classes `ux-`. The moment is drawn like the badge unlock (pbadges.css
   .pbv-cele): a dark shade, one chip that flips, a shine, pixel sparkles,
   a stamp. The milestone is a card in his club's colours. Solid colour,
   ink frames, Jersey 15 for display, Rubik 800+ for reading, no emoji.
   Fits a phone held sideways (932 x 430, 844 x 390) inside its notch.
--------------------------------------------------------------------------- */
.ux-cele, .ux-mile {
  position: fixed; inset: 0; z-index: 9400; display: grid; place-items: center; cursor: pointer;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(circle at 50% 50%, rgba(8,11,17,.9) 0, rgba(8,11,17,.8) 160px, rgba(8,11,17,.68) 100%);
  animation: ux-bg .16s ease-out both; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.ux-cele.out, .ux-mile.out { opacity: 0; transition: opacity .18s ease-in; }
@keyframes ux-bg { from { opacity: 0; } }

/* ---- the moment ---------------------------------------------------------- */
.ux-in { width: 240px; max-width: 100%; animation: ux-card .26s cubic-bezier(.2, 1.3, .4, 1) both; }
.ux-in .rm-tb { justify-content: center; }
.ux-in .rm-tb h2 { text-shadow: 2px 2px 0 var(--tm-sh); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-wb { display: grid; justify-items: center; gap: 8px; padding: 10px 12px 14px; }
.ux-k { font: 900 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.ux-med { position: relative; width: 112px; height: 104px; perspective: 600px; }
.ux-chip {
  position: absolute; inset: 0; display: grid; place-items: center; box-sizing: border-box; margin: 0; padding: 6px 0 0;
  font: 400 84px/1 var(--disp); box-shadow: var(--frame), 0 6px 0 0 rgba(0,0,0,.5);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 0; border-radius: 0;
}
/* the group's level, when his overall holds: an ink plate with a gold number */
.ux-chip.lvl { background: var(--ink); color: var(--gold); border: 3px solid #fff; }
.ux-cele.flip .ux-old { animation: ux-flipa .3s cubic-bezier(.5, 0, .75, .4) .14s both; }
.ux-cele.flip .ux-new { transform: rotateY(-180deg); animation: ux-flipb .32s cubic-bezier(.2, .7, .3, 1.3) .14s both, ux-glow .7s ease-out .42s both; }
.ux-cele.pulse .ux-new { animation: ux-pop .34s cubic-bezier(.2, 1.6, .4, 1) .1s both, ux-glow .7s ease-out .3s both; }
@keyframes ux-flipa { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes ux-flipb { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
@keyframes ux-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes ux-glow {
  0% { box-shadow: var(--frame), 0 0 0 0 rgba(255,211,77,0), 0 6px 0 0 rgba(0,0,0,.5); }
  30% { box-shadow: var(--frame), 0 0 0 9px rgba(255,211,77,.85), 0 6px 0 0 rgba(0,0,0,.5); }
  100% { box-shadow: var(--frame), 0 0 0 0 rgba(255,211,77,0), 0 6px 0 0 rgba(0,0,0,.5); }
}
/* a flash of white across the new number as it lands (the "punch") */
.ux-new::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ux-cele.big .ux-new::after { animation: ux-flash .34s ease-out .44s both; }
@keyframes ux-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.ux-sp { position: absolute; left: 50%; top: 48%; width: 6px; height: 6px; margin: -3px; background: var(--gold);
  box-shadow: 0 0 0 1.5px var(--ink); opacity: 0; animation: ux-sp .55s steps(6) calc(.4s + var(--d, 0ms)) both; }
.ux-sp:nth-of-type(odd) { width: 4px; height: 4px; margin: -2px; background: #fff; }
@keyframes ux-sp { 0% { opacity: 0; transform: translate(0, 0); } 1% { opacity: 1; } 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) * 92px), calc(var(--y) * 80px)); } }
/* the stamp: slammed down a little crooked */
.ux-st { display: inline-block; padding: 5px 10px 3px; font: 400 26px/1 var(--disp); font-style: normal; letter-spacing: .04em;
  text-transform: uppercase; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2);
  transform: rotate(-4deg); animation: ux-stamp .28s cubic-bezier(.2, 1.4, .4, 1) .48s both; }
.ux-cele.big .ux-st { background: var(--green); color: #fff; text-shadow: 2px 2px 0 var(--ink); font-size: 32px; }
@keyframes ux-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes ux-up { from { opacity: 0; transform: translateY(6px); } }

/* ---- the milestone card --------------------------------------------------- */
.ux-card {
  position: relative; box-sizing: border-box; width: min(520px, 100%); max-height: 100%; overflow: hidden;
  background: var(--tm); color: var(--on-tm); border: 2px solid #fff; box-shadow: var(--frame), var(--drop);
  animation: ux-card .36s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes ux-card { 0% { opacity: 0; transform: scale(.7) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
.ux-head { padding: 9px 14px 6px; background: var(--gold); color: var(--ink); border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 0 var(--gold-hi), inset 0 -3px 0 0 var(--gold-dk);
  font: 400 32px/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.ux-body { display: flex; align-items: center; gap: 16px; padding: 14px 16px 6px; }
.ux-face { flex: none; width: 128px; height: 128px; background: var(--ink); box-shadow: var(--frame), inset 0 0 0 3px #fff;
  display: grid; place-items: center; overflow: hidden; }
.ux-face img { display: block; width: 122px; height: 122px; image-rendering: pixelated; }
.ux-who { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 4px; }
.ux-name { max-width: 100%; font: 400 34px/1 var(--disp); letter-spacing: .03em; text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-pos { max-width: 100%; font: 900 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-big { margin-top: 6px; animation: ux-stamp .32s cubic-bezier(.2, 1.4, .4, 1) .22s both; }
.ux-ovr { display: inline-grid; place-items: center; min-width: 92px; height: 78px; padding: 6px 10px 0; box-sizing: border-box;
  font: 400 76px/1 var(--disp); box-shadow: var(--frame), 0 5px 0 0 rgba(0,0,0,.45); }
.ux-dev { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 7px; box-shadow: var(--frame), 0 5px 0 0 rgba(0,0,0,.45);
  background: #fff; color: var(--ink); }
.ux-dev b { font: 400 40px/1 var(--disp); text-transform: uppercase; letter-spacing: .03em; }
.ux-dev svg { flex: none; }
.ux-sub { font: 900 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .92; margin-top: 4px; }
.ux-tapx { padding: 6px 12px 9px; font: 900 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: right; opacity: .8; }
.ux-card .ux-sp { top: 50%; left: 72px; animation-delay: calc(.3s + var(--d, 0ms)); }
@media (max-height: 420px) {
  .ux-head { font-size: 28px; padding: 7px 12px 5px; }
  .ux-body { padding: 10px 14px 4px; }
  .ux-face { width: 108px; height: 108px; } .ux-face img { width: 102px; height: 102px; }
  .ux-ovr { height: 68px; min-width: 82px; font-size: 66px; }
  .ux-med { width: 100px; height: 92px; } .ux-chip { font-size: 74px; }
}
@media (max-width: 460px) {
  .ux-body { flex-direction: column; text-align: center; }
  .ux-who { justify-items: center; }
}

/* reduced motion: everything simply fades in */
.ux-cele.calm .ux-old { display: none; }
.ux-cele.calm .ux-new, .ux-cele.calm .ux-st, .ux-cele.calm .ux-in,
.ux-mile.calm .ux-card, .ux-mile.calm .ux-big { transform: none; animation: ux-bg .3s ease-out both; }
.ux-cele.calm .ux-st { transform: rotate(-4deg); }
.ux-cele.calm .ux-new::after { display: none; }