/* Mii Plaza + Mii editor. A deliberate change of voice from the chat: a bright Wii plaza floor, rounded type and
   white pill buttons, under Fam's felt letterboard; indigo marks "you" and selection. 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"); }

.plaza {
  --pz-world: #ffffff;    /* the room's floor: clean white tiles, in light and dark mode */
  --pz-air: #dde8ee;      /* the hazy sky over the farm round it (farm3d.js) */
  --pz-sky: #e6e9f7;
  --pz-floor: #f5f6fb;
  --pz-chrome: #ffffff;
  --pz-ink: #1d2140;
  --pz-ink-2: #5b6079;
  --pz-line: #d8dcec;
  --pz-blue: #3340a0;     /* your marker, selection rings */
  --pz-bar: #2b2a33;      /* the top bar: the felt letterboard */
  --pz-rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", var(--font);
  position: fixed; left: 0; right: 0; top: 0; 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-sky: #262b42; --pz-floor: #171a2b; --pz-chrome: #1f2337;
    --pz-ink: #e8eaf5; --pz-ink-2: #a9aecb; --pz-line: #33395a; --pz-blue: #7d89ff; --pz-bar: #0f0f14;
  }
}
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-color: var(--pz-bar); color: var(--letter);
  background-image: repeating-linear-gradient(to bottom, transparent 0 7px, var(--felt-groove) 7px 9px); }
