/* Tema temporal de Halloween: mantiene la estructura del portal y reemplaza su acento frío. */
:root {
  --halloween-ink: #160d18;
  --halloween-night: #241326;
  --halloween-plum: #3c1c3b;
  --halloween-orange: #ff7a18;
  --halloween-gold: #ffb12b;
  --halloween-cream: #fff1d6;
  --halloween-muted: #d99b77;
  --halloween-line: rgba(255, 143, 35, .38);
}

html { background: #130b17; }

body {
  color: #f3d9bd;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(255, 122, 24, .24), transparent 43%),
    radial-gradient(ellipse at 0% 42%, rgba(104, 43, 89, .40), transparent 38%),
    linear-gradient(180deg, rgba(27, 10, 30, .80), rgba(13, 7, 15, .90)),
    url('../img/top-fon-home.jpg') center top / auto no-repeat,
    url('../img/bottom-fon-home-1.jpg') center bottom / auto no-repeat;
  background-color: #160b19;
  background-blend-mode: screen, screen, normal, luminosity, luminosity;
}

a { color: var(--halloween-orange); }
a:hover { color: var(--halloween-gold); }
h1, h2, h3, h4 { color: var(--halloween-cream); }

.topPanel {
  border-bottom: 1px solid rgba(255, 138, 35, .24);
  background: linear-gradient(180deg, rgba(20, 8, 24, .92), rgba(20, 8, 24, .45));
  box-shadow: 0 7px 24px rgba(0, 0, 0, .22);
}
.topPanel:hover { background-color: rgba(38, 13, 35, .92); }
.menu a { color: #f0c6a0; }
.menu a:hover, .menu .active a { color: #fff4de; background: linear-gradient(to bottom, rgba(255, 121, 24, .28), transparent); }
.menu a:hover:after, .menu .active a:after { background: var(--halloween-orange); }

.button, button, .button-small, .white-card-action, .billing-button {
  border: 1px solid #ff9b32 !important;
  color: #fff8e9 !important;
  background-color: #71301c !important;
  background-image: linear-gradient(135deg, #bd4b1e, #662043) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.27);
}
.button:hover, button:hover, .button-small:hover, .white-card-action:hover, .billing-button:hover { filter: brightness(118%) saturate(125%); }

.header-info-container {
  border-color: rgba(255, 174, 68, .34) !important;
  background: rgba(31, 12, 32, .70) !important;
  box-shadow: 0 0 20px rgba(255, 106, 24, .13) !important;
}
.circle-online, .radial-stat { background: rgba(49, 15, 46, .64); }
.serverInfo__online, .webengine-online-bar .webengine-online-bar-progress { color: var(--halloween-gold) !important; }
.webengine-online-bar .webengine-online-bar-progress { background-color: var(--halloween-orange) !important; }
.h-button.download { filter: sepia(.85) hue-rotate(324deg) saturate(1.45); }

.swiper-news::after, .events-block { background-color: #301831; }
.swiper-news::after { background: linear-gradient(90deg, #2d172f, #6a271f); }
.swiper-news .swiper-slide { box-shadow: inset 0 -10px 45px 40px rgba(31, 7, 22, .82); }
.swiper-news .swiper-pagination { color: var(--halloween-orange); }
.news-top-title span, .news-top-title span.active, .pp, .newsContent_info span { color: var(--halloween-gold); }
.newsContent:hover, .marketContent:hover { background-color: #6b2a29; }

.widget-fon, .widget-fon-guilds, .widget-fon-center, .events-block,
.white-panel, .white-boss-card, .white-download-card, .white-mall-card,
.white-account-summary, .white-account-columns section, .white-donation-login,
.white-donation-package, .white-donation-method, .white-donor-summary,
.white-donor-podium, .white-news-card, .white-news-article, .billing-step {
  border-color: var(--halloween-line) !important;
  color: #f1cfb3 !important;
}
.white-panel {
  background-color: rgba(42, 18, 42, .92) !important;
  background-blend-mode: multiply !important;
  box-shadow: 0 0 50px rgba(255, 104, 20, .18), inset 0 0 55px rgba(87, 25, 58, .48) !important;
}
.white-panel::before { background: linear-gradient(90deg, transparent, var(--halloween-orange), transparent); }
.white-panel-heading > span, .white-table th, .white-card-meta, .white-loading, .white-empty { color: #e8a66d !important; }
.white-panel-heading h2, .white-boss-card h3, .white-download-card h3, .white-mall-card h3,
.white-account-columns h3, .white-news-card h3, .white-news-empty h3, .white-news-article h3 { color: var(--halloween-cream) !important; }
.white-panel-heading p, .white-boss-card p, .white-download-card p, .white-mall-card p,
.white-news-card p, .white-news-article-body { color: #e5b995 !important; }
.white-table td, .white-account-summary, .white-account-columns section, .white-donation-login,
.white-donation-package, .white-donation-method, .white-donor-summary, .white-donor-podium,
.white-news-card, .white-news-article { background: rgba(51, 21, 46, .74) !important; }
.white-table td { border-color: rgba(255, 168, 75, .25) !important; color: #ffe3c0 !important; }
.white-table tr:hover td { background: #672c30 !important; }
.white-mall-price, .white-table td:first-child, .white-table td:last-child { color: var(--halloween-gold) !important; }

.white-inner-header {
  border-bottom-color: rgba(255, 139, 38, .42);
  background: linear-gradient(180deg, rgba(22, 7, 29, .10), rgba(38, 11, 32, .78));
}
.white-inner-title { text-shadow: 0 2px 12px #1b0719; }
.white-inner-title span { color: var(--halloween-gold); }
.white-inner-title p, .white-page-footer { color: #edbd91; }
.white-online { border-color: var(--halloween-line); background: rgba(43, 14, 42, .76); color: #ffe1c2; }
.white-online b, .white-online a { color: var(--halloween-gold); }

input, textarea, select, .white-account input, .white-auth-form input, .white-dlocal-fields select, .white-dlocal-fields input {
  border-color: rgba(255, 145, 49, .58) !important;
  color: #fff0db !important;
  background: rgba(28, 10, 29, .86) !important;
}
.formGroup-name { color: #ffc276; }


/* Imagen de Halloween sobre los logos. */
.halloween-hat-host {
  position: relative !important;
  overflow: visible !important;
}

.halloween-pumpkin-hat {
  position: absolute;
  z-index: 8;
  width: 46px;
  height: 46px;
  left: 50%;
  top: -28px;
  transform: translateX(-50%) rotate(-7deg);
  background-image: url('./img/hallow.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Ajustes para los distintos tamaños de logo. */
.logo .halloween-pumpkin-hat {
  width: 66px;
  height: 66px;
  top: -38px;
  transform: translateX(-50%) rotate(-7deg);
}

.logo-mini .halloween-pumpkin-hat {
  width: 34px;
  height: 34px;
  top: -17px;
  transform: translateX(-50%);
}

/* Bandada decorativa; se inyecta desde halloween.js y no captura clics. */
.halloween-bat-field { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.halloween-bat {
  position: absolute;
  width: var(--bat-size, 28px);
  color: #1b071d;
  filter: drop-shadow(0 1px 1px rgba(255, 136, 34, .25));
  opacity: .86;
  animation: halloween-flight var(--bat-duration, 18s) linear var(--bat-delay, 0s) infinite;
  will-change: transform;
}
.halloween-bat svg { display: block; width: 100%; height: auto; animation: halloween-flap .48s ease-in-out infinite alternate; }
@keyframes halloween-flight {
  from { transform: translate3d(-12vw, var(--bat-y, 0), 0) rotate(-5deg); }
  28% { transform: translate3d(28vw, calc(var(--bat-y, 0) - 24px), 0) rotate(5deg); }
  58% { transform: translate3d(65vw, calc(var(--bat-y, 0) + 18px), 0) rotate(-4deg); }
  to { transform: translate3d(112vw, var(--bat-y, 0), 0) rotate(5deg); }
}
@keyframes halloween-flap { from { transform: scaleY(.73) rotate(-3deg); } to { transform: scaleY(1.08) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .halloween-bat, .halloween-bat svg { animation: none !important; }
}