Fix mobile broom flight with D-pad & touch-action, add Chamber II McGonagalls Wizard Chess

app/static/css/escape.css

@@ -808,7 +808,10 @@ body {
 #broomCanvas {
     display: block;
     width: 100%;
-    height: 480px;
+    touch-action: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
     cursor: crosshair;
 }
 
@@ -825,34 +828,128 @@ body {
     gap: 0.5rem;
 }
 
-.mobile-controls {
-    display: none;
-    margin-top: 1rem;
+/* Mobile Flight Cockpit & D-Pad */
+.mobile-flight-cockpit {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    gap: 1rem;
+    margin-top: 1.25rem;
+    padding: 1rem;
+    background: rgba(18, 15, 26, 0.9);
+    border: 2px solid rgba(229, 185, 72, 0.35);
+    border-radius: 14px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.dpad-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+
+.dpad-middle {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.dpad-btn {
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(145deg, #2a2238, #161220);
+    border: 2px solid var(--gold);
+    color: var(--gold);
+    border-radius: 8px;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
     justify-content: center;
-    gap: 0.8rem;
+    cursor: pointer;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+    transition: transform 0.1s, background 0.1s;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.dpad-btn:active {
+    transform: scale(0.92);
+    background: var(--gold);
+    color: #000;
+}
+
+.dpad-core {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    color: var(--gold);
+    opacity: 0.7;
+}
+
+.mobile-flight-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    max-width: 200px;
+}
+
+.dpad-boost-btn {
+    width: 100%;
+    padding: 0.9rem 1.25rem;
+    background: linear-gradient(135deg, #d4af37, #f39c12);
+    color: #1a1100;
+    border: 2px solid #fff;
+    border-radius: 12px;
+    font-size: 1.15rem;
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: 0 0 20px var(--gold-glow);
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: transform 0.1s;
+}
+
+.dpad-boost-btn:active {
+    transform: scale(0.95);
+    filter: brightness(1.2);
+}
+
+.touch-hint {
+    font-size: 0.78rem;
+    color: var(--text-dim);
+    text-align: center;
+    line-height: 1.4;
 }
 
 @media (max-width: 768px) {
-    .mobile-controls {
-        display: flex;
-    }
     .flame-wall-container {
         flex-direction: column;
     }
-    #broomCanvas {
-        height: 360px;
-    }
     .brand-title {
         font-size: 1.15rem;
     }
     .bag-label {
-        display: none; /* Icon and badge only on small screens for ultra compact header */
+        display: none;
     }
     .btn-bag {
         padding: 0.35rem 0.6rem;
     }
 }
 
+    .btn-bag {
+        padding: 0.35rem 0.6rem;
+    }
+}
+
 /* Modal Feedback */
 .modal-backdrop {
     position: fixed;
@@ -992,3 +1089,104 @@ body {
 .footer a:hover {
     text-decoration: underline;
 }
+
+/* McGonagall's Wizard Chess (Zauberschach) */
+.chess-board-wrapper {
+    max-width: 440px;
+    margin: 1.25rem auto;
+    background: #171322;
+    border: 3px solid var(--gold);
+    border-radius: 12px;
+    padding: 0.75rem;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.8);
+}
+
+.chess-board {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    border: 2px solid #5a4b38;
+    border-radius: 6px;
+    overflow: hidden;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.chess-sq {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.chess-sq.light {
+    background: #e8d8be;
+}
+
+.chess-sq.dark {
+    background: #5c4b37;
+}
+
+.chess-sq.selected {
+    background: #d4af37 !important;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
+}
+
+.chess-piece {
+    font-size: 2.2rem;
+    line-height: 1;
+    transition: transform 0.15s;
+    pointer-events: none;
+}
+
+.white-piece {
+    color: #ffffff;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
+    text-shadow: 0 0 2px #333;
+}
+
+.black-piece {
+    color: #1a1226;
+    filter: drop-shadow(0 2px 4px rgba(229, 185, 72, 0.4));
+    text-shadow: 0 0 3px #e5b948;
+}
+
+.chess-sq:hover .chess-piece {
+    transform: scale(1.1);
+}
+
+.move-dot {
+    width: 14px;
+    height: 14px;
+    background: rgba(229, 185, 72, 0.75);
+    border-radius: 50%;
+    position: absolute;
+    box-shadow: 0 0 8px var(--gold);
+    pointer-events: none;
+}
+
+.move-capture-ring {
+    width: 80%;
+    height: 80%;
+    border: 3px solid rgba(231, 76, 60, 0.85);
+    border-radius: 50%;
+    position: absolute;
+    box-shadow: 0 0 10px #e74c3c;
+    pointer-events: none;
+    animation: ringPulse 1s infinite alternate;
+}
+
+@keyframes ringPulse {
+    0% { transform: scale(0.9); opacity: 0.7; }
+    100% { transform: scale(1.05); opacity: 1; }
+}
+
+@media (max-width: 480px) {
+    .chess-piece {
+        font-size: 1.8rem;
+    }
+}
+