/* =====================================================================================
   Town Square world (12-worlds-a Part 3, design/Plaza.dc.html). Everything here is namespaced pz-* and additive.
   Shared bean / pop / cf* / adlb / press / ready rules come from pointwalk.css.
   ===================================================================================== */
@keyframes pz-drain { from { width: 100%; } to { width: 0%; } }
@keyframes pz-ripple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes pz-print { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); } 100% { opacity: .9; transform: translate(-50%,-50%) scale(1); } }
@keyframes pz-bubble { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pz-toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pz-scene-wrap { width: 100%; max-width: 820px; margin: 0 auto; overflow: hidden; border-radius: 24px; }
.pz-scene { position: relative; width: 820px; height: 590px; transform-origin: 0 0; }

/* fountain ripples */
.pz-ripple { transform-box: fill-box; transform-origin: center; animation: pz-ripple 2.4s ease-out infinite; }

/* footprints: land one by one; `done` = the replay is over (or reduced motion): simply there */
.pz-fp { animation: pz-print .25s ease-out both; }
.pz-fp.done { animation: none; opacity: .9; transform: translate(-50%,-50%); }

/* Teammate replay wrapper: the bean anchor stands at the START of the walk; the wrapper translates it along the recorded path. */
.pz-walker { position: absolute; left: 0; top: 0; width: 0; height: 0; }

/* stall hit areas + signs */
.pz-hit { background: transparent; }
.pz-hit:hover { background: rgba(255,255,255,.3); }
.pz-sign { transition: transform .15s ease; }
.pz-sign:hover { transform: translate(-50%,-100%) translateY(-4px) !important; }
.pz-sign:focus-visible { outline: 3px solid #5AA9FF; outline-offset: 3px; }

/* speech bubble over a bean (my hint / any emote): anchored at the bean's feet point */
.pz-bubwrap { position: absolute; width: 0; height: 0; }
.pz-bub { position: absolute; left: 22px; top: -160px; width: 190px; border: 3px solid #1E1B2E; border-radius: 16px 16px 16px 4px; box-shadow: 0 4px 0 #1E1B2E; padding: 8px 12px; font: 800 14px/1.3 'Nunito', sans-serif; color: #1E1B2E; transform-origin: 0 100%; animation: pz-bubble .3s cubic-bezier(.2,.8,.3,1) both; }

/* emote toast when the sender's bean is hidden (voting) */
.pz-toasts { position: absolute; left: 12px; bottom: 12px; z-index: 970; display: flex; flex-direction: column; gap: 6px; }
.pz-toast { background: #1E1B2E; color: #FFFFFF; border: 2px solid #FFD23F; border-radius: 12px; padding: 6px 12px; font: 800 14px 'Nunito', sans-serif; animation: pz-toast-in .2s ease-out both; }

/* Quick pick (scale < .75) */
.pz-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pz-quick button { min-width: 44px; height: 44px; padding: 0 10px; border: 3px solid #1E1B2E; border-radius: 12px; box-shadow: 0 3px 0 #1E1B2E; font-family: 'Lilita One', sans-serif; font-size: 18px; color: #1E1B2E; cursor: pointer; }

/* reduced motion (OS preference or the session-wide toggle that sets .rm on the root) */
@media (prefers-reduced-motion: reduce) {
  .pz-ripple, .pz-bub, .pz-toast { animation: none; }
  .pz-fp { animation-duration: .01s; }
  .pz-walker { animation: none !important; transform: var(--fin) !important; z-index: var(--zf) !important; }
}
.rm .pz-ripple, .rm .pz-bub, .rm .pz-toast { animation: none; }
.rm .pz-fp { animation-duration: .01s; }
.rm .pz-walker { animation: none !important; transform: var(--fin) !important; z-index: var(--zf) !important; }
@media (max-width: 760px) { .pz-sign:hover { transform: translate(-50%,-100%) !important; } }

/* Phones: the scene (the thing you vote in) comes first, the Jira queue and the roster follow below it */
@media (max-width: 760px) { .pz-main { order: -1; } }