/* src/styles/v60-organs-aura.css  (v2.62 layout fix)
   Organs System nodes, Aura Field nodes, and the visible pulsing aura rings.

   Key fix: the node layers and the aura visual now FILL the .figure-wrap box
   (the same positioned, overflow-clipped, aspect-ratio container the body
   .hotspot system uses). Nodes are positioned by percent exactly like
   .hotspot, so they line up on the figure on desktop AND mobile and can never
   float loose down the page. Both layers are admin/Tier-2 only and hidden
   unless their layer is active. */

/* ---------------- Node layers fill the figure box ---------------- */
#organsLayer{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  pointer-events:none!important;z-index:6!important;display:none;
}

.organ-node{
  position:absolute!important;left:50%!important;transform:translate(-50%,-50%)!important;
  pointer-events:auto!important;border:1px solid rgba(95,227,255,.4)!important;color:#f6fbff!important;
  background:rgba(4,9,20,.62)!important;border-radius:999px!important;padding:6px 11px!important;
  font-size:.66rem!important;font-weight:850!important;cursor:pointer!important;white-space:nowrap!important;
  box-shadow:0 0 16px rgba(95,227,255,.16)!important;backdrop-filter:blur(8px)!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease!important;
}
.organ-node:hover,.organ-node.active{
  border-color:rgba(245,185,106,.78)!important;
  background:radial-gradient(circle,rgba(245,185,106,.2),rgba(217,65,255,.16))!important;
  box-shadow:0 0 24px rgba(245,185,106,.28),0 0 46px rgba(217,65,255,.18)!important;
}

