/* Анимации спрайтов — «живые» персонажи */
@keyframes breath { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.006)} }
.sprite{ animation: breath 4.5s ease-in-out infinite; will-change: transform; }
.sprite.in{ animation: breath 4.5s ease-in-out infinite, spriteIn .42s ease backwards; }
@keyframes spriteIn { from{opacity:0; transform:translateY(26px) scale(.99)} to{opacity:1; transform:translateY(0) scale(1)} }

/* мигание — каждые 6-8с, разные фазы у разных персонажей */
@keyframes blink { 0%,91%,100%{transform:scaleY(1)} 94%{transform:scaleY(.04)} 97%{transform:scaleY(1)} }
.sprite .blink{ transform-origin: 50% 38%; animation: blink 6.5s infinite; will-change: transform; }
.sprite.center .blink{ animation-delay: -2.1s; }
.sprite.left .blink{   animation-delay: -3.7s; }

/* лёгкий «пых» облачком при смене сцены */
@keyframes puff { 0%{opacity:0; transform:scale(.94)} 30%{opacity:1} 100%{opacity:1; transform:scale(1)} }
#game{ animation: puff .55s ease-out; }

/* "машинописный" звук-курсор — без него, визуальный: тонкая мигающая чёрточка */
.dtext .cur{ display:inline-block; width:0.55em; height:1.05em; vertical-align:-0.18em;
  background: currentColor; opacity:.35; margin-left:1px; animation: blinkC 1s steps(2) infinite; }
@keyframes blinkC { 0%,49%{opacity:.35} 50%,100%{opacity:0} }

/* всплытие ачивки: ненавязчивый toast в правом нижнем углу */
.toast{ position:fixed; bottom:18px; right:18px; z-index:60; padding:11px 16px;
  background:linear-gradient(180deg,#232a3a,#181c28); border:1px solid var(--gold);
  border-radius:12px; color:#eef1f6; box-shadow:0 12px 30px rgba(0,0,0,.5);
  display:flex; gap:10px; align-items:center; max-width:300px;
  animation: toastIn .35s ease, toastOut .4s ease 3.4s forwards; }
.toast .t-ic{ width:32px; height:32px; border-radius:8px; background:var(--gold); color:#191204;
  display:grid; place-items:center; font-weight:800; flex-shrink:0; }
.toast .t-tt{ font-weight:700; font-size:.95em; line-height:1.2 }
.toast .t-hi{ color:var(--dim); font-size:.78em; }
@keyframes toastIn { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
@keyframes toastOut { to{opacity:0; transform:translateY(20px)} }

/* CG-вставка на весь экран */
.cg-view{ position:fixed; inset:0; z-index:55; background:#000;
  display:grid; place-items:center; cursor:pointer; }
.cg-view img{ max-width:100vw; max-height:100vh; object-fit:contain; animation: cgIn 1.2s ease; }
@keyframes cgIn { from{opacity:0; transform:scale(1.04)} to{opacity:1; transform:none} }
.cg-view::after{ content:"Клик — закрыть"; position:absolute; bottom:18px; left:50%;
  transform:translateX(-50%); color:#fff; font-size:.85em; padding:5px 14px;
  background:rgba(0,0,0,.55); border-radius:99px; opacity:.7; }

/* эпиграф главы */
.epigraph{ position:absolute; inset:0; z-index:7; display:grid; place-items:center;
  background:radial-gradient(80% 60% at 50% 40%,rgba(12,15,22,.85),rgba(0,0,0,.95));
  padding:40px; opacity:0; transition:opacity .8s ease; pointer-events:none; }
.epigraph.show{ opacity:1; pointer-events:auto; cursor:pointer; }
.epigraph blockquote{ font-family:"Georgia",serif; font-style:italic; font-size:clamp(16px,1.6vw,22px);
  line-height:1.6; color:#d8d0bd; max-width:640px; text-align:center; padding:0 24px; }
.epigraph blockquote::before, .epigraph blockquote::after{ content:""; display:block; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,182,76,.6),transparent); margin:14px auto; width:140px; }
.epigraph .e-author{ display:block; margin-top:14px; font-style:normal; font-size:.78em; color:var(--gold); letter-spacing:.1em; }
.epigraph .e-hint{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.5); font-size:.76em; letter-spacing:.2em; text-transform:uppercase; }

/* мини-игра «сочинение»: drag-and-drop */
.sort-game{ position:absolute; inset:0; z-index:7; display:grid; place-items:center;
  background:rgba(6,8,12,.78); backdrop-filter:blur(6px); padding:18px; }
.sort-game .sg-card{ max-width:780px; width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:24px; box-shadow:var(--shadow); }
.sort-game h3{ margin-bottom:8px; color:var(--gold); }
.sort-game p{ color:var(--dim); margin-bottom:18px; font-size:.92em; }
.sort-game .sg-pool, .sort-game .sg-result{ min-height:60px; padding:10px;
  background:rgba(255,255,255,.04); border:1px dashed var(--line); border-radius:12px; margin-bottom:14px;
  display:flex; flex-wrap:wrap; gap:8px; }
.sort-game .sg-result{ min-height:80px; background:rgba(232,182,76,.05); border-color:rgba(232,182,76,.4); }
.sort-game .sg-frag{ padding:8px 12px; background:#222a3b; border:1px solid rgba(255,255,255,.1);
  border-radius:9px; cursor:grab; user-select:none; font-size:.88em; line-height:1.3;
  transition:transform .12s, background .12s; }
.sort-game .sg-frag:hover{ background:#2c354a; transform:translateY(-1px); }
.sort-game .sg-frag.dragging{ opacity:.4; }
.sort-game .sg-frag.in-result{ background:#2a3a2c; border-color:rgba(160,210,160,.4); }
.sort-game .sg-buttons{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.sort-game .sg-timer{ color:var(--gold); font-weight:700; font-size:1.4em; margin-bottom:8px;
  font-variant-numeric:tabular-nums; }
.sort-game .sg-status{ font-size:.92em; color:var(--dim); margin-bottom:8px; min-height:1.3em; }
.sort-game .sg-status.ok{ color:#7ce0a3; }
.sort-game .sg-status.bad{ color:#e08b7c; }

/* stat-бары отношений в углу */
.rel-bar{ position:absolute; bottom:18px; left:18px; z-index:6; display:flex; gap:6px;
  background:rgba(8,10,15,.7); padding:8px 10px; border-radius:12px; border:1px solid var(--line);
  backdrop-filter:blur(6px); font-size:.74em; transition:opacity .5s; }
.rel-bar.hidden{ opacity:0; pointer-events:none; }
.rel-bar .rb{ display:flex; align-items:center; gap:5px; }
.rel-bar .rb .dot{ width:8px; height:8px; border-radius:50%; }
.rel-bar .rb .name{ color:var(--dim); margin-right:2px; }
.rel-bar .rb .bar{ width:60px; height:5px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.rel-bar .rb .fill{ display:block; height:100%; border-radius:99px; transition:width .6s ease; }