body[data-ui-theme="default"] {
  --eg-panel-bg: rgba(16, 24, 38, 0.92);
  --eg-panel-border: #5a6780;
  --eg-surface-bg: #0f1929;
  --eg-surface-border: #4d5a71;
  --eg-button-bg: #2f1f12;
  --eg-button-border: #8a6832;
  --eg-button-text: #ffe8bb;
}

body[data-ui-theme="dark_steel"] {
  --eg-panel-bg: rgba(15, 19, 28, 0.94);
  --eg-panel-border: #7c879a;
  --eg-surface-bg: #151c27;
  --eg-surface-border: #5f6a7f;
  --eg-button-bg: #202a36;
  --eg-button-border: #8fa1bc;
  --eg-button-text: #e6f0ff;
}

body[data-ui-theme="royal_gold"] {
  --eg-panel-bg: rgba(30, 23, 12, 0.93);
  --eg-panel-border: #c5a45b;
  --eg-surface-bg: #2b1f0f;
  --eg-surface-border: #b99242;
  --eg-button-bg: #3e2a12;
  --eg-button-border: #dfb666;
  --eg-button-text: #ffeec7;
}

body[data-ui-theme="forest_rune"] {
  --eg-panel-bg: rgba(11, 28, 22, 0.93);
  --eg-panel-border: #4f9d83;
  --eg-surface-bg: #102b22;
  --eg-surface-border: #3f866f;
  --eg-button-bg: #15352b;
  --eg-button-border: #5eb291;
  --eg-button-text: #daf9e8;
}

body[data-ui-theme] main,
body[data-ui-theme] .auth-panel,
body[data-ui-theme] .modal-content,
body[data-ui-theme] .hub-main,
body[data-ui-theme] .bank-layout,
body[data-ui-theme] .shop-layout,
body[data-ui-theme] .workshop-layout,
body[data-ui-theme] .layout-chip,
body[data-ui-theme] .shop-chip,
body[data-ui-theme] .workshop-chip,
body[data-ui-theme] .shop-menu,
body[data-ui-theme] .workshop-menu,
body[data-ui-theme] .shop-faq,
body[data-ui-theme] .workshop-faq,
body[data-ui-theme] .hub-faq,
body[data-ui-theme] .contracts-card,
body[data-ui-theme] .workshop-card,
body[data-ui-theme] .event-card,
body[data-ui-theme] .payment-card,
body[data-ui-theme] .live-chat-widget {
  background: var(--eg-panel-bg) !important;
  border-color: var(--eg-panel-border) !important;
}

body[data-ui-theme] .resource-panel,
body[data-ui-theme] .wallet-panel,
body[data-ui-theme] .panel-section,
body[data-ui-theme] .card,
body[data-ui-theme] .item,
body[data-ui-theme] .shop-card,
body[data-ui-theme] .workshop-card,
body[data-ui-theme] .resource-card,
body[data-ui-theme] .wallet-log-entry,
body[data-ui-theme] .job-card,
body[data-ui-theme] .recipe-card,
body[data-ui-theme] .contract-card,
body[data-ui-theme] .tile,
body[data-ui-theme] .inv-card,
body[data-ui-theme] .meter-card,
body[data-ui-theme] .history-card,
body[data-ui-theme] .customization-card,
body[data-ui-theme] .main-quest-widget,
body[data-ui-theme] .main-quest-row,
body[data-ui-theme] .section-card,
body[data-ui-theme] .shop-modal-card,
body[data-ui-theme] .shop-faq article,
body[data-ui-theme] .category {
  background: var(--eg-surface-bg) !important;
  border-color: var(--eg-surface-border) !important;
}

/* Keep fullscreen overlays translucent so scene backgrounds stay visible. */
body[data-ui-theme] .shop-modal,
body[data-ui-theme] .workshop-modal,
body[data-ui-theme] .contracts-modal,
body[data-ui-theme] .event-modal {
  background: rgba(5, 8, 14, 0.64) !important;
}

