Harden onion boot flow and deepen site surfaces

Add persistent onion key backup and restore, improve startup resilience, and flesh out the major site verticals with richer navigation, search coverage, and operator documentation.

Made-with: Cursor

app/red-room/page.tsx

@@ -0,0 +1,69 @@
+import ThemedLayout from "@/components/layouts/ThemedLayout";
+
+export default function RedRoomPage() {
+  return (
+    <ThemedLayout theme="dark" title="The Red Room Simulation">
+      <div className="min-h-screen flex flex-col items-center justify-center text-red-600 font-mono p-8">
+        <div className="max-w-3xl w-full border-4 border-red-900 p-12 bg-[#0a0000] shadow-[0_0_100px_rgba(255,0,0,0.2)]">
+          <div className="text-center mb-12">
+            <h1 className="text-6xl font-black tracking-tighter mb-4 animate-pulse">RED ROOM</h1>
+            <p className="text-xs uppercase tracking-[1em] opacity-50">Live Stream Simulation</p>
+          </div>
+
+          <div className="relative aspect-video bg-black border-2 border-red-900 flex items-center justify-center overflow-hidden mb-8">
+            <div className="absolute top-4 left-4 flex items-center gap-2">
+              <div className="w-3 h-3 bg-red-600 rounded-full animate-ping" />
+              <span className="text-xs font-bold">LIVE: 12,402 VIEWERS</span>
+            </div>
+            <div className="absolute top-4 right-4 text-[10px] opacity-40">
+              03:24:12:08
+            </div>
+            
+            <div className="text-center space-y-4">
+              <div className="text-4xl opacity-20">NO SIGNAL</div>
+              <div className="text-[10px] uppercase tracking-widest opacity-40">Waiting for next event...</div>
+            </div>
+
+            {/* Static Overlay */}
+            <div className="absolute inset-0 opacity-10 pointer-events-none bg-[url('https://media.giphy.com/media/oEI9uWUqnW3CeEnwL6/giphy.gif')] bg-cover" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-8 mb-12">
+            <div className="space-y-4">
+              <h3 className="text-xl font-bold border-b border-red-900/40 pb-2">VOTING</h3>
+              <div className="flex justify-between items-center text-xs">
+                <span>OPTION A: LIGHTS ON</span>
+                <span className="font-bold">42%</span>
+              </div>
+              <div className="w-full h-1 bg-red-900/20">
+                <div className="h-full bg-red-600 w-[42%]" />
+              </div>
+              <div className="flex justify-between items-center text-xs">
+                <span>OPTION B: LIGHTS OFF</span>
+                <span className="font-bold">58%</span>
+              </div>
+              <div className="w-full h-1 bg-red-900/20">
+                <div className="h-full bg-red-600 w-[58%]" />
+              </div>
+            </div>
+            <div className="space-y-4">
+              <h3 className="text-xl font-bold border-b border-red-900/40 pb-2">BETTING</h3>
+              <div className="text-[10px] opacity-60 leading-relaxed">
+                Place your bets in BTC to influence the outcome. 
+                Minimum bet: 0.005 BTC.
+              </div>
+              <button className="w-full bg-red-900/90 py-2 text-xs font-bold uppercase text-red-100 transition-all hover:bg-red-800">
+                PLACE BET
+              </button>
+            </div>
+          </div>
+
+          <div className="text-[10px] text-red-900/40 leading-relaxed text-center italic">
+            * This is a simulated interactive experience. No real harm is depicted. 
+            All events are scripted for entertainment purposes.
+          </div>
+        </div>
+      </div>
+    </ThemedLayout>
+  );
+}