.pz-top > :first-child { justify-self: start; }
.pz-top > :last-child { justify-self: end; }
.pz-title { margin: 0; font: 600 24px/1 var(--board); text-transform: uppercase; letter-spacing: .14em; text-shadow: 0 1px 0 #000a; 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: transparent; }
.pz-btn.blue { background: var(--pz-bar); border-color: var(--pz-bar); color: #fff; }
.pz-btn.blue { background: var(--pz-blue); border-color: var(--pz-blue); }
.pz-top .pz-btn.blue { background: var(--letter); border-color: var(--letter); color: var(--felt); }
@media (prefers-color-scheme: dark) { .pz-btn.blue { color: #10132a; } }
.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-air);
}
/* bug fix (Ethan): the floor is its own layer, so nothing drawn on it (bubbles, placards, markers) climbs over the
   text bar, and while the iPhone keyboard is up the floor stops at the raised bar instead of showing through the keys */
.pz-floor { isolation: isolate; }
/* the camera controls (member request: a pannable, zoomable lobby): a stacked column of white squares at the right
   edge of the floor. The red marker (the same one that bobs over your Bii) follows your Bii; it's rimmed while on. */
.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 + .pz-cam-b { margin-top: 2px; }
.pz-cam-b svg { width: 22px; height: 22px; fill: currentColor; }
.pz-cam-b.me { color: var(--pz-blue); }
.pz-cam-b.me[aria-pressed="true"] { background: var(--pz-blue); color: #fff; }
.pz-cam-b:active { transform: translateY(1px); }
.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-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; }
.pm.pz-gone { visibility: hidden; } /* eaten by Sally (plaza.js "Sally on the hunt"): nothing left to talk or wear a marker */
/* tap a Mii: its card pops up over its head, the name in its member's color */
.pm-challenge { position: absolute; left: 0; bottom: calc(var(--hh) + 12px); transform: translateX(-50%); pointer-events: auto;
  max-width: calc(100vw - 24px); border-radius: 14px; border: 2px solid var(--pz-line); background: var(--pz-chrome); white-space: nowrap;
  box-shadow: inset 0 -3px 0 #0000000f; animation: pz-pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.pm-challenge::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-who { display: grid; gap: 3px; padding: 8px 14px 10px; 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 { font: 800 13px/1.1 var(--pz-rounded); }
/* the missing link's evolutionary stage (plaza.js evoLine) */
.pm-evo { max-width: 15em; font: 700 12px/1.2 var(--pz-rounded); color: var(--c); text-wrap: balance; }
@media (prefers-color-scheme: dark) { .pm-evo { color: color-mix(in oklab, var(--c) 55%, white); } }
/* a god mode sentence (punish3d.js): its own line, in the cell's iron with a brass rule */
.pm-pun { display: block; --c: #3c3f48; padding-left: 6px; border-left: 3px solid #c9a23a; margin: 2px 0; }
.pm-ch-go { display: block; width: calc(100% - 16px); min-width: 120px; min-height: 40px; margin: -2px 8px 8px; padding: 8px 16px; border: 0; border-radius: 99px;
  background: var(--pz-blue); color: #fff; font: 800 15px/1 var(--pz-rounded); box-shadow: inset 0 -3px 0 #0000002a; cursor: pointer; }
@media (prefers-color-scheme: dark) { .pm-ch-go { color: #10132a; } }
.pm-ch-go:active { transform: translateY(1px); }
/* a card kept on screen (plaza.js keepCardOn): slid in off the edges (--dx; the tail still points at the figure), or
   dropped under the feet when there's no room over the head */
.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: -8px; border-width: 2px 0 0 2px; }
/* the Game Boy's card: one pill per game room, side by side */
.pm-gb-row { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 8px 8px; }
.pm-gb-row .pm-ch-go { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; padding: 8px 14px; }
/* Elsa's own mech card (plaza.js showCard): Fire lasers in laser red with a lit core, Fly in her colour */
.pm-mech-row { display: flex; gap: 6px; margin: -2px 8px 8px; }
.pm-mech-row .pm-ch-go { flex: 1 0 auto; width: auto; min-width: 0; margin: 0; padding: 8px 14px; white-space: nowrap; }
.pm-mech-row [data-mech="laser"] { background: #e8183c; color: #fff; box-shadow: inset 0 -3px 0 #0000003a, 0 0 0 2px #ff8fa2 inset; }
.pm-mech-row [data-mech="fly"] { background: var(--c); color: #fff; }
/* ...with the Game Boy shelf's games first: grey cartridges (the /gba shelf's, notched at the top) with white paper labels */
.pm-gb { display: flex; flex-direction: column; max-height: var(--room, none); }
.pm-gb > .pm-who { flex: none; }
.pm-gb-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; border-radius: 0 0 12px 12px; }
.pm-gb-carts { display: grid; gap: 6px; margin: -2px 8px 8px; padding-bottom: 8px; border-bottom: 2px dashed var(--pz-line); }
.pm-gb-carts[hidden] { display: none; }
.pm-gb-cart { display: block; flex: none; min-height: 44px; padding: 7px 9px 6px; background: #4a4446; border-radius: 6px 6px 5px 5px; text-decoration: none;
  clip-path: polygon(0 9px, 12px 9px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 9px, 100% 9px, 100% 100%, 0 100%);
  box-shadow: inset 0 -3px 0 #00000040; -webkit-tap-highlight-color: transparent; }
.pm-gb-cart:active { transform: translateY(1px); }
.pm-gb-cart:focus-visible { outline: 3px solid var(--pz-blue); outline-offset: -3px; }
.pm-gb-lbl { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 9px; background: #fff; border-radius: 3px; }
.pm-gb-lbl i { flex: none; font: normal 800 10px/1 var(--pz-rounded); letter-spacing: .06em; color: #fff; background: #2c3b94; border-radius: 3px; padding: 3px 4px; }
.pm-gb-lbl b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 800 14px/1.15 var(--pz-rounded); color: #2c3b94; }
.pm-gb-more { justify-self: center; padding: 4px 8px; font: 800 13px/1.1 var(--pz-rounded); color: var(--pz-ink-2); }
/* Agent Gary's card: two black bars with a Geek Squad orange underline */
.pm-gs .pm-gs-go { display: flex; align-items: center; justify-content: center; gap: 8px; background: #000; color: #fff; box-shadow: inset 0 -3px 0 #ff6c0c; }
.pm-gs .pm-gs-go + .pm-gs-go { margin-top: 4px; }
.pm-gs .pm-gs-go svg { width: 19px; height: 19px; flex: none; color: #ff6c0c; }
/* the nisse's card: the English for what he just said (it wraps), and porridge for him in his coat green */
.pm-ns { white-space: normal; width: min(240px, calc(100vw - 24px)); }
.pm-ns .pm-who-s { font-weight: 700; font-size: 14px; line-height: 1.25; text-wrap: pretty; }
.pm-ns .pm-ch-go { background: var(--c); }
.pm-ns .pm-mech-row { flex-wrap: wrap; }
.pm-ns-no { font: italic 600 13px/1.25 var(--pz-rounded); color: var(--pz-ink-2); opacity: .8; text-wrap: pretty; }
.pm-ns-no:empty { display: none; }
/* the nisse's speech bubble: tap it to flip his Norwegian to English and back */
.pm-bubble.xl { margin-left: var(--dx, 0px); pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.pm-bubble.xl::after { left: clamp(18px, calc(50% - var(--dx, 0px)), calc(100% - 18px)); }
.pm-bubble.xl .pm-bt { display: block; }
.pm-bubble.xl .pm-bh { display: block; margin-top: 3px; font: 800 11px/1.2 var(--pz-rounded); color: #1f7a45; }
.pm-bubble.xl.en .pm-bt { animation: pz-flip .25s ease-out; }
@keyframes pz-flip { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-color-scheme: dark) { .pm-bubble.xl .pm-bh { color: #6fd39a; } }
@media (prefers-reduced-motion: reduce) { .pm-bubble.xl.en .pm-bt { animation: none; } }
/* the hot dog's poem: his card opens onto a hot dog stand's paper tray liner (a gingham edge over napkin paper), the
   lines setting in one by one as the poem arrives; "Another poem" underneath */
.pm-poem { white-space: normal; width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; max-height: var(--room, none); }
.pm-poem > * { flex: none; }
.pm-poem > .pm-poem-page { flex: 0 1 auto; min-height: 58px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.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.waiting .pm-who-s { color: var(--pz-ink-2); }
.pm-poem-page { display: grid; min-height: 58px; margin: 0 8px 10px; padding: 22px 14px 12px; border-radius: 4px; color: #45282c; background-color: #fffdf8;
  background-image: repeating-conic-gradient(#c4442c 0 25%, #fff 0 50%); background-size: 12px 12px; background-repeat: repeat-x;
  box-shadow: inset 0 0 0 1px #0000000f; font: 500 16px/1.5 var(--pz-rounded); text-align: left; }
.pm-poem-page:empty::before { content: ""; height: 24px; }
.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; }
@keyframes pz-line { from { opacity: 0; transform: translateY(4px); } }
/* the regulars' speech (Jesus's verses run long) */
.pm.npc .pm-bubble { max-width: 230px; }
/* a big landing, or a Mii knocked flying, shakes the floor */
.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); } }
/* lightning onto a Mii (plaza.js boltFlash): the floor quakes and the screen whites out in step with the bolt's two
   flashes (storm3d.js flashAt big); one soft flash and no quake with Reduce Motion */
.pz-floor.quake { animation: pz-quake .7s linear; }
@keyframes pz-quake { 0%, 100% { transform: none; } 10% { transform: translate(-9px, 4px); } 22% { transform: translate(8px, -6px); } 34% { transform: translate(-7px, 3px); } 48% { transform: translate(5px, -4px); } 62% { transform: translate(-4px, 2px); } 78% { transform: translate(2px, -1px); } }
.pz-bolt { position: absolute; inset: -20px; z-index: 3600; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 35%, #fff 0%, #eef1ff 45%, #c9d2ff 100%);
  animation: pz-bolt 1s linear forwards; }
@keyframes pz-bolt { 0% { opacity: .82; } 14% { opacity: .78; } 15% { opacity: .1; } 22% { opacity: .1; } 23% { opacity: .7; } 36% { opacity: .62; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pm-poem-page span { animation: none; } .pz-floor.shake, .pz-floor.quake { animation: none; }
  .pz-bolt { animation: pz-bolt-soft .4s linear forwards; } }
@keyframes pz-bolt-soft { 0% { opacity: .3; } 100% { opacity: 0; } }
/* the piranha pond (plaza.js pondGore): when the fish hurl a Mii up out of the water the floor's edges flush blood red */
.pz-gore { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(142, 15, 28, .2) 62%, rgba(110, 8, 20, .62) 100%);
  animation: pz-gore .9s ease-out forwards; }
@keyframes pz-gore { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.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); }
@keyframes pz-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
/* the shame chant (plaza.js "Shame"): the word the room is on is lit, the other waits in pencil */
.pm-bubble.shame { font-weight: 700; white-space: nowrap; }
.pm-bubble.shame span { color: var(--pz-ink-2); opacity: .45; transition: opacity .15s, color .15s; }
.pm-bubble.shame span.on { color: var(--pz-ink); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pm-bubble.shame span { transition: none; } }
.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.emo-dust .pm-zzz { display: none; } /* lasered to dust (mii3d.js PlazaStage.dust): nobody there to snore */
.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; }
/* 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 + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.pz-emotes { display: flex; gap: 8px; }
#pzBeds { margin-left: auto; } /* this one moves everyone (server.js bedParty), so it stands apart */
.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 + env(safe-area-inset-bottom)); 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.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-evo { position: absolute; left: 12px; top: 10px; max-width: min(15em, 55%); margin: 0; padding: 6px 11px; border-radius: 14px;
  background: var(--pz-chrome); color: var(--pz-ink-2); border: 2px solid var(--pz-line); font: 700 12px/1.25 var(--pz-rounded); }
.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-name.locked input { background: var(--pz-chrome); border-style: dashed; color: var(--pz-ink-2); }
.ed-name.locked input:focus { border-color: var(--pz-line); }
.ed-name em { flex: none; font: 800 12.5px/1 var(--pz-rounded); font-style: normal; color: var(--pz-ink-2); }
.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 + env(safe-area-inset-bottom)); 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-outfit { display: flex; gap: 8px; margin-top: 10px; }
.ed-butt { align-items: center; margin: 4px 0 6px; }
.ed-butt .ed-sub { margin: 0 auto 0 0; }
.ed-outfit .pz-btn.on { border-color: var(--pz-blue); box-shadow: inset 0 0 0 2px var(--pz-blue); background: var(--pz-sky); }
.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-blue); height: 32px; }
.ed-del { display: block; margin: 22px auto 0; }

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

/* Moving furniture (member request, henry: the furniture editor from 🅱️chat). The chair button sits under the camera
   buttons; while it's on it's filled periwinkle, the colour of the footprint under the piece in your hand, and the
   emotes and chat bar give way to one plain line: the piece's name, Turn, Done. */
.pz-cam-b.deco[aria-pressed="true"] { background: #7c8cff; color: #fff; }
.plaza.deco .pz-emotes, .plaza.deco .pz-say { display: none; }
.plaza.deco .pz-floor { cursor: grab; }
.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; }

/* Thrown off the bed (plaza.js bedSlip): the letterboard slip, with a strip of blue mattress ticking down its left edge and
   the thrower's head on the right. It lands like a thrown Mii: drops in tilted, bumps, settles. */
.bed-slip { position: fixed; z-index: 6002; left: 50%; top: calc(10px + env(safe-area-inset-top)); width: min(calc(100% - 24px), 380px);
  display: flex; flex-direction: column; gap: 6px; padding: 13px 70px 12px 22px; border: 0; border-radius: 12px; overflow: hidden; text-align: left;
  box-shadow: 0 0 0 1px #f5f5f21f, 0 3px 0 #0000004d; touch-action: none; -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, calc(-100% - 20px - env(safe-area-inset-top))); visibility: hidden;
  transition: transform .22s ease-in, visibility 0s .22s; }
.bed-slip::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: repeating-linear-gradient(to bottom, #ece6d6 0 3px, #34528a 3px 5px, #ece6d6 5px 6px, #34528a 6px 7px); }
.bed-slip.pond::before { width: 10px; /* fed to the piranhas (plaza.js bedSlip): pond green, a row of teeth biting down it */
  background: #2f7a6c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9'%3E%3Cpath d='M0 1v7l7-3.5z' fill='%23fbfaf4'/%3E%3C/svg%3E") 0 0 / 10px 9px repeat-y; }
.bed-slip.in { transform: translate(-50%, 0); visibility: visible; transition: none; animation: bed-land .6s cubic-bezier(.2, .9, .3, 1) both; }
.bed-slip .row1 { font-size: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bed-slip .row2 { text-transform: none; letter-spacing: .04em; font-size: 16px; white-space: normal; }
.bed-slip .bs-face { position: absolute; right: 14px; top: 50%; width: 44px; height: 44px; margin-top: -22px; transform: rotate(-12deg); }
.bed-slip .bs-face .mface, .bed-slip .bs-face .mface img, .bed-slip .bs-face .mface svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.bed-slip:active { filter: brightness(1.1); }
.bed-slip:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
@keyframes bed-land {
  0% { transform: translate(-50%, calc(-100% - 20px - env(safe-area-inset-top))) rotate(-5deg); }
  55% { transform: translate(-50%, 6px) rotate(2deg); }
  75% { transform: translate(-50%, -2px) rotate(-1deg); }
  100% { transform: translate(-50%, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .bed-slip, .bed-slip.in { transition: none; animation: none; } }
/* Sally's shield (plaza.js `shield`): hands reaching for her Mii, or a Mii thrown at her, meet a glassy bubble round
   her head, an iridescent rim in her teal, rose, champagne and lilac, three gold glints and "Not the face!" in her red */
.pm-shield { --hr: calc(var(--hh) * .36); position: absolute; left: 0; bottom: calc(var(--hh) * .7); width: 0; height: 0; pointer-events: none; z-index: 2; }
.pm-shield i { position: absolute; left: calc(var(--hr) * -1); top: calc(var(--hr) * -1); width: calc(var(--hr) * 2); height: calc(var(--hr) * 2);
  border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffffffd9 0 7%, #ffffff00 18%), radial-gradient(circle, #ffffff00 58%, #fff6e033 70%, #ffffff8c 100%);
  box-shadow: 0 0 0 2px #ffffffb3, 0 0 18px 4px #ffd6e799; animation: pz-shield 1.6s cubic-bezier(.2, 1.4, .4, 1) both; }
.pm-shield i::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 20deg, #8fe3e0, #ff8fb1, #f6d58e, #b9a4ff, #8fe3e0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; }
.pm-shield b { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #f2c14e;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px #fff);
  animation: pz-glint 1.4s ease-out both; }
.pm-shield b:nth-of-type(1) { left: calc(var(--hr) * .8); top: calc(var(--hr) * -.8); }
.pm-shield b:nth-of-type(2) { left: calc(var(--hr) * -1.05); top: calc(var(--hr) * -.1); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; animation-delay: .12s; }
.pm-shield b:nth-of-type(3) { left: calc(var(--hr) * .6); top: calc(var(--hr) * .8); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; animation-delay: .24s; }
.pm-shield span { position: absolute; left: 0; top: calc(var(--hr) + 8px); transform: translateX(-50%); white-space: nowrap; padding: 5px 11px 6px;
  border-radius: 99px; background: var(--pz-chrome); border: 2px solid #f6d58e; color: #b3122e; font: 800 14px/1 var(--pz-rounded);
  box-shadow: inset 0 -3px 0 #0000000f; animation: pz-shield-say 1.6s ease-out both; }
@media (prefers-color-scheme: dark) { .pm-shield span { color: #ff8fa6; } }
@keyframes pz-shield { 0% { transform: scale(.55); opacity: 0; } 18% { transform: scale(1.08); opacity: 1; } 32% { transform: scale(.97); } 70% { transform: none; opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes pz-glint { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 30% { transform: scale(1.2) rotate(0); opacity: 1; } 100% { transform: scale(.4) rotate(30deg); opacity: 0; } }
@keyframes pz-shield-say { 0% { transform: translateX(-50%) translateY(6px) scale(.7); opacity: 0; } 15% { transform: translateX(-50%); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pm-shield i, .pm-shield b, .pm-shield span { animation-name: pz-fade; animation-timing-function: linear; }
}
@keyframes pz-fade { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }
/* Ralph Brown's card: today's beanie as a little ribbed knit swatch, one hickory pill with a shotgun shell on it */
.pm-th .pm-th-cap { display: flex; align-items: center; gap: 6px; font: 700 12px/1.1 var(--pz-rounded); }
.pm-th .pm-th-cap i { width: 16px; height: 12px; flex: none; border-radius: 7px 7px 2px 2px; background:
  linear-gradient(#0000 0 66%, #00000033 66% 70%, #0000 70%),
  repeating-linear-gradient(90deg, #ffffff38 0 1.5px, #0000 1.5px 3px), var(--knit); box-shadow: inset 0 -1px 0 #0000002e, 0 0 0 1px #00000024; }
.pm-th .pm-ch-go { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--c); color: #fff8ec; }
.pm-th .pm-ch-go svg { width: 10px; height: 20px; flex: none; }
/* Boots's plaque (tap the statue): Drees's photo of the real one as a white-bordered snapshot set a little crooked into
   the top of the card, his name in his overalls red */
.pm-boots { width: 188px; white-space: normal; }
.pm-boots-pic { display: block; width: calc(100% - 28px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; margin: 12px 14px 2px;
  border: 5px solid #fff; border-bottom-width: 14px; border-radius: 2px; background: #c9c4ba; box-shadow: 0 0 0 1px var(--pz-line), 0 3px 8px #1d214026;
  transform: rotate(-2deg); }
.pm-boots .pm-who { padding-top: 6px; }
.pm-boots .pm-who-s { font-weight: 700; line-height: 1.25; text-wrap: pretty; }
/* The piranha pond's card (tap the pond): its name in pond green over a row of white teeth, the tally under it */
.pm-pond { width: 214px; white-space: normal; }
.pm-pond::before { content: ''; display: block; height: 9px; margin: 10px 14px 0; border-radius: 2px;
  background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9'%3E%3Cpath d='M1 0h8L5 7z' fill='%23fbfaf4'/%3E%3C/svg%3E") 0 0 / 10px 9px repeat-x; }
.pm-pond .pm-who-s { font-weight: 700; line-height: 1.25; text-wrap: pretty; }
/* Mr. Hitt's glass eyeball's card (tap the eyeball): a little painted glass eye staring out beside its name */
.pm-eye { display: flex; align-items: center; width: 236px; white-space: normal; }
.pm-eye-ball { flex: none; width: 40px; height: 40px; margin: 0 -4px 0 12px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 9%, #fff0 15%),
    radial-gradient(circle at 50% 50%, #0d0b0d 0 15%, #b98a46 17% 22%, #5d8aa0 26% 38%, #2a3e4a 43%, #ece5d8 48%, #f6f1e7 66%, #d8cdbb 100%);
  box-shadow: inset -3px -4px 6px #3a2a1a33, 0 2px 0 #00000014; }
.pm-eye .pm-who-n { font-size: 17px; }
.pm-eye .pm-who-s { font-weight: 700; line-height: 1.25; text-wrap: pretty; }
/* The pond jail (plaza.js "The pond jail"): a pond-green tag over a prisoner's head counting its minutes down, a row of
   teeth biting down from its top edge; its card wears the same teeth and a pond-green button (Sally: Let them out). */
.pm-jail { position: absolute; left: 0; bottom: calc(var(--hh) + 8px); transform: translateX(-50%); pointer-events: none;
  padding: 9px 9px 3px; border-radius: 9px; white-space: nowrap; color: #fbfaf4; font: 800 13px/1 var(--pz-rounded); letter-spacing: .01em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23fbfaf4'/%3E%3C/svg%3E") 1px 0 / 8px 6px repeat-x, #2f7a6c;
  box-shadow: 0 0 0 2px var(--pz-line), inset 0 -2px 0 #0000002e; }
.pm.offering .pm-jail, .pm.talking .pm-jail { display: none; }
.pm-jailed { width: 222px; white-space: normal; }
.pm-jailed::before { content: ''; display: block; height: 9px; margin: 10px 14px 0; border-radius: 2px;
  background: #2f7a6c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9'%3E%3Cpath d='M1 0h8L5 7z' fill='%23fbfaf4'/%3E%3C/svg%3E") 0 0 / 10px 9px repeat-x; }
.pm-jailed .pm-who-s { font-weight: 700; line-height: 1.25; text-wrap: pretty; }
.pm-jailed .pm-ch-go { background: #2f7a6c; }
/* Spot (plaza.js "Spot", server.js): no tag over her head (her name is on her card when tapped); she never talks */
.pm-spot { width: max-content; } /* her card: just her name */
.pm-spot .pm-who { padding: 8px 14px 9px; text-align: center; }
.pm-pet[hidden] { display: none; }