/* RIPPA DIALOGUE: the one conversational surface for MemeRippa / $REAP.
   An old-school RPG text box in the Reaper's Ledger palette: a hard bone plate on near-black, a
   violet name tag welded to its top edge with a portrait tile, mono text typed one character at a
   time, a blinking advance arrow. Square corners everywhere (only coins are round).

   Theming: override the --rdlg-* custom properties on .rdlg or any ancestor.
   Fonts (optional, falls back to system mono/sans): Archivo, Instrument Serif, IBM Plex Mono. */

.rdlg{
  --rdlg-ink:#0b0b0c; --rdlg-bone:#ebe5d5; --rdlg-dim:rgba(235,229,213,.6); --rdlg-rule:rgba(235,229,213,.2);
  --rdlg-cut:#a78bfa; --rdlg-blood:#ff4a26;
  --rdlg-size:24px;          /* text size */
  --rdlg-portrait:260px;     /* big portrait width in .rdlg--big */
  --rdlg-width:860px;        /* max box width */
  --rdlg-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --rdlg-disp:Archivo,'Arial Narrow',sans-serif;
  --rdlg-serif:'Instrument Serif',Georgia,serif;
  position:relative; display:block; width:100%; max-width:var(--rdlg-width); color:var(--rdlg-bone);
  font-family:var(--rdlg-mono); -webkit-font-smoothing:antialiased;
}
.rdlg[hidden]{display:none}

/* overlay mode: pinned to the bottom of the viewport (stream / site) */
.rdlg--overlay{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); width:calc(100% - 32px); z-index:320}

/* ── the plate ─────────────────────────────────────────────────────────── */
.rdlg-box{
  position:relative; z-index:1; background:var(--rdlg-ink);
  border:3px solid var(--rdlg-bone); padding:42px 32px 28px;
  box-shadow:0 0 0 3px var(--rdlg-ink), 10px 10px 0 3px rgba(0,0,0,.55);
  animation:rdlg-in .16s steps(3);
}
.rdlg-box:focus{outline:0}
.rdlg-box:focus-visible{outline:2px solid var(--rdlg-cut); outline-offset:6px}
.rdlg-box::before{ /* inner hairline: the ledger rule */
  content:""; position:absolute; inset:6px; border:1px solid var(--rdlg-rule); pointer-events:none;
}
.rdlg-box::after{ /* the cut: one violet diagonal tick in the top-right corner */
  content:""; position:absolute; right:22px; top:-12px; width:3px; height:30px; background:var(--rdlg-cut);
  transform:rotate(36deg); /* 36deg from vertical = the brand's -54deg slice */
}
@keyframes rdlg-in{from{transform:scaleY(.25);opacity:.4}to{transform:none;opacity:1}}

/* ── the name tag, welded to the top edge ─────────────────────────────── */
.rdlg-tag{
  position:absolute; top:-32px; left:18px; display:flex; align-items:stretch; height:54px;
  border:3px solid var(--rdlg-ink); box-shadow:0 0 0 3px var(--rdlg-bone); background:var(--rdlg-cut);
}
.rdlg-tag-pic{width:64px; background:var(--rdlg-ink); border-right:3px solid var(--rdlg-ink); overflow:hidden; position:relative}
.rdlg-tag-pic img{position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px); object-fit:cover}
.rdlg-who{
  display:flex; align-items:center; padding:2px 14px 0; color:var(--rdlg-ink);
  font-family:var(--rdlg-disp); font-weight:900; font-stretch:62%; font-size:36px; letter-spacing:.04em; text-transform:uppercase;
}
.rdlg-mood{
  display:flex; align-items:center; padding:0 12px; background:var(--rdlg-ink); color:var(--rdlg-bone);
  font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.rdlg-mood:empty{display:none}

/* ── the text ─────────────────────────────────────────────────────────── */
.rdlg-text{font-size:var(--rdlg-size); font-weight:500; line-height:1.55; min-height:3.1em; color:var(--rdlg-bone); white-space:pre-line}
.rdlg-text b,.rdlg-text strong{font-weight:600; color:#fff; box-shadow:inset 0 -.32em 0 rgba(167,139,250,.38)}
.rdlg-text em{font-family:var(--rdlg-serif); font-style:italic; font-size:1.22em; line-height:1; letter-spacing:0}
.rdlg-text .loss{color:var(--rdlg-blood); font-weight:600}
.rdlg-text .win{color:#fff; font-weight:600}
.rdlg-text .redact{background:var(--rdlg-bone); color:transparent; user-select:none}
.rdlg-text .dim{color:var(--rdlg-dim)}
.rdlg-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.rdlg-next{
  position:absolute; right:22px; bottom:12px; color:var(--rdlg-cut); font-size:22px; line-height:1;
  animation:rdlg-blink 1s steps(2,jump-none) infinite;
}
.rdlg-next[hidden]{display:none}
@keyframes rdlg-blink{0%{opacity:1}100%{opacity:0}}

/* ── choices ──────────────────────────────────────────────────────────── */
.rdlg-choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:16px}
.rdlg-choices[hidden]{display:none}
.rdlg-choices button{
  position:relative; text-align:left; cursor:pointer; background:transparent; color:var(--rdlg-bone);
  border:2px solid var(--rdlg-rule); border-radius:0; padding:11px 14px 11px 34px;
  font:600 15px/1.2 var(--rdlg-mono); letter-spacing:.08em; text-transform:uppercase;
}
.rdlg-choices button::before{content:"▸"; position:absolute; left:13px; color:var(--rdlg-cut); opacity:0}
.rdlg-choices button:hover,.rdlg-choices button:focus-visible,.rdlg-choices button.is-selected{
  border-color:var(--rdlg-bone); background:rgba(167,139,250,.12); outline:0}
.rdlg-choices button:hover::before,.rdlg-choices button:focus-visible::before,.rdlg-choices button.is-selected::before{opacity:1}
.rdlg-choices button.warn{border-color:rgba(255,74,38,.5); color:#ffb4a3}
.rdlg-choices button.warn::before{color:var(--rdlg-blood)}
.rdlg-choices button.warn:hover,.rdlg-choices button.warn:focus-visible{border-color:var(--rdlg-blood); background:rgba(255,74,38,.12)}

/* ── big portrait: Rippa stands behind the plate's left end; the bust cut hides behind the box ── */
.rdlg--big{padding-top:calc(var(--rdlg-portrait) * .62)}
.rdlg--big .rdlg-portrait{
  position:absolute; left:-6px; bottom:36px; width:var(--rdlg-portrait); height:var(--rdlg-portrait); z-index:0;
  object-fit:contain; pointer-events:none;
}
.rdlg--big .rdlg-tag{left:calc(var(--rdlg-portrait) * .9)}
.rdlg--big .rdlg-tag-pic{display:none}
.rdlg:not(.rdlg--big) .rdlg-portrait{display:none}

@media (max-width:640px){
  .rdlg{--rdlg-size:18px; --rdlg-portrait:150px}
  .rdlg-box{padding:36px 18px 24px}
  .rdlg-tag{height:48px; top:-28px; left:14px}
  .rdlg-tag-pic{width:54px}
  .rdlg-who{font-size:30px} .rdlg-mood{display:none}
  .rdlg-next{font-size:18px; right:16px; bottom:10px}
  .rdlg--big .rdlg-tag{left:calc(var(--rdlg-portrait) * .85)}
}

/* reduced motion: no pop-in, no blink; the JS also skips the typewriter */
@media (prefers-reduced-motion:reduce){
  .rdlg-box{animation:none}
  .rdlg-next{animation:none}
}