/* story saga UI */
.saga-banner{
  display:none;margin-top:8px;padding:10px 14px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,#2a2230,#3d3040);border:1px solid #5a4a62;
  color:#f0e8ff;font-size:12px;font-weight:800;line-height:1.45;
  box-shadow:0 4px 16px rgba(40,20,50,.25);
  position:relative;z-index:4;
}
.saga-banner.on{display:block}
.saga-banner.phase-recover{background:linear-gradient(135deg,#E8F4E8,#F5FFF5);border-color:#B8D9BE;color:var(--ink)}
.saga-banner.phase-lonely{background:linear-gradient(135deg,#E8EEF8,#F5F8FF);border-color:#B8C8E8;color:var(--ink)}
.saga-banner.phase-duo{background:linear-gradient(135deg,#FFF8EA,#FFFDF8);border-color:var(--gold-soft);color:var(--ink)}
.saga-banner .saga-title{font-family:var(--disp);font-size:13px;letter-spacing:.3px;margin-bottom:4px;text-transform:uppercase}
.saga-banner .saga-bar{height:8px;border-radius:8px;background:rgba(0,0,0,.2);overflow:hidden;margin:8px 0 6px}
.saga-banner.phase-recover .saga-bar,.saga-banner.phase-lonely .saga-bar,.saga-banner.phase-duo .saga-bar{background:#E6D7C5}
.saga-banner .saga-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .35s}
.saga-banner .saga-meta{font-size:11px;opacity:.9}
.saga-act-btn{
  margin-top:8px;width:100%;border:none;border-radius:var(--r-sm);padding:10px 12px;
  font-family:var(--body);font-weight:900;font-size:12px;cursor:pointer;
  background:linear-gradient(160deg,var(--gold),#D49636);color:#fff;
  box-shadow:var(--shadow-sm);transition:.14s;
  position:relative;z-index:5;pointer-events:auto;
}
.saga-act-btn[hidden]{display:none!important}
.saga-act-btn:hover{transform:translateY(-1px)}
.saga-act-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.saga-banner.phase-kidnap .saga-act-btn{background:linear-gradient(160deg,#8B6B9A,#6A4F7A)}

.scene-card.saga-kidnap .cat-clic{opacity:0;pointer-events:none;transform:scale(.6)}
.scene-card.saga-kidnap .cat-shadow{opacity:0}
.scene-card.saga-kidnap::after{
  content:"🕶️";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  font-size:64px;opacity:.35;z-index:2;pointer-events:none;
}

.cat-clic.cat-sad .c-mouth{d:path("M 92 124 Q 100 118 108 124");stroke:#6A5548}
.cat-clic.cat-sad .c-eye{stroke:#6A5548}

.friend-cat{
  position:relative;flex:none;width:0;overflow:visible;pointer-events:none;
  opacity:0;transform:scale(.68,.92) rotate(-5deg);transform-origin:bottom center;
  transition:opacity .45s ease, width .45s ease, margin .45s ease;
}
.friend-cat.on{
  opacity:1;width:118px;margin-right:-6px;
  pointer-events:auto;cursor:pointer;
}
.friend-cat.on:active{transform:scale(.66,.9) rotate(-5deg)}
.friend-cat .cat-svg,
.friend-cat .friend-img{
  width:118px;height:148px;display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));
}
.friend-cat .friend-img{
  object-fit:contain;pointer-events:none;user-select:none;
}
.friend-cat.use-fallback .friend-img{display:none}
.friend-cat:not(.use-fallback) .friend-svg{display:none}
.friend-bounce{transform-origin:bottom center}
.friend-bounce.nom{animation:friendNom .26s ease}
@keyframes friendNom{
  0%{transform:scaleX(1) scaleY(1)}
  35%{transform:scaleX(1.1) scaleY(.88)}
  70%{transform:scaleX(.96) scaleY(1.04)}
  100%{transform:scaleX(1) scaleY(1)}
}
.friend-bubble{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%) scale(.9);
  background:#fff;border:2px solid #4A4540;border-radius:14px;
  padding:7px 12px;font-size:11px;font-weight:800;color:var(--ink);
  box-shadow:var(--shadow-sm);z-index:8;pointer-events:none;opacity:0;
  max-width:160px;text-align:center;line-height:1.25;white-space:nowrap;
}
.friend-bubble::after{
  content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#fff;border-bottom:0;
}
.friend-bubble.show{animation:friendBubblePop .35s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes friendBubblePop{
  0%{opacity:0;transform:translateX(-50%) scale(.6) translateY(6px)}
  100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}
}
.friend-cat.purring .friend-bounce{
  animation:friendPurrShake .55s ease-in-out infinite alternate;
}
.friend-cat.purring .friend-svg .c-eye,
.friend-cat.purring.use-fallback .friend-svg .c-eye{
  stroke:#5A8A68;stroke-width:3.5;
}
.friend-cat.purring .friend-svg .c-mouth,
.friend-cat.purring.use-fallback .friend-svg .c-mouth{
  stroke:#5A8A68;stroke-width:2.5;
}
.friend-cat.purring:not(.use-fallback) .friend-img{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.15)) saturate(1.05);
}
.friend-cat.purring::before{
  content:"♪ ~ ♪";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:900;color:#7A9E88;opacity:.85;pointer-events:none;
  animation:purNotes 1.1s ease-in-out infinite;
}
@keyframes friendPurrShake{
  0%{transform:rotate(-5deg) translateY(0)}
  100%{transform:rotate(-2deg) translateY(-3px)}
}
@keyframes purNotes{
  0%,100%{opacity:.45;transform:translateX(-50%) translateY(0)}
  50%{opacity:1;transform:translateX(-50%) translateY(-4px)}
}
.friend-cat.feed-react .friend-svg,
.friend-cat.feed-react .friend-img{
  animation:friendWant .4s ease;
}
@keyframes friendWant{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.06) rotate(2deg)}
}
.cats-wrap{
  position:relative;z-index:4;
  display:flex;align-items:flex-end;justify-content:center;
  gap:0;max-width:100%;
}
.scene-card.has-duo{overflow:visible}
.scene-stage.has-friend .cats-wrap{transform:translateX(4%)}

.modal.saga-modal{text-align:left}
.modal.saga-modal .mi{font-size:48px}
.saga-villain{color:#9D7BB0;font-weight:900}