/* A crisp diagram, a planted circular aura, and the level-up light scene. */
/* Geometry is normalized to the diagram diameter, including the sprite's transparent border. */
.character-dashboard .home-portrait{height:auto;aspect-ratio:1/1.075;align-self:start}
.character-dashboard .quest-wheel{top:4%;width:100%;aspect-ratio:1;border:0;filter:none;box-shadow:none;overflow:visible;background:none}
.character-dashboard .quest-wheel:before,
.character-dashboard .quest-wheel:after,
.character-dashboard .quest-wheel.no-category-data:before{content:none;display:none;filter:none}
.character-dashboard .wheel-art{display:block;width:100%;height:100%;overflow:visible}
.character-dashboard .hero-figure{left:50%;height:85.535%;bottom:4.96%}
.character-dashboard .category-stat{padding:.5px 1px;row-gap:1px}

/* Reference: centre (.543D,.949D), visible outer ellipse .61D by .117D. */
.character-dashboard .hero-aura{
  position:absolute;
  left:54.3%;bottom:-.8372%;
  width:73.5%;height:17.116%;
  transform:translateX(-50%);
  z-index:1;
  color:var(--aura-color,#fffdf2);
  pointer-events:none;
  transition:color .7s ease;
}
.character-dashboard .hero-aura .hero-floor{
  position:absolute;inset:0;
  left:0;bottom:0;width:100%;height:100%;
  transform:none;
  color:inherit;
  overflow:visible;
  filter:drop-shadow(0 0 1px currentColor);
  opacity:.78;
}
.character-dashboard .hero-aura .hero-floor ellipse{vector-effect:non-scaling-stroke;stroke-width:1;fill:none}
.character-dashboard .hero-aura .hero-floor ellipse+ellipse{stroke-width:.65;opacity:.65}
.character-dashboard .hero-aura .hero-floor path{opacity:.82}
.character-dashboard .aura-flames{position:absolute;inset:0;overflow:visible}
.character-dashboard .aura-flames>span{
  position:absolute;
  left:calc(50% + var(--x,0)*41.5%);
  bottom:calc(50% + var(--rim-arc,0)*31.8182%);
  width:calc(3px + var(--flame-strength,0)*4px);
  height:calc(2px + var(--flame-strength,0)*19px);
  transform:translateX(-50%);
  transform-origin:50% 100%;
  clip-path:polygon(47% 0,67% 25%,60% 45%,90% 64%,100% 83%,78% 100%,25% 100%,0 79%,14% 52%,34% 34%);
  background:linear-gradient(to top,currentColor 8%,color-mix(in srgb,currentColor 70%,white) 60%,#fffefa 100%);
  opacity:calc(.015 + var(--flame-strength,0)*.82);
  animation:aura-flame-dance calc(1.65s - var(--flame-strength,0)*.6s) calc(var(--i,0)*-.17s) ease-in-out infinite alternate;
  transition:height .7s ease,width .7s ease,opacity .7s ease;
}
@keyframes aura-flame-dance{
  0%{transform:translateX(-50%) scale(.82,.66) skewX(-8deg)}
  48%{transform:translateX(-50%) scale(1,1.05) skewX(5deg)}
  100%{transform:translateX(-50%) scale(.9,.82) skewX(-3deg)}
}

/* Grace is a local scene: light falls on the whole hero without covering controls. */
.character-dashboard .hero-grace{
  position:absolute;inset:-17px -8% 2px;
  z-index:3;
  overflow:visible;
  pointer-events:none;
  opacity:0;
}
.character-dashboard .hero-grace.is-active{opacity:1}
.character-dashboard .home-avatar-glow.level-glow-effect{
  filter:brightness(2.7) saturate(.55) blur(.7px) drop-shadow(0 0 18px #fff0a5) drop-shadow(0 0 38px #ffc33b99);
}
.character-dashboard .grace-beam{
  position:absolute;inset:-18% -35% -8%;
  /* Broad, feathered light volume: no polygon edge or hard spotlight cone. */
  background:
    radial-gradient(ellipse 78% 42% at 50% 0%,#fff9e7a6 0%,#fff2c95c 38%,transparent 78%),
    linear-gradient(180deg,transparent 0%,#fff5d22b 12%,#fff2cb42 43%,#ffe8b82e 78%,transparent 100%);
  filter:blur(22px) saturate(1.08);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 78%,transparent 100%);
  mix-blend-mode:screen;
  opacity:0;
}
.character-dashboard .grace-rays{
  position:absolute;inset:-8% -22% 1%;
  background:
    radial-gradient(ellipse 64% 44% at 50% 3%,#fff9e883 0%,#fff0c932 48%,transparent 79%),
    radial-gradient(ellipse 56% 77% at 50% 48%,#fff0c91c 0%,transparent 76%);
  filter:blur(26px);
  mask-image:linear-gradient(transparent,#000 17%,#000 76%,transparent);
  -webkit-mask-image:linear-gradient(transparent,#000 17%,#000 76%,transparent);
  opacity:0;
  mix-blend-mode:screen;
}
.character-dashboard .hero-grace.is-active .grace-beam{animation:grace-beam-arrive 8.6s ease-in-out both}
.character-dashboard .hero-grace.is-active .grace-rays{animation:grace-rays-arrive 8.6s ease-in-out both}
.character-dashboard .grace-petals{position:absolute;inset:0;overflow:visible}
.character-dashboard .grace-petals>i{
  position:absolute;top:-8px;left:calc(7% + var(--x,.5)*86%);
  display:block;width:var(--petal-w,4px);height:var(--petal-h,7px);
  border-radius:75% 15% 70% 25%;
  background:linear-gradient(135deg,#fff4b9,#e4b848 55%,#a97421);
  box-shadow:0 0 4px #ffeac177;
  opacity:0;
}
.character-dashboard .hero-grace.is-active .grace-petals>i{
  animation:grace-petal-fall var(--duration,4.5s) var(--delay,0ms) cubic-bezier(.2,.52,.34,1) both;
}
.character-dashboard .grace-petals>i:nth-of-type(3n){border-radius:35% 70% 30% 65%;filter:blur(.35px) hue-rotate(-12deg)}
.character-dashboard .grace-petals>i:nth-of-type(3n + 1){border-radius:70% 28% 74% 24%;filter:blur(.35px) brightness(1.12)}
.character-dashboard .hero-aura.is-leveling{color:#ffe79b}
.character-dashboard .hero-aura.is-leveling .hero-floor{animation:grace-ring-awaken 4s ease both}
.character-dashboard .hero-aura.is-leveling .aura-flames>span{height:24px;opacity:.9}
.character-dashboard #homeXpTrack.is-leveling{animation:grace-xp-light 3.2s ease both}
@keyframes grace-beam-arrive{
  0%,8%{opacity:0;transform:translateY(-2%) scale(1)}
  24%{opacity:.62;transform:translateY(0) scale(1.015)}
  48%{opacity:.5;transform:translateY(1%) scale(1.035)}
  70%{opacity:.36;transform:translateY(2%) scale(1.05)}
  100%{opacity:0;transform:translateY(4%) scale(1.08)}
}
@keyframes grace-rays-arrive{
  0%,12%{opacity:0;transform:translateY(-1%)}
  27%{opacity:.38;transform:translateY(0)}
  52%{opacity:.3;transform:translateY(1%)}
  74%{opacity:.2;transform:translateY(2%)}
  100%{opacity:0;transform:translateY(4%)}
}
@keyframes grace-petal-fall{
  0%{opacity:0;transform:translate3d(0,-8px,0) rotate(0deg) scale(.65)}
  12%{opacity:var(--petal-alpha,.82)}
  32%{opacity:var(--petal-alpha,.82);transform:translate3d(var(--early-drift,0px),58px,0) rotate(var(--early-spin,100deg)) scale(1)}
  74%{opacity:.72;transform:translate3d(var(--middle-drift,0px),168px,0) rotate(var(--middle-spin,270deg)) scale(.94)}
  100%{opacity:0;transform:translate3d(var(--drift,0px),238px,0) rotate(var(--spin,360deg)) scale(.66)}
}
@keyframes grace-ring-awaken{
  0%{opacity:.78;filter:drop-shadow(0 0 1px #fffbe6);transform:scale(1)}
  18%{opacity:1;filter:drop-shadow(0 0 4px #fff0a5);transform:scale(1.04,1.08)}
  46%{opacity:1;filter:drop-shadow(0 0 2px #ffe89e);transform:scale(1.015,1.03)}
  100%{opacity:.78;filter:drop-shadow(0 0 1px currentColor);transform:scale(1)}
}
@keyframes grace-xp-light{
  0%,100%{box-shadow:inset 0 1px 3px #0009,0 0 3px #e6c45c44}
  22%{box-shadow:inset 0 1px 3px #0009,0 0 10px #fff3a7bb,0 0 18px #ffce5a66}
  58%{box-shadow:inset 0 1px 3px #0009,0 0 6px #ffe89788}
}
.hidden .character-dashboard .aura-flames>span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .character-dashboard .aura-flames>span{animation:none!important;transform:translateX(-50%);height:calc(1px + var(--flame-strength,0)*8px);opacity:calc(var(--flame-strength,0)*.3)}
  .character-dashboard .hero-grace.is-active .grace-beam{animation:none!important;opacity:.16;transform:none}
  .character-dashboard .hero-grace.is-active .grace-rays,
  .character-dashboard .hero-grace.is-active .grace-petals{display:none}
  .character-dashboard .hero-aura.is-leveling .hero-floor{animation:none!important;opacity:1;filter:drop-shadow(0 0 2px #fff3ba)}
  .character-dashboard #homeXpTrack.is-leveling{animation:none!important;box-shadow:0 0 5px #fff1ad77}
}

.character-dashboard .home-level-caption{text-align:center;margin-bottom:5px}
.character-dashboard #homeLevel{font-size:12px;font-weight:500;letter-spacing:.1px}
.character-dashboard #homeXpTrack.is-leveling #homeXpFill{transition:width .38s ease,filter .4s ease}
.character-dashboard #homeXpTrack.xp-resetting #homeXpFill{transition:width .52s cubic-bezier(.3,0,.2,1),filter .4s ease}
.character-dashboard #homeXpTrack.xp-settling #homeXpFill{transition:width .6s ease,filter .4s ease}
.character-dashboard #homeXpTrack.xp-no-transition #homeXpFill{transition:none}