/* Mii Plaza + Mii editor. A deliberate change of voice from the chat: a bright Wii plaza floor, rounded type and
   white pill buttons, under E-chat'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 plaza itself: a clean white void, in light and dark mode */
  --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-world);
}
/* 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; }
.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 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-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-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 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); }
.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); }
.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; } }
.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; }
/* 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; }
.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-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 + 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-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 */
.plaza-go { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 2px solid var(--letter); background: #e6e9f7; overflow: hidden; display: grid; place-items: center; }
.plaza-go .mii-face, .plaza-go img { width: 100%; height: 100%; display: block; }
.plaza-go:active { transform: translateY(1px); }