/* Mii Plaza + Mii editor. A deliberate change of voice from the chat: a bright Wii plaza floor,
   rounded type, white pill buttons, red for "you" and selection (the red and white theme). See DESIGN.md. */
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/MPLUSRounded1c-500.woff2) format("woff2"); }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/MPLUSRounded1c-800.woff2) format("woff2"); }

/* .pz-vars carries the plaza tokens outside the plaza too (the game screens in games.css). */
.plaza, .pz-vars {
  --pz-world: #000000;    /* the pitch black beyond the Black Lodge's curtains (Ethan: no more brown), in light and dark mode */
  --pz-sky: #fde3e4;
  --pz-floor: #fcf6f6;
  --pz-grid: #f3e3e4;
  --pz-chrome: #ffffff;
  --pz-ink: #45282c;
  --pz-ink-2: #8e6d71;
  --pz-line: #eccfd1;
  --pz-blue: #e0202a;      /* your marker, selection rings (red now; the name stays) */
  --pz-bar: #c3121b;       /* the top bar and the main button (white text reads on it) */
  --pz-rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", var(--font);
  --mw: 62px;
}
.plaza {
  position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h); z-index: 25;
  display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto;
  background: var(--pz-floor); color: var(--pz-ink); font-family: var(--pz-rounded); font-weight: 500;
  opacity: 0; transform: scale(.985); transition: opacity .2s, transform .2s;
}
.plaza.in { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  .plaza, .pz-vars {
    --pz-sky: #1c1c1c; --pz-floor: #000000; --pz-grid: #141414; --pz-chrome: #000000;
    --pz-ink: #ffffff; --pz-ink-2: #a8a8a8; --pz-line: #333333; --pz-blue: #ff4b53; --pz-bar: #a10f18;
  }
}
/* member request, Ethan: "replace the ugly brown ... with pitch black, make sure the user interface matches": the lobby's
   own chrome (bars, hint, cards, bubbles, My Biis, the editor) is pitch black with white ink in light and dark mode alike */
.plaza {
  --pz-sky: #1c1c1c; --pz-floor: #000000; --pz-grid: #141414; --pz-chrome: #000000;
  --pz-ink: #ffffff; --pz-ink-2: #a8a8a8; --pz-line: #333333; --pz-blue: #ff4b53;
}
body.in-plaza { background: var(--felt); }
@media (min-width: 1101px) { .plaza { box-shadow: 0 0 0 1px var(--rule); } }

