/** =============================================================== */
/** chatroom */

body:has(#app) {
  background: transparent;
}

#app .v-application {
  background: transparent;
}

/* chat room header */
#app .embed-header {
  background: black;
  display: none;
}

/* chatroom page content */
#app .embed-chat-container {
  background: transparent;
  background: rgba(255, 255, 255, 0.5);
}

/* chatroom body */
#app .embed-content {
  background: transparent;
  height: 100%;
}

/* chatroom message part */
#app .embed-messages {
  background: transparent;
  padding: 16px 16px;
  padding-bottom: 48px;
  row-gap: 0px;
}

#app .message-avatar {
  display: none;
}

/* Override the original message box dimensions */
#app .bot-message-content,
#app .bot-message,
#app .own-message-container > div,
#app .own-message,
#app .system-message,
#app .message-card {
  width: 100%;
  max-width: 100%;
  border-radius: 5px;
}

/* message box background */
#app .message-card,
#app .system-message {
  border: none;
  background: rgba(0, 0, 0, 0.4) !important;
  max-width: 100% !important;
  color: white !important;
}

/* bot username text */
#app .bot-message-content .username {
  color: black !important;
  font-size: 15px !important;
  line-height: 1.25;
}

/* user username text */
#app .message-card.own-message .username {
  color: #ea1520 !important;
  font-size: 15px !important;
  line-height: 1.25;
}

#app .message-content-other {
  color: #fff !important;
}

#app .message-content-admin {
  color: #fff !important;
}

/* Outer container for the bottom user input area (wrapper of the whole input section) */
#app .message-input-container {
  color: white;
  background: transparent;
  padding: 5px 5px 6px;
  border: none;
}

/* Input field container  */
#app .message-input-container .v-card-text {
  padding: 0px !important;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

/* input bottom line and  onfocus input bottom line */
#app .message-input-container .v-input .v-field__outline::before,
#app .message-input-container .v-input .v-field__outline::after {
  border: none;
  display: none;
}

/* input overlay */
#app .message-input-container .v-input .v-field__overlay {
  background: transparent;
}

/* input */
#app .message-input-container input {
  min-height: 40px;
  padding: 10px 0px 10px 15px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: normal;
}

/* btn send container */
#app .message-input-container .v-btn:has(.mdi-send) {
  margin-left: 0px !important;
  order: 1;
}

/* btn-send */
#app .message-input-container .v-btn[aria-label*="Send"],
#app .message-input-container .v-btn .mdi-send {
  color: #ea1520;
  font-size: 24px;
}

/* btn upload container */
#app .message-input-container .v-btn:has(.mdi-upload) {
  order: 2;
  margin-left: 0px !important;
  margin-right: 10px;
}

/* btn-upload */
#app .message-input-container .v-btn[aria-label*="Upload"],
#app .message-input-container .v-btn .mdi-upload {
  color: #ea1520;
  font-size: 24px;
}
/** =============================================================== */
/*SPIN*/
#app #wheel .wheel-text{
padding:16% 8% 0%;
}
#app .spinwheel-container {
  --spin-x-offset: 0%;
  --spin-y-offset: 2.8%;
}
/** =============================================================== */



/* ================= 点击烟花 ================= */
.firework {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  animation: firework-explode 900ms ease-out forwards;
}

@keyframes firework-explode {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--x), var(--y)) scale(0.3);
    opacity: 0;
  }
}

<script>
(function() {
  // 烟花核心函数
  function launchFirework(x, y) {
    const root = document.body; // 烟花放在整个页面
    const count = 28;           // 烟花颗数
    const colors = ["#ff3b3b","#ffd700","#4dd2ff","#ff69b4","#a0ff4d"];

    for (let i = 0; i < count; i++) {
      const spark = document.createElement("div");
      spark.className = "firework";

      const angle = Math.random() * 2 * Math.PI;
      const distance = 60 + Math.random() * 140;

      spark.style.left = x + "px";
      spark.style.top = y + "px";
      spark.style.background = colors[Math.floor(Math.random() * colors.length)];
      spark.style.setProperty("--x", Math.cos(angle) * distance + "px");
      spark.style.setProperty("--y", Math.sin(angle) * distance + "px");

      root.appendChild(spark);

      setTimeout(() => spark.remove(), 1000); // 1秒后自动消失
    }
  }

  // 监听页面点击，任何位置都会放烟花
  document.addEventListener("click", function(e) {
    launchFirework(e.clientX, e.clientY);
  });
})();
</script>