@font-face {
 font-family: 'Cinzel Decorative';
 src: url('https://juegosdrag.com/assets/css/CinzelDeco/CinzelDecorative-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: 'Cinzel Decorative';
 src: url('https://juegosdrag.com/assets/css/CinzelDeco/CinzelDecorative-Bold.ttf') format('truetype');
 font-weight: 700;
 font-style: normal;
}
@font-face {
 font-family: 'Cinzel Decorative';
 src: url('https://juegosdrag.com/assets/css/CinzelDeco/CinzelDecorative-Black.ttf') format('truetype');
 font-weight: 900;
 font-style: normal;
}

:root {
 --magic-primary: var(--bs-primary, #d4af37);
 --ao-gold: #b8860b;
 --ao-gold-light: #e0c570;
 --ao-gold-dark: #8b6508;
 --ao-blood: #5a0a0a;
 --magic-gold: #ffd700;
 --magic-neon: #9d00ff;
 --magic-fire-start: #8B0000;
 --magic-fire-mid: #FF4500;
 --magic-fire-end: #FFD700;
}

html, body {
 cursor: url('https://juegosdrag.com/img/foro/cursor/diablo.ico') 0 0, auto !important;
 scrollbar-width: thin;
 scrollbar-color: var(--ao-gold) var(--bs-body-bg);
 font-family: 'Segoe UI', system-ui, sans-serif;
}

body {
 background-color: var(--bs-body-bg);
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] body {
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
}

::selection {
 background: var(--magic-gold);
 color: #000;
 text-shadow: none;
}

a, button, input, select, textarea, .btn, 
[role="button"], [type="submit"], .pointer, 
.gTableTop, .forumNameTd, tr:hover, .magic-loot-item, .page-link, .rpg-loot-card {
 cursor: url('https://juegosdrag.com/img/foro/cursor/mano.ico') 0 0, pointer !important;
}

::-webkit-scrollbar {
 width: 10px;
 height: 10px;
 background-color: var(--bs-body-bg);
}
::-webkit-scrollbar-track {
 background: rgba(0,0,0,0.1);
 border-radius: 4px;
}
::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, var(--ao-gold), var(--ao-blood));
 border-radius: 6px;
 border: 2px solid transparent;
 background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { 
 background-color: var(--ao-gold-light);
 border: 1px solid transparent; 
 box-shadow: 0 0 10px var(--ao-gold);
}
::-webkit-scrollbar-corner {
 background: transparent;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, 
.navbar-brand, .btn-lg, .modal-title, .titulo-legendario,
.gTableTop a, .forum-title, .rpg-title, .rpg-price, .stat-label {
 font-family: 'Cinzel', serif !important;
 letter-spacing: 0.5px;
 font-weight: 700;
}

.crazy-medieval-font {
 font-family: 'Cinzel Decorative', cursive;
 font-weight: 900;
 font-size: 3rem; 
 letter-spacing: -2px;
 text-transform: uppercase;
}

.text-fire {
 background: linear-gradient(0deg, var(--magic-fire-start) 0%, var(--magic-fire-mid) 50%, var(--magic-fire-end) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0 2px 0 #000);
}

.force-hidden {
 display: none !important;
 visibility: hidden !important;
 opacity: 0 !important;
 height: 0 !important;
 overflow: hidden !important;
}

.mission-card-rpg {
 background: var(--bs-paper-bg) !important;
 border: 1px solid rgba(115, 103, 240, 0.15) !important;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 position: relative !important;
 overflow: hidden !important;
}

.mission-card-rpg:hover {
 transform: translateY(-8px);
 border-color: #7367f0 !important;
 box-shadow: 0 12px 30px rgba(115, 103, 240, 0.25) !important;
}

.mission-card-rpg:hover .mission-img-top {
 transform: scale(1.1);
}

.mission-img-wrapper {
 height: 210px;
 overflow: hidden;
 position: relative;
 background-color: #1a1a2e;
 border-bottom: 2px solid #7367f0; 
}

.mission-img-top {
 width: 100%;
 height: 100%;
 object-fit: cover; 
 transition: transform 0.5s ease;
 image-rendering: pixelated; 
 image-rendering: -moz-crisp-edges;
 image-rendering: crisp-edges;
}

.mission-completed-badge {
 position: absolute !important;
 top: 10px !important;
 right: 10px !important;
 width: 45px !important;
 height: 45px !important;
 font-size: 24px !important;
 background: #28c76f !important;
 color: white !important;
 border-radius: 50% !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 z-index: 20 !important;
 box-shadow: 0 0 15px rgba(40, 199, 111, 0.8) !important;
 border: 2px solid #fff !important;
}

.mission-completed-overlay {
 position: absolute;
 top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(40, 199, 111, 0.7); 
 display: flex; align-items: center; justify-content: center;
 backdrop-filter: blur(3px);
 z-index: 2;
 animation: fadeIn 0.3s;
}

.mission-check-icon {
 font-size: 3.5rem;
 color: #ffd700; 
 text-shadow: 0 0 15px rgba(0,0,0,0.6);
 animation: bounceIn 0.5s;
}

.rpg-progress {
 height: 12px !important;
 background: #333333 !important;
 border-radius: 10px !important;
 overflow: hidden !important;
 margin: 10px 0 !important;
 border: 1px solid #555 !important;
 width: 100% !important;
 display: block !important;
}

.rpg-progress-bar {
 height: 100% !important;
 background: linear-gradient(90deg, #7367f0, #ce9ffc) !important;
 box-shadow: 0 0 10px rgba(115, 103, 240, 0.6) !important;
 transition: width 1s ease-in-out !important;
 display: block !important;
}

.text-truncate-2 {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 height: 48px;
}

.mission-desc-limit {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 line-height: 1.3;
}

.mission-card {
 position: relative !important;
 display: flex;
 flex-direction: row;
 align-items: center;
 padding: 1.5rem;
 gap: 1.5rem;
 background-color: var(--bs-paper-bg) !important;
 border: 1px solid rgba(115, 103, 240, 0.3) !important;
 border-radius: 16px;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 min-height: 140px;
 margin-bottom: 1.5rem;
 overflow: hidden !important;
 transform: translateZ(0);
}
.mission-card:hover {
 transform: translateY(-5px);
 border-color: #7367f0 !important;
 box-shadow: 0 8px 20px rgba(115, 103, 240, 0.25);
}

.mission-icon-wrapper {
 flex-shrink: 0;
 width: 90px;
 height: 90px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 font-size: 3rem;
 color: #fff !important;
 position: relative;
}

.bg-sabiduria { background: linear-gradient(135deg, #7367f0 0%, #3f33af 100%); }
.bg-relampago { background: linear-gradient(135deg, #ff9f43 0%, #ff6b00 100%); }
.bg-nostalgia { background: linear-gradient(135deg, #bf953f 0%, #8a6e2f 100%); box-shadow: inset 0 0 20px rgba(0,0,0,0.3); border: 1px solid #ffd700; }

.completed-ribbon {
 position: absolute;
 top: 12px; right: -30px;
 width: 100px;
 transform: rotate(45deg);
 background: #28c76f;
 color: white;
 text-align: center;
 font-size: 0.6rem;
 font-weight: 800;
 padding: 4px 0;
 z-index: 10;
 box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 pointer-events: none;
 line-height: 1.2;
}

.storage-mode { display: none !important; }

.arena-mode {
 display: block !important;
 background-color: var(--bs-paper-bg);
 border: 2px solid #7367f0;
 border-radius: 16px;
 padding: 30px;
 box-shadow: 0 0 40px rgba(115, 103, 240, 0.2);
 min-height: 400px;
 animation: fadeIn 0.5s ease-in;
}

@media (max-width: 576px) {
 .mission-card { flex-direction: column; text-align: center; }
}

.quiz-modal {
 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(0, 0, 0, 0.85);
 display: flex; align-items: center; justify-content: center;
 z-index: 9999;
 backdrop-filter: blur(5px);
}
.modal-content-quiz {
 background: var(--bs-paper-bg);
 padding: 2.5rem;
 border-radius: 20px;
 text-align: center;
 border: 2px solid #7367f0;
 max-width: 450px;
 width: 90%;
}
.modal-content-quiz button {
 background: #7367f0;
 color: white;
 border: none;
 padding: 12px 30px;
 border-radius: 8px;
 font-weight: bold;
 width: 100%;
 margin-top: 15px;
}

.cs { background: #0f0f15 !important; border: 2px solid #d33 !important; }
.dg { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; max-width: 280px; margin: 15px auto; }
.dc {
 height: 75px; width: 100%;
 background: #2b2b35 !important;
 border: 2px solid #4a4a5a !important;
 border-radius: 8px;
 display: flex; align-items: center; justify-content: center;
 cursor: crosshair; transition: all 0.1s;
 box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.dc:active { background: #7a1d1d !important; }
.dt { background: rgba(255, 62, 29, 0.25) !important; border-color: #ff3e1d !important; box-shadow: 0 0 15px rgba(255, 62, 29, 0.4) !important; }

.arena-mode .eVariant input, 
.arena-mode .eVariant label,
.arena-mode .tst-progress,
.arena-mode #TstSbm,
.arena-mode hr {
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease-in-out;
}

.modo-dados-activo .eVariant input,
.modo-dados-activo .eVariant label:not(:has(.modal)),
.modo-dados-activo .tst-progress,
.modo-dados-activo hr,
.modo-dados-activo #TstSbm {
 display: none !important;
}

.modo-sabiduria-activo .eVariant input[type="radio"],
.modo-sabiduria-activo .eVariant label,
.modo-sabiduria-activo .tst-progress,
.modo-sabiduria-activo #TstSbm {
 display: inline-block !important;
 opacity: 1 !important;
 visibility: visible !important;
 pointer-events: auto !important;
 position: relative !important;
 cursor: pointer !important;
}

.modo-sabiduria-activo .eTitle {
 display: block !important;
 opacity: 1 !important;
 font-size: 1.2rem;
 color: #ffd700;
 text-shadow: 0 0 10px rgba(0,0,0,0.5);
 margin-bottom: 15px;
}

.modo-sabiduria-activo .eVariant input[type="radio"] {
 appearance: none;
 -webkit-appearance: none;
 width: 20px !important;
 height: 20px !important;
 border: 2px solid #ffd700 !important;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.6);
 box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
 cursor: pointer;
 vertical-align: middle;
 margin-right: 10px;
}

.modo-sabiduria-activo .eVariant input[type="radio"]:checked {
 background: radial-gradient(circle, #fff 0%, #ffd700 60%);
 box-shadow: 0 0 15px #ffd700, inset 0 0 5px #000;
 border-color: #fff !important;
}

.modo-sabiduria-activo .eVariant label {
 font-family: 'Cinzel', serif;
 color: #e0e0e0;
 font-size: 1rem;
 transition: all 0.2s;
}

.modo-sabiduria-activo .eVariant:hover label {
 color: #ffd700 !important;
 transform: translateX(5px);
}

.modo-sabiduria-activo #TstSbm {
 background: rgba(0, 0, 0, 0.8) !important;
 border: 2px solid #ffd700 !important;
 color: #ffd700 !important;
 padding: 12px 30px !important;
 text-transform: uppercase;
 font-weight: bold;
 letter-spacing: 2px;
 border-radius: 4px !important;
 box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.modo-sabiduria-activo #TstSbm:hover:not(:disabled) {
 background: #ffd700 !important;
 color: #000 !important;
 box-shadow: 0 0 25px rgba(255, 215, 0, 0.7) !important;
 transform: translateY(-3px);
}

.modo-sabiduria-activo #TstSbm:disabled {
 filter: grayscale(1);
 opacity: 0.5 !important;
 cursor: wait !important;
}

.modo-dados-activo label:has(.modal) {
 display: block !important;
 font-size: 0 !important;
 opacity: 1 !important;
 pointer-events: auto !important;
}

.form-control, .form-select {
 background-color: rgba(255, 255, 255, 0.05) !important;
 border: 1px solid var(--bs-border-color) !important;
 color: var(--bs-body-color) !important;
 transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
 background-color: rgba(0, 0, 0, 0.2) !important;
 border-color: var(--ao-gold) !important;
 box-shadow: 0 0 15px rgba(184, 134, 11, 0.3) !important;
 color: var(--ao-gold-light) !important;
}

.gTable {
 border: none !important;
 border-collapse: separate; 
 border-spacing: 0;
 width: 100%;
}

.forum-section-table {
 border-collapse: separate !important; 
 border-spacing: 0 12px !important;
 background: transparent !important;
 border: none !important;
}

.gTableTop, .postTdTop, .forumThreadTdTop {
 background: linear-gradient(90deg, #1a0505 0%, #2e1a0f 50%, #1a0505 100%) !important;
 border-top: 2px solid var(--bs-primary) !important; 
 border-bottom: 2px solid var(--bs-primary) !important;
 color: var(--bs-primary) !important; 
 text-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.5);
 padding: 15px 20px !important;
 border-radius: 8px;
}

.gTableTop img {
 width: 30px !important; height: 30px !important; object-fit: contain;
 vertical-align: middle; margin-right: 10px; display: inline-block;
 filter: drop-shadow(0 0 5px var(--bs-primary)); 
 animation: floatIcon 3s ease-in-out infinite;
}

.gTableSubTop {
 background-color: transparent !important; 
 color: var(--bs-secondary-color) !important;
 font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 1px;
 text-transform: uppercase; border: none !important;
 padding: 0 10px 5px 10px !important; opacity: 0.7;
}

.forumContent td {
 background: var(--bs-card-bg);
 border-top: 1px solid var(--bs-border-color);
 border-bottom: 1px solid var(--bs-border-color);
 padding: 15px !important;
 transition: all 0.2s ease;
}

.forumContent td:first-child { border-radius: 10px 0 0 10px; border-left: 1px solid var(--bs-border-color); }
.forumContent td:last-child { border-radius: 0 10px 10px 0; border-right: 1px solid var(--bs-border-color); }

.forumIcoTd {
 border-left: 5px solid var(--bs-primary) !important; 
 width: 70px; text-align: center;
 background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.1), transparent) !important;
}
.forumIcoTd img { transition: transform 0.3s ease; }

tr.forumContent:hover td {
 background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
 border-top-color: var(--bs-primary) !important;
 border-bottom-color: var(--bs-primary) !important;
}

tr.forumContent:hover td:first-child { border-left-color: var(--bs-primary) !important; }
tr.forumContent:hover td:last-child { border-right-color: var(--bs-primary) !important; }

tr.forumContent:hover .forumIcoTd img {
 transform: scale(1.15) rotate(-5deg);
 filter: drop-shadow(0 0 5px var(--bs-primary));
}

tr.forumContent:hover .forumNameTd .forum {
 color: var(--bs-primary);
 text-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.4);
}

.forumThreadTd, .forumPostTd {
 text-align: center; font-weight: bold; font-family: 'Cinzel', serif;
 font-size: 1.1rem; color: var(--bs-body-color);
}
tr.forumContent:hover .forumThreadTd, 
tr.forumContent:hover .forumPostTd {
 color: var(--bs-primary);
}

.dragon-orb {
 display: inline-block; width: 12px; height: 12px;
 background-color: var(--magic-primary); border-radius: 50%;
 box-shadow: 0 0 8px var(--magic-primary);
 animation: orbPulse 2s infinite alternate; margin-right: 5px;
}
.avatar-online img { border: 2px solid #28c76f; animation: pulseGreen 2s infinite cubic-bezier(0.66, 0, 0, 1); border-radius: 50%; }

.logo-light { display: block !important; }
.logo-dark { display: none !important; }
[data-bs-theme="dark"] .logo-light { display: none !important; }
[data-bs-theme="dark"] .logo-dark { display: block !important; }

.logo-JuegosDrag-wrapper {
 display: flex; align-items: center; justify-content: center;
 padding: 10px 0;
 filter: drop-shadow(0 0 5px rgba(var(--bs-primary-rgb), 0.3));
 transition: transform 0.3s ease;
}
.logo-JuegosDrag-wrapper:hover {
 transform: scale(1.05);
 filter: drop-shadow(0 0 15px var(--bs-primary));
}

#layout-menu, .layout-menu, aside.bg-menu-theme {
 background: linear-gradient(180deg, var(--bs-body-bg) 0%, rgba(var(--bs-primary-rgb), 0.05) 100%) !important;
 border-right: 3px solid var(--bs-primary) !important;
 box-shadow: 5px 0 20px rgba(0,0,0,0.1) !important;
}

#layout-menu::before, .layout-menu::before {
 content: "";
 position: absolute; top: 0; left: 0; width: 100%; height: 100%;
 pointer-events: none; z-index: 0;
 background-image: 
 radial-gradient(rgba(var(--bs-primary-rgb), 0.4) 1.5px, transparent 1.5px),
 radial-gradient(rgba(255, 69, 0, 0.3) 1px, transparent 1px);
 background-size: 60px 60px;
 background-position: 0 0, 30px 30px;
 animation: dragonAsh 8s linear infinite; opacity: 0.6;
}

.app-brand, .menu-inner { position: relative; z-index: 2; }
.app-brand { border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.1); }
.content-wrapper { background-color: var(--bs-body-bg) !important; }

.menu-link {
 color: var(--bs-body-color) !important;
 font-family: 'Cinzel', serif !important;
 transition: all 0.3s ease;
 border-radius: 0 20px 20px 0 !important;
 margin-right: 10px; z-index: 2;
 opacity: 0.8;
}

.menu-icon, .menu-link i {
 color: var(--bs-secondary-color) !important;
 transition: all 0.3s ease;
}

.menu-item:hover > .menu-link {
 background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
 color: var(--bs-primary) !important;
 transform: translateX(5px);
 opacity: 1;
}

.menu-item:hover > .menu-link .menu-icon, 
.menu-item:hover > .menu-link i {
 color: var(--bs-primary) !important;
}

.menu-item.active > .menu-link {
 background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.25), transparent) !important;
 border-left: 4px solid var(--bs-primary) !important;
 color: var(--bs-primary) !important;
 font-weight: bold;
 opacity: 1;
 text-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.4);
}

.menu-item.active > .menu-link .menu-icon, 
.menu-item.active > .menu-link i {
 color: var(--bs-primary) !important;
 transform: scale(1.1);
}

.menu-header { color: var(--bs-secondary-color) !important; opacity: 0.6; font-weight: 700; margin-top: 1rem; }

.navbar, .layout-navbar {
 background-color: var(--bs-card-bg, #ffffff) !important;
 border-bottom: 3px solid var(--bs-primary) !important;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
 backdrop-filter: blur(10px);
}
[data-bs-theme="dark"] .navbar, [data-bs-theme="dark"] .layout-navbar {
 background-color: #1a1a1a !important;
}

.navbar-nav .nav-link {
 font-family: 'Cinzel', serif !important; font-weight: 700;
 text-transform: uppercase; letter-spacing: 1px;
 position: relative; transition: all 0.3s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
 color: var(--bs-primary) !important;
 text-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.4);
}

.dropdown-menu {
 border: 1px solid var(--bs-primary) !important;
 border-top: 4px solid var(--bs-primary) !important; 
 box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
 animation: slideInMagic 0.3s ease-out;
}
.dropdown-item:hover {
 background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
 color: var(--bs-primary) !important; padding-left: 25px;
}

.btn-primary {
 background: linear-gradient(180deg, var(--magic-primary) 0%, var(--ao-gold-dark) 100%) !important;
 border: 1px solid var(--ao-gold-light) !important;
 border-top: 1px solid #ffeebb !important; 
 color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
 box-shadow: 0 4px 6px rgba(0,0,0,0.2);
 font-family: 'Cinzel', serif; font-weight: 700;
}
.btn-primary:hover {
 background: linear-gradient(180deg, var(--magic-gold) 0%, var(--ao-gold) 100%) !important;
 box-shadow: 0 0 15px var(--ao-gold);
 color: #3e2723 !important;
}
.btn-secondary, .btn-outline-secondary {
 background: var(--bs-body-bg) !important;
 border: 1px solid var(--bs-border-color) !important;
 color: var(--bs-body-color) !important; font-family: 'Cinzel', serif;
}

.rpg-loot-card {
 background-color: var(--bs-card-bg, #fff); 
 color: var(--bs-body-color, #333);
 border: 1px solid var(--bs-border-color, rgba(0,0,0,0.1));
 padding: 1rem; margin-bottom: 1rem; border-radius: 0.5rem;
 border-left: 4px solid var(--ao-gold, #b8860b); 
 display: flex; align-items: center; position: relative; overflow: hidden;
}
[data-bs-theme="dark"] .rpg-loot-card .text-white { color: var(--ao-gold-light) !important; }
.rpg-loot-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: var(--ao-gold); }
.rpg-title { font-size: 1rem; color: inherit; text-decoration: none; font-weight: bold; }
[data-bs-theme="dark"] .rpg-title:hover { color: #fff; text-shadow: 0 0 5px var(--ao-gold); }
.rpg-price { font-size: 1.2rem; color: var(--ao-blood); text-align: right; }
[data-bs-theme="dark"] .rpg-price { color: var(--magic-gold); text-shadow: 0 0 10px rgba(255, 69, 0, 0.5); }

@keyframes orbPulse { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 12px var(--magic-primary); } 100% { transform: scale(0.95); opacity: 0.8; } }
@keyframes pulseGreen { to { box-shadow: 0 0 0 10px rgba(40, 199, 111, 0); } }
@keyframes dragonAsh { 0% { background-position: 0 0, 30px 30px; } 100% { background-position: 0 -60px, 30px -30px; } }
@keyframes slideInMagic { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.u-ranking-table { counter-reset: rank-counter; }
.u-entry-row { counter-increment: rank-counter; }
.rank-number::before { content: counter(rank-counter); font-weight: 900; font-size: 1.2rem; color: var(--bs-primary); }
.u-entry-row:nth-child(1) .rank-number::before { color: #FFD700; content: "🥇 " counter(rank-counter); }
.u-entry-row:nth-child(2) .rank-number::before { color: #C0C0C0; content: "🥈 " counter(rank-counter); }
.u-entry-row:nth-child(3) .rank-number::before { color: #CD7F32; content: "🥉 " counter(rank-counter); }

div:where(.swal2-container) {
 z-index: 9999 !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
 background-color: #1a1a1a !important; 
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
 border: 2px solid var(--ao-gold) !important;
 border-radius: 4px !important; 
 box-shadow: 0 0 30px rgba(0,0,0,0.9), inset 0 0 20px rgba(0,0,0,0.5) !important;
 color: var(--bs-body-color) !important;
}

div:where(.swal2-container) .swal2-title {
 font-family: 'Cinzel', serif !important;
 color: var(--magic-gold) !important;
 text-shadow: 0 0 10px rgba(255, 69, 0, 0.4);
 text-transform: uppercase;
 font-size: 1.8em !important;
}

div:where(.swal2-container) .swal2-html-container {
 color: #e0e0e0 !important;
 font-family: 'Segoe UI', sans-serif !important;
 opacity: 1 !important;
}

div:where(.swal2-icon).swal2-success {
 border-color: #28c76f !important; color: #28c76f !important;
 box-shadow: 0 0 15px rgba(40, 199, 111, 0.3);
}
div:where(.swal2-icon).swal2-error {
 border-color: var(--ao-blood) !important; color: var(--ao-blood) !important;
 box-shadow: 0 0 15px rgba(90, 10, 10, 0.5);
}
div:where(.swal2-icon).swal2-warning {
 border-color: var(--magic-gold) !important; color: var(--magic-gold) !important;
}

div:where(.swal2-container) button.swal2-confirm {
 background: linear-gradient(180deg, var(--magic-primary) 0%, var(--ao-gold-dark) 100%) !important;
 border: 1px solid var(--ao-gold-light) !important;
 font-family: 'Cinzel', serif !important;
 font-weight: 700 !important;
 box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
}
div:where(.swal2-container) button.swal2-confirm:hover {
 box-shadow: 0 0 20px var(--ao-gold) !important; transform: scale(1.05);
}

div:where(.swal2-container) button.swal2-cancel {
 background: transparent !important;
 border: 1px solid var(--bs-secondary-color) !important;
 color: #ccc !important;
 font-family: 'Cinzel', serif !important;
}
div:where(.swal2-container) button.swal2-cancel:hover {
 background: rgba(255,255,255,0.1) !important; color: #fff !important;
}

.apexcharts-tooltip {
 background-color: rgba(20, 20, 20, 0.95) !important;
 border: 1px solid var(--ao-gold) !important;
 box-shadow: 0 0 15px rgba(0,0,0,0.8) !important;
 color: var(--ao-gold-light) !important;
 border-radius: 4px !important;
 font-family: 'Cinzel', serif !important;
}

.apexcharts-tooltip-title {
 background: linear-gradient(90deg, #2e1a0f, #1a0505) !important;
 border-bottom: 1px solid var(--ao-gold-dark) !important;
 font-family: 'Cinzel', serif !important;
 color: var(--magic-gold) !important;
 text-transform: uppercase;
}

.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-y-label {
 color: #fff !important;
}

.apexcharts-tooltip-marker {
 box-shadow: 0 0 5px var(--magic-primary) !important;
}

.apexcharts-text {
 fill: var(--bs-body-color) !important;
 font-family: 'Cinzel', serif !important;
 font-weight: 700 !important;
 filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
[data-bs-theme="dark"] .apexcharts-text {
 fill: var(--ao-gold-light) !important;
 filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}
.mission-card-levitate {
 background-color: #1e1e2d !important;
 border: 1px solid rgba(115, 103, 240, 0.15) !important;
 border-radius: 12px !important;
 overflow: hidden !important;
 position: relative !important;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
 min-height: 380px;
 display: flex !important;
 flex-direction: column !important;
}

.mission-card-levitate:hover {
 transform: translateY(-8px) !important;
 border-color: #7367f0 !important;
 box-shadow: 0 12px 30px rgba(115, 103, 240, 0.25) !important;
 z-index: 10;
}

.mission-card-levitate .rounded-3.overflow-hidden {
 height: 180px;
 background: #0b0b15;
 position: relative;
 border-radius: 12px 12px 0 0 !important;
}

.mission-card-levitate img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.5s ease;
}

.mission-card-levitate:hover img {
 transform: scale(1.1);
}

.mission-completed-badge {
 position: absolute !important;
 top: 10px !important;
 right: 10px !important;
 width: 40px !important;
 height: 40px !important;
 background: #28c76f !important;
 color: white !important;
 border-radius: 50% !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 z-index: 20 !important;
 box-shadow: 0 0 10px rgba(40, 199, 111, 0.8) !important;
 border: 2px solid #fff !important;
 font-size: 1.2rem !important;
}

.mission-card-levitate h5 {
 font-family: 'Cinzel', serif !important;
 color: #fff !important;
 margin-bottom: 10px !important;
 font-size: 1.1rem !important;
 font-weight: 700 !important;
 line-height: 1.4;
}

.glow-text {
 text-shadow: 0 0 5px currentColor;
 font-weight: bold;
 text-transform: uppercase;
 font-size: 0.75rem !important;
}

.text-truncate-2 {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 min-height: 3rem;
}

.mission-card-levitate .progress {
 background-color: #333 !important;
 border-radius: 4px;
 overflow: hidden;
 height: 6px !important;
}

.mission-card-levitate .progress-bar {
 background-color: #28c76f !important;
 box-shadow: 0 0 10px rgba(40, 199, 111, 0.5);
}

.track-mission {
 transition: all 0.3s ease;
 text-transform: uppercase;
 font-weight: bold;
 letter-spacing: 1px;
 border-radius: 6px;
}

.track-mission:hover {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(115, 103, 240, 0.4);
}

.border-success-glow {
 border-color: #28c76f !important;
 box-shadow: 0 0 15px rgba(40, 199, 111, 0.2) !important;
}

#misiones-container + #universal-storage:not(.game-active-mode) {
 display: none !important;
}
#misiones-container:not(:empty) + #universal-storage {
 display: none !important;
}
#BotonArcano,#startArcaneBtn{display:none!important}
/* Oculta el primer carácter (el número) en los títulos de las misiones */
#mission-grid h5::first-letter {
 font-size: 0 !important;
 color: transparent !important;
 display: inline-block; /* Asegura que el tamaño 0 funcione */
 margin-right: -2px; /* Ajuste fino para que no quede espacio */
}