Security & UX Update: Custom session codes, admin session take-over, secure presentation tokens, and SVG/CSS branding assets

public/index.html

@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quizalarm</title>
-    <link rel="icon" href="/img/logo.png">
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚨</text></svg>">
     <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
@@ -13,10 +14,13 @@
     <style>
         body {
             font-family: system-ui, -apple-system, sans-serif;
-            background: #111111 url('/img/bg.png') center/cover fixed;
-
+            background: #111111;
+            background-image:
+                radial-gradient(ellipse at 20% 50%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 50%, rgba(245, 158, 11, 0.06) 0%, transparent 50%);
         }
 
+        /* Answer button base colors */
         .answer-a {
             background: #dc2626;
         }
@@ -49,6 +53,7 @@
             background: #15803d;
         }
 
+        /* Selected state */
         .answer-a.selected,
         .answer-b.selected,
         .answer-c.selected,
@@ -57,6 +62,7 @@
             transform: scale(1.03);
         }
 
+        /* Disabled state */
         .answer-a.disabled,
         .answer-b.disabled,
         .answer-c.disabled,
@@ -65,6 +71,23 @@
             cursor: not-allowed;
         }
 
+        /* Ensure Tailwind doesn't override answer button styles */
+        button.answer-a,
+        button.answer-b,
+        button.answer-c,
+        button.answer-d {
+            border: none;
+        }
+
+        button.answer-a.selected,
+        button.answer-b.selected,
+        button.answer-c.selected,
+        button.answer-d.selected {
+            outline: 4px solid white;
+            transform: scale(1.03);
+        }
+
+        /* Fire gradient for headings */
         .fire-gradient {
             background: linear-gradient(135deg, #dc2626, #f59e0b);
             -webkit-background-clip: text;