/* The world memory's pieces on screen (2026-10-22): the Wall of Names (D231, Pix's collection set), friendship in talks
   and in My Friends (D234). The look is the game's own HUD (UI-01): Nunito, cream and violet glass, gold; the art is
   Codex's (assets/generated/pix/wall/), placed here; motion is transform and opacity only. */

/* ---------------------------------------------------------------- the Wall of Names */
.pxw { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2cqh; container-type: size; opacity: 0; transition: opacity .38s ease; pointer-events: auto; }
.pxw.on { opacity: 1; }
.pxw-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(58, 24, 92, .62), rgba(22, 6, 40, .86));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pxw-board { position: relative; z-index: 1; width: min(88cqw, 76cqh * 1.6); container-type: inline-size;
  filter: drop-shadow(0 2.4cqw 3.2cqw rgba(20, 0, 40, .55)); transform: translateY(1.2cqh) scale(.97); transition: transform .55s cubic-bezier(.2, .8, .25, 1); }
.pxw.on .pxw-board { transform: none; }
.pxw-board-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.pxw-title { position: absolute; display: grid; place-items: center; text-align: center; pointer-events: none; }
.pxw-title span { font: 1000 2.35cqw/1 "Nunito", sans-serif; letter-spacing: .03em; white-space: nowrap; color: #4a2a0c;
  text-shadow: 0 .12cqw 0 rgba(255, 236, 190, .75), 0 -.08cqw 0 rgba(90, 50, 10, .45); }
.pxw-win { position: absolute; pointer-events: none; }
.pxw-win > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.pxw-glow { transform: scale(1.3); opacity: .95; mix-blend-mode: screen; }
.pxw-face { object-fit: cover; object-position: 50% 18%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pxw-frame { z-index: 2; }
.pxw-spark { z-index: 3; opacity: 0; transform: scale(.3); }
/* tonight's windows: dark until their turn, then the light comes, the portrait, a sparkle */
.pxw-win.fresh .pxw-glow, .pxw-win.fresh .pxw-face { opacity: 0; }
/* (a window still waiting for its turn is a dark window like the others; its glass fades as the light comes) */
.pxw-win.fresh .pxw-glass { transition: opacity .5s ease; }
.pxw-win.fresh.lighting .pxw-glass, .pxw-win.fresh.done .pxw-glass { opacity: 0; }
/* the window rises large for a moment so its portrait reads even on a phone, then settles into its place */
.pxw-win.fresh.lighting { z-index: 5; animation: pxw-rise 2.6s cubic-bezier(.3, .7, .25, 1) forwards; }
.pxw-win.fresh.lighting .pxw-glow { animation: pxw-glow-in .9s cubic-bezier(.2, .8, .25, 1) forwards; }
.pxw-win.fresh.lighting .pxw-face { animation: pxw-face-in .8s .18s cubic-bezier(.2, .8, .25, 1) forwards; }
.pxw-win.fresh.lighting .pxw-spark { animation: pxw-spark 1.1s ease-out forwards; }
.pxw-win.fresh.done { z-index: 1; }
.pxw-win.fresh.done .pxw-glow { opacity: .95; transform: scale(1.3); animation: none; }
.pxw-win.fresh.done .pxw-face { opacity: 1; animation: none; }
@keyframes pxw-rise { 0% { transform: none; } 18% { transform: scale(3); } 62% { transform: scale(3); } 100% { transform: none; } }
@keyframes pxw-glow-in { from { opacity: 0; transform: scale(.7); } to { opacity: .95; transform: scale(1.3); } }
@keyframes pxw-face-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes pxw-spark { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.9); } }
.pxw-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 2.4cqw; }
.pxw-caption { margin: 0; font: 900 max(13px, 2.1cqh)/1.2 "Nunito", sans-serif; color: var(--cream, #fff6e3);
  text-shadow: 0 .2cqh .6cqh rgba(20, 0, 40, .6); }
.pxw-go { position: static; }
/* inside the tablet (My Adventures): the same wall in the panel, no veil */
.pxw.pxw-inline { position: relative; inset: auto; z-index: auto; width: 100%; height: 100%; opacity: 1; gap: 1.6cqh; }
.pxw.pxw-inline .pxw-veil { display: none; }
.pxw.pxw-inline .pxw-board { width: min(96cqw, 78cqh * 1.6); transform: none; }
.pxw.pxw-inline .pxw-caption { color: var(--cream, #fff6e3); }
.goal-card .pxw-open { margin-top: .6em; }
.collection-page { display: flex; flex-direction: column; gap: calc(var(--su, 1px) * 10); height: 100%; min-height: 0; }
.collection-page > .secondary-button { align-self: flex-start; }
.collection-wall { position: relative; flex: 1; min-height: 0; }

/* ---------------------------------------------------------------- friendship in a talk: the small chip */
.fr-chip { position: absolute; z-index: 60; display: inline-flex; align-items: center; gap: .35em; padding: .28em .6em .28em .34em;
  border-radius: 999px; pointer-events: none; font: 1000 max(13px, calc(var(--su, 1px) * 18))/1 "Nunito", sans-serif; color: #4a1d6e;
  background: linear-gradient(180deg, #fff8e6, #ffe7a8); box-shadow: 0 .3em .9em rgba(40, 10, 60, .35), inset 0 0 0 2px rgba(255, 255, 255, .7); }
.fr-chip img { width: 1.35em; height: 1.35em; object-fit: contain; }

/* ---------------------------------------------------------------- friendship in My Friends */
.friend-copy .friend-level { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.friend-copy .friend-level b { font: 1000 max(11px, calc(var(--su) * 12))/1 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--violet, #7a3fb0); border-radius: 999px; padding: .32em .7em; }
.friend-copy .friend-next { margin: 0 0 calc(var(--su) * 6); font: 800 max(12px, calc(var(--su) * 13))/1.25 "Nunito", sans-serif; color: rgba(42, 18, 69, .72); }
.friend-copy .friend-section h3 { margin-top: calc(var(--su) * 12); }
.friend-copy .friend-section p { margin: 0; }
.friend-copy .friend-sections { max-height: 42%; overflow: auto; overscroll-behavior: contain; padding-right: calc(var(--su) * 4); }