::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #080811;
        }
        ::-webkit-scrollbar-thumb {
            background: #202035;
            border-radius: 4px;
            border: 1px solid #8B5CF6;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #8B5CF6;
        }
        .hero-glow {
            background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.12) 0%, transparent 60%);
        }
        .tab-active {
            border-color: #8B5CF6;
            color: #FFFFFF;
            background: rgba(139, 92, 246, 0.1);
        }
        body { background-image: radial-gradient(circle at 15% 10%, rgba(139,92,246,.08), transparent 28%), radial-gradient(circle at 85% 20%, rgba(6,182,212,.06), transparent 25%); }
        header { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
        header.header-scrolled { background: rgba(8,8,17,.97); box-shadow: 0 14px 45px rgba(0,0,0,.35); border-color: rgba(139,92,246,.28); }
        section { scroll-margin-top: 80px; }
        .glass-card { background: linear-gradient(145deg, rgba(22,22,43,.88), rgba(12,12,24,.82)); backdrop-filter: blur(14px); }
        .premium-card { position: relative; isolation: isolate; box-shadow: 0 18px 60px rgba(0,0,0,.22); }
        .premium-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(139,92,246,.45), rgba(6,182,212,.12), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
        .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
        .reveal.visible { opacity: 1; transform: none; }
        .focus-ring:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #06B6D4; outline-offset: 3px; }
        .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: #fff; color: #080811; padding: .75rem 1rem; border-radius: .75rem; font-weight: 800; transition: top .2s ease; }
        .skip-link:focus { top: 1rem; }
        :root { color-scheme: dark; }
        body { background-attachment: fixed; }
        .hero-glow::before { content: ''; position: absolute; inset: auto auto 12% 8%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(167,139,250,0.18), transparent 68%); filter: blur(10px); pointer-events: none; }
        .hero-glow::after { content: ''; position: absolute; inset: 8% 10% auto auto; width: 260px; height: 260px; background: radial-gradient(circle, rgba(6,182,212,0.14), transparent 70%); filter: blur(12px); pointer-events: none; }
        header nav a { position: relative; }
        header nav a::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #8B5CF6, #06B6D4); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; opacity: .95; }
        header nav a:hover::after { transform: scaleX(1); }
        .section-kicker { letter-spacing: .28em; }
        .soft-panel { background: linear-gradient(180deg, rgba(20,20,35,.92), rgba(10,10,20,.92)); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 22px 70px rgba(0,0,0,.28); }
        .soft-panel:hover { box-shadow: 0 26px 90px rgba(0,0,0,.34); }
        #inicio .grid > div { background: linear-gradient(180deg, rgba(20,20,35,.96), rgba(12,12,22,.9)); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 20px 48px rgba(0,0,0,.22); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
        #inicio .grid > div:hover { transform: translateY(-4px); border-color: rgba(139,92,246,.26); box-shadow: 0 24px 60px rgba(0,0,0,.32); }
        #game-container { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.35); }
        #game-container::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 25%, transparent 75%, rgba(0,0,0,.12)); }
        footer { background-image: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)); }
        .mu-img-frame { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(18,18,32,.9), rgba(8,8,16,.95)); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
        .mu-img-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%, transparent 78%, rgba(0,0,0,.18)); pointer-events: none; }
        .mu-stat-card { background: linear-gradient(180deg, rgba(18,18,32,.92), rgba(10,10,18,.92)); border: 1px solid rgba(255,255,255,.06); }
        .contact-shell { background: linear-gradient(145deg, rgba(18,18,34,.96), rgba(8,8,18,.96)); border: 1px solid rgba(255,255,255,.07); box-shadow: 0 30px 90px rgba(0,0,0,.34); }
        .contact-card { background: linear-gradient(180deg, rgba(18,18,32,.92), rgba(10,10,20,.92)); border: 1px solid rgba(255,255,255,.06); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
        .contact-card:hover { transform: translateY(-4px); border-color: rgba(139,92,246,.28); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
        .contact-field { background: rgba(7,7,15,.86); border: 1px solid rgba(255,255,255,.08); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
        .contact-field:focus { border-color: rgba(6,182,212,.75); box-shadow: 0 0 0 4px rgba(6,182,212,.08); background: rgba(10,10,20,.96); }
        .youtube-shell { background: linear-gradient(145deg, rgba(18,18,34,.96), rgba(8,8,17,.96)); border: 1px solid rgba(255,255,255,.07); box-shadow: 0 30px 90px rgba(0,0,0,.34); }
        .youtube-tab { position: relative; overflow: hidden; }
        .youtube-tab::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(6,182,212,.08)); opacity: 0; transition: opacity .25s ease; }
        .youtube-tab.active::before, .youtube-tab:hover::before { opacity: 1; }
        .youtube-tab.active { border-color: rgba(167,139,250,.52); color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.22); }
        .youtube-card { transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
        .youtube-card:hover { transform: translateY(-5px); border-color: rgba(167,139,250,.45); box-shadow: 0 20px 45px rgba(0,0,0,.28); }
        .youtube-card.active { border-color: rgba(6,182,212,.6); box-shadow: 0 0 0 1px rgba(6,182,212,.15), 0 18px 45px rgba(0,0,0,.30); }
        .youtube-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78)); }
        .youtube-play { transition: transform .25s ease, background-color .25s ease; }
        .youtube-card:hover .youtube-play { transform: translate(-50%,-50%) scale(1.08); background: #ef4444; }
        .youtube-progress { transform-origin: left; animation: youtubeProgress 6s linear infinite; }
        @keyframes youtubeProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }
    
        .chat-step { display:none; }
        .chat-step.active { display:block; animation: chatFade .32s ease; }
        @keyframes chatFade { from { opacity:0; transform:translateY(8px);} to {opacity:1; transform:none;} }
        .chat-wizard-card { background: linear-gradient(180deg, rgba(13,13,24,.96), rgba(7,7,14,.98)); border:1px solid rgba(255,255,255,.08); box-shadow:0 28px 80px rgba(0,0,0,.35); }
        .chat-room-card.active { border-color: rgba(6,182,212,.55); background: rgba(6,182,212,.08); transform: translateY(-2px); }
        .chat-avatar-card.active { border-color: rgba(139,92,246,.65); background: rgba(139,92,246,.1); transform: translateY(-2px); }

        .chat-avatar-card { position: relative; overflow: hidden; }
        .chat-avatar-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%, rgba(0,0,0,.08)); pointer-events: none; }
        .mu-avatar-thumb { width: 72px; height: 72px; border-radius: 1rem; object-fit: cover; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
        .mu-profile-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
        .mu-scene-shell { position: relative; min-height: 340px; border-radius: 1.75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #07070f; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 55px rgba(0,0,0,.28); }
        .mu-scene-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.05); opacity: .42; }
        .mu-scene-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,12,.48) 0%, rgba(7,7,12,.22) 25%, rgba(10,10,18,.12) 50%, rgba(7,7,12,.66) 100%), radial-gradient(circle at top center, rgba(167,139,250,.18), transparent 32%); }
        .mu-scene-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 88px; background: linear-gradient(180deg, rgba(15,15,24,0), rgba(12,12,20,.65) 30%, rgba(12,12,20,.95) 100%); border-top: 1px solid rgba(255,255,255,.04); }
        .mu-scene-stage { position: relative; z-index: 2; height: 100%; }
        .mu-scene-avatar { position: absolute; bottom: 16px; transform: translateX(-50%); width: 130px; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
        .mu-scene-avatar.self .mu-scene-avatar-img { border-color: rgba(6,182,212,.75); box-shadow: 0 0 0 4px rgba(6,182,212,.12), 0 18px 35px rgba(0,0,0,.35); }
        .mu-scene-avatar-img { width: 82px; height: 82px; border-radius: 999px; object-fit: cover; border: 3px solid rgba(255,255,255,.16); box-shadow: 0 18px 35px rgba(0,0,0,.35); background: #111; }
        .mu-scene-name { color: #fff; font-size: 12px; line-height: 1; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
        .mu-scene-class { color: #9CA3AF; font-size: 10px; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
        .mu-chat-bubble { position: absolute; left: 50%; bottom: 102px; transform: translateX(-50%); width: max-content; max-width: 170px; padding: .7rem .8rem; border-radius: 1rem; background: rgba(255,255,255,.96); color: #151515; box-shadow: 0 16px 28px rgba(0,0,0,.35); font-size: 12px; line-height: 1.25; text-align: left; }
        .mu-chat-bubble strong { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; margin-bottom: .2rem; }
        .mu-chat-bubble::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; width: 16px; height: 16px; background: rgba(255,255,255,.96); clip-path: polygon(50% 100%, 0 0, 100% 0); }
        .mu-message-card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.05); }
    
        .mu-live-layout { background: linear-gradient(180deg, rgba(9,10,16,.98), rgba(4,5,9,.99)); }
        .mu-live-panel { background: linear-gradient(180deg, rgba(18,21,27,.94), rgba(9,11,16,.96)); border:1px solid rgba(255,255,255,.08); }
        .mu-live-titlebar { background: linear-gradient(180deg, rgba(18,20,28,.98), rgba(10,12,18,.98)); border-bottom:1px solid rgba(255,255,255,.08); }
        .mu-live-scene { position:relative; min-height:680px; overflow:hidden; border-radius:1rem; border:1px solid rgba(255,255,255,.08); background:#08090d; }
        .mu-live-scene-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:background-image .35s ease; }
        .mu-live-scene-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.13) 55%,rgba(0,0,0,.45)); }
        .mu-live-stage { position:absolute; inset:0; z-index:2; }
        .mu-live-character { position:absolute; transform:translate(-50%,-50%); width:108px; text-align:center; transition:all .25s ease; }
        .mu-live-character img { width:82px; height:82px; object-fit:cover; border-radius:18px; border:2px solid rgba(255,255,255,.22); background:#111; box-shadow:0 16px 28px rgba(0,0,0,.45); }
        .mu-live-character.me img { border-color:#a855f7; box-shadow:0 0 0 4px rgba(168,85,247,.18),0 16px 28px rgba(0,0,0,.45); }
        .mu-live-character-name { display:block; margin-top:6px; color:#fff; font:700 11px/1.1 Inter,sans-serif; text-shadow:0 2px 8px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mu-live-character-class { display:block; color:#c4b5fd; font:600 9px/1.1 Inter,sans-serif; text-shadow:0 2px 8px #000; }
        .mu-live-bubble { position:absolute; left:50%; bottom:100px; transform:translateX(-50%); width:max-content; max-width:190px; padding:10px 12px; border-radius:10px; background:rgba(250,250,250,.97); color:#121212; font:600 11px/1.3 Inter,sans-serif; text-align:left; box-shadow:0 12px 24px rgba(0,0,0,.36); }
        .mu-live-bubble.me { background:rgba(13,13,17,.96); color:#fff; border:1px solid rgba(168,85,247,.5); }
        .mu-live-bubble strong { display:block; color:#6d28d9; font-size:10px; margin-bottom:2px; }
        .mu-live-bubble.me strong { color:#fbbf24; }
        .mu-live-bubble::after { content:''; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); border:9px solid transparent; border-top-color:rgba(250,250,250,.97); border-bottom:0; }
        .mu-live-bubble.me::after { border-top-color:rgba(13,13,17,.96); }
        .mu-user-row { display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid rgba(255,255,255,.06); }
        .mu-user-row:last-child { border-bottom:0; }
        .mu-user-row img { width:42px; height:42px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.12); }
        .mu-status-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,.55); }
        .mu-room-count-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.35); color:#4ade80; font:700 10px Orbitron,sans-serif; }
        .mu-scene-badge { position:absolute; z-index:4; top:14px; left:14px; padding:8px 10px; border-radius:8px; background:rgba(6,7,10,.84); border:1px solid rgba(255,255,255,.10); color:#fbbf24; font:700 10px Orbitron,sans-serif; }
        .mu-position-ping { position:absolute; width:16px; height:16px; border-radius:999px; border:2px solid rgba(6,182,212,.75); background:rgba(6,182,212,.18); box-shadow:0 0 0 8px rgba(6,182,212,.08); transform:translate(-50%,-50%); pointer-events:none; z-index:1; }
        .mu-ticker-viewport { position:relative; overflow:hidden; height:42px; display:flex; align-items:center; background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(139,92,246,.05),rgba(0,0,0,.35)); }
        .mu-ticker-track { display:inline-block; white-space:nowrap; padding-left:100%; color:#d1d5db; font:600 12px/1.2 Inter,sans-serif; animation:muTickerScroll 22s linear infinite; }
        .mu-ticker-track:hover { animation-play-state:paused; }
        @keyframes muTickerScroll { from { transform:translateX(0); } to { transform:translateX(-100%); } }
        @media (max-width: 1023px) { .mu-live-scene { min-height:560px; } }
        @media (max-width: 640px) { .mu-live-scene { min-height:580px; } .mu-live-character { width:92px; } .mu-live-character img { width:66px; height:66px; } .mu-live-bubble { max-width:145px; font-size:10px; bottom:84px; } }

    

/* Melhorias visuais do chat */
.mu-live-character { animation: muIdleFloat 3.8s ease-in-out infinite; }
.mu-live-character:nth-child(2n) { animation-delay: -1.2s; }
.mu-live-character:nth-child(3n) { animation-delay: -2.1s; }
@keyframes muIdleFloat { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-5px); } }
.mu-live-bubble { animation: muBubbleIn .28s ease both; }
@keyframes muBubbleIn { from { opacity:0; transform:translateX(-50%) translateY(8px) scale(.96); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
.mu-room-effects { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.mu-room-effects::before,.mu-room-effects::after { content:''; position:absolute; inset:-10%; }
.mu-room-effects.effect-lorencia::before { background:radial-gradient(circle at 50% 18%,rgba(251,191,36,.12),transparent 32%); animation:muGlowPulse 4s ease-in-out infinite; }
.mu-room-effects.effect-devias::before { background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.8px); background-size:28px 28px; opacity:.55; animation:muSnowFall 10s linear infinite; }
.mu-room-effects.effect-devias::after { background:linear-gradient(180deg,rgba(125,211,252,.12),transparent 45%); }
.mu-room-effects.effect-noria::before { background-image:radial-gradient(circle,rgba(52,211,153,.85) 0 2px,transparent 3px); background-size:74px 74px; opacity:.28; animation:muMagicDrift 8s linear infinite; }
.mu-room-effects.effect-trade::before { background:radial-gradient(circle at 25% 75%,rgba(251,191,36,.12),transparent 28%),radial-gradient(circle at 80% 25%,rgba(245,158,11,.10),transparent 24%); animation:muGlowPulse 5s ease-in-out infinite; }
.mu-room-effects.effect-guild::before { background:linear-gradient(90deg,transparent,rgba(251,191,36,.06),transparent); animation:muHallLight 6s ease-in-out infinite; }
.mu-room-effects.effect-siege::before { background-image:radial-gradient(circle,rgba(251,146,60,.95) 0 1px,transparent 2px); background-size:52px 52px; opacity:.26; animation:muEmberRise 7s linear infinite; }
@keyframes muGlowPulse { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes muSnowFall { from{transform:translate3d(0,-8%,0)} to{transform:translate3d(-3%,14%,0)} }
@keyframes muMagicDrift { from{transform:translate3d(-2%,5%,0)} to{transform:translate3d(3%,-8%,0)} }
@keyframes muHallLight { 0%,100%{transform:translateX(-15%);opacity:.4} 50%{transform:translateX(15%);opacity:.9} }
@keyframes muEmberRise { from{transform:translate3d(0,10%,0)} to{transform:translate3d(2%,-12%,0)} }
.mu-quick-reaction { width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.mu-quick-reaction:hover { transform:translateY(-2px) scale(1.05); border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.12); }
.mu-message-card { transition:border-color .2s ease,transform .2s ease; }
.mu-message-card:hover { transform:translateX(3px); border-color:rgba(139,92,246,.28); }
@media (max-width: 1279px){
  .mu-live-layout .grid { grid-template-columns:1fr !important; }
  .mu-live-layout aside { border-left:0 !important; border-right:0 !important; }
  #mu-online-users { max-height:280px !important; }
}
@media (prefers-reduced-motion: reduce){ .mu-live-character,.mu-room-effects::before,.mu-room-effects::after,.mu-live-bubble{animation:none!important;} }