/* Juice: styles for the shared showmanship kit (see juice.js). Games restyle these with their own colours and fonts. */
.jz-mute { position: fixed; right: 12px; bottom: 12px; z-index: 60; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); }
.jz-mute:hover { background: rgba(0,0,0,.7); }
/* On a phone inside the Lounge, the sound button is in the Lounge's top bar, out of the way of the game. */
html.jz-framed .jz-mute, html.jz-framed #jzMute { display: none !important; }

/* title card */
.jz-stinger { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: auto; overflow: hidden; background: rgba(0,0,0,.35); animation: jzFade .2s both; }
.jz-band { position: absolute; left: 50%; top: 50%; width: 170vw; padding: 5vh 35vw; translate: -50% -50%; rotate: -4deg; background: var(--sbg); color: var(--sfg); text-align: center;
  box-shadow: 0 0 0 10px var(--sac), 0 30px 80px rgba(0,0,0,.5); animation: jzBandIn .45s cubic-bezier(.2,1.2,.3,1) both; }
.jz-t { font: 800 clamp(44px, 11vw, 132px)/.9 var(--sfont, var(--font-display)); letter-spacing: -.02em; text-transform: uppercase; animation: jzPunch .5s .12s cubic-bezier(.2,1.6,.4,1) both; }
.jz-s { margin-top: 1.4vh; font: 700 clamp(16px, 2.6vw, 30px)/1.2 var(--font-sans); color: var(--sac); animation: jzRise .4s .3s both; }
.jz-stinger.out { animation: jzFade .4s reverse both; } .jz-stinger.out .jz-band { animation: jzBandOut .4s cubic-bezier(.6,0,.9,.4) both; }
.jz-stinger.calm .jz-band, .jz-stinger.calm .jz-t, .jz-stinger.calm .jz-s { animation: none; }
@keyframes jzFade { from { opacity: 0; } }
@keyframes jzBandIn { from { translate: -170% -50%; } }
@keyframes jzBandOut { to { translate: 70% -50%; } }
@keyframes jzPunch { from { transform: scale(.4); opacity: 0; } }
@keyframes jzRise { from { transform: translateY(18px); opacity: 0; } }

.jz-confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; width: 100vw; height: 100vh; }
.jz-flash { position: fixed; inset: 0; z-index: 85; pointer-events: none; animation: jzFlash .5s both; }
@keyframes jzFlash { from { opacity: .7; } to { opacity: 0; } }
.jz-shake { animation: jzShake .45s both; }
@keyframes jzShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }

/* the regulars */
.jz-av { display: block; overflow: visible; filter: drop-shadow(0 5px 0 rgba(0,0,0,.22)); }
.jz-av.dead { filter: grayscale(.4) drop-shadow(0 5px 0 rgba(0,0,0,.22)); }
.jz-p { display: grid; justify-items: center; gap: 6px; width: 104px; text-align: center; animation: jzPopIn .45s cubic-bezier(.2,1.6,.4,1) both; }
.jz-p .jz-av g { transform-origin: 50% 90%; animation: jzBob 2.6s ease-in-out infinite; }
.jz-p:nth-child(2n) .jz-av g { animation-delay: -.7s; } .jz-p:nth-child(3n) .jz-av g { animation-delay: -1.5s; }
.jz-p b { max-width: 100%; padding: 4px 11px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 700 14px/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jz-p b i { font-style: normal; color: #ffd23f; margin-left: 5px; }
.jz-p.me b { background: #fff; color: #111; }
.jz-p small { font: 600 12px/1.2 var(--font-sans); color: var(--chalk); }
.jz-p { position: relative; }
.jz-p small.jz-bot { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.14); color: inherit; opacity: .85; }
.jz-kick { position: absolute; top: -4px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.7); color: #fff; cursor: pointer; }
.jz-kick:hover { background: #c0392b; border-color: #fff; }
button.jz-add { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.jz-add span { display: grid; place-items: center; width: 70px; height: 70px; margin: 7px 0; border-radius: 50%; border: 3px dashed currentColor; opacity: .8; transition: transform .18s cubic-bezier(.2,1.6,.4,1), opacity .15s; }
.jz-add b { background: var(--brass, #eeb548); color: var(--felt-deep, #1a1205); white-space: normal; line-height: 1.15; padding: 5px 10px; }
.jz-add:hover span { transform: scale(1.08) rotate(-4deg); opacity: 1; } .jz-add:active span { transform: scale(.94); }
.jz-level { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font: 600 14px var(--font-sans); color: var(--chalk, inherit); }
.jz-level span { margin-right: 6px; opacity: .85; }
.jz-level button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 700 14px var(--font-sans); cursor: pointer; opacity: .7; }
.jz-level button[aria-pressed="true"] { background: var(--brass, #eeb548); border-color: var(--brass, #eeb548); color: var(--felt-deep, #1a1205); opacity: 1; }
.jz-p.away { opacity: .45; } .jz-p.away .jz-av g { animation: none; }
.jz-p.empty span { width: 70px; height: 70px; margin: 7px 0; border-radius: 50%; border: 3px dashed currentColor; opacity: .35; }
.jz-p.empty b { background: transparent; color: inherit; opacity: .55; font-weight: 600; }
@keyframes jzPopIn { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
@keyframes jzBob { 50% { transform: translateY(-4px) scale(1.02, .98); } }

/* waiting room */
.jz-green { display: grid; gap: 26px; justify-items: center; padding: 10px 0 6px; }
.jz-code { display: grid; justify-items: center; gap: 8px; text-align: center; }
.jz-code > span { font: 700 14px var(--font-sans); letter-spacing: .02em; color: var(--chalk); }
.jz-code small { font: 500 14px var(--font-sans); color: var(--dim); }
.jz-sign .jz-host { display: block; padding: 10px 26px 8px; border-radius: 16px; background: var(--brass, #eeb548); color: var(--felt-deep, #1a1205); font: 800 clamp(30px, 8vw, 52px)/1.05 var(--font-display); box-shadow: 0 6px 0 var(--brass-deep, #8a5f12); transform: rotate(-1.5deg); animation: jzPopIn .5s cubic-bezier(.2,1.6,.4,1) both; max-width: 92vw; overflow-wrap: anywhere; }
.jz-letters { display: flex; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; }
.jz-letters i { display: grid; place-items: center; width: clamp(54px, 15vw, 84px); height: clamp(66px, 18vw, 104px); border-radius: 14px; font: 800 clamp(38px, 11vw, 64px)/1 var(--font-display); font-style: normal;
  background: var(--brass); color: var(--felt-deep); box-shadow: 0 6px 0 var(--brass-deep); animation: jzPopIn .5s cubic-bezier(.2,1.6,.4,1) both; }
.jz-letters i:nth-child(2) { animation-delay: .07s; transform: rotate(2deg); } .jz-letters i:nth-child(3) { animation-delay: .14s; transform: rotate(-2deg); } .jz-letters i:nth-child(4) { animation-delay: .21s; transform: rotate(1.5deg); }
.jz-letters:hover i { filter: brightness(1.08); } .jz-letters:active i { transform: translateY(4px); box-shadow: 0 2px 0 var(--brass-deep); }
.jz-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; max-width: 760px; }

@media (prefers-reduced-motion: reduce) {
  .jz-p, .jz-letters i, .jz-p .jz-av g, .jz-shake { animation: none !important; }
}