Update style.css

style.css

@@ -1,16 +1,53 @@
-*{box-sizing:border-box}
-body{margin:0;font-family:Inter,Arial;background:#0f1720;color:#e6eef8;display:flex;flex-direction:column;align-items:center}
-#uiTop{width:100%;display:flex;justify-content:space-between;padding:8px 16px;align-items:center}
-#gameCanvas{background:linear-gradient(#74c476,#2d6b2d);border:6px solid #05131a;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
-#controls{width:1024px;display:flex;flex-direction:column;gap:8px;padding:8px}
-#controls .row{display:flex;gap:8px;justify-content:center}
-button{padding:8px 12px;border-radius:8px;border:none;background:#0ea5a4;color:#001;cursor:pointer;font-weight:700}
-button:active{transform:translateY(1px);opacity:0.9}
-#powerBar{height:10px;background:#123;border-radius:6px;margin-top:6px;overflow:hidden}
-#powerFill{height:100%;width:0%;background:linear-gradient(90deg,#ff5f6d,#ffc371)}
-.panel{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6)}
-.panel .panel-inner{background:#082028;padding:16px;border-radius:10px;width:90%;max-width:420px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
-.panel h3{margin-top:0}
-.catalog-item{background:#072b2b;padding:8px;margin:6px 0;border-radius:6px;display:flex;justify-content:space-between;align-items:center}
-#info{font-weight:700}
-#turnInfo{font-weight:700}
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden; /* Evita scroll */
+    background-color: #333;
+    touch-action: none; /* Crucial para juegos móviles */
+    user-select: none;
+}
+
+#game-container {
+    width: 100vw; 
+    height: 100vh; 
+    position: fixed; 
+    top: 0;
+    left: 0;
+}
+
+/* 📱 ESTILOS DE LOS BOTONES */
+#mobile-controls {
+    position: absolute;
+    bottom: 20px;
+    right: 20px; /* Botones a la derecha */
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.control-row {
+    display: flex;
+    gap: 10px;
+}
+
+.game-btn {
+    width: 60px;
+    height: 60px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border: 2px solid rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    font-size: 24px;
+    color: white;
+    cursor: pointer;
+    /* Evita que el navegador haga zoom al tocar rápido */
+    touch-action: manipulation; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.game-btn:active {
+    background-color: rgba(0, 255, 0, 0.5); /* Verde al presionar */
+}