/* Mii Plaza + Mii editor. A deliberate change of voice from the chat: a bright Wii plaza floor,
   rounded type, white pill buttons, Wii blue for "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: #dcf0fa;
  --pz-floor: #f6f8f9;
  --pz-grid: #e3e9ee;
  --pz-chrome: #ffffff;
  --pz-ink: #3b4550;
  --pz-ink-2: #75808c;
  --pz-line: #cdd5dc;
  --pz-blue: #1e9fd8;      /* your marker, selection rings */
  --pz-bar: #1487bd;       /* 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;
  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: #15283d; --pz-floor: #1a2130; --pz-grid: #232c3d; --pz-chrome: #232b3b;
    --pz-ink: #e6edf3; --pz-ink-2: #9aa6b4; --pz-line: #34405a; --pz-blue: #45bff0; --pz-bar: #106f9d;
  }
}
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: #106f9d; } }
.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: manipulation; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: var(--pz-world);
}
.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; }
.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-tag { position: absolute; top: 7px; left: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 800 12px/1 var(--pz-rounded); padding: 3px 7px 4px; border-radius: 99px; background: var(--pz-chrome); color: var(--c); border: 1.5px solid var(--pz-line); }
@media (prefers-color-scheme: dark) { .pm-tag { color: color-mix(in oklab, var(--c) 55%, white); } }
.pm-tag.here { background: var(--c); border-color: var(--c); color: #fff; }
.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.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 on the floor: 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 3.6s ease-out infinite; }
.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; }
@keyframes pz-zzz {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(.6); }
  15% { opacity: .9; }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate(calc(var(--side, 1) * -26px), -46px) rotate(8deg) scale(1); }
}
.pm.sleeping .pm-tag { opacity: .72; }
.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: none; opacity: .8; }
  .pm-zzz i:nth-child(2) { transform: translate(calc(var(--side, 1) * -10px), -16px); }
  .pm-zzz i:nth-child(3) { transform: translate(calc(var(--side, 1) * -22px), -36px); }
}


/* 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; }
.kb-open .pz-bottom { padding-bottom: 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-bar); 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: #dcf0fa; 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); }