/* Aura preset buttons ABOVE the head (like Mind/Sleep state chips). */
#auraLayer{
  display:none;position:absolute!important;left:50%!important;top:-3%!important;
  right:auto!important;bottom:auto!important;
  transform:translateX(-50%)!important;width:max-content!important;max-width:96%!important;
  flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;
  z-index:12!important;pointer-events:none!important;
}
.aura-layer-title{
  flex-basis:100%!important;text-align:center!important;margin-bottom:3px!important;
  color:var(--cyan,#5fe3ff)!important;font-size:.7rem!important;font-weight:950!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;pointer-events:none!important;
}
.aura-node{
  pointer-events:auto!important;border:1px solid rgba(95,227,255,.4)!important;color:#f6fbff!important;
  background:rgba(4,9,20,.72)!important;border-radius:999px!important;padding:6px 12px!important;
  font-size:.64rem!important;font-weight:850!important;cursor:pointer!important;white-space:nowrap!important;
  box-shadow:0 0 14px rgba(95,227,255,.16)!important;backdrop-filter:blur(8px)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.aura-node:hover,.aura-node.active{
  transform:scale(1.06)!important;border-color:rgba(245,185,106,.78)!important;
  background:radial-gradient(circle,rgba(245,185,106,.2),rgba(217,65,255,.16))!important;
  box-shadow:0 0 22px rgba(245,185,106,.28),0 0 44px rgba(217,65,255,.18)!important;
}

/* ---------------- Visible aura: four nested clickable halo rings ---------------- */
#auraVisual{
  position:absolute!important;left:50%!important;top:50%!important;
  width:100%!important;height:100%!important;transform:translate(-50%,-50%)!important;
  z-index:2!important;opacity:0!important;transition:opacity 1s ease!important;
  --aura-color:#5fe3ff;
}
#auraVisual.visible{opacity:1!important;}

/* Each ring is a clickable oval halo. data-ring 0=inner .. 3=outer. */
.aura-ring{
  position:absolute!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;border-radius:50%!important;
  background:transparent!important;cursor:pointer!important;padding:0!important;
  border:2px solid var(--aura-color)!important;
  box-shadow:0 0 18px var(--aura-color),inset 0 0 26px color-mix(in srgb,var(--aura-color) 45%,transparent)!important;
  opacity:.5!important;pointer-events:auto!important;
  transition:opacity .3s ease,box-shadow .3s ease,border-color .3s ease!important;
  mix-blend-mode:screen!important;
}
/* Nested sizes — inner ring hugs the body, each outer ring extends further. */
.aura-ring[data-ring="0"]{width:66%!important;height:80%!important;}
.aura-ring[data-ring="1"]{width:80%!important;height:90%!important;}
.aura-ring[data-ring="2"]{width:92%!important;height:98%!important;}
.aura-ring[data-ring="3"]{width:104%!important;height:106%!important;}

/* Hover brightens that ring. */
.aura-ring:hover{
  opacity:1!important;
  box-shadow:0 0 30px var(--aura-color),0 0 60px var(--aura-color),inset 0 0 34px var(--aura-color)!important;
}
/* Selected ring is the dominant glow. */
.aura-ring.selected{
  opacity:1!important;border-width:3px!important;
  box-shadow:0 0 34px var(--aura-color),0 0 70px var(--aura-color),inset 0 0 40px var(--aura-color)!important;
}

/* Soft breathing core glow behind the rings. */
.aura-core{
  position:absolute!important;left:50%!important;top:50%!important;
  width:70%!important;height:84%!important;transform:translate(-50%,-50%)!important;
  border-radius:50%!important;pointer-events:none!important;
  background:radial-gradient(ellipse at center,var(--aura-color) 0%,color-mix(in srgb,var(--aura-color) 36%,transparent) 38%,transparent 70%)!important;
  opacity:0!important;filter:blur(10px)!important;mix-blend-mode:screen!important;transition:opacity 1s ease!important;
}
#auraVisual.visible .aura-core{opacity:.26!important;animation:auraCoreBreath 7s ease-in-out infinite!important;}

/* Gentle continuous motion on the ring set per selected motion type. */
#auraVisual.visible .aura-ring{animation:auraRingBreath 6s ease-in-out infinite!important;}
#auraVisual.visible .aura-ring[data-ring="1"]{animation-delay:.6s!important;}
#auraVisual.visible .aura-ring[data-ring="2"]{animation-delay:1.2s!important;}
#auraVisual.visible .aura-ring[data-ring="3"]{animation-delay:1.8s!important;}

/* Energized (player running): brighter, faster breathing. */
#auraVisual.energized.visible .aura-core{opacity:.4!important;animation-duration:5s!important;}
#auraVisual.energized.visible .aura-ring{animation-duration:4s!important;}

@keyframes auraRingBreath{
  0%,100%{transform:translate(-50%,-50%) scale(1)!important;}
  50%{transform:translate(-50%,-50%) scale(1.04)!important;}
}
@keyframes auraCoreBreath{
  0%,100%{transform:translate(-50%,-50%) scale(.92)!important;}
  50%{transform:translate(-50%,-50%) scale(1.08)!important;}
}

/* ---------------- Tier-2 visibility gating ---------------- */
body.admin-unlocked.layer-organs #organsLayer,body.tier2-unlocked.layer-organs #organsLayer{display:block!important;}
body.admin-unlocked.layer-aura #auraLayer,body.tier2-unlocked.layer-aura #auraLayer{display:flex!important;}

body:not(.admin-unlocked):not(.tier2-unlocked) #auraVisual,
body:not(.layer-aura) #auraVisual{opacity:0!important;}

body:not(.admin-unlocked):not(.tier2-unlocked) #organsLayer,
body:not(.admin-unlocked):not(.tier2-unlocked) #auraLayer,
body:not(.layer-organs) #organsLayer,
body:not(.layer-aura) #auraLayer{display:none!important;}

@media(max-width:760px){
  .organ-node,.aura-node{font-size:.54rem!important;padding:5px 8px!important;}
  .aura-layer-title{font-size:.58rem!important;}
  #auraLayer{top:-1%!important;gap:5px!important;}
}