/* Диалог с персонажем после расклада — к assets/reader-stage.js.
   Сцена слева, речь справа, как в текстовой РПГ. Формы прямоугольные (One Curve Rule),
   кегли — со шкалы DESIGN.md: 10 / 11 / 13 / 15 / 17 / 26 / 30. */
.dlg{display:grid;grid-template-columns:212px minmax(0,1fr);gap:30px;align-items:start;margin-bottom:26px}
.dlg[hidden]{display:none}
/* Липнет только там, где помещается целиком под шапкой: на 761–900 px шапка выше
   (две строки), в альбомной ориентации телефона сцена не влезает по высоте */
.rs-stage{position:static}
@media (min-width:761px) and (min-height:620px){.rs-stage{position:sticky;top:84px}}
@media (min-width:761px) and (max-width:900px) and (min-height:620px){.rs-stage{top:104px}}

/* Рамка-оттиск: двойная золотая линия и метки углов, как у гравюрной доски */
.rs-plate{position:relative;width:212px;aspect-ratio:3/4;background:var(--indigo);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.55),0 26px 50px -30px #000}
.rs-plate::before{content:"";position:absolute;inset:6px;box-shadow:inset 0 0 0 1px rgba(201,162,39,.22);z-index:2;pointer-events:none}
.rs-plate::after{content:"";position:absolute;inset:-5px;z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left top/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/1px 14px no-repeat}
.rs-plate img{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:cover;display:block}
.rs-plate img:not([src]){visibility:hidden}

.rs-who{margin-top:16px}
.rs-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.rs-name{display:block;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;color:var(--vellum);margin-top:2px}
.rs-mood{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lit);margin-top:8px;min-height:1.7em}
.rs-note{display:block;font-size:13px;line-height:1.5;color:var(--text-faint);margin-top:8px}
.rs-tag{display:block;font-size:13px;line-height:1.5;color:var(--text-muted);margin-top:10px}

.rs-talk{display:flex;flex-direction:column;gap:14px;min-width:0}
.rs-log{display:flex;flex-direction:column;gap:16px}
.rs-line{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;animation:rs-rise .35s var(--ease) both}
.rs-h{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rs-md{font-style:normal;color:var(--text-faint)}
.rs-p{white-space:pre-wrap;font-size:17px;line-height:1.7}
.rs-line.rs-reader .rs-p{color:var(--text-soft);background:linear-gradient(166deg,rgba(19,27,61,.9),rgba(11,16,38,.88));
  padding:18px 22px;box-shadow:inset 0 0 0 1px rgba(201,162,39,.2)}
.rs-line.rs-reader.rs-first .rs-p{padding:26px 28px}
.rs-ava{display:none}
.rs-line.rs-user{justify-items:end}
.rs-line.rs-user .rs-p{max-width:78%;font-size:15px;line-height:1.55;color:var(--star);background:rgba(201,162,39,.1);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.3);padding:10px 16px}
.rs-line.rs-user .rs-h{justify-content:flex-end}
.rs-line.rs-typing .rs-p{background:none;box-shadow:none;padding:4px 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.rs-dots i{display:inline-block;width:5px;height:5px;margin-left:5px;background:var(--gold);vertical-align:middle;animation:rs-blink 1.2s infinite}
.rs-dots i:nth-child(2){animation-delay:.2s}.rs-dots i:nth-child(3){animation-delay:.4s}
.rs-line.rs-sys{justify-items:start}
.rs-line.rs-sys .rs-p{font-size:15px;line-height:1.55;color:#F0C4B8;background:rgba(212,89,63,.1);box-shadow:inset 0 0 0 1px rgba(212,89,63,.4);padding:10px 16px}

/* Служебные действия у реплики — тихие, чтобы не спорили с речью */
.rs-act{all:unset;cursor:pointer;margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);padding:2px 0;transition:color .2s}
.rs-line.rs-user .rs-act{margin-left:0}
.rs-line.rs-sys .rs-act{margin:4px 0 0;color:var(--gold-lit)}
.rs-act:hover{color:var(--gold-lit)}
.rs-act:focus-visible{outline:1px solid var(--gold-lit);outline-offset:3px;color:var(--gold-lit)}

/* Реплики на выбор — пронумерованы, как ответы в диалоге РПГ */
.rs-opts{list-style:none;display:grid;gap:2px;margin:0;padding:0}
.rs-opts[hidden]{display:none}
.rs-opts button{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:26px 1fr;align-items:baseline;width:100%;padding:8px 12px;
  font-size:15px;line-height:1.5;color:var(--text-soft);box-shadow:inset 1px 0 0 rgba(201,162,39,.25);transition:background .2s,color .2s,box-shadow .2s}
.rs-opts button span{font-family:var(--mono);font-size:11px;color:var(--gold)}
.rs-opts button:hover,.rs-opts button:focus-visible{background:rgba(201,162,39,.08);color:var(--gold-lit);box-shadow:inset 2px 0 0 var(--gold)}

.rs-ask{display:flex;gap:10px;align-items:flex-end}
.rs-ask[hidden]{display:none}
.rs-ask textarea{flex:1;width:auto;min-height:54px;max-height:200px;resize:none;padding:13px 15px;background:rgba(19,27,61,.6);color:var(--star);
  font-family:inherit;font-size:15px;line-height:1.5;border:1px solid rgba(201,162,39,.3)}
.rs-ask textarea:focus{outline:none;border-color:var(--gold)}
.rs-ask textarea::placeholder{color:var(--text-faint)}
.rs-ask .btn{padding:14px 22px;white-space:nowrap}
.rs-meta{display:flex;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.rs-count{margin-left:auto}
.rs-done{color:var(--text-faint);font-size:15px}
.rs-done[hidden]{display:none}
.rs-done a{color:var(--gold-lit)}

/* Блок ожидания: вместо крутилки — тот, кто будет читать, смотрит в карты */
.rs-wait{margin:0 auto 18px;width:120px}
.rs-plate.sm{width:120px}
.rs-plate.sm::before{inset:4px}
.rs-plate.sm img{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
.waiting.has-face .orbit{display:none}

@keyframes rs-blink{0%,100%{opacity:.2}40%{opacity:1}}
@keyframes rs-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .dlg{grid-template-columns:minmax(0,1fr);gap:18px}
  .rs-stage{position:static;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center}
  .rs-plate{width:96px}
  .rs-plate::after{inset:-4px;background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px}
  .rs-plate::before{inset:4px}
  .rs-plate img{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
  .rs-who{margin-top:0}.rs-name{font-size:26px}.rs-tag{display:none}
  /* на телефоне сцена уезжает вверх — лицо переезжает к каждой реплике */
  .rs-line.rs-reader{grid-template-columns:40px minmax(0,1fr);column-gap:12px}
  .rs-line.rs-reader .rs-h,.rs-line.rs-reader .rs-p{grid-column:2}
  .rs-line.rs-reader .rs-ava{display:block;grid-row:1 / span 2;width:40px;aspect-ratio:3/4;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(201,162,39,.4)}
  .rs-line.rs-reader .rs-p{padding:14px 16px}
  .rs-line.rs-reader.rs-first .rs-p{padding:18px}
  .rs-line.rs-user .rs-p{max-width:88%}
  .rs-ask{flex-wrap:wrap}
  .rs-ask textarea{flex:1 1 100%;font-size:17px}   /* <16px iOS Safari приближает страницу при фокусе */
  .rs-ask .btn{width:100%}
  .rs-act{padding:6px 0}
}
@media (prefers-reduced-motion:reduce){.rs-line,.rs-dots i{animation:none}}