UI fixes: reels->right, visible feet, signal bar, clean ghost lines, tap-to-talk label

radio.html

@@ -111,9 +111,11 @@ body.intimate .room-lamp{ /* direct_address: dim the room */
   mix-blend-mode:overlay;opacity:.5;
 }
 /* rubber feet */
-.foot{position:absolute;bottom:-9px;width:96px;height:16px;border-radius:4px;
-  background:linear-gradient(180deg,#170f0a,#050302);box-shadow:0 9px 16px rgba(0,0,0,.55)}
-.foot.l{left:70px}.foot.r{right:70px}
+.foot{position:absolute;bottom:-13px;width:104px;height:20px;border-radius:0 0 7px 7px;
+  background:linear-gradient(180deg,#4a3420 0%,#241710 55%,#0c0805 100%);
+  border:1px solid rgba(0,0,0,.55);border-top:none;
+  box-shadow:0 12px 20px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,214,150,.22), inset 0 -3px 5px rgba(0,0,0,.55)}
+.foot.l{left:88px}.foot.r{right:88px}
 
 /* inset faceplate */
 .bezel{
@@ -277,7 +279,7 @@ body.broadcasting .onair .label{
   text-wrap:balance;
 }
 .line.in{opacity:1;transform:translateY(0)}
-.line.ghost{color:var(--foxed);opacity:.5}
+.line.past{color:var(--foxed);opacity:.5}
 .line.current{color:var(--dial-ivory)}
 .line .w{opacity:.18;filter:blur(2px);
   transition:opacity .5s ease, filter .5s ease, color .5s ease, text-shadow .5s ease}
@@ -387,11 +389,11 @@ body.powered .power-knob::after{background:linear-gradient(180deg,#fff,var(--emb
 body.powered .power-knob .pwr-txt{transform:translateX(-50%) rotate(-28deg);color:#ffd2b0}
 
 /* signal-integrity gauge (diegetic SIGNAL meter) */
-.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center}
+.gauge-wrap{display:flex;flex-direction:column;align-items:stretch;gap:6px;justify-content:center;width:100%}
 .gauge{
-  position:relative;width:100%;height:8px;border-radius:5px;
-  background:rgba(255,255,255,.06);overflow:hidden;
-  box-shadow:0 0 0 1px rgba(0,0,0,0.5) inset;
+  position:relative;width:100%;height:11px;border-radius:6px;
+  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(255,255,255,.05));overflow:hidden;
+  box-shadow:0 0 0 1px rgba(0,0,0,0.55) inset, inset 0 1px 2px rgba(0,0,0,.5);
 }
 .gauge .ticks{display:none}
 .gauge .fill{
@@ -550,15 +552,11 @@ body.locked .gauge .fill{
     <!-- ===== control deck ===== -->
     <div class="deck">
 
-      <!-- left: speaker grille + analog VU + tape reels -->
+      <!-- left: speaker grille + analog VU -->
       <div class="panel">
         <span class="cap">SPEAKER &middot; VU</span>
         <div class="speaker-grille" aria-hidden="true"></div>
         <canvas class="vu-canvas" id="vuCanvas" width="320" height="74" aria-hidden="true"></canvas>
-        <div class="reels" aria-hidden="true">
-          <div class="reel" id="reelL"><span class="hub"></span></div>
-          <div class="reel rev" id="reelR"><span class="hub"></span></div>
-        </div>
       </div>
 
       <!-- center: power -->
@@ -572,8 +570,13 @@ body.locked .gauge .fill{
         </div>
       </div>
 
-      <!-- right: handset + signal meter -->
+      <!-- right: tape reels + handset + signal meter -->
       <div class="panel">
+        <span class="cap">TAPE</span>
+        <div class="reels" aria-hidden="true">
+          <div class="reel" id="reelL"><span class="hub"></span></div>
+          <div class="reel rev" id="reelR"><span class="hub"></span></div>
+        </div>
         <span class="cap">CALL IN</span>
         <div class="handset-row">
           <button class="handset" id="handset" disabled
@@ -581,7 +584,7 @@ body.locked .gauge .fill{
             <span class="ic" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z"/></svg>
             </span>
-            <span class="ht"><b>CALL IN</b><span>HOLD TO TALK</span></span>
+            <span class="ht"><b>CALL IN</b><span>TAP TO TALK</span></span>
           </button>
         </div>
         <span class="cap" id="stageCap">SIGNAL</span>
@@ -1451,7 +1454,7 @@ function clearCaptionTimers(){ captionTimers.forEach(clearTimeout); captionTimer
 // Lift finished lines into the ghost stack; cap the trail at 3 lines.
 function ghostifyLines(){
   const lines = Array.prototype.slice.call(els.transcript.querySelectorAll(".line"));
-  lines.forEach(l=>{ l.classList.remove("current"); l.classList.add("ghost"); });
+  lines.forEach(l=>{ l.classList.remove("current"); l.classList.add("past"); });
   while (els.transcript.children.length > 3) els.transcript.removeChild(els.transcript.firstChild);
 }