/* Sendy's Metaverse, the social layer (js/meta/social/): nameplates, bubbles, emote pops, the chat
   dock, the guest banner, the emote wheel, the NPC dialogue box and the Menu's social panels.
   House rules: every font-size is max(var(--text-floor), …); controls are at least 40 px; labels on
   light fills are near-black; motion stops with reduced motion or html.motion-off. */

:root { --soc-glass: rgba(10, 6, 24, 0.88); --soc-ink: #1f1238; --soc-cream: #fff8ee; }

/* ===== over heads: nameplates, bubbles, emote pops ===== */
.meta-plate-player { gap: 1px; padding: 0.2rem 0.75rem 0.26rem; border-radius: 14px; background: linear-gradient(180deg, rgba(36, 18, 66, 0.92), rgba(10, 6, 24, 0.9)); border: 1.5px solid rgba(198, 240, 0, 0.6); box-shadow: 0 0 14px rgba(198, 240, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.45); }
.meta-plate-player b { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; color: #fff; text-shadow: 0 2px 0 var(--soc-ink); font-size: max(var(--text-floor), 0.95rem); }
.meta-plate-player small { color: var(--meta-lime); font-weight: 800; letter-spacing: 0.02em; font-size: max(var(--text-floor), 0.72rem); }
.meta-plate-npc { gap: 1px; padding: 0.22rem 0.8rem 0.28rem; border-radius: 14px; background: linear-gradient(180deg, rgba(58, 30, 10, 0.92), rgba(16, 8, 22, 0.92)); border: 1.5px solid rgba(255, 179, 64, 0.85); box-shadow: 0 0 16px rgba(255, 179, 64, 0.3), 0 4px 10px rgba(0, 0, 0, 0.45); }
.meta-plate-npc b { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; color: var(--meta-gold); text-shadow: 0 2px 0 #2a1200; font-size: max(var(--text-floor), 1rem); }
.meta-plate-npc small { color: #efe3ff; font-weight: 700; font-size: max(var(--text-floor), 0.72rem); }

.meta-bubble { max-width: 270px; padding: 0.5rem 0.8rem; border-radius: 16px; background: var(--soc-cream); color: #160c22; border: 2px solid var(--soc-ink); box-shadow: 0 0 0 2px rgba(198, 240, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.45); font-weight: 700; line-height: 1.3; text-align: center; white-space: normal; overflow-wrap: anywhere; }
/* bubbles and emote pops float a few pixels clear of the nameplate under them, however far away the speaker is */
.meta-bubble { top: -26px; z-index: 2; }
.meta-emote-pop { top: -34px; z-index: 3; }
.meta-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 13px; height: 13px; background: var(--soc-cream); border-right: 2px solid var(--soc-ink); border-bottom: 2px solid var(--soc-ink); transform: translateX(-50%) rotate(45deg); }
.meta-bubble-you { box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.6), 0 8px 18px rgba(0, 0, 0, 0.45); }

.meta-emote-pop { pointer-events: none; }
.meta-emote-pop > span { display: grid; justify-items: center; animation: soc-pop 1.8s var(--ease-out, ease-out) forwards; }
.meta-emote-pop i { font-style: normal; line-height: 1; font-size: max(var(--text-floor), 2.5rem); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.meta-emote-pop b { font-family: var(--font-disp); font-weight: 400; color: var(--meta-lime); letter-spacing: 0.04em; text-shadow: 0 2px 0 var(--soc-ink), 0 0 12px rgba(198, 240, 0, 0.7); font-size: max(var(--text-floor), 1.15rem); }
@keyframes soc-pop { 0% { transform: translateY(16px) scale(0.4); opacity: 0; } 16% { transform: translateY(0) scale(1.18); opacity: 1; } 28% { transform: scale(1); } 72% { opacity: 1; transform: translateY(-16px); } 100% { opacity: 0; transform: translateY(-34px); } }

/* ===== the guest banner and the world's notices ===== */
.meta-guest, .meta-notice { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 0.6rem; max-width: min(420px, calc(100% - 200px)); padding: 0.45rem 0.5rem 0.45rem 0.75rem; border-radius: 16px; color: #fff; font-weight: 700; line-height: 1.3; pointer-events: auto; font-size: max(var(--text-floor), 0.84rem); }
.meta-guest { background: linear-gradient(90deg, rgba(40, 14, 58, 0.96), rgba(12, 7, 28, 0.94)); border: 1.5px solid var(--meta-magenta); box-shadow: 0 0 20px rgba(255, 43, 214, 0.3), 0 6px 16px rgba(0, 0, 0, 0.4); }
.meta-guest[hidden], .meta-notice[hidden] { display: none; }
.meta-guest-icon { font-size: max(var(--text-floor), 1.4rem); }
.meta-guest-txt { flex: 1; min-width: 0; }
.meta-guest-go, .meta-notice-go, .meta-chat-cta { flex: 0 0 auto; min-height: 40px; padding: 0 0.85rem; border-radius: 999px; border: 0; background: linear-gradient(180deg, #e6ff8a, var(--meta-lime)); color: #0b1000; font-weight: 900; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 0 #6f8a00; font-size: max(var(--text-floor), 0.85rem); }
.meta-guest-go:active, .meta-notice-go:active, .meta-chat-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #6f8a00; }
.meta-notice { top: auto; left: 50%; bottom: 20%; transform: translateX(-50%); max-width: min(560px, calc(100% - 24px)); background: rgba(12, 7, 28, 0.95); border: 1.5px solid var(--meta-gold); box-shadow: 0 0 22px rgba(255, 179, 64, 0.35); }

/* ===== the chat dock ===== */
.meta-chat { position: absolute; left: 12px; bottom: 12px; z-index: 3; width: min(380px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; transition: transform 0.35s var(--ease-out, ease-out); }
.meta-layer:has(> .meta-hint.on) .meta-chat:not(.is-typing) { transform: translateY(calc(-1 * var(--meta-hint-h, 104px))); }
.meta-chat-bar, .meta-chat-form, .meta-chat-why { pointer-events: auto; }
.meta-chat-log { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(to top, #000 72%, transparent); mask-image: linear-gradient(to top, #000 72%, transparent); }
.meta-chat[data-state="expanded"] .meta-chat-log { max-height: min(44vh, 420px); overflow-y: auto; pointer-events: auto; -webkit-mask-image: none; mask-image: none; padding: 8px; border-radius: 14px; background: rgba(10, 6, 24, 0.9); border: 1px solid rgba(255, 43, 214, 0.35); overscroll-behavior: contain; }
.meta-chat-line { margin: 0; max-width: 100%; padding: 0.18rem 0.6rem; border-radius: 10px; background: rgba(10, 6, 24, 0.74); color: #f4ecff; line-height: 1.35; overflow-wrap: anywhere; transition: opacity 0.9s ease; font-size: max(var(--text-floor), 0.86rem); }
.meta-chat-line b { color: var(--who, var(--meta-lime)); font-weight: 800; }
.meta-chat-line.is-you b { color: var(--meta-cyan); }
.meta-chat-line.is-sys { color: #d7caf6; font-style: italic; background: rgba(31, 18, 56, 0.78); }
.meta-chat-line.is-npc { border-left: 3px solid var(--meta-gold); }
.meta-chat-line.is-npc b { color: var(--meta-gold); }
.meta-chat-line.is-err { color: #ffe1e6; border-left: 3px solid #ff5a7a; background: rgba(44, 8, 22, 0.86); }
.meta-chat[data-state="collapsed"]:not(.is-typing) .meta-chat-line.is-old { opacity: 0; }
.meta-chat-bar { display: flex; align-items: center; gap: 8px; }
.meta-chat-toggle { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0 0.85rem; border-radius: 999px; border: 1.5px solid rgba(198, 240, 0, 0.65); background: var(--soc-glass); color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 0 14px rgba(198, 240, 0, 0.2); font-size: max(var(--text-floor), 0.9rem); }
.meta-chat-toggle b { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; }
.meta-chat-toggle kbd, .meta-talk kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 6px; background: var(--meta-lime); color: #0b1000; font-family: var(--font-disp); box-shadow: 0 2px 0 #6f8a00; font-size: max(var(--text-floor), 0.78rem); }
.meta-chat-here { color: var(--meta-lime); font-weight: 800; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: max(var(--text-floor), 0.78rem); }
.meta-chat-expand { margin-left: auto; flex: 0 0 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 43, 214, 0.6); background: var(--soc-glass); color: #fff; font-weight: 900; cursor: pointer; font-size: max(var(--text-floor), 0.95rem); }
.meta-chat-form { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 4px; border-radius: 999px; background: rgba(10, 6, 24, 0.96); border: 1.5px solid var(--meta-lime); box-shadow: 0 0 18px rgba(198, 240, 0, 0.3); }
.meta-chat-form[hidden], .meta-chat-why[hidden] { display: none; }
.meta-chat-input { flex: 1; min-width: 0; min-height: 40px; padding: 0 0.7rem; border: 0; outline: none; background: transparent; color: #fff; font-size: max(var(--text-floor), 0.95rem); }
.meta-chat-input::placeholder { color: #a99cc8; }
.meta-chat-input:disabled { cursor: not-allowed; }
.meta-chat-count { color: var(--meta-gold); font-weight: 800; font-variant-numeric: tabular-nums; font-size: max(var(--text-floor), 0.75rem); }
.meta-chat-send { min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 0; background: linear-gradient(180deg, #e6ff8a, var(--meta-lime)); color: #0b1000; font-weight: 900; cursor: pointer; font-size: max(var(--text-floor), 0.9rem); }
.meta-chat-send:disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
.meta-chat-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0.5rem 0.6rem 0.5rem 0.8rem; border-radius: 16px; background: rgba(12, 7, 28, 0.96); border: 1.5px solid var(--meta-gold); color: #fff; line-height: 1.35; font-size: max(var(--text-floor), 0.85rem); }
.meta-chat-why span { flex: 1 1 200px; }

/* ===== the emote button and its wheel ===== */
.meta-emotes { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 54px; height: 54px; pointer-events: auto; }
.meta-emote-btn { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); background: radial-gradient(circle at 35% 30%, #ffc4ea, var(--meta-magenta) 62%, #a0108a); box-shadow: 0 4px 0 #7a0a68, 0 0 18px rgba(255, 43, 214, 0.45); cursor: pointer; font-size: max(var(--text-floor), 1.6rem); line-height: 1; }
.meta-emotes.open .meta-emote-btn { transform: scale(0.92); box-shadow: 0 2px 0 #7a0a68, 0 0 26px rgba(255, 43, 214, 0.7); }
.meta-emote-wheel { position: absolute; left: -70px; top: -76px; width: 0; height: 0; }
.meta-emote-wheel[hidden] { display: none; }
.meta-emote-wheel::before { content: ""; position: absolute; left: -96px; top: -96px; width: 192px; height: 192px; border-radius: 50%; background: radial-gradient(circle, rgba(10, 6, 24, 0.82) 30%, rgba(10, 6, 24, 0.55) 62%, transparent 72%); border: 1.5px dashed rgba(255, 43, 214, 0.45); }
.meta-emote-opt { position: absolute; left: -29px; top: -29px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0; padding: 0; border: 2px solid rgba(198, 240, 0, 0.7); background: radial-gradient(circle at 35% 30%, #2d1a52, #120a26); color: #fff; cursor: pointer; transform: rotate(var(--a)) translate(68px) rotate(calc(-1 * var(--a))); animation: soc-wheel 0.18s var(--ease-out, ease-out); }
.meta-emote-opt:hover, .meta-emote-opt:focus-visible { border-color: var(--meta-lime); background: radial-gradient(circle at 35% 30%, #4b2a86, #1d1040); box-shadow: 0 0 16px rgba(198, 240, 0, 0.55); outline: none; }
.meta-emote-opt i { font-style: normal; line-height: 1; font-size: max(var(--text-floor), 1.35rem); }
.meta-emote-opt small { font-weight: 800; line-height: 1; color: var(--meta-lime); font-size: max(var(--text-floor), 0.6rem); }
@keyframes soc-wheel { from { opacity: 0; transform: rotate(var(--a)) translate(20px) rotate(calc(-1 * var(--a))) scale(0.6); } }

/* ===== the NPC dialogue box ===== */
.meta-talk { position: fixed; left: 50%; bottom: var(--talk-bottom, 16px); z-index: 250; width: min(900px, calc(100vw - 24px)); display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: end; opacity: 0; transform: translate(-50%, 26px); transition: opacity 0.18s ease, transform 0.22s var(--ease-out, ease-out); pointer-events: none; }
.meta-talk.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.meta-talk[hidden] { display: none; }
.meta-talk-portrait { position: relative; z-index: 2; width: 170px; height: 170px; margin-right: -26px; margin-bottom: 14px; border-radius: 26px; padding: 4px; background: conic-gradient(from 200deg, var(--meta-magenta), var(--meta-cyan), var(--meta-lime), var(--meta-magenta)); box-shadow: 0 0 26px rgba(255, 43, 214, 0.45), 0 14px 30px rgba(0, 0, 0, 0.55); transform: rotate(-3deg); }
.meta-talk-portrait::before { content: ""; position: absolute; inset: 4px; border-radius: 22px; background: radial-gradient(circle at 50% 38%, #4a2a86, #1f1238 58%, #0c0620); }
.meta-talk-portrait img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.meta-talk-portrait[data-mood="happy"] img { animation: soc-hop 0.45s var(--ease-out, ease-out); }
@keyframes soc-hop { 40% { transform: translateY(-8px) scale(1.04); } }
.meta-talk-main { position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; max-height: var(--talk-max, 70vh); padding: 0.75rem 0.9rem 0.75rem 2.3rem; border-radius: 24px; color: #fff8ee;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(40, 18, 74, 0.97), rgba(12, 7, 28, 0.98));
  border: 2px solid var(--soc-ink); box-shadow: 0 0 0 2px var(--meta-magenta), 0 0 34px rgba(255, 43, 214, 0.35), inset 0 0 0 1px rgba(0, 229, 255, 0.25), 0 24px 60px rgba(0, 0, 0, 0.6); }
.meta-talk-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.meta-talk-names { flex: 1; min-width: 0; display: grid; line-height: 1.1; }
.meta-talk-name { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.04em; color: var(--meta-lime); text-shadow: 0 3px 0 var(--soc-ink), 0 0 14px rgba(198, 240, 0, 0.45); font-size: max(var(--text-floor), 1.55rem); }
.meta-talk-title { color: #cdbfee; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: max(var(--text-floor), 0.8rem); }
.meta-talk-brain { flex: 0 0 auto; padding: 0.18rem 0.6rem; border-radius: 999px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; font-size: max(var(--text-floor), 0.66rem); }
.meta-talk-brain.is-claude { background: var(--meta-lime); color: #0b1000; box-shadow: 0 0 12px rgba(198, 240, 0, 0.5); }
.meta-talk-brain.is-offline { background: #3a2a6a; color: #e8dcff; border: 1px solid #7a62c8; }
.meta-talk-tool, .meta-talk-x { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 0 0.6rem; border-radius: 999px; border: 1.5px solid rgba(0, 229, 255, 0.55); background: rgba(5, 3, 14, 0.6); color: #fff; font-weight: 800; cursor: pointer; font-size: max(var(--text-floor), 0.82rem); }
.meta-talk-tool[aria-pressed="true"] { background: #1a3b4a; border-color: var(--meta-cyan); }
.meta-talk-x { padding: 0; border-color: rgba(255, 43, 214, 0.6); }
.meta-talk-hist { flex: 0 1 auto; min-height: 0; max-height: 4.4em; overflow-y: auto; display: grid; gap: 0.25rem; padding-right: 0.3rem; overscroll-behavior: contain; }
.meta-talk-hist[hidden] { display: none; }
.meta-talk-line { margin: 0; color: #cfc4ea; line-height: 1.35; font-size: max(var(--text-floor), 0.84rem); }
.meta-talk-line b { margin-right: 0.15rem; }
.meta-talk-line.is-you b { color: var(--meta-cyan); }
.meta-talk-line.is-npc b { color: var(--meta-lime); }
.meta-talk-text { flex: 0 1 auto; min-height: 3.2em; max-height: 7.6em; overflow-y: auto; margin: 0; padding: 0.55rem 0.8rem; border-radius: 14px; background: rgba(5, 3, 14, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; font-size: max(var(--text-floor), 1.08rem); }
.meta-talk-text.is-thinking::before { content: "· · ·"; color: var(--meta-lime); letter-spacing: 0.2em; animation: soc-dots 1s steps(3) infinite; }
@keyframes soc-dots { 50% { opacity: 0.35; } }
.meta-talk-more { display: inline-block; margin-left: 0.35rem; color: var(--meta-lime); font-size: max(var(--text-floor), 0.75rem); animation: soc-bob 0.8s ease-in-out infinite; }
.meta-talk-more[hidden] { display: none; }
@keyframes soc-bob { 50% { transform: translateY(3px); } }
.meta-talk-ask { display: flex; align-items: center; gap: 0.4rem; padding: 4px 4px 4px 2px; border-radius: 999px; background: rgba(5, 3, 14, 0.75); border: 1.5px solid rgba(198, 240, 0, 0.6); }
.meta-talk-ask:focus-within { border-color: var(--meta-lime); box-shadow: 0 0 16px rgba(198, 240, 0, 0.35); }
.meta-talk-input { flex: 1; min-width: 0; min-height: 42px; padding: 0 0.75rem; border: 0; outline: none; background: transparent; color: #fff; font-size: max(var(--text-floor), 1rem); }
.meta-talk-input::placeholder { color: #a99cc8; }
.meta-talk-count { color: var(--meta-gold); font-weight: 800; font-variant-numeric: tabular-nums; font-size: max(var(--text-floor), 0.75rem); }
.meta-talk-say { min-height: 42px; padding: 0 1.1rem; border-radius: 999px; border: 0; background: linear-gradient(180deg, #e6ff8a, var(--meta-lime)); color: #0b1000; font-family: var(--font-disp); letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 3px 0 #6f8a00; font-size: max(var(--text-floor), 1rem); }
.meta-talk-say:disabled { filter: grayscale(0.7) brightness(0.75); cursor: wait; }
.meta-talk-note { margin: 0; padding: 0.35rem 0.7rem; border-radius: 12px; line-height: 1.35; font-size: max(var(--text-floor), 0.82rem); }
.meta-talk-note[hidden] { display: none; }
.meta-talk-note[data-kind="warn"] { background: rgba(255, 179, 64, 0.14); border: 1px solid rgba(255, 179, 64, 0.6); color: #ffe7c2; }
.meta-talk-note[data-kind="info"] { background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.35); color: #d6f6ff; }
.meta-talk-mem { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 0.45rem; padding: 0.6rem 0.8rem; border-radius: 14px; background: rgba(0, 229, 255, 0.07); border: 1px solid rgba(0, 229, 255, 0.4); }
.meta-talk-mem[hidden] { display: none; }
.meta-talk-mem-h { margin: 0; color: var(--meta-cyan); font-weight: 900; font-size: max(var(--text-floor), 0.9rem); }
.meta-talk-notes { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.2rem; font-size: max(var(--text-floor), 0.88rem); }
.meta-talk-dim { margin: 0; color: #cdbfee; line-height: 1.4; font-size: max(var(--text-floor), 0.85rem); }
.meta-talk-small { font-size: max(var(--text-floor), 0.75rem); }
.meta-talk-ok { margin: 0; color: var(--meta-lime); font-weight: 800; font-size: max(var(--text-floor), 0.88rem); }
.meta-talk-err { margin: 0; color: #ffb3c1; font-weight: 700; font-size: max(var(--text-floor), 0.85rem); }
.meta-talk-forget, .meta-talk-cta { justify-self: start; min-height: 40px; padding: 0 0.9rem; border-radius: 999px; border: 0; background: linear-gradient(180deg, #ffc4ea, var(--meta-magenta)); color: #1a0016; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #7a0a68; font-size: max(var(--text-floor), 0.88rem); }
.meta-talk-cta { background: linear-gradient(180deg, #e6ff8a, var(--meta-lime)); color: #0b1000; box-shadow: 0 3px 0 #6f8a00; }
@media (max-width: 760px) { .meta-talk-tool-txt { display: none; } }
@media (max-width: 560px) {
  .meta-talk { left: 8px; right: 8px; width: auto; grid-template-columns: minmax(0, 1fr); transform: translateY(26px); }
  .meta-talk.open { transform: none; }
  .meta-talk-portrait { position: absolute; left: 6px; top: -50px; width: 88px; height: 88px; margin: 0; border-radius: 20px; padding: 3px; }
  .meta-talk-portrait::before { inset: 3px; border-radius: 17px; }
  .meta-talk-main { padding: 0.55rem 0.6rem 0.6rem; border-radius: 20px; gap: 0.4rem; }
  .meta-talk-head { padding-left: 92px; min-height: 44px; }
  .meta-talk-name { font-size: max(var(--text-floor), 1.25rem); }
  .meta-talk-brain { position: absolute; right: 0.6rem; top: -0.75rem; }
  .meta-talk-hist { max-height: 5.5em; }
  .meta-talk-text { max-height: 9em; padding: 0.45rem 0.6rem; font-size: max(var(--text-floor), 1rem); }
  .meta-talk-say { padding: 0 0.8rem; }
}

/* while you talk to an NPC the chat dock steps back (the box and its portrait sit over it) */
html.meta-talking .meta-chat { opacity: 0; pointer-events: none; }
html.meta-talking .meta-chat * { pointer-events: none !important; }

/* ===== the Menu's social panels ===== */
.meta-soc, .meta-me { display: grid; gap: 1rem; }
.meta-soc-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.meta-soc-h { margin: 0 0 0.5rem; font-family: var(--font-disp); font-weight: 400; color: var(--green-bright); letter-spacing: 0.02em; font-size: max(var(--text-floor), 1.2rem); }
.meta-soc-h small { font-family: var(--font-body); color: var(--text-dim); font-weight: 700; letter-spacing: 0; font-size: max(var(--text-floor), 0.8rem); }
.meta-soc-note, .meta-soc-friends { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0; color: var(--text-dim); font-size: max(var(--text-floor), 0.88rem); }
.meta-soc-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.meta-soc-player { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem 0.35rem 0.6rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.55); border: 1px solid rgba(198, 240, 0, 0.25); }
.meta-soc-sw, .meta-preset-sw { flex: 0 0 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--a) 0 50%, var(--b) 0 75%, var(--c) 0); border: 2px solid var(--soc-ink); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
.meta-soc-who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.meta-soc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(var(--text-floor), 0.95rem); }
.meta-soc-who small { color: var(--meta-lime); font-weight: 800; font-size: max(var(--text-floor), 0.75rem); }
.meta-soc-npcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.5rem; }
.meta-soc-npc { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem 0.45rem 0.45rem; border-radius: var(--r-3); background: linear-gradient(180deg, rgba(58, 30, 10, 0.55), rgba(16, 8, 22, 0.7)); border: 1px solid rgba(255, 179, 64, 0.45); }
.meta-soc-face { flex: 0 0 64px; height: 64px; border-radius: 16px; background: radial-gradient(circle at 50% 38%, #4a2a86, #1f1238 60%, #0c0620); border: 2px solid rgba(255, 179, 64, 0.6); overflow: hidden; display: grid; place-items: center; }
.meta-soc-face img { width: 100%; height: 100%; object-fit: contain; }
.meta-soc-npc-txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.meta-soc-npc-txt b { font-family: var(--font-disp); font-weight: 400; color: var(--meta-gold); letter-spacing: 0.03em; font-size: max(var(--text-floor), 1.02rem); }
.meta-soc-npc-txt small { color: var(--text-dim); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; font-size: max(var(--text-floor), 0.75rem); }
.meta-soc-npc-txt small.meta-soc-home { -webkit-line-clamp: 1; }
.meta-soc-home { color: #cdbfee !important; }
.meta-soc-npc .meta-soc-warp { flex: 0 0 auto; min-height: 40px; padding: 0 0.75rem; font-size: max(var(--text-floor), 0.88rem); }
.meta-soc-log { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0.5rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.6); border: 1px solid rgba(255, 43, 214, 0.3); }
.meta-soc-log .meta-chat-line { opacity: 1 !important; }
.meta-soc-form { display: flex; gap: 0.4rem; margin-top: 0.5rem; padding: 4px 4px 4px 2px; border-radius: 999px; background: rgba(5, 3, 14, 0.7); border: 1.5px solid rgba(198, 240, 0, 0.55); }

/* My Send ID & Send Power */
.meta-me-card { display: grid; gap: 0.6rem; padding: 0.8rem 0.9rem; border-radius: var(--r-3); background: linear-gradient(135deg, rgba(198, 240, 0, 0.12), rgba(255, 43, 214, 0.1) 60%, rgba(0, 229, 255, 0.1)); border: 1.5px solid rgba(198, 240, 0, 0.45); }
.meta-me-id { display: flex; align-items: center; gap: 0.7rem; }
.meta-me-id > div:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.meta-me-id small { color: var(--text-dim); font-weight: 700; font-size: max(var(--text-floor), 0.8rem); }
.meta-me-badge { flex: 0 0 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #4a2a86, #1f1238); border: 2px solid var(--meta-lime); font-size: max(var(--text-floor), 1.6rem); }
.meta-me-name { font-family: var(--font-disp); font-weight: 400; color: #fff; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(var(--text-floor), 1.35rem); }
.meta-me-power { display: grid; justify-items: end; line-height: 1.1; }
.meta-me-lv { font-family: var(--font-disp); color: var(--meta-lime); text-shadow: 0 0 12px rgba(198, 240, 0, 0.5); font-size: max(var(--text-floor), 1.35rem); }
.meta-me-power small { color: var(--meta-gold); font-weight: 800; font-size: max(var(--text-floor), 0.78rem); }
.meta-me-meter { display: grid; gap: 0.25rem; }
.meta-me-meter small { color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; font-size: max(var(--text-floor), 0.8rem); }
.meta-me-bar { position: relative; height: 12px; border-radius: 999px; background: var(--ink-4, #2a2a2a); overflow: hidden; }
.meta-me-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--green-dark, #6f8a00), var(--meta-lime)); box-shadow: 0 0 10px rgba(198, 240, 0, 0.6); }
.meta-me-grid { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.meta-me-stage { display: grid; gap: 0.6rem; }
.meta-turn { position: relative; border-radius: var(--r-3); overflow: hidden; background: radial-gradient(circle at 50% 78%, rgba(198, 240, 0, 0.22), transparent 55%), radial-gradient(circle at 50% 20%, rgba(255, 43, 214, 0.25), transparent 60%), linear-gradient(180deg, #2a1550, #05030e); border: 1.5px solid rgba(198, 240, 0, 0.45); }
.meta-turn-canvas { display: block; width: 100%; height: 340px; touch-action: none; cursor: grab; }
.meta-turn-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 0.05rem 0.55rem; border-radius: 999px; background: rgba(5, 3, 14, 0.7); color: var(--text-dim); font-weight: 700; pointer-events: none; font-size: max(var(--text-floor), 0.72rem); }
.meta-colors { display: grid; gap: 0.55rem; }
.meta-colors-row { display: flex; gap: 0.6rem; }
.meta-color { flex: 1; display: grid; justify-items: center; gap: 0.2rem; color: var(--text-dim); font-weight: 800; cursor: pointer; font-size: max(var(--text-floor), 0.78rem); }
.meta-color-in { width: 52px; height: 52px; padding: 0; border: 3px solid var(--soc-ink); border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45); }
.meta-color-in::-webkit-color-swatch-wrapper { padding: 0; }
.meta-color-in::-webkit-color-swatch { border: 0; border-radius: 50%; }
.meta-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.meta-preset { display: grid; justify-items: center; gap: 0.15rem; min-height: 64px; padding: 0.3rem 0.2rem; border-radius: var(--r-2); border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(5, 3, 14, 0.55); color: var(--text); cursor: pointer; }
.meta-preset:hover, .meta-preset:focus-visible { border-color: var(--meta-lime); }
.meta-preset small { font-weight: 700; line-height: 1.1; text-align: center; font-size: max(var(--text-floor), 0.66rem); }
.meta-colors-actions { align-items: center; gap: 0.5rem; }
.meta-colors-status { color: var(--meta-lime); font-weight: 700; font-size: max(var(--text-floor), 0.8rem); }
.meta-ward-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.4rem; }
.meta-ward-slot { display: grid; justify-items: center; align-content: start; gap: 0.2rem; padding: 0.45rem 0.3rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.6); border: 1.5px dashed rgba(255, 255, 255, 0.18); text-align: center; }
.meta-ward-slot.is-worn { border: 1.5px solid rgba(198, 240, 0, 0.6); background: rgba(198, 240, 0, 0.08); }
.meta-ward-slotname { color: var(--text-dim); font-weight: 800; font-size: max(var(--text-floor), 0.72rem); }
.meta-ward-ico { display: grid; place-items: center; width: 44px; height: 44px; font-size: max(var(--text-floor), 1.4rem); }
.meta-ward-ico img { width: 44px; height: 44px; object-fit: contain; }
.meta-ward-ico.is-empty { color: rgba(255, 255, 255, 0.3); }
.meta-ward-nm { font-weight: 700; line-height: 1.15; font-size: max(var(--text-floor), 0.72rem); }
.meta-ward-off { min-height: 32px; padding: 0 0.6rem; border-radius: 999px; border: 1.5px solid rgba(255, 43, 214, 0.6); background: rgba(5, 3, 14, 0.6); color: #fff; font-weight: 800; cursor: pointer; font-size: max(var(--text-floor), 0.72rem); }
.meta-ward-status { margin: 0; min-height: 1.3em; color: var(--meta-lime); font-weight: 700; font-size: max(var(--text-floor), 0.82rem); }
.meta-ward-group h4 { margin: 0.4rem 0 0.35rem; color: var(--text); font-size: max(var(--text-floor), 0.95rem); }
.meta-ward-group h4 small { color: var(--text-dim); }
.meta-ward-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.35rem; }
.meta-ward-item { --rar: #cfd6e0; display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.35rem 0.25rem 0.25rem; border-radius: var(--r-2); background: rgba(5, 3, 14, 0.6); border: 1.5px solid color-mix(in srgb, var(--rar) 45%, transparent); border-left: 5px solid var(--rar); }
.meta-ward-item.rar-uncommon { --rar: #7dff9a; }
.meta-ward-item.rar-rare { --rar: #4fc3ff; }
.meta-ward-item.rar-epic { --rar: #c77dff; }
.meta-ward-item.rar-legendary { --rar: #ffb340; }
.meta-ward-item.is-on { background: rgba(198, 240, 0, 0.1); }
.meta-ward-try { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0.1rem 0.2rem; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.meta-ward-try:hover, .meta-ward-try:focus-visible { background: rgba(255, 255, 255, 0.06); }
.meta-ward-txt { min-width: 0; display: grid; line-height: 1.2; }
.meta-ward-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(var(--text-floor), 0.88rem); }
.meta-ward-txt small { color: var(--rar); font-weight: 800; text-transform: capitalize; font-size: max(var(--text-floor), 0.7rem); }
.meta-ward-wearing { flex: 0 0 auto; padding: 0 0.4rem; color: var(--meta-lime); font-weight: 900; white-space: nowrap; font-size: max(var(--text-floor), 0.78rem); }
.meta-ward-links { margin-top: 0.6rem; }
@media (max-width: 760px) {
  .meta-me-grid { grid-template-columns: minmax(0, 1fr); }
  .meta-turn-canvas { height: 260px; }
  .meta-soc-npcs { grid-template-columns: minmax(0, 1fr); }
  .meta-ward-list { grid-template-columns: minmax(0, 1fr); }
  .meta-me-name { font-size: max(var(--text-floor), 1.1rem); }
}

/* ===== phones and touch: the dock and banner up top (the stick owns the bottom left), emotes by the buttons ===== */
@media (max-width: 760px), (pointer: coarse) {
  .meta-guest, .meta-notice { left: 8px; top: 8px; max-width: calc(100% - 136px); padding: 0.35rem 0.4rem 0.35rem 0.55rem; gap: 0.4rem; font-size: max(var(--text-floor), 0.78rem); }
  .meta-guest-icon { display: none; }
  .meta-guest-go { min-height: 40px; padding: 0 0.6rem; }
  .meta-notice { top: auto; left: 50%; bottom: 40%; }
  .meta-chat { top: 8px; bottom: auto; left: 8px; width: min(320px, calc(100% - 136px)); }
  .meta-layer:has(> .meta-guest:not([hidden])) .meta-chat { top: calc(8px + var(--guest-h, 88px)); }
  .meta-layer:has(> .meta-hint.on) .meta-chat:not(.is-typing) { transform: none; }
  .meta-chat-bar { order: -2; }
  .meta-chat-form, .meta-chat-why { order: -1; }
  .meta-chat-log { max-height: 6.8em; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .meta-chat-here { display: none; }
}
@media (pointer: coarse) {
  .meta-emotes { right: 28px; bottom: 196px; width: 52px; height: 52px; } /* above Jump and the pound button, clear of the centred prompt */
  .meta-emote-btn { width: 52px; height: 52px; }
  .meta-layer .meta-hint { top: auto; bottom: 200px; }
}

/* reduced motion */
html.motion-off .meta-emote-pop > span, html.motion-off .meta-emote-opt, html.motion-off .meta-talk-portrait img, html.motion-off .meta-talk-more, html.motion-off .meta-talk-text.is-thinking::before { animation: none; }
html.motion-off .meta-talk, html.motion-off .meta-chat, html.motion-off .meta-chat-line { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .meta-emote-pop > span, .meta-emote-opt, .meta-talk-portrait img, .meta-talk-more { animation: none; }
  .meta-talk, .meta-chat, .meta-chat-line { transition: none; }
}