/* MU Eclipse - estilos de las secciones "100% MU" */

/* ---------- Cursor de espada (solo mouse) ---------- */
@media (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%238d93a3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 1l6 1.5L21.5 17 17 21.5 2.5 7z' fill='url(%23b)' stroke='%2314101c' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M15.5 24.5l9-9' stroke='%2314101c' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M15.5 24.5l9-9' stroke='%23d9b45a' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M21 21l5.5 5.5' stroke='%2314101c' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='M21 21l5.5 5.5' stroke='%237a4a22' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='28' r='2.4' fill='%23f3dd9a' stroke='%2314101c' stroke-width='1'/%3E%3C/svg%3E") 1 1, auto; }
  a, button, summary, label[for], [role="button"], .cursor-pointer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6d8'/%3E%3Cstop offset='1' stop-color='%23d9b45a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 1l6 1.5L21.5 17 17 21.5 2.5 7z' fill='url(%23b)' stroke='%23ff7a1a' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M15.5 24.5l9-9' stroke='%2314101c' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M15.5 24.5l9-9' stroke='%23ffcf6a' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M21 21l5.5 5.5' stroke='%2314101c' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='M21 21l5.5 5.5' stroke='%23b3122e' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='28' r='2.4' fill='%23ff7a1a' stroke='%2314101c' stroke-width='1'/%3E%3C/svg%3E") 1 1, pointer !important;
  }
  input, textarea { cursor: text; }
}

