refine visuals and interactions: remove footer, enhance CSS styles, improve player and emote handling logic, and adjust asset scaling and animations

cmd/client/web/style.css

@@ -227,28 +227,32 @@ input[type=range]{width:100%;max-width:300px}
 }
 
 #presiQuoteBox {
-    max-width: 800px;
+    max-width: 900px;
     text-align: center;
-    background: #2c3e50; /* Solid Mono Blue-Grey */
-    padding: 30px;
-    border-radius: 10px;
-    border: 4px solid #ff0;
-    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
+    background: #2c3e50; /* Solid Blue-Grey */
+    padding: 50px;
+    border-radius: 15px;
+    border: 6px solid #ff0;
+    box-shadow: 15px 15px 0px rgba(0,0,0,0.6);
+    z-index: 100;
 }
 
 #presiQuoteText {
     font-family: sans-serif;
-    font-size: 24px;
+    font-size: 36px; /* Larger font */
     line-height: 1.4;
     font-style: italic;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
     color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
 }
 
 #presiQuoteAuthor {
     color: #ffcc00;
-    font-size: 18px;
+    font-size: 24px;
     font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 2px;
 }
 
 .presi-qr-container {
@@ -285,7 +289,7 @@ input[type=range]{width:100%;max-width:300px}
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: 150px;
+    height: 200px;
     pointer-events: none;
     z-index: 2;
     overflow: hidden;
@@ -293,7 +297,7 @@ input[type=range]{width:100%;max-width:300px}
 
 .presi-asset {
     position: absolute;
-    bottom: 20px;
+    bottom: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -302,6 +306,8 @@ input[type=range]{width:100%;max-width:300px}
 
 .presi-asset img {
     display: block;
+    max-height: 100px; /* Limit height */
+    max-width: 150px;  /* Limit width */
     object-fit: contain;
     filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
 }
@@ -310,40 +316,43 @@ input[type=range]{width:100%;max-width:300px}
     position: absolute;
     top: 0; left: 0; width: 100%; height: 100%;
     pointer-events: none;
-    z-index: 3;
+    z-index: 200; /* Above everything */
 }
 
 .presi-player {
     position: absolute;
-    transition: all 0.05s linear;
+    z-index: 210;
+}
+
+.presi-player img {
+    display: block;
+    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
 }
 
 .presi-player-emote {
     position: absolute;
-    top: -40px;
+    top: -60px; /* Higher up */
     left: 50%;
     transform: translateX(-50%);
-    font-size: 30px;
+    font-size: 50px; /* Much larger emotes */
+    z-index: 250;
+    text-shadow: 0 0 10px rgba(0,0,0,0.5);
     animation: emotePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 @keyframes emotePop {
     0% { transform: translateX(-50%) scale(0); opacity: 0; }
-    70% { transform: translateX(-50%) scale(1.2); opacity: 1; }
+    70% { transform: translateX(-50%) scale(1.5); opacity: 1; }
     100% { transform: translateX(-50%) scale(1); opacity: 1; }
 }
 
 .presi-footer {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
-    color: rgba(255, 255, 255, 0.4);
-    font-size: 10px;
+    display: none; /* Hidden as requested */
 }
 
 /* Animations */
 @keyframes assetSlide {
-    from { transform: translateX(100vw); }
-    to { transform: translateX(-200px); }
+    from { transform: translateX(110vw); }
+    to { transform: translateX(-300px); }
 }