/* Crafteos — estilos de temporada (los elige el admin en el panel) */
.theme-badge { font-style: normal; font-size: 22px; margin-left: -2px; display: inline-block; animation: tbob 2.4s ease-in-out infinite; }
@keyframes tbob { 50% { transform: translateY(-3px) rotate(-8deg); } }
main { position: relative; z-index: 2; }

/* ---------- Guirnalda bajo la cabecera ---------- */
#themeGarland { position: absolute; left: 0; right: 0; bottom: -26px; height: 28px; pointer-events: none; overflow: hidden; }
.garland-row { display: flex; gap: 26px; padding: 3px 12px 0; white-space: nowrap; animation: gslide 60s linear infinite; width: max-content; }
.garland-row .ico { filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.garland-row .ico:nth-child(odd) { transform: translateY(3px) rotate(-6deg); }
.garland-row .ico:nth-child(even) { transform: rotate(5deg); }
@keyframes gslide { to { transform: translateX(-50%); } }
.lights { position: absolute; top: -6px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 6px; }
.lights::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: #1f2a1f; }
.lights i { position: relative; width: 8px; height: 12px; margin-top: 5px; border-radius: 50% 50% 45% 45%; background: var(--c, #ff4d4d); box-shadow: 0 0 8px 2px var(--c, #ff4d4d); animation: blink 1.6s ease-in-out infinite; animation-delay: var(--d); }
.lights i:nth-child(4n+1) { --c: #ff4d4d; } .lights i:nth-child(4n+2) { --c: #ffd54f; } .lights i:nth-child(4n+3) { --c: #4fc3f7; } .lights i:nth-child(4n) { --c: #66e07a; }
@keyframes blink { 50% { opacity: .35; box-shadow: 0 0 2px 0 var(--c); } }
body[data-theme="navidad"] .garland-row { padding-top: 9px; }
body[data-theme="navidad"] #themeGarland { height: 36px; bottom: -34px; }

/* ---------- Cartel de bienvenida ---------- */
.theme-hero { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; max-width: 1180px; margin: 40px auto -10px; padding: 14px 52px 14px 18px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--green) 18%, var(--panel)), var(--panel) 70%); box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--green) 80%, transparent); width: calc(100% - 32px); }
.theme-hero > div { flex: 1; display: flex; flex-direction: column; }
.theme-hero b { font: 700 22px var(--pixel); color: color-mix(in srgb, var(--green) 70%, #fff); }
.theme-hero span:not(.ico) { color: #c5ccd4; font-size: 14px; }
.theme-hero .ico { animation: tbob 3s ease-in-out infinite; }
.theme-hero > .ico:last-of-type { animation-delay: -1.5s; }
.theme-hero button { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--muted); }
.theme-hero button:hover { color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 620px) { .theme-hero { margin-top: 36px; } .theme-hero > .ico:last-of-type { display: none; } .theme-hero b { font-size: 18px; } }

/* ---------- Paisaje y cielo ---------- */
#themeScene { position: fixed; left: 0; right: 0; bottom: 0; height: 220px; z-index: 0; pointer-events: none; }
#themeScene svg { width: 100%; height: 100%; display: block; }
#themeSky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.moon { position: absolute; top: 110px; right: 6vw; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d6, #f3d98a 55%, #c9a64f); box-shadow: 0 0 60px 20px rgba(255,214,120,.18), 0 0 160px 60px rgba(140,60,200,.12); opacity: .55; }
.moon::before, .moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(150,110,40,.25); }
.moon::before { width: 22px; height: 22px; top: 30px; left: 62px; }
.moon::after { width: 14px; height: 14px; top: 70px; left: 34px; }
.star { position: absolute; top: 110px; right: 7vw; width: 70px; height: 70px; background: #ffd54f; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 18px rgba(255,213,79,.8)); opacity: .5; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; transform: scale(.92) rotate(6deg); } }
.bigheart { position: absolute; top: 100px; right: 6vw; font-size: 110px; opacity: .22; filter: blur(.5px) drop-shadow(0 0 30px rgba(255,92,154,.7)); animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.05); } 60% { transform: scale(1); } }
@media (max-width: 800px) { .moon, .star, .bigheart { display: none; } #themeScene { height: 140px; } }

/* ---------- Partículas ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
#fx span { position: absolute; top: -40px; animation: fall linear infinite; will-change: transform; line-height: 1; }
#fx.up span { animation-name: rise; top: auto; bottom: -40px; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(260deg); } }
@keyframes rise { to { transform: translate(var(--drift), -115vh) rotate(-20deg); } }
body[data-theme="navidad"] #fx span { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6); }
.burst { position: fixed; z-index: 95; pointer-events: none; font-size: 20px; transform: translate(-50%, -50%); animation: burst .9s ease-out forwards; }
@keyframes burst { to { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(.6); opacity: 0; } }

/* ---------- Halloween ---------- */
body[data-theme="halloween"] {
  --green: #ff8a1f; --green-d: #d4610a; --gold: #ffb347;
  background-color: #0d0a12;
  background-image: radial-gradient(60% 40% at 50% -10%, rgba(255,138,31,.16), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(140,60,200,.18), transparent 70%);
}
body[data-theme="halloween"] .brand span:last-child { background-image: linear-gradient(180deg, #ffc56b, #ff7a00); }
body[data-theme="halloween"] .primary-btn { background: linear-gradient(180deg, #ffa24d, #d4610a); color: #2a1200; box-shadow: 0 4px 0 #8a3c00, 0 10px 24px -10px rgba(255,138,31,.7); }
body[data-theme="halloween"] .seg button.active { background: rgba(255,138,31,.16); color: #ffd3a3; }
body[data-theme="halloween"] .pcard, body[data-theme="halloween"] .auth-card, body[data-theme="halloween"] .inventory { border-color: rgba(160,90,220,.28); }
body[data-theme="halloween"] .inventory, body[data-theme="halloween"] .auth-card, body[data-theme="halloween"] .login-wall { background-image: radial-gradient(70% 40% at 100% 0%, rgba(140,60,200,.12), transparent 70%); }
body[data-theme="halloween"] .inventory::after, body[data-theme="halloween"] .login-wall::after { content: "🕸️"; position: absolute; top: -6px; right: -4px; font-size: 34px; opacity: .55; transform: rotate(15deg); pointer-events: none; }
body[data-theme="halloween"] .login-wall { position: relative; }

/* ---------- Navidad ---------- */
body[data-theme="navidad"] {
  --green: #3ccf6a; --green-d: #c62828; --gold: #ffd54f;
  background-color: #0b1014;
  background-image: radial-gradient(60% 40% at 50% -10%, rgba(230,57,70,.16), transparent 70%), radial-gradient(40% 30% at 0% 100%, rgba(60,207,106,.10), transparent 70%);
}
body[data-theme="navidad"] .brand span:last-child { background-image: repeating-linear-gradient(135deg, #ff5a5a 0 8px, #ffffff 8px 16px); }
body[data-theme="navidad"] .primary-btn { background: linear-gradient(180deg, #ff5a5a, #c62828); color: #fff; box-shadow: 0 4px 0 #7f1414, 0 10px 24px -10px rgba(230,57,70,.7); }
body[data-theme="navidad"] .seg button.active { background: rgba(230,57,70,.16); color: #ffc9c9; }
/* Nieve encima de los paneles */
body[data-theme="navidad"] :is(.inventory, .auth-card, .pcard, .login-wall, .champ-intro, .champ-summary, .adm-chat) { position: relative; }
body[data-theme="navidad"] .inventory { position: sticky; }
body[data-theme="navidad"] :is(.inventory, .auth-card, .pcard, .login-wall, .champ-intro, .champ-summary, .adm-chat)::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: -7px; height: 14px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 8px 9px, #f4f8fc 7px, transparent 8px) 0 0 / 16px 14px repeat-x, linear-gradient(#f4f8fc, #f4f8fc) 0 0 / 100% 6px no-repeat;
  border-radius: 8px 8px 0 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

/* ---------- San Valentín ---------- */
body[data-theme="sanvalentin"] {
  --green: #ff5c9a; --green-d: #d81b60; --gold: #ff9ec4;
  background-color: #120b10;
  background-image: radial-gradient(60% 40% at 50% -10%, rgba(255,92,154,.18), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(255,92,154,.08), transparent 70%);
}
body[data-theme="sanvalentin"] .brand span:last-child { background-image: linear-gradient(180deg, #ffc1d9, #ff4f8f); }
body[data-theme="sanvalentin"] .primary-btn { background: linear-gradient(180deg, #ff86b4, #d81b60); color: #fff; box-shadow: 0 4px 0 #880e4f, 0 10px 24px -10px rgba(255,92,154,.7); }
body[data-theme="sanvalentin"] .seg button.active { background: rgba(255,92,154,.16); color: #ffd0e2; }
body[data-theme="sanvalentin"] .pcard, body[data-theme="sanvalentin"] .auth-card, body[data-theme="sanvalentin"] .inventory { border-color: rgba(255,92,154,.25); }
body[data-theme="sanvalentin"] .inventory::after { content: "💌"; position: absolute; top: -12px; right: 14px; font-size: 26px; transform: rotate(12deg); pointer-events: none; }

/* Pestañas y detalles con el color del tema */
body[data-theme]:not([data-theme="normal"]) .game-tabs button[data-game="craft"].active,
body[data-theme]:not([data-theme="normal"]) .main-tabs a.active { background: color-mix(in srgb, var(--green) 16%, transparent); border-color: color-mix(in srgb, var(--green) 50%, transparent); color: #fff; }
body[data-theme]:not([data-theme="normal"]) .target-slot .q { color: var(--green); text-shadow: 0 0 20px color-mix(in srgb, var(--green) 50%, transparent); }

@media (prefers-reduced-motion: reduce) { .theme-badge, .garland-row, .lights i, .star, .bigheart, .theme-hero .ico { animation: none; } }