/* InSpec — RPG portrait-dialogue (Wizard/Toasty/Bob). Brand: cyan #00D4FF · gold #F7C948
   · wizard-purple #8b5cf6 · goblin-green. Self-contained colors so it works standalone. */
.speech-stage{margin:20px 0 6px}
.sp-head{font-family:var(--display,'Press Start 2P',monospace);font-size:11px;letter-spacing:.04em;
  color:#F7C948;text-align:center;margin-bottom:16px;text-shadow:0 0 10px rgba(247,201,72,.4)}
.sp-log{display:flex;flex-direction:column;gap:13px}
.sp-turn{display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(9px);
  transition:opacity .45s ease,transform .45s ease}
.sp-turn.sp-in{opacity:1;transform:none}
.sp-port{flex-shrink:0;width:70px;text-align:center}
.sp-port img{width:66px;height:66px;border-radius:13px;object-fit:cover;
  border:2px solid rgba(255,255,255,.14);background:rgba(12,9,28,.7);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.sp-name{display:block;font-family:var(--display,monospace);font-size:7.5px;letter-spacing:.02em;
  margin-top:5px;color:#cfd3e6;line-height:1.45}
.sp-bubble{position:relative;flex:1;min-width:0;background:rgba(20,16,42,.82);
  border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px 15px;
  font-size:14.5px;line-height:1.52;color:#eef0fb}
.sp-bubble::before{content:'';position:absolute;left:-7px;top:22px;width:12px;height:12px;
  background:rgba(20,16,42,.82);border-left:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);transform:rotate(45deg)}
/* per-character accents */
.sp-wizard .sp-port img{border-color:#8b5cf6;box-shadow:0 0 15px rgba(139,92,246,.5)}
.sp-wizard .sp-name{color:#c4b5fd}
.sp-toasty .sp-port img{border-color:#F7C948;box-shadow:0 0 15px rgba(247,201,72,.45)}
.sp-toasty .sp-name{color:#fcd34d}
.sp-bob .sp-port img{border-color:#7bd14a;box-shadow:0 0 15px rgba(123,209,74,.5)}
.sp-bob .sp-name{color:#a3e635}
.sp-bob-bubble{font-family:'Courier New',ui-monospace,monospace;color:#a9e34b;
  letter-spacing:.03em;font-size:13.5px;word-break:break-word}
.sp-cipher-note{display:block;margin-top:8px;font-family:var(--body,system-ui),sans-serif;
  font-size:11px;font-style:italic;color:#828fab;letter-spacing:0}
@media(max-width:520px){
  .sp-port{width:56px}.sp-port img{width:52px;height:52px}
  .sp-bubble{font-size:13.5px;padding:10px 13px}.sp-name{font-size:7px}
}