/* ODYSSEUS 81 · ASEDIO NOCTURNO (add-on, no edita panel.css) */
/* Carga después de panel.css: <link rel="stylesheet" href="asedio.css?v=1"> */
/* A — pergamino vivo · B — noche de asedio · C — vitral rúnico. Todo pausable con M. */

/* --- Tema nuevo: azul noche + oro viejo --- */
[data-theme="asedio"]{
  --bg:#0d1020; --panel:#1a1626; --panel2:#251f3a;
  --border:#5a4a2f; --accent:#e8b96a; --accent-dim:#8a6a35;
  --text:#f2e8d5; --muted:#b8ab8f; --green:#a8d8a0; --red:#f0978a;
  --cyan:#9fd3d8; --rail:#131020; --shadow:#060510;
}

/* --- A: pergamino vivo, textura barata (solo gradientes) --- */
body{ background-image:radial-gradient(ellipse at 20% -10%, rgba(232,185,106,.06), transparent 55%), radial-gradient(ellipse at 90% 110%, rgba(232,185,106,.05), transparent 50%); }
.panel{
  border-color:var(--border);
  box-shadow:0 3px 0 var(--shadow), inset 0 0 0 1px rgba(232,185,106,.07);
}
.panel::before,.panel::after{ border-color:var(--accent); opacity:.85; }
.service-card{ transition:transform .14s steps(2), border-color .14s, box-shadow .14s; }
.service-card:hover{
  transform:translateY(-2px); border-color:var(--accent-dim);
  box-shadow:0 0 16px rgba(232,185,106,.22), inset 0 0 0 1px rgba(232,185,106,.15);
}
.service-icon{ box-shadow:inset 0 0 0 1px rgba(232,185,106,.12); }
.nav-item.active{ box-shadow:inset 3px 0 var(--accent), inset 0 0 12px rgba(232,185,106,.18); }

/* --- A: antorchas con flicker por capas (reusa .flame del castillo) --- */
.flame{ animation:torch-flicker 1.1s steps(3) infinite; transform-origin:50% 100%; }
.flame-core{ animation:torch-core .7s steps(2) infinite reverse; }
@keyframes torch-flicker{ 0%,100%{opacity:1; transform:scaleY(1)} 30%{opacity:.75; transform:scaleY(.92)} 55%{opacity:.9; transform:scaleY(1.05)} 80%{opacity:.8; transform:scaleY(.96)} }
@keyframes torch-core{ 0%,100%{opacity:1} 50%{opacity:.65} }
.hero-coordinate{ text-shadow:0 0 8px rgba(232,185,106,.5); }
.rail-led{ animation:led-pulse 2.4s steps(6) infinite; }
@keyframes led-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* --- B: brasas + niebla (canvas #brasas creado por asedio.js) --- */
.hero{ position:relative; }
#brasas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:.9; }
.hero-copy{ position:relative; z-index:2; }
.castle-art{ position:relative; z-index:1; }
.niebla{
  position:absolute; left:-20%; right:-20%; bottom:-12px; height:56px; z-index:2; pointer-events:none; opacity:.5;
  background:radial-gradient(ellipse 220px 26px at 20% 60%, rgba(184,171,143,.14), transparent 70%), radial-gradient(ellipse 260px 30px at 60% 50%, rgba(184,171,143,.12), transparent 70%), radial-gradient(ellipse 200px 24px at 85% 65%, rgba(184,171,143,.13), transparent 70%);
  animation:niebla 11s steps(30) infinite alternate;
}
@keyframes niebla{ from{transform:translateX(-2%)} to{transform:translateX(2%)} }

/* --- C: transiciones de vista pergamino --- */
.view.active{ animation:pergamino-in .45s steps(9) both; }
@keyframes pergamino-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.panel-heading h2{ text-shadow:0 0 10px rgba(232,185,106,.25); }
.mini-diamond{ box-shadow:0 0 6px var(--accent); }
.guardian .state.ok .dot{ box-shadow:0 0 6px currentColor; }

/* --- Respeto a pausa y a software rendering --- */
.motion-off #brasas, .motion-off .niebla{ display:none; }
.motion-off .view.active, .motion-off .flame, .motion-off .flame-core,
.motion-off .rail-led, .motion-off .dragon, .motion-off .stars, .motion-off .embers{
  animation:none !important;
}
@media (prefers-reduced-motion:reduce){
  #brasas, .niebla, .view.active{ display:none; animation:none !important; }
}
@media (max-width:570px){ #brasas{ opacity:.5; } .niebla{ display:none; } }