@kawaijs/renderer-dom 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from './renderer.js';
+import type { StoryPackage } from '@kawaijs/ast';
+import { StoryVM } from '@kawaijs/runtime';
+import { DOMRenderer, type DOMRendererOptions } from './renderer.js';
+/**
+ * High-level helper to initialize and mount a visual novel into the DOM.
+ */
+export declare function mountKawaApp(story: StoryPackage, container: HTMLElement, options?: Omit<DOMRendererOptions, 'container'>): {
+    vm: StoryVM;
+    renderer: DOMRenderer;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAErE;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAC9C;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,WAAW,CAAA;CAAE,CASxC"}

package/dist/index.js

@@ -0,0 +1,16 @@
+export * from './renderer.js';
+import { StoryVM } from '@kawaijs/runtime';
+import { DOMRenderer } from './renderer.js';
+/**
+ * High-level helper to initialize and mount a visual novel into the DOM.
+ */
+export function mountKawaApp(story, container, options) {
+    const vm = new StoryVM(story);
+    const renderer = new DOMRenderer(vm, {
+        container,
+        ...options
+    });
+    vm.start();
+    return { vm, renderer };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAG9B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAA2B,MAAM,eAAe,CAAC;AAErE;;GAEG;AACH,MAAM,UAAU,YAAY,CAC1B,KAAmB,EACnB,SAAsB,EACtB,OAA+C;IAE/C,MAAM,EAAE,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,IAAI,WAAW,CAAC,EAAE,EAAE;QACnC,SAAS;QACT,GAAG,OAAO;KACX,CAAC,CAAC;IAEH,EAAE,CAAC,KAAK,EAAE,CAAC;IACX,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC;AAC1B,CAAC"}

package/dist/renderer.d.ts

@@ -0,0 +1,34 @@
+import type { StoryVM } from '@kawaijs/runtime';
+export interface DOMRendererOptions {
+    container: HTMLElement;
+    typewriterSpeed?: number;
+    assetResolver?: (path: string, type: 'background' | 'character' | 'audio') => string;
+}
+export declare class DOMRenderer {
+    private readonly vm;
+    private readonly container;
+    private readonly typewriterSpeed;
+    private readonly assetResolver;
+    private rootEl;
+    private backgroundEl;
+    private charactersEl;
+    private dialogueBoxEl;
+    private speakerTagEl;
+    private dialogueTextEl;
+    private choiceContainerEl;
+    private backBtnEl;
+    private currentTypewriterInterval;
+    private isTypewriting;
+    private fullCurrentText;
+    private unsubscribeVMState?;
+    constructor(vm: StoryVM, options: DOMRendererOptions);
+    destroy(): void;
+    private buildDOM;
+    private bindEvents;
+    private handleUserAdvance;
+    private render;
+    private startTypewriter;
+    private finishTypewriter;
+    private showHistoryModal;
+}
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,WAAW,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO,KAAK,MAAM,CAAC;CACtF;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAU;IAC7B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAc;IACxC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAS;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAuE;IAErG,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,SAAS,CAAqB;IAEtC,OAAO,CAAC,yBAAyB,CAAuB;IACxD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,kBAAkB,CAAC,CAAa;gBAE5B,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,kBAAkB;IAiB7C,OAAO,IAAI,IAAI;IAUtB,OAAO,CAAC,QAAQ;IAgGhB,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,MAAM;IAqFd,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,gBAAgB;CAwDzB"}

package/dist/renderer.js

@@ -0,0 +1,304 @@
+export class DOMRenderer {
+    vm;
+    container;
+    typewriterSpeed;
+    assetResolver;
+    rootEl;
+    backgroundEl;
+    charactersEl;
+    dialogueBoxEl;
+    speakerTagEl;
+    dialogueTextEl;
+    choiceContainerEl;
+    backBtnEl;
+    currentTypewriterInterval = null;
+    isTypewriting = false;
+    fullCurrentText = '';
+    unsubscribeVMState;
+    constructor(vm, options) {
+        this.vm = vm;
+        this.container = options.container;
+        this.typewriterSpeed = options.typewriterSpeed ?? 20;
+        this.assetResolver = options.assetResolver ?? ((path) => path);
+        this.buildDOM();
+        this.bindEvents();
+        this.unsubscribeVMState = this.vm.onStateChange((state) => {
+            this.render(state);
+        });
+        // Render current initial state
+        this.render(this.vm.getState());
+    }
+    destroy() {
+        if (this.unsubscribeVMState) {
+            this.unsubscribeVMState();
+        }
+        if (this.currentTypewriterInterval) {
+            clearInterval(this.currentTypewriterInterval);
+        }
+        this.container.innerHTML = '';
+    }
+    buildDOM() {
+        this.container.innerHTML = '';
+        this.rootEl = document.createElement('div');
+        this.rootEl.className = 'kawa-root';
+        const stageEl = document.createElement('div');
+        stageEl.className = 'kawa-stage';
+        this.backgroundEl = document.createElement('div');
+        this.backgroundEl.className = 'kawa-background';
+        this.charactersEl = document.createElement('div');
+        this.charactersEl.className = 'kawa-characters';
+        const uiLayerEl = document.createElement('div');
+        uiLayerEl.className = 'kawa-ui-layer';
+        // Choice Container
+        this.choiceContainerEl = document.createElement('div');
+        this.choiceContainerEl.className = 'kawa-choice-container';
+        this.choiceContainerEl.style.display = 'none';
+        // Dialogue Box
+        this.dialogueBoxEl = document.createElement('div');
+        this.dialogueBoxEl.className = 'kawa-dialogue-box';
+        this.speakerTagEl = document.createElement('div');
+        this.speakerTagEl.className = 'kawa-speaker-tag';
+        this.dialogueTextEl = document.createElement('div');
+        this.dialogueTextEl.className = 'kawa-dialogue-text';
+        const indicatorEl = document.createElement('div');
+        indicatorEl.className = 'kawa-continue-indicator';
+        indicatorEl.innerHTML = '▼';
+        this.dialogueBoxEl.appendChild(this.speakerTagEl);
+        this.dialogueBoxEl.appendChild(this.dialogueTextEl);
+        this.dialogueBoxEl.appendChild(indicatorEl);
+        // Quick Menu
+        const quickMenuEl = document.createElement('nav');
+        quickMenuEl.className = 'kawa-quick-menu';
+        this.backBtnEl = document.createElement('button');
+        this.backBtnEl.className = 'kawa-btn';
+        this.backBtnEl.textContent = 'Back';
+        const histBtn = document.createElement('button');
+        histBtn.className = 'kawa-btn';
+        histBtn.textContent = 'History';
+        histBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.showHistoryModal();
+        });
+        const saveBtn = document.createElement('button');
+        saveBtn.className = 'kawa-btn';
+        saveBtn.textContent = 'Save';
+        saveBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            await this.vm.save('1');
+            alert('Game saved to Slot 1!');
+        });
+        const loadBtn = document.createElement('button');
+        loadBtn.className = 'kawa-btn';
+        loadBtn.textContent = 'Load';
+        loadBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const loaded = await this.vm.load('1');
+            if (loaded) {
+                alert('Game loaded from Slot 1!');
+            }
+            else {
+                alert('No save found in Slot 1.');
+            }
+        });
+        quickMenuEl.appendChild(this.backBtnEl);
+        quickMenuEl.appendChild(histBtn);
+        quickMenuEl.appendChild(saveBtn);
+        quickMenuEl.appendChild(loadBtn);
+        uiLayerEl.appendChild(this.choiceContainerEl);
+        uiLayerEl.appendChild(this.dialogueBoxEl);
+        uiLayerEl.appendChild(quickMenuEl);
+        stageEl.appendChild(this.backgroundEl);
+        stageEl.appendChild(this.charactersEl);
+        stageEl.appendChild(uiLayerEl);
+        this.rootEl.appendChild(stageEl);
+        this.container.appendChild(this.rootEl);
+    }
+    bindEvents() {
+        // Clicking on dialogue advances or finishes typewriter
+        this.dialogueBoxEl.addEventListener('click', () => {
+            this.handleUserAdvance();
+        });
+        this.backBtnEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.vm.rollback();
+        });
+        // Keyboard controls
+        window.addEventListener('keydown', (e) => {
+            if (e.code === 'Space' || e.code === 'Enter') {
+                e.preventDefault();
+                this.handleUserAdvance();
+            }
+            else if (e.code === 'Backspace') {
+                e.preventDefault();
+                this.vm.rollback();
+            }
+        });
+    }
+    handleUserAdvance() {
+        if (this.isTypewriting) {
+            // Instantly finish text
+            this.finishTypewriter();
+        }
+        else {
+            this.vm.next();
+        }
+    }
+    render(state) {
+        // Update rollback button state
+        this.backBtnEl.disabled = !this.vm.canRollback();
+        // Render background
+        if (state.visual.background) {
+            const bgUrl = this.assetResolver(state.visual.background, 'background');
+            this.backgroundEl.style.backgroundImage = `url("${bgUrl}")`;
+            this.backgroundEl.style.opacity = '1';
+        }
+        else {
+            this.backgroundEl.style.opacity = '0';
+        }
+        // Render character sprites
+        this.charactersEl.innerHTML = '';
+        for (const [charId, charState] of Object.entries(state.visual.characters)) {
+            const spriteDiv = document.createElement('div');
+            const posClass = `kawa-pos-${charState.position ?? 'center'}`;
+            spriteDiv.className = `kawa-sprite ${posClass}`;
+            spriteDiv.dataset.character = charId;
+            if (charState.expression) {
+                spriteDiv.dataset.expression = charState.expression;
+            }
+            const img = document.createElement('img');
+            const expr = charState.expression ? `_${charState.expression}` : '';
+            img.src = this.assetResolver(`${charId}${expr}.png`, 'character');
+            img.alt = `${charId} ${charState.expression ?? ''}`;
+            img.onerror = () => {
+                // Fallback placeholder sprite if image is missing
+                img.style.display = 'none';
+                spriteDiv.style.width = '200px';
+                spriteDiv.style.height = '400px';
+                spriteDiv.style.background = 'rgba(244, 63, 94, 0.4)';
+                spriteDiv.style.border = '2px dashed #f43f5e';
+                spriteDiv.style.borderRadius = '16px';
+                spriteDiv.style.display = 'flex';
+                spriteDiv.style.alignItems = 'center';
+                spriteDiv.style.justifyContent = 'center';
+                spriteDiv.textContent = `${charId} (${charState.expression ?? 'normal'})`;
+            };
+            spriteDiv.appendChild(img);
+            this.charactersEl.appendChild(spriteDiv);
+        }
+        // Render dialogue
+        if (state.dialogue) {
+            this.dialogueBoxEl.style.display = 'block';
+            if (state.dialogue.speakerDisplayName) {
+                this.speakerTagEl.style.display = 'inline-block';
+                this.speakerTagEl.textContent = state.dialogue.speakerDisplayName;
+                if (state.dialogue.speakerColor) {
+                    this.speakerTagEl.style.backgroundColor = state.dialogue.speakerColor;
+                }
+            }
+            else {
+                this.speakerTagEl.style.display = 'none';
+            }
+            this.startTypewriter(state.dialogue.text);
+        }
+        else {
+            this.dialogueBoxEl.style.display = 'none';
+        }
+        // Render choices
+        if (state.choices && state.choices.length > 0) {
+            this.choiceContainerEl.innerHTML = '';
+            this.choiceContainerEl.style.display = 'flex';
+            state.choices.forEach((choice, index) => {
+                const btn = document.createElement('button');
+                btn.className = 'kawa-choice-btn';
+                btn.textContent = choice.text;
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.vm.choose(index);
+                });
+                this.choiceContainerEl.appendChild(btn);
+            });
+        }
+        else {
+            this.choiceContainerEl.style.display = 'none';
+        }
+    }
+    startTypewriter(text) {
+        if (this.currentTypewriterInterval) {
+            clearInterval(this.currentTypewriterInterval);
+        }
+        this.fullCurrentText = text;
+        if (this.typewriterSpeed <= 0) {
+            this.dialogueTextEl.textContent = text;
+            this.isTypewriting = false;
+            return;
+        }
+        this.isTypewriting = true;
+        let index = 0;
+        this.dialogueTextEl.textContent = '';
+        this.currentTypewriterInterval = window.setInterval(() => {
+            index += 1;
+            this.dialogueTextEl.textContent = this.fullCurrentText.slice(0, index);
+            if (index >= this.fullCurrentText.length) {
+                this.finishTypewriter();
+            }
+        }, this.typewriterSpeed);
+    }
+    finishTypewriter() {
+        if (this.currentTypewriterInterval) {
+            clearInterval(this.currentTypewriterInterval);
+            this.currentTypewriterInterval = null;
+        }
+        this.dialogueTextEl.textContent = this.fullCurrentText;
+        this.isTypewriting = false;
+    }
+    showHistoryModal() {
+        const existing = this.rootEl.querySelector('.kawa-modal-overlay');
+        if (existing)
+            existing.remove();
+        const overlay = document.createElement('div');
+        overlay.className = 'kawa-modal-overlay';
+        const card = document.createElement('div');
+        card.className = 'kawa-modal-card';
+        const header = document.createElement('div');
+        header.className = 'kawa-modal-header';
+        const title = document.createElement('div');
+        title.className = 'kawa-modal-title';
+        title.textContent = 'Dialogue History';
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'kawa-btn';
+        closeBtn.textContent = '✕ Close';
+        closeBtn.addEventListener('click', () => overlay.remove());
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        const body = document.createElement('div');
+        body.className = 'kawa-modal-body';
+        const entries = this.vm.getHistoryManager().getEntries();
+        if (entries.length === 0) {
+            const emptyMsg = document.createElement('div');
+            emptyMsg.textContent = 'No dialogue history yet.';
+            emptyMsg.style.opacity = '0.6';
+            body.appendChild(emptyMsg);
+        }
+        else {
+            for (const entry of entries) {
+                const item = document.createElement('div');
+                item.className = 'kawa-history-item';
+                if (entry.speakerDisplayName) {
+                    const spk = document.createElement('div');
+                    spk.className = 'kawa-history-speaker';
+                    spk.textContent = entry.speakerDisplayName;
+                    item.appendChild(spk);
+                }
+                const txt = document.createElement('div');
+                txt.textContent = entry.text;
+                item.appendChild(txt);
+                body.appendChild(item);
+            }
+        }
+        card.appendChild(header);
+        card.appendChild(body);
+        overlay.appendChild(card);
+        this.rootEl.appendChild(overlay);
+    }
+}
+//# sourceMappingURL=renderer.js.map

