From c27ba8be6ba7edf5c73f0203f808d4a4b013f41d Mon Sep 17 00:00:00 2001
From: Georg Tomitsch <georg@tomitsch.net>
Date: Fri, 4 Apr 2025 19:33:14 +0000
Subject: [PATCH] Fixed exception. Added candleflicker.

---
 public/css/style.css     | 1478 +++++++++++++++++++-------------------
 public/js/tts-factory.js |   20 +-
 public/js/ui-effects.js  |   36 +-
 3 files changed, 807 insertions(+), 727 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index d98bf92..d461c72 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,723 +1,755 @@
-/* @font-face {
-    font-family: "Quattrocento";
-    font-style: normal;
-    src: url("Quattrocento-Regular.ttf");
-}
-
-@font-face {
-    font-family: "Quattrocento";
-    font-weight: bold;
-    src: url("Quattrocento-Bold.ttf");
-}
-
-@font-face {
-    font-family: "Open Sans";
-    font-style: normal;
-    src: url("OpenSans-VariableFont_wdth,wght.ttf");
-}
-
-@font-face {
-    font-family: "Open Sans";
-    font-style: italic;
-    src: url("OpenSans-Italic-VariableFont_wdth,wght.ttf");
-} */
-
-@font-face {
-    font-family: "EB Garamond";
-    font-style: normal;
-    src: url("../fonts/EBGaramond12-Regular.otf");
-}
-@font-face {
-    font-family: "EB Garamond";
-    font-style: italic;
-    src: url("../fonts/EBGaramond12-Italic.otf");
-}
-
-/* @font-face {
-    font-family: "EB Garamond";
-    font-style: normal;
-    font-weight: normal;
-    src: url("../fonts/EBGaramond-Regular.otf") format("opentype");
-}
-
-@font-face {
-    font-family: "EB Garamond";
-    font-style:italic;
-    font-weight: normal;
-    src: url("../fonts/EBGaramond-Italic.otf") format("opentype");
-} */
-
-/* @font-face {
-    font-family: "EB Garamond";
-    font-style: normal;
-    font-weight: bold;
-    src: url("../fonts/EBGaramond-Bold.otf") format("opentype");
-}
-
-@font-face {
-    font-family: "EB Garamond";
-    font-style: italic;
-    font-weight: bold;
-    src: url("../fonts/EBGaramond-BoldItalic.otf") format("opentype");
-} */
-
-  html {
-    font-family: 'EB Garamond', sans-serif;
-    /* font-kerning: normal; */
-    /* font-variant-ligatures: common-ligatures historical-ligatures; */
-    /* font-variant-numeric: oldstyle-nums; */
-    font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'dlig' on, 'clig' on, 'calt' on, 'hlig' off, 'swsh' on, 'locl' off;
-    -webkit-font-smoothing: antialiased;
-  }
-
-sup {
-    font-feature-settings: "sup" on;
-    /* vertical-align: inherit; */
-    font-size: inherit;
-}
-
-/* sub {
-    font-feature-settings: "subs" on;
-} */
-
-double {
-    font-size: 2rem;
-    vertical-align: -10%;
-    opacity: 0.8;
-}
-
-double.separator {
-    display: block;
-    margin: 2rem auto 3rem auto;
-}
-
-html, body {
-    height: 100%;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-body {
-    overflow: hidden;
-    background-image: url('../images/brown-wooden-flooring.jpg');
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat;
-}
-
-body.switched {
-    transition: color 0.6s, background-color 0.6s;
-}
-
-:root {
-    font-size: calc(var(--book-height)/(34 * 1.5));
-    --img-aspect-ratio: 1.613;
-    --aspect-ratio: min(var(--viewport-aspect-ratio), var(--img-aspect-ratio));  
-}
-
-h1 {
-    font-size: 2rem;
-    margin-bottom: 0.8rem;
-    text-align: center;
-    text-transform:uppercase;
-    font-weight: normal;
-}
-
-h2 {
-    font-size: 1.2rem;
-    text-align: center;
-    font-weight: normal;
-}
-
-h2.chapter-heading {
-    font-style: italic;
-    margin: 2rem auto 3rem auto;
-}
-
-h3 {
-    font-size: 1.2rem;
-    text-align: center;
-    font-weight: normal;
-}
-
-.header {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-}
-
-/*
-  Built-in class:
-    # author: Name
-*/
-.byline {
-    font-feature-settings: "smcp";
-}
-
-.subtitle {
-    font-feature-settings: "scmp" off;
-}
-
-.separator {
-    text-align: center;
-}
-
-/* 
-  Enables <iframe> support work on itch.io when using mobile iOS
-*/
-.outerContainer {
-    position: absolute;
-    display: block;
-    display: none;
-    margin: 0;
-    padding: 0;
-    -webkit-overflow-scrolling: touch;
-    overflow: scroll;
-    overflow-x: hidden;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    margin-top: 24px;
-    background-size: cover;
-    background-repeat: no-repeat;
-}
-
-@media screen and (max-width: 980px) {
-    .outerContainer {
-        margin-top: 44px;
-        background-size: cover;
-        background-repeat: no-repeat;
-    }
-}
-
-p, #ruler,#indent {
-    font-size: 1.2rem;
-    line-height: 1.2;
-    color: rgba(0,0,0,0.9);
-    margin-block-end: 0;
-    margin-block-start: 0;
-    /* text-indent: 1.5em; */
-    /* text-align: justify; */
-    /* hyphens: manual; */
-}
-
-a {
-    transition: color 0.6s;
-    color: #333;
-    font-style: italic;
-    text-decoration-thickness: 1px;
-}
-
-a:hover {
-    color: black;
-    transition: color 0.1s;
-}
-
-strong {
-    color: black;
-    font-weight: bold;
-}
-
-img {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%;
-}
-
-.drop-cap {
-    font-size: 280%;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
-    text-transform: uppercase;
-}
-
-.drop-quote {
-    font-size: 180%;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
-}
-
-
-cap {
-    font-feature-settings: "smcp";
-}
-
-.container .hide {
-    opacity: 0.0;
-}
-
-.container .invisible {
-    display: none;
-}
-
-.container > *, .container > p > * {
-    opacity: 1.0;
-    transition: opacity 0.5s;
-}
-
-
-/*
-  Class applied to all choices
-  (Will always appear inside <p> element by default.)
-*/
-li.choice {
-    text-align: center;
-    line-height: 1.7rem;
-}
-
-ol.choice {
-    position: relative;
-    /* list-style-position: inside; To make sure the number is inside the li */
-    counter-reset: item; /* Set a counter */    
-    padding-inline-start: 3rem;
-}
-
-/* ol.choice li::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: "............................................................................";
-    overflow: hidden;
-    white-space: nowrap;
-    text-indent: 1.5em;
-} */
-
-/* 
-  Class applied to first choice
-*/
-:not(.choice)+.choice {
-    padding-top: 1rem;
-}
-
-/*
-  Class applied to choice links
-*/
-.choice a {
-    font-size: 1.2rem;
-}
-
-/* 
-  Built-in class:
-    The End # CLASS: end
-*/
-.end {
-    text-align: center;
-    font-weight: bold;
-    color: black;
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-}
-
-#controls {
-    z-index: 4;
-    text-align: center;
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: -0.6rem;
-    user-select: none;
-    transition: color 0.6s, background 0.6s;
-}
-
-#controls [disabled] {
-    color: #999;
-}
-
-#controls input[type=range] {
-    vertical-align: middle;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 5rem;
-    cursor: pointer;
-    outline: none;
-    height: 0.5rem;
-    background-color: transparent;
-    box-sizing: border-box;
-    border: 1px solid black;
-    border-radius: 0.25rem;
-    overflow: hidden;
-}
-
-#controls input::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 0.5rem;
-    width: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: rgba(0,0,0,0.9);
-    border: none;
-    /*  slider progress trick  */
-    box-shadow: -407px 0 0 400px rgba(0,0,0,0.3);
-}
-
-#controls input::-webkit-runnable-track {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 0.5rem;
-    border-radius: 0.25rem;
-}
-
-#controls>a:not(:last-of-type):after, #controls>span::after {
-    content: " | ";
-}
-
-#book {
-    position: relative;
-    width: var(--book-width);
-    height: var(--book-height);
-    background-image: url('../images/book-3057904.png');
-    background-size: contain; /* Changed from cover to contain */
-    background-position: center;
-    background-repeat: no-repeat; /* Prevents repeating the image when aspect ratio doesn't match */
-    perspective: 500px;
-    perspective-origin: 50% 50%;
-}
-
-#page_left, #page_right {
-    position: absolute;
-    top: 5%; /* Adjust these values as necessary */
-    bottom: 10%;
-    width: 39%;
-    box-sizing: border-box;
-    padding: 0 3rem 1rem 1rem;
-    /* border: 1px dotted rgba(200,200,200,1); */
-    overflow: visible;
-    overflow-y: scroll;
-    opacity: 0.95;
-    mix-blend-mode: darken;
-}
-
-#story {
-    overflow-x:  visible;
-    text-align: justify;
-    text-justify: inter-word;
-    margin-bottom: 1.2em;
-    line-height: 1.5;
-}
-
-/* #story p span {
-    font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'clig' on, 'hlig' on;
-} */
-
-#page_left {
-    left: 11.5%;
-}
-
-#page_right {
-    /* background-color: rgba(200,200,200,0.5); */
-    right: 7%;
-    height: calc(28 * 1.2 * 1.2rem);
-    padding-bottom: 0;
-    /* transform: translateX(-1%) translateY(2%) rotateX(0deg) rotateY(-1deg) rotateZ(0deg); */
-}
-
-
-/* ===== Scrollbar CSS ===== */
-  /* Firefox */
-  * {
-    scrollbar-width: auto;
-    scrollbar-color: #000000 rgba(255,255,255,0);
-  }
-
-  /* Chrome, Edge, and Safari */
-  *::-webkit-scrollbar {
-    width: calc(1rem/4);
-  }
-
-  *::-webkit-scrollbar-track {
-    background: rgba(255,255,255,0.0);
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: #000000;
-    border-radius: calc(1rem/4/2);
-    border: none;
-  }
-
-.fade-in {
-    animation: fadeIn ease 1s;
-    -webkit-animation: fadeIn ease 1s;
-    -moz-animation: fadeIn ease 1s;
-    -o-animation: fadeIn ease 1s;
-    -ms-animation: fadeIn ease 1s;
-}
-
-/* Style for individual words that need to fade in */
-.word.fade-in {
-    animation-fill-mode: forwards;
-    opacity: 0; /* Start invisible */
-}
-
-@keyframes fadeIn {
-    0% {opacity:0;}
-    100% {opacity:1;}
-}
-
-@-moz-keyframes fadeIn {
-    0% {opacity:0;}
-    100% {opacity:1;}
-}
-
-@-webkit-keyframes fadeIn {
-    0% {opacity:0;}
-    100% {opacity:1;}
-}
-
-@-o-keyframes fadeIn {
-    0% {opacity:0;}
-    100% {opacity:1;}
-}
-
-@-ms-keyframes fadeIn {
-    0% {opacity:0;}
-    100% {opacity:1;}
-}
-
-#versions {
-    position: fixed;
-    top: 0px;
-    right: 12px;
-    font-size: 10px;
-}
-
-#preview {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    border: 1px none red;
-    background-color: #fff;
-    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
-}
-
-#preview p {
-    text-indent: 0;
-    text-align: left;
-}
-
-#ruler, #indent {
-    visibility: hidden;
-    position: absolute;
-    top: -8000px;
-    width: auto;
-    display: inline;
-    left: -8000px;
-    text-indent: 0;
-    text-align: left;
-    hyphens: none;
-    margin-block-end: 0;
-}
-
-#ruler i {
-    font-style: italic;
-}
-
-#indent {
-    text-indent: 1.5em;
-}
-
-#remark {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    text-align: center;
-    margin: 0 auto;
-    background-color: transparent;
-}
-
-#lighting {
-    position: absolute;
-    top: -35%;
-    left: -35%;
-    width: 180%;
-    height: 180%;
-    animation: gradient-animation-shrink 1s 1;
-    background: radial-gradient(circle, rgba(255,240,182,0.1) 0%, rgba(255,237,165,0.2) 20%, rgba(0,0,0,0.9) 65%, rgba(0,0,0,0.9) 100%);
-    mix-blend-mode: color-burn;
-    pointer-events: none;  /* makes the element ignore mouse events, and pass them to elements underneath */
-    z-index: 999;  /* should be high enough to be on top of other elements */
-}
-
-@keyframes gradient-animation-grow {
-    0% { width: 180%; height: 180%; left: -35%; top: -35%; }
-    100% { width: 170%; height:  170%; left: -33%; top: -33%; }
-}  
-
-@keyframes gradient-animation-shrink {
-    0% { width: 170%; height:  170%; left: -33%; top: -33%; }
-    100% { width: 180%; height: 180%; left: -35%; top: -35%; }
-}  
-
-/* Command history */
-#command_history {
-    max-height: 120px;
-    overflow-y: auto;
-    font-size: 16px;
-    margin-bottom: 15px;
-    border-top: 1px solid #d1c8b9;
-    padding-top: 10px;
-    scrollbar-width: thin;
-    scrollbar-color: #8b7765 rgba(255, 255, 255, 0.1);
-}
-
-#command_history::-webkit-scrollbar {
-    width: 6px;
-}
-
-#command_history::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-#command_history::-webkit-scrollbar-thumb {
-    background-color: #8b7765;
-    border-radius: 4px;
-}
-
-/* Input area */
-#input_area {
-    display: block;
-    margin-top: 15px;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-/* Command input container */
-#command_input {
-    width: 100%;
-    position: relative;
-    margin-top: 10px;
-    transition: opacity 0.5s ease; /* Add transition for fading effect */
-}
-
-/* Fade out command input when loading */
-#command_input.fading {
-    opacity: 0.3;
-    pointer-events: none; /* Prevent interaction while faded out */
-}
-
-/* Input wrapper for positioning cursor */
-.input-wrapper {
-    position: relative;
-    width: 100%;
-    display: inline-block;
-    min-height: 1.5em; /* Minimum height for one line */
-    max-height: 6em; /* Maximum height - about 4 lines */
-    overflow: visible; /* Changed from 'auto' to 'visible' to hide scrollbars when not needed */
-}
-
-/* Player input styling - now a textarea for multiline support */
-#player_input {
-    width: 100%;
-    background: transparent;
-    border: none;
-    border-bottom: 1px solid #8b7765;
-    font-family: 'EB Garamond', serif;
-    font-size: 1.1rem;
-    color: #333;
-    outline: none;
-    padding: 5px 0;
-    caret-color: transparent; /* Hide the default caret */
-    box-sizing: border-box;
-    resize: none; /* Disable manual resizing */
-    overflow: hidden; /* Hide all scrollbars */
-    line-height: 1.2; /* Match paragraph line height */
-    height: auto; /* Allow height to adjust */
-    min-height: 1.5em; /* Ensure minimum height */
-}
-
-/* Custom cursor styling */
-#cursor {
-    position: absolute;
-    display: inline-block;
-    width: 8px;
-    height: 1.2em;
-    background-color: #333;
-    top: 6px;
-    left: 0;
-    animation: blink 1s step-end infinite;
-    pointer-events: none; /* Allow clicks to pass through to the input */
-    z-index: 1; /* Ensure cursor appears above text */
-}
-
-/* Placeholder styling - lighter and italic, with padding to avoid cursor overlap */
-#player_input::placeholder {
-    color: #aaa;
-    font-style: italic;
-    padding-left: 15px; /* Add padding to move placeholder text to the right */
-}
-
-/* Blinking animation */
-@keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0; }
-}
-
-/* Fade-in animation for input area */
-@keyframes fadeInInput {
-    from { opacity: 0.3; }
-    to { opacity: 1; }
-}
-
-.fade-in-input {
-    animation: fadeInInput 0.5s ease forwards;
-}
-
-/* Text animation and typography styles */
-
-/* Fade-in animation for text elements */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.fade-in {
-  opacity: 0;
-  animation: fadeIn 0.5s ease-in forwards;
-}
-
-/* Hyphenation settings */
-.story-paragraph {
-  hyphens: auto;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-}
-
-/* Justified text styles */
-#story p {
-  text-align: justify;
-  text-justify: inter-word;
-  margin-bottom: 1.2em;
-  line-height: 1.5;
-}
-
-/* Typography for word elements in rendered paragraphs */
-.word {
-  display: inline-block;
-  position: absolute;
-}
-
-/* Typography for hyphen at line breaks */
-.hyphen-marker {
-  display: inline-block;
-}
-
-/* Highlight the latest paragraph being rendered */
-.latest-paragraph {
-  color: #000;
-}
-
-/* Completed paragraphs style */
-.completed-paragraph {
-  color: #222;
-}
-
-/* Animation speed controls */
-#speed {
-  width: 80px;
-  vertical-align: middle;
-  margin: 0 5px;
-}
+/* @font-face {
+    font-family: "Quattrocento";
+    font-style: normal;
+    src: url("Quattrocento-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Quattrocento";
+    font-weight: bold;
+    src: url("Quattrocento-Bold.ttf");
+}
+
+@font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    src: url("OpenSans-VariableFont_wdth,wght.ttf");
+}
+
+@font-face {
+    font-family: "Open Sans";
+    font-style: italic;
+    src: url("OpenSans-Italic-VariableFont_wdth,wght.ttf");
+} */
+
+@font-face {
+    font-family: "EB Garamond";
+    font-style: normal;
+    src: url("../fonts/EBGaramond12-Regular.otf");
+}
+@font-face {
+    font-family: "EB Garamond";
+    font-style: italic;
+    src: url("../fonts/EBGaramond12-Italic.otf");
+}
+
+/* @font-face {
+    font-family: "EB Garamond";
+    font-style: normal;
+    font-weight: normal;
+    src: url("../fonts/EBGaramond-Regular.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "EB Garamond";
+    font-style:italic;
+    font-weight: normal;
+    src: url("../fonts/EBGaramond-Italic.otf") format("opentype");
+} */
+
+/* @font-face {
+    font-family: "EB Garamond";
+    font-style: normal;
+    font-weight: bold;
+    src: url("../fonts/EBGaramond-Bold.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "EB Garamond";
+    font-style: italic;
+    font-weight: bold;
+    src: url("../fonts/EBGaramond-BoldItalic.otf") format("opentype");
+} */
+
+  html {
+    font-family: 'EB Garamond', sans-serif;
+    /* font-kerning: normal; */
+    /* font-variant-ligatures: common-ligatures historical-ligatures; */
+    /* font-variant-numeric: oldstyle-nums; */
+    font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'dlig' on, 'clig' on, 'calt' on, 'hlig' off, 'swsh' on, 'locl' off;
+    -webkit-font-smoothing: antialiased;
+  }
+
+sup {
+    font-feature-settings: "sup" on;
+    /* vertical-align: inherit; */
+    font-size: inherit;
+}
+
+/* sub {
+    font-feature-settings: "subs" on;
+} */
+
+double {
+    font-size: 2rem;
+    vertical-align: -10%;
+    opacity: 0.8;
+}
+
+double.separator {
+    display: block;
+    margin: 2rem auto 3rem auto;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+body {
+    overflow: hidden;
+    background-image: url('../images/brown-wooden-flooring.jpg');
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+body.switched {
+    transition: color 0.6s, background-color 0.6s;
+}
+
+:root {
+    font-size: calc(var(--book-height)/(34 * 1.5));
+    --img-aspect-ratio: 1.613;
+    --aspect-ratio: min(var(--viewport-aspect-ratio), var(--img-aspect-ratio));  
+}
+
+h1 {
+    font-size: 2rem;
+    margin-bottom: 0.8rem;
+    text-align: center;
+    text-transform:uppercase;
+    font-weight: normal;
+}
+
+h2 {
+    font-size: 1.2rem;
+    text-align: center;
+    font-weight: normal;
+}
+
+h2.chapter-heading {
+    font-style: italic;
+    margin: 2rem auto 3rem auto;
+}
+
+h3 {
+    font-size: 1.2rem;
+    text-align: center;
+    font-weight: normal;
+}
+
+.header {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+}
+
+/*
+  Built-in class:
+    # author: Name
+*/
+.byline {
+    font-feature-settings: "smcp";
+}
+
+.subtitle {
+    font-feature-settings: "scmp" off;
+}
+
+.separator {
+    text-align: center;
+}
+
+/* 
+  Enables <iframe> support work on itch.io when using mobile iOS
+*/
+.outerContainer {
+    position: absolute;
+    display: block;
+    display: none;
+    margin: 0;
+    padding: 0;
+    -webkit-overflow-scrolling: touch;
+    overflow: scroll;
+    overflow-x: hidden;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    margin-top: 24px;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 980px) {
+    .outerContainer {
+        margin-top: 44px;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+}
+
+p, #ruler,#indent {
+    font-size: 1.2rem;
+    line-height: 1.2;
+    color: rgba(0,0,0,0.9);
+    margin-block-end: 0;
+    margin-block-start: 0;
+    /* text-indent: 1.5em; */
+    /* text-align: justify; */
+    /* hyphens: manual; */
+}
+
+a {
+    transition: color 0.6s;
+    color: #333;
+    font-style: italic;
+    text-decoration-thickness: 1px;
+}
+
+a:hover {
+    color: black;
+    transition: color 0.1s;
+}
+
+strong {
+    color: black;
+    font-weight: bold;
+}
+
+img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+.drop-cap {
+    font-size: 280%;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+    text-transform: uppercase;
+}
+
+.drop-quote {
+    font-size: 180%;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+}
+
+
+cap {
+    font-feature-settings: "smcp";
+}
+
+.container .hide {
+    opacity: 0.0;
+}
+
+.container .invisible {
+    display: none;
+}
+
+.container > *, .container > p > * {
+    opacity: 1.0;
+    transition: opacity 0.5s;
+}
+
+
+/*
+  Class applied to all choices
+  (Will always appear inside <p> element by default.)
+*/
+li.choice {
+    text-align: center;
+    line-height: 1.7rem;
+}
+
+ol.choice {
+    position: relative;
+    /* list-style-position: inside; To make sure the number is inside the li */
+    counter-reset: item; /* Set a counter */    
+    padding-inline-start: 3rem;
+}
+
+/* ol.choice li::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: "............................................................................";
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: 1.5em;
+} */
+
+/* 
+  Class applied to first choice
+*/
+:not(.choice)+.choice {
+    padding-top: 1rem;
+}
+
+/*
+  Class applied to choice links
+*/
+.choice a {
+    font-size: 1.2rem;
+}
+
+/* 
+  Built-in class:
+    The End # CLASS: end
+*/
+.end {
+    text-align: center;
+    font-weight: bold;
+    color: black;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+#controls {
+    z-index: 4;
+    text-align: center;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: -0.6rem;
+    user-select: none;
+    transition: color 0.6s, background 0.6s;
+}
+
+#controls [disabled] {
+    color: #999;
+}
+
+#controls input[type=range] {
+    vertical-align: middle;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 5rem;
+    cursor: pointer;
+    outline: none;
+    height: 0.5rem;
+    background-color: transparent;
+    box-sizing: border-box;
+    border: 1px solid black;
+    border-radius: 0.25rem;
+    overflow: hidden;
+}
+
+#controls input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 0.5rem;
+    width: 0.5rem;
+    border-radius: 0.25rem;
+    background-color: rgba(0,0,0,0.9);
+    border: none;
+    /*  slider progress trick  */
+    box-shadow: -407px 0 0 400px rgba(0,0,0,0.3);
+}
+
+#controls input::-webkit-runnable-track {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+#controls>a:not(:last-of-type):after, #controls>span::after {
+    content: " | ";
+}
+
+#book {
+    position: relative;
+    width: var(--book-width);
+    height: var(--book-height);
+    background-image: url('../images/book-3057904.png');
+    background-size: contain; /* Changed from cover to contain */
+    background-position: center;
+    background-repeat: no-repeat; /* Prevents repeating the image when aspect ratio doesn't match */
+    perspective: 500px;
+    perspective-origin: 50% 50%;
+}
+
+#page_left, #page_right {
+    position: absolute;
+    top: 5%; /* Adjust these values as necessary */
+    bottom: 10%;
+    width: 39%;
+    box-sizing: border-box;
+    padding: 0 3rem 1rem 1rem;
+    /* border: 1px dotted rgba(200,200,200,1); */
+    overflow: visible;
+    overflow-y: scroll;
+    opacity: 0.95;
+    mix-blend-mode: darken;
+}
+
+#story {
+    overflow-x:  visible;
+    text-align: justify;
+    text-justify: inter-word;
+    margin-bottom: 1.2em;
+    line-height: 1.5;
+}
+
+/* #story p span {
+    font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'clig' on, 'hlig' on;
+} */
+
+#page_left {
+    left: 11.5%;
+}
+
+#page_right {
+    /* background-color: rgba(200,200,200,0.5); */
+    right: 7%;
+    height: calc(28 * 1.2 * 1.2rem);
+    padding-bottom: 0;
+    /* transform: translateX(-1%) translateY(2%) rotateX(0deg) rotateY(-1deg) rotateZ(0deg); */
+}
+
+
+/* ===== Scrollbar CSS ===== */
+  /* Firefox */
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: #000000 rgba(255,255,255,0);
+  }
+
+  /* Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    width: calc(1rem/4);
+  }
+
+  *::-webkit-scrollbar-track {
+    background: rgba(255,255,255,0.0);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: #000000;
+    border-radius: calc(1rem/4/2);
+    border: none;
+  }
+
+.fade-in {
+    animation: fadeIn ease 1s;
+    -webkit-animation: fadeIn ease 1s;
+    -moz-animation: fadeIn ease 1s;
+    -o-animation: fadeIn ease 1s;
+    -ms-animation: fadeIn ease 1s;
+}
+
+/* Style for individual words that need to fade in */
+.word.fade-in {
+    animation-fill-mode: forwards;
+    opacity: 0; /* Start invisible */
+}
+
+@keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+}
+
+@-moz-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+}
+
+@-webkit-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+}
+
+@-o-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+}
+
+@-ms-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+}
+
+#versions {
+    position: fixed;
+    top: 0px;
+    right: 12px;
+    font-size: 10px;
+}
+
+#preview {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    border: 1px none red;
+    background-color: #fff;
+    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
+}
+
+#preview p {
+    text-indent: 0;
+    text-align: left;
+}
+
+#ruler, #indent {
+    visibility: hidden;
+    position: absolute;
+    top: -8000px;
+    width: auto;
+    display: inline;
+    left: -8000px;
+    text-indent: 0;
+    text-align: left;
+    hyphens: none;
+    margin-block-end: 0;
+}
+
+#ruler i {
+    font-style: italic;
+}
+
+#indent {
+    text-indent: 1.5em;
+}
+
+#remark {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    margin: 0 auto;
+    background-color: transparent;
+}
+
+#lighting {
+    position: absolute;
+    top: -35%;
+    left: -35%;
+    width: 180%;
+    height: 180%;
+    animation: gradient-animation-shrink 1s 1;
+    background: radial-gradient(circle, rgba(255,240,182,0.1) 0%, rgba(255,237,165,0.2) 20%, rgba(0,0,0,0.9) 65%, rgba(0,0,0,0.9) 100%);
+    mix-blend-mode: color-burn;
+    pointer-events: none;  /* makes the element ignore mouse events, and pass them to elements underneath */
+    z-index: 999;  /* should be high enough to be on top of other elements */
+}
+
+@keyframes gradient-animation-grow {
+    0% { width: 180%; height: 180%; left: -35%; top: -35%; }
+    100% { width: 170%; height:  170%; left: -33%; top: -33%; }
+}  
+
+@keyframes gradient-animation-shrink {
+    0% { width: 170%; height:  170%; left: -33%; top: -33%; }
+    100% { width: 180%; height: 180%; left: -35%; top: -35%; }
+}  
+
+/* Command history */
+#command_history {
+    max-height: 120px;
+    overflow-y: auto;
+    font-size: 16px;
+    margin-bottom: 15px;
+    border-top: 1px solid #d1c8b9;
+    padding-top: 10px;
+    scrollbar-width: thin;
+    scrollbar-color: #8b7765 rgba(255, 255, 255, 0.1);
+}
+
+#command_history::-webkit-scrollbar {
+    width: 6px;
+}
+
+#command_history::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+#command_history::-webkit-scrollbar-thumb {
+    background-color: #8b7765;
+    border-radius: 4px;
+}
+
+/* Input area */
+#input_area {
+    display: block;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+/* Command input container */
+#command_input {
+    width: 100%;
+    position: relative;
+    margin-top: 10px;
+    transition: opacity 0.5s ease; /* Add transition for fading effect */
+}
+
+/* Fade out command input when loading */
+#command_input.fading {
+    opacity: 0.3;
+    pointer-events: none; /* Prevent interaction while faded out */
+}
+
+/* Input wrapper for positioning cursor */
+.input-wrapper {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    min-height: 1.5em; /* Minimum height for one line */
+    max-height: 6em; /* Maximum height - about 4 lines */
+    overflow: visible; /* Changed from 'auto' to 'visible' to hide scrollbars when not needed */
+}
+
+/* Player input styling - now a textarea for multiline support */
+#player_input {
+    width: 100%;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid #8b7765;
+    font-family: 'EB Garamond', serif;
+    font-size: 1.1rem;
+    color: #333;
+    outline: none;
+    padding: 5px 0;
+    caret-color: transparent; /* Hide the default caret */
+    box-sizing: border-box;
+    resize: none; /* Disable manual resizing */
+    overflow: hidden; /* Hide all scrollbars */
+    line-height: 1.2; /* Match paragraph line height */
+    height: auto; /* Allow height to adjust */
+    min-height: 1.5em; /* Ensure minimum height */
+}
+
+/* Custom cursor styling */
+#cursor {
+    position: absolute;
+    display: inline-block;
+    width: 8px;
+    height: 1.2em;
+    background-color: #333;
+    top: 6px;
+    left: 0;
+    animation: blink 1s step-end infinite;
+    pointer-events: none; /* Allow clicks to pass through to the input */
+    z-index: 1; /* Ensure cursor appears above text */
+}
+
+/* Placeholder styling - lighter and italic, with padding to avoid cursor overlap */
+#player_input::placeholder {
+    color: #aaa;
+    font-style: italic;
+    padding-left: 15px; /* Add padding to move placeholder text to the right */
+}
+
+/* Blinking animation */
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+/* Fade-in animation for input area */
+@keyframes fadeInInput {
+    from { opacity: 0.3; }
+    to { opacity: 1; }
+}
+
+.fade-in-input {
+    animation: fadeInInput 0.5s ease forwards;
+}
+
+/* Text animation and typography styles */
+
+/* Fade-in animation for text elements */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  opacity: 0;
+  animation: fadeIn 0.5s ease-in forwards;
+}
+
+/* Hyphenation settings */
+.story-paragraph {
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+}
+
+/* Justified text styles */
+#story p {
+  text-align: justify;
+  text-justify: inter-word;
+  margin-bottom: 1.2em;
+  line-height: 1.5;
+}
+
+/* Typography for word elements in rendered paragraphs */
+.word {
+  display: inline-block;
+  position: absolute;
+}
+
+/* Typography for hyphen at line breaks */
+.hyphen-marker {
+  display: inline-block;
+}
+
+/* Highlight the latest paragraph being rendered */
+.latest-paragraph {
+  color: #000;
+}
+
+/* Completed paragraphs style */
+.completed-paragraph {
+  color: #222;
+}
+
+/* Animation speed controls */
+#speed {
+  width: 80px;
+  vertical-align: middle;
+  margin: 0 5px;
+}
+
+/* UI Effects */
+.effects-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Allow clicks to pass through */
+    z-index: 998; /* Below lighting but above other elements */
+}
+
+.candle-effect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+    pointer-events: none;
+    mix-blend-mode: screen;
+    background: radial-gradient(circle at center, rgba(255,230,150,0.2) 0%, rgba(0,0,0,0) 70%);
+    animation: candle-flicker 4s infinite alternate;
+}
+
+@keyframes candle-flicker {
+    0% { opacity: 0.2; transform: scale(1.02); }
+    25% { opacity: 0.3; }
+    50% { opacity: 0.25; transform: scale(0.98); }
+    75% { opacity: 0.3; }
+    100% { opacity: 0.35; transform: scale(1); }
+}
diff --git a/public/js/tts-factory.js b/public/js/tts-factory.js
index 48c1c9f..4160573 100644
--- a/public/js/tts-factory.js
+++ b/public/js/tts-factory.js
@@ -44,7 +44,8 @@ class TTSFactoryModule extends BaseModule {
             'pause',
             'resume',
             'getVoices',
-            'getPreference'
+            'getPreference',
+            'isSpeaking'
         ]);
         
         // Add dependencies