/* ---------- Seleccion de personaje ---------- */
.cs-bg { background: radial-gradient(60% 55% at 30% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(180deg, #07060b, #0c0a12 50%, #07060b); transition: background .6s; }
.cs-medal { position: relative; width: 4.25rem; height: 4.25rem; border-radius: 9999px; padding: 3px; background: linear-gradient(160deg, #6b5426, #2a2112 60%, #8a6a2a);
  box-shadow: 0 0 0 1px #000, 0 8px 18px -8px #000; transition: transform .3s, box-shadow .3s, filter .3s; filter: grayscale(.65) brightness(.75); }
.cs-medal img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.cs-medal:hover { filter: none; transform: translateY(-3px); }
.cs-medal.on { filter: none; transform: translateY(-4px) scale(1.06); background: linear-gradient(160deg, #fbe7a8, #d9b45a 45%, #8a6a2a);
  box-shadow: 0 0 0 1px #000, 0 0 26px color-mix(in srgb, var(--c) 70%, transparent), 0 10px 22px -8px #000; }
.cs-portrait { position: relative; aspect-ratio: 1; border-radius: .75rem; overflow: hidden; border: 1px solid rgba(217, 180, 90, .45);
  box-shadow: 0 0 0 1px #000, 0 0 60px -10px color-mix(in srgb, var(--c) 60%, transparent), 0 30px 60px -25px #000; }
.cs-portrait img { width: 100%; height: 100%; object-fit: cover; animation: csIn .7s cubic-bezier(.2, .7, .2, 1) both; }
.cs-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 6, 11, .85), transparent 45%), radial-gradient(circle at 50% 35%, transparent 45%, rgba(7, 6, 11, .55)); }
@keyframes csIn { from { opacity: 0; transform: scale(1.12); filter: brightness(2) blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.cs-info { animation: csInfo .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes csInfo { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.cs-bar { height: .45rem; border-radius: 9999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.cs-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a6a2a, var(--c)); box-shadow: 0 0 10px var(--c); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.cs-evo { border: 1px solid rgba(217, 180, 90, .3); background: rgba(0, 0, 0, .35); }
.cs-evo.last { border-color: var(--c); color: #fff; box-shadow: 0 0 16px -4px var(--c); }

/* ---------- Mapa del continente ---------- */
.world-map { position: relative; border-radius: .75rem; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 50%, rgba(217, 180, 90, .09), transparent 70%), radial-gradient(40% 40% at 15% 55%, rgba(76, 195, 255, .10), transparent 70%),
    radial-gradient(35% 35% at 85% 15%, rgba(179, 18, 46, .14), transparent 70%), #0a0910; }
.world-map::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(217, 180, 90, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 180, 90, .08) 1px, transparent 1px); background-size: 40px 40px; }
.world-route { stroke: rgba(217, 180, 90, .4); stroke-width: 1.4; stroke-dasharray: 4 6; fill: none; animation: wRoute 30s linear infinite; }
@keyframes wRoute { to { stroke-dashoffset: -200; } }
.world-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .25rem; }
.world-dot { width: .9rem; height: .9rem; border-radius: 9999px; background: var(--d); box-shadow: 0 0 0 3px rgba(0, 0, 0, .7), 0 0 14px var(--d); transition: transform .25s; }
.world-node:hover .world-dot, .world-node.on .world-dot { transform: scale(1.45); }
.world-node.on .world-dot { animation: wPulse 1.6s ease-out infinite; }
@keyframes wPulse { 0% { box-shadow: 0 0 0 3px rgba(0, 0, 0, .7), 0 0 0 0 var(--d); } 100% { box-shadow: 0 0 0 3px rgba(0, 0, 0, .7), 0 0 0 14px transparent; } }
.world-name { font-family: Cinzel, serif; font-size: .68rem; letter-spacing: .06em; white-space: nowrap; color: rgba(236, 230, 214, .8); text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.world-node.on .world-name, .world-node:hover .world-name { color: #f3dd9a; }
.world-compass { position: absolute; right: 1rem; bottom: 1rem; width: 3.5rem; height: 3.5rem; opacity: .5; animation: spin 90s linear infinite; }
@media (max-width: 639px) { .world-name { font-size: .58rem; } .world-dot { width: .7rem; height: .7rem; } }

/* ---------- Armeria ---------- */
.arm-card { --g: #6cff6c; position: relative; aspect-ratio: 1; border-radius: .6rem; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--g) 16%, transparent), transparent 62%), linear-gradient(180deg, rgba(24, 20, 32, .92), rgba(10, 9, 15, .94));
  border: 1px solid rgba(217, 180, 90, .3); transition: border-color .3s, box-shadow .3s; }
.arm-card.s380 { --g: #ff8cf0; } .arm-card.elite { --g: #ffb347; }
.arm-card img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .8)) drop-shadow(0 0 12px color-mix(in srgb, var(--g) 35%, transparent));
  animation: armFloat 5s ease-in-out infinite; transition: transform .4s; }
.arm-card:nth-child(2n) img { animation-delay: -2.5s; }
@keyframes armFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.arm-card:hover { border-color: var(--g); box-shadow: 0 0 0 1px color-mix(in srgb, var(--g) 50%, transparent), 0 0 30px -6px var(--g); }
.arm-card:hover img { transform: scale(1.1) rotate(-4deg); }
.arm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%); transform: translateX(-100%); transition: transform .8s; }
.arm-card:hover::after { transform: translateX(100%); }
.arm-name { position: absolute; left: 0; right: 0; bottom: .5rem; text-align: center; font-size: .72rem; font-weight: 600; color: var(--g); text-shadow: 0 1px 2px #000; padding: 0 .4rem; }

/* Tooltip estilo item del juego */
.mu-tip { position: fixed; z-index: 70; width: 280px; pointer-events: none; text-align: center; padding: .8rem 1rem; font-size: .8rem; line-height: 1.6;
  background: rgba(2, 2, 6, .94); border: 1px solid rgba(170, 150, 100, .55); box-shadow: inset 0 0 0 1px #000, 0 12px 30px -10px #000; }
.mu-tip .t-exc { color: #6cff6c; } .mu-tip .t-s380 { color: #ff8cf0; } .mu-tip .t-elite { color: #ffb347; }
.mu-tip .t-opt { color: #8c9cff; } .mu-tip .t-req { color: #b3a990; } .mu-tip .t-white { color: #f2f2f2; }

/* ---------- Boton de sonido ---------- */
.snd-btn { position: fixed; left: 1rem; bottom: 1rem; z-index: 40; width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: grid; place-items: center;
  background: rgba(10, 8, 14, .8); border: 1px solid rgba(217, 180, 90, .45); color: #f3dd9a; backdrop-filter: blur(6px); transition: box-shadow .25s, border-color .25s; }
.snd-btn:hover { border-color: #d9b45a; box-shadow: 0 0 18px rgba(217, 180, 90, .35); }

/* ---------- Intro del eclipse ---------- */
#mu-intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #050408; transition: opacity .7s, visibility .7s; }
#mu-intro[hidden] { display: none; }
#mu-intro.out { opacity: 0; visibility: hidden; }
.intro-sun { position: relative; width: 9rem; height: 9rem; border-radius: 9999px; background: radial-gradient(circle, #fff6d8, #f3dd9a 40%, #ff7a1a 75%);
  box-shadow: 0 0 60px 20px rgba(255, 170, 70, .55), 0 0 140px 50px rgba(179, 18, 46, .35); animation: introSun 2.2s ease-in-out both; }
.intro-moon { position: absolute; inset: -1px; border-radius: 9999px; background: #050408; animation: introMoon 1.6s cubic-bezier(.5, 0, .2, 1) both; }
.intro-name { margin-top: 2.5rem; opacity: 0; animation: introName .9s .9s ease-out forwards; }
@keyframes introMoon { from { transform: translateX(150%); } to { transform: none; } }
@keyframes introSun { 0% { box-shadow: 0 0 40px 10px rgba(255, 170, 70, .4); } 75% { box-shadow: 0 0 90px 34px rgba(255, 190, 90, .75), 0 0 200px 80px rgba(179, 18, 46, .45); } 100% { box-shadow: 0 0 70px 26px rgba(255, 170, 70, .6), 0 0 160px 60px rgba(179, 18, 46, .4); } }
@keyframes introName { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .15em; } }

@media (prefers-reduced-motion: reduce) {
  .arm-card img, .world-compass, .world-node.on .world-dot { animation: none; }
}

/* Popup: arte completo en banner con sombra suave */
.wk-art { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7)); }

/* Mapa: guerreros conectados por mapa */
.world-live { font-size: .62rem; font-weight: 700; line-height: 1; padding: .15rem .35rem; border-radius: 9999px; color: #06281b;
  background: linear-gradient(180deg, #8ff5c4, #34d399); box-shadow: 0 0 10px rgba(52, 211, 153, .6); white-space: nowrap; }