package/dist/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kawaijs/renderer-dom",
+  "version": "0.1.0",
+  "description": "Standard semantic DOM and CSS rendering engine for Kawaijs visual novels",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist",
+    "src/theme.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/biagio-scaglia/KawaiJS.git",
+    "directory": "packages/renderer-dom"
+  },
+  "bugs": {
+    "url": "https://github.com/biagio-scaglia/KawaiJS/issues"
+  },
+  "homepage": "https://github.com/biagio-scaglia/KawaiJS#readme",
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kawaijs/ast": "^0.1.0",
+    "@kawaijs/runtime": "^0.1.0"
+  },
+  "keywords": [
+    "kawaijs",
+    "renderer",
+    "dom",
+    "css",
+    "visual-novel",
+    "renpy"
+  ],
+  "author": "Biagio Scaglia",
+  "license": "MIT"
+}

package/src/theme.css

@@ -0,0 +1,306 @@
+:root {
+  --kawa-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --kawa-bg-color: #0b0f19;
+  --kawa-text-color: #f3f4f6;
+  --kawa-primary-accent: #f43f5e;
+  --kawa-dialogue-bg: rgba(15, 23, 42, 0.85);
+  --kawa-dialogue-border: rgba(244, 63, 94, 0.3);
+  --kawa-dialogue-radius: 12px;
+  --kawa-dialogue-padding: 24px 32px;
+  --kawa-speaker-bg: #f43f5e;
+  --kawa-speaker-color: #ffffff;
+  --kawa-speaker-radius: 6px;
+  --kawa-choice-bg: rgba(30, 41, 59, 0.9);
+  --kawa-choice-hover-bg: rgba(244, 63, 94, 0.85);
+  --kawa-choice-color: #ffffff;
+  --kawa-choice-border: 1px solid rgba(255, 255, 255, 0.15);
+  --kawa-choice-radius: 8px;
+  --kawa-choice-padding: 14px 28px;
+  --kawa-menu-btn-bg: rgba(15, 23, 42, 0.6);
+  --kawa-menu-btn-hover-bg: rgba(244, 63, 94, 0.8);
+  --kawa-stage-aspect-ratio: 16 / 9;
+}
+
+/* Base Reset & Root Container */
+.kawa-root {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--kawa-bg-color);
+  color: var(--kawa-text-color);
+  font-family: var(--kawa-font-family);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.kawa-root * {
+  box-sizing: border-box;
+}
+
+/* Stage & Aspect Ratio Box */
+.kawa-stage {
+  position: relative;
+  width: 100%;
+  max-width: calc(100vh * (16 / 9));
+  aspect-ratio: var(--kawa-stage-aspect-ratio);
+  background-color: #000000;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
+}
+
+/* Background Scene Layer */
+.kawa-background {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: opacity 0.4s ease-in-out, background-image 0.4s ease-in-out;
+  z-index: 1;
+}
+
+/* Characters Layer */
+.kawa-characters {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  display: flex;
+  align-items: flex-end;
+}
+
+.kawa-sprite {
+  position: absolute;
+  bottom: 0;
+  height: 85%;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.kawa-sprite img {
+  max-height: 100%;
+  width: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
+}
+
+.kawa-sprite.kawa-pos-left {
+  left: 15%;
+  transform: translateX(-50%);
+}
+
+.kawa-sprite.kawa-pos-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kawa-sprite.kawa-pos-right {
+  left: 85%;
+  transform: translateX(-50%);
+}
+
+/* UI Overlay Layer */
+.kawa-ui-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 32px 48px;
+  pointer-events: none;
+}
+
+/* Dialogue Box */
+.kawa-dialogue-box {
+  position: relative;
+  width: 100%;
+  min-height: 140px;
+  background: var(--kawa-dialogue-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--kawa-dialogue-border);
+  border-radius: var(--kawa-dialogue-radius);
+  padding: var(--kawa-dialogue-padding);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  pointer-events: auto;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.kawa-dialogue-box:hover {
+  transform: translateY(-2px);
+}
+
+.kawa-speaker-tag {
+  display: inline-block;
+  font-weight: 700;
+  font-size: 1.1rem;
+  letter-spacing: 0.03em;
+  color: var(--kawa-speaker-color);
+  background-color: var(--kawa-speaker-bg);
+  padding: 4px 14px;
+  border-radius: var(--kawa-speaker-radius);
+  margin-bottom: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.kawa-dialogue-text {
+  font-size: 1.15rem;
+  line-height: 1.65;
+  color: var(--kawa-text-color);
+  word-break: break-word;
+}
+
+.kawa-continue-indicator {
+  position: absolute;
+  right: 24px;
+  bottom: 16px;
+  font-size: 1rem;
+  color: var(--kawa-primary-accent);
+  animation: kawa-bounce 1.2s infinite ease-in-out;
+}
+
+@keyframes kawa-bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(4px); }
+}
+
+/* Choice Buttons Container */
+.kawa-choice-container {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 80%;
+  max-width: 500px;
+  pointer-events: auto;
+  z-index: 20;
+}
+
+.kawa-choice-btn {
+  background: var(--kawa-choice-bg);
+  backdrop-filter: blur(8px);
+  color: var(--kawa-choice-color);
+  border: var(--kawa-choice-border);
+  border-radius: var(--kawa-choice-radius);
+  padding: var(--kawa-choice-padding);
+  font-size: 1.05rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  text-align: center;
+}
+
+.kawa-choice-btn:hover {
+  background: var(--kawa-choice-hover-bg);
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 8px 20px rgba(244, 63, 94, 0.4);
+}
+
+.kawa-choice-btn:active {
+  transform: translateY(0) scale(0.99);
+}
+
+/* Quick Menu Bar */
+.kawa-quick-menu {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 10px;
+  pointer-events: auto;
+}
+
+.kawa-btn {
+  background: var(--kawa-menu-btn-bg);
+  color: #cbd5e1;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 4px 12px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.kawa-btn:hover {
+  background: var(--kawa-menu-btn-hover-bg);
+  color: #ffffff;
+}
+
+.kawa-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Modals (History, Save/Load) */
+.kawa-modal-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(6px);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+.kawa-modal-card {
+  background: #1e293b;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  width: 90%;
+  max-width: 600px;
+  max-height: 80%;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
+}
+
+.kawa-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 10px;
+}
+
+.kawa-modal-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.kawa-modal-body {
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-right: 8px;
+}
+
+.kawa-history-item {
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: rgba(15, 23, 42, 0.6);
+  font-size: 0.95rem;
+}
+
+.kawa-history-speaker {
+  font-weight: 700;
+  color: var(--kawa-primary-accent);
+  margin-bottom: 2px;
+}