/* Dialogue — RPG text boxes. Retheme with the variables on .dlg. */
.dlg {
  --dlg-ink: #232a4a; --dlg-paper: #fdf7e8; --dlg-edge: #232a4a; --dlg-radius: 14px;
  --dlg-font: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif; --dlg-display: 'Lilita One', 'Arial Black', Impact, sans-serif;
  --dlg-portrait: min(44vh, 380px); --dlg-box-w: 760px; --dlg-focus: #3f8a37;
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 12px calc(16px + env(safe-area-inset-bottom)); pointer-events: auto; user-select: none; -webkit-user-select: none;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%);
}
.dlg[hidden] { display: none; }
.dlg-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dlg-portrait { position: absolute; bottom: 0; height: var(--dlg-portrait); width: auto; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), filter .25s, opacity .3s; filter: brightness(.55) saturate(.7); z-index: 1; }
.dlg-portrait img, .dlg-blank { height: 100%; width: auto; display: block; }
.dlg-blank { aspect-ratio: 3/4; border-radius: 30% 30% 8px 8px; display: grid; place-items: center; font: 700 80px/1 var(--dlg-display); color: #fff; }
.dlg-left { left: 2vw; transform: translateX(-120%); }
.dlg-right { right: 2vw; transform: translateX(120%) scaleX(-1); }
.dlg-portrait.dlg-in.dlg-left { transform: translateX(calc(var(--slot, 0) * 12vw)); }
.dlg-portrait.dlg-in.dlg-right { transform: translateX(calc(var(--slot, 0) * -12vw)) scaleX(-1); }
.dlg-portrait.dlg-speaking { filter: none; z-index: 2; }
.dlg-portrait img, .dlg-blank { transform-origin: 50% 100%; animation: dlg-breathe 3.2s ease-in-out infinite; }
@keyframes dlg-breathe { 50% { transform: scale(1.015, .985) } }
.dlg-portrait.dlg-speaking.dlg-left { transform: translateX(calc(var(--slot, 0) * 12vw)) translateY(0); }
.dlg-portrait.dlg-hop img, .dlg-portrait.dlg-hop .dlg-blank { animation: dlg-hop .35s ease-out, dlg-breathe 3.2s ease-in-out .35s infinite; }
@keyframes dlg-hop { 0% { transform: translateY(0) } 35% { transform: translateY(-4%) scale(1.02, .98) } 100% { transform: translateY(0) } }
.dlg-portrait.dlg-out { opacity: 0; transform: translateY(20%); }
.dlg-box { position: relative; z-index: 3; width: 100%; max-width: var(--dlg-box-w); min-height: 118px; background: var(--dlg-paper); color: var(--dlg-ink);
  border: 3px solid var(--dlg-edge); border-radius: var(--dlg-radius); box-shadow: 0 6px 0 rgba(0,0,0,.25); padding: 18px 20px 16px; margin-bottom: 4px;
  font: 500 clamp(17px, 2.4vw, 21px)/1.4 var(--dlg-font); animation: dlg-up .25s ease-out; cursor: pointer; }
.dlg-box.dlg-out { animation: dlg-down .3s ease-in forwards; }
@keyframes dlg-up { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes dlg-down { to { transform: translateY(16px); opacity: 0 } }
.dlg-plate { position: absolute; top: -18px; left: 16px; padding: 4px 12px 3px; border: 3px solid var(--dlg-edge); border-radius: 9px; color: #fff;
  font: 400 15px/1.2 var(--dlg-display); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.dlg-box[data-side="right"] .dlg-plate { left: auto; right: 16px; }
.dlg-text { min-height: 2.8em; white-space: pre-wrap; }
.dlg-more { position: absolute; right: 14px; bottom: 8px; font-size: 14px; animation: dlg-bob .8s infinite; }
@keyframes dlg-bob { 50% { transform: translateY(3px) } }
.dlg-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.dlg-opt { all: unset; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--dlg-ink); }
.dlg-opt .dlg-cursor { width: 1em; opacity: 0; color: var(--dlg-focus); }
.dlg-opt .dlg-num { font: 400 12px/1 var(--dlg-display); opacity: .5; width: 1.2em; }
.dlg-opt.dlg-focus, .dlg-opt:focus-visible { background: rgba(0,0,0,.07); }
.dlg-opt.dlg-focus .dlg-cursor { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dlg-portrait, .dlg-box { transition: none; animation: none } .dlg-more { animation: none } }
@media (max-width: 600px) { .dlg { --dlg-portrait: 34vh } .dlg-left { left: -4vw } .dlg-right { right: -4vw } }