fix: add missing phase-transition overlay element (closes #101)

BUG-07: showPhaseTransition() looks for #phase-transition but the element
didn't exist in index.html. Added the overlay div with .pt-phase, .pt-name,
and .pt-desc children matching what the engine expects.

Note: BUG-06 (toast text) and BUG-09 (mute/contrast buttons) were already
fixed on main in prior commits.

index.html

@@ -86,6 +86,8 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
 #drift-ending .ending-quote{color:var(--dim);font-style:italic;font-size:11px;border-left:2px solid #f44336;padding-left:12px;margin:20px 0;text-align:left}
 #drift-ending button{margin-top:20px;background:#1a0808;border:1px solid #f44336;color:#f44336;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px}
 #drift-ending button:hover{background:#2a1010}
+#phase-transition{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.95);z-index:95;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px;pointer-events:none}
+#phase-transition.active{display:flex}
 #toast-container{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:320px}
 .toast{pointer-events:auto;padding:8px 14px;border-radius:6px;font-size:11px;font-family:inherit;line-height:1.4;animation:toast-in 0.3s ease-out;opacity:0.95;border:1px solid;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
 .toast.fade-out{animation:toast-out 0.4s ease-in forwards}
@@ -272,6 +274,12 @@ The light is on. The room is empty."
 </div>
 </div>
 
+<div id="phase-transition">
+  <div class="pt-phase" style="font-size:12px;color:var(--dim);letter-spacing:4px;margin-bottom:12px">PHASE</div>
+  <div class="pt-name" style="font-size:28px;font-weight:300;color:var(--gold);letter-spacing:4px;text-shadow:0 0 40px #ffd70044;margin-bottom:8px"></div>
+  <div class="pt-desc" style="font-size:12px;color:var(--dim);font-style:italic;max-width:400px"></div>
+</div>
+
 <div id="toast-container"></div>
 <div id="custom-tooltip"></div>
 </body>