/* dialogue box styles. #dialogue.dlg-KEY = real player, .dlg-KEY = preview + pills
   keep layout rules in #dialogue.dlg-KEY only - .dlg-KEY also applies to choice pills */

.dlg-box{ position:relative; padding:1.1rem 1.2rem; min-height:5.5rem; max-width:380px; }
.dlg-box .np{ display:inline-block; font-weight:600; font-size:0.95rem; margin-bottom:.3rem; }
.dlg-box .txt{ font-size:1.02rem; line-height:1.5; }
.dlg-box .hint{ position:absolute; right:1rem; bottom:.7rem; font-size:1.1rem; }
/* custom box: structure only; colors set inline */
.dlg-custom{ border-radius:12px; padding:1.1rem 1.2rem; }
#dialogue.dlg-custom{ margin:0 .7rem calc(.7rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }

/* classic: dark glass, the default */
#dialogue.dlg-classic, .dlg-classic{ background:linear-gradient(180deg, transparent, #14111b 26%); color:#f3efe7; }
#dialogue.dlg-classic #nameplate, .dlg-classic .np{ color:#e9b25e; }
#dialogue.dlg-classic #advance-hint, .dlg-classic .hint{ color:#e9b25e; }

/* solid: opaque black bar */
#dialogue.dlg-solid, .dlg-solid{ background:#0a0a0d; color:#f4f1ea; border-top:2px solid #2c2c33; }
#dialogue.dlg-solid #nameplate, .dlg-solid .np{ color:#e9b25e; border-bottom:1px solid #333; }
#dialogue.dlg-solid #advance-hint, .dlg-solid .hint{ color:#e9b25e; }

/* paper: parchment, dark ink */
#dialogue.dlg-paper, .dlg-paper{ background:#efe6d2; color:#2c2114; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 6px 20px rgba(0,0,0,.45); }
#dialogue.dlg-paper{ margin:0 .7rem calc(.7rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }
#dialogue.dlg-paper #nameplate, .dlg-paper .np{ color:#8a5a23; border-bottom:1px solid rgba(0,0,0,.18); }
#dialogue.dlg-paper #advance-hint, .dlg-paper .hint{ color:#8a5a23; bottom:.7rem; }

/* card: clean light card */
#dialogue.dlg-card, .dlg-card{ background:#fbfaf7; color:#23222a; border:1px solid #ddd9cf; border-radius:16px; padding:1rem 1.1rem; box-shadow:0 8px 24px rgba(0,0,0,.5); }
#dialogue.dlg-card{ margin:0 .7rem calc(.7rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }
#dialogue.dlg-card #nameplate, .dlg-card .np{ color:#9a6b2f; border-bottom:1px solid rgba(0,0,0,.12); }
#dialogue.dlg-card #advance-hint, .dlg-card .hint{ color:#9a6b2f; bottom:.7rem; }

/* frost: frosted glass */
#dialogue.dlg-frost, .dlg-frost{ background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:#f7f5f0; border-top:1px solid rgba(255,255,255,.4); }
#dialogue.dlg-frost #nameplate, .dlg-frost .np{ color:#fff; border-bottom:1px solid rgba(255,255,255,.45); }
#dialogue.dlg-frost #advance-hint, .dlg-frost .hint{ color:#fff; }

/* gradient: borderless bottom fade */
#dialogue.dlg-gradient, .dlg-gradient{ background:linear-gradient(180deg, transparent, rgba(6,4,12,.94) 55%); color:#f4f1ea; }
#dialogue.dlg-gradient #nameplate, .dlg-gradient .np{ color:#e9b25e; border:none; }
#dialogue.dlg-gradient #advance-hint, .dlg-gradient .hint{ color:#e9b25e; }

/* minimal: no box, text over the scene */
#dialogue.dlg-minimal, .dlg-minimal{ background:none; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.95); }
#dialogue.dlg-minimal #dialogue-text, .dlg-minimal .txt{ border-top:2px solid rgba(255,255,255,.6); padding-top:.55rem; }
#dialogue.dlg-minimal #nameplate, .dlg-minimal .np{ color:#fff; border:none; }
#dialogue.dlg-minimal #advance-hint, .dlg-minimal .hint{ color:#fff; }

/* neon: glowing edge */
#dialogue.dlg-neon, .dlg-neon{ background:#070710; color:#e9fbff; border:1.5px solid #34e1ff; border-radius:10px; padding:1rem 1.1rem; box-shadow:0 0 14px rgba(52,225,255,.5), inset 0 0 12px rgba(52,225,255,.18); }
#dialogue.dlg-neon{ margin:0 .6rem calc(.6rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }
#dialogue.dlg-neon #nameplate, .dlg-neon .np{ color:#ff5cf0; border:none; text-shadow:0 0 8px rgba(255,92,240,.7); }
#dialogue.dlg-neon #advance-hint, .dlg-neon .hint{ color:#34e1ff; bottom:.7rem; }

