/*!
 * HardGame.ro – Halloween FX pack (CSS)
 * Clase de pus pe elementele din panel:
 *   .hg-drip     – slime verde care curge de sub element (header, carduri, banner)
 *   .hg-web      – pânză de păianjen în colțul din stânga-sus (adaugă .hg-web-r pentru dreapta)
 *   .hg-flicker  – pâlpâie ca un neon stricat (logo, titluri)
 *   .hg-glow     – glow verde pe text
 *   .hg-pumpkin  – iconiță dovleac (ex. lângă top 3 în clasament)
 * Efectele de fundal (ceață, lilieci, scântei, păianjen) le pune halloween.js.
 */
:root { --hg-green: #27EC9C; --hg-orange: #FF8A2A; }

/* ---------- strat de efecte */
.hg-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.hg-embers { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- ceață */
.hg-fog {
  position: absolute; left: 0; bottom: -6vh; width: 200%; height: 42vh;
  background:
    radial-gradient(ellipse 18% 55% at 10% 70%, rgba(200,235,220,.10), transparent 70%),
    radial-gradient(ellipse 22% 60% at 32% 80%, rgba(200,235,220,.08), transparent 70%),
    radial-gradient(ellipse 16% 50% at 55% 72%, rgba(200,235,220,.10), transparent 70%),
    radial-gradient(ellipse 24% 65% at 78% 82%, rgba(200,235,220,.08), transparent 70%);
  animation: hg-fog 70s linear infinite;
}
.hg-fog-b { bottom: -12vh; opacity: .8; animation-duration: 110s; animation-direction: reverse; filter: hue-rotate(40deg); }
@keyframes hg-fog { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- lilieci */
.hg-bat { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 0 6px rgba(39,236,156,.35)); }
.hg-bat svg { display: block; width: 100%; overflow: visible; animation: hg-flap .2s ease-in-out infinite alternate; }
.hg-bat path { fill: #0A0F0D; stroke: var(--hg-green); stroke-width: 1.1; stroke-opacity: .7; stroke-linejoin: round; }
.hg-bat .hg-wing { transform-box: view-box; transform-origin: 50px 24px; animation: inherit; animation-name: hg-wing; }
.hg-bat-eye { fill: var(--hg-green); }
@keyframes hg-flap { to { transform: translateY(-3px); } }
@keyframes hg-wing { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }

/* ---------- păianjen */
/* Paianjenul se poate trage. `touch-action: none` ca pe telefon tragerea sa nu deruleze
   pagina; cursorul spune ca se poate apuca. */
.hg-spider { position: absolute; top: 0; width: 34px; pointer-events: auto; cursor: grab; touch-action: none; transform: translateY(-80px); }
.hg-spider-trag { cursor: grabbing; }
/* Cat timp e tras, picioarele si legananea se opresc: altfel pare ca se zbate in mana ta. */
.hg-spider-trag svg, .hg-spider-trag .hg-legs { animation: none; }
/* Firul urca de la paianjen spre ancora, deci se roteste in jurul capatului lui de jos. */
.hg-thread { position: absolute; left: 50%; bottom: 60%; width: 1px; height: 100vh; transform-origin: bottom center; background: linear-gradient(transparent, rgba(220,240,232,.45)); }
.hg-spider svg { display: block; width: 100%; animation: hg-bob 2.4s ease-in-out infinite; transform-origin: 50% 0; }
.hg-legs path { fill: none; stroke: #9FB4AA; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hg-legs { animation: hg-legs .6s ease-in-out infinite alternate; transform-origin: 20px 22px; }
.hg-sp-body { fill: #141C18; stroke: #9FB4AA; stroke-width: 1; }
.hg-sp-eye { fill: var(--hg-green); }
@keyframes hg-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(6px) rotate(4deg); } }
@keyframes hg-legs { to { transform: scaleX(.92); } }

/* ---------- slime */
.hg-drip { position: relative; }
.hg-drip::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 54px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 44%22 width=%22240%22 height=%2244%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2327EC9C%22/%3E%3Cstop offset=%221%22 stop-color=%22%2314B874%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22url(%23d)%22%3E%3Crect width=%22240%22 height=%227%22/%3E%3Cpath d=%22M12.40,6.00 Q16.00,6.00 16.00,10.00 L16.88,20.88 A3.12,3.12 0 0 0 23.12,20.88 L24.00,10.00 Q24.00,6.00 27.60,6.00 Z%22/%3E%3Cpath d=%22M52.60,6.00 Q58.00,6.00 58.00,12.00 L59.32,31.32 A4.68,4.68 0 0 0 68.68,31.32 L70.00,12.00 Q70.00,6.00 75.40,6.00 Z%22/%3E%3Cpath d=%22M101.30,6.00 Q104.00,6.00 104.00,9.00 L104.66,14.66 A2.34,2.34 0 0 0 109.34,14.66 L110.00,9.00 Q110.00,6.00 112.70,6.00 Z%22/%3E%3Cpath d=%22M141.50,6.00 Q146.00,6.00 146.00,11.00 L147.10,24.10 A3.90,3.90 0 0 0 154.90,24.10 L156.00,11.00 Q156.00,6.00 160.50,6.00 Z%22/%3E%3Cpath d=%22M192.85,6.00 Q196.00,6.00 196.00,9.50 L196.77,18.27 A2.73,2.73 0 0 0 202.23,18.27 L203.00,9.50 Q203.00,6.00 206.15,6.00 Z%22/%3E%3Cpath d=%22M223.75,6.00 Q226.00,6.00 226.00,8.50 L226.55,12.05 A1.95,1.95 0 0 0 230.45,12.05 L231.00,8.50 Q231.00,6.00 233.25,6.00 Z%22/%3E%3C/g%3E%3Cg fill=%22%23fff%22 fill-opacity=%22.35%22%3E%3Crect width=%22240%22 height=%221.5%22/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 240px 44px;
  filter: drop-shadow(0 4px 10px rgba(39,236,156,.25));
  animation: hg-ooze 5s ease-in-out infinite;
  z-index: 2;
}
@keyframes hg-ooze { 0%,100% { background-size: 240px 44px; } 50% { background-size: 240px 50px; } }

/* ---------- pânză */
.hg-web { position: relative; }
.hg-web::before {
  content: ""; position: absolute; top: 0; left: 0; width: 140px; height: 140px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22 width=%22160%22 height=%22160%22%3E%3Cpath d=%22M0,0 L168.0,0.0 M0,0 L162.3,43.5 M0,0 L142.5,89.0 M0,0 L108.0,128.7 M0,0 L62.9,155.8 M0,0 L0.0,168.0 M26.0,0.0 Q22.0,2.9 25.1,6.7 Q20.3,8.8 22.0,13.8 Q16.7,14.5 16.7,19.9 Q11.4,18.9 9.7,24.1 Q4.2,21.5 0.0,26.0 M52.0,0.0 Q44.0,5.8 50.2,13.5 Q40.6,17.6 44.1,27.6 Q33.3,29.0 33.4,39.8 Q22.7,37.9 19.5,48.2 Q8.4,43.1 0.0,52.0 M82.0,0.0 Q69.3,9.1 79.2,21.2 Q64.0,27.8 69.5,43.5 Q52.6,45.7 52.7,62.8 Q35.9,59.7 30.7,76.0 Q13.2,68.0 0.0,82.0 M116.0,0.0 Q98.1,12.9 112.0,30.0 Q90.5,39.3 98.4,61.5 Q74.4,64.6 74.6,88.9 Q50.7,84.5 43.5,107.6 Q18.7,96.1 0.0,116.0 M150.0,0.0 Q126.8,16.7 144.9,38.8 Q117.0,50.9 127.2,79.5 Q96.2,83.6 96.4,114.9 Q65.6,109.2 56.2,139.1 Q24.2,124.3 0.0,150.0%22 fill=%22none%22 stroke=%22%23CFE9DD%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") no-repeat 0 0 / contain; opacity: .22; z-index: 1;
}
.hg-web.hg-web-r::before { left: auto; right: 0; transform: scaleX(-1); }

/* ---------- text */
.hg-glow { text-shadow: 0 0 18px rgba(39,236,156,.55), 0 0 2px rgba(39,236,156,.9); }
.hg-flicker { animation: hg-flicker 7s infinite; }
@keyframes hg-flicker {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 14px rgba(39,236,156,.45)); }
  90% { opacity: 1; } 91% { opacity: .3; filter: none; } 92% { opacity: 1; }
  94% { opacity: .55; filter: none; } 95% { opacity: 1; filter: drop-shadow(0 0 14px rgba(39,236,156,.45)); }
}

/* ---------- dovleac */
.hg-pumpkin { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -.3em;
  background: url(pumpkin.svg) no-repeat center / contain; filter: drop-shadow(0 0 8px rgba(255,138,42,.55)); }

/* ---------- accesibilitate: fără mișcare dacă utilizatorul a cerut asta */
@media (prefers-reduced-motion: reduce) {
  .hg-fog, .hg-drip::after, .hg-flicker { animation: none !important; }
}