/* Brood Front: the story overlay and the Story log (T893). The overlay sits
   over the current screen inside .game-scroll (the kit header stays usable);
   the card never scrolls on a phone, with a scroll fallback for tiny heights. */
.st-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 10px calc(12px + var(--rr-inset-right, 0px)) calc(12px + var(--rr-inset-bottom, 0px)) calc(12px + var(--rr-inset-left, 0px));
  background: rgba(10, 6, 24, 0.82);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.st-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: min(100%, 360px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, #2c2060, #1c1440); box-shadow: 0 0 0 2px #7a4fd0, 0 8px 28px rgba(0, 0, 0, 0.5);
}
.st-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a89ad0; }
.st-vis { position: relative; display: flex; justify-content: center; align-self: center; width: 100%; max-width: 320px; }
.st-art { display: block; border-radius: 12px; background: #14102a; width: 100%; height: auto; aspect-ratio: 2 / 1; box-shadow: 0 0 0 2px #7a4fd0, 0 4px 14px rgba(0, 0, 0, 0.5); }
.st-overlay[data-kind="panel"] .st-art { box-shadow: 0 0 0 2px #7a4fd0, 0 0 0 5px rgba(20, 16, 42, 0.9), 0 4px 14px rgba(0, 0, 0, 0.5); }
/* The comms panel on a transmission: a channel label with signal bars over the picture; a moving
   scan band (none under reduced motion). Not shown on a story panel. */
.st-hud {
  position: absolute; right: 8px; top: 6px; display: none; align-items: center; gap: 6px; pointer-events: none;
  padding: 2px 6px 2px 8px; border-radius: 8px; background: rgba(8, 6, 24, 0.62); box-shadow: inset 0 0 0 1px rgba(122, 79, 208, 0.6);
}
.st-overlay[data-kind="line"] .st-hud { display: flex; }
.st-chan { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #bfe6ff; }
.st-overlay[data-boss="1"] .st-chan { color: #ff9aa6; }
.st-signal { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.st-signal i { display: block; width: 3px; border-radius: 1px; background: #7fd6a0; box-shadow: 0 0 4px rgba(127, 214, 160, 0.7); }
.st-signal i:nth-child(1) { height: 4px; } .st-signal i:nth-child(2) { height: 7px; } .st-signal i:nth-child(3) { height: 10px; } .st-signal i:nth-child(4) { height: 12px; }
.st-overlay[data-boss="1"] .st-signal i { background: #ff6a7a; box-shadow: 0 0 4px rgba(255, 106, 122, 0.7); }
.st-scan { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; pointer-events: none; display: none; }
.st-overlay[data-kind="line"] .st-scan { display: block; }
.st-scan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; opacity: 0;
  background: linear-gradient(180deg, rgba(190, 230, 255, 0), rgba(190, 230, 255, 0.12), rgba(190, 230, 255, 0));
}
.st-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 1.3em; }
.st-name { font-size: 1.05rem; color: #ffd36b; }
.st-role { font-size: 0.78rem; color: #a89ad0; }
.st-text { position: relative; margin: 0; min-height: 5.6em; font-size: 1.05rem; line-height: 1.4; color: #e6dcff; overflow-wrap: anywhere; }
.st-rest { visibility: hidden; }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.st-count { font-size: 0.75rem; color: #a89ad0; text-align: right; }
.st-btns { display: flex; gap: 10px; }
.st-btn {
  flex: 1 1 0; min-width: 44px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 700; color: #e6dcff; background: #3b2a78;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.st-btn.primary { background: #ffd36b; color: #14102a; }
.st-btn.dim { background: #2c2060; box-shadow: inset 0 0 0 1px #7a4fd0; }
@media (prefers-reduced-motion: no-preference) {
  .st-overlay { animation: st-fade 0.18s ease-out both; }
  .st-overlay[data-kind="line"][data-typing="1"] .st-art { animation: st-talk 0.5s ease-in-out infinite alternate; }
  .st-overlay[data-kind="line"] .st-scan::before { opacity: 1; animation: st-scan 3.2s linear infinite; }
  .st-overlay[data-kind="line"][data-typing="1"] .st-signal i { animation: st-sig 0.5s ease-in-out infinite alternate; }
  .st-signal i:nth-child(2) { animation-delay: 0.1s; } .st-signal i:nth-child(3) { animation-delay: 0.2s; } .st-signal i:nth-child(4) { animation-delay: 0.3s; }
}
@keyframes st-scan { from { transform: translateY(-100%); } to { transform: translateY(480%); } }
@keyframes st-sig { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-talk { from { box-shadow: 0 0 0 2px #7a4fd0, 0 4px 14px rgba(0, 0, 0, 0.5); } to { box-shadow: 0 0 0 2px #7a4fd0, 0 0 14px 2px rgba(255, 211, 107, 0.55); } }

/* Settings button and the Story log screen. */
.st-log .st-list { gap: 6px; }
.st-gh { margin-top: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #a89ad0; }
.st-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px; flex: 0 0 auto; min-height: 48px; min-width: 0;
  padding: 6px 12px; border: 0; border-radius: 10px; text-align: left; font: inherit; color: #e6dcff; background: rgba(122, 79, 208, 0.18);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.st-row-t { font-weight: 700; font-size: 0.9rem; }
.st-row-s { font-size: 0.75rem; color: #c9b8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-empty { padding: 12px 4px; }