| """CSS and onload JS for the VN UI. Pure presentation strings — no logic.
|
|
|
| Installed via launch(css=..., js=...).
|
| """
|
| import os
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| CHARACTER_FONT = os.getenv(
|
| "ARS_FABULA_DIALOGUE_FONT",
|
| "'MS Gothic', 'MS PGothic', 'DotGothic16', 'Osaka-Mono', monospace",
|
| )
|
|
|
|
|
|
|
|
|
|
|
| CSS = """
|
| /* ── Fonts ── */
|
| @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Cinzel:wght@400;600&family=Noto+Sans+JP:wght@300;400&family=DotGothic16&display=swap');
|
|
|
| /* ── Tokens ── */
|
| :root {
|
| --bg-void: #0d0d1a;
|
| --bg-surface: #13132a;
|
| --bg-raised: #1c1c38;
|
| --bg-screen: #08081a;
|
| --border-subtle: #252545;
|
| --border-mid: #3a3a62;
|
| --border-accent: #e8a87c;
|
| --border-glow: rgba(232,168,124,0.35);
|
| /* One warm text family + gold accent — cool purples are reserved for
|
| surfaces/borders only, so no text sinks into the dark box. */
|
| --text-primary: #ede5da;
|
| --text-secondary:#b9b0a1;
|
| --text-muted: #8f8779;
|
| --text-accent: #e8a87c;
|
| --text-narrator: #c6bdac;
|
| /* One shared panel fill for the dialogue box, choice pills and input bar
|
| so they're all the exact same colour + opacity. */
|
| --dialogue-bg: rgba(15, 15, 25, 0.68);
|
| --font-display: 'Cinzel', 'Georgia', serif;
|
| --font-dialogue: 'Cormorant Garamond', 'Georgia', serif;
|
| --font-ui: 'Noto Sans JP', 'Georgia', serif;
|
| --font-character: __FONT_CHARACTER__; /* injected from ARS_FABULA_DIALOGUE_FONT */
|
| }
|
|
|
| /* ── Global Reset ── */
|
| .gradio-container {
|
| background: var(--bg-void) !important;
|
| color: var(--text-primary) !important;
|
| font-family: var(--font-ui) !important;
|
| /* Size the frame to the LARGEST 16:9 that fits the viewport: nearly full
|
| width (~97vw) and full height — the width whose 16:9 height is ~97vh
|
| (97vh × 16/9 ≈ 173vh) — so the stage fills the screen instead of floating
|
| in a band of empty space. (True edge-to-edge would mean dropping the 16:9
|
| aspect on .vn-screen, which re-proportions the sprite framing — kept 16:9
|
| here; see note in chat.) */
|
| width: min(97vw, 2400px, 173vh) !important;
|
| min-width: 720px !important; /* prevent collapse on small viewports */
|
| margin: 0 auto !important;
|
| }
|
| body { background: var(--bg-void) !important; }
|
| *:focus { outline: 2px solid var(--border-accent) !important; outline-offset: 2px; }
|
|
|
| /* Cast Setup — a STEP shown AFTER Begin → Generated (between the title and the
|
| character-design phase). Hidden by default; when active it replaces the title
|
| content inside the canvas. JS toggles body.cast-setup-active.
|
| NOTE: The doubled `.vn-title-content.vn-title-content` selector beats Gradio 6's
|
| scoped-prefix specificity issue (same reason #cast-setup#cast-setup was needed). */
|
| /* !important is required: Gradio 6 re-emits every custom rule with a
|
| `.gradio-container-... .contain` scope prefix. The scoped copy of the
|
| base `.vn-title-content { display:flex }` outranks this rule, while the
|
| scoped copy of THIS rule can never match (body is outside .contain) —
|
| so without !important the title stayed visible beside the cast setup. */
|
| body.cast-setup-active .vn-title-content { display: none !important; }
|
| body.cast-setup-active .vn-cast-setup {
|
| display: flex !important;
|
| }
|
| /* But when NOT in cast-setup-active, the cast setup is always hidden. */
|
| .vn-cast-setup { display: none; }
|
|
|
| /* ── VN Screen ── */
|
| .vn-screen {
|
| position: relative;
|
| width: 100%;
|
| aspect-ratio: 16 / 9; /* 16:9, height derived purely from width */
|
| min-height: 380px; /* (no vh cap — height tracks the frame, not
|
| the page, so overlays never displace on
|
| zoom/resize) */
|
| background: var(--bg-screen);
|
| border: 1px solid var(--border-mid);
|
| border-radius: 6px;
|
| overflow: hidden;
|
| margin-bottom: 8px;
|
| container-type: inline-size; /* lets dialogue/choice text size in cqw —
|
| i.e. scale with the screen (and thus the
|
| text box), not the page root font */
|
| }
|
|
|
| /* Background layers */
|
| .vn-bg {
|
| position: absolute;
|
| top: 0; left: 0;
|
| width: 100%; height: 100%;
|
| object-fit: cover;
|
| }
|
| /* Only crossfade when the background ACTUALLY changed (an .old layer is present
|
| to fade over). Otherwise every beat re-rendered the canvas and the bg faded
|
| up from black again — the "blackish" flash on each advance. */
|
| .vn-bg.old + .vn-bg.new { animation: vnBgFade 1.3s ease both; }
|
| @keyframes vnBgFade { from { opacity: 0; } to { opacity: 1; } }
|
|
|
| /* Sprites — anchored to the SCREEN bottom and layered BEHIND the dialogue
|
| box (z 2 < dialogue 4), per VN staging: the box overlaps the sprites'
|
| lower torso, concealing the raw bottom edge of upper-body renders.
|
| The container spans the full screen so percentage heights resolve. */
|
| .vn-chars {
|
| position: absolute;
|
| top: 0; bottom: 0; left: 0;
|
| width: 100%;
|
| display: flex;
|
| justify-content: center;
|
| align-items: flex-end; /* feet on the screen bottom */
|
| gap: 2.4cqw; /* scales with the canvas, not the page */
|
| pointer-events: none;
|
| z-index: 2;
|
| }
|
| .vn-sprite {
|
| /* Sized against the canvas WIDTH (cqw), the stable axis: the sprite is
|
| locked to the canvas's proportions and never changes on browser zoom or
|
| when min-height inflates the box past 16:9. 48cqw ≈ 86% of a true 16:9
|
| canvas's height; max-height caps it if the box is ever taller than 16:9. */
|
| height: 48cqw;
|
| max-height: 86%;
|
| width: auto;
|
| max-width: 37%; /* must exceed the widest bake canvas's display
|
| width — if this cap binds, object-fit:contain
|
| letterboxes the sprite and SHRINKS that
|
| character's face below the equal-face target.
|
| At the 20%-face framing the widest cast member
|
| (marie, ~940×1254 ⇒ ~36% display) just clears
|
| this; three sprites still sum < 100% because the
|
| others are far narrower (~27%), so 3-up doesn't
|
| overlap. Bake canvases widen to fit wide poses
|
| (cast_pipeline fig_w), so keep headroom here. */
|
| object-fit: contain;
|
| object-position: bottom center;
|
| /* No per-render entrance animation: the canvas HTML is rebuilt every beat,
|
| so an entrance keyframe replayed (and "dragged") on each advance. The
|
| active/inactive filter still animates below. */
|
| transition: filter 0.35s ease;
|
| }
|
| /* Active/inactive: the speaker is bright, the rest gently shadowed.
|
| Dimming is FILTER-only — sprites are never made translucent. */
|
| .vn-sprite.active { filter: none; }
|
| .vn-sprite.inactive {
|
| filter: brightness(0.6) saturate(0.85) contrast(0.95);
|
| }
|
| /* Choice state: once the line finishes typing and the choice cluster fades in,
|
| EVERY sprite (active speaker included) takes the inactive dimming, so the
|
| semi-transparent capsules and the free-text bar read cleanly over bright
|
| costumes. Same gate as .vn-choices visibility; the existing 0.35s
|
| filter transition makes it fade in with the capsules. */
|
| .vn-screen[data-choices="1"][data-typing="0"] .vn-sprite,
|
| .vn-screen[data-choices="1"][data-typing="0"] .vn-sprite.active {
|
| filter: brightness(0.6) saturate(0.85) contrast(0.95);
|
| }
|
| @keyframes vnSpriteIn {
|
| from { opacity: 0.2; transform: translateY(10px) scale(0.97); }
|
| to { opacity: 1; transform: translateY(0) scale(1); }
|
| }
|
|
|
| /* ── Dialogue Box ── (a wide, centered panel with a LOCKED height — it never
|
| grows or shrinks with the line length — one flat scrim, not a gradient) */
|
| .vn-dialogue {
|
| position: absolute;
|
| bottom: 20px; left: 20%; right: 20%; /* 60% width, centered */
|
| height: clamp(130px, 13.5cqw, 230px); /* scales with the screen width (never
|
| with line length) so it stays in
|
| proportion to the cqw-sized text */
|
| background: var(--dialogue-bg); /* shared panel colour */
|
| border: 1px solid var(--border-subtle);
|
| border-radius: 8px;
|
| padding: 14px 16px 36px;
|
| overflow: hidden; /* clip rather than expand */
|
| }
|
| .vn-dialogue.has-speaker {
|
| border-left: 3px solid var(--border-accent);
|
| }
|
| /* Centered column — the box itself is already narrow (60% of the screen),
|
| so the text uses most of it. */
|
| .vn-dialogue-inner {
|
| max-width: min(94%, 960px);
|
| margin: 0 auto;
|
| }
|
| .vn-name-plate {
|
| display: inline-block;
|
| font-family: var(--font-display);
|
| font-size: clamp(0.7rem, 1.1cqw, 1.2rem);
|
| letter-spacing: 0.08em;
|
| color: var(--text-accent);
|
| background: rgba(232,168,124,0.1);
|
| border: 1px solid var(--border-accent);
|
| border-radius: 3px;
|
| padding: 2px 10px;
|
| margin-bottom: 8px;
|
| }
|
| .vn-name {
|
| font-family: var(--font-display);
|
| font-weight: 600;
|
| color: var(--text-accent);
|
| font-size: clamp(0.75rem, 1.2cqw, 1.3rem);
|
| margin-bottom: 6px;
|
| letter-spacing: 0.06em;
|
| }
|
| /* Character dialogue uses --font-character (MS Gothic by default, env-set). */
|
| .vn-text {
|
| font-family: var(--font-character);
|
| color: var(--text-primary);
|
| /* Scales with the screen/text-box width: ≈ the old 1.15rem on a ~1300px
|
| frame, smaller on regular resolutions, larger on big frames. */
|
| font-size: clamp(0.85rem, 1.4cqw, 1.5rem);
|
| line-height: 1.7;
|
| text-align: left;
|
| padding: 0 16px;
|
| text-indent: 0;
|
| }
|
| /* Narration is set in Georgia serif (distinct from the MS Gothic dialogue). */
|
| .vn-text.narrator {
|
| font-family: Georgia, 'Times New Roman', serif;
|
| font-style: italic;
|
| color: var(--text-narrator);
|
| }
|
|
|
| /* Typewriter cursor */
|
| .vn-text.typing::after {
|
| content: '▌';
|
| animation: vnBlink 0.7s step-end infinite;
|
| color: var(--text-accent);
|
| margin-left: 1px;
|
| }
|
| @keyframes vnBlink { 50% { opacity: 0; } }
|
|
|
| /* Click-to-advance affordance */
|
| .vn-screen.advancing { cursor: pointer; }
|
| .vn-continue {
|
| position: absolute;
|
| right: 16px; bottom: 10px;
|
| color: var(--text-accent);
|
| font-size: 1rem;
|
| animation: vnPulse 1.2s ease infinite;
|
| pointer-events: none;
|
| }
|
| @keyframes vnPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
|
|
|
| /* Streaming loader — shown when the reader has caught up to the last beat the
|
| model has produced but the turn is still being written. Same ✦ pulse as the
|
| turn-pending indicator (body.vn-waiting), so "still generating" reads
|
| consistently whether a turn was just submitted or is mid-stream. */
|
| .vn-streaming-wait {
|
| position: absolute;
|
| right: 18px; bottom: 14px;
|
| color: var(--text-accent);
|
| font-size: 1.05rem;
|
| z-index: 30;
|
| animation: vnPulse 1.2s ease infinite;
|
| pointer-events: none;
|
| }
|
|
|
| /* ── Choices ── (raised so the free-text bar docks directly beneath them
|
| in the same centered column — one interaction cluster, not two) */
|
| /* Independent vertical column, centered in the open scene area ABOVE the
|
| dialogue box. The container spans the area but passes clicks through
|
| (pointer-events:none) so only the pills are interactive. */
|
| .vn-choices {
|
| position: absolute;
|
| inset: 0; /* span the whole canvas … */
|
| display: flex;
|
| flex-direction: column;
|
| justify-content: center; /* … so the stack sits dead-center vertically */
|
| align-items: center; /* horizontal center; pills size to content */
|
| gap: 0.75rem;
|
| pointer-events: none;
|
| }
|
| .vn-choices .vn-choice-btn { pointer-events: auto; }
|
| /* Choices only appear once the line has finished typing (data-typing flips to
|
| "0"); hidden during 'pending' and '1' so they never precede the text. They
|
| fade in (opacity only — no transform) so the appearance is deliberate. */
|
| .vn-screen:not([data-typing="0"]) .vn-choices { display: none; }
|
| .vn-screen[data-typing="0"] .vn-choices { animation: vnChoicesIn 0.22s ease both; }
|
| @keyframes vnChoicesIn { from { opacity: 0; } to { opacity: 1; } }
|
| /* Choices are standalone rounded capsules — solid (opaque) dark fill so they
|
| pop over the scene without stacking transparent layers, centered text, and
|
| the MS Gothic character font (--font-character). */
|
| .vn-choice-btn {
|
| background: var(--dialogue-bg) !important; /* same fill as the text box */
|
| border: 1px solid rgba(255,255,255,0.2) !important;
|
| border-radius: 30px !important;
|
| color: var(--text-primary) !important;
|
| font-family: var(--font-character) !important; /* MS Gothic */
|
| font-style: normal !important;
|
| font-size: clamp(0.8rem, 1.25cqw, 1.35rem) !important;
|
| padding: 0.75em 2em !important; /* tracks the scaled font */
|
| width: auto !important; /* size to content, not full width */
|
| text-align: center !important;
|
| cursor: pointer !important;
|
| transition: background 0.15s, border-color 0.15s, transform 0.12s !important;
|
| }
|
| .vn-choice-btn:hover {
|
| background: rgba(40, 40, 62, 0.82) !important;
|
| border-color: var(--border-accent) !important;
|
| transform: translateY(-1px);
|
| color: #fff !important;
|
| }
|
| /* Free-text capsule — the last item in the choice column. Same fill/shape as
|
| the pills, with an inline input + send arrow. */
|
| .vn-free-capsule {
|
| display: flex;
|
| align-items: center;
|
| width: min(60%, 460px);
|
| background: var(--dialogue-bg);
|
| border: 1px solid rgba(255,255,255,0.2);
|
| border-radius: 30px;
|
| overflow: hidden;
|
| pointer-events: auto;
|
| transition: border-color 0.15s, background 0.15s;
|
| }
|
| .vn-free-capsule:focus-within {
|
| border-color: var(--border-accent); /* accent the rim only — keep the fill */
|
| }
|
| .vn-free-text,
|
| .vn-free-text:focus {
|
| flex: 1 1 auto;
|
| min-width: 0;
|
| background: transparent !important; /* no Gradio/browser fill on focus */
|
| border: none !important;
|
| outline: none !important;
|
| box-shadow: none !important;
|
| color: var(--text-primary);
|
| font-family: var(--font-character);
|
| font-size: clamp(0.8rem, 1.25cqw, 1.35rem);
|
| padding: 0.7em 0.5em 0.7em 1.5em; /* tracks the scaled font */
|
| }
|
| .vn-free-text::placeholder { color: var(--text-muted); font-style: italic; }
|
| .vn-free-go {
|
| flex: 0 0 auto;
|
| background: transparent;
|
| border: none;
|
| color: var(--text-accent);
|
| font-size: clamp(0.85rem, 1.3cqw, 1.4rem);
|
| cursor: pointer;
|
| padding: 0 1.1em;
|
| }
|
| .vn-free-go:hover { color: #fff; }
|
|
|
| /* ── Generation-wait screen ── the app's single waiting vocabulary: every
|
| phase that blocks on generation (sprite bake, VRAM swap, opening turn)
|
| shows this centered ✦ pulse — the same star that marks turn/stream waits. */
|
| .vn-loading {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| height: 100%;
|
| gap: 14px;
|
| background: radial-gradient(ellipse at center, #1c1c38 0%, var(--bg-screen) 70%);
|
| }
|
| .vn-loading-star {
|
| color: var(--text-accent);
|
| font-size: clamp(1.6rem, 3.4cqw, 2.6rem);
|
| animation: vnPulse 1.2s ease infinite;
|
| }
|
| .vn-loading-msg {
|
| font-family: var(--font-display);
|
| color: var(--text-accent);
|
| font-size: clamp(0.95rem, 1.8cqw, 1.5rem);
|
| letter-spacing: 0.15em;
|
| }
|
| .vn-loading-sub {
|
| font-family: var(--font-ui);
|
| color: var(--text-secondary);
|
| font-size: clamp(0.7rem, 1.05cqw, 0.95rem);
|
| letter-spacing: 0.08em;
|
| }
|
|
|
| /* ── Casting beat ── */
|
| .vn-casting {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| height: 100%;
|
| gap: 24px;
|
| background: radial-gradient(ellipse at center, #1c1c38 0%, var(--bg-screen) 70%);
|
| }
|
| .vn-casting .casting-title {
|
| font-family: var(--font-display);
|
| color: var(--text-accent);
|
| font-size: clamp(0.95rem, 1.8cqw, 1.5rem);
|
| letter-spacing: 0.15em;
|
| animation: vnPulse 1.6s ease infinite;
|
| }
|
| .vn-casting .portraits { display: flex; gap: 3cqw; }
|
| .vn-portrait {
|
| width: clamp(120px, 14cqw, 230px); height: clamp(170px, 20cqw, 330px);
|
| border-radius: 8px;
|
| border: 1px solid var(--border-mid);
|
| background: var(--bg-surface);
|
| overflow: hidden;
|
| display: flex; align-items: center; justify-content: center;
|
| }
|
| .vn-portrait.pending { border-style: dashed; border-color: var(--border-subtle); }
|
| /* The card currently being generated: accent border + soft pulse so the eye
|
| tracks which character the bake is on. */
|
| .vn-portrait.active {
|
| border-color: var(--border-accent);
|
| box-shadow: 0 0 0 1px var(--border-accent), 0 0 18px -4px var(--border-accent);
|
| animation: castingCardPulse 1.4s ease-in-out infinite;
|
| }
|
| @keyframes castingCardPulse {
|
| 0%, 100% { box-shadow: 0 0 0 1px var(--border-accent), 0 0 12px -6px var(--border-accent); }
|
| 50% { box-shadow: 0 0 0 1px var(--border-accent), 0 0 22px -2px var(--border-accent); }
|
| }
|
| /* Coarse generation progress bar (under the casting title). The fill width is
|
| honest roster-level progress; the moving shimmer keeps it alive during the
|
| long blocking ComfyUI bake, when the width can't update mid-call. */
|
| .vn-castbar {
|
| width: clamp(180px, 34cqw, 460px);
|
| height: 6px;
|
| border-radius: 999px;
|
| background: var(--bg-surface);
|
| border: 1px solid var(--border-subtle);
|
| overflow: hidden;
|
| }
|
| .vn-castbar > i {
|
| display: block; height: 100%;
|
| width: 2%;
|
| border-radius: 999px;
|
| background: linear-gradient(90deg, var(--border-mid), var(--text-accent));
|
| transition: width 0.6s ease;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
| .vn-castbar > i::after {
|
| content: ""; position: absolute; inset: 0;
|
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
|
| animation: castbarShimmer 1.3s linear infinite;
|
| }
|
| @keyframes castbarShimmer {
|
| from { transform: translateX(-100%); }
|
| to { transform: translateX(100%); }
|
| }
|
| /* The ✦ start-symbol shown inside the active card before its sprite exists. */
|
| .casting-spinner {
|
| font-size: clamp(1.4rem, 2.4cqw, 2.2rem);
|
| color: var(--text-accent);
|
| animation: vnPulse 1.2s ease infinite;
|
| }
|
| .vn-portrait img {
|
| width: 100%; height: 100%;
|
| object-fit: cover; object-position: top;
|
| animation: portraitReveal 0.5s ease both;
|
| }
|
| @keyframes portraitReveal {
|
| from { opacity: 0; transform: scale(0.92) translateY(4px); }
|
| to { opacity: 1; transform: scale(1) translateY(0); }
|
| }
|
| .pname {
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.66rem, 0.95cqw, 0.92rem);
|
| color: var(--text-accent);
|
| margin-top: 4px;
|
| letter-spacing: 0.06em;
|
| }
|
| .pname.pending {
|
| color: var(--text-muted);
|
| }
|
| .portrait-wrap {
|
| text-align: center;
|
| }
|
|
|
| /* ── Interactive Casting Review ── */
|
| .vn-casting-review {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| height: 100%;
|
| max-height: 100%;
|
| overflow-y: auto;
|
| background: radial-gradient(ellipse at center, #1c1c38 0%, var(--bg-screen) 70%);
|
| padding: 20px;
|
| }
|
| .casting-review-title {
|
| font-family: var(--font-display);
|
| color: var(--text-accent);
|
| font-size: 0.85rem;
|
| letter-spacing: 0.15em;
|
| margin-bottom: 18px;
|
| }
|
| .review-layout {
|
| display: flex;
|
| gap: 28px;
|
| align-items: flex-start;
|
| width: 100%;
|
| max-width: 800px;
|
| max-height: 100%;
|
| justify-content: center;
|
| }
|
| .review-image {
|
| width: clamp(150px, 18cqw, 240px);
|
| height: clamp(250px, 31cqw, 400px);
|
| border: 1px solid var(--border-mid);
|
| border-radius: 6px;
|
| overflow: hidden;
|
| background: var(--bg-surface);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| flex-shrink: 0;
|
| }
|
| .review-image img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| object-position: top;
|
| }
|
| .review-no-image {
|
| color: var(--text-muted);
|
| font-style: italic;
|
| font-size: 0.82rem;
|
| text-align: center;
|
| padding: 16px;
|
| }
|
| .review-panel {
|
| flex: 1;
|
| min-width: 260px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
| .review-name {
|
| font-family: var(--font-display);
|
| color: var(--text-accent);
|
| font-size: clamp(1.15rem, 1.5cqw, 1.6rem);
|
| letter-spacing: 0.06em;
|
| }
|
| /* Designed character description — role badge + personality paragraph */
|
| .review-desc { display: flex; flex-direction: column; gap: 6px; }
|
| .review-role {
|
| align-self: flex-start;
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.66rem, 0.85cqw, 0.92rem);
|
| letter-spacing: 0.14em;
|
| text-transform: uppercase;
|
| color: var(--text-accent);
|
| background: rgba(232,168,124,0.1);
|
| border: 1px solid var(--border-accent);
|
| border-radius: 3px;
|
| padding: 2px 10px;
|
| }
|
| .review-personality {
|
| font-family: var(--font-dialogue);
|
| font-style: italic;
|
| font-size: clamp(0.82rem, 1.05cqw, 1.15rem);
|
| line-height: 1.55;
|
| color: var(--text-secondary);
|
| margin: 0;
|
| }
|
| .review-prompt-label {
|
| font-family: var(--font-ui);
|
| font-size: 0.68rem;
|
| letter-spacing: 0.12em;
|
| text-transform: uppercase;
|
| color: var(--text-muted);
|
| }
|
| .review-prompt {
|
| width: 100%;
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| border-radius: 4px !important;
|
| color: var(--text-primary) !important;
|
| font-family: var(--font-dialogue) !important;
|
| font-size: 0.9rem !important;
|
| line-height: 1.5 !important;
|
| padding: 10px 12px !important;
|
| resize: vertical;
|
| caret-color: var(--text-accent) !important;
|
| }
|
| .review-prompt:focus {
|
| border-color: var(--border-accent) !important;
|
| outline: none !important;
|
| box-shadow: 0 0 0 2px var(--border-glow) !important;
|
| }
|
| /* The editable personality keeps the old read-only paragraph's voice
|
| (italic, secondary) so the screen still reads the same at a glance. */
|
| .review-prompt.review-desc-edit {
|
| font-style: italic;
|
| color: var(--text-secondary) !important;
|
| }
|
| .review-actions {
|
| display: flex;
|
| gap: 12px;
|
| margin-top: 4px;
|
| }
|
| .review-btn {
|
| flex: 1;
|
| padding: 10px 0 !important;
|
| border-radius: 4px !important;
|
| font-family: var(--font-display) !important;
|
| font-size: 0.82rem !important;
|
| letter-spacing: 0.1em !important;
|
| cursor: pointer !important;
|
| transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
|
| border: 1px solid var(--border-mid) !important;
|
| }
|
| .review-btn.confirm {
|
| background: linear-gradient(135deg, #c07840, #e8a87c) !important;
|
| border-color: var(--border-accent) !important;
|
| color: #0d0d1a !important;
|
| font-weight: 600 !important;
|
| }
|
| .review-btn.confirm:hover {
|
| box-shadow: 0 0 14px var(--border-glow) !important;
|
| }
|
| .review-btn.redo {
|
| background: var(--bg-surface) !important;
|
| color: var(--text-secondary) !important;
|
| }
|
| .review-btn.redo:hover {
|
| border-color: var(--border-accent) !important;
|
| color: var(--text-accent) !important;
|
| }
|
|
|
| /* ── Cast Panel extras ── */
|
| .cast-expressions {
|
| font-family: var(--font-ui);
|
| font-size: 0.72rem;
|
| color: var(--text-muted);
|
| margin-top: 4px;
|
| }
|
| .cast-panel-empty {
|
| padding: 8px;
|
| color: var(--text-muted);
|
| font-family: var(--font-dialogue);
|
| font-style: italic;
|
| font-size: clamp(0.88rem, 1.1cqw, 1.2rem);
|
| }
|
|
|
| /* ── Cast Cards (sidebar) ── */
|
| .cast-card {
|
| background: var(--bg-surface);
|
| border: 1px solid var(--border-subtle);
|
| border-left: 3px solid var(--border-accent);
|
| border-radius: 5px;
|
| padding: 9px 12px;
|
| margin-bottom: 6px;
|
| transition: border-color 0.15s;
|
| }
|
| .cast-card:hover { border-color: var(--border-mid); }
|
| .cast-card .name {
|
| font-family: var(--font-display);
|
| font-size: 0.88rem;
|
| color: var(--text-accent);
|
| letter-spacing: 0.06em;
|
| }
|
| .cast-card .role {
|
| font-family: var(--font-ui);
|
| font-size: 0.72rem;
|
| color: var(--text-muted);
|
| margin-top: 2px;
|
| }
|
| .cast-card .personality {
|
| font-family: var(--font-dialogue);
|
| font-style: italic;
|
| font-size: 0.82rem;
|
| color: var(--text-secondary);
|
| margin-top: 5px;
|
| line-height: 1.4;
|
| }
|
|
|
| /* ── Header ── */
|
| .vn-header { padding: 14px 0 12px; margin-bottom: 14px; }
|
| .vn-title-main {
|
| font-family: var(--font-display);
|
| font-size: 1.9rem;
|
| font-weight: 600;
|
| color: var(--text-accent);
|
| letter-spacing: 0.3em;
|
| text-shadow: 0 0 40px rgba(232,168,124,0.25);
|
| }
|
| .vn-title-sub {
|
| font-family: var(--font-dialogue);
|
| font-style: italic;
|
| font-size: 0.82rem;
|
| color: var(--text-muted);
|
| letter-spacing: 0.04em;
|
| margin-top: 2px;
|
| }
|
| .vn-header-rule {
|
| height: 1px;
|
| background: linear-gradient(to right, var(--border-accent), transparent);
|
| margin-top: 10px;
|
| opacity: 0.35;
|
| }
|
|
|
| /* ── Sidebar ── */
|
| .sidebar-col { border-right: 1px solid var(--border-subtle); padding-right: 14px !important; }
|
| .sidebar-section-label {
|
| font-family: var(--font-display);
|
| font-size: 0.68rem;
|
| letter-spacing: 0.2em;
|
| text-transform: uppercase;
|
| color: var(--text-accent);
|
| border-bottom: 1px solid var(--border-subtle);
|
| padding-bottom: 4px;
|
| margin: 16px 0 10px;
|
| }
|
|
|
| /* ── Scene Info HUD ── */
|
| .scene-info p, .scene-info {
|
| font-family: var(--font-ui) !important;
|
| font-size: 0.72rem !important;
|
| color: var(--text-muted) !important;
|
| letter-spacing: 0.06em !important;
|
| text-transform: uppercase !important;
|
| border-left: 2px solid var(--border-subtle);
|
| padding-left: 8px;
|
| margin: 4px 0 !important;
|
| }
|
|
|
| /* ── Buttons ── */
|
| /* Scope button transitions to colour only — `transition: all` animated layout
|
| geometry (transform/size/position) whenever buttons relaid out (e.g. the
|
| choice column appearing), which read as a dark element "dragging" in. */
|
| button { border-radius: 3px !important; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important; }
|
| .gradio-container button:not(.vn-choice-btn) {
|
| font-family: var(--font-display) !important;
|
| font-size: 0.72rem !important;
|
| letter-spacing: 0.1em !important;
|
| text-transform: uppercase !important;
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| color: var(--text-secondary) !important;
|
| }
|
| .gradio-container button:not(.vn-choice-btn):hover {
|
| border-color: var(--border-accent) !important;
|
| color: var(--text-accent) !important;
|
| background: var(--bg-raised) !important;
|
| }
|
| button[variant="primary"] {
|
| background: linear-gradient(135deg, #c07840, #e8a87c) !important;
|
| border-color: var(--border-accent) !important;
|
| color: #0d0d1a !important;
|
| font-weight: 600 !important;
|
| }
|
| button[variant="primary"]:hover {
|
| box-shadow: 0 0 14px var(--border-glow) !important;
|
| }
|
| button[variant="stop"] { border-color: #c06060 !important; color: #c06060 !important; }
|
|
|
| /* ── Free-text input ── */
|
| #free-input-row { margin-top: 8px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
|
| #free-input textarea, #free-input input {
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| color: var(--text-primary) !important;
|
| font-family: var(--font-dialogue) !important;
|
| font-size: 1rem !important;
|
| font-style: italic !important;
|
| caret-color: var(--text-accent) !important;
|
| border-radius: 3px !important;
|
| }
|
| #free-input textarea:focus, #free-input input:focus {
|
| border-color: var(--border-accent) !important;
|
| box-shadow: 0 0 0 2px var(--border-glow) !important;
|
| }
|
| #free-input label {
|
| font-family: var(--font-ui) !important;
|
| font-size: 0.7rem !important;
|
| letter-spacing: 0.1em !important;
|
| text-transform: uppercase !important;
|
| color: var(--text-muted) !important;
|
| }
|
| #free-submit-btn button {
|
| background: linear-gradient(135deg, #c07840, #e8a87c) !important;
|
| border-color: var(--border-accent) !important;
|
| color: #0d0d1a !important;
|
| font-weight: 600 !important;
|
| }
|
| #free-submit-btn button:hover {
|
| box-shadow: 0 0 14px var(--border-glow) !important;
|
| }
|
|
|
| /* ── Narration Log ── */
|
| .gr-textbox textarea {
|
| background: var(--bg-void) !important;
|
| border: 1px solid var(--border-subtle) !important;
|
| color: var(--text-narrator) !important;
|
| font-family: var(--font-dialogue) !important;
|
| font-style: italic !important;
|
| font-size: 0.88rem !important;
|
| line-height: 1.65 !important;
|
| border-radius: 4px !important;
|
| }
|
| label {
|
| font-family: var(--font-ui) !important;
|
| font-size: 0.72rem !important;
|
| letter-spacing: 0.1em !important;
|
| text-transform: uppercase !important;
|
| color: var(--text-muted) !important;
|
| }
|
|
|
| /* ── Number input (save slot) ── */
|
| .gr-number input {
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| color: var(--text-primary) !important;
|
| font-family: var(--font-ui) !important;
|
| border-radius: 3px !important;
|
| text-align: center !important;
|
| }
|
|
|
| /* ── Hide audio widget (audio still plays via autoplay) ── */
|
| .gr-audio { height: 2px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; }
|
|
|
| /* ── Gradio headings ── */
|
| h1, h2, h3 { font-family: var(--font-display) !important; color: var(--text-accent) !important; }
|
|
|
| /* ════════════════════════════════════════════════════════════════
|
| REDESIGN — everything lives inside the screen (Ren'Py grammar)
|
| ════════════════════════════════════════════════════════════════ */
|
|
|
| /* Stacking order: dialogue 4 · choices 5 · tray 10 · panels 20 */
|
| .vn-dialogue { z-index: 4; }
|
| .vn-choices { z-index: 5; }
|
|
|
| /* ── Icon tray (top-right of dialogue box) ── */
|
| .vn-icon-tray {
|
| position: absolute;
|
| bottom: 7px; left: 50%;
|
| transform: translateX(-50%);
|
| display: flex;
|
| gap: 8px;
|
| align-items: center;
|
| z-index: 10;
|
| }
|
| .vn-tray-btn {
|
| background: rgba(255,255,255,0.05) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| color: var(--text-secondary) !important;
|
| font-family: var(--font-ui) !important;
|
| font-size: clamp(0.6rem, 0.75cqw, 0.85rem) !important;
|
| letter-spacing: 0.1em !important;
|
| text-transform: uppercase !important;
|
| padding: 2px 8px !important;
|
| cursor: pointer !important;
|
| border-radius: 3px !important;
|
| transition: color 0.15s, border-color 0.15s, background 0.15s !important;
|
| }
|
| .vn-tray-btn:hover, .vn-tray-btn.active {
|
| color: var(--text-accent) !important;
|
| border-color: var(--border-accent) !important;
|
| background: rgba(232,168,124,0.1) !important;
|
| }
|
| .vn-icon-tray .vn-tray-confirm-row { display: none; }
|
| .vn-icon-tray.confirming .vn-tray-normal { display: none; }
|
| .vn-icon-tray.confirming .vn-tray-confirm-row { display: inline !important; }
|
| .vn-reset-confirm { cursor: pointer; color: #c06060; }
|
| .vn-reset-confirm:hover { color: #e07070; }
|
| .vn-reset-cancel { cursor: pointer; color: var(--text-muted); }
|
| .vn-reset-cancel:hover { color: var(--text-secondary); }
|
|
|
| /* ── Overlay panels ── */
|
| .vn-panel {
|
| position: absolute;
|
| z-index: 20;
|
| background: rgba(10, 10, 28, 0.97);
|
| font-family: var(--font-ui);
|
| }
|
| .vn-panel-title {
|
| font-family: var(--font-display);
|
| font-size: clamp(0.75rem, 0.95cqw, 1.05rem);
|
| letter-spacing: 0.2em;
|
| text-transform: uppercase;
|
| color: var(--text-accent);
|
| border-bottom: 1px solid var(--border-subtle);
|
| padding-bottom: 6px;
|
| margin-bottom: 12px;
|
| }
|
| .vn-panel-close {
|
| position: absolute;
|
| top: 10px; right: 12px;
|
| background: transparent !important;
|
| border: none !important;
|
| color: var(--text-muted) !important;
|
| font-size: clamp(0.9rem, 1.15cqw, 1.3rem) !important;
|
| cursor: pointer !important;
|
| padding: 2px 6px !important;
|
| }
|
| .vn-panel-close:hover { color: var(--text-accent) !important; }
|
|
|
| /* Log panel — slides up over the dialogue box.
|
| Closed panels are visibility:hidden, NOT just translated out of the clip:
|
| during Gradio's canvas-HTML swap the browser could paint the off-canvas
|
| panels unclipped for a few frames (seen as dark log/cast sheets "dragging"
|
| across the page each turn). visibility doesn't depend on overflow clipping
|
| or compositor timing, so a closed panel can never paint. The 0s visibility
|
| transition is DELAYED by the slide duration on close (so the slide-out
|
| stays visible) and instant on open.
|
|
|
| Transitions are gated behind .vn-anim, which ONLY the user-toggle JS adds
|
| (togglePanel / close / Escape). Render-restoration (restoreUiState after a
|
| canvas swap re-applies .open to the freshly inserted panel) must SNAP to
|
| its state — otherwise every turn render replays the slide-in, dragging the
|
| dark sheet across the scene. */
|
| .vn-panel-log {
|
| bottom: 0; left: 0; right: 0;
|
| height: 55%;
|
| border-top: 1px solid var(--border-mid);
|
| transform: translateY(102%);
|
| visibility: hidden;
|
| transition: none;
|
| overflow-y: auto;
|
| padding: 18px 28px;
|
| }
|
| .vn-panel-log.vn-anim { transition: transform 0.3s ease, visibility 0s linear 0.3s; }
|
| .vn-panel-log.open {
|
| transform: translateY(0);
|
| visibility: visible;
|
| }
|
| .vn-panel-log.open.vn-anim { transition: transform 0.3s ease, visibility 0s; }
|
| .vn-log-text {
|
| font-family: var(--font-dialogue);
|
| font-style: italic;
|
| font-size: clamp(0.85rem, 1.25cqw, 1.35rem);
|
| line-height: 1.7;
|
| color: var(--text-narrator);
|
| white-space: pre-wrap;
|
| }
|
| /* Player answers inside the session register (▸-prefixed lines) */
|
| .vn-log-answer {
|
| font-style: normal;
|
| color: var(--text-accent);
|
| }
|
|
|
| /* Cast panel — slides in from the right */
|
| .vn-panel-cast {
|
| top: 0; right: 0; bottom: 0;
|
| width: 40%;
|
| min-width: 260px;
|
| border-left: 1px solid var(--border-mid);
|
| transform: translateX(102%);
|
| visibility: hidden; /* unpaintable when closed — see log panel note */
|
| transition: none; /* animates only on user toggle (.vn-anim) */
|
| overflow-y: auto;
|
| padding: 18px 16px;
|
| }
|
| .vn-panel-cast.vn-anim { transition: transform 0.3s ease, visibility 0s linear 0.3s; }
|
| .vn-panel-cast.open {
|
| transform: translateX(0);
|
| visibility: visible;
|
| }
|
| .vn-panel-cast.open.vn-anim { transition: transform 0.3s ease, visibility 0s; }
|
| .cast-panel-card {
|
| display: flex;
|
| gap: 14px;
|
| background: var(--bg-surface);
|
| border: 1px solid var(--border-subtle);
|
| border-left: 3px solid var(--border-accent);
|
| border-radius: 5px;
|
| padding: 12px 14px;
|
| margin-bottom: 10px;
|
| }
|
| .cast-panel-thumb {
|
| width: clamp(78px, 8cqw, 130px); height: clamp(112px, 11.5cqw, 188px);
|
| object-fit: cover; object-position: top;
|
| border-radius: 3px;
|
| flex-shrink: 0;
|
| background: var(--bg-raised);
|
| }
|
| .cast-panel-name {
|
| font-family: var(--font-display);
|
| font-size: clamp(1rem, 1.3cqw, 1.45rem);
|
| color: var(--text-accent);
|
| letter-spacing: 0.06em;
|
| }
|
| .cast-panel-role {
|
| font-size: clamp(0.76rem, 1cqw, 1.1rem);
|
| color: var(--text-muted);
|
| margin-top: 2px;
|
| }
|
| .cast-panel-personality {
|
| font-family: var(--font-dialogue);
|
| font-style: italic;
|
| font-size: clamp(0.85rem, 1.1cqw, 1.2rem);
|
| color: var(--text-secondary);
|
| margin-top: 6px;
|
| line-height: 1.45;
|
| }
|
|
|
| /* Save panel — centered modal */
|
| .vn-panel-save {
|
| top: 50%; left: 50%;
|
| transform: translate(-50%, -50%) scale(0.95);
|
| opacity: 0;
|
| visibility: hidden; /* unpaintable when closed — see log panel note */
|
| pointer-events: none;
|
| transition: none; /* animates only on user toggle (.vn-anim) */
|
| width: clamp(380px, 34cqw, 560px);
|
| max-height: 86%;
|
| overflow-y: auto;
|
| border: 1px solid var(--border-mid);
|
| border-radius: 6px;
|
| padding: 22px 24px;
|
| box-shadow: 0 8px 60px rgba(0,0,0,0.6);
|
| }
|
| .vn-panel-save.vn-anim { transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s; }
|
| .vn-panel-save.open {
|
| opacity: 1;
|
| transform: translate(-50%, -50%) scale(1);
|
| visibility: visible;
|
| pointer-events: auto;
|
| }
|
| .vn-panel-save.open.vn-anim { transition: opacity 0.2s, transform 0.2s, visibility 0s; }
|
| /* Rich slot rows — one full-width card per slot: name, chapter · turn,
|
| cast names, timestamp. Shared by the save panel and the menu load list. */
|
| .vn-slot-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 8px;
|
| margin-bottom: 14px;
|
| width: 100%;
|
| }
|
| .vn-slot-btn {
|
| display: grid !important;
|
| grid-template-columns: 1fr auto;
|
| row-gap: 2px;
|
| width: 100% !important;
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| border-radius: 4px !important;
|
| padding: 8px 12px !important;
|
| cursor: pointer !important;
|
| text-align: left !important;
|
| transition: border-color 0.15s, background 0.15s !important;
|
| }
|
| .vn-slot-btn:hover {
|
| border-color: var(--border-accent) !important;
|
| }
|
| .vn-slot-btn.active {
|
| border-color: var(--border-accent) !important;
|
| background: rgba(232,168,124,0.1) !important;
|
| }
|
| .vn-slot-btn.empty .vn-slot-name { color: var(--text-muted); font-style: italic; }
|
| .vn-slot-btn.disabled { opacity: 0.45 !important; cursor: default !important; }
|
| .vn-slot-name {
|
| font-family: var(--font-display);
|
| font-size: clamp(0.82rem, 1.05cqw, 1.15rem);
|
| color: var(--text-accent);
|
| letter-spacing: 0.05em;
|
| grid-column: 1;
|
| }
|
| .vn-slot-time {
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.66rem, 0.85cqw, 0.92rem);
|
| color: var(--text-muted);
|
| grid-column: 2; grid-row: 1;
|
| align-self: center;
|
| }
|
| .vn-slot-meta {
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.7rem, 0.9cqw, 1rem);
|
| color: var(--text-secondary);
|
| grid-column: 1 / -1;
|
| }
|
| .vn-slot-cast {
|
| font-family: var(--font-dialogue);
|
| font-style: italic;
|
| font-size: clamp(0.7rem, 0.9cqw, 1rem);
|
| color: var(--text-muted);
|
| grid-column: 1 / -1;
|
| }
|
| /* Save-name input — sits between the slots and the Save/Load actions. */
|
| .vn-save-name {
|
| width: 100%;
|
| box-sizing: border-box;
|
| background: rgba(255,255,255,0.04);
|
| border: 1px solid var(--border-mid);
|
| border-radius: 3px;
|
| color: var(--text-primary);
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.78rem, 1cqw, 1.1rem);
|
| padding: 7px 10px;
|
| margin-bottom: 10px;
|
| transition: border-color 0.15s;
|
| }
|
| .vn-save-name:focus {
|
| border-color: var(--border-accent);
|
| outline: none;
|
| box-shadow: 0 0 0 2px var(--border-glow);
|
| }
|
| .vn-save-name::placeholder { color: var(--text-muted); font-style: italic; }
|
| .vn-save-actions { display: flex; gap: 10px; }
|
| .vn-save-action {
|
| flex: 1;
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| color: var(--text-secondary) !important;
|
| font-family: var(--font-display) !important;
|
| font-size: clamp(0.72rem, 0.95cqw, 1rem) !important;
|
| letter-spacing: 0.12em !important;
|
| text-transform: uppercase !important;
|
| padding: 9px 0 !important;
|
| border-radius: 3px !important;
|
| cursor: pointer !important;
|
| }
|
| .vn-save-action:hover {
|
| border-color: var(--border-accent) !important;
|
| color: var(--text-accent) !important;
|
| }
|
| .vn-save-status {
|
| margin-top: 12px;
|
| font-size: clamp(0.74rem, 0.95cqw, 1rem);
|
| color: var(--text-muted);
|
| font-style: italic;
|
| min-height: 1.1em;
|
| }
|
|
|
| /* ── Title screen ── */
|
| .vn-title-screen {
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| background: linear-gradient(160deg, #0d0d1a 0%, #16162e 60%, #0a0a20 100%);
|
| }
|
| .vn-title-content {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| gap: 22px;
|
| }
|
| .vn-title-screen .vn-title-main { font-size: clamp(1.7rem, 4cqw, 3.1rem); letter-spacing: 0.35em; }
|
| .vn-title-screen .vn-title-sub { font-size: 0.95rem; margin-top: -14px; }
|
| .vn-title-cast-choice {
|
| display: flex;
|
| gap: 0;
|
| border: 1px solid var(--border-mid);
|
| border-radius: 3px;
|
| overflow: hidden;
|
| }
|
| .vn-title-opt {
|
| background: transparent !important;
|
| border: none !important;
|
| border-radius: 0 !important;
|
| color: var(--text-muted) !important;
|
| font-family: var(--font-ui) !important;
|
| font-size: 0.72rem !important;
|
| letter-spacing: 0.12em !important;
|
| text-transform: uppercase !important;
|
| padding: 8px 18px !important;
|
| cursor: pointer !important;
|
| transition: background 0.15s, color 0.15s !important;
|
| }
|
| .vn-title-opt.active {
|
| background: rgba(232,168,124,0.12) !important;
|
| color: var(--text-accent) !important;
|
| }
|
| .vn-title-begin {
|
| font-family: var(--font-display) !important;
|
| font-size: 0.9rem !important;
|
| letter-spacing: 0.22em !important;
|
| text-transform: uppercase !important;
|
| background: linear-gradient(135deg, #c07840, #e8a87c) !important;
|
| border: none !important;
|
| color: #0d0d1a !important;
|
| padding: 12px 44px !important;
|
| border-radius: 3px !important;
|
| cursor: pointer !important;
|
| font-weight: 600 !important;
|
| transition: box-shadow 0.2s !important;
|
| }
|
| .vn-title-begin:hover { box-shadow: 0 0 22px var(--border-glow) !important; }
|
| .vn-title-actions { display: flex; gap: 14px; align-items: center; }
|
| .vn-title-load {
|
| font-family: var(--font-display) !important;
|
| font-size: 0.9rem !important;
|
| letter-spacing: 0.22em !important;
|
| text-transform: uppercase !important;
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| color: var(--text-secondary) !important;
|
| padding: 12px 36px !important;
|
| border-radius: 3px !important;
|
| cursor: pointer !important;
|
| transition: color 0.15s, border-color 0.15s !important;
|
| }
|
| .vn-title-load:hover {
|
| color: var(--text-accent) !important;
|
| border-color: var(--border-accent) !important;
|
| }
|
| .vn-title-load.disabled {
|
| opacity: 0.35 !important;
|
| cursor: default !important;
|
| }
|
|
|
| /* ── Main-menu Load list — a third title-screen section, like cast setup.
|
| Toggled by body.menu-load-active; !important beats Gradio 6's scoped
|
| re-emission of the base rules (see the cast-setup note above). ── */
|
| .vn-menu-load { display: none; }
|
| body.menu-load-active .vn-title-content { display: none !important; }
|
| body.menu-load-active .vn-cast-setup { display: none !important; }
|
| body.menu-load-active .vn-menu-load {
|
| display: flex !important;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: flex-start;
|
| width: 100%;
|
| height: 100%;
|
| padding: 28px 36px;
|
| overflow-y: auto;
|
| gap: 16px;
|
| background: linear-gradient(160deg, #0d0d1a 0%, #16162e 60%, #0a0a20 100%);
|
| }
|
| .vn-ml-title {
|
| font-family: var(--font-display);
|
| font-size: clamp(1.3rem, 2cqw, 2.1rem);
|
| letter-spacing: 0.28em;
|
| color: var(--text-accent);
|
| text-shadow: 0 0 30px rgba(232,168,124,0.2);
|
| }
|
| .vn-ml-list { width: 100%; max-width: min(620px, 80%); }
|
| .vn-ml-back {
|
| font-family: var(--font-display) !important;
|
| font-size: clamp(0.82rem, 1.05cqw, 1.15rem) !important;
|
| letter-spacing: 0.18em !important;
|
| text-transform: uppercase !important;
|
| background: var(--bg-surface) !important;
|
| border: 1px solid var(--border-mid) !important;
|
| color: var(--text-secondary) !important;
|
| padding: 10px 32px !important;
|
| border-radius: 3px !important;
|
| cursor: pointer !important;
|
| }
|
| .vn-ml-back:hover {
|
| color: var(--text-accent) !important;
|
| border-color: var(--border-accent) !important;
|
| }
|
|
|
| /* ── Title screen — player name input ── */
|
| .vn-title-name-row { margin-top: 8px; }
|
| .vn-title-name-input {
|
| background: rgba(255,255,255,0.04);
|
| border: 1px solid var(--border-mid);
|
| color: var(--text-primary);
|
| font-family: var(--font-ui);
|
| font-size: 0.85rem;
|
| letter-spacing: 0.06em;
|
| padding: 8px 14px;
|
| border-radius: 3px;
|
| text-align: center;
|
| width: clamp(160px, 20cqw, 280px);
|
| transition: border-color 0.15s;
|
| }
|
| .vn-title-name-input:focus {
|
| border-color: var(--border-accent);
|
| outline: none;
|
| box-shadow: 0 0 0 2px var(--border-glow);
|
| }
|
| .vn-title-name-input::placeholder { color: var(--text-muted); }
|
|
|
| /* ── Cast Setup ── */
|
| .vn-cast-setup {
|
| display: none;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: flex-start;
|
| width: 100%;
|
| height: 100%;
|
| padding: 28px 36px;
|
| overflow-y: auto;
|
| gap: 14px;
|
| background: linear-gradient(160deg, #0d0d1a 0%, #16162e 60%, #0a0a20 100%);
|
| }
|
| .vn-cs-header { text-align: center; max-width: min(820px, 78%); }
|
| .vn-cs-title {
|
| font-family: var(--font-display);
|
| font-size: clamp(1.3rem, 2cqw, 2.1rem);
|
| letter-spacing: 0.28em;
|
| color: var(--text-accent);
|
| text-shadow: 0 0 30px rgba(232,168,124,0.2);
|
| margin-bottom: 8px;
|
| }
|
| .vn-cs-desc {
|
| font-family: var(--font-dialogue);
|
| font-size: clamp(0.85rem, 1.15cqw, 1.25rem);
|
| line-height: 1.65;
|
| color: var(--text-secondary);
|
| text-align: left;
|
| margin-top: 4px;
|
| }
|
| .vn-cs-desc p { margin: 6px 0; }
|
| /* ZeroGPU "generated cast is a preview here" callout — warm accent box,
|
| shown only on the in-process Space (see screens._zerogpu_mock_notice). */
|
| .vn-cs-notice {
|
| margin: 2px 0 10px;
|
| background: rgba(232,168,124,0.08);
|
| border: 1px solid var(--border-accent);
|
| border-radius: 4px;
|
| padding: 9px 13px;
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.72rem, 0.95cqw, 0.98rem);
|
| line-height: 1.5;
|
| color: var(--text-secondary);
|
| text-align: left;
|
| }
|
| .vn-cs-notice strong { color: var(--text-accent); }
|
| .vn-cs-desc code {
|
| background: rgba(232,168,124,0.1);
|
| color: var(--text-accent);
|
| padding: 0 4px;
|
| border-radius: 2px;
|
| font-size: 0.92em; /* tracks the scaled description text */
|
| }
|
| .vn-cs-cards {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| width: 100%;
|
| max-width: min(860px, 80%);
|
| }
|
| .vn-cs-card {
|
| background: var(--bg-surface);
|
| border: 1px solid var(--border-subtle);
|
| border-radius: 6px;
|
| padding: 12px 14px;
|
| transition: border-color 0.15s;
|
| }
|
| .vn-cs-card:focus-within { border-color: var(--border-accent); }
|
| .vn-cs-card-row {
|
| display: flex;
|
| gap: 10px;
|
| margin-bottom: 8px;
|
| }
|
| .vn-cs-field {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 3px;
|
| flex: 1;
|
| }
|
| .vn-cs-field label {
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.68rem, 0.85cqw, 0.95rem);
|
| letter-spacing: 0.15em;
|
| text-transform: uppercase;
|
| color: var(--text-muted);
|
| }
|
| .vn-cs-input {
|
| background: rgba(255,255,255,0.04);
|
| border: 1px solid var(--border-mid);
|
| border-radius: 3px;
|
| color: var(--text-primary);
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.88rem, 1.15cqw, 1.25rem);
|
| padding: 7px 10px;
|
| transition: border-color 0.15s;
|
| width: 100%;
|
| box-sizing: border-box;
|
| }
|
| .vn-cs-input:focus {
|
| border-color: var(--border-accent);
|
| outline: none;
|
| box-shadow: 0 0 0 2px var(--border-glow);
|
| }
|
| .vn-cs-input::placeholder { color: var(--text-muted); font-style: italic; font-size: 0.9em; }
|
| .vn-cs-tags-row { width: 100%; }
|
| .vn-cs-tags-input {
|
| font-family: monospace;
|
| font-size: clamp(0.8rem, 1.05cqw, 1.15rem);
|
| }
|
| .vn-cs-fast {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| cursor: pointer;
|
| max-width: min(860px, 80%);
|
| width: 100%;
|
| padding: 6px 0;
|
| }
|
| .vn-cs-fast input[type="checkbox"] {
|
| accent-color: var(--border-accent);
|
| width: 15px; height: 15px;
|
| cursor: pointer;
|
| flex-shrink: 0;
|
| }
|
| .vn-cs-fast span {
|
| font-family: var(--font-ui);
|
| font-size: clamp(0.78rem, 1cqw, 1.05rem);
|
| color: var(--text-muted);
|
| letter-spacing: 0.04em;
|
| }
|
| .vn-cs-actions {
|
| display: flex;
|
| gap: 14px;
|
| justify-content: center;
|
| width: 100%;
|
| max-width: min(860px, 80%);
|
| padding-top: 6px;
|
| }
|
| .vn-cs-btn {
|
| font-family: var(--font-display) !important;
|
| font-size: clamp(0.82rem, 1.05cqw, 1.15rem) !important;
|
| letter-spacing: 0.18em !important;
|
| text-transform: uppercase !important;
|
| padding: 10px 32px !important;
|
| border-radius: 3px !important;
|
| cursor: pointer !important;
|
| transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
|
| border: 1px solid var(--border-mid) !important;
|
| }
|
| .vn-cs-btn.vn-cs-back {
|
| background: var(--bg-surface) !important;
|
| color: var(--text-secondary) !important;
|
| }
|
| .vn-cs-btn.vn-cs-back:hover {
|
| border-color: var(--border-accent) !important;
|
| color: var(--text-accent) !important;
|
| }
|
| .vn-cs-btn.vn-cs-go {
|
| background: linear-gradient(135deg, #c07840, #e8a87c) !important;
|
| border-color: var(--border-accent) !important;
|
| color: #0d0d1a !important;
|
| font-weight: 600 !important;
|
| }
|
| .vn-cs-btn.vn-cs-go:hover {
|
| box-shadow: 0 0 14px var(--border-glow) !important;
|
| }
|
|
|
| /* Choice pills are styled in the "rounded capsules" block above. */
|
|
|
| /* ── Stage wrapper — the relative containing block for the canvas + the
|
| free-text bar. The bar overlays INSIDE the canvas frame, anchored to this
|
| wrapper (an earlier version had no positioned ancestor and the box flew
|
| across the viewport). ── */
|
| #stage { position: relative !important; gap: 0 !important; padding: 0 !important;
|
| margin-bottom: 8px !important; width: 100% !important; }
|
| /* The gr.HTML wrapper insets the canvas by 12px each side; remove it so the
|
| canvas spans the full stage width and the free-text bar (70% of the stage)
|
| lines up with the choices (70% of the canvas). */
|
| #stage .html-container { padding: 0 !important; }
|
| #stage .vn-screen { margin-bottom: 0 !important; }
|
|
|
| /* ── Free-text action bar — docked inside the canvas, in the same centered
|
| column as the choices (which sit just above it) and styled to match the
|
| choice buttons, so it reads as part of the interaction cluster rather than
|
| a glued-on pill. Hidden until the END of a turn — revealed only on the last
|
| beat once the text has finished revealing, together with the choices (JS
|
| sets body.vn-playing; see syncStage). ── */
|
| /* The bar is styled to be visually identical to a .vn-choice-btn (see the
|
| "Choice restyle" block above): the same translucent void-scrim, blur(4px),
|
| borderless 2px accent left bar, sharp corners and italic dialogue voice —
|
| so it reads as just one more option in the stack, not a separate widget. */
|
| /* The free-text input now lives INSIDE the canvas as .vn-free-capsule (the
|
| last item in the centered choice column). This Gradio row is kept only as
|
| the hidden value/submit bridge — never shown. */
|
| #free-input-row { display: none !important; }
|
|
|
| /* The textbox fills the bar with no inner chrome — every Gradio wrapper
|
| background is forced transparent so only the row's scrim shows (otherwise
|
| the opaque .block fill makes the bar look solid). NOTE: in this Gradio
|
| version the <input> is nested INSIDE the <label>, so the label must stay
|
| laid out (only its caption span is hidden — Gradio tags it .hide). The
|
| empty default .wrap is collapsed so the input claims the full width. */
|
| #free-input { flex: 8 1 auto; min-width: 0; display: flex !important; align-items: stretch; }
|
| #free-input, #free-input .wrap, #free-input label, #free-input .label-wrap,
|
| #free-input .input-container, #free-input .form, #free-input .block {
|
| background: transparent !important;
|
| border: none !important;
|
| box-shadow: none !important;
|
| }
|
| #free-input > .wrap { display: none !important; }
|
| #free-input label, #free-input .label-wrap {
|
| display: flex !important;
|
| flex: 1 1 auto; min-width: 0;
|
| margin: 0 !important; padding: 0 !important;
|
| }
|
| #free-input label > span { display: none !important; } /* the caption text */
|
| #free-input .input-container { display: flex !important; flex: 1 1 auto; min-width: 0; }
|
| #free-input textarea, #free-input input {
|
| flex: 1 1 auto; width: 100% !important;
|
| background: transparent !important;
|
| border: none !important;
|
| border-radius: 0 !important;
|
| box-shadow: none !important;
|
| outline: none !important;
|
| color: var(--text-primary) !important;
|
| font-family: var(--font-character) !important;
|
| font-style: italic !important;
|
| font-size: 1.05rem !important;
|
| caret-color: var(--text-accent) !important;
|
| padding: 9px 16px !important;
|
| }
|
| #free-input input::placeholder, #free-input textarea::placeholder {
|
| color: var(--text-muted) !important; opacity: 1;
|
| }
|
| /* The ➤ send button is part of the same scrim — transparent, just an accent
|
| glyph that brightens on hover (no filled chip, no divider). The elem_id is
|
| on the <button> itself in this Gradio version, so target both it and any
|
| wrapper to stay version-resilient. */
|
| #free-submit-btn, #free-submit-btn button {
|
| flex: 0 0 auto !important;
|
| align-self: stretch;
|
| min-width: 44px !important; width: 44px !important;
|
| height: auto !important;
|
| background: transparent !important;
|
| border: none !important;
|
| border-radius: 0 !important;
|
| color: var(--text-accent) !important;
|
| font-size: 1.1rem !important;
|
| font-weight: 600 !important;
|
| opacity: 0.8;
|
| cursor: pointer !important;
|
| transition: color 0.15s, opacity 0.15s;
|
| }
|
| #free-submit-btn:hover, #free-submit-btn button:hover {
|
| background: transparent !important;
|
| color: #fff !important;
|
| opacity: 1;
|
| box-shadow: none !important;
|
| }
|
|
|
| /* ── Turn-pending indicator ── replaces Gradio's overlay as the "thinking"
|
| feedback: JS adds body.vn-waiting when a choice / free-text is submitted
|
| and removes it when the next screen render lands. The unpicked choices dim
|
| and the whole column locks (no double submits); the PICKED one (JS tags it
|
| .vn-chosen) stays lit and blips so you can see what you committed to. A
|
| pulsing ✦ inside the text box marks the wait — the same spot the
|
| streaming loader and the ▼ continue hint use.
|
| !important is load-bearing twice over: it beats the PREFIXED copies of the
|
| base rules (the body.…-keyed prefixed twins never match) AND the lingering
|
| fill-mode opacity of the vnChoicesIn animation. */
|
| body.vn-waiting .vn-choices .vn-choice-btn:not(.vn-chosen),
|
| body.vn-waiting .vn-free-capsule:not(.vn-chosen) { opacity: 0.35 !important; }
|
| body.vn-waiting .vn-choices .vn-choice-btn.vn-chosen,
|
| body.vn-waiting .vn-free-capsule.vn-chosen {
|
| opacity: 1 !important;
|
| animation: vnPulse 1.2s ease infinite;
|
| }
|
| body.vn-waiting .vn-choices .vn-choice-btn,
|
| body.vn-waiting .vn-free-capsule { pointer-events: none !important; }
|
| body.vn-waiting .vn-dialogue::after {
|
| content: '✦';
|
| position: absolute;
|
| right: 18px; bottom: 14px;
|
| color: var(--text-accent);
|
| font-size: 1.05rem;
|
| z-index: 30;
|
| animation: vnPulse 1.2s ease infinite;
|
| }
|
|
|
| /* PRE-SCENE waiting (Generate Cast, Confirm/Redo, curated Start) does NOT use
|
| an opaque scrim — that hid the very cards it was meant to show. Instead the
|
| casting CARDS screen is the loading surface, painted into the canvas
|
| client-side the instant the button is pressed (see paintCasting() in the
|
| onload JS), independent of the server's first render or intermediate
|
| streaming. So there is no body.vn-waiting #stage overlay here; vn-waiting now
|
| only drives the lighter in-scene dialogue-✦ + choice-dim treatment above. */
|
|
|
| /* ── Kill Gradio's queue-progress chrome inside the stage ── Gradio overlays
|
| each output component with .wrap.full (a cover) + .eta-bar (a dark,
|
| inset:0, opacity-.8 layer that GROWS across the component via a transform)
|
| and dims the component to opacity .2 via .pending while a callback runs.
|
| Over the canvas this read as the whole UI — sprites included — "dragging"
|
| diagonally whenever a turn was processing. The event listeners pass
|
| show_progress="hidden"; this is the belt-and-braces for any that don't. */
|
| #stage .eta-bar { display: none !important; }
|
| #stage .progress-text { display: none !important; }
|
| #stage .wrap.full { background: transparent !important; }
|
| #stage .pending { opacity: 1 !important; animation: none !important; }
|
| #stage .generating { animation: none !important; border: none !important; }
|
|
|
| /* ── Collapse the audio widget (autoplay still fires) ── */
|
| #voice-audio {
|
| height: 2px !important;
|
| overflow: hidden !important;
|
| opacity: 0 !important;
|
| pointer-events: none !important;
|
| margin: 0 !important;
|
| padding: 0 !important;
|
| }
|
| """
|
|
|
|
|
| CSS = CSS.replace("__FONT_CHARACTER__", CHARACTER_FONT)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ONLOAD_JS = """
|
| // ── Typewriter: reveals text char-by-char, two-stage click ─────
|
| const TYPING_SPEED = 35; // ms per character
|
| let _typewriterTimer = null;
|
|
|
| function startTypewriter(screen) {
|
| // Already completed (e.g. user clicked during the settle delay) — don't restart
|
| if (screen.getAttribute('data-typing') === '0') return;
|
|
|
| // Clear any running timer
|
| if (_typewriterTimer) { clearInterval(_typewriterTimer); _typewriterTimer = null; }
|
|
|
| const textEl = screen.querySelector('.vn-text');
|
| if (!textEl) { screen.setAttribute('data-typing', '0'); return; }
|
|
|
| const fullText = textEl.getAttribute('data-full-text') || textEl.textContent || '';
|
| if (!fullText) { screen.setAttribute('data-typing', '0'); return; }
|
| textEl.setAttribute('data-full-text', fullText);
|
|
|
| // If reduced-motion, reveal instantly
|
| if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
| textEl.textContent = fullText;
|
| textEl.classList.remove('typing');
|
| screen.setAttribute('data-typing', '0');
|
| return;
|
| }
|
|
|
| let idx = 0;
|
| textEl.textContent = '';
|
| textEl.classList.add('typing');
|
| screen.setAttribute('data-typing', '1');
|
|
|
| _typewriterTimer = setInterval(function() {
|
| idx++;
|
| if (idx >= fullText.length) {
|
| clearInterval(_typewriterTimer);
|
| _typewriterTimer = null;
|
| textEl.textContent = fullText;
|
| textEl.classList.remove('typing');
|
| screen.setAttribute('data-typing', '0');
|
| } else {
|
| textEl.textContent = fullText.slice(0, idx);
|
| }
|
| }, TYPING_SPEED);
|
| }
|
|
|
| function completeTypewriter(screen) {
|
| if (_typewriterTimer) { clearInterval(_typewriterTimer); _typewriterTimer = null; }
|
| const textEl = screen.querySelector('.vn-text');
|
| if (!textEl) return;
|
| const fullText = textEl.getAttribute('data-full-text') || textEl.textContent || '';
|
| textEl.textContent = fullText;
|
| textEl.classList.remove('typing');
|
| screen.setAttribute('data-typing', '0');
|
| }
|
|
|
| // ── Background music ───────────────────────────────────────────
|
| // A persistent pair of <audio> elements on <body> (so they survive the
|
| // destructive per-beat re-render of the canvas). The scene root carries a
|
| // data-bgm URL; syncBgm() crossfades to a new track only when it CHANGES, so
|
| // turns that keep the same background never restart the music. Browsers block
|
| // autoplay until a user gesture — the title Begin button primes playback.
|
| let _bgmEls = null, _bgmActive = 0, _bgmCur = null, _bgmUnlocked = false;
|
| const BGM_VOL = 0.45;
|
|
|
| function _ensureBgm() {
|
| if (_bgmEls) return _bgmEls;
|
| const mk = function() {
|
| const a = document.createElement('audio');
|
| a.loop = true; a.preload = 'auto'; a.volume = 0;
|
| a.style.display = 'none';
|
| document.body.appendChild(a);
|
| return a;
|
| };
|
| _bgmEls = [mk(), mk()];
|
| return _bgmEls;
|
| }
|
|
|
| function unlockBgm() {
|
| // Must run inside a user gesture so later .play() calls are permitted.
|
| _bgmUnlocked = true;
|
| _ensureBgm().forEach(function(a) {
|
| const p = a.play();
|
| if (p && p.catch) p.catch(function() {});
|
| try { a.pause(); } catch (e) {}
|
| });
|
| }
|
|
|
| function crossfadeBgm(url) {
|
| const els = _ensureBgm();
|
| const cur = els[_bgmActive];
|
| const next = els[1 - _bgmActive];
|
| next.src = url;
|
| next.volume = 0;
|
| const pr = next.play();
|
| if (pr && pr.catch) pr.catch(function() {});
|
| if (window._bgmFade) clearInterval(window._bgmFade);
|
| const STEP = 0.05;
|
| window._bgmFade = setInterval(function() {
|
| next.volume = Math.min(BGM_VOL, next.volume + STEP);
|
| cur.volume = Math.max(0, cur.volume - STEP);
|
| if (next.volume >= BGM_VOL && cur.volume <= 0) {
|
| clearInterval(window._bgmFade); window._bgmFade = null;
|
| try { cur.pause(); } catch (e) {}
|
| }
|
| }, 80);
|
| _bgmActive = 1 - _bgmActive;
|
| }
|
|
|
| function syncBgm() {
|
| const screen = document.querySelector('.vn-screen');
|
| if (!screen) return;
|
| const url = screen.getAttribute('data-bgm');
|
| if (!url) return; // no track for this screen (or file absent) — leave playing
|
| if (url === _bgmCur) return; // same track — keep playing, never restart
|
| if (!_bgmUnlocked) return; // wait for the first gesture; the next render retries
|
| _bgmCur = url;
|
| crossfadeBgm(url);
|
| }
|
|
|
| // Watch for VN screen changes: start typewriter, restore overlay-panel UI
|
| // state (the canvas HTML is replaced wholesale each beat/turn), and mirror
|
| // the hidden save status into the save panel.
|
| const _typewriterObserver = new MutationObserver(function() {
|
| // 'pending' marks a freshly rendered screen that hasn't started typing.
|
| // ('1' = typing now, '0' = done — neither must retrigger, or the
|
| // typewriter's own text mutations would restart it in a loop.)
|
| const screen = document.querySelector('.vn-screen');
|
| // Remember the most recent REAL server casting screen (cards with the
|
| // sprites baked so far) so Confirm/Redo can re-show it instantly. Skeletons
|
| // we painted client-side carry data-skeleton — don't stash those.
|
| const _cast = screen && screen.querySelector('.vn-casting:not([data-skeleton])');
|
| if (_cast) window._vnLastCasting = screen.outerHTML;
|
| if (screen && screen.getAttribute('data-typing') === 'pending') {
|
| // A fresh render arrived — the turn the user was waiting on is here.
|
| if (document.body.classList.contains('vn-waiting')) setWaiting(false);
|
| screen.setAttribute('data-typing', '1');
|
| // Small delay so the DOM settles
|
| setTimeout(function() { startTypewriter(screen); }, 50);
|
| }
|
| // A title-screen render also ends any pending wait (e.g. a menu load
|
| // that failed back to the title — it has no data-typing attribute).
|
| // Same for the casting/loading/review screens: they ARE the response to
|
| // the click that armed the wait, and they carry their own ✦ pulse.
|
| if (screen && document.body.classList.contains('vn-waiting')
|
| && (screen.classList.contains('vn-title-screen')
|
| || screen.classList.contains('vn-casting-review')
|
| || screen.querySelector('.vn-loading, .vn-casting'))) {
|
| setWaiting(false);
|
| }
|
| restoreUiState();
|
| syncSaveStatus();
|
| syncSlotRows();
|
| syncStage();
|
| syncBgm();
|
| });
|
|
|
| // Reveal the free-text bar only at the END of a turn: when we're on the last
|
| // beat (data-more != "1") and the text has finished revealing (data-typing
|
| // "0") — or as soon as choices are offered. It stays hidden mid-turn, while
|
| // earlier beats are still being clicked through or typed out, and on the
|
| // title/casting screens. Pure class toggle on <body>.
|
| function syncStage() {
|
| const canvas = document.querySelector('.vn-screen');
|
| const inScene = !!(canvas && canvas.querySelector('.vn-dialogue'));
|
| const lastBeat = inScene && canvas.getAttribute('data-more') !== '1';
|
| const typingDone = inScene && canvas.getAttribute('data-typing') === '0';
|
| // Reveal only after the line finishes typing — choices and the bar appear
|
| // together once the text is fully shown, never before it.
|
| const showBar = lastBeat && typingDone;
|
| document.body.classList.toggle('vn-playing', showBar);
|
| }
|
|
|
| // Enter in the in-canvas free-text capsule submits via the hidden bridge.
|
| document.addEventListener('keydown', function(e) {
|
| if (e.key !== 'Enter') return;
|
| const active = document.activeElement;
|
| if (active && active.classList && active.classList.contains('vn-free-text')) {
|
| e.preventDefault();
|
| submitFreeText(active);
|
| }
|
| });
|
| // Start observing once the body is ready
|
| (function waitBody() {
|
| if (document.body) {
|
| // attributeFilter keeps class-toggle churn (restoreUiState) from
|
| // re-firing the observer; only data-typing flips matter here.
|
| _typewriterObserver.observe(document.body, {
|
| childList: true, subtree: true,
|
| attributes: true, attributeFilter: ['data-typing'],
|
| });
|
| } else {
|
| setTimeout(waitBody, 100);
|
| }
|
| })();
|
|
|
| // ── Click bridge ───────────────────────────────────────────────
|
| const clickHidden = (sel) => {
|
| const el = document.querySelector(sel + ' button') || document.querySelector(sel);
|
| if (el) el.click();
|
| };
|
|
|
| // Write a value into a hidden Gradio textbox so the server callback reads it
|
| // (React-style: use the prototype setter + dispatch 'input', or Gradio drops it).
|
| const setBoxValue = (boxId, val) => {
|
| const ta = document.querySelector('#' + boxId + ' textarea, #' + boxId + ' input');
|
| if (!ta) return;
|
| const proto = ta.tagName === 'TEXTAREA'
|
| ? window.HTMLTextAreaElement.prototype
|
| : window.HTMLInputElement.prototype;
|
| const setter = Object.getOwnPropertyDescriptor(proto, 'value');
|
| if (setter && setter.set) { setter.set.call(ta, val); }
|
| else { ta.value = val; }
|
| ta.dispatchEvent(new Event('input', { bubbles: true }));
|
| };
|
|
|
| // Turn-pending indicator: body.vn-waiting dims/locks the choice column and
|
| // pulses a ✦ while the server thinks (a real-LLM turn takes seconds, and the
|
| // Gradio progress overlay is suppressed — show_progress="hidden"). Cleared
|
| // when the next screen render arrives; the timeout is a stuck-state guard
|
| // (e.g. the callback errored and no re-render ever comes).
|
| const setWaiting = (on) => {
|
| document.body.classList.toggle('vn-waiting', on);
|
| clearTimeout(window._vnWaitTimer);
|
| if (on) {
|
| window._vnWaitTimer = setTimeout(function() {
|
| document.body.classList.remove('vn-waiting');
|
| }, 120000);
|
| }
|
| };
|
|
|
| // ── Client-side casting loading surface ────────────────────────────
|
| // The cards screen IS the loading vocabulary for every pre-scene wait. We
|
| // paint it into the canvas the instant a casting button is pressed —
|
| // synchronously, before/independent of the hidden Gradio button — so the FIRST
|
| // click always shows the cards (never a blank title flash or a bare ✦), even
|
| // when the Space's queue swallows the first event or streams no intermediate
|
| // yields. The server's own renders (cards-with-sprites, then the review) carry
|
| // no data-skeleton marker and replace this wholesale via the same
|
| // `#stage .prose` innerHTML that Gradio writes to.
|
| const _stageProse = () => {
|
| const scr = document.querySelector('.vn-screen');
|
| if (scr && scr.parentElement && scr.parentElement.classList.contains('prose'))
|
| return scr.parentElement;
|
| const stage = document.querySelector('#stage');
|
| return stage ? stage.querySelector('.prose') : null;
|
| };
|
|
|
| const _castingSkeletonHTML = (names, message, sub, active) => {
|
| const cards = (names || []).map(function(nm, i) {
|
| const isActive = (active != null && i === active);
|
| const cls = 'vn-portrait ' + (isActive ? 'active' : 'pending');
|
| const inner = isActive ? '<div class="casting-spinner">✦</div>' : '…';
|
| const safe = (nm && nm !== '?') ? String(nm).replace(/[<>&]/g, '') : '';
|
| const label = safe
|
| ? '<div class="pname">' + safe + '</div>'
|
| : '<div class="pname pending">?</div>';
|
| return '<div class="portrait-wrap"><div class="' + cls + '">'
|
| + inner + '</div>' + label + '</div>';
|
| }).join('');
|
| const subHtml = sub ? '<div class="vn-loading-sub">' + sub + '</div>' : '';
|
| return '<div class="vn-screen"><div class="vn-casting" data-skeleton="1">'
|
| + '<div class="casting-title">✦ ' + (message || 'Assembling your cast…')
|
| + '</div><div class="vn-castbar"><i style="width:2%"></i></div>'
|
| + '<div class="portraits">' + cards + '</div>' + subHtml
|
| + '</div></div>';
|
| };
|
|
|
| // Paint a casting surface into the canvas right now. opts.html (the last real
|
| // server cards, with sprites baked so far) takes priority; otherwise a skeleton
|
| // is built from opts.names. The painted .vn-casting always carries
|
| // data-skeleton="1" so fireCasting() can tell whether the server has answered.
|
| const paintCasting = (opts) => {
|
| const prose = _stageProse();
|
| if (!prose) return;
|
| opts = opts || {};
|
| prose.innerHTML = opts.html || _castingSkeletonHTML(
|
| opts.names || ['?', '?', '?'], opts.message, opts.sub,
|
| (opts.active != null) ? opts.active : 0);
|
| const node = prose.querySelector('.vn-casting');
|
| if (node) node.setAttribute('data-skeleton', '1');
|
| // When re-showing CAPTURED server cards (opts.html, used by Confirm/Redo to
|
| // keep the sprites baked so far), their title/sub/active reflect the PREVIOUS
|
| // action — refresh them so e.g. Confirm doesn't read "Re-sketching Marie".
|
| if (opts.html && opts.message) {
|
| const t = prose.querySelector('.casting-title');
|
| if (t) t.textContent = '✦ ' + opts.message;
|
| const s = prose.querySelector('.vn-loading-sub');
|
| if (s) s.textContent = opts.sub || '';
|
| prose.querySelectorAll('.vn-portrait.active').forEach(function(p) {
|
| p.classList.remove('active');
|
| });
|
| }
|
| };
|
|
|
| // Fire a hidden Gradio button for a casting action. A SINGLE fire — no retry:
|
| // the instant client-side skeleton above already removes the "first click does
|
| // nothing" read that used to make people click twice, so a button-press always
|
| // starts exactly one run. (An auto-retry keyed on the skeleton still being up
|
| // would double-fire here, because the Space streams its intermediate cards
|
| // yields slowly — the skeleton can linger past any grace window while a single
|
| // real run is busy generating, and re-firing would start a duplicate.)
|
| const fireCasting = (sel) => { clickHidden(sel); };
|
|
|
| // Submit the in-canvas free-text capsule via the hidden Gradio bridge.
|
| const submitFreeText = (input) => {
|
| const val = ((input && input.value) || '').trim();
|
| if (!val) return;
|
| setBoxValue('free-input', val);
|
| // Mark the capsule as the committed pick — it stays lit and blips while
|
| // the unpicked choices dim (body.vn-waiting rules).
|
| const cap = input && input.closest('.vn-free-capsule');
|
| if (cap) cap.classList.add('vn-chosen');
|
| setWaiting(true);
|
| setTimeout(() => clickHidden('#free-submit-btn'), 120);
|
| };
|
|
|
| document.addEventListener('click', function(e) {
|
| // Free-text send arrow inside the choice column
|
| const go = e.target.closest('.vn-free-go');
|
| if (go) {
|
| e.preventDefault();
|
| const cap = go.closest('.vn-free-capsule');
|
| submitFreeText(cap && cap.querySelector('.vn-free-text'));
|
| return;
|
| }
|
|
|
| const btn = e.target.closest('.vn-choice-btn');
|
| if (btn) {
|
| e.preventDefault();
|
| const id = btn.getAttribute('data-choice-id');
|
| const text = btn.getAttribute('data-choice-text');
|
| if (!id) return;
|
|
|
| setBoxValue('choice-id-box', id);
|
| setBoxValue('choice-text-box', text);
|
|
|
| // The committed pick stays lit and blips; its siblings dim.
|
| btn.classList.add('vn-chosen');
|
| setWaiting(true);
|
| setTimeout(() => clickHidden('#submit-choice-btn'), 150);
|
| return;
|
| }
|
|
|
| // Two-stage click: if typing, complete text; else advance
|
| const screen = e.target.closest('.vn-screen');
|
| if (screen) {
|
| if (screen.getAttribute('data-typing') === '1') {
|
| e.preventDefault();
|
| completeTypewriter(screen);
|
| return;
|
| }
|
| // If no more beats and choices visible, don't advance (let choice buttons work)
|
| // A click while a panel is open closes the panel instead of advancing.
|
| if (screen.getAttribute('data-more') === '1'
|
| && !(window._vnUi && window._vnUi.panel)
|
| && !e.target.closest('.vn-choices')
|
| && !e.target.closest('.vn-panel')
|
| && !e.target.closest('.vn-icon-tray')) {
|
| e.preventDefault();
|
| clickHidden('#advance-btn');
|
| }
|
| }
|
| });
|
|
|
| // Space / Enter: complete typewriter or advance
|
| document.addEventListener('keydown', function(e) {
|
| if (e.key !== ' ' && e.key !== 'Enter') return;
|
| const tag = (document.activeElement && document.activeElement.tagName) || '';
|
| if (tag === 'INPUT' || tag === 'TEXTAREA') return;
|
|
|
| const screen = document.querySelector('.vn-screen');
|
| if (!screen) return;
|
|
|
| if (screen.getAttribute('data-typing') === '1') {
|
| e.preventDefault();
|
| completeTypewriter(screen);
|
| return;
|
| }
|
|
|
| if (screen.getAttribute('data-more') === '1') {
|
| e.preventDefault();
|
| clickHidden('#advance-btn');
|
| }
|
| });
|
|
|
| // NOTE: the free-text box is cleared SERVER-SIDE (on_free_submit returns ""
|
| // into it) — never with a JS timeout, which raced Gradio's value capture and
|
| // caused submits to be read as empty and silently dropped.
|
|
|
| // ════════════════════════════════════════════════════════════════
|
| // REDESIGN — title screen, icon tray, overlay panels
|
| // ════════════════════════════════════════════════════════════════
|
|
|
| // Shared helper: write a value into a hidden gradio Textbox/Number
|
| function setHiddenVal(rootSel, val) {
|
| const el = document.querySelector(rootSel + ' textarea, ' + rootSel + ' input');
|
| if (!el) return;
|
| const proto = el.tagName === 'TEXTAREA'
|
| ? window.HTMLTextAreaElement.prototype
|
| : window.HTMLInputElement.prototype;
|
| const setter = Object.getOwnPropertyDescriptor(proto, 'value');
|
| if (setter && setter.set) { setter.set.call(el, val); }
|
| else { el.value = val; }
|
| el.dispatchEvent(new Event('input', { bubbles: true }));
|
| }
|
|
|
| // UI state that must survive canvas re-renders (the HTML is replaced
|
| // wholesale every beat/turn, which would otherwise close panels and
|
| // reset the slot pills).
|
| window._vnUi = window._vnUi || { panel: null, slot: '0' };
|
|
|
| function restoreUiState() {
|
| const screen = document.querySelector('.vn-screen');
|
| if (!screen) return;
|
| // Re-open the remembered panel
|
| screen.querySelectorAll('.vn-panel').forEach(function(p) {
|
| const isOpen = window._vnUi.panel && p.classList.contains(window._vnUi.panel);
|
| p.classList.toggle('open', !!isOpen);
|
| // The log is a full-session register — land on the newest entry.
|
| if (isOpen && p.classList.contains('vn-panel-log')) {
|
| p.scrollTop = p.scrollHeight;
|
| }
|
| });
|
| // Re-mark the active slot pill
|
| screen.querySelectorAll('.vn-slot-btn').forEach(function(s) {
|
| s.classList.toggle('active', s.getAttribute('data-slot') === window._vnUi.slot);
|
| });
|
| }
|
|
|
| function syncSaveStatus() {
|
| const src = document.querySelector('#save-status-hidden');
|
| const dst = document.querySelector('.vn-save-status');
|
| if (!src || !dst) return;
|
| const text = (src.textContent || '').trim();
|
| // Write-only-if-different: setting textContent mutates childList and
|
| // would re-trigger the observer in a loop otherwise.
|
| if (dst.textContent !== text) { dst.textContent = text; }
|
| }
|
|
|
| // Mirror the hidden slot-rows HTML (refreshed by on_save) into the open
|
| // save panel, so slot descriptions update right after a save without a
|
| // full canvas re-render. The applied string is remembered as a JS property
|
| // (dst._mirrorHtml) — NOT compared against live innerHTML, which diverges
|
| // as soon as restoreUiState marks a row .active and would loop the
|
| // observer (assign → mutate → fire → assign…), freezing the page.
|
| function syncSlotRows() {
|
| const src = document.querySelector('#slots-meta-hidden');
|
| const dst = document.querySelector('.vn-panel-save .vn-slot-list');
|
| if (!src || !dst) return;
|
| const firstBtn = src.querySelector('.vn-slot-btn');
|
| if (!firstBtn) return; // mirror not populated yet
|
| const html = firstBtn.parentElement.innerHTML;
|
| if (dst._mirrorHtml !== html) {
|
| dst._mirrorHtml = html;
|
| dst.innerHTML = html;
|
| restoreUiState(); // re-mark the active slot row
|
| }
|
| }
|
|
|
| // Arm the slide/fade transition on the CURRENT panel nodes. Only the
|
| // user-toggle paths call this — render-restoration leaves panels without
|
| // .vn-anim so a fresh canvas snaps to its remembered state instead of
|
| // replaying the slide across the scene (the "log sheet clips over the
|
| // scene after a choice" bug).
|
| function animatePanels() {
|
| document.querySelectorAll('.vn-screen .vn-panel').forEach(function(p) {
|
| p.classList.add('vn-anim');
|
| });
|
| }
|
|
|
| function togglePanel(panelClass) {
|
| window._vnUi.panel = (window._vnUi.panel === panelClass) ? null : panelClass;
|
| animatePanels();
|
| restoreUiState();
|
| }
|
|
|
| document.addEventListener('click', function(e) {
|
| // ── Title screen ─────────────────────────────────────────
|
| const opt = e.target.closest('.vn-title-opt');
|
| if (opt) {
|
| e.preventDefault();
|
| document.querySelectorAll('.vn-title-opt').forEach(function(o) {
|
| o.classList.toggle('active', o === opt);
|
| });
|
| setHiddenVal('#preset-box', opt.getAttribute('data-preset') || 'curated');
|
| return;
|
| }
|
| const begin = e.target.closest('.vn-title-begin');
|
| if (begin) {
|
| e.preventDefault();
|
| unlockBgm(); // first guaranteed gesture — prime audio autoplay
|
| window._vnUi.panel = null;
|
| // Sync the name input to the hidden Gradio textbox before starting
|
| const nameInput = document.querySelector('.vn-title-name-input');
|
| if (nameInput) setHiddenVal('#player-name-box', nameInput.value.trim() || 'Player');
|
| const activeOpt = document.querySelector('.vn-title-opt.active');
|
| const preset = activeOpt ? (activeOpt.getAttribute('data-preset') || 'curated') : 'curated';
|
| if (preset === 'generated') {
|
| // Generated → show the Cast Setup step; generation starts from its
|
| // own button. (Curated has no setup — start immediately.)
|
| document.body.classList.add('cast-setup-active');
|
| } else {
|
| // Curated start runs the casting beat + opening turn — paint the
|
| // cards surface instantly (names fill in from the server's yields).
|
| paintCasting({ message: 'Assembling your cast…',
|
| sub: 'warming up the studio', active: 0 });
|
| // 150ms lets the preset input event reach the server first
|
| setTimeout(function() { fireCasting('#start-btn-hidden'); }, 150);
|
| }
|
| return;
|
| }
|
|
|
| // ── Cast Setup step: Generate proceeds to design; Back returns to title ──
|
| const csGo = e.target.closest('.vn-cs-go');
|
| if (csGo) {
|
| e.preventDefault();
|
| unlockBgm(); // generated-flow start gesture — prime audio autoplay
|
| // Read all card fields from the HTML and bridge them into hidden Gradio controls
|
| document.querySelectorAll('.vn-cs-card').forEach(function(card) {
|
| const idx = card.getAttribute('data-cs-idx');
|
| const nameEl = card.querySelector('[data-cs-field="name"]');
|
| const conceptEl = card.querySelector('[data-cs-field="concept"]');
|
| const tagsEl = card.querySelector('[data-cs-field="tags"]');
|
| if (nameEl) setHiddenVal('#cs-n-' + idx, nameEl.value || '');
|
| if (conceptEl) setHiddenVal('#cs-c-' + idx, conceptEl.value || '');
|
| if (tagsEl) setHiddenVal('#cs-t-' + idx, tagsEl.value || '');
|
| });
|
| // Read fast generation checkbox
|
| const fastCb = document.querySelector('.vn-cs-fast-cb');
|
| if (fastCb) {
|
| // Look for the hidden Gradio checkbox's native input
|
| const hiddenFast = document.querySelector('#cs-fast input[type="checkbox"]');
|
| if (hiddenFast) {
|
| hiddenFast.checked = fastCb.checked;
|
| hiddenFast.dispatchEvent(new Event('change', { bubbles: true }));
|
| }
|
| }
|
| // Hide cast setup and paint the CARDS loading surface instantly from
|
| // the entered names — this is the loading vocabulary, shown on the
|
| // first click with no dependency on the server's first render.
|
| document.body.classList.remove('cast-setup-active');
|
| const names = [...document.querySelectorAll('.vn-cs-card')].map(function(card) {
|
| const el = card.querySelector('[data-cs-field="name"]');
|
| return (el && el.value.trim()) || '?';
|
| });
|
| window._vnRoster = names;
|
| paintCasting({ names: names, message: 'Assembling your cast…',
|
| sub: 'warming up the studio', active: 0 });
|
| // Fire the hidden Generate Cast button (delay lets the input events
|
| // bridged above reach the server first); re-fires once if swallowed.
|
| setTimeout(function() { fireCasting('#generate-cast-btn'); }, 150);
|
| return;
|
| }
|
| if (e.target.closest('.vn-cs-back')) {
|
| e.preventDefault();
|
| document.body.classList.remove('cast-setup-active');
|
| return;
|
| }
|
|
|
| // ── Icon tray ────────────────────────────────────────────
|
| const tray = e.target.closest('.vn-tray-btn');
|
| if (tray) {
|
| // Reset confirm/cancel live INSIDE the reset tray button
|
| const confirmEl = e.target.closest('.vn-reset-confirm');
|
| const cancelEl = e.target.closest('.vn-reset-cancel');
|
| const trayWrap = document.querySelector('.vn-icon-tray');
|
| e.preventDefault();
|
| e.stopPropagation();
|
| if (confirmEl) {
|
| if (trayWrap) trayWrap.classList.remove('confirming');
|
| window._vnUi.panel = null;
|
| clickHidden('#reset-btn-hidden');
|
| return;
|
| }
|
| if (cancelEl) {
|
| if (trayWrap) trayWrap.classList.remove('confirming');
|
| return;
|
| }
|
| const action = tray.getAttribute('data-action');
|
| if (action === 'log') togglePanel('vn-panel-log');
|
| if (action === 'cast') togglePanel('vn-panel-cast');
|
| if (action === 'save') togglePanel('vn-panel-save');
|
| if (action === 'reset' && trayWrap) trayWrap.classList.toggle('confirming');
|
| return;
|
| }
|
|
|
| // ── Panel close button (cast panel ✕) ────────────────────
|
| const close = e.target.closest('.vn-panel-close');
|
| if (close) {
|
| e.preventDefault();
|
| window._vnUi.panel = null;
|
| animatePanels();
|
| restoreUiState();
|
| return;
|
| }
|
|
|
| // ── Main-menu Load list ──────────────────────────────────
|
| const mlOpen = e.target.closest('.vn-title-load');
|
| if (mlOpen) {
|
| e.preventDefault();
|
| if (!mlOpen.classList.contains('disabled')) {
|
| document.body.classList.add('menu-load-active');
|
| }
|
| return;
|
| }
|
| if (e.target.closest('.vn-ml-back')) {
|
| e.preventDefault();
|
| document.body.classList.remove('menu-load-active');
|
| return;
|
| }
|
| const mlSlot = e.target.closest('.vn-menu-load .vn-slot-btn');
|
| if (mlSlot) {
|
| e.preventDefault();
|
| if (mlSlot.getAttribute('data-empty') === '1') return;
|
| window._vnUi.slot = mlSlot.getAttribute('data-slot') || '0';
|
| setHiddenVal('#save-slot-hidden', window._vnUi.slot);
|
| document.body.classList.remove('menu-load-active');
|
| setWaiting(true);
|
| setTimeout(function() { clickHidden('#menu-load-btn'); }, 150);
|
| return;
|
| }
|
|
|
| // ── Save panel: slot rows + actions ─────────────────────
|
| const slot = e.target.closest('.vn-slot-btn');
|
| if (slot) {
|
| e.preventDefault();
|
| window._vnUi.slot = slot.getAttribute('data-slot') || '0';
|
| restoreUiState();
|
| setHiddenVal('#save-slot-hidden', window._vnUi.slot);
|
| return;
|
| }
|
| const action = e.target.closest('.vn-save-action');
|
| if (action) {
|
| e.preventDefault();
|
| const which = action.getAttribute('data-which');
|
| if (which === 'save') {
|
| // Bridge the in-panel save-name input to the hidden Gradio box
|
| const nameEl = document.querySelector('.vn-save-name');
|
| setHiddenVal('#save-name-box', nameEl ? nameEl.value.trim() : '');
|
| }
|
| clickHidden(which === 'save' ? '#save-btn-hidden' : '#load-btn-hidden');
|
| return;
|
| }
|
|
|
| // ── Casting Review buttons ───────────────────────────────
|
| const reviewConfirm = e.target.closest('.review-btn.confirm');
|
| const reviewRedo = e.target.closest('.review-btn.redo');
|
| if (reviewConfirm || reviewRedo) {
|
| e.preventDefault();
|
| const promptEl = document.querySelector('#review-prompt-text');
|
| if (promptEl) setHiddenVal('#casting-prompt-box', promptEl.value);
|
| const descEl = document.querySelector('#review-desc-text');
|
| if (descEl) setHiddenVal('#casting-desc-box', descEl.value);
|
| // Instant CARDS feedback: re-show the last real casting screen (cards
|
| // with the sprites baked so far) if we captured one, else a skeleton
|
| // from the roster. The server's next yield replaces it.
|
| const _castMsg = reviewConfirm ? 'Bringing your cast to life…'
|
| : 'Re-sketching…';
|
| const _castSub = reviewConfirm ? 'one moment'
|
| : 'the artist is trying again';
|
| paintCasting(window._vnLastCasting
|
| ? { html: window._vnLastCasting, message: _castMsg, sub: _castSub }
|
| : { names: window._vnRoster || ['?', '?', '?'],
|
| message: _castMsg, sub: _castSub });
|
| setTimeout(function() {
|
| fireCasting(reviewConfirm ? '#casting-confirm-btn' : '#casting-redo-btn');
|
| }, 120);
|
| return;
|
| }
|
|
|
| // ── Click anywhere outside an open panel closes it ────────
|
| const scr = e.target.closest('.vn-screen');
|
| if (scr && window._vnUi.panel
|
| && !e.target.closest('.vn-panel')
|
| && !e.target.closest('.vn-icon-tray')) {
|
| window._vnUi.panel = null;
|
| animatePanels();
|
| restoreUiState();
|
| }
|
| });
|
|
|
| // Escape closes any open panel
|
| document.addEventListener('keydown', function(e) {
|
| if (e.key === 'Escape' && window._vnUi.panel) {
|
| window._vnUi.panel = null;
|
| animatePanels();
|
| restoreUiState();
|
| const trayWrap = document.querySelector('.vn-icon-tray');
|
| if (trayWrap) trayWrap.classList.remove('confirming');
|
| }
|
| });
|
| """
|
|
|
