Mobile First Overhaul: Touch gestures, dual tap/drag, instant responsiveness and ergonomic controls across all mini games

app/static/css/escape.css

@@ -1551,12 +1551,13 @@ body {
     box-shadow: inset 0 8px 12px rgba(0,0,0,0.8), inset 0 -8px 12px rgba(0,0,0,0.8);
     position: relative;
     user-select: none;
+    touch-action: pan-y;
 }
 
 .dial-symbol {
-    font-size: 2.4rem;
+    font-size: clamp(1.6rem, 5vw, 2.3rem);
     filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
-    transition: transform 0.2s ease;
+    transition: transform 0.15s ease, opacity 0.15s ease;
 }
 
 .dial-label {
@@ -1576,7 +1577,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
 .pixies-hud {
@@ -1591,18 +1592,37 @@ body {
     box-shadow: 0 4px 15px rgba(0,0,0,0.6);
 }
 
+.arena-start-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(16, 11, 23, 0.92);
+    border: 3px solid var(--gold);
+    border-radius: 16px;
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    text-align: center;
+    box-shadow: 0 0 35px rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(4px);
+}
+
 .pixies-arena {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
+    gap: 0.5rem;
     width: 100%;
     aspect-ratio: 1 / 1;
     background: linear-gradient(135deg, #1f1728, #100b17);
     border: 3px solid #4a3461;
     border-radius: 16px;
-    padding: 0.75rem;
+    padding: 0.5rem;
     box-shadow: inset 0 0 25px rgba(0,0,0,0.8);
     touch-action: manipulation;
+    -webkit-user-select: none;
+    user-select: none;
 }
 
 .pixie-hole {
@@ -1616,6 +1636,8 @@ body {
     align-items: center;
     cursor: pointer;
     user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
     box-shadow: inset 0 6px 10px rgba(0,0,0,0.7);
 }
 
@@ -1628,11 +1650,11 @@ body {
 }
 
 .pixie-target {
-    font-size: 3.2rem;
+    font-size: clamp(2.4rem, 8vw, 3.4rem);
     position: absolute;
     transform: translateY(120%);
     transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-    pointer-events: auto;
+    pointer-events: none; /* Let hole handle tap directly! */
     filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
     animation: pixieFloat 0.8s infinite alternate ease-in-out;
 }
@@ -1648,7 +1670,7 @@ body {
 }
 
 .pixie-target.neville {
-    font-size: 3.4rem;
+    font-size: clamp(2.6rem, 9vw, 3.6rem);
     animation: shakeNeville 0.4s infinite alternate;
 }
 
@@ -1662,23 +1684,42 @@ body {
     100% { transform: translateY(0) rotate(5deg); }
 }
 
-@media (max-width: 480px) {
+/* Mobile responsive adjustments */
+@media (max-width: 600px) {
+    .container {
+        padding: 0.5rem;
+    }
+    .parchment-scroll {
+        padding: 0.75rem 0.9rem;
+        margin-bottom: 0.75rem;
+    }
+    .parchment-title {
+        font-size: 1.35rem;
+    }
+    .riddle-poem {
+        font-size: 1rem !important;
+        line-height: 1.4 !important;
+        margin: 0.25rem 0 !important;
+    }
     .cauldron-wrapper {
-        width: 240px;
-        height: 240px;
+        width: 220px;
+        height: 220px;
     }
     .cauldron-pot {
-        width: 215px;
-        height: 200px;
+        width: 200px;
+        height: 185px;
     }
     .dial-cylinder {
-        height: 75px;
+        height: 70px;
     }
-    .dial-symbol {
-        font-size: 2rem;
+    .dial-step-btn {
+        height: 38px;
     }
-    .pixie-target {
-        font-size: 2.6rem;
+    .cryptex-box {
+        padding: 0.75rem 0.4rem;
+    }
+    .cryptex-rings-row {
+        gap: 0.25rem;
     }
 }