/* The Vigil — combat styles. Loaded only by vigil.html, on top of night.css
   (the world: stage, bands, stars, dark, glow, Meera, HUD, cards are shared). */

/* the round target, always visible */
.vg-target{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:#F5D77A;background:rgba(10,12,32,.6);border:1px solid rgba(201,162,39,.4);
  padding:5px 14px;border-radius:999px;white-space:nowrap}
.vg-target b{color:#E6E4F0;font-weight:500}

/* enemies */
.vg-wisp{position:absolute;width:52px;height:72px;border-radius:50%;filter:blur(1.2px);
  background:radial-gradient(ellipse 52% 62% at 50% 40%,rgba(232,130,12,.8),rgba(122,46,46,.45) 60%,transparent 80%);
  box-shadow:0 0 18px rgba(232,130,12,.35);
  pointer-events:none;will-change:left,top;transition:width .3s,height .3s}
.vg-wisp::after{content:"";position:absolute;left:30%;top:26%;width:7px;height:7px;border-radius:50%;
  background:#F5D77A;box-shadow:15px 2px 0 -1px #F5D77A,0 0 8px 2px rgba(245,215,122,.8)}
.vg-wisp.grown{filter:blur(2.5px) saturate(1.4)}
.vg-thief{background:radial-gradient(ellipse 52% 62% at 50% 40%,rgba(169,173,224,.85),rgba(42,45,92,.5) 60%,transparent 80%);box-shadow:0 0 18px rgba(169,173,224,.35)}
.vg-sparks{position:absolute;width:50px;height:50px;pointer-events:none;
  background:radial-gradient(circle,rgba(245,215,122,.9) 0%,rgba(232,130,12,.5) 40%,transparent 70%);
  border-radius:50%;animation:vg-burst .4s ease-out forwards}
@keyframes vg-burst{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* the coil-vaults and bundles of the grove */
.vg-coil{position:absolute;bottom:15%;width:56px;height:26%;pointer-events:none;
  background:repeating-linear-gradient(160deg,#141848 0 10px,#22265c 10px 16px);
  border:1px solid rgba(217,138,134,.45);
  border-radius:24px 24px 8px 8px;
  box-shadow:inset 0 0 18px rgba(122,46,46,.7),0 0 16px rgba(122,46,46,.45)}
.vg-coil.cracked{opacity:.7;transform:skewX(-4deg)}
.vg-coil.cracked2{opacity:.45;transform:skewX(5deg)}
.vg-bundle{position:absolute;width:30px;height:38px;pointer-events:none;
  background:linear-gradient(#F5D77A,#C9A227 60%);border-radius:4px 4px 8px 8px;
  box-shadow:0 -14px 0 -5px #141848,0 0 12px rgba(201,162,39,.55)}
.vg-bundle.lost{opacity:0;transition:opacity .5s}
.vg-bundle.carried{filter:brightness(1.3)}

/* bosses and heavies */
.vg-lobha{position:absolute;bottom:15%;width:110px;height:34%;pointer-events:none;
  background:radial-gradient(circle 6px at 36% 26%,#F5D77A 0 5px,transparent 6px),
    radial-gradient(circle 6px at 62% 24%,#F5D77A 0 5px,transparent 6px),
    radial-gradient(ellipse 55% 70% at 50% 45%,rgba(76,82,160,.95),rgba(20,24,72,.95) 70%);
  border-radius:46% 54% 40% 40%/60% 60% 30% 30%;filter:blur(.6px);
  box-shadow:0 0 26px rgba(169,173,224,.4)}
.vg-lobha::before,.vg-lobha::after{content:"";position:absolute;width:34px;height:12px;border-radius:8px;
  background:#0A0C20;top:38%}
.vg-lobha::before{left:-22px;transform:rotate(18deg)} .vg-lobha::after{right:-22px;transform:rotate(-18deg)}
.vg-lobha.hurt{animation:vg-hurt .3s ease}
@keyframes vg-hurt{0%,100%{filter:blur(1px)}50%{filter:blur(1px) brightness(1.8)}}
.vg-krodha{position:absolute;bottom:15%;width:74px;height:40%;pointer-events:none;
  background:linear-gradient(#E8820C22,#7A2E2Ecc 40%,#0A0C20);border-radius:40% 40% 20% 20%/70% 70% 20% 20%;
  filter:blur(1.5px);animation:vg-rage .5s ease-in-out infinite}
@keyframes vg-rage{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.06) scaleX(.97)}}
.vg-krodha.staggered{animation:none;filter:blur(2px) grayscale(.6);transform:skewX(-8deg)}
.vg-orb{position:absolute;width:24px;height:24px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(220,224,255,.95),rgba(42,45,92,.7) 70%);
  box-shadow:0 0 14px rgba(169,173,224,.7);filter:blur(.3px)}

/* the player's arrow */
.vg-arrow{position:absolute;width:34px;height:3px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#F5D77A 40%,#FFF6D8);box-shadow:0 0 8px rgba(245,215,122,.7)}
.vg-arrow.left{transform:scaleX(-1)}

/* Meera's combat states */
.nr-meera.striking{animation:vg-strike .22s ease}
@keyframes vg-strike{0%{transform:translateX(-40%)}45%{transform:translateX(-30%) rotate(3deg)}100%{transform:translateX(-40%)}}
.nr-meera.guarding .nr-flame{animation:none;transform:scaleY(1.6)}
.nr-meera.guarding{filter:drop-shadow(0 0 16px rgba(245,215,122,.8))}
.nr-meera.hit{animation:vg-hit .35s ease}
@keyframes vg-hit{0%,100%{transform:translateX(-40%)}30%{transform:translateX(-46%) rotate(-2deg)}60%{transform:translateX(-36%)}}

/* Krodha's ambush and the HUD flicker (Gita 2.63, made visible) */
.vg-ambush{position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 90px 30px rgba(122,46,46,.55);animation:vg-ambient .6s ease-in-out infinite}
@keyframes vg-ambient{0%,100%{opacity:.6}50%{opacity:1}}
.nr-hud.smriti-lost{animation:vg-flicker 2s steps(2) forwards}
@keyframes vg-flicker{0%{opacity:1}20%{opacity:.1}40%{opacity:.8}60%{opacity:.15}80%{opacity:.7}100%{opacity:1}}

/* combat controls: move left, act right */
.vg-controls{position:absolute;left:0;right:0;bottom:10px;display:flex;
  justify-content:space-between;align-items:flex-end;padding:0 12px;z-index:5}
.vg-pad,.vg-acts{display:flex;gap:10px}
.vg-btn{width:58px;height:58px;border-radius:50%;border:1px solid rgba(230,228,240,.28);
  background:rgba(10,12,32,.6);color:#E6E4F0;cursor:pointer;backdrop-filter:blur(3px);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none}
.vg-btn b{font-size:1.05rem;line-height:1}
.vg-btn:active{border-color:var(--lamp);color:#F5D77A}
.vg-btn.fire{border-color:rgba(201,162,39,.5)}
.vg-btn[disabled]{opacity:.35}

/* camp and card additions */
.vg-forge{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:#F5D77A;margin:10px 0 0}
.vg-camp-q{margin:12px 0 4px;font-weight:600}

/* mode strip shared by night.html and vigil.html */
.nr-modes{display:flex;gap:10px;margin:0 0 16px}
.nr-modes a,.nr-modes span{font-family:var(--pop);font-weight:700;font-size:.82rem;
  padding:9px 16px;border-radius:999px;text-decoration:none;border:1px solid var(--rule);color:var(--text-soft)}
.nr-modes .here{border-color:var(--lamp);color:#F5D77A;background:rgba(201,162,39,.08)}
.nr-modes a:hover{border-color:var(--lamp);color:#F5D77A}

@media (prefers-reduced-motion:reduce){
  .vg-krodha,.vg-ambush{animation:none}
}