@@ -369,6 +370,23 @@ class TTSFactoryModule extends BaseModule {
         return defaultValue;
     }
     
+    /**
+     * Check if any TTS handler is currently speaking
+     * @returns {boolean} - True if speaking, false otherwise
+     */
+    isSpeaking() {
+        if (!this.activeHandler || !this.handlers[this.activeHandler]) {
+            return false;
+        }
+        
+        try {
+            return this.handlers[this.activeHandler].isSpeaking();
+        } catch (error) {
+            console.error("Error checking speaking status:", error);
+            return false;
+        }
+    }
+    
     /**
      * Clean up when module is disposed
      */
diff --git a/public/js/ui-effects.js b/public/js/ui-effects.js
index beefc98..65b3db8 100644
--- a/public/js/ui-effects.js
+++ b/public/js/ui-effects.js
@@ -42,7 +42,8 @@ class UIEffects extends BaseModule {
             'applyShakeEffect',
             'applyFlashEffect',
             'applyTextEmphasis',
-            'processCommand'
+            'processCommand',
+            'handleLightingAnimationEnd'
         ]);
         
         console.log('UIEffects: Constructor initialized');
@@ -62,6 +63,9 @@ class UIEffects extends BaseModule {
             // Set up ambient effect animations
             this.setupAmbientEffects();
             
+            // Start ambient effects immediately after initialization
+            this.startAmbientEffects();
+            
             this.reportProgress(100, 'UI Effects ready');
             
             // Use the parent's dispatchEvent method
@@ -124,6 +128,31 @@ class UIEffects extends BaseModule {
     setupCandleFlickerEffect() {
         // Store the animation frame ID for later cancellation
         this.candleAnimationId = null;
+        
+        // Add animation end event listener to create continuous random animations
+        if (this.lightingElement) {
+            this.lightingElement.addEventListener('animationend', this.handleLightingAnimationEnd.bind(this));
+        }
+    }
+    
+    /**
+     * Handle the end of a lighting animation by setting a new random duration
+     * @param {AnimationEvent} event - The animation end event
+     */
+    handleLightingAnimationEnd(event) {
+        if (!this.lightingElement || !this.ambientEffectsActive) return;
+        
+        // Generate a random duration between 0.5 and 4 seconds
+        const randomDuration = Math.random() * 3.5 + 0.5;
+        
+        // Toggle between grow and shrink animations
+        const previousAnimation = event.animationName;
+        
+        if (previousAnimation === 'gradient-animation-grow') {
+            this.lightingElement.style.animation = `gradient-animation-shrink ${randomDuration}s 1`;
+        } else {
+            this.lightingElement.style.animation = `gradient-animation-grow ${randomDuration}s 1`;
+        }
     }
     
     updateCandleEffect() {
@@ -153,9 +182,10 @@ class UIEffects extends BaseModule {
             this.updateCandleEffect();
         }
         
-        // Apply lighting animation
+        // Apply lighting animation with initial random duration
         if (this.lightingElement) {
-            this.lightingElement.style.animation = 'gradient-animation-shrink 2s infinite alternate';
+            const initialDuration = Math.random() * 3.5 + 0.5;
+            this.lightingElement.style.animation = `gradient-animation-shrink ${initialDuration}s 1`;
         }
     }