/* ===== MU IDLE — tema dark/gold ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --bg:#0a0a12; --panel:#12121e; --panel2:#1a1a2a; --border:#2a2a40;
  --gold:#d4af37; --gold2:#f0d060; --red:#c0392b; --text:#d8d8e2; --muted:#7a7a90;
}
body {
  background: radial-gradient(ellipse at top, #14142299 0%, transparent 60%), var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea {
  font-family: inherit;
}

.hidden { display:none !important; }
.muted { color:var(--muted); }
.tiny-text { font-size:11px; margin-top:6px; }

/* Logo */
.logo { font-family:var(--font-serif); font-weight:700; font-size:42px; letter-spacing:3px; color:var(--text); }
.logo span {
  background:linear-gradient(180deg, var(--gold2), var(--gold) 60%, #8a6d1f);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.logo.small { font-size:22px; letter-spacing:2px; }

/* Topbar */
#topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #16162466, transparent);
}
.topbar-left { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.topstats { display:flex; gap:16px; align-items:center; }
.topstat { display:flex; gap:6px; align-items:center; font-weight:600; font-size:15px; }
.topstat .ico { font-size:17px; }

/* Layout */
#game {
  display:grid; grid-template-columns: 290px minmax(0, 1fr) 290px;
  grid-template-areas:
    "char battle maps"
    "char forge maps";
  gap:14px; padding:14px; max-width:1180px; margin:0 auto;
  align-items:start;
}
.panel {
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--border); border-radius:10px; padding:16px;
  contain: layout style;
}
#char-panel {
  grid-area: char;
  position:sticky; top:14px;
}
#battle-panel {
  grid-area: battle;
}
#forge-panel {
  grid-area: forge;
}
#right-panel {
  grid-area: maps;
  position:sticky; top:14px;
}
.panel-title {
  font-family:var(--font-serif); font-weight:700; font-size:16px; color:var(--gold);
  letter-spacing:0.5px; margin-bottom:10px; text-transform:uppercase;
}