/* terminal: green console */
#dialogue.dlg-terminal, .dlg-terminal{ background:#02110a; color:#5cff9d; border:1px solid #1f7a4d; border-radius:6px; padding:1rem; }
#dialogue.dlg-terminal{ margin:0 .6rem calc(.6rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }
#dialogue.dlg-terminal #nameplate, .dlg-terminal .np{ color:#9dffc4; border-bottom:1px solid #1f7a4d; }
#dialogue.dlg-terminal #advance-hint, .dlg-terminal .hint{ color:#5cff9d; bottom:.7rem; }

/* outline: bold rounded outline */
#dialogue.dlg-outline, .dlg-outline{ background:rgba(10,8,16,.86); color:#fff; border:3px solid #fff; border-radius:14px; padding:1rem 1.1rem; }
#dialogue.dlg-outline{ margin:0 .6rem calc(.6rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }
#dialogue.dlg-outline #nameplate, .dlg-outline .np{ color:#ffd24a; border:none; }
#dialogue.dlg-outline #advance-hint, .dlg-outline .hint{ color:#fff; bottom:.7rem; }

/* double: double-line frame */
#dialogue.dlg-double, .dlg-double{ background:#15131c; color:#f1eee7; border:1px solid #6a6276; outline:1px solid #6a6276; outline-offset:-5px;
  border-radius:4px; padding:1rem 1.1rem; }
#dialogue.dlg-double{ margin:0 .6rem calc(.6rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }
#dialogue.dlg-double #nameplate, .dlg-double .np{ color:#cdbfe0; border-bottom:1px solid #6a6276; }
#dialogue.dlg-double #advance-hint, .dlg-double .hint{ color:#cdbfe0; bottom:.7rem; }

/* notch: clipped corners */
#dialogue.dlg-notch, .dlg-notch{ background:#141019; color:#f3eef7; border-left:3px solid #b06bff;
  clip-path:polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%); }
#dialogue.dlg-notch #nameplate, .dlg-notch .np{ color:#c99bff; border-bottom:1px solid rgba(176,107,255,.4); }
#dialogue.dlg-notch #advance-hint, .dlg-notch .hint{ color:#c99bff; }

/* ribbon: left accent bar */
#dialogue.dlg-ribbon, .dlg-ribbon{ background:#141118; color:#f3efe9; border-left:6px solid #e9b25e; }
#dialogue.dlg-ribbon #nameplate, .dlg-ribbon .np{ color:#e9b25e; border:none; }
#dialogue.dlg-ribbon #advance-hint, .dlg-ribbon .hint{ color:#e9b25e; }

/* vintage: aged sepia */
#dialogue.dlg-vintage, .dlg-vintage{ background:#d9c39a; color:#3a2c18; border-top:3px double #7a5a2e; }
#dialogue.dlg-vintage #nameplate, .dlg-vintage .np{ color:#6a4a20; border-bottom:1px solid #7a5a2e; }
#dialogue.dlg-vintage #advance-hint, .dlg-vintage .hint{ color:#6a4a20; }

/* contrast: high-contrast, for accessibility */
#dialogue.dlg-contrast, .dlg-contrast{ background:#000; color:#fff; border-top:3px solid #fff; }
#dialogue.dlg-contrast #dialogue-text, .dlg-contrast .txt{ font-weight:700; }
#dialogue.dlg-contrast #nameplate, .dlg-contrast .np{ color:#ffd24a; border-bottom:1px solid #fff; }
#dialogue.dlg-contrast #advance-hint, .dlg-contrast .hint{ color:#fff; }

/* soft: rounded, muted */
#dialogue.dlg-soft, .dlg-soft{ background:#2a2740; color:#efeaf6; border-radius:22px; padding:1.05rem 1.2rem; box-shadow:0 8px 22px rgba(0,0,0,.45); }
#dialogue.dlg-soft{ margin:0 .8rem calc(.8rem + var(--safe-bottom, env(safe-area-inset-bottom))); min-height:20%; }
#dialogue.dlg-soft #nameplate, .dlg-soft .np{ color:#c7b6f0; border:none; }
#dialogue.dlg-soft #advance-hint, .dlg-soft .hint{ color:#c7b6f0; bottom:.8rem; }

/* font stacks that render on ios and android */
.vf-system{ font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; }
.vf-helv{ font-family:Helvetica,Arial,Roboto,sans-serif; }
.vf-verdana{ font-family:Verdana,"DejaVu Sans",Geneva,sans-serif; }
.vf-trebuchet{ font-family:"Trebuchet MS","Segoe UI",Tahoma,sans-serif; }
.vf-tahoma{ font-family:Tahoma,Geneva,Verdana,sans-serif; }
.vf-georgia{ font-family:Georgia,"Times New Roman","Noto Serif",serif; }
.vf-times{ font-family:"Times New Roman",Times,"Noto Serif",serif; }
.vf-palatino{ font-family:"Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",serif; }
.vf-courier{ font-family:"Courier New",Courier,"Roboto Mono",monospace; }
.vf-mono{ font-family:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.vf-fraunces{ font-family:"Fraunces",Georgia,serif; }
.vf-newsreader{ font-family:"Newsreader",Georgia,serif; }