/* ── Dialogue text format classes ──────────────────────────── */
/* Apply to inline elements within VN dialogue text.            */
/* Font family / size inherit from the surrounding context.     */

/* Base look for dialogue text — shared by the composer editor, */
/* the writer feed bubbles, and the VN runtime preview, so all  */
/* three surfaces render text with the exact same font/size and */
/* the exact same bold/italic/shake/wave/color marks. Text      */
/* color is intentionally left to each surface: the composer    */
/* sits on the theme-aware app background, while the feed       */
/* bubbles and VN stage always use a fixed dark background.      */
.vn-dialogue-text {
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 1.6;
}

.vn-bold {
    font-weight: 700;
}

.vn-italic {
    font-style: italic;
    opacity: 0.92;
}

/* Color tint — set --vn-tint on the element to pick the hue.   */
/* Falls back to warning (amber) when no tint is provided.      */
/* Deliberately does not touch font-weight: the composer nests  */
/* Bold/Color as separate DOM elements (font-weight inherits    */
/* down from an ancestor <strong>), while the feed/preview HTML */
/* puts both classes on one element — any font-weight set here  */
/* would win in one of those two shapes and break the other.    */
.vn-color {
    color: var(--vn-tint, var(--mud-palette-warning));
}

.vn-shake {
    display: inline-block;
    animation: vn-shake 0.5s infinite;
}

@keyframes vn-shake {
    0%,  100% { transform: translate(0,      0   ); }
    20%        { transform: translate(-1.5px,  1px); }
    40%        { transform: translate( 1.5px, -1px); }
    60%        { transform: translate(-1px,   -1px); }
    80%        { transform: translate( 1px,    1px); }
}

/* Apply per character — set animation-delay inline for stagger.  */
/* white-space:pre keeps a space that's the *only* content of an  */
/* inline-block box from being collapsed to zero width, which is  */
/* what silently ate spaces inside waved text.                    */
.vn-wave {
    display: inline-block;
    white-space: pre;
    animation: vn-wave 1.5s ease-in-out infinite;
}

@keyframes vn-wave {
    0%,  100% { transform: translateY(0);    }
    50%        { transform: translateY(-3px); }
}

.vn-ruby rt {
    font-size: 0.5em;
    color: var(--mud-palette-text-disabled);
    font-weight: 400;
}

/* Hint run — player view: shimmer only, no visible chip/name.        */
.vn-hint-shimmer {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.vn-hint-shimmer-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mud-palette-primary) 50%, transparent);
    background-size: 220% 100%;
    animation: vn-hint-shimmer-anim 1.7s linear infinite;
}

@keyframes vn-hint-shimmer-anim {
    0%   { background-position: -150% 0; }
    100% { background-position:  150% 0; }
}