.fairy-scene { position: fixed; inset: 0; z-index: 1010; pointer-events: none; overflow: hidden; contain: strict; }
.fairy-scene[hidden] { display: none !important; }
.fairy-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fairy-aura { position: absolute; width: min(65vw,850px); height: 60vh; border-radius: 50%; opacity: .15; filter: blur(55px); mix-blend-mode: screen; animation: fairyAuraFloat 20s ease-in-out infinite alternate; }
.fairy-aura-gold { top: -35vh; left: -15vw; background: radial-gradient(ellipse,#ffd270,transparent 65%); }
.fairy-aura-jade { bottom: -35vh; right: -20vw; background: radial-gradient(ellipse,#64ffd5,transparent 65%); animation-delay: -10s; }
.fairy-sigil { position: absolute; bottom: -150px; left: calc(50% - 170px); width: 340px; height: 340px; color: #fbd584; opacity: .09; animation: fairySigilTurn 100s linear infinite; }
.fairy-sigil circle, .fairy-sigil path { vector-effect: non-scaling-stroke; }
.fairy-toggle { position: fixed; right: 14px; bottom: max(14px,env(safe-area-inset-bottom)); z-index: 1030; display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid #d7b66677; border-radius: 30px; color: #ffe3a1; background: #251708e8; box-shadow: 0 3px 15px #0004; font: 600 11px 'Segoe UI',Arial,sans-serif; cursor: pointer; backdrop-filter: blur(10px); }
.fairy-toggle:hover { border-color: #f7d37f; background: #3d2a0fee; }
.fairy-toggle:focus-visible { outline: 2px solid #ffe3a1; outline-offset: 4px; }
.fairy-toggle:disabled { cursor: default; opacity: .6; }
.fairy-toggle span:first-child { color: #ffdc70; font-size: 17px; line-height: 1; }
body.fairy-enabled .rank-panel-title, body.fairy-enabled .leaderboard-title { text-shadow: 0 0 14px #ffcd6845, 0 2px 3px #0007; }
body.fairy-enabled .btn-navbar:hover, body.fairy-enabled .footer-zalo-button:hover { box-shadow: 0 0 0 1px #fcd88555, 0 0 18px #ffc95b33; }
@keyframes fairyAuraFloat { to { transform: translate(8vw,5vh) scale(1.2); } }
@keyframes fairySigilTurn { to { transform: rotate(360deg); } }
@media(max-width:600px) { .fairy-aura { filter: blur(32px); opacity: .1; } .fairy-sigil { width: 240px; height: 240px; bottom: -120px; left: calc(50% - 120px); } .fairy-toggle { right: 8px; padding: 7px 9px; font-size: 10px; } }
@media(prefers-reduced-motion:reduce) { .fairy-scene { display: none !important; } .fairy-scene * { animation: none !important; } }