/* карточка уведомлений + анимации назначения роли; парная половина к notifications-overlay.js */

.yd-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,14,4,.55);
  backdrop-filter: blur(2px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  overflow: hidden;
}
.yd-overlay-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* слой частиц — генерится и вычищается из JS, тут только базовая позиция */
.yd-overlay-fx{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.yd-overlay-card {
  position: relative;
  z-index: 2;
  max-width: 420px;
  width: calc(100% - 48px);
  background: var(--yd-surface, var(--color-paper, #fdf6e8));
  border: 1px solid var(--yd-border, var(--color-line, #c7ad7a));
  border-radius: var(--yd-radius-dialog, 16px);
  box-shadow: var(--yd-shadow-3, 0 12px 40px rgba(0,0,0,.35));
  padding: 28px 26px 22px;
  text-align: center;
  transform: scale(.85) translateY(10px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.yd-overlay-backdrop.is-open .yd-overlay-card { transform: scale(1) translateY(0); }

.yd-overlay-close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:var(--yd-radius-control, 50%);
  border:none;
  background:var(--yd-surface-muted, var(--color-paper-2, #f4ead0));
  color:var(--color-amber-dark, #7a4a08);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s;
}
.yd-overlay-close:hover { background: var(--color-amber, #b8720c); color: #fff; }

.yd-overlay-icon { font-size: 40px; margin-bottom: 6px; }
.yd-overlay-title {
  font-family: 'Neucha', cursive;
  font-size: 24px;
  color: var(--color-amber-dark, #7a4a08);
  margin-bottom: 10px;
}
.yd-overlay-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-dark, #2b2013);
  margin-bottom: 16px;
}
.yd-overlay-btn{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  gap:8px;
  padding:9px 22px;
  border-radius:var(--yd-radius-control, 10px);
  border:none;
  background:linear-gradient(135deg,var(--color-amber-soft, #e0a13f),var(--color-amber, #b8720c));
  color:#2b2013;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:transform .1s, box-shadow .15s;
}
.yd-overlay-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(70,45,10,.2); }

.yd-role-badge {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 20px;
  font-family: 'Neucha', cursive;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* имена пресетов ниже завязаны на role_animations.css_class из server/db/seed.js, не переименовывать просто так */

/* golden-seal — печать проступает золотым сиянием */
.role-anim--golden-seal .yd-overlay-card { animation: ydGoldenSeal 1s ease-out; }
@keyframes ydGoldenSeal {
  0% { box-shadow: 0 0 0 0 rgba(184,114,12,0); }
  30% { box-shadow: 0 0 60px 10px rgba(224,161,63,.65); }
  100% { box-shadow: 0 12px 40px rgba(0,0,0,.35); }
}
.role-anim--golden-seal .yd-role-badge {
  background: linear-gradient(135deg,#f0c14b,#b8720c);
  animation: ydBadgePulse 1.6s ease-in-out infinite;
}

/* confetti-burst — цветное конфетти вокруг карточки */
.role-anim--confetti-burst .yd-overlay-card::before,
.role-anim--confetti-burst .yd-overlay-card::after {
  content: '';
  position: absolute;
  inset: -20px;
  background-image:
    radial-gradient(circle, #e0562f 3px, transparent 4px),
    radial-gradient(circle, #2f8fe0 3px, transparent 4px),
    radial-gradient(circle, #4f9e4a 3px, transparent 4px),
    radial-gradient(circle, #e8c94a 3px, transparent 4px);
  background-size: 40px 40px, 55px 55px, 35px 35px, 48px 48px;
  background-position: 0 0, 20px 30px, 40px 10px, 10px 45px;
  opacity: 0;
  pointer-events: none;
  animation: ydConfettiFall 1.4s ease-out;
  z-index: -1;
}
@keyframes ydConfettiFall {
  0% { opacity: 0; transform: translateY(-30px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(40px); }
}

/* royal-banner — тёмно-фиолетовый стяг раскрывается сверху вниз */
.role-anim--royal-banner .yd-overlay-card {
  animation: ydRoyalUnfurl .7s cubic-bezier(.2,.9,.3,1.2);
  transform-origin: top center;
}
@keyframes ydRoyalUnfurl {
  0% { transform: scaleY(.1) translateY(-40px); opacity: 0; }
  60% { transform: scaleY(1.05) translateY(4px); opacity: 1; }
  100% { transform: scaleY(1) translateY(0); }
}
.role-anim--royal-banner .yd-role-badge { background: linear-gradient(135deg,#7d3fa0,#3d2f66); }

/* arcane-sigil — печать закручивается при появлении */
.role-anim--arcane-sigil .yd-overlay-icon { animation: ydSigilSpin 1s ease-out; display: inline-block; }
@keyframes ydSigilSpin {
  0% { transform: rotate(-180deg) scale(.4); opacity: 0; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
.role-anim--arcane-sigil .yd-role-badge { background: linear-gradient(135deg,#9b3fd4,#5b4d8a); }

/* simple-badge — скромное появление для младших ролей */
.role-anim--simple-badge .yd-overlay-card { animation: ydSimpleFade .35s ease-out; }
@keyframes ydSimpleFade {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.role-anim--simple-badge .yd-role-badge {
  background: var(--color-sand-dark, #d8c395);
  color: var(--color-dark, #2b2013);
}

@keyframes ydBadgePulse {
  0%,100% { box-shadow: 0 3px 10px rgba(0,0,0,.25); }
  50% { box-shadow: 0 3px 22px rgba(224,161,63,.7); }
}

/* дальше — полноэкранные шоу с фазами climax/ambient, см FX_SHOWS в notifications-overlay.js */

/* lightning-storm: гроза на весь экран */
.role-anim--lightning-storm.yd-overlay-backdrop { transition: background 1.2s ease; }
.role-anim--lightning-storm.is-climax {
  background: rgba(8,10,24,.88);
  animation: ydStormRumble .4s ease-in-out infinite;
}
.role-anim--lightning-storm.is-ambient { background: rgba(15,18,34,.7); }
@keyframes ydStormRumble {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-2px,1px); }
  50% { transform: translate(2px,-1px); }
  75% { transform: translate(-1px,-2px); }
}
.yd-fx-bolt{
  position:absolute;
  top:-5%;
  width:3px;
  height:55%;
  background:linear-gradient(180deg, #fff, #cbe8ff 40%, transparent);
  box-shadow:0 0 12px 3px #cbe8ff, 0 0 30px 8px rgba(180,220,255,.6);
  clip-path:polygon(50% 0%, 65% 20%, 45% 22%, 60% 45%, 35% 48%, 55% 75%, 30% 78%, 50% 100%, 20% 82%, 42% 76%, 15% 50%, 40% 46%, 18% 24%, 40% 20%);
  opacity:0;
  animation: ydBoltFlicker .5s ease-out;
}
@keyframes ydBoltFlicker {
  0% { opacity: 0; }
  8% { opacity: 1; }
  14% { opacity: .2; }
  20% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}
.yd-fx-flash {
  position: absolute;
  inset: 0;
  background: #e8f2ff;
  animation: ydFlashPulse .22s ease-out forwards;
}
@keyframes ydFlashPulse {
  0% { opacity: .85; }
  100% { opacity: 0; }
}
.role-anim--lightning-storm.is-climax .yd-overlay-card { animation: ydCardShake .35s ease-in-out infinite; }
@keyframes ydCardShake {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-3px,2px); }
  50% { transform: translate(3px,-1px); }
  75% { transform: translate(-2px,-2px); }
}
.role-anim--lightning-storm .yd-role-badge {
  background: linear-gradient(135deg,#7fd3e8,#2f8fe0);
  animation: ydBadgePulse 1.2s ease-in-out infinite;
}
/* сполохи по краям на дальнем плане + косой дождь */
.yd-fx-side-flicker {
  position: absolute;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(203,232,255,.55), transparent 70%);
  animation: ydFlashPulse .4s ease-out forwards;
}
.yd-fx-rain {
  position: absolute;
  top: -5%;
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(180,220,255,.7));
  transform: rotate(12deg);
  animation: ydRainFall linear forwards;
}
@keyframes ydRainFall {
  0% { transform: translateY(0) rotate(12deg); }
  100% { transform: translateY(115vh) rotate(12deg); }
}

/* starfall: непрерывный звёздный дождь */
.role-anim--starfall.is-climax{ background:rgba(20,16,40,.6); }
.role-anim--starfall.is-ambient{ background:rgba(20,16,40,.35); }
.role-anim--starfall.yd-overlay-backdrop{ transition:background 1.5s ease; }
.yd-fx-star {
  position: absolute;
  top: -8%;
  color: #f0e0a8;
  text-shadow: 0 0 8px #f0c14b, 0 0 16px rgba(240,193,75,.6);
  animation: ydStarFall linear forwards;
}
@keyframes ydStarFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(115vh) rotate(360deg); opacity: 0; }
}
.role-anim--starfall .yd-overlay-card { animation: ydRoyalUnfurl .8s cubic-bezier(.2,.9,.3,1.2); }
.role-anim--starfall .yd-role-badge {
  background: linear-gradient(135deg,#f5e7a8,#e8c94a);
  color: #4a3d1a;
  animation: ydBadgePulse 1.8s ease-in-out infinite;
}
/* кометы с хвостом, плюс кольца-искры */
.yd-fx-comet {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px #fff, 0 0 24px 6px rgba(240,193,75,.7);
  animation: ydCometFall linear forwards;
}
.yd-fx-comet::after {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8));
  transform: translateY(1px);
}
@keyframes ydCometFall {
  0% { transform: translate(0,0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-160px, 130vh); opacity: 0; }
}
.yd-fx-sparkle-ring {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(240,193,75,.8);
  animation: ydSparkleRingPop .9s ease-out forwards;
}
@keyframes ydSparkleRingPop {
  0% { transform: scale(.2); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* fire-eruption: экран заливает жаром */
.yd-fx-heat-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(224,86,47,.5), transparent 60%);
  animation: ydHeatPulse 1.8s ease-in-out infinite;
}
.yd-fx-heat-glow--intense {
  background: radial-gradient(circle at 50% 105%, rgba(224,86,47,.85), rgba(163,37,26,.3) 55%, transparent 75%);
  animation: ydHeatPulse .7s ease-in-out infinite;
}
@keyframes ydHeatPulse {
  0%,100% { opacity: .55; }
  50% { opacity: 1; }
}
.yd-fx-spark {
  position: absolute;
  bottom: -4%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5d6, #e0562f 70%);
  box-shadow: 0 0 8px 2px rgba(224,86,47,.8);
  animation: ydSparkRise 1.6s ease-out forwards;
}
@keyframes ydSparkRise {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--drift,0), -85vh) scale(.3); opacity: 0; }
}
.role-anim--fire-eruption.is-climax .yd-overlay-card { animation: ydFireShake .5s ease-in-out infinite; }
@keyframes ydFireShake {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.01); }
}
.role-anim--fire-eruption .yd-role-badge {
  background: linear-gradient(135deg,#f0a830,#a3251a);
  animation: ydBadgePulse 1.3s ease-in-out infinite;
}
/* дым, поднимающийся вверх, плюс падающие угли */
.yd-fx-smoke {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,60,55,.55), transparent 70%);
  animation: ydSmokeRise 2.6s ease-out forwards;
}
@keyframes ydSmokeRise {
  0% { transform: translate(0,0) scale(.5); opacity: .6; }
  100% { transform: translate(var(--drift,0), -90vh) scale(1.6); opacity: 0; }
}
.yd-fx-ember {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 6px 2px rgba(255,140,20,.8);
  animation: ydEmberFall 2.2s ease-in forwards;
}
@keyframes ydEmberFall {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(60vh); opacity: 0; }
}

/* frost-shatter: волны ледяных осколков */
.role-anim--frost-shatter.is-climax{ background:rgba(200,235,245,.35); }
.role-anim--frost-shatter.is-ambient{ background:rgba(200,235,245,.12); }
.role-anim--frost-shatter.yd-overlay-backdrop{ transition:background 1.2s ease; }
.yd-fx-shard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 26px;
  background: linear-gradient(180deg, #eaffff, #7fd3e8);
  clip-path: polygon(50% 0%, 100% 30%, 70% 100%, 30% 100%, 0% 30%);
  box-shadow: 0 0 6px rgba(127,211,232,.8);
  opacity: 0;
  animation: ydShardFly .8s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes ydShardFly {
  0% {
    opacity: 1;
    transform: translate(-50%,-50%) rotate(0deg) translateY(0);
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--angle) + 180deg))
      translate(0, calc(var(--dist) * -1));
  }
}
.role-anim--frost-shatter .yd-overlay-card { animation: ydSimpleFade .3s ease-out; }
.role-anim--frost-shatter .yd-role-badge { background: linear-gradient(135deg,#eaffff,#2f8fe0); color: #0a2540; }
/* снегопад плюс морозные вены, растущие по краям экрана */
.yd-fx-snowflake {
  position: absolute;
  top: -6%;
  color: #eaffff;
  text-shadow: 0 0 6px rgba(127,211,232,.8);
  animation: ydSnowDrift linear forwards;
}
@keyframes ydSnowDrift {
  0% { transform: translate(0,0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .9; }
  100% { transform: translate(30px,120vh) rotate(200deg); opacity: 0; }
}
.yd-fx-frost-vein {
  position: absolute;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(127,211,232,.9), transparent);
  animation: ydFrostVeinGrow .8s ease-out forwards;
}
.yd-fx-frost-vein--left { left: 0; transform-origin: left center; }
.yd-fx-frost-vein--right { right: 0; transform: scaleX(-1); transform-origin: right center; }
@keyframes ydFrostVeinGrow {
  0% { transform: scaleX(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* void-portal: разверзшийся портал в центре */
.role-anim--void-portal.is-climax{ background:rgba(15,8,25,.75); }
.role-anim--void-portal.is-ambient{ background:rgba(15,8,25,.45); }
.role-anim--void-portal.yd-overlay-backdrop{ transition:background 1.4s ease; }
.yd-fx-portal-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #9b3fd4;
  box-shadow: 0 0 30px 10px rgba(155,63,212,.5), inset 0 0 20px rgba(155,63,212,.6);
  transform: translate(-50%,-50%) scale(1);
  animation: ydPortalPulse 1.6s ease-in-out infinite;
}
@keyframes ydPortalPulse {
  0%,100% { transform: translate(-50%,-50%) scale(6) rotate(0deg); opacity: .6; }
  50% { transform: translate(-50%,-50%) scale(9) rotate(180deg); opacity: .9; }
}
.role-anim--void-portal.is-ambient .yd-fx-portal-ring { animation: ydPortalPulse 3.5s ease-in-out infinite; }
.yd-fx-void-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c9a0e8;
  box-shadow: 0 0 6px #9b3fd4;
  animation: ydVoidSuck .9s ease-in forwards;
}
@keyframes ydVoidSuck {
  0% {
    opacity: 1;
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translate(240px, 0);
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translate(0, 0);
  }
}
.role-anim--void-portal .yd-overlay-card { animation: ydSigilSpin .6s ease-out .3s backwards; }
.role-anim--void-portal .yd-role-badge { background: linear-gradient(135deg,#5b4d8a,#1a1230); }
/* внешнее кольцо портала, щупальца к центру, зловещий глаз во тьме */
.yd-fx-portal-ring--outer {
  width: 100px;
  height: 100px;
  border-color: #c9a0e8;
  opacity: .5;
  animation: ydPortalPulse 2.4s ease-in-out infinite reverse;
}
.yd-fx-void-tendril {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 220px;
  background: linear-gradient(180deg, transparent, rgba(155,63,212,.7) 60%, transparent);
  transform-origin: top center;
  animation: ydTendrilReach 1.6s ease-in forwards;
}
@keyframes ydTendrilReach {
  0% { transform: translate(-50%,-50%) rotate(var(--angle)) scaleY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--angle)) scaleY(1); opacity: 0; }
}
.yd-fx-void-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #e05a2f, #5b0f0f 70%);
  box-shadow: 0 0 14px 4px rgba(224,90,47,.7);
  transform: translate(-50%,-50%);
  animation: ydEyeBlink 1.2s ease-in-out forwards;
}
@keyframes ydEyeBlink {
  0% { opacity: 0; transform: translate(-50%,-50%) scaleY(0); }
  30% { opacity: 1; transform: translate(-50%,-50%) scaleY(1); }
  70% { opacity: 1; transform: translate(-50%,-50%) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scaleY(0); }
}

/* golden-ascension: вознесение — лучи, свет, ореолы, перья */
.role-anim--golden-ascension.is-climax{ background:rgba(60,45,10,.35); }
.role-anim--golden-ascension.is-ambient{ background:rgba(60,45,10,.15); }
.role-anim--golden-ascension.yd-overlay-backdrop{ transition:background 1.4s ease; }
.yd-fx-godrays {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(255,224,140,.35) 8deg, transparent 20deg,
    transparent 40deg, rgba(255,224,140,.3) 48deg, transparent 60deg,
    transparent 100deg, rgba(255,224,140,.3) 108deg, transparent 120deg,
    transparent 180deg, rgba(255,224,140,.35) 190deg, transparent 200deg,
    transparent 260deg, rgba(255,224,140,.3) 270deg, transparent 282deg,
    transparent 320deg, rgba(255,224,140,.3) 330deg, transparent 342deg
  );
  animation: ydGodraysSpin 14s linear infinite;
}
.yd-fx-godrays--intense { animation-duration: 6s; }
@keyframes ydGodraysSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.yd-fx-light-mote {
  position: absolute;
  bottom: -4%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #f0c14b 70%);
  box-shadow: 0 0 10px 3px rgba(240,193,75,.8);
  animation: ydMoteRise 2.6s ease-out forwards;
}
@keyframes ydMoteRise {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--drift,0), -95vh) scale(.3); opacity: 0; }
}
.yd-fx-halo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255,224,140,.7);
  box-shadow: 0 0 20px rgba(255,224,140,.5);
  transform: translate(-50%,-50%);
  animation: ydHaloExpand 1.4s ease-out forwards;
}
@keyframes ydHaloExpand {
  0% { transform: translate(-50%,-50%) scale(.3); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}
.yd-fx-feather {
  position: absolute;
  top: -6%;
  color: #fff3d6;
  text-shadow: 0 0 8px rgba(255,224,140,.7);
  font-size: 16px;
  animation: ydFeatherDrift ease-in forwards;
}
.yd-fx-feather::before { content: '⋮'; }
@keyframes ydFeatherDrift {
  0% { transform: translate(0,0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--sway,0),120vh) rotate(180deg); opacity: 0; }
}
.role-anim--golden-ascension .yd-overlay-card { animation: ydRoyalUnfurl .9s cubic-bezier(.2,.9,.3,1.2); }
.role-anim--golden-ascension .yd-role-badge {
  background: linear-gradient(135deg,#fff3d6,#f0c14b);
  color: #5a3d0a;
  animation: ydBadgePulse 1.6s ease-in-out infinite;
}

/* blood-moon: кроваво-красное затмение — вороны, пепел, трещины энергии */
.role-anim--blood-moon.is-climax{ background:rgba(20,4,4,.75); }
.role-anim--blood-moon.is-ambient{ background:rgba(20,4,4,.5); }
.role-anim--blood-moon.yd-overlay-backdrop{ transition:background 1.4s ease; }
.yd-fx-blood-moon {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c94a3a, #5b0f0f 70%);
  box-shadow: 0 0 60px 20px rgba(163,37,26,.6);
  transform: translateX(-50%);
  animation: ydMoonPulse 2.4s ease-in-out infinite;
}
.yd-fx-blood-moon--dim { opacity: .6; animation-duration: 4s; }
@keyframes ydMoonPulse {
  0%,100% { box-shadow: 0 0 60px 20px rgba(163,37,26,.6); }
  50% { box-shadow: 0 0 90px 30px rgba(163,37,26,.85); }
}
.yd-fx-raven {
  position: absolute;
  left: 50%;
  font-size: 18px;
  filter: grayscale(1) brightness(.3);
  animation: ydRavenCircle linear forwards;
}
@keyframes ydRavenCircle {
  0% { transform: translateX(calc(-50% - 200px)) scaleX(var(--dir,1)); opacity: 0; }
  15% { opacity: .9; }
  85% { opacity: .9; }
  100% { transform: translateX(calc(-50% + 200px)) scaleX(var(--dir,1)); opacity: 0; }
}
.yd-fx-ash {
  position: absolute;
  top: -4%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #4a3d3d;
  animation: ydAshFall 3.4s linear forwards;
}
@keyframes ydAshFall {
  0% { transform: translate(0,0); opacity: 0; }
  10% { opacity: .8; }
  100% { transform: translate(var(--drift,0),110vh); opacity: 0; }
}
.yd-fx-crack {
  position: absolute;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(224,90,47,.8), transparent);
  animation: ydCrackFlash .6s ease-out forwards;
}
@keyframes ydCrackFlash {
  0% { opacity: 0; transform: scaleX(0) rotate(var(--r,0deg)); }
  40% { opacity: 1; transform: scaleX(1) rotate(var(--r,0deg)); }
  100% { opacity: 0; transform: scaleX(1) rotate(var(--r,0deg)); }
}
.role-anim--blood-moon.is-climax .yd-overlay-card { animation: ydCardShake .5s ease-in-out infinite; }
.role-anim--blood-moon .yd-role-badge { background: linear-gradient(135deg,#c94a3a,#3d0a0a); }

/* cosmic-nova: взрыв сверхновой — ударные волны, осколки, звёздная пыль */
.role-anim--cosmic-nova.is-climax{ background:rgba(6,4,20,.8); }
.role-anim--cosmic-nova.is-ambient{ background:rgba(6,4,20,.5); }
.role-anim--cosmic-nova.yd-overlay-backdrop{ transition:background 1.2s ease; }
.yd-fx-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(155,199,255,.8);
  box-shadow: 0 0 30px rgba(155,199,255,.5);
  transform: translate(-50%,-50%);
  animation: ydShockwaveExpand 1.1s ease-out forwards;
}
@keyframes ydShockwaveExpand {
  0% { transform: translate(-50%,-50%) scale(.3); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(14); opacity: 0; }
}
.yd-fx-galaxy-shard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #9b7fe8 60%);
  box-shadow: 0 0 10px 2px rgba(155,127,232,.8);
  animation: ydGalaxyShardFly 1.2s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes ydGalaxyShardFly {
  0% { transform: translate(-50%,-50%) rotate(var(--angle)) translate(0,0); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--angle)) translate(var(--dist),0); opacity: 0; }
}
.yd-fx-stardust {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255,255,255,.7);
  animation: ydStardustTwinkle 1.4s ease-in-out forwards;
}
@keyframes ydStardustTwinkle {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
.role-anim--cosmic-nova.is-climax .yd-overlay-card { animation: ydFireShake .4s ease-in-out infinite; }
.role-anim--cosmic-nova .yd-role-badge { background: linear-gradient(135deg,#9b7fe8,#2f2560); }

/* emerald-bloom: лозы по краям, светлячки, лепестки по ветру */
.role-anim--emerald-bloom.is-climax{ background:rgba(10,30,14,.45); }
.role-anim--emerald-bloom.is-ambient{ background:rgba(10,30,14,.2); }
.role-anim--emerald-bloom.yd-overlay-backdrop{ transition:background 1.4s ease; }
.yd-fx-vines {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 300px 500px at -5% 110%, rgba(79,158,74,.35), transparent 60%),
    radial-gradient(ellipse 300px 500px at 105% -10%, rgba(79,158,74,.35), transparent 60%);
  animation: ydVinesSway 4s ease-in-out infinite;
}
.yd-fx-vines--dim { opacity: .5; animation-duration: 6s; }
@keyframes ydVinesSway {
  0%,100% { opacity: .85; }
  50% { opacity: 1; }
}
.yd-fx-firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8f5a0;
  box-shadow: 0 0 10px 4px rgba(232,245,160,.8);
  animation: ydFireflyFloat ease-in-out forwards;
}
@keyframes ydFireflyFloat {
  0% { opacity: 0; transform: translate(0,0); }
  15% { opacity: 1; }
  50% { transform: translate(20px,-16px); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-10px,-30px); }
}
.yd-fx-petal {
  position: absolute;
  top: -6%;
  color: #f0a8c9;
  font-size: 13px;
  animation: ydPetalDrift ease-in forwards;
}
.yd-fx-petal::before { content: '❀'; }
@keyframes ydPetalDrift {
  0% { transform: translate(0,0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translate(var(--sway,0),120vh) rotate(300deg); opacity: 0; }
}
.yd-fx-pollen-burst {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,245,160,.9), transparent 70%);
  animation: ydSparkleRingPop .9s ease-out forwards;
}
.role-anim--emerald-bloom .yd-overlay-card { animation: ydSimpleFade .4s ease-out; }
.role-anim--emerald-bloom .yd-role-badge { background: linear-gradient(135deg,#8fd47a,#2f6b2a); }

/* shadow-eclipse: тьма затягивает экран, тени тянутся щупальцами, багровый глаз в центре */
.role-anim--shadow-eclipse.is-climax{ background:rgba(4,2,8,.85); }
.role-anim--shadow-eclipse.is-ambient{ background:rgba(4,2,8,.6); }
.role-anim--shadow-eclipse.yd-overlay-backdrop{ transition:background 1.6s ease; }
.yd-fx-eclipse-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 160px 60px rgba(0,0,0,.7);
  animation: ydVignettePulse 3s ease-in-out infinite;
}
.yd-fx-eclipse-vignette--intense {
  box-shadow: inset 0 0 220px 90px rgba(0,0,0,.85);
  animation-duration: 1.6s;
}
@keyframes ydVignettePulse {
  0%,100% { opacity: .8; }
  50% { opacity: 1; }
}
.yd-fx-shadow-tendril {
  position: absolute;
  width: 3px;
  background: linear-gradient(180deg, rgba(90,40,120,.8), transparent);
  animation: ydTendrilCreep 1.8s ease-in forwards;
}
.yd-fx-shadow-tendril--top { top: 0; left: var(--pos); height: 0; animation-name: ydTendrilCreepV; }
.yd-fx-shadow-tendril--bottom { bottom: 0; left: var(--pos); height: 0; transform: scaleY(-1); animation-name: ydTendrilCreepV; }
.yd-fx-shadow-tendril--left { left: 0; top: var(--pos); width: 0; height: 3px; animation-name: ydTendrilCreepH; }
.yd-fx-shadow-tendril--right { right: 0; top: var(--pos); width: 0; height: 3px; transform: scaleX(-1); animation-name: ydTendrilCreepH; }
@keyframes ydTendrilCreepV {
  0% { height: 0; opacity: 0; }
  30% { opacity: 1; }
  100% { height: 45vh; opacity: 0; }
}
@keyframes ydTendrilCreepH {
  0% { width: 0; opacity: 0; }
  30% { opacity: 1; }
  100% { width: 45vw; opacity: 0; }
}
.yd-fx-dark-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9b3fd4;
  box-shadow: 0 0 8px 3px rgba(155,63,212,.7);
  animation: ydStardustTwinkle .9s ease-in-out forwards;
}
.yd-fx-eclipse-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #c94a3a, #1a0505 70%);
  box-shadow: 0 0 20px 6px rgba(201,74,58,.7);
  transform: translate(-50%,-50%);
  animation: ydEyeBlink 1.4s ease-in-out forwards;
}
.role-anim--shadow-eclipse.is-climax .yd-overlay-card { animation: ydCardShake .6s ease-in-out infinite; }
.role-anim--shadow-eclipse .yd-role-badge { background: linear-gradient(135deg,#5b2a78,#0a0410); }

/* Входящее личное сообщение — не блокирует экран и не смешивается с общими уведомлениями. */
.yd-message-toast {
  position: fixed;
  z-index: 9100;
  top: max(16px, env(safe-area-inset-top));
  right: 18px;
  width: min(370px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--yd-border, var(--color-line, #c7ad7a));
  border-radius: var(--yd-radius-card, 14px);
  background: var(--yd-surface, rgba(255, 250, 239, .98));
  color: var(--yd-text, var(--color-dark, #2b2013));
  box-shadow: var(--yd-shadow-2, 0 12px 34px rgba(58, 38, 9, .25));
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-12px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, box-shadow .18s ease;
}
.yd-message-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.yd-message-toast:hover { box-shadow: var(--yd-shadow-3, 0 16px 40px rgba(58, 38, 9, .34)); }
.yd-message-toast__avatar {
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-amber-soft, #e0a13f);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ead6a6, #b8720c);
  color: #3a2609;
  font-weight: 800;
}
.yd-message-toast__avatar img { width: 100%; height: 100%; object-fit: cover; }
.yd-message-toast__content { min-width: 0; display: grid; gap: 2px; }
.yd-message-toast__content strong { font-size: 13.5px; line-height: 1.2; color: var(--color-amber-dark, #7a4a08); }
.yd-message-toast__content small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #5b4a33;
  font-size: 12.5px;
  line-height: 1.35;
}
.yd-message-toast__close { font-size: 18px; color: #967b47; line-height: 1; padding: 3px; }
@media (max-width: 560px) {
  .yd-message-toast { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); right: 12px; width: calc(100vw - 24px); }
}

/* Final quality layer: keyboard clarity and a calm alternative to decorative motion. */
.yd-overlay-close:focus-visible,.yd-overlay-btn:focus-visible,.yd-message-toast:focus-visible,.yd-message-toast__close:focus-visible{ outline:3px solid var(--yd-focus-ring,rgba(210,157,42,.42)); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .yd-overlay-backdrop,.yd-overlay-card,.yd-overlay-card::before,.yd-overlay-card::after,.yd-overlay-fx *,.yd-role-badge,.yd-message-toast{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; }
}