/* Turkey Tracks shared look styles (v25): aura, trail, frame, pin. Used by the game and the projector Arena. */
.pzlook { position: relative; display: inline-grid; place-items: center; isolation: isolate; vertical-align: middle; --as: 1; --ap: 3.2s; --a1: transparent; --a2: transparent; --blur: 5px; }
.pzlook[hidden] { display: none !important; }
.pzlook > .pzicon, .pzlook > #hudIcon { position: relative; z-index: 2; }
.pzlook > .pzlow, .pzlook > .pzhigh { display: contents; }
.pzaura { position: absolute; inset: calc(-34% * var(--as)); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle closest-side, var(--a1) 0%, var(--a1) 56%, var(--a2) 78%, transparent 100%); filter: blur(var(--blur)); opacity: .9; }
.pzaura.pulse { animation: pzpulse var(--ap) ease-in-out infinite; }
.pzaura.rainbow { background: conic-gradient(#ff3d3d, #ffb300, #ffe14d, #3ddc84, #49b6ff, #6a5bff, #c2189b, #ff3d3d);
  -webkit-mask: radial-gradient(circle closest-side, #000 40%, transparent 100%); mask: radial-gradient(circle closest-side, #000 40%, transparent 100%); animation: pzspin 6s linear infinite; }
.pzaura.rainbow.pulse { animation: pzspin 6s linear infinite, pzpulse var(--ap) ease-in-out infinite; }
@keyframes pzpulse { 0%, 100% { transform: scale(.86); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes pzspin { to { rotate: 360deg; } }
.pzframe { position: absolute; inset: -7%; border-radius: 50%; z-index: 3; pointer-events: none; background: var(--fr); --fw: 9%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); }
.pzframe.thick { --fw: 13%; }
.pzframe.spin { animation: pzspin 8s linear infinite; }
.pztrail { position: absolute; inset: -30%; z-index: 1; pointer-events: none; }
.pztrail i { position: absolute; left: var(--x); top: var(--y); width: 22%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; animation: pzfloat var(--d) ease-in-out infinite; animation-delay: var(--dl); }
.pztrail img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes pzfloat { 0% { transform: translateY(25%) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-75%) scale(1); opacity: 0; } }
.pzpin { position: absolute; right: -10%; bottom: -10%; width: 42%; aspect-ratio: 1; z-index: 4; pointer-events: none; display: grid; place-items: center;
  background: #fff8e7; border: 2px solid #ffd23f; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.pzpin img { width: 78%; height: 78%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .pzaura.pulse, .pzaura.rainbow, .pzaura.rainbow.pulse, .pzframe.spin { animation: none; }
  .pztrail i { animation: none; opacity: .9; transform: none; }
}


/* v25: my look worn on an avatar picture (picked avatar in the avatar picker, picked Arena icon) */
.pzwhost { position: relative; isolation: isolate; overflow: visible !important; }
.pzwhost > img { z-index: 2; }
.avi.pzwhost > img { position: relative; }
.pzw { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; translate: -50% -50%; pointer-events: none; --as: 1; --ap: 3.2s; --a1: transparent; --a2: transparent; --blur: 6px; }
.pzw.low { z-index: 0; } .pzw.high { z-index: 3; }
.pzw .pzpin { width: 38%; }
/* the avatar picker scrolls sideways, so its aura stays a little closer to the icon */
.avi .pzw .pzaura { inset: calc(-15% * var(--as)); }
.ticon.pzwhost { z-index: 2; }
.ticon .pzw { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); translate: none; left: 4px; top: 4px; }
.ticon .pzw img { position: static; inset: auto; width: 100%; height: 100%; object-fit: contain; }
.ticon .pzw .pzpin img { width: 78%; height: 78%; }