/* Barras */
.bar {
  height:14px; background:#00000088; border:1px solid var(--border);
  border-radius:7px; overflow:hidden; margin:4px 0;
}
.bar .fill { height:100%; width:0%; transition:width .15s; }
.bar.xp .fill { background:linear-gradient(90deg, #7a5c15, var(--gold)); }
.bar.hp .fill { background:linear-gradient(90deg, #7d1f14, var(--red)); }

/* Personagem */
.level-row { display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; margin-bottom:2px; }
.points-row { display:flex; justify-content:space-between; align-items:center; margin:10px 0 5px; font-size:12.5px; }
.amount-toggle button {
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
  font-size:10.5px; padding:2px 6px; cursor:pointer; border-radius:4px;
}
.amount-toggle button.on { color:var(--gold); border-color:var(--gold); }
.stats { display:flex; flex-direction:column; gap:5px; }
.stat-row {
  display:grid; grid-template-columns:1fr auto 26px; gap:6px; align-items:center;
  font-size:12.5px; background:#00000033; padding:4px 8px; border-radius:6px;
}
.stat-row b { font-size:13px; }
.stat-row .btn.tiny { height:24px; padding:0; display:flex; align-items:center; justify-content:center; font-size:13px; }
.auto-row { display:block; font-size:11.5px; color:var(--muted); margin:8px 0; cursor:pointer; }
.derived {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; margin:8px 0 12px;
  text-align:center;
}
.derived div { background:#00000044; border:1px solid rgba(255,255,255,0.05); border-radius:6px; padding:6px 8px; min-width:0; }
.derived span { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.derived b { color:var(--gold2); font-size:13.5px; font-weight:700; }

/* Batalha */
#battle-panel {
  display:flex; flex-direction:column;
  padding:18px 16px;
  min-width:0; max-width:100%;
}
#forge-panel {
  display:flex; flex-direction:column;
  padding:18px 16px;
  min-width:0; max-width:100%;
}
.map-name { font-family:var(--font-serif); font-weight:700; color:var(--gold); font-size:18px; letter-spacing:0.5px; margin-bottom:10px; text-align:center; }
#monster-area {
  display:flex; flex-direction:column; align-items:center; position:relative;
  padding:20px 14px 14px;
  border-radius:12px;
  border:1px solid rgba(255, 215, 0, 0.18);
  background:radial-gradient(ellipse at 50% 30%, #161826 0%, #0c0d15 65%, #05060a 100%);
  overflow:hidden;
  box-shadow:inset 0 0 30px rgba(0, 0, 0, 0.7);
  transition:background 0.8s ease, border-color 0.6s ease;
}
/* Battle Arena Layout: Hero vs Monster */
.battle-arena {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
  padding: 8px 10px 4px;
  gap: 12px;
}

/* Hero Fighter (Left side) */
.hero-fighter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
  transition: transform 0.12s ease-out;
}
.hero-fighter.hero-attack {
  transform: translateX(18px) scale(1.06);
}

/* Companion Pet */
.hero-pet-companion {
  position: absolute;
  top: -24px;
  left: 5px;
  z-index: 4;
  animation: petFloat 2.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
}
.pet-companion-icon {
  font-size: 26px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}
.hero-pet-companion.pet-angel .pet-companion-icon {
  filter: drop-shadow(0 0 12px #ffd700) drop-shadow(0 0 20px #fff);
}
.hero-pet-companion.pet-satan .pet-companion-icon {
  filter: drop-shadow(0 0 12px #ff3300) drop-shadow(0 0 20px #ff0055);
}
.hero-pet-companion.pet-dinorant .pet-companion-icon {
  filter: drop-shadow(0 0 12px #00ff88) drop-shadow(0 0 20px #2ecc71);
}
.hero-pet-companion.pet-fenrir .pet-companion-icon {
  filter: drop-shadow(0 0 12px #00e5ff) drop-shadow(0 0 20px #9c27b0);
}
@keyframes petFloat {
  0% { transform: translateY(0) rotate(-4deg); }
  100% { transform: translateY(-8px) rotate(4deg); }
}

/* Wing behind hero */
.hero-wing-sprite {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 105px;
  height: 95px;
  object-fit: contain;
  z-index: 1;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  animation: wingBeat 2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes wingBeat {
  0% { transform: translateX(-50%) scale(0.96) rotate(-1deg); }
  100% { transform: translateX(-50%) scale(1.04) rotate(1deg); }
}

/* Hero Avatar Box */
.hero-avatar-box {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4), 0 8px 16px rgba(0,0,0,0.8);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.hero-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hero-weapon-sprite {
  position: absolute;
  bottom: -4px;
  right: -8px;
  font-size: 24px;
  filter: drop-shadow(0 2px 6px #000);
  transition: transform 0.15s ease-out;
}
.hero-fighter.hero-attack .hero-weapon-sprite {
  transform: rotate(-30deg) scale(1.3);
}

/* Hero Shadow */
.hero-shadow {
  width: 65px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 75%);
  border-radius: 50%;
  margin: -2px 0 4px;
}

/* Hero Name Tag */
.hero-name-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold2);
  text-shadow: 0 1px 4px #000;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Arena Versus / Clash */
.arena-versus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  user-select: none;
}
.vs-badge {
  font-size: 18px;
  filter: drop-shadow(0 0 10px #ffaa00);
  animation: vsPulse 1.2s infinite alternate;
}
@keyframes vsPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 16px #ff3300); }
}

/* Monster Fighter (Right side) */
.monster-fighter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.monster-fighter.monster-hit #monster-emoji {
  filter: brightness(1.6) drop-shadow(0 0 20px #ff3300) !important;
}
.monster-fighter #monster-emoji {
  font-size: 88px;
  line-height: 1.1;
  filter: drop-shadow(0 8px 18px #000);
  user-select: none;
  margin-bottom: 2px;
  will-change: transform;
}
.monster-fighter #monster-emoji.elite { filter: drop-shadow(0 0 22px #a020f0) drop-shadow(0 8px 18px #000); }
.monster-fighter #monster-emoji.shake { animation: shake .18s ease-out; }
@keyframes shake {
  0%{transform:translateX(0)} 30%{transform:translateX(-7px) rotate(-2deg)}
  60%{transform:translateX(6px) rotate(2deg)} 100%{transform:translateX(0)}
}
.monster-shadow {
  width: 70px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 75%);
  border-radius: 50%;
  margin: -4px 0 4px;
}
.monster-fighter #monster-name {
  font-size: 13.5px;
  font-weight: 700;
  margin: 2px 0 3px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.monster-fighter .bar {
  width: 100%;
  max-width: 160px;
  height: 10px;
  margin: 3px auto 2px;
}
.monster-fighter #hp-text {
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .hero-avatar-box { width: 68px; height: 68px; }
  .hero-wing-sprite { width: 85px; height: 75px; }
  .monster-fighter #monster-emoji { font-size: 72px; }
  .monster-fighter .bar { max-width: 130px; }
  .battle-arena { gap: 6px; padding: 4px 2px; }
}
.battle-stats {
  display:flex; gap:36px; margin-top:16px; font-size:14px; text-align:center;
  width:100%; justify-content:center; padding-top:12px; border-top:1px solid #2a2a4055;
}
.battle-stats span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.battle-stats b { color:var(--gold2); font-size:16px; }

.float-dmg {
  position:absolute; top:16%; font-weight:800; font-size:22px; color:#fff;
  text-shadow:0 1px 3px #000; pointer-events:none; animation:floatup .75s ease-out forwards;
  will-change:transform, opacity;
}
.float-dmg.crit { color:var(--gold2); font-size:28px; }
@keyframes floatup {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(-55px); }
}

/* Tabs Trang bị & Bản đồ */
.panel-tabs {
  display:flex; gap:6px; background:#00000044;
  padding:4px; border-radius:8px; margin-bottom:14px; border:1px solid var(--border);
}
.panel-tab-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 8px; background:transparent; border:1px solid transparent;
  border-radius:6px; color:var(--muted); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .15s ease;
}
.panel-tab-btn:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.panel-tab-btn.active {
  background:linear-gradient(180deg, #2a2010, #1f1807);
  border-color:var(--gold); color:var(--gold2);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.tab-content { animation:fadeIn .15s ease-in-out; }
@keyframes fadeIn { from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:translateY(0)} }

/* Arma / mapas */
#harmony-dmg.on { color:#2ecc71; font-weight:700; }
#map-list {
  display:flex; flex-direction:column; gap:5px;
}
.map-item {
  display:flex; justify-content:space-between; padding:8px 12px; border-radius:6px;
  background:#00000033; border:1px solid transparent; cursor:pointer; font-size:13px;
  transition:all .12s;
}
.map-item:hover { border-color:var(--border); background:#ffffff08; }
.map-item.active { border-color:var(--gold); color:var(--gold2); background:rgba(212,175,55,0.08); font-weight:600; }
.map-item.locked { opacity:.45; cursor:default; }

/* Botões */
.btn {
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  color:var(--text); border:1px solid var(--border); border-radius:6px;
  padding:9px 14px; font-size:13px; cursor:pointer; font-weight:600;
}
.btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold2); }
.btn:disabled { opacity:.42 !important; cursor:not-allowed !important; box-shadow:none !important; }
.btn.gold {
  background:linear-gradient(180deg, #8a6d1f, #6b530f);
  border-color:var(--gold); color:#fff;
}
.btn.gold:hover:not(:disabled) { color:#fff; filter:brightness(1.15); }
.btn.gold:disabled {
  background:linear-gradient(180deg, var(--panel2), var(--panel)) !important;
  border-color:var(--border) !important;
  color:var(--muted) !important;
}
.btn.small { padding:7px 10px; font-size:12px; width:100%; }
.weapon-actions .btn { flex:1; }
.btn.tiny { padding:2px 9px; font-size:12px; }
.btn.reset { width:100%; margin-top:8px; background:linear-gradient(180deg,#3a1010,#280a0a); border-color:#5a2020; }
.btn.reset.ready {
  background:linear-gradient(180deg, #7d1f14, #5a140c); border-color:var(--red); color:#fff;
  animation:pulse 1.2s infinite;
}
@keyframes pulse { 50% { box-shadow:0 0 18px #c0392b88; } }

/* Overlays — o próprio overlay rola quando a caixa não cabe (celular: loja com 5+ SKUs).
   align-items:center cortava o topo/rodapé sem scroll possível; margin:auto centra quando
   sobra espaço e encosta no topo (rolável) quando falta. */
.overlay {
  position:fixed; inset:0; background:#000000cc; z-index:50;
  display:flex; align-items:flex-start; justify-content:center; padding:20px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.overlay-box {
  background:var(--panel2); border:1px solid var(--gold); border-radius:14px;
  padding:36px; text-align:center; max-width:720px; margin:auto;
}
.overlay-sub { color:var(--muted); margin:8px 0 24px; }
.overlay-box h2 { font-family:var(--font-serif); font-weight:700; color:var(--gold); margin-bottom:14px; letter-spacing:0.5px; }
#offline-report p { margin:6px 0; font-size:15px; }
#offline-close { margin-top:18px; }
#class-overlay .overlay-box {
  max-width: 980px;
  width: 96%;
  padding: 36px 24px 38px;
  box-sizing: border-box;
}
.class-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: stretch;
}
.class-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 10px;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}
.class-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2);
}
.class-icon { font-size:44px; margin-bottom:10px; }
.class-card h3 { color:var(--gold2); font-size:15px; font-weight:700; margin-bottom:6px; }
.class-card p { font-size:11.5px; line-height:1.4; color:var(--muted); }

@media (max-width: 860px) {
  #class-overlay .overlay-box { max-width: 580px; padding: 24px 16px; }
  .class-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .class-card:last-child { grid-column: span 2; max-width: 280px; margin: 0 auto; width: 100%; }
}
@media (max-width: 480px) {
  .class-cards { grid-template-columns: 1fr; }
  .class-card:last-child { grid-column: span 1; max-width: 100%; }
}

/* Toast */
#toast {
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel2); border:1px solid var(--gold); color:var(--text);
  padding:10px 22px; border-radius:8px; font-size:14px; opacity:0;
  transition:all .25s; z-index:60; pointer-events:none;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.bad { border-color:var(--red); }

#dev-panel {
  position:fixed; bottom:10px; right:10px; background:var(--panel2);
  border:1px dashed var(--red); border-radius:8px; padding:8px; display:flex; gap:6px; align-items:center;
  font-size:11px; color:var(--red); z-index:40;
}

footer { text-align:center; color:var(--muted); font-size:11px; padding:14px; }

/* Auth */
.auth-form { max-width:320px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.auth-form input {
  background:#00000055; border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:11px 14px; font-size:14px; outline:none;
}
.auth-form input:focus { border-color:var(--gold); }
.auth-buttons { display:flex; gap:10px; }
.auth-buttons .btn { flex:1; }
.auth-error { color:#e74c3c; font-size:13px; }
.gift-line {
  color:var(--gold2); font-size:13px; margin:-14px 0 18px;
  background:#d4af3712; border:1px dashed var(--gold); border-radius:8px;
  padding:8px 12px; display:inline-block;
}

/* Idiomas */
.lang-row { display:flex; gap:6px; justify-content:center; margin-bottom:14px; }
.lang-row button {
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
  font-size:11px; font-weight:700; padding:4px 9px; cursor:pointer; border-radius:5px;
}
.lang-row button.on { color:var(--gold2); border-color:var(--gold); }
.lang-row.compact { margin:0; }
.lang-row.compact button { padding:3px 6px; font-size:10px; }

.lang-dropdown-wrapper {
  display: inline-flex;
  align-items: center;
}
.lang-select {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  color: var(--gold2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all .2s ease;
  height: 31px;
}
.lang-select:hover, .lang-select:focus {
  border-color: var(--gold);
  color: #fff;
}
.lang-select option {
  background: #12121c;
  color: #fff;
  font-weight: 600;
  padding: 4px;
}

/* Topbar extra */
#topbar { gap:10px; flex-wrap:wrap; }
.topbuttons { display:flex; gap:8px; align-items:center; }
.btn.small-top { padding:6px 12px; font-size:12px; }
#btn-reload { transition: transform .25s ease, border-color .15s; }
#btn-reload:hover { transform: rotate(45deg); }
#btn-reload:active { transform: rotate(180deg); }
.vip-badge {
  background:linear-gradient(180deg, #8a6d1f, #6b530f); border:1px solid var(--gold);
  color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px;
}
#topbar-nick { font-size:13px; }

/* Loja */
.overlay-box.wide { max-width:860px; width:100%; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin:10px 0 14px; }
.shop-item {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.shop-item:hover { border-color:var(--gold); }
.shop-item.recommended { border-color:var(--gold); box-shadow:0 0 14px #d4af3755; position:relative; }
.rec-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--gold2), var(--gold)); color:#1a1305;
  font-size:10px; font-weight:800; letter-spacing:.5px; padding:2px 8px; border-radius:8px; white-space:nowrap; }
.shop-icon {
  font-size: 32px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.shop-jicon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.shop-item h3 { color:var(--gold2); font-size:14px; }
.shop-item p { font-size:12px; color:var(--muted); min-height:32px; }
.shop-price { color:var(--gold2); font-weight:800; font-size:16px; }
.shop-pay-row { display:flex; gap:6px; width:100%; }
.shop-pay-row .btn { flex:1; }
#shop-close, #ranking-close { margin-top:6px; }

/* Pix */
.pix-qr { width:220px; height:220px; border-radius:10px; border:2px solid var(--gold); background:#fff; margin:8px auto; display:block; }
.pix-copy-row { display:flex; gap:8px; max-width:380px; margin:8px auto; }
.pix-copy-row input {
  flex:1; background:#00000055; border:1px solid var(--border); border-radius:6px;
  color:var(--muted); padding:8px 10px; font-size:11px; outline:none;
}
.pix-waiting { color:var(--gold2); margin:10px 0; animation:pulse-txt 1.4s infinite; }
@keyframes pulse-txt { 50% { opacity:.45; } }

/* Ícones do MU (joias, avatares, asas) */
.jicon { width:20px; height:20px; object-fit:contain; }
.jicon-s { width:15px; height:15px; object-fit:contain; vertical-align:-3px; margin-right:3px; }
.class-avatar { width:84px; height:84px; border-radius:50%; margin-bottom:10px; box-shadow:0 6px 18px #000a; border: 2px solid rgba(212, 175, 55, 0.4); object-fit: cover; transition: border-color .2s; }
.char-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; width:100%; min-width:0; }
.char-head .panel-title { margin-bottom:0; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.char-avatar { width:36px; height:36px; border-radius:50%; border:1px solid var(--gold); box-shadow:0 3px 10px #000a; flex-shrink:0; object-fit:cover; }
#char-change-class { margin-left:auto; font-size:11px; padding:4px 8px; font-weight:600; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:3px; line-height:1.2; }
#wing-img { display:block; max-width:100%; max-height:120px; margin:2px auto 8px; object-fit:contain; filter:drop-shadow(0 8px 16px #000); }

/* Asas / Chaos Machine */
#wing-box { margin-bottom:18px; }
#wing-name { font-size:16px; font-weight:700; color:var(--gold2); }
#wing-dmg { font-size:12px; margin:2px 0 10px; min-height:14px; }
#chaos-info { margin-top:6px; }

/* Doação */
.gift-amounts { display:flex; gap:10px; }
.gift-amounts label {
  flex:1; display:flex; align-items:center; gap:6px;
  background:#00000055; border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-size:16px;
}
.gift-amounts input { width:100%; background:none; border:none; color:var(--text); font-size:14px; outline:none; }

/* Conquistas */
#ach-list { max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin:8px 0; text-align:left; }
.ach-item {
  display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center;
  background:#00000033; border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; font-size:13px; opacity:.55;
}
.ach-item.done { opacity:1; border-color:var(--gold); }
.ach-item.done .ach-name { color:var(--gold2); }
.ach-icon { font-size:20px; text-align:center; }
.ach-reward { color:var(--muted); font-size:12px; white-space:nowrap; }
#ach-close { margin-top:6px; }

/* Ranking */
#ranking-table { max-height:420px; overflow-y:auto; margin:8px 0; }
#ranking-table table { width:100%; border-collapse:collapse; font-size:14px; }
#ranking-table th {
  text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; padding:6px 10px; border-bottom:1px solid var(--border);
}
#ranking-table td { padding:8px 10px; border-bottom:1px solid #ffffff08; }
#ranking-table tr.me td { background:#d4af3715; color:var(--gold2); }
#ranking-table td b { color:var(--gold2); }

/* Mobile */
@media (max-width: 900px) {
  #game {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px;
  }
  #char-panel {
    order: 1;
    position: static !important;
    top: auto !important;
    width: 100%;
  }
  #battle-panel {
    order: 2;
    position: static !important;
    top: auto !important;
    min-height: auto;
    width: 100%;
  }
  #right-panel {
    order: 3;
    position: static !important;
    top: auto !important;
    width: 100%;
  }
  #forge-panel {
    order: 4;
    position: static !important;
    top: auto !important;
    width: 100%;
  }
  .class-cards { flex-direction: column; }
}

/* ===== Mobile: a topbar não pode empurrar a página pro lado =====
   `.topbuttons` era flex SEM wrap: com 9 itens ela media 518px numa tela de 390 e criava
   scroll horizontal (a página inteira andava pro lado, o conteúdo saía da tela). */
.topbuttons { flex-wrap:wrap; justify-content:flex-end; }
/* Tối ưu cảm ứng & mượt mà cho Mobile */
button, .btn, .mob-card, .class-card, .event-card, .box-card, .pvp-opp-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 600px) {
  input, select, textarea {
    font-size: 16px !important; /* Chống iOS Safari tự động zoom trang khi chạm vào ô nhập */
  }
}

@media (max-width: 420px) {
  .wheel-wrapper {
    width: 280px;
    height: 280px;
  }
  #wheel-canvas {
    width: 280px !important;
    height: 280px !important;
  }
}

@media (max-width: 560px) {
  .overlay { padding:12px; }
  .overlay-box { padding:24px 16px; }
  #topbar { padding:8px 10px; justify-content:center; }
  .topbar-left { justify-content:center; gap:10px; }
  .topbuttons { justify-content:center; gap:6px; row-gap:6px; }
  .topstats { gap:12px; justify-content:center; flex-wrap:wrap; }
  .topstat { font-size:14px; }
  .btn.small-top { padding:6px 9px; }
  #topbar-nick { width:100%; text-align:center; font-size:12px; }
  .lang-row.compact button { padding:4px 7px; font-size:11px; }
  .logo.small { font-size:22px; letter-spacing:2px; }
  .vip-bar { padding:8px 34px 8px 10px; font-size:12px; gap:8px; }
  .vip-bar-x { right:8px; }
}

/* ===== Recompensa diária (retenção) ===== */
.daily-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin:14px 0; }
@media (max-width:640px) { .daily-grid { grid-template-columns:repeat(4, 1fr); } }
.daily-day {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:4px;
  position:relative; transition:border-color .2s;
}
.daily-day .dnum { font-size:11px; color:var(--muted); font-weight:700; }
.daily-day .dprize { font-size:12px; line-height:1.35; }
.daily-day .dprize img { width:16px; height:16px; vertical-align:-3px; }
.daily-day.done { opacity:.45; border-color:var(--border); }
.daily-day.done::after {
  content:'✓'; position:absolute; top:4px; right:6px; color:var(--gold2); font-weight:700; font-size:13px;
}
.daily-day.today { border-color:var(--gold); box-shadow:0 0 12px #d4af3733; }
.daily-day.big { background:linear-gradient(180deg, #2a2210, var(--panel)); border-color:var(--gold); }
.daily-day.big .dprize { color:var(--gold2); font-weight:700; }
.daily-email {
  background:var(--panel); border:1px dashed var(--gold); border-radius:10px;
  padding:12px; margin:6px 0 12px; font-size:13px;
}
.daily-email p { margin-bottom:8px; }
.notif-dot {
  position:absolute; top:2px; right:2px; width:9px; height:9px; border-radius:50%;
  background:var(--red); border:1px solid #0a0a12;
}
#btn-daily { position:relative; }

/* ===== Aviso de VIP vencendo ===== */
.vip-bar {
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:6px 38px 6px 16px; position:relative; font-size:12.5px; font-weight:500;
  background:linear-gradient(90deg, #181308 0%, #291e0a 50%, #181308 100%); color:#f5eedb;
  border-bottom:1px solid rgba(212, 175, 55, 0.25);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.vip-bar.expired {
  background:linear-gradient(90deg, #240c0a 0%, #38120e 50%, #240c0a 100%);
  border-bottom-color:rgba(192, 57, 43, 0.4);
}
.vip-bar .btn {
  width:auto; flex:none;
  padding:3px 11px; font-size:11.5px; border-radius:4px;
}
.vip-bar-x {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#ffffff77; font-size:15px; cursor:pointer;
  padding:3px 6px; transition:color .15s, transform .15s;
}
.vip-bar-x:hover { color:#fff; transform:translateY(-50%) scale(1.15); }
.vip-badge.warn { background:linear-gradient(180deg, #a33226, #6d2018); border-color:#c0392b; }

/* Banner "Baixar na Google Play" (Android no navegador) */
#play-banner {
  position:fixed; top:0; left:0; right:0; z-index:70; height:42px;
  display:flex; align-items:center; gap:8px; padding:0 8px 0 12px;
  background:linear-gradient(90deg,#1a1a2a,#12121e); border-bottom:1px solid var(--gold);
  font-size:13px; box-shadow:0 2px 8px #000a;
}
#play-banner a { flex:1; display:flex; align-items:center; gap:8px; color:var(--gold2); text-decoration:none; font-weight:600; min-height:42px; }
#play-banner .pb-ico { display:inline-flex; width:22px; height:22px; border-radius:6px; background:var(--gold); color:#0a0a12; align-items:center; justify-content:center; font-size:11px; }
#play-banner button { background:none; border:0; color:var(--muted); font-size:16px; padding:8px 10px; cursor:pointer; }
body.has-playbanner { padding-top:42px; }

/* ===== Mural ao vivo (17/08) — a "mensagem global" do MU, só leitura ===== */
.feed-bar {
  display:flex; align-items:center; gap:10px; min-width:0; overflow:hidden;
  padding:0 12px 0 14px; height:36px; font-size:13px;
  background:linear-gradient(90deg, #14142280, #0e0e18); border-bottom:1px solid var(--border);
  box-shadow:inset 3px 0 0 var(--gold);
}
.feed-live { display:inline-flex; align-items:center; gap:6px; flex:none; font-size:10px; font-weight:800; letter-spacing:1px; color:#7ee08a; }
.feed-live i { width:8px; height:8px; border-radius:50%; background:#3ddc5c; box-shadow:0 0 0 0 #3ddc5c99; animation:feedpulse 1.6s infinite; }
@keyframes feedpulse { 0%{box-shadow:0 0 0 0 #3ddc5c99} 70%{box-shadow:0 0 0 7px #3ddc5c00} 100%{box-shadow:0 0 0 0 #3ddc5c00} }
.feed-msg {
  flex:1; min-width:0; display:flex; align-items:center; text-align:left;
  background:none; border:0; color:var(--text); font:inherit; cursor:pointer; padding:0; height:100%;
}
.feed-msg-text { display:block; min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .25s, transform .25s; }
.feed-msg-text.swap { opacity:0; transform:translateY(4px); }
.feed-msg-text.flash { animation:feedflash 1.6s ease-out; }
@keyframes feedflash { 0%{ text-shadow:0 0 12px var(--gold2); color:var(--gold2);} 100%{ text-shadow:none; color:var(--text);} }
.feed-msg-text b { color:var(--gold2); font-weight:700; }
.feed-msg-text.me b { color:#7ee08a; }
.feed-msg:hover .feed-msg-text { color:#fff; }
.feed-discord {
  flex:none; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:#5865F2; color:#fff; font-size:12px; font-weight:700; padding:5px 10px; border-radius:20px;
  border:1px solid #7983f5; cursor:pointer; position:relative; z-index:5; pointer-events:auto;
}
.feed-discord:hover { filter:brightness(1.12); }
.feed-box { text-align:left; }
.feed-box h2, .feed-box .overlay-sub { text-align:center; }
.feed-list { list-style:none; max-height:56vh; overflow:auto; border:1px solid var(--border); border-radius:10px; background:#00000044; }
.feed-list li { display:flex; gap:10px; align-items:baseline; padding:9px 12px; border-bottom:1px solid #ffffff0a; font-size:13px; }
.feed-list li:last-child { border-bottom:0; }
.feed-list li b { color:var(--gold2); }
.feed-list li.me { background:#3ddc5c0f; }
.feed-list li.me b { color:#7ee08a; }
.feed-list li.buy { background:#d4af370f; }
.feed-list li .ft { flex:1; min-width:0; overflow-wrap:anywhere; }
.feed-list li .fa { flex:none; color:var(--muted); font-size:11px; }
.feed-list .feed-empty { display:block; padding:22px; text-align:center; color:var(--muted); }
.feed-actions { margin-top:16px; }
.feed-actions .btn { display:flex; align-items:center; justify-content:center; text-decoration:none; text-align:center; }
.feed-discord-cta { background:#5865F2 !important; border-color:#7983f5 !important; color:#fff !important; flex:2 !important; }
.feed-discord-cta:hover { filter:brightness(1.12); }
@media (max-width: 560px) {
  .feed-bar { padding:0 8px 0 10px; gap:8px; font-size:12px; height:34px; }
  .feed-live span { display:none; }          /* só o pulso verde: o texto ia comer o espaço da mensagem */
  .feed-discord .fd-txt { display:none; }    /* só o ícone */
  .feed-discord { padding:4px 8px; }
  .feed-actions { flex-direction:column; }
}

/* ---- Passe de Temporada (19/08) ---- */
.pass-box { text-align:left; }
.pass-box h2, .pass-box .overlay-sub { text-align:center; }
.pass-progress { margin:10px 0 4px; }
.pass-progress-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; font-size:14px; }
.pass-progress-head b { color:var(--gold2); }
.pass-progress-head .muted { font-size:12px; }
.bar.pass { height:14px; }
.bar.pass .fill { background:linear-gradient(90deg, #7a5c15, var(--gold)); }
.pass-buy {
  border:1px solid var(--gold); border-radius:10px; padding:10px 12px; margin:10px 0;
  background:#d4af3712; display:flex; flex-direction:column; gap:8px;
}
.pass-buy .shop-pay-row .btn { flex:none; min-width:110px; width:auto; }
.pass-head-row {
  display:grid; grid-template-columns:36px 1fr 1fr; gap:6px; padding:0 8px; margin-top:8px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.pass-tiers {
  display:flex; flex-direction:column; gap:4px; margin:6px 0 4px;
  max-height:44vh; overflow-y:auto; border:1px solid var(--border); border-radius:10px;
  background:#00000044; padding:6px;
}
.pass-row {
  display:grid; grid-template-columns:36px 1fr 1fr; gap:6px; align-items:center;
  padding:6px 8px; border:1px solid transparent; border-radius:8px; font-size:13px;
}
.pass-row.reached { background:#ffffff07; border-color:#ffffff12; }
.pass-tnum { color:var(--muted); font-weight:700; font-size:12px; }
.pass-cell { display:flex; align-items:center; gap:4px; flex-wrap:wrap; min-height:22px; }
.pass-cell img { width:18px; height:18px; vertical-align:middle; }
.pass-cell.claimed { opacity:.4; }
.pass-cell.locked { filter:grayscale(1); opacity:.35; }
.pass-cell.claimable { color:var(--gold2); text-shadow:0 0 8px #d4af3766; }
.pass-owned { color:var(--gold2); }
@media (max-width: 560px) {
  .pass-tiers { max-height:38vh; }
  .pass-row, .pass-head-row { grid-template-columns:28px 1fr 1fr; }
  .pass-row { font-size:12px; }
}

/* rank-bar reusa o esqueleto da vip-bar; tone dark royal tinh tế, sang trọng */
.rank-bar {
  background:linear-gradient(90deg, #0e0c17 0%, #1a1428 50%, #0e0c17 100%);
  border-bottom:1px solid rgba(212, 175, 55, 0.22);
  color:#dfd7f0;
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.rank-bar #rank-bar-text { color:#ede6fa; font-weight:500; }
.rank-bar .btn {
  background:linear-gradient(180deg, #8a6d1f, #634d10);
  border:1px solid var(--gold); color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.offer-chip { animation:offerpulse 1.6s infinite; border-color:var(--gold) !important; }
@keyframes offerpulse { 0%{box-shadow:0 0 0 0 #d4af3799} 70%{box-shadow:0 0 0 8px #d4af3700} 100%{box-shadow:0 0 0 0 #d4af3700} }
.offer-box { border-color:var(--gold); box-shadow:0 0 26px #d4af3744; }
.offer-item { border-color:var(--gold); box-shadow:0 0 14px #d4af3755; max-width:260px; margin:0 auto; }
.offer-bonus {
  color:var(--gold2); font-weight:800; font-size:14px; margin:6px 0;
  text-shadow:0 0 10px #d4af3766; animation:pulse-txt 1.8s infinite;
}
.offer-timer { color:#e8b4a0; font-size:13px; font-weight:600; margin:10px 0 4px; }

/* =========================================================
   🌟 EXPANSION MODULE STYLES: PETS, ARMOR, PVP, WHEEL, EVENTS
   ========================================================= */

.badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  line-height: 1.2;
  vertical-align: middle;
}

.battle-forge-container {
  width: 100%;
}
.forge-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 640px) {
  .forge-grid-two { grid-template-columns: 1fr; }
}
.forge-subcard {
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.forge-subcard-title {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.forge-item-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.weapon-header-row,
.wing-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
}
.weapon-icon-box {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 6px;
  flex-shrink: 0;
}
#wing-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px #000);
  flex-shrink: 0;
}
.weapon-header-text,
.wing-header-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
#weapon-name,
#wing-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold2);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
#weapon-dmg,
#wing-dmg {
  font-size: 11.5px;
  color: #a0a0b8;
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
}

/* Nút nâng cấp ngọc Bless / Soul */
.weapon-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}
.weapon-actions .btn {
  flex: 1;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background: #181524;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d8d8e6;
  transition: all 0.15s ease;
  min-width: 0;
  white-space: nowrap;
}
.weapon-actions .btn:hover:not(:disabled) {
  border-color: var(--gold);
  background: #231e36;
  color: #fff;
}
.weapon-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.weapon-actions .jicon-s {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

/* Nút nâng cấp chính: Đồng bộ chiều cao và tỷ lệ */
.forge-main-btn {
  min-height: 40px !important;
  height: auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.25;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
  min-width: 0;
}
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
}
.forge-main-btn:disabled {
  opacity: 0.55 !important;
  background: #201a14 !important;
  border-color: #3d3224 !important;
  color: #887868 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
.forge-info-text {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 4px;
}

/* Harmony Strip (Tinh Luyện Vũ Khí Harmony - Nút xuống dưới, text thoáng rộng) */
.harmony-strip {
  margin-top: 10px;
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.harmony-header {
  width: 100%;
}
.harmony-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#harmony-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold2);
}
#harmony-dmg {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
#harmony-dmg.on {
  color: #2ecc71;
  font-weight: 700;
}
.harmony-action-wrap {
  width: 100%;
}
#harmony-btn {
  width: 100% !important;
  min-height: 38px !important;
  font-size: 13.5px;
}
#harmony-info {
  font-size: 11.5px;
  color: #8a8a9e;
  line-height: 1.4;
  text-align: center;
}

/* Hàng dưới: Cảnh báo thiếu ngọc & Nút mua ngọc */
.sink-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  margin-top: 2px;
}
.sink-cta-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gold2);
  font-weight: 600;
}
.sink-cta .btn {
  width: auto;
  height: 28px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-bottom: 0;
}

/* Thú Cưng Hộ Mệnh (Dưới Bộ Giáp) */
.pets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .pets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pet-card {
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .15s, border-color .15s;
}
.pet-card:hover { border-color: rgba(212, 175, 55, 0.4); }
.pet-card.active {
  border-color: var(--gold);
  background: #1e1728;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}
.pet-icon { font-size: 24px; margin-bottom: 2px; }
.pet-name { font-size: 11px; color: var(--gold2); margin-bottom: 2px; }
.pet-desc { font-size: 10px; color: var(--muted); margin-bottom: 6px; line-height: 1.2; flex: 1; }
.pet-action { width: 100%; }
.pet-action .btn {
  width: 100%;
  font-size: 10.5px;
  padding: 4px 2px;
  white-space: normal;
  line-height: 1.2;
}

/* Bộ Giáp Hoàn Hảo (Cột Giữa) */
.armors-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.armor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  gap: 8px;
}
.ar-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.ar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ar-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
}
.ar-actions .jicon-s {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}

/* Set Bonus */
.set-bonus-box {
  margin-top: 12px;
  padding: 10px 14px;
  background: #110e19;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.set-bonus-box.active {
  border: 1px solid #2ecc71;
  background: #09170f;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.2);
}

/* Phụ bản Blood Castle & Devil Square */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 600px) {
  .events-grid { grid-template-columns: 1fr; }
}
.event-card {
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.ev-icon { font-size: 36px; margin-bottom: 6px; }
.event-card h3 { font-size: 16px; margin-bottom: 6px; color: var(--gold2); }
.event-card p { font-size: 12px; color: #ccc; margin-bottom: 8px; }
.ev-rewards {
  font-size: 12px;
  color: var(--gold2);
  background: #00000044;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Túi Hộp Kundun */
.boxes-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.box-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}

/* Vòng Quay May Mắn */
.wheel-wrapper {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 14px auto 0;
}
.wheel-pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: #e74c3c;
  z-index: 10;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

/* Đấu trường PvP */
.pvp-header-stat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 12px;
  gap: 6px;
}
.pvp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 4px;
}
.pvp-opp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14111d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}
.pvp-opp-row:hover {
  border-color: rgba(212, 175, 55, 0.4);
  background: #181424;
}
.pvp-opp-row.is-me {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}
.pvp-opp-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pvp-opp-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pvp-rank-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.pvp-rank-badge.rank-1 { color: #ffd700; background: rgba(255, 215, 0, 0.2); }
.pvp-rank-badge.rank-2 { color: #e0e0e0; background: rgba(224, 224, 224, 0.2); }
.pvp-rank-badge.rank-3 { color: #cd7f32; background: rgba(205, 127, 50, 0.2); }
.pvp-rank-badge.rank-other { color: #888; }
.pvp-nick {
  font-size: 14px;
}
.pvp-cls-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 168, 255, 0.2);
  color: #70a1ff;
  letter-spacing: 0.5px;
}
.pvp-title-chip {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: #ddd;
}
.pvp-opp-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.pvp-score-chip {
  color: var(--gold2);
  font-weight: 600;
}
.pvp-cp-chip {
  color: #ff6b6b;
  font-weight: 600;
}
.pvp-self-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  padding: 4px 10px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.1);
}

/* Floating Damage: Số sát thương hoàn hảo (Excellent Dmg - Neon Green) */
.float-dmg.exl {
  color: #00ff66 !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 6px #00ff66, 0 1px 3px #000 !important;
  z-index: 12;
}

/* Floating Damage: Kỹ năng môn phái (Class Skills) */
.float-dmg.skill {
  font-size: 22px !important;
  font-weight: 900 !important;
  z-index: 15;
}

/* Hiệu ứng chiêu thức (Skill FX Overlay) */
.skill-fx-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: skillPopAnim 0.55s ease-out forwards;
}

@keyframes skillPopAnim {
  0% { transform: translate(-50%, -30%) scale(0.6); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  75% { transform: translate(-50%, -55%) scale(1.0); opacity: 0.95; }
  100% { transform: translate(-50%, -65%) scale(0.9); opacity: 0; }
}

.skill-banner {
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 0 14px currentColor, 0 2px 6px #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Pulse animation cho nút Rồng Vàng khi đang có sự kiện */
@keyframes pulseGoldAnim {
  0%, 100% { box-shadow: 0 0 6px #ffd700, 0 0 14px rgba(255, 215, 0, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 14px #ff3300, 0 0 24px rgba(255, 51, 0, 0.7); transform: scale(1.04); }
}
.pulse-gold {
  animation: pulseGoldAnim 1.3s infinite ease-in-out !important;
  border-color: #ffd700 !important;
}

/* Grid & Cards cho Binh Đoàn Hoàng Kim */
.golden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}
.golden-card {
  background: #00000044;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  transition: border-color .2s;
}
.golden-card:hover {
  border-color: var(--gold);
}
.golden-card.defeated {
  opacity: 0.6;
  border-color: #2ecc71;
}

/* Thanh 6 nút tính năng chiến đấu (ngay trên khung bản đồ & quái) */
.battle-features-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
}
.battle-features-bar .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.battle-features-bar .btn .badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  display: inline-block;
}
@media (max-width: 480px) {
  .battle-features-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .battle-features-bar .btn {
    font-size: 11.5px;
    padding: 7px 4px;
  }
}

/* ==========================================================================
   BỐI CẢNH MÔI TRƯỜNG THEO TỪNG BẢN ĐỒ (MAP ATMOSPHERE)
   ========================================================================== */
#monster-area.map-lorencia { background: radial-gradient(ellipse at 50% 30%, #1a2517 0%, #0d140a 65%, #050804 100%); border-color: rgba(90, 140, 60, 0.35); box-shadow: inset 0 0 35px rgba(20, 40, 15, 0.6); }
#monster-area.map-noria    { background: radial-gradient(ellipse at 50% 30%, #122b1c 0%, #08170d 65%, #030a05 100%); border-color: rgba(46, 204, 113, 0.35); box-shadow: inset 0 0 35px rgba(10, 50, 25, 0.6); }
#monster-area.map-devias   { background: radial-gradient(ellipse at 50% 30%, #182e44 0%, #0b1724 65%, #050b12 100%); border-color: rgba(100, 180, 255, 0.4); box-shadow: inset 0 0 35px rgba(25, 70, 120, 0.6); }
#monster-area.map-dungeon  { background: radial-gradient(ellipse at 50% 30%, #281736 0%, #150a1e 65%, #0a040f 100%); border-color: rgba(155, 89, 182, 0.35); box-shadow: inset 0 0 35px rgba(60, 20, 80, 0.6); }
#monster-area.map-atlans   { background: radial-gradient(ellipse at 50% 30%, #0c2f3d 0%, #05161d 65%, #020a0e 100%); border-color: rgba(26, 188, 156, 0.4); box-shadow: inset 0 0 35px rgba(15, 80, 95, 0.6); }
#monster-area.map-losttower{ background: radial-gradient(ellipse at 50% 30%, #3d1910 0%, #210c06 65%, #100402 100%); border-color: rgba(231, 76, 60, 0.45); box-shadow: inset 0 0 35px rgba(100, 25, 15, 0.65); }
#monster-area.map-icarus   { background: radial-gradient(ellipse at 50% 30%, #20274d 0%, #0f1429 65%, #070914 100%); border-color: rgba(155, 89, 182, 0.45); box-shadow: inset 0 0 35px rgba(45, 45, 100, 0.6); }
#monster-area.map-kanturu  { background: radial-gradient(ellipse at 50% 30%, #322816 0%, #1a140a 65%, #0d0904 100%); border-color: rgba(241, 196, 15, 0.4); box-shadow: inset 0 0 35px rgba(90, 70, 20, 0.6); }
#monster-area.map-aida     { background: radial-gradient(ellipse at 50% 30%, #2d1528 0%, #180915 65%, #0a0309 100%); border-color: rgba(230, 126, 34, 0.35); box-shadow: inset 0 0 35px rgba(80, 30, 70, 0.6); }
#monster-area.map-crywolf  { background: radial-gradient(ellipse at 50% 30%, #242030 0%, #131019 65%, #08070c 100%); border-color: rgba(149, 165, 166, 0.35); box-shadow: inset 0 0 35px rgba(50, 45, 70, 0.6); }
#monster-area.map-kalima   { background: radial-gradient(ellipse at 50% 30%, #163023 0%, #0b1a13 65%, #040d09 100%); border-color: rgba(39, 174, 96, 0.4); box-shadow: inset 0 0 35px rgba(25, 80, 50, 0.6); }
#monster-area.map-raklion  { background: radial-gradient(ellipse at 50% 30%, #1a3647 0%, #0c1c26 65%, #040d12 100%); border-color: rgba(52, 152, 219, 0.45); box-shadow: inset 0 0 35px rgba(30, 90, 130, 0.6); }
#monster-area.map-vulcanus { background: radial-gradient(ellipse at 50% 30%, #47180e 0%, #260a04 65%, #120301 100%); border-color: rgba(231, 76, 60, 0.55); box-shadow: inset 0 0 35px rgba(120, 30, 15, 0.7); }

/* Weather canvas */
.weather-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; opacity: 0.85;
}

/* Combat VFX layer */
.combat-vfx-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4; overflow: hidden;
}

/* ==========================================================================
   HIỆU ỨNG CHIẾN ĐẤU (COMBAT VFX THEO PHÁI)
   ========================================================================== */
.vfx-slash {
  position: absolute;
  top: 35%; left: 50%;
  width: 140px; height: 14px;
  background: linear-gradient(90deg, transparent 0%, #fff 40%, #ffcc00 70%, transparent 100%);
  filter: drop-shadow(0 0 10px #ff9900) drop-shadow(0 0 20px #ff3300);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(0.2);
  opacity: 1;
  animation: slashAnim 0.26s ease-out forwards;
}
@keyframes slashAnim {
  0% { transform: translate(-50%, -50%) rotate(-35deg) scaleX(0.2); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) rotate(-30deg) scaleX(1.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-25deg) scaleX(1.7); opacity: 0; }
}

.vfx-arrow {
  position: absolute;
  bottom: 25%; left: 15%;
  width: 110px; height: 4px;
  background: linear-gradient(90deg, transparent 0%, #55ffcc 40%, #ffffff 90%, #ffffaa 100%);
  filter: drop-shadow(0 0 8px #00ffaa) drop-shadow(0 0 16px #00e5ff);
  border-radius: 2px;
  transform: rotate(-25deg);
  opacity: 1;
  animation: arrowAnim 0.22s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes arrowAnim {
  0% { transform: translate(-30px, 30px) rotate(-25deg) scaleX(0.5); opacity: 0.8; }
  60% { transform: translate(60px, -30px) rotate(-25deg) scaleX(1.2); opacity: 1; }
  100% { transform: translate(120px, -60px) rotate(-25deg) scaleX(0.8); opacity: 0; }
}

.vfx-magic {
  position: absolute;
  top: 35%; left: 50%;
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 3px solid #b388ff;
  background: radial-gradient(circle, rgba(179, 136, 255, 0.5) 0%, rgba(101, 31, 255, 0.2) 60%, transparent 80%);
  filter: drop-shadow(0 0 12px #9c27b0) drop-shadow(0 0 24px #651fff);
  transform: translate(-50%, -50%) scale(0.2);
  animation: magicBurstAnim 0.32s ease-out forwards;
}
@keyframes magicBurstAnim {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0.9; }
  60% { transform: translate(-50%, -50%) scale(1.3) rotate(45deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6) rotate(90deg); opacity: 0; }
}

.vfx-lord {
  position: absolute;
  top: 30%; left: 50%;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px solid #ffd700;
  box-shadow: 0 0 20px #ffaa00, inset 0 0 15px #ffd700;
  transform: translate(-50%, -50%) scale(0.3);
  animation: lordBurstAnim 0.3s ease-out forwards;
}
@keyframes lordBurstAnim {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
  60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.vfx-crit-burst {
  position: absolute;
  top: 35%; left: 50%;
  width: 65px; height: 65px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 10%, #ff8800 60%, transparent 80%);
  filter: drop-shadow(0 0 14px #ff3300);
  border-radius: 50%;
  animation: burstFade 0.28s ease-out forwards;
}

.vfx-exl-burst {
  position: absolute;
  top: 35%; left: 50%;
  width: 75px; height: 75px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 15%, #00ff66 60%, transparent 80%);
  filter: drop-shadow(0 0 16px #00e676);
  border-radius: 50%;
  animation: burstFade 0.3s ease-out forwards;
}
@keyframes burstFade {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ==========================================================================
   CỘT SÁNG RƠI NGỌC (PILLAR OF LIGHT - BLESS & SOUL)
   ========================================================================== */
.pillar-of-light {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 100%;
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: pillarLife 2.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
.pillar-beam {
  position: absolute;
  top: 0; bottom: 0;
  width: 26px;
  border-radius: 13px;
}
.pillar-beam.bless {
  background: linear-gradient(180deg, rgba(255, 235, 59, 0.95) 0%, rgba(255, 193, 7, 0.75) 60%, rgba(255, 152, 0, 0.4) 100%);
  box-shadow: 0 0 25px #ffd700, 0 0 55px rgba(255, 215, 0, 0.85), 0 0 90px rgba(255, 170, 0, 0.5);
}
.pillar-beam.soul {
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.95) 0%, rgba(41, 121, 255, 0.75) 60%, rgba(101, 31, 255, 0.4) 100%);
  box-shadow: 0 0 25px #00e5ff, 0 0 55px rgba(0, 229, 255, 0.85), 0 0 90px rgba(41, 121, 255, 0.5);
}
.pillar-badge {
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13.5px;
  animation: badgeFloatUp 2.2s ease-out forwards;
}
.pillar-badge.bless {
  background: linear-gradient(180deg, #ffd700, #b8860b);
  color: #1a1000;
  box-shadow: 0 0 18px #ffd700, 0 2px 8px rgba(0,0,0,0.5);
  border: 1px solid #fff;
}
.pillar-badge.soul {
  background: linear-gradient(180deg, #00e5ff, #1565c0);
  color: #ffffff;
  box-shadow: 0 0 18px #00e5ff, 0 2px 8px rgba(0,0,0,0.5);
  border: 1px solid #e0f7fa;
}
@keyframes pillarLife {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
  15% { opacity: 1; transform: translateX(-50%) scaleX(1.3); }
  75% { opacity: 0.9; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
}
@keyframes badgeFloatUp {
  0% { transform: translateY(30px) scale(0.7); opacity: 0; }
  18% { transform: translateY(0) scale(1.1); opacity: 1; }
  70% { transform: translateY(-20px) scale(1); opacity: 1; }
  100% { transform: translateY(-50px) scale(0.85); opacity: 0; }
}

/* ==========================================================================
   HÀO QUANG TRANG BỊ (+7 ĐẾN +15 GLOW) & CÁNH
   ========================================================================== */
.glow-silver {
  border-color: #e0e0e0 !important;
  color: #f5f5f5 !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(220, 220, 255, 0.45);
  animation: pulseSilver 2s infinite ease-in-out;
}
@keyframes pulseSilver {
  0%, 100% { box-shadow: 0 0 6px rgba(220, 220, 255, 0.35); }
  50% { box-shadow: 0 0 14px rgba(255, 255, 255, 0.8); }
}

.glow-gold {
  border-color: #ffd700 !important;
  color: #fff9c4 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), inset 0 0 6px rgba(255, 215, 0, 0.25);
  animation: pulseGold 1.8s infinite ease-in-out;
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), inset 0 0 4px rgba(255, 215, 0, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 235, 59, 0.9), inset 0 0 10px rgba(255, 215, 0, 0.45); }
}

.glow-fire {
  border-color: #ff5722 !important;
  color: #ffe0b2 !important;
  text-shadow: 0 0 12px rgba(255, 87, 34, 0.9), 0 0 20px rgba(255, 50, 0, 0.6);
  box-shadow: 0 0 15px rgba(255, 87, 34, 0.7), inset 0 0 8px rgba(255, 60, 0, 0.35);
  animation: pulseFire 1.4s infinite ease-in-out;
}
@keyframes pulseFire {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 87, 34, 0.6), inset 0 0 6px rgba(255, 60, 0, 0.3); border-color: #ff5722 !important; }
  50% { box-shadow: 0 0 25px rgba(255, 40, 0, 0.95), inset 0 0 14px rgba(255, 100, 0, 0.55); border-color: #ff9800 !important; }
}

.glow-divine {
  border-color: #e040fb !important;
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(224, 64, 251, 0.9), 0 0 24px rgba(0, 229, 255, 0.7);
  box-shadow: 0 0 18px rgba(224, 64, 251, 0.75), inset 0 0 10px rgba(0, 229, 255, 0.4);
  animation: pulseDivine 1.5s infinite ease-in-out;
}
@keyframes pulseDivine {
  0%, 100% { box-shadow: 0 0 14px rgba(224, 64, 251, 0.7), inset 0 0 8px rgba(0, 229, 255, 0.3); border-color: #e040fb !important; }
  50% { box-shadow: 0 0 28px rgba(0, 229, 255, 0.95), inset 0 0 16px rgba(224, 64, 251, 0.6); border-color: #00e5ff !important; }
}

/* Wing Aura on Character Avatar */
.char-head {
  position: relative;
}
.char-avatar {
  position: relative;
  z-index: 2;
  transition: filter 0.3s ease, transform 0.3s ease;
  border-radius: 50%;
}
.char-avatar.wing-aura-1 {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}
.char-avatar.wing-aura-2 {
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.75)) drop-shadow(0 0 22px rgba(255, 140, 0, 0.45));
  animation: wingFloat 2.4s ease-in-out infinite alternate;
}
.char-avatar.wing-aura-3 {
  filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.85)) drop-shadow(0 0 28px rgba(156, 39, 176, 0.65));
  animation: wingFloat 2s ease-in-out infinite alternate;
}
.char-avatar.wing-aura-4 {
  filter: drop-shadow(0 0 22px rgba(255, 50, 50, 0.95)) drop-shadow(0 0 34px rgba(255, 215, 0, 0.85));
  animation: wingFloatDivine 1.8s ease-in-out infinite alternate;
}
@keyframes wingFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}
@keyframes wingFloatDivine {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.04); }
}

/* Full Set Aura on Avatar */
.char-avatar.fullset-ring {
  box-shadow: 0 0 0 2px #ffd700, 0 0 18px #ff9800, inset 0 0 10px #ffd700;
}