/* top bar */
.pz-top { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: var(--pz-bar); color: #fff; }
.pz-top > :first-child { justify-self: start; }
.pz-top > :last-child { justify-self: end; }
.pz-title { margin: 0; font: 800 21px/1.1 var(--pz-rounded); letter-spacing: .01em; white-space: nowrap; }
.pz-spacer { width: 1px; }

.pz-btn { min-height: 44px; padding: 9px 17px; border-radius: 99px; border: 2px solid var(--pz-line); background: var(--pz-chrome); color: var(--pz-ink);
  font: 800 15px/1 var(--pz-rounded); box-shadow: inset 0 -3px 0 #0000000f; white-space: nowrap; }
.pz-btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 #0000000f; }
.pz-btn:disabled { opacity: .55; }
.pz-top .pz-btn { border-color: #ffffff; }
.pz-btn.blue { background: var(--pz-bar); border-color: var(--pz-bar); color: #fff; }
.pz-top .pz-btn.blue { background: #fff; color: var(--pz-bar); }
@media (prefers-color-scheme: dark) { .pz-top .pz-btn { border-color: #ffffff40; } .pz-top .pz-btn.blue { background: #fff; color: #a10f18; } }
.pz-btn.small { min-height: 40px; padding: 7px 14px; font-size: 14.5px; }
.pz-link { background: none; border: 0; padding: 8px 4px; min-height: 40px; color: var(--pz-blue); font: 800 14px/1.2 var(--pz-rounded); text-decoration: underline; text-underline-offset: 3px; }
.pz-link.danger { color: var(--danger); }
.plaza :focus-visible { outline: 3px solid var(--pz-blue); outline-offset: 2px; }

/* the floor */
.pz-floor { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background: var(--pz-world);
}
/* bug fix (Ethan): the floor is its own layer, so nothing drawn on it (bubbles, placards, markers) climbs over the text bar */
.pz-floor { isolation: isolate; }
.pz-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 28px); text-align: center;
  padding: 8px 14px; border-radius: 99px; background: var(--pz-chrome); border: 2px solid var(--pz-line); color: var(--pz-ink-2); font-size: 14px; font-weight: 800; z-index: 3000; pointer-events: none; }
/* the corner button: just the move-furniture chair now (bug fix, Ethan: no zoom or follow buttons; pinch zooms and a
   double tap on the floor brings the camera back to your Bii) */
.pz-cam { position: absolute; right: 12px; bottom: 14px; z-index: 3500; display: flex; flex-direction: column; gap: 0;
  border: 2px solid var(--pz-line); background: var(--pz-line); cursor: default; }
.pz-cam-b { width: 44px; height: 44px; padding: 0; margin: 0; display: grid; place-items: center; background: var(--pz-chrome); color: var(--pz-ink);
  border: 0; -webkit-tap-highlight-color: transparent; }
.pz-cam-b svg { width: 22px; height: 22px; fill: currentColor; }
.pz-cam-b:active { transform: translateY(1px); }
.pz-hint { bottom: auto; top: 14px; }
.pz-ripple { position: absolute; width: 34px; height: 14px; margin: -7px 0 0 -17px; border-radius: 50%; border: 2.5px solid var(--pz-blue); pointer-events: none; animation: pz-ripple .55s ease-out forwards; z-index: 1; }
@keyframes pz-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* the 3D floor (mii3d.js draws it) and the overlays that ride on each Mii: name tag at the feet,
   "you" marker, "!" and speech bubble above the head. --hh is the head height in px. */
.pz-canvas { position: absolute; inset: 0; display: block; }
.pm { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; --hh: 120px; }
.pm-stars { display: inline-flex; align-items: center; gap: 1px; margin-left: 5px; padding-left: 5px; border-left: 1.5px solid currentColor; font-variant-numeric: tabular-nums; }
.pm-stars svg { width: 11px; height: 11px; fill: #f5b301; stroke: #c98a00; stroke-width: 1.5; stroke-linejoin: round; }
.pm-me { position: absolute; left: -8px; bottom: calc(var(--hh) + 6px); width: 0; height: 0; pointer-events: none;
  border: 8px solid transparent; border-top: 11px solid var(--pz-blue); border-bottom: 0; animation: pz-marker 1.2s ease-in-out infinite alternate; }
@keyframes pz-marker { to { transform: translateY(-5px); } }
.pm.talking { z-index: 4000 !important; }
.pm.offering { z-index: 4500 !important; }
.pm.offering .pm-bubble { display: none; }
/* tap an awake member's Bii: the Challenge button pops up over its head */
.pm-challenge { position: absolute; left: 0; bottom: calc(var(--hh) + 12px); transform: translateX(-50%); pointer-events: auto;
  display: flex; border-radius: 99px; border: 2px solid var(--pz-bar); background: var(--pz-bar); white-space: nowrap;
  box-shadow: inset 0 -3px 0 #00000026; animation: pz-pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.pm-challenge::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: var(--pz-bar); transform: rotate(45deg); border-radius: 2px; }
.pm-challenge button { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; border: 0; cursor: pointer;
  background: none; color: #fff; font: 800 16px/1 var(--pz-rounded); -webkit-tap-highlight-color: transparent; }
.pm-challenge .pm-ch-go { padding: 9px 14px 10px 18px; border-radius: 99px 0 0 99px; }
/* "Snake" rides on the right in the arcade's black, a straight-to-snake shortcut */
.pm-challenge .pm-ch-snake { padding: 9px 16px 10px 12px; border-radius: 0 99px 99px 0; background: #000; box-shadow: inset 0 -3px 0 #2b0d12; }
.pm-challenge .pm-ch-snake svg { width: 18px; height: 18px; color: #f4ecec; }
/* "Photos" leads on the left in white (member request: tap a Bii to see their photos); on a sleeper or your own
   Bii it's the only pill */
.pm-challenge .pm-ch-photos { padding: 9px 14px 10px 14px; border-radius: 99px 0 0 99px; background: #fff; color: var(--pz-bar); box-shadow: inset 0 -3px 0 #0000001a; }
.pm-challenge .pm-ch-photos svg { width: 19px; height: 19px; }
.pm-challenge .pm-ch-photos:only-child { border-radius: 99px; padding-right: 18px; }
.pm-challenge .pm-ch-photos + .pm-ch-go { border-radius: 0; padding-left: 14px; }
/* "Edit" on your own Bii, in the bar colour beside Photos (it opens My Biis) */
.pm-challenge .pm-ch-edit { padding: 9px 18px 10px 14px; border-radius: 0 99px 99px 0; }
.pm-challenge .pm-ch-edit svg { width: 18px; height: 18px; }
.pm-challenge .pm-ch-edit:only-of-type { border-radius: 99px; padding-left: 18px; }
/* the walking Game Boy's card: Arcade (red) and Game Boy (black), pixel icons */
.pm-gb button svg { width: 18px; height: 18px; flex: none; }
.pm-challenge button:active { transform: translateY(1px); }
.pm-challenge button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
/* the Bii's card on top of the pills (bug fix, Ethan: names no longer ride under the Biis, they show here on tap) */
.pm-challenge { flex-wrap: wrap; max-width: calc(100vw - 24px); }
.pm-who { flex: 1 0 100%; display: grid; gap: 3px; padding: 8px 14px 9px; background: var(--pz-chrome); color: var(--pz-ink-2); text-align: left; }
.pm-who-n { font: 800 18px/1.1 var(--pz-rounded); color: var(--c); overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) { .pm-who-n { color: color-mix(in oklab, var(--c) 55%, white); } }
.pm-who-s { display: flex; align-items: center; font: 800 13px/1.1 var(--pz-rounded); }
.pm-challenge.bare::after { background: var(--pz-chrome); }
.pm-challenge > button { flex: 1 0 auto; justify-content: center; }
.pm-challenge { margin-left: var(--dx, 0px); }
.pm-challenge::after { left: clamp(18px, calc(50% - var(--dx, 0px)), calc(100% - 18px)); }
.pm-challenge.below { bottom: auto; top: 12px; }
.pm-challenge.below::after { bottom: auto; top: -7px; }
/* the hot dog's poem (member request, Zoe): his card opens on a hot dog stand's paper liner, a red-and-white gingham
   edge over plain napkin paper, and the poem's lines set in one by one as it arrives; "Another poem" underneath */
.pm-poem { white-space: normal; width: min(320px, calc(100vw - 24px)); }
.pm-poem .pm-who-s { font-size: 14px; color: var(--c); }
@media (prefers-color-scheme: dark) { .pm-poem .pm-who-s { color: color-mix(in oklab, var(--c) 55%, white); } }
.pm-poem-page { flex: 1 0 100%; display: grid; min-height: 58px; padding: 24px 16px 14px; color: #45282c; background-color: #fffdf8;
  background-image: repeating-conic-gradient(#d3121c 0 25%, #fff 0 50%); background-size: 12px 12px; background-repeat: repeat-x;
  font: 500 16px/1.5 var(--pz-rounded); text-align: left; }
.pm-poem-page span { display: block; padding-left: 1.1em; text-indent: -1.1em; text-wrap: pretty; animation: pz-line .45s ease-out both; animation-delay: calc(var(--i) * .32s); }
.pm-poem.waiting .pm-poem-page span { opacity: .35; animation: none; }
.pm-poem.waiting .pm-who-s { color: var(--pz-ink-2); }
.pm-poem .pm-poem-more { flex: 1 0 100%; padding: 9px 18px 10px; }
@keyframes pz-line { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .pm-poem-page span { animation: none; } }
.pm.offering .pm-me { display: none; }
.pm.talking .pm-me { display: none; }
.pm-bubble { position: absolute; left: 0; bottom: calc(var(--hh) + 10px); transform: translateX(-50%); width: max-content; max-width: 168px; pointer-events: none;
  padding: 7px 11px 8px; border-radius: 14px; background: var(--pz-chrome); color: var(--pz-ink); border: 2px solid var(--pz-line);
  font: 500 14px/1.3 var(--pz-rounded); overflow-wrap: anywhere; animation: pz-pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.pm-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: inherit;
  border: solid var(--pz-line); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pm-bubble .blood { font-style: normal; }
.pm-bubble .grawlix { font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Comic Sans", cursive; font-weight: 700; font-style: normal; white-space: nowrap; }
@keyframes pz-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.pm-bang { position: absolute; left: 14px; bottom: calc(var(--hh) - 4px); font: 800 28px/1 var(--pz-rounded); color: #f0532d; opacity: 0; pointer-events: none; }
.pm.emo-poked .pm-bang { animation: pz-bang 1.1s ease-out; }
@keyframes pz-bang { 0% { opacity: 0; transform: translateY(6px) scale(.5); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
/* members who aren't online sleep (in their beds): z's drift up off the head (which lies toward --side * -1) */
.pm-zzz { display: none; position: absolute; left: calc(var(--side, 1) * var(--hh) * -.55); bottom: calc(var(--hh) - 6px); width: 0; height: 0; pointer-events: none; }
.pm.sleeping .pm-zzz { display: block; }
.pm-zzz i { position: absolute; left: 0; bottom: 0; font: 800 15px/1 var(--pz-rounded); font-style: normal; color: var(--pz-ink-2); opacity: 0;
  animation: pz-zzz-r 3.6s ease-out infinite; will-change: transform, opacity; }
.pm-zzz.flip i { animation-name: pz-zzz-l; }
.pm-zzz i:nth-child(2) { font-size: 19px; animation-delay: 1.2s; }
.pm-zzz i:nth-child(3) { font-size: 24px; animation-delay: 2.4s; }
/* Bug fix (Ethan: the z's didn't move): iOS Safari doesn't animate var() inside @keyframes, so each side gets its own
   keyframes (plaza.js mkEl adds .flip for side -1), and they keep drifting under Reduce Motion (a slow, small float). */
@keyframes pz-zzz-r {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(.6); }
  15% { opacity: .9; }
  45% { transform: translate(-8px, -20px) rotate(4deg) scale(.82); }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate(-26px, -46px) rotate(8deg) scale(1); }
}
@keyframes pz-zzz-l {
  0% { opacity: 0; transform: translate(0, 0) rotate(8deg) scale(.6); }
  15% { opacity: .9; }
  45% { transform: translate(8px, -20px) rotate(-4deg) scale(.82); }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate(26px, -46px) rotate(-8deg) scale(1); }
}
.pm.sleeping .pm-bang { left: calc(var(--side, 1) * var(--hh) * -.55); }
@media (prefers-reduced-motion: reduce) {
  .pm-me { animation: none; }
  .pm-zzz i { animation-duration: 4.8s !important; animation-iteration-count: infinite !important; }
  .pm-zzz i:nth-child(2) { animation-delay: 1.6s; }
  .pm-zzz i:nth-child(3) { animation-delay: 3.2s; }
}


/* bottom bar */
.pz-bottom { flex: none; grid-template-columns: minmax(0, 1fr); background: var(--pz-chrome); border-top: 2px solid var(--pz-line); padding: 8px 12px calc(10px + var(--sab)); display: grid; gap: 8px; }
.kb-open .pz-bottom { padding-bottom: 8px; }
/* who's here (member request, Ethan: "add the active members bar to the lobby as well"): the chat's row (style.css .here-*)
   under the say bar on the lodge's black. It takes the bottom safe area, so the bar above drops its own; names are the
   member's colour lifted toward white so the deep ones read on black. Gone while the keyboard is up, like in the chat. */
.pz-bottom:has(+ .pz-here) { padding-bottom: 8px; }
.pz-here { flex: none; display: flex; gap: 4px; padding: 6px 10px calc(4px + var(--sab)); overflow-x: auto; background: var(--pz-chrome);
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--pz-line); }
.pz-here::-webkit-scrollbar { display: none; }
.kb-open .pz-here, .plaza.deco .pz-here { display: none; }
.plaza.deco .pz-bottom:has(+ .pz-here) { padding-bottom: calc(10px + var(--sab)); }
.pz-here .here-p { color: color-mix(in srgb, var(--c, #fff) 45%, #fff); font: 800 12px/1.2 var(--pz-rounded); }
.pz-here .here-note { color: var(--pz-ink-2); font-family: var(--pz-rounded); }
.pz-emotes { display: flex; gap: 8px; }
.pz-say { display: flex; gap: 8px; }
.pz-say input { flex: 1; min-width: 0; min-height: 44px; padding: 9px 16px; border-radius: 99px; border: 2px solid var(--pz-line); background: var(--pz-floor); color: var(--pz-ink);
  font: 500 17px/1.2 var(--pz-rounded); outline: none; }
.pz-say input:focus { border-color: var(--pz-blue); }

/* panels (My Miis, editor) slide over the floor */
.pz-panel { position: absolute; inset: 0; z-index: 5000; display: flex; flex-direction: column; background: var(--pz-floor);
  opacity: 0; transform: translateY(14px); transition: opacity .2s, transform .22s cubic-bezier(.2, .8, .2, 1); }
.pz-panel.in { opacity: 1; transform: none; }
.pz-scroll { flex: 1; overflow-y: auto; padding: 16px 14px calc(24px + var(--sab)); overscroll-behavior: contain; }
.pz-lede { margin: 0 0 16px; color: var(--pz-ink-2); font-size: 15.5px; line-height: 1.45; max-width: 52ch; }

.mc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.mc { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mc-pick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: 18px;
  border: 2px solid var(--pz-line); background: var(--pz-chrome); color: var(--pz-ink); font-family: var(--pz-rounded); }
.mc-pick .mc-fig { width: 76px; height: 129px; opacity: 0; transition: opacity .15s; }
.mc-pick .mc-fig.in { opacity: 1; }
.mc-pick .mc-cutout { object-fit: contain; }
.mc.main .mc-pick { border-color: var(--pz-blue); box-shadow: inset 0 0 0 1.5px var(--pz-blue); }
.mc-name { font-weight: 800; font-size: 15px; }
.mc-flag { min-height: 40px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--pz-blue); }
.mc-new { justify-content: center; min-height: 185px; border-style: dashed; }
.mc-new .plus { font: 800 44px/1 var(--pz-rounded); color: var(--pz-blue); }

/* editor */
.ed-stage { position: relative; flex: none; height: clamp(190px, 34vh, 340px); padding: 0; background: var(--pz-sky); border-bottom: 2px solid var(--pz-line); display: flex; justify-content: center; overflow: hidden; }
.ed-mii { width: 100%; height: 100%; }
.ed-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ed-mii > .mii { display: block; height: 100%; width: auto; margin: 0 auto; aspect-ratio: 100 / 170; overflow: visible; }
.ed-shuffle { position: absolute; right: 12px; bottom: 12px; }
.ed-name { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--pz-chrome); border-bottom: 2px solid var(--pz-line); font-weight: 800; font-size: 15px; }
.ed-name input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--pz-line); background: var(--pz-floor); color: var(--pz-ink); font: 800 17px/1.2 var(--pz-rounded); outline: none; }
.ed-name input:focus { border-color: var(--pz-blue); }
.ed-tabs { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; background: var(--pz-chrome); border-bottom: 2px solid var(--pz-line); }
.ed-tabs::-webkit-scrollbar { display: none; }
.ed-tabs button { flex: none; min-height: 40px; padding: 7px 14px; border-radius: 99px; border: 2px solid var(--pz-line); background: var(--pz-floor); color: var(--pz-ink-2); font: 800 14.5px/1 var(--pz-rounded); }
.ed-tabs button[aria-selected="true"] { border-color: var(--pz-blue); background: var(--pz-chrome); color: var(--pz-ink); box-shadow: inset 0 0 0 1.5px var(--pz-blue); }
.ed-pane { flex: 1; overflow-y: auto; padding: 14px 12px calc(20px + var(--sab)); overscroll-behavior: contain; }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.opt { aspect-ratio: 1; padding: 4px; border-radius: 16px; border: 2px solid var(--pz-line); background: var(--pz-chrome); display: grid; place-items: center; }
.opt .mii-face, .opt img { width: 100%; height: 100%; display: block; }
.opt img { opacity: 0; transition: opacity .15s; }
.opt img.in { opacity: 1; }
.opt.on { border-color: var(--pz-blue); box-shadow: inset 0 0 0 2px var(--pz-blue); background: var(--pz-sky); }
.ed-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sw { width: 42px; height: 42px; border-radius: 50%; background: var(--sw); border: 2px solid #00000024; }
.sw.on { box-shadow: 0 0 0 3px var(--pz-floor), 0 0 0 6px var(--pz-blue); }
.ed-sub { margin: 20px 0 0; font-weight: 800; font-size: 15px; }
.ed-slider { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; min-height: 48px; font-weight: 800; font-size: 15px; }
.ed-slider input { width: 100%; accent-color: var(--pz-bar); height: 32px; }
.ed-del { display: block; margin: 22px auto 0; }

/* the chat header's door to the plaza: your own Mii's face */

/* The mech and henry's centipede: the owner's red "Fire"/"Bite" pill, the "!" when a laser or bite hits, and the floor shaking on impact. */
.pz-btn.fire { margin-left: auto; background: var(--pz-bar); border-color: var(--pz-bar); color: #fff; }
.pz-btn[hidden] { display: none; }
.pm.emo-zapped .pm-bang { animation: pz-bang 1.3s ease-out; }
.pz-floor.shake { animation: pz-shake .34s linear; }
@keyframes pz-shake { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, -1px); } }
@media (prefers-reduced-motion: reduce) { .pz-floor.shake { animation: none; } }


/* Pokémon followers (member request, henry): a quiet tag under the Pokémon trailing a Bii. */
.pk { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.pk-tag { position: absolute; top: 5px; left: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 700 11px/1 var(--pz-rounded); padding: 2px 6px 3px; border-radius: 99px; color: var(--pz-ink-2);
  background: color-mix(in oklab, var(--pz-chrome) 85%, transparent); }
.pk-lv { margin-left: 4px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* Moving furniture (member request, Ethan: "let users move and place the furniture on a grid, except the beds").
   The chair button sits in the floor's corner; while it's on it's filled teal, the same teal as the footprint under the
   piece you're holding, and the chat bar gives way to one plain line: the piece's name, Turn, Done. */
.pz-cam-b.deco { color: var(--pz-ink); }
.pz-cam-b.deco[aria-pressed="true"] { background: #1fa9ab; color: #fff; }
.plaza.deco .pz-emotes, .plaza.deco .pz-say { display: none; }
.plaza.deco .pz-floor { cursor: default; }
.pz-deco { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.pz-deco[hidden] { display: none; }
.pz-deco-say { flex: 1; min-width: 0; margin: 0; font: 800 16px/1.2 var(--pz-rounded); color: var(--pz-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm[data-key="jesus"] .pm-bubble { max-width: 220px; } /* his verses run long (plaza.js plaza-say) */

@media (max-width: 380px) { .pz-emotes .pz-btn.small { padding-left: 11px; padding-right: 11px; } }