body[data-ui-theme] .toggle-btn,
body[data-ui-theme] .panel-close,
body[data-ui-theme] .buy-btn,
body[data-ui-theme] .shop-close,
body[data-ui-theme] .category-toggle,
body[data-ui-theme] .payment-actions button,
body[data-ui-theme] .chip-actions button,
body[data-ui-theme] .actions button,
body[data-ui-theme] #logout-form button,
body[data-ui-theme] form button[type="submit"] {
  background: var(--eg-button-bg) !important;
  border-color: var(--eg-button-border) !important;
  color: var(--eg-button-text) !important;
}

body[data-ui-theme] input,
body[data-ui-theme] textarea,
body[data-ui-theme] select {
  background: rgba(8, 14, 22, 0.95);
  border-color: var(--eg-surface-border);
  color: #f5f2e8;
}

@keyframes egAuraRainbow {
  0% { box-shadow: 0 0 0 rgba(255, 107, 107, 0.65), 0 0 20px rgba(255, 107, 107, 0.35); }
  33% { box-shadow: 0 0 0 rgba(111, 247, 255, 0.65), 0 0 20px rgba(111, 247, 255, 0.35); }
  66% { box-shadow: 0 0 0 rgba(196, 127, 255, 0.65), 0 0 20px rgba(196, 127, 255, 0.35); }
  100% { box-shadow: 0 0 0 rgba(255, 107, 107, 0.65), 0 0 20px rgba(255, 107, 107, 0.35); }
}

@keyframes egAuraEmber {
  0% { box-shadow: 0 0 8px rgba(255, 112, 64, 0.35), 0 0 16px rgba(255, 145, 77, 0.25); }
  50% { box-shadow: 0 0 12px rgba(255, 80, 34, 0.55), 0 0 22px rgba(255, 190, 92, 0.35); }
  100% { box-shadow: 0 0 8px rgba(255, 112, 64, 0.35), 0 0 16px rgba(255, 145, 77, 0.25); }
}

@keyframes egAuraArcane {
  0% { box-shadow: 0 0 8px rgba(129, 132, 255, 0.32), 0 0 18px rgba(149, 84, 255, 0.24); }
  50% { box-shadow: 0 0 14px rgba(142, 105, 255, 0.55), 0 0 24px rgba(88, 207, 255, 0.33); }
  100% { box-shadow: 0 0 8px rgba(129, 132, 255, 0.32), 0 0 18px rgba(149, 84, 255, 0.24); }
}

.profile-card.profile-aura--rainbow { animation: egAuraRainbow 2.4s linear infinite; }
.profile-card.profile-aura--ember-flame { animation: egAuraEmber 1.6s ease-in-out infinite; }
.profile-card.profile-aura--arcane-glow { animation: egAuraArcane 2s ease-in-out infinite; }

