From 0de5a3bd8c028a248233bb2d280279535b82e1c4 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Sun, 25 Jan 2026 07:55:39 -0700
Subject: [PATCH] Fix mobile host screen maybe

---
 components/RevealScreen.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/RevealScreen.tsx b/components/RevealScreen.tsx
index b3812cf..8bd7043 100644
--- a/components/RevealScreen.tsx
+++ b/components/RevealScreen.tsx
@@ -71,13 +71,13 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
     const colorClass = COLORS[correctOption.color];
 
     return (
-      <div className="flex flex-col items-center justify-center h-screen bg-gray-900 text-white p-8 relative overflow-hidden">
+      <div className="flex flex-col items-center justify-center h-screen bg-gray-900 text-white p-4 md:p-8 relative overflow-hidden">
         <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 pointer-events-none"></div>
         
         <motion.div 
             initial={{ opacity: 0, y: -50 }}
             animate={{ opacity: 1, y: 0 }}
-            className="text-4xl font-bold uppercase tracking-widest mb-12 opacity-80 relative z-10"
+            className="text-lg md:text-4xl font-bold uppercase tracking-widest mb-4 md:mb-12 opacity-80 relative z-10"
         >
             The correct answer is
         </motion.div>
@@ -86,12 +86,12 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
             initial={{ scale: 0, rotate: -10 }}
             animate={{ scale: 1, rotate: 0 }}
             transition={{ type: "spring", bounce: 0.5 }}
-            className={`${colorClass} p-12 rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.3)] flex flex-col items-center max-w-4xl w-full border-8 border-white/20 relative z-10`}
+            className={`${colorClass} p-6 md:p-12 rounded-2xl md:rounded-[3rem] shadow-[0_10px_0_rgba(0,0,0,0.3)] md:shadow-[0_20px_0_rgba(0,0,0,0.3)] flex flex-col items-center max-w-4xl w-full border-4 md:border-8 border-white/20 relative z-10`}
         >
-             <div className="bg-black/20 p-6 rounded-full mb-6">
-                <ShapeIcon size={80} fill="currentColor" />
+             <div className="bg-black/20 p-3 md:p-6 rounded-full mb-3 md:mb-6">
+                <ShapeIcon className="w-10 h-10 md:w-20 md:h-20" fill="currentColor" />
              </div>
-             <h1 className="text-5xl md:text-7xl font-black font-display text-center drop-shadow-md leading-tight">
+             <h1 className="text-3xl md:text-7xl font-black font-display text-center drop-shadow-md leading-tight">
                 {correctOption.text}
              </h1>
              {correctOption.reason && (
@@ -99,7 +99,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 0.3 }}
-                 className="mt-6 text-xl md:text-2xl text-center opacity-90 bg-black/20 px-6 py-4 rounded-2xl max-w-2xl"
+                 className="mt-3 md:mt-6 text-base md:text-2xl text-center opacity-90 bg-black/20 px-4 md:px-6 py-2 md:py-4 rounded-xl md:rounded-2xl max-w-2xl"
                >
                  {correctOption.reason}
                </motion.p>
@@ -112,10 +112,10 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.5 }}
             onClick={onNext}
-            className="mt-12 bg-white text-gray-900 px-8 py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 relative z-10 cursor-pointer"
+            className="mt-6 md:mt-12 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 relative z-10 cursor-pointer"
           >
             Continue to Scoreboard
-            <ChevronRight size={28} strokeWidth={3} />
+            <ChevronRight className="w-5 h-5 md:w-7 md:h-7" strokeWidth={3} />
           </motion.button>
         )}
       </div>