Fix: Selectively apply !important to title and fix indentation error

app.py

@@ -253,7 +253,7 @@ def _run_script(script, start_scene=0, start_dial=0, delay_start=0):
 # ── CSS ──────────────────────────────────────────────────────────
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');
-*,*::before,*::after{box-sizing:border-box!important}
+*,*::before,*::after{box-sizing:border-box}
 body,.gradio-container{background:#210609!important;font-family:'IM Fell English',serif!important;color:#e8d4a8!important;margin:0!important;padding:0!important}
 .gradio-container{max-width:100%!important;padding:0!important}
 footer{display:none!important}
@@ -263,13 +263,13 @@ footer{display:none!important}
 #main-tabs>.tabitem{border:none!important;padding:0!important;margin:0!important}
 
 /* Select screen */
-.sel-wrap{position:relative!important;overflow:hidden!important;min-height:100vh!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;background:#210609!important}
+.sel-wrap{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#210609}
 .vid-container{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:0!important;padding:0!important;margin:0!important;border:none!important;background:transparent!important;pointer-events:none}
-.sel-video{width:100%!important;height:100%!important;object-fit:cover!important;transition:filter .8s ease!important;pointer-events:none!important;display:block!important;transform:scale(1.05)!important}
-.sel-content{z-index:1!important;position:relative!important;transition:opacity .5s ease!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:32px!important;padding:60px 40px!important}
-.ttl{font-size:4em!important;color:#c9a227!important;text-shadow:0 0 60px rgba(201,162,39,.4)!important;margin:0!important;text-align:center!important;letter-spacing:.05em!important}
-.sub{font-style:italic!important;color:#7a6a4e!important;font-size:1.1em!important;margin:-20px 0 0!important;text-align:center!important}
-.pbtn-row{display:flex!important;gap:16px!important;flex-wrap:wrap!important;justify-content:center!important}
+.sel-video{width:100%;height:100%;object-fit:cover;transition:filter .8s ease;pointer-events:none;display:block;transform:scale(1.05)}
+.sel-content{z-index:1;position:relative;transition:opacity .5s ease;display:flex;flex-direction:column;align-items:center;gap:32px;padding:60px 40px}
+.ttl{font-size:4em;color:#c9a227!important;text-shadow:0 0 60px rgba(201,162,39,.4);margin:0;text-align:center;letter-spacing:.05em}
+.sub{font-style:italic;color:#7a6a4e;font-size:1.1em;margin:-20px 0 0;text-align:center}
+.pbtn-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
 #btn-comedy button,#btn-drama button,#btn-infidelity button{
   background:linear-gradient(135deg,#140a0c,#2a1015)!important;border:1px solid #c9a22744!important;
   color:#c9a227!important;font-family:'IM Fell English',serif!important;font-size:1.05em!important;
@@ -277,45 +277,45 @@ footer{display:none!important}
   transition:border-color .3s,box-shadow .3s,transform .2s!important}
 #btn-comedy button:hover,#btn-drama button:hover,#btn-infidelity button:hover{
   border-color:#c9a227!important;box-shadow:0 0 28px rgba(201,162,39,.25)!important;transform:translateY(-2px)!important}
-.div-txt{color:#7a6a4e!important;font-style:italic!important;font-size:.9em!important}
+.div-txt{color:#7a6a4e;font-style:italic;font-size:.9em}
 #custom-topic textarea{background:#120508!important;border:1px solid #c9a22733!important;color:#e8d4a8!important;
   font-family:'IM Fell English',serif!important;font-size:1em!important;border-radius:6px!important;min-width:480px!important}
-#status-box{color:#c9a227!important;font-style:italic!important;font-size:.95em!important;min-height:24px!important;text-align:center!important}
+#status-box{color:#c9a227;font-style:italic;font-size:.95em;min-height:24px;text-align:center}
 
 /* Theater screen — curtain reveal animation on entry */
-.th-wrap{position:relative!important;min-height:100vh!important;background:radial-gradient(circle at center top, #3a0d18 0%, #210609 80%)!important;display:flex!important;flex-direction:column!important;animation:curtain-open 1.4s cubic-bezier(.77,0,.18,1) both!important}
+.th-wrap{position:relative;min-height:100vh;background:radial-gradient(circle at center top, #3a0d18 0%, #210609 80%);display:flex;flex-direction:column;animation:curtain-open 1.4s cubic-bezier(.77,0,.18,1) both}
 @keyframes curtain-open{
   0%{clip-path:inset(0 50% 0 50%)}
   100%{clip-path:inset(0 0% 0 0%)}
 }
-.scene-img-wrap{position:relative!important;width:100%!important;max-height:340px!important;overflow:hidden!important;background:#000!important;border-bottom:1px solid #c9a22722!important}
-.img-curtain{position:absolute!important;top:0!important;height:120%!important;width:15%!important;max-width:150px!important;z-index:10!important;pointer-events:none!important;object-fit:fill!important;filter:drop-shadow(0 0 15px rgba(0,0,0,0.9))!important}
-.img-curtain-left{left:0!important}
-.img-curtain-right{right:0!important;transform:scaleX(-1)!important}
-.scene-img{width:100%!important;max-height:340px!important;object-fit:cover!important;display:block!important;transition:opacity .6s!important}
-.th-lower{padding:20px 32px 16px!important;flex:1!important;display:flex!important;flex-direction:column!important;gap:16px!important}
-.action-text{font-style:italic!important;color:#7a6a4e!important;font-size:.85rem!important;margin-bottom:4px!important}
-.char-name{font-size:1rem!important;font-weight:bold!important;letter-spacing:.04em!important;margin-bottom:6px!important}
-.dialogue-text{color:#e8d4a8!important;font-size:1.1rem!important;line-height:1.8!important;min-height:2em!important}
-.dialogue-box{padding:12px 0!important}
-.ctrl-row{display:flex!important;align-items:center!important;gap:12px!important;border-top:1px solid #c9a22722!important;padding-top:14px!important;flex-wrap:wrap!important}
+.scene-img-wrap{position:relative;width:100%;max-height:340px;overflow:hidden;background:#000;border-bottom:1px solid #c9a22722}
+.img-curtain{position:absolute;top:0;height:120%;width:15%;max-width:150px;z-index:10;pointer-events:none;object-fit:fill;filter:drop-shadow(0 0 15px rgba(0,0,0,0.9))}
+.img-curtain-left{left:0}
+.img-curtain-right{right:0;transform:scaleX(-1)}
+.scene-img{width:100%;max-height:340px;object-fit:cover;display:block;transition:opacity .6s}
+.th-lower{padding:20px 32px 16px;flex:1;display:flex;flex-direction:column;gap:16px}
+.action-text{font-style:italic;color:#7a6a4e;font-size:.85rem;margin-bottom:4px}
+.char-name{font-size:1rem;font-weight:bold;letter-spacing:.04em;margin-bottom:6px}
+.dialogue-text{color:#e8d4a8;font-size:1.1rem;line-height:1.8;min-height:2em}
+.dialogue-box{padding:12px 0}
+.ctrl-row{display:flex;align-items:center;gap:12px;border-top:1px solid #c9a22722;padding-top:14px;flex-wrap:wrap}
 #hist-btn button{background:transparent!important;border:1px solid #c9a22744!important;color:#c9a227!important;
   font-size:1.1em!important;width:44px!important;height:44px!important;border-radius:50%!important;padding:0!important;min-width:44px!important}
-#history-panel{position:fixed!important;top:0!important;right:-420px!important;height:100vh!important;width:400px!important;z-index:500!important;
-  background:rgba(10,5,8,.97)!important;border-left:2px solid #c9a227!important;padding:24px 20px!important;overflow-y:auto!important;transition:right .3s!important}
-#history-panel.open{right:0!important}
-.history-inner{display:flex!important;flex-direction:column!important;gap:10px!important}
-.hist-row{padding:8px 0!important;border-bottom:1px solid #c9a22722!important}
-.hist-name{font-size:.85em!important;font-weight:bold!important;display:block!important;margin-bottom:2px!important}
-.hist-line{color:#9a8a6e!important;font-style:italic!important;font-size:.95em!important}
-.mode-toggle{display:flex!important;border:1px solid #c9a22744!important;border-radius:6px!important;overflow:hidden!important}
-.mode-btn{background:transparent!important;border:none!important;color:#7a6a4e!important;padding:8px 18px!important;font-family:'IM Fell English',serif!important;font-size:.9em!important;cursor:pointer!important;transition:all .2s!important}
-.mode-btn.active{background:#c9a22722!important;color:#c9a227!important}
+#history-panel{position:fixed;top:0;right:-420px;height:100vh;width:400px;z-index:500;
+  background:rgba(10,5,8,.97);border-left:2px solid #c9a227;padding:24px 20px;overflow-y:auto;transition:right .3s}
+#history-panel.open{right:0}
+.history-inner{display:flex;flex-direction:column;gap:10px}
+.hist-row{padding:8px 0;border-bottom:1px solid #c9a22722}
+.hist-name{font-size:.85em;font-weight:bold;display:block;margin-bottom:2px}
+.hist-line{color:#9a8a6e;font-style:italic;font-size:.95em}
+.mode-toggle{display:flex;border:1px solid #c9a22744;border-radius:6px;overflow:hidden}
+.mode-btn{background:transparent;border:none;color:#7a6a4e;padding:8px 18px;font-family:'IM Fell English',serif;font-size:.9em;cursor:pointer;transition:all .2s}
+.mode-btn.active{background:#c9a22722;color:#c9a227}
 #interrupt-input textarea{background:#120508!important;border:1px solid #c9a22733!important;color:#e8d4a8!important;font-family:'IM Fell English',serif!important;border-radius:6px!important}
-.ov-fullscreen{position:fixed!important;inset:0!important;z-index:400!important;background:rgba(10,5,8,.92)!important;
-  display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:16px!important}
-.ov-txt{color:#c9a227!important;font-size:1.4em!important;font-style:italic!important}
-.ov-spin{width:40px!important;height:40px!important;border:3px solid #c9a22733!important;border-top-color:#c9a227!important;border-radius:50%!important;animation:spin 1s linear infinite!important}
+.ov-fullscreen{position:fixed;inset:0;z-index:400;background:rgba(10,5,8,.92);
+  display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:16px}
+.ov-txt{color:#c9a227;font-size:1.4em;font-style:italic}
+.ov-spin{width:40px;height:40px;border:3px solid #c9a22733;border-top-color:#c9a227;border-radius:50%;animation:spin 1s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
 
 @keyframes nb-in { 0% { opacity:0; } 100% { opacity:1; } }
@@ -360,14 +360,12 @@ async () => {
         if(old) old.remove();
         const div = document.createElement("div");
         div.id = "native-title-overlay";
-        const h = window.innerHeight;
-        div.style.cssText = `position:absolute;top:0;left:0;width:100%;height:${h}px;z-index:99999;pointer-events:none;overflow:hidden;`;
+        div.style.cssText = "position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden;";
         div.innerHTML = `
-        <div id="native-bg" style="position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0508;opacity:0;animation: nb-in 0.8s ease forwards 2.4s, nb-out 0.8s ease forwards 6.5s; z-index:1;"></div>
-        <h1 id="native-text" style="position:absolute;top:${(h/2) - 100}px;left:0;width:100%;z-index:10;color:#c9a227;font-size:4em;text-align:center;margin:0;padding:0;opacity:0;animation: nt-in 1.5s ease-out forwards 3.0s, nt-out 1.5s ease-in forwards 5.5s; text-shadow:0 0 40px rgba(201,162,39,0.5);font-family:'IM Fell English',serif;">${titleText}</h1>
+        <div id="native-bg" style="position:absolute;inset:0;background:#0a0508;opacity:0;animation: nb-in 0.8s ease forwards 2.4s, nb-out 0.8s ease forwards 6.5s; z-index:1;"></div>
+        <h1 id="native-text" style="position:absolute;top:180px;left:0;width:100%;z-index:10;color:#c9a227;font-size:4em;text-align:center;margin:0;padding:0;opacity:0;animation: nt-in 1.5s ease-out forwards 3.0s, nt-out 1.5s ease-in forwards 5.5s; text-shadow:0 0 40px rgba(201,162,39,0.5);font-family:'IM Fell English',serif;">${titleText}</h1>
         `;
-        const container = document.querySelector('.gradio-container') || document.body;
-        container.appendChild(div);
+        document.body.appendChild(div);
         setTimeout(() => { div.remove(); }, 7500);
     };
     window.injectRewriting = (...args) => {
@@ -375,11 +373,9 @@ async () => {
         if(old) old.remove();
         const div = document.createElement("div");
         div.id = "native-rewriting-overlay";
-        const h = window.innerHeight;
-        div.style.cssText = `position:absolute;top:0;left:0;width:100%;height:${h}px;z-index:99999;background:rgba(10,5,8,0.92);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;overflow:hidden;`;
+        div.style.cssText = "position:fixed;inset:0;z-index:99999;background:rgba(10,5,8,0.92);display:flex;align-items:center;justify-content:flex-start;padding-top:250px;flex-direction:column;gap:16px;overflow:hidden;";
         div.innerHTML = `<div class="ov-spin" style="width:40px;height:40px;border:3px solid rgba(201,162,39,0.2);border-top-color:#c9a227;border-radius:50%;animation:spin 1s linear infinite;"></div><div style="color:#c9a227;font-size:1.4em;font-style:italic;">Rewriting…</div>`;
-        const container = document.querySelector('.gradio-container') || document.body;
-        container.appendChild(div);
+        document.body.appendChild(div);
         return args;
     };
     window.removeRewriting = (...args) => {