.chat-name.chat-aura--rainbow {
  background: linear-gradient(90deg, #ff8f8f, #ffe07f, #8df4ff, #d2a4ff, #ff8f8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: egAuraRainbow 2.4s linear infinite;
}
.chat-name.chat-aura--ember-flame {
  color: #ffbe85 !important;
  text-shadow: 0 0 7px rgba(255, 120, 64, 0.65), 0 0 14px rgba(255, 185, 110, 0.35);
  animation: egAuraEmber 1.6s ease-in-out infinite;
}
.chat-name.chat-aura--arcane-glow {
  color: #ccb9ff !important;
  text-shadow: 0 0 7px rgba(149, 125, 255, 0.7), 0 0 14px rgba(86, 204, 255, 0.4);
  animation: egAuraArcane 2s ease-in-out infinite;
}

@keyframes egArrivalPhoenix {
  0% {
    box-shadow: inset 0 0 0 rgba(255, 131, 70, 0), 0 0 0 rgba(255, 131, 70, 0);
    filter: saturate(1) brightness(1);
  }
  40% {
    box-shadow: inset 0 0 38px rgba(255, 131, 70, 0.34), 0 0 22px rgba(255, 131, 70, 0.24);
    filter: saturate(1.18) brightness(1.06);
  }
  100% {
    box-shadow: inset 0 0 0 rgba(255, 131, 70, 0), 0 0 0 rgba(255, 131, 70, 0);
    filter: saturate(1) brightness(1);
  }
}
@keyframes egArrivalStarfall {
  0% {
    box-shadow: inset 0 0 0 rgba(111, 247, 255, 0), 0 0 0 rgba(111, 247, 255, 0);
    filter: saturate(1) brightness(1);
  }
  45% {
    box-shadow: inset 0 0 42px rgba(111, 247, 255, 0.29), 0 0 26px rgba(111, 247, 255, 0.24);
    filter: saturate(1.22) brightness(1.07);
  }
  100% {
    box-shadow: inset 0 0 0 rgba(111, 247, 255, 0), 0 0 0 rgba(111, 247, 255, 0);
    filter: saturate(1) brightness(1);
  }
}
@keyframes egArrivalRunesurge {
  0% {
    box-shadow: inset 0 0 0 rgba(196, 127, 255, 0), 0 0 0 rgba(196, 127, 255, 0);
    filter: saturate(1) brightness(1);
  }
  45% {
    box-shadow: inset 0 0 40px rgba(196, 127, 255, 0.29), 0 0 24px rgba(120, 214, 255, 0.24);
    filter: saturate(1.2) brightness(1.07);
  }
  100% {
    box-shadow: inset 0 0 0 rgba(196, 127, 255, 0), 0 0 0 rgba(196, 127, 255, 0);
    filter: saturate(1) brightness(1);
  }
}

.wallet-log-entry.chat-arrival--phoenix {
  outline: 1px solid rgba(255, 157, 98, 0.4);
  animation: egArrivalPhoenix 1.15s ease-out 1;
}
.wallet-log-entry.chat-arrival--starfall {
  outline: 1px solid rgba(140, 225, 255, 0.4);
  animation: egArrivalStarfall 1.15s ease-out 1;
}
.wallet-log-entry.chat-arrival--runesurge {
  outline: 1px solid rgba(186, 156, 255, 0.4);
  animation: egArrivalRunesurge 1.15s ease-out 1;
}

@keyframes egChatEnter {
  0% { opacity: 0; transform: translateY(8px) scale(0.99); filter: brightness(0.92); }
  60% { opacity: 1; transform: translateY(0) scale(1.01); filter: brightness(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes egChatEnterSelf {
  0% { box-shadow: inset 0 0 0 rgba(255, 220, 140, 0); }
  45% { box-shadow: inset 0 0 26px rgba(255, 220, 140, 0.22); }
  100% { box-shadow: inset 0 0 0 rgba(255, 220, 140, 0); }
}

.chat-message-text.chat-message-enter {
  animation: egChatEnter 0.45s ease-out 1;
}

.chat-message-text.chat-message-enter-self {
  animation: egChatEnter 0.45s ease-out 1, egChatEnterSelf 0.75s ease-out 1;
}

.chat-headline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  line-height: 1.2;
}

#live-chat-list .wallet-log-entry {
  display: grid;
  gap: 0.24rem;
}

#live-chat-list .wallet-log-entry p {
  margin: 0;
}

.chat-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
}

.chat-user {
  display: inline-block;
  letter-spacing: 0.02em;
  color: var(--chat-name-color, #ffe3a8);
}

@keyframes egChatColorShift {
  0% { background-position: 0% 50%; filter: brightness(1) saturate(1); }
  50% { background-position: 100% 50%; filter: brightness(1.12) saturate(1.2); }
  100% { background-position: 0% 50%; filter: brightness(1) saturate(1); }
}

.chat-user.chat-color--default { animation: none; }

.chat-user.chat-color--ember {
  background: linear-gradient(90deg, #f68f48, #ffd08a, #ff7846, #ffd08a, #f68f48);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 8px rgba(247, 150, 73, 0.35);
  animation: egChatColorShift 1.5s linear infinite;
}

.chat-user.chat-color--cobalt {
  background: linear-gradient(90deg, #6fa7ff, #b6ddff, #74c6ff, #b6ddff, #6fa7ff);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 8px rgba(120, 175, 255, 0.32);
  animation: egChatColorShift 1.65s linear infinite;
}

.chat-user.chat-color--emerald {
  background: linear-gradient(90deg, #77d48f, #b9f2c8, #57c886, #b9f2c8, #77d48f);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 8px rgba(120, 220, 156, 0.32);
  animation: egChatColorShift 1.7s linear infinite;
}

.chat-user.chat-color--violet {
  background: linear-gradient(90deg, #b88bff, #efd8ff, #a46fff, #d8b6ff, #b88bff);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 9px rgba(194, 155, 255, 0.45);
  animation: egChatColorShift 1.55s linear infinite;
}

.chat-user.chat-color--dawn {
  background: linear-gradient(90deg, #ffc779, #fff0c6, #ffb86e, #ffe7ae, #ffc779);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 8px rgba(255, 210, 135, 0.4);
  animation: egChatColorShift 1.6s linear infinite;
}

.chat-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  border: 1px solid rgba(188, 154, 88, 0.75);
  background: rgba(44, 28, 12, 0.72);
  color: #ffe6ac;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.chat-time {
  color: #c7d3ea;
  font-size: 0.76rem;
  opacity: 0.9;
}

.chat-time::before {
  content: "\2022";
  margin-right: 0.35rem;
  color: #8ea0bf;
}

.chat-user.chat-aura--rainbow,
.chat-name.chat-aura--rainbow {
  background: linear-gradient(90deg, #ff8f8f, #ffe07f, #8df4ff, #d2a4ff, #ff8f8f);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 5px rgba(255, 180, 120, 0.45), 0 0 10px rgba(140, 210, 255, 0.35);
  animation: egChatAuraRainbow 2.8s linear infinite;
}

.chat-user.chat-aura--ember-flame,
.chat-name.chat-aura--ember-flame {
  text-shadow: 0 0 7px rgba(255, 116, 58, 0.72), 0 0 15px rgba(255, 185, 110, 0.4);
  animation: egChatAuraEmber 1.7s ease-in-out infinite;
}

.chat-user.chat-aura--arcane-glow,
.chat-name.chat-aura--arcane-glow {
  text-shadow: 0 0 8px rgba(149, 125, 255, 0.76), 0 0 16px rgba(86, 204, 255, 0.45);
  animation: egChatAuraArcane 2.2s ease-in-out infinite;
}

@keyframes egChatAuraRainbow {
  0% {
    background-position: 0% 50%;
    text-shadow: 0 0 5px rgba(255, 170, 120, 0.45), 0 0 10px rgba(140, 210, 255, 0.35);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0 0 7px rgba(215, 140, 255, 0.5), 0 0 13px rgba(120, 230, 255, 0.4);
  }
  100% {
    background-position: 0% 50%;
    text-shadow: 0 0 5px rgba(255, 170, 120, 0.45), 0 0 10px rgba(140, 210, 255, 0.35);
  }
}

@keyframes egChatAuraEmber {
  0% {
    text-shadow: 0 0 5px rgba(255, 104, 42, 0.62), 0 0 11px rgba(255, 186, 120, 0.34);
    filter: saturate(1) brightness(1);
  }
  50% {
    text-shadow: 0 0 9px rgba(255, 88, 24, 0.8), 0 0 18px rgba(255, 204, 130, 0.5);
    filter: saturate(1.15) brightness(1.08);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 104, 42, 0.62), 0 0 11px rgba(255, 186, 120, 0.34);
    filter: saturate(1) brightness(1);
  }
}

@keyframes egChatAuraArcane {
  0% {
    text-shadow: 0 0 6px rgba(142, 124, 255, 0.62), 0 0 13px rgba(92, 198, 255, 0.33);
    filter: saturate(1) brightness(1);
  }
  50% {
    text-shadow: 0 0 10px rgba(160, 142, 255, 0.82), 0 0 20px rgba(108, 220, 255, 0.5);
    filter: saturate(1.18) brightness(1.08);
  }
  100% {
    text-shadow: 0 0 6px rgba(142, 124, 255, 0.62), 0 0 13px rgba(92, 198, 255, 0.33);
    filter: saturate(1) brightness(1);
  }
}