/* 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}
}

/* ---------- round 3: MOHA's fog, the hands, the bell ---------- */
.vg-fog{position:absolute;top:0;bottom:0;width:900px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(8,10,26,.97) 70%,rgba(20,24,72,.75) 88%,transparent);
  box-shadow:40px 0 60px rgba(20,24,72,.5);filter:blur(2px)}
.nr-stage.engulfed .nr-glow{opacity:.25}
.nr-stage.engulfed{--lightr:80px}
.vg-hand{position:absolute;bottom:15%;height:16%;aspect-ratio:2/3;pointer-events:none}
.vg-hand svg{height:100%;width:auto}
.vg-bell{position:absolute;bottom:15%;height:30%;aspect-ratio:6/11;pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(201,162,39,.5))}
.vg-bell svg{height:100%;width:auto}

/* ---------- round 4: MADA ---------- */
.vg-mada{position:absolute;bottom:15%;width:130px;height:44%;pointer-events:none;
  background:radial-gradient(ellipse 52% 66% at 50% 52%,rgba(42,45,92,.95),rgba(10,12,32,.95) 72%);
  border-radius:42% 58% 36% 36%/52% 52% 26% 26%;box-shadow:0 0 30px rgba(232,130,12,.3)}
.vg-mada .crownrow{position:absolute;left:50%;top:-8%;transform:translateX(-50%);
  display:flex;gap:4px;width:150%;justify-content:center;flex-wrap:wrap}
.vg-mada .crownrow i{width:9px;height:14px;border-radius:50% 50% 20% 20%;
  background:radial-gradient(circle at 50% 80%,#F5D77A,#E8820C 75%);
  box-shadow:0 0 8px rgba(232,130,12,.8);animation:arc-flicker 1.3s ease-in-out infinite}
.vg-mada.open{box-shadow:0 0 34px rgba(245,215,122,.65);filter:brightness(1.25)}
.vg-fall{position:absolute;width:3px;height:26px;border-radius:2px;pointer-events:none;
  background:linear-gradient(rgba(232,130,12,.2),#E8820C);box-shadow:0 0 8px rgba(232,130,12,.6)}
.vg-crown{width:34px!important;height:34px!important;border-radius:50%;
  background:radial-gradient(circle at 50% 70%,#F5D77A,#E8820C 70%,transparent 85%)!important;
  filter:blur(.5px);box-shadow:0 0 16px rgba(232,130,12,.7)!important}
.vg-crown::after{display:none}

/* ---------- round 4: MATSARYA — your silhouette, wrong ---------- */
.vg-mats{position:absolute;bottom:15%;height:32%;aspect-ratio:74/120;pointer-events:none;
  transform:scaleX(-1);filter:grayscale(1) brightness(.75) drop-shadow(0 0 14px rgba(169,173,224,.45))}
.vg-mats svg{width:100%;height:100%}
.vg-mats .nr-flame{opacity:.15;animation:none}
.vg-mats.copies{filter:grayscale(1) brightness(1.3) drop-shadow(0 0 22px rgba(169,173,224,.9))}
.vg-mats.cracking{opacity:.85}

/* ---------- AVIDYA, the Root ---------- */
.vg-avidya{position:absolute;bottom:15%;height:34%;aspect-ratio:1/2;pointer-events:none;
  background:radial-gradient(ellipse 44% 60% at 50% 40%,rgba(10,12,32,.9),rgba(10,12,32,.35) 70%,transparent);
  border-radius:48% 52% 30% 30%/40% 40% 40% 40%;
  filter:blur(2px);opacity:.55;transition:opacity .5s,filter .5s,box-shadow .5s}
.vg-avidya.seen{opacity:1;filter:blur(.5px);
  box-shadow:0 0 30px rgba(245,215,122,.55);
  background:radial-gradient(ellipse 44% 60% at 50% 40%,rgba(42,45,92,.95),rgba(20,24,72,.5) 70%,transparent)}
.vg-avidya.dims{opacity:.25}
.vg-avidya.outgrown{opacity:0;transform:scale(1.15);transition:opacity 1.3s,transform 1.3s}
.vg-pass{position:absolute;left:50%;top:34%;transform:translateX(-50%);margin:0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:#8f8caa;
  animation:vg-passfade .9s ease forwards}
@keyframes vg-passfade{0%{opacity:0}25%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  .vg-mada .crownrow i{animation:none}
}

/* ---------- narrow screens: the whole arsenal must fit the stage ---------- */
@media (max-width:520px){
  .vg-controls{padding:0 8px}
  .vg-pad,.vg-acts{gap:7px}
  .vg-btn{width:52px;height:52px}
  .vg-target{font-size:.58rem;max-width:92%;white-space:normal;text-align:center;
    letter-spacing:.08em;line-height:1.5}
}