clue page update

app/(main)/clue/[clueId]/page.js

@@ -576,6 +576,12 @@ export default function CluePage({ params }) {
 
   return (
     <div className="clue-container">
+      {/* Background Layer */}
+      <div className="background-layer"></div>
+
+      {/* Rails Background Layer */}
+      <div className="rails-background"></div>
+
       {/* Map Banner with team info and timer */}
       <div className="map-banner">
         <div className="team-name">
@@ -665,17 +671,21 @@ export default function CluePage({ params }) {
         </div>
 
         {/* Clue Information Section */}
-        <div className="clue-scroll">
-          <h1 className="clue-title">{clue?.title}</h1>
-          <div className="clue-content">
-            <h2>Description</h2>
-            <p className="clue-description">{clue?.description}</p>
-            {clue?.location && (
-              <div className="clue-location">
-                <h2>Location Hint</h2>
-                <p>{clue.location}</p>
-              </div>
-            )}
+        <div className="clue-container-outer">
+          <div className="clue-title-container">
+            <h1 className="clue-title">{clue?.title}</h1>
+          </div>
+          <div className="clue-scroll">
+            <div className="clue-content">
+              <h2>Description</h2>
+              <p className="clue-description">{clue?.description}</p>
+              {clue?.location && (
+                <div className="clue-location">
+                  <h2>Location Hint</h2>
+                  <p>{clue.location}</p>
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
@@ -704,9 +714,33 @@ export default function CluePage({ params }) {
           display: flex;
           flex-direction: column;
           min-height: 100vh;
-          background-color: #f4f1ea;
-          padding-bottom: 70px; /* Space for bottom navbar */
+          background-color: #69b5a8;
+          padding-bottom: 70px;
           position: relative;
+          overflow: hidden;
+        }
+
+        .background-layer {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 60%;
+          background-color: #a7d2cb;
+          z-index: 0;
+        }
+
+        .rails-background {
+          position: absolute;
+          bottom: 70px;
+          left: 0;
+          width: 100%;
+          height: 20vh;
+          background-image: url("/images/rails.svg");
+          background-repeat: repeat-x;
+          background-position: bottom;
+          background-size: contain;
+          z-index: 1;
         }
 
         .success-notification {
@@ -871,6 +905,8 @@ export default function CluePage({ params }) {
           width: 100%;
           max-width: 600px;
           margin: 0 auto;
+          position: relative;
+          z-index: 2; /* Ensure content appears above the background layers */
         }
 
         .scanner-section {
@@ -906,15 +942,45 @@ export default function CluePage({ params }) {
           font-weight: bold;
         }
 
-        .clue-scroll {
-          background-color: #f8f3e3;
-          border-radius: 10px;
-          padding: 20px;
+        .clue-container-outer {
           width: 100%;
-          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-          position: relative;
           margin-bottom: 20px;
-          border: 1px dashed #9c6b30;
+        }
+
+        .clue-title-container {
+          background-color: #D6BC69;
+          border: 2px solid black;
+          border-bottom: none;
+          border-top-left-radius: 10px;
+          border-top-right-radius: 10px;
+          padding: 15px 20px 5px 20px;
+          width: 100%;
+        }
+
+        .clue-title {
+          color: #68543c;
+          font-size: 1.8rem;
+          text-align: center;
+          margin: 0;
+          padding-bottom: 10px;
+        }
+
+        .clue-scroll {
+          background-color: #D6BC69;
+          border: 2px solid black;
+          border-top: none;
+          border-bottom-left-radius: 10px;
+          border-bottom-right-radius: 10px;
+          width: 100%;
+          padding: 20px;
+          position: relative;
+        }
+
+        .clue-content {
+          padding: 20px;
+          background-color: rgba(255, 255, 255, 0.8);
+          border-radius: 10px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         h2 {
@@ -1009,15 +1075,6 @@ export default function CluePage({ params }) {
           color: #d32f2f;
         }
 
-        .clue-title {
-          color: #68543c;
-          font-size: 1.8rem;
-          text-align: center;
-          margin-bottom: 20px;
-          border-bottom: 2px solid #9c6b30;
-          padding-bottom: 10px;
-        }
-
         .admin-tools {
           background-color: #f8d7da;
           border: 2px dashed #d9534f;
@@ -1060,9 +1117,10 @@ export default function CluePage({ params }) {
           align-items: center;
           justify-content: space-between;
           border-bottom: 2px solid #4a3c2a;
-          z-index: 10;
+          z-index: 2; /* Ensure it appears above the background layers */
           flex-shrink: 0;
           margin-bottom: 20px;
+          position: relative;
         }
 
         .team-name {