/* HUD, prompts, avatar labels and modal presentation. Owns UI styles; does not size the renderer. */
.social-controls, .social-invite, .roasting-indicator, .stand-control { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); border-radius: 16px; padding: 8px 12px; font-size: 12px; }
.social-controls { bottom: 205px; display: flex; gap: 8px; white-space: nowrap; }
.social-invite { top: 145px; width: min(94%, 450px); text-align: center; }
.social-controls button, .social-invite button { padding: 7px 9px; background: #334155; border-radius: 10px; }
.social-invite button { margin: 4px; }
.roasting-indicator { top: 78px; color: #fde68a; }
.stand-control { right: 16px; left: auto; top: 155px; transform: none; }
#btn-net-modal { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 600px) { .roasting-indicator { top: 180px; } .social-controls { gap: 3px; font-size: 10px; } header > div:last-child { flex-wrap: wrap; max-width: 100%; } }
.social-controls.hidden, .social-invite.hidden, .roasting-indicator.hidden, .stand-control.hidden { display: none; }
    .glass {
      background: rgba(15, 21, 36, 0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
    .glass-light {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.14);
    }
    .pro-badge {
      background: linear-gradient(135deg, #fde047 0%, #f59e0b 55%, #d97706 100%);
      color: #1c1305;
      font-weight: 800;
      font-size: 9px;
      letter-spacing: 0.06em;
      padding: 1px 5px;
      border-radius: 999px;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.45);
    }
    .pro-border {
      border: 1.5px solid rgba(251, 191, 36, 0.55);
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    #overlay-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 5;
      overflow: hidden;
    }
    .nametag {
      position: absolute;
      transform: translate(-50%, -100%);
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      color: #f8fafc;
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.14);
      white-space: nowrap;
      transition: opacity 0.2s ease;
    }
    .speech-bubble {
      position: absolute;
      transform: translate(-50%, -100%);
      max-width: 210px;
      padding: 7px 12px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
      color: #0f172a;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
      text-align: center;
      transition: opacity 0.25s ease, transform 0.15s ease;
    }
    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px 6px 0;
      border-style: solid;
      border-color: rgba(255, 255, 255, 0.95) transparent transparent;
    }
    @keyframes popIn {
      0% { transform: scale(0.88) translateY(8px); opacity: 0; }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    .animate-